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

header h1{
  font-size:2.7em;
}


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

#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.5em;
    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;
}

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

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

#tab_1 .video{
    width: 54.5%;
    height: 64%;
    left: 22.75%;
    top: 20.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;
}

.concepts{
    position:absolute;
    width:55%;
    height: 67%;
    /* background:red; */
    left:16%;
    top: 18.5%;
}

.concepts > div{
    display:inline-block;
    float:left;
    width:100%;
    height: 14%;
    margin-top: 11px;
    box-sizing:border-box;
    background:#E83D37;
    border-radius:10px;
    border:solid 2px #000000;
}

.concepts > div > p{
    font-family:'cabin-regular';
    font-size:1.4em;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    color:#FFFFFF;
}

.drags{
    position:absolute;
    left:74%;
    top:20%;
    width:20%;
    height:67%;
    /* background:blue; */
}

.drags > div{
    display:inline-block;
    float:left;
}

.drags_caption{
    width:80%;
    height:14%;
    margin-left:10%;
    background:#3C7670;
    border-radius:10px;
}

.drags_caption > p{
    color:#FFFFFF;
    font-family:'cabin-bold';
    font-size:2em;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

.drag{
    width: 260px;
    height: 50px;
    background:whitesmoke;
    margin:2% 0;
    border-radius:10px;
    box-sizing:border-box;
    border:solid 2px #3C7670;
    left:0px;
    top:0px;
}

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

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

.drag > p{
    font-family:'cabin-regular';
    font-size:1.5em;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

.drag:nth-of-type(2){
    margin-top:5%;
}

/* Drag CSS */

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

/*.dragging{
    pointer-events:none;
}*/

.animation{
    transition:all 0.7s ease;
}

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

.highlight > p{
   color:#000000 !important;
}

.textareas{
    position:absolute;
    width:32%;
    height:65%;
    left:67%;
    top:32%;
    z-index:20;
    display:none;
}

.textareas textarea{
  resize:none;
  background:#FFFFFF;
  box-sizing:border-box;
  border:solid 4px #E83D37;
  border-radius:10px;
  padding:5px;
  outline:none;
  width:100%;
  height: 31%;
  overflow-x:hidden;
  overflow-y:scroll;
  font-family:'cabin-regular';
  font-size:1.2em;
  margin-bottom:2%;
}

.questions{
  position:absolute;
  left:44%;
  top:35%;
  width:20%;
  height:63%;
  /* background:red; */
  display:none;
}

.questions > div{
  display:inline-block;
  float:left;
  width:100%;
  height:20%;
  background:#E83D37;
  margin-bottom:24%;
  border-radius:10px;
}

.questions > div > p{
  font-family:'cabin-regular';
  font-size:1.4em;
  margin:0;
  padding:0;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  color:#FFFFFF;
}

.tab > .tab{
  z-index:30;
  background:red;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.buttons{
  position:absolute;
  left:6%;
  top:20%;
  width:5%;
  height:55%;
  z-index:40;
}

.buttons > .button{
  display:inline-block;
  float:left;
  height:18%;
  width:100%;
  margin-bottom:14%;
  background:#E83D37;
  border-radius:10px;
}

.button.active{
    background: #953737 !important;
}

.button:not(.active):hover{
  cursor:pointer;
  transform:scale(1.05);
}

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

.button > p{
  color:#FFFFFF;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  font-family:'cabin-regular';
  font-size:2em;
}

#tab_4{
    display:block;
}

.options{
  position:absolute;
  width:29%;
  height:22%;
  left:60%;
  background:#FFB72B;
  border-radius:10px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content: space-around;
}

.options:nth-of-type(1){
  top:15%;
}

.options:nth-of-type(2){
  top:39%;
}

.options:nth-of-type(3){
  top:63%;
}

.options > p{
  padding:0.5% 3%;
  text-align:justify;
  font-family:'cabin-regular';
  font-size:1.3em;
}

.options > p:hover{
  background:lightblue;
  cursor:pointer;
}

.options > p.selected{
  background:lightblue !important;
}

.options > p:active{
  transform:scale(0.95);
}

.options > p:not(.correct):active{
  background:red;
}

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

.answer_text{
  position:absolute;
  top: 25%;
  box-sizing:border-box;
  border:solid 2px #000000;
}

.answer_text > div{
  display:inline-block;
  float:left;
  width: 38px;
  height: 40px;
}

.answer_text > div > input{
  border:none;
  font-family:'cabin-regular';
  background:transparent;
  width:100%;
  height:100%;
  text-align:center;
  font-size:2em;
  outline:none;
}

.answer_text:nth-of-type(1){
  left: 9%;
}

.answer_text:nth-of-type(2){
  left: 40%;
}

.answer_text:nth-of-type(3){
  left: 71%;
}

.answer_text > div > p{
  font-family:'cabin-regular';
  font-size:2em;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.incorrect{
  background:red !important;
}

.incorrect > p{
  color:#FFFFFF !important;
}


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

.draggable{
    pointer-events: none;
    position: absolute;
}



.row{
    position:absolute;
    height: 4%;
    width: 88%;
    left: 17%;
    display:none;
}

.row:nth-of-type(2){
    left: 19%;
}

.row:nth-of-type(3){
    left: 26%;
}

.row:nth-of-type(4){
    top: 33%;
}

.row:nth-of-type(5){
    top: 42.4%;
}

.point{
    display:inline-block;
    float:left;
    height: 100%;
    width: 2.5%;
    border-radius:100%;
    margin-right: 33.9%;
    box-sizing:border-box;
    border: solid 2px #00FFF3;
}

.point:nth-of-type(3){
  margin-right:0;
}

.point:not(.dropped):hover{
    cursor:pointer;
}

#circle_pointer{
    position:absolute;
    width:2%;
    height:4%;
    border-radius:100%;
    pointer-events:none;
    display:none;
}

#svg{
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
    z-index:10;
}

#line{
    display:none;
}

.show{
    display:block !important;
}

.point > div{
    width:90%;
    height:90%;
    border-radius:100%;
    background:#00FFF3;
    position:relative;
    left: 5%;
    top: 5%;
    display:none;
}

.dropping{
  pointer-events:none;
}