/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

/* CSS for Layout Creator Page */
.btn {
  display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
cursor: pointer;
}
.btn-primary {
  color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
color: #fff;
background-color: #c82333;
border-color: #bd2130;
}
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-column {
  flex-direction: column;
}
.fixed {
  position: absolute;
  bottom:0;
  right:0;
  z-index: 999;
}
.fixed .btn {
  margin-bottom: 0.25em;
}
.hidden {
  display: none
}
.disabled:hover {
  cursor: default !important;
}
.disabled {
  opacity: 0.3;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.center {
  text-align: center;
}
.contanier {
  padding: 2em;
}
.background-grey {
  background-color: rgb(243, 243, 243);
}
.custom-container {
  width: 80%;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.custom-container hr {
  width:60%;
  border:1px solid gold;
}
.custom-container h1 {
  text-align: center;
}

.search input {
  padding:6px;
}
.ribbon-type {
	padding: 1em 2em;
	border: solid 2px transparent;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 2em;
	background-color: white;
	border:2px solid #afafaf;
	color: #303030;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ribbon-type.selected {
	box-shadow: 1px 1px 5px #000000 !important;
border: solid 2px gold;
color: black;
box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;

}
.ribbon-type:hover {
	cursor:pointer;
}
.ribbon-type span {
	line-height:1.4em;
}
div.ribbon-type {
	max-height:none !important;
}
.ribbon-container {
  width: 16%;
min-width: 140px;
padding: 0.25%;
margin: 0.25%;
position:relative;
}
.ribbon-container:active, .ribbon-type:active {
  box-shadow: 1px 1px 5px #555 inset !important;
}
.ribbon-container:hover {
  cursor: pointer;
}
.ribbon-container.active-item {
  opacity: 1;
	border:1px solid gold;
	box-shadow: 1px 1px 5px #555;
}
.ribbon-image {
  display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.ribbon-image span {
  font-size: 0.75em;
font-weight: 700;
text-align: center;
}
#render {
  background: black;
  position: relative;
  width:100%;
  min-width: 360px;
  margin: 0;
  padding:2em;
}
#render-container {
    position: relative;
    z-index: -1;
    padding: 4px;
    background: linear-gradient(to right, gold, goldenrod);
    width:60%;
    margin:auto;
    margin-bottom: 2em;
}
#render img {
  width:50px;
}
#render img.single {
  margin-left: 30%;
  margin-right: 30%;
}
#render img.double-left {
  margin-left: 15%;
}
#render img.double-right {
  margin-right: 15%;
}
#purchase-container {
  flex-direction: column;
  align-items: center;
  margin-bottom: 3em;
}
#purchase-container .btn {
  width:260px;
  margin-top: 1em;
  justify-content: center;
  display: flex;
  position: relative;
}
.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  margin-left: 0.5em;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
  cursor:pointer;
}
button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}
button:disabled:hover,
button[disabled]:hover {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.gradient-box {

  display: flex;
  align-items: center;
  width: 50vw;
  margin: auto;
  max-width: 22em;

  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;

  color: #FFF;
  background: #000;
  background-clip: padding-box; /* !importanté */
  border: solid 5px transparent; /* !importanté */
  border-radius: 1em;

  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: 5px; /* !importanté */
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, gold, goldenrod);
  }
}

@media only screen and (max-width: 1200px) {
  .ribbon-container {
    min-width: 180px;
    padding: 0.25em;
    margin: 0.25em;
    flex:1
  }
  .custom-container {
    width:86%;
  }
}
@media only screen and (max-width: 900px) {
  .custom-container {
    width:86%;
  }
	.render-container {
		width:80% !important;
	}
  .ribbon-container {
    min-width: 160px;
    padding: 0.25em;
    margin: 0.25em;
    flex:1
  }
  #render {
    width:100%;
	padding:1.5em!important;
  }
}

@media only screen and (max-width: 600px) {
  .custom-container {
    width:92%;
  }
	.render-container {
		width:95% !important;
	}
  .ribbon-container {
    min-width: 140px;
    max-width:180px;
    padding: 0.25em;
    margin: 0.25em;
    flex:1
  }
  #render {
    width:100%;
	padding:1em!important;
  }
}
@media only screen and (max-width: 400px) {
  .custom-container {
    width:96%;
  }
	.render-container {
		width:98% !important;
	}
  .ribbon-container {
    min-width: 140px;
    max-width:180px;
    padding: 0.25em;
    margin: 0.25em;
    flex:1
  }
  #render {
    width:100%;
	padding:0.25em!important;
	min-width:100px !important;
  }
}