@font-face {
    font-family: LE_SILENCE_DES_CAFARDS;
    src: url('../fonts/LE_SILENCE_DES_CAFARDS.ttf');
}

@font-face {
    font-family: cabin-regular;
    src: url('../fonts/Cabin-Regular.ttf');
}

@font-face {
    font-family: cabin-italic;
    src: url('../fonts/Cabin-Italic.ttf');
}

@font-face {
    font-family: cabin-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

@font-face {
    font-family: cabin-bold-italic;
    src: url('../fonts/Cabin-BoldItalic.ttf');
}

@keyframes colorFade {
    from {background-color: #06364B;}
    to {background-color: #0E7DAD;}
}

@keyframes colorOriginal {
    from {background-color: #0E7DAD;}
    to {background-color: #06364B;}    
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar:hover{
    cursor:pointer;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(76, 75, 73, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(76, 75, 73, 1);
}

@-webkit-keyframes rotate /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate {
  -webkit-animation: rotate 40s linear infinite;
  -moz-animation: rotate 40s linear infinite;
  -ms-animation: rotate 40s linear infinite;
  -o-animation: rotate 40s linear infinite;
  animation: rotate 40s linear infinite;
}

*{
  margin:0;
  padding:0;
}


.tab{
    position:absolute;
    width:97%;
    height:83%;
    border-radius:15px;
    display:none;
    overflow:hidden;
    background-size:cover !important;
}

#tab_1{
    display:block;
    background:url("../img/bg_3_1_1.png");
}

#tab_2{
    background:url("../img/bg_3_1_2.png");
}

#tab_3{
    background:url("../img/bg_3_1_3.png");
}

#tab_4{
    background:url("../img/bg_3_1_4.png");
}

#tab_5{
    background:url("../img/bg_3_1_5.png");
}

#tab_6{
    background:url("../img/bg_3_1_6.png");
}

#tab_7{
    background:url("../img/bg_3_1_7.png");
}

.animate{
  opacity:0;
}

@-webkit-keyframes fadeIn {
    from {
        opacity:0;
        visibility: hidden;
    } 
    to {
        opacity:1;
        visibility: visible;
    } 
}

@-moz-keyframes fadeIn {
    from {
        opacity:0;
        visibility: hidden;
    } 
    to {
        opacity:1;
        visibility: visible;
    } 
}

@-ms-keyframes fadeIn {
    from {
        opacity:0;
        visibility: hidden;
    } 
    to {
        opacity:1;
        visibility: visible;
    } 
}

@-o-keyframes fadeIn {
    from {
        opacity:0;
        visibility: hidden;
    } 
    to {
        opacity:1;
        visibility: visible;
    } 
}

@keyframes fadeIn {
    from {
        opacity:0;
        visibility: hidden;
    } 
    to {
        opacity:1;
        visibility: visible;
    } 
}

/* Drag CSS */

.grabbing{
  cursor: -webkit-grabbing; 
  cursor: -moz-grabbing;
}

.dragging{
  pointer-events:none;
}

.animation{
  transition:all 0.7s ease;
}

.highlight{
  background:whitesmoke;
  box-sizing:border-box;
  border:dashed 2px gray;
}

.fadeIn{
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  animation: fadeIn 1s;
  animation-fill-mode: forwards; 
  -webkit-animation-fill-mode: forwards; 
  -moz-animation-fill-mode: forwards; 
  -ms-animation-fill-mode: forwards; 
  -o-animation-fill-mode: forwards; 
}

.tab_nav{
  position:absolute;
  bottom:0;
  width:100%;
  height:9.5%;
  left:0;
  z-index:1;
  pointer-events:none;
}

.tab_nav div{
  display:inline-block;
  float:left;
  height:100%;
  pointer-events:all;
}

.custom_btn{
    width: 5.3%;
    height:100%;
    background: #AC1568;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #640F3D;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#BC3987;
}

.custom_btn:active{
    transform:scaleY(0.8);
    background:#8C2663;
}

.btn_previous{
  border-radius:10px 10px 0 0;
  left: 1%;
}

.btn_home{
  border-radius:0;
  right:33%;
}

.btn_next{
  border-radius:10px 10px 0 0;
  right: 1%;
}

.show_next{
  position:absolute;
  font-size:5em;
  color:#AC1568;
}

.show_next:hover{
  cursor:pointer;
  transform:scale(1.05);
}

.show_next:active{
  transform:scale(0.95);
}

#show_next_1{
  left:27%;
  top:62%;
}

#show_next_2{
  left: 48%;
  top:62%;
  opacity:0;
}

#show_next_3{
  left: 67%;
  top:62%;
  opacity:0;
}

.glare{
  text-shadow: 0 0 14px rgba(246,255,0,1);
  color:rgb(246,255,0);
}

.shine{
  -webkit-filter: drop-shadow(8px 8px 20px yellow);

}

.element{
  position:absolute;
  max-width:100%;
}

.hover_scale:hover{
  transform:scale(1.025);
  cursor:pointer;
}

.hover_scale:active{
  transform:scale(0.975)
}

#element_1{
  left: 6%;
  top: 18%;
  width: 53%;
}

#element_2{
  left: 22%;
  top: 35%;
  width: 30%;
}

#element_3{
  left: 7%;
  top: 30%;
  width: 12%;
}

#element_4{
  left: 24%;
  top: 69%;
  width: 12%;
}

#element_5{
  left: 46%;
  top: 63%;
  width: 18%;
}

#element_6{
  left: 70%;
  top: 52%;
  width: 15%;
}

#element_7{
  left: 82%;
  top: 16%;
  width: 12%;
}

#element_8{
  left: 81%;
  top: 42%;
  width: 14%;
}

#element_9{
  left: 23%;
  top: 16%;
  width: 53%;
}

#element_10{
  left: 37.5%;
  top: 27%;
  width: 25%;
}

#element_11{
  left: 7%;
  top: 46%;
  width: 19%;
}

#element_12{
  left: 30%;
  top: 46%;
  width: 21%;
  opacity:0;
}

#element_13{
  left: 52%;
  top: 46%;
  width: 17%;
  opacity:0;
}

#element_14{
  left: 75%;
  top: 46%;
  width: 21%;
  opacity:0;
}

#element_15{
  left: 6%;
  top: 20%;
  width: 24%;
}

#element_16{
  left: 80%;
  top: 31%;
  width: 15%;
}

#element_17{
  left: 11%;
  top: 37%;
  width: 17%;
}

#element_18{
  left: 11%;
  top: 86%;
  width: 17%;
}

#element_19{
  left: 33%;
  top: 94%;
  width: 15%;
}

#element_20{
  left: 6%;
  top: 20%;
  width: 24%;
}

#element_21{
  left: 80%;
  top: 31%;
  width: 15%;
}

#element_22{
  left: 30%;
  top: 26%;
  width: 17%;
}

#element_23{
  left: 21%;
  top: 51%;
  width: 17%;
}

#element_24{
  left: 44%;
  top: 92.5%;
  width: 17%;
}

.drags{
  position:absolute;
  width: 17%;
  right:5%;
  top: 18%;
  display:flex;
  flex-direction:column;
  padding:7px 15px;
  border-radius:10px;
  background:rgba(255, 255, 255, 0.9);
}

.drag{
  width:100%;
  padding:7px 0;
  position:relative;
  left:0px;
  top:0px;
}

.drag:hover{
  cursor:pointer;
  transform:scale(1.05);
}

.drag:active{
  transform:scale(0.95);
}

#element_25, #element_26, #element_27{
  left: 62%;
  top: 23.5%;
  width: 35%;
  display:none;
}

textarea{
  resize:none;
  background:#DDCCE1;
  border:solid 4px #56006A;
  border-radius:10px;
  padding:5px;
  outline:none;
  position:absolute;
  width:34%;
  height:48%;
  overflow-x:hidden;
  overflow-y:scroll;
  font-family:'cabin-regular';
  font-size:1.2em;
  right:3%;
  top:36%;
  display:none;
}

.drop{
  position:absolute;
  width: 15%;
  height: 8%;
  background:rgba(255, 255, 255, 0.5);
  border-radius:10px;
}

.dropped{
  background:transparent;
}

.drop img{
  width: 100%;
}

#drop_1{
  left: 18%;
  top: 17%;
}

#drop_2{
  left: 41%;
  top: 14%;
}

#drop_3{
  left: 16%;
  top: 90.5%;
  width:23%;
}

#drop_4{
  left: 45%;
  top: 89.5%;
  width:20%;
}

#drop_5{
  left: 34%;
  top: 23%;
}

#drop_6{
  left: 2%;
  top: 40%;
}

#drop_7{
  left: 2%;
  top: 66.5%;
}

#drop_8{
  left: 54%;
  top: 89.5%;
}

#drop_9{
  left: 47%;
  top: 68.5%;
}

#drop_10{
  left: 34%;
  top: 20%;
}

#drop_11{
  left: 10%;
  top: 32%;
}

#drop_12{
  left: 27%;
  top: 46.5%;
}

#drop_13{
  left: 8%;
  top: 84.5%;
}

#drop_14{
  left: 31%;
  top: 74.5%;
}

#drop_15{
  left: 58%;
  top: 57.5%;
}

#drop_16{
  left: 58%;
  top: 32%;
}

.start_animations{
  opacity:1;
}

.pointer-events-disabled{
  pointer-events:none;
}