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

*{
  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.png");
}

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

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

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

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

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

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

#tab_8{
    background:url("../img/bg_3_8.png");
}

#tab_9{
    background:url("../img/bg_3_9.png");
}

#tab_10{
    background:url("../img/bg_3_10.png");
}

#footer{
    width:100%;
    height: 7%;
    position:absolute;
    bottom: 5%;
    width:93%;
    left:50%;
    transform:translateX(-50%);
    background-repeat:no-repeat;
    background-size:3%;
    z-index: 50;
}


#footer div{
    display:inline-block;
    width:12%;
    position:absolute;
    border-radius:6px;
    box-sizing:border-box;
    box-shadow: 
    0 0 0 2px #000,
    0 0 0 7px #ABE2FB,
    0 0 0 8px #000;
    transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -webkit-transition:all 0.2s ease;
}

#footer div:not(.pressed){
    height:100%;
    background: rgba(125,160,204,1);
    background: -moz-linear-gradient(-76deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 48%, rgba(92,137,191,1) 49%, rgba(92,137,191,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(125,160,204,1)), color-stop(48%, rgba(125,160,204,1)), color-stop(49%, rgba(92,137,191,1)), color-stop(100%, rgba(92,137,191,1)));
    background: -webkit-linear-gradient(-76deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 48%, rgba(92,137,191,1) 49%, rgba(92,137,191,1) 100%);
    background: -o-linear-gradient(-76deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 48%, rgba(92,137,191,1) 49%, rgba(92,137,191,1) 100%);
    background: -ms-linear-gradient(-76deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 48%, rgba(92,137,191,1) 49%, rgba(92,137,191,1) 100%);
    background: linear-gradient(-15deg, rgba(125,160,204,1) 0%, rgba(125,160,204,1) 48%, rgba(92,137,191,1) 49%, rgba(92,137,191,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7da0cc', endColorstr='#5c89bf', GradientType=1 );
    box-shadow: 
    0 0 0 2px #000,
    0 0 0 7px #ABE2FB,
    0 0 0 8px #000,
    8px 9px 8px 4px rgba(50, 50, 50, 0.75);

}

#footer p{
    position:relative;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    font-family:'cabin-regular';
    color:white;
    font-size:1.9em;
    text-align:center;

}

#footer div:first-of-type{
    left: 0px;
}

#footer div:nth-of-type(2){
    left: 14%;
}

#footer div:last-of-type{
    left: 28%;
}

#footer div:not(.pressed):hover{
    transform:scaleY(1.15);
    cursor:pointer;
    opacity:0.85;
}

#footer div:not(.pressed):active{
    transform:scaleY(0.95);
    opacity:1;
    transition:none;
}

.pressed{
    display:inline-block;
    width:17%;
    height:100%;
    background:red;
    position:absolute;
    top:10%;
    height:80%;
    background: rgba(87,103,125,1);
    background: -moz-linear-gradient(-76deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 49%, rgba(45,65,93,1) 49%, rgba(45,65,93,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(87,103,125,1)), color-stop(49%, rgba(87,103,125,1)), color-stop(49%, rgba(45,65,93,1)), color-stop(100%, rgba(45,65,93,1)));
    background: -webkit-linear-gradient(-76deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 49%, rgba(45,65,93,1) 49%, rgba(45,65,93,1) 100%);
    background: -o-linear-gradient(-76deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 49%, rgba(45,65,93,1) 49%, rgba(45,65,93,1) 100%);
    background: -ms-linear-gradient(-76deg, rgba(87,103,125,1) 0%, rgba(87,103,125,1) 49%, rgba(45,65,93,1) 49%, rgba(45,65,93,1) 100%);
}

.pressed:hover{
    cursor:default;
}

.tab_nav{
  position:absolute;
  bottom:0;
  width:16%;
  height:9.5%;
  left: 42%;
  z-index:500;
}

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

.custom_btn{
    width:33.3%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#79C84F;
}

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

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

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

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

.video video{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    border:none;
}

.video{
    position:absolute;
    background:#35311E;
}

#tab_9 .video{
    width: 52%;
    height: 61%;
    left: 4%;
    top: 14.2%;
}

.btn_play{
    position:absolute;
    z-index:1;
    height: 20%;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

.btn_play:hover{
    cursor:pointer;
    opacity:0.85;
    transform:translateX(-50%) translateY(-50%) scale(1.1);
}

.btn_play:active{
    transform:translateX(-50%) translateY(-50%) scale(0.95);
}

.btn_close{
    width:5%;
    position:absolute;
}

.btn_close:hover{
    cursor:pointer;
    opacity:0.85;
    transform:scale(1.1);
}

.btn_close:active{
    transform:scale(0.95);
    opacity:1;
}

.illustration{
    position:absolute;
    width:35%;
    left:27%;
    bottom:39%;
    z-index:10;
}

#tab_1 .illustration{
  height:51%;
}

#tab_2 .illustration{
    width:50%;
    top:4%;
    left:21%;
}

.illustration:not(.animated):hover{
    cursor:pointer;
    transform:scale(1.05);
}

.illustration:not(.animated):active{
    transform:scale(0.95);
}

.image{
    position:absolute;
}

#tab_2 .image{
    left:41%;
    top:42%;
    width:10%;
}

#tab_2 h5{
  position:absolute;
  width:5%;
}

h5{
    font-family:'cabin-regular';
    font-size:1.5em;
    text-align:center;
}

#tab_2 h5:nth-of-type(1){
    left:15%;
    top:38%;
}

#tab_2 h5:nth-of-type(2){
    left:38%;
    top:16%;
    width:15%;
}

#tab_2 h5:nth-of-type(3){
    left:44%;
    top:56%;
}

.point{
  position:absolute;
  width:2.5%;
  height:5%;
  box-shadow:0px 0px 12px red;
  background:orange;
  border-radius:100%;
  display:none;
  z-index:30;
}

#tab_3 .point:nth-of-type(1){
  left:17%;
  top:42.8%; 
}

#tab_3 .point:nth-of-type(2){
  left:39.2%;
  top:51.5%; 
}

#tab_3 .point:nth-of-type(3){
  left:73%;
  top:41.4%; 
}

#tab_4 .point:nth-of-type(1){
  left:15%;
  top:35.5%; 
}

#tab_4 .point:nth-of-type(2){
  left:43.9%;
  top:38.2%; 
}

#tab_4 .point:nth-of-type(3){
  left:70.6%;
  top:28.7%; 
}

#tab_4 .point:nth-of-type(4){
  left:77%;
  top:38.6%; 
}

#tab_5 .point:nth-of-type(1){
  left:34%;
  top:50%; 
}

#tab_6 .point:nth-of-type(1){
  left:54%;
  top:29.3%; 
}

#tab_7 .point:nth-of-type(1){
  left: 40.9%;
  top:30.9%;
}

#tab_7 .point:nth-of-type(2){
  left:43.7%;
  top:30.9%; 
}

#tab_7 .point:nth-of-type(3){
  left:42.7%;
  top:47%; 
}

#tab_7 .point:nth-of-type(4){
  left:45.5%;
  top:43.1%; 
}

#tab_7 .point:nth-of-type(5){
  left:47.6%;
  top:54.3%; 
}

#tab_7 .point:nth-of-type(5){
  left:47.6%;
  top:54.3%; 
}

#tab_8 .point:nth-of-type(1){
  left:13.9%;
  top:41.5%; 
}

#tab_8 .point:nth-of-type(2){
  left: 44.2%;
  top: 22.5%;
}

#tab_8 .point:nth-of-type(3){
  left:74.5%;
  top:51%; 
}

.solution{
  position:absolute;
  width:30%;
  display:none;
}

.solution:nth-of-type(1){
  left:25%;
  top:20%;
}

.solution:nth-of-type(2){
  left:25%;
  top:39%;
}

.solution:nth-of-type(3){
  left:25%;
  top:59.5%;
}

.problem{
  position:absolute;
}

.problem:hover{
  cursor:pointer;
}

.problem:nth-of-type(1){
  left:2%;
  top:19.4%;
  width:18.2%;
  height:14%;
}

.problem:nth-of-type(2){
  left:0.5%;
  top:39%;
  width:21.3%;
  height:14%;
}

.problem:nth-of-type(3){
  left:2.5%;
  top:60.5%;
  width:17.5%;
  height:14%;
}

@keyframes animation_1{
    0%   {height: 51%;}
    25%  {height: 53%;}
    50%  {height: 51%;}
    75%  {height: 54%;}
    100% {height: 51%;}
}


.animate_1{
    animation-name: animation_1;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes animation_2{
    0%   {-webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);}
    100% {-webkit-transform: rotate(6deg);
       -moz-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
         -o-transform: rotate(6deg);
            transform: rotate(6deg);}
}

.animate_2{
    animation-name: animation_2;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes animation_3{
    0%   {left:41%;}
    100% {left:33%;}
}

.animate_3{
    animation-name: animation_3;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes animation_4{
    0%   {top:38%;}
    100% {top:32%;}
}

.animate_4{
    animation-name: animation_4;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes animation_5{
    0%   {left:44%;}
    100% {left:36%;}
}

.animate_5{
    animation-name: animation_5;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.caption{
  position:absolute;
  width:20%;
  background:#64B238;
  box-sizing:border-box;
  border-radius:10px;
  border-bottom:solid 4px #006633;
  color:#FFFFFF;
  top:4%;
  display:none;
}

.caption:nth-of-type(1){
  left:5.5%;
}

.caption:nth-of-type(2){
  left:35.3%;
}

.caption:nth-of-type(3){
  left:63.6%;
}

#tab_5 .caption{
  left:35%;
}

#tab_6 .caption, #tab_7 .caption{
  left:40%;
}

.selectable_area{
  position:absolute;
  width:19.2%;
  height:56.5%;
}

.selectable_area:nth-of-type(4){
  left:6%;
  top:13.7%;
}

.selectable_area:nth-of-type(5){
  left:35.7%;
  top:13.7%;
}

.selectable_area:nth-of-type(6){
  left:64%;
  top:13.7%;
}

#tab_4 .selectable_area, #tab_8 .selectable_area{
  top:9.7%;
}

#tab_4 .selectable_area:nth-of-type(5){
  top:9.7%;
  left:6.2%;
}

#tab_4 .selectable_area:nth-of-type(6){
  top:9.7%;
  left:36%;
}

#tab_4 .selectable_area:nth-of-type(7){
  top:9.7%;
  left:64.2%;
}

#tab_5 .selectable_area:nth-of-type(2){
  top:7%;
  left:8.8%;
  width:76.4%;
  height:60.2%;
}

#tab_6 .selectable_area:nth-of-type(2){
  top:7%;
  left:24.4%;
  width:51.3%;
  height:60.2%;
}

#tab_7 .selectable_area:nth-of-type(6){
  top:7%;
  left:24.4%;
  width:51.3%;
  height:60.2%;
}

.selectable_area:hover{
  cursor:pointer;
}

#tab_8 .caption{
  display:block;
}

.content{
  position:absolute;
  width:100%;
  height:100%;
  /* background:red; */
  z-index:10;
}

.btn_home:first-of-type{
  border-radius:10px 0 0 0;
}

.btn_next:first-of-type{
  border-radius:10px 10px 0 0;
}

.btn_home:last-of-type{
  border-radius:0 10px 0 0;
}

#tab_8 .point{
  opacity:0;
  display:block;
}