@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');
}

::-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_2_1.png");
}

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

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

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

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

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

#tab_7{
    background:url("../img/bg_3_2_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_1{
  left:27%;
  top:62%;
}

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

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

.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: 16%;
  top: 53%;
  width: 45%;
}

#element_3{
  left: 11%;
  top: 53%;
  width: 6%;
}

#element_4{
  left: 11%;
  top: 37%;
  width: 3%;
}

#element_5{
  left: 51%;
  top: 41%;
  width: 25%;
}

#element_6{
  left: 86%;
  top: 34%;
  width: 1%;
}

#element_7{
  left: 86%;
  top: 55%;
  width: 1%;
}

#element_8{
  left: 15%;
  top: 31%;
  width: 15%;
}

#element_9{
  left: 42%;
  top: 36%;
  width: 8%;
}

#element_10{
  left: 81.5%;
  top: 26%;
  width: 9%;
}

#element_11{
  left: 6%;
  top: 43%;
  width: 15%;
}

#element_12{
  left: 77%;
  top: 45%;
  width: 15%;
}

#element_13{
  left: 10%;
  top: 85%;
  width: 15%;
}

#element_14{
  left: 62%;
  top: 86%;
  width: 11%;
}

#element_15{
  left: 73%;
  top: 73%;
  width: 24%;
}

#element_16{
  left: 55%;
  top: 79%;
  width: 27%;
}

#element_17{
  left: 4%;
  top: 17%;
  width: 19%;
}

#element_18{
  left: 5%;
  top: 34%;
  width: 12%;
}

#element_19{
  left: 35%;
  top: 32%;
  width: 10%;
}

#element_20{
  left: 3%;
  top: 49%;
  width: 14%;
}

#element_21{
  left: 29%;
  top: 48%;
  width: 9%;
}

#element_22{
  left: 16%;
  top: 62%;
  width: 21%;
}

#element_23{
  left: 22%;
  top: 76%;
  width: 14%;
}

#element_24{
  left: 14%;
  top: 87.5%;
  width: 6%;
}

#element_25{
  left: 33%;
  top: 94.5%;
  width: 8%;
}

#element_26{
  left: 63%;
  top: 40.5%;
  width: 5%;
}

#element_27{
  left: 55.5%;
  top: 21.5%;
  width: 14%;
}

#element_28{
  left: 70%;
  top: 46.5%;
  width: 20%;
}

#element_29{
  left: 53%;
  top: 42.5%;
  width: 9%;
}

#element_30{
  left: 62%;
  top: 54.5%;
  width: 12%;
}

#element_31{
  left: 41.5%;
  top: 58%;
  width: 17%;
}

#element_32{
  left: 39%;
  top: 72.5%;
  width: 9%;
}

#element_33{
  left: 63%;
  top: 80.5%;
  width: 26%;
}

#element_34{
  left: 16%;
  top: 94.5%;
  width: 16%;
}

#element_35{
  left: 36%;
  top: 65.5%;
  width: 5%;
}

#element_36{
  left: 4%;
  top: 17%;
  width: 19%;
}

#element_37{
  left: 27%;
  top: 24%;
  width: 15%;
}

#element_38{
  left: 45%;
  top: 51%;
  width: 27%;
}

#element_39{
  left: 45%;
  top: 40%;
  width: 19%;
}

#element_40{
  left: 41%;
  top: 20%;
  width: 13%;
}

#element_41{
  left: 55%;
  top: 23%;
  width: 20%;
}

#element_42{
  left: 69%;
  top: 58.5%;
  width: 19%;
}

#element_43{
  left: 63%;
  top: 45.5%;
  width: 10%;
}

#element_44{
  left: 67%;
  top: 79.5%;
  width: 14%;
}

#element_45{
  left: 73.5%;
  top: 68.5%;
  width: 1%;
}

#element_46{
  left: 70%;
  top: 88.5%;
  width: 9%;
}

#element_47{
  left: 50%;
  top: 73.5%;
  width: 14%;
}

#element_48{
  left: 56%;
  top: 86.5%;
  width: 14%;
}

#element_49{
  left: 45.5%;
  top: 92%;
  width: 10%;
}

#element_50{
  left: 41%;
  top: 85.5%;
  width: 3%;
}

#element_51{
  left: 25%;
  top: 93.5%;
  width: 11%;
}

#element_52{
  left: 32%;
  top: 33.5%;
  width: 8%;
}

#element_53{
  left: 25%;
  top: 27.5%;
  width: 8%;
}

input{
  position:absolute;
  width: 14%;
  height:6%;
  border-radius:15px;
  background:rgba(255, 255, 255, 1);
  outline:none;
  text-align:center;
  font-family:'cabin-regular';
  font-size: 1.6em;
  box-sizing:border-box;
  border:solid 1px #000000;
}

#input_1{
  left: 5%;
  top: 37%;
}

#input_2{
  left: 3%;
  top: 57%;
}

#input_3{
  left: 15%;
  top: 71%;
}

#input_4{
  left: 30%;
  top: 81%;
}

#input_5{
  left: 48%;
  top: 67%;
}

#input_6{
  left: 73%;
  top: 30%;
}

#input_7{
  left: 31%;
  top: 57%;
}

#input_8{
  left: 83%;
  top: 88%;
}

#element_54{
  left: 22%;
  top: 24%;
  width: 8%;
}

.incorrect{
  background:red !important;
  color:white !important;
}

.correct{
  background: #1AB31A !important;
  color:white !important;
}