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


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

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

#header{
    width:100%;
    height: 7%;
    position:absolute;
    top:17%;
    width:93%;
    left:50%;
    transform:translateX(-50%);
    background-repeat:no-repeat;
    background-size:3%;
    z-index:2;
}


#header div{
    display:inline-block;
    width:12%;
    position:absolute;
    border-radius:6px;
    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;
}

#header 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);

}

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

}

#header div:first-of-type{
    right:14%;
}

#header div:last-of-type{
    right:0;
}

#header div.not_pressed:hover{
    transform:scaleY(1.15);
    cursor:pointer;
    opacity:0.85;
}

#header 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:59.3%;
    height: 61.3%;
    left:20.7%;
    top: 24.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);
}

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

.drop{
    position:absolute;
    width:28.6%;
    height:24%;
    /* background:whitesmoke; */
}

.drop:nth-of-type(1), .drop:nth-of-type(2), .drop:nth-of-type(3) {
    width:28.6%;
}

.drop:nth-of-type(1){
    left:38.3%;
    top:28.5%;
    height:23%;
}

.drop:nth-of-type(2){
    left:38.3%;
    top:53.7%;
    height:22.1%;
}

.drop:nth-of-type(3){
    left:38.3%;
    top:78%;
    height:16.5%;
}

.drop:nth-of-type(4), .drop:nth-of-type(5), .drop:nth-of-type(6), .drop:nth-of-type(7){
    width:19%;
    left:74.7%;
}

.drop:nth-of-type(4){
    top:23%;
    height:16%;
}

.drop:nth-of-type(5){
    top:41%;
    height:15%;
}

.drop:nth-of-type(6){
    top:58%;
    height:20%;
}

.drop:nth-of-type(7){
    top:80%;
    height:16%;
}

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

.drag:nth-of-type(2){
    top:34%;
    left:9%;
}

.drag:nth-of-type(3){
    top:36%;
    left:5%;
}

.drag:nth-of-type(4){
    top:45%;
    width:10%;
    left:7%;
}

.drag:nth-of-type(5){
    top:39%;
    left:19%;
}

.drag:nth-of-type(6){
    top:42%;
    left:14%;
}

.drag:nth-of-type(7){
    top:45%;
    width:8%;
    left:19%;
}

.drag:nth-of-type(8){
    top:45%;
    width:8%;
    left:27%;
    z-index:1;
}

.drag:nth-of-type(9){
    top:39%;
    left:27%;
}

.drag:nth-of-type(10){
    top:71%;
    width: 14%;
    left: 13%;
}

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

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

#popup{
    position:absolute;
    z-index:3;
    width:35%;
    left:1%;
    top:23%;
    display:none;
}

.animation{
    transition:all 0.75s ease;
    -webkit-transition:all 0.75s ease;
    -moz-transition:all 0.75s ease;
    -ms-transition:all 0.75s ease;
}

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

.drop img{
   display:inline-block;
   float:left;
   margin-right:4%;
   height:80%;
   margin-top:5%;
}

.drop img:first-of-type{
    margin-left:4%;
}

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

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