@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-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

*{
	margin:0;
	padding:0;
}

p, h3, h2, h1{
	font-family:'cabin-regular';
}

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

.ggb_contenidoInterno{
	background-size:cover;
}

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

#tab_1{
	background:url("../img/bg_2_1.png");
	background-size:cover;
	display:block;
}

#tab_2{
	background:url("../img/bg_2_2.png");
	background-size:cover;
}

#tab_3{
	background:url("../img/bg_2_3.png");
	background-size:cover;
}

#tab_4{
	background:url("../img/bg_2_4.png");
	background-size:cover;
}

#tab_5{
	background:url("../img/bg_2_5.png");
	background-size:cover;
}

#tab_6{
	background:url("../img/bg_2_6.png");
	background-size:cover;
}

#tab_7{
	background:url("../img/bg_2_7.png");
	background-size:cover;
}

#tab_8{
	background:url("../img/bg_2_8.png");
	background-size:cover;
}

#tab_9{
	background:url("../img/bg_23.png");
	background-size:cover;
}

.back, .forward{
	position:absolute;
	width:15%;
	bottom:3%;
	z-index:3;
}

.back{
	left:63%;
}

.forward{
	left:81%;
}

.back:hover, .forward:hover{
	cursor:pointer;
	opacity:0.85;
	transform:scale(1.05);
}

.back:active, .forward:active{
	opacity:1;
	transform:scale(1);
}

.popup{
	width:100%;
	height:100%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(255, 255, 255, 0.9);
	z-index:100;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	display:none;
}

.popup_bg{
	position:absolute;
	width:85%;
	left:7.5%;
	top:15%;
}

.popup > div{
	position:absolute;
	width:78%;
	left:11%;
	top:22%;
	height:54%;
	z-index:3;
	font-family:"cabin-regular";
}

.popup h3{
	color:#4F1840;
	font-size:3em;
	margin:0;
	text-align:center;
}

.popup p{
	margin:0;
	color:white;
	font-size:2em;
	padding:2.5% 3.6%;
}

.popup i{
	color:#4F1840;
	font-size:1.3em;
	position:absolute;
	margin-top:3.4%;
	margin-left:0.6%;
}

.btn_close{
	position:absolute;
	width: 5% !important;
	height:auto !important;
	top:17%;
	right: 22%;
	z-index:7;
}

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

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

.tab_nav{
	position:absolute;
	bottom:2.6%;
	width: 100%;
	height:8%;
	left: 0;
	z-index:2;
}

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

.custom_btn{
	width:5.5%;
	height:100%;
	background: #205C8E;
	color:#FFF;
	font-size:3em;
	text-align:center;
	border-bottom:solid 6px #19466B;
	bottom:0;
	position:absolute;
}

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

.btn_home{
	border-radius:10px 10px 0 0;
	left:5%;
}

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

.btn_help{
	border-radius:10px 10px 0 0;
}

.custom_btn:hover{
	cursor:pointer;
	background:#3D80AD;
}

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

.nav_btn:nth-of-type(2){
	margin-left:5%;
}

.nav_btn, .btn_home{
	width:15%;
	position:relative;
	bottom:15%;
	background:#6B2234;
	box-sizing:border-box;
	border-radius:10px;
	border-bottom:solid 7px #BAA0A8;
	border-right:solid 4px #BAA0A8;
  	box-shadow:0 0 0 5px #FFFFFF;
  	margin-right:2%;
}

.btn_home{
	width:5%;

}

.nav_btn:hover, .btn_home:hover{
	cursor:pointer;
	background:#723647;
	transform:scale(1.05);
}

.nav_btn:active, .btn_home:active{
	transform:scale(1);
}

.active{
	background:#9E5167 !important;	
}

.btn_home i{
	color:white;
	font-size:2.6em;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);

}

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


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

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

.items{
	position:absolute;
	width:67%;
	height:85%;
	left:2%;
	top:27%;
}

.items > img{
	width:100%;
	float:left;
	margin-bottom:1%;
}

.items > img:hover{
	cursor:pointer;
	opacity:0.95;
	transform:scale(1.02);
}

.items > img:active{
	opacity:1;
	transform:scale(1);
}

#tab_3 .popup .btn_close{
	top: 11%;
	left:94%;
	width:4%;
}

#tab_3 .btn_play{
	top: 11%;
	left:74%;
	width:4%;
	transform:none;
}

#tab_3 .popup:nth-of-type(2){
	background-image:url("../img/popup_1.png");
}

#tab_3 .popup:nth-of-type(3){
	background-image:url("../img/popup_2.png");
}

#tab_3 .popup:nth-of-type(4){
	background-image:url("../img/popup_3.png");
}

#tab_3 .popup:nth-of-type(5){
	background-image:url("../img/popup_4.png");
}

.subpopup{
	position:absolute;
	width:50%;
}

.subpopup:hover{
	cursor:pointer;
	opacity:0.85;
	transform:scale(1.02);
}

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

#subpopup_1{
	left:45%;
	top:26%;
}

#subpopup_2{
	left:45%;
	top:55%;
}

.special_popup{
	display:none;
	width:100% !important;
	height:100% !important;
	left:0 !important;
	top:0 !important;
	position:absolute;
	background:url("../img/popup_5.png");
	background-size:cover;
	z-index:20 !important;
}

.btn_help{
	width:5%;
	height:9%;
	position:absolute;
	top:2%;
	left:2%;
	background:#7354B7;
	box-sizing:border-box;
	border-radius:10px;
	border-bottom:solid 7px #5E40B7;
	border-right:solid 4px #5E40B7;
  	box-shadow:0 0 0 5px #FFFFFF;
}

.btn_help:hover{
	cursor:pointer;
	opacity:0.85;
	transform:scale(1.05);
}

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

.btn_help i{
	color:white;
	font-size:3em;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
}

.inner_tab{
	width:100%;
	height:100%;
	background-size:cover !important;
}

.video{
	position:absolute;    
	width: 60%;    
	height: 66%;    
	left: 20%;    
	top: 18%;
    background:#333333;
    border-radius:10px;  
    overflow:hidden;  
}

.video video{
    width:100%;
    height:100%;
    display:none;
    border:none;
    background:#000000;
}

.btn_play{
    position:absolute;
   	top:50%;
   	left:50%;
   	height:30%;
    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);
    opacity:1;
}

.help{
	position:absolute;
	top:0%;
	left:7%;
	width:60%;
	z-index:3;
	display:none;
}

#drags{
	position:absolute;
	width:79%;
	height:24%;
	left:11%;
	top:60%;
	z-index:20;
}

#drags > img{
	width:16.65%;
	display:inline-block;
	float:left;
}

#tab_8 .drags > img{
	margin-bottom:6.9%;
}

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

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

#tab_3 .drop{
	height:38%;
	width:15%;
	margin-bottom:2.5%;
	margin-right:2%;
	display:inline-block;
	background:white;
	border-radius:10px;
	border:solid 2px #000000;
	box-sizing:border-box;
	float:left;
}

#tab_3 .drop:nth-of-type(6), #tab_3 .drop:nth-of-type(12){
	margin-right:0;
}

#tab_3 .drop img{
	width: 118%;
	margin-left: -9%;
	margin-top: -9.9%;
}

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

#drop_2{
	top:22.2%;
	left:24%;
}

#drop_3{
	top:33.5%;
	left:15.4%;
}

#drop_4{
	top:33.5%;
	left:35.4%;
}

#drop_5{
	top:50.5%;
	left:12.6%;
}

#drop_6{
	top:62%;
	left:20.5%;
}

#drop_7{
	top:62%;
	left:50%;
}

#popup_incorrect_1{
	background-image:url("../img/popup_incorrect_4.png");
	background-position:50% 100% !important;
}

#popup_incorrect_2{
	background-image:url("../img/popup_incorrect.png");
}

#popup_incorrect_1 .btn_close, #popup_correct_1 .btn_close{
	top:14%;
	left:87%;
}

#popup_correct_1{
	background-image:url("../img/popup_correct_4.png");
	background-position:50% 100% !important;
}

#popup_correct_2{
	background-image:url("../img/popup_correct_3.png");
	background-size:96% !important;
	background-position:50% 100% !important;
}


.slide{
	position:absolute;
	width:14%;
	transition:all 0.75s ease;
	-webkit-transition:all 0.75s ease;
	-moz-transition:all 0.75s ease;
	-ms-transition:all 0.75s ease;
}

.slide:hover{
	cursor:pointer;
	transform-origin:0 0;
	transform:scale(1.5);
	position:relative;
	z-index:2;
}

#slide_1{
	left:3%;
	top:15%;
}

#slide_2{
	left:23%;
	top:15%;
}

#slide_3{
	left:3%;
	top:46%;
}

#slide_4{
	left:23%;
	top:46%;
}

#continue{
	position:absolute;
	bottom:10%;
	width:35%;
	left:25%;
}

#drops{
	position:absolute;
	width:79.2%;
	height:17.3%;
	left:10.7%;
	top:37.6%;
	z-index:10;
}	

.highlight{
	border:dashed 2px gray !important;
}

.dragging{
	pointer-events:none;
}

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

.description{
	position:absolute;
	width:65%;
	left:17.5%;
	top:54%;
	display:none;
}

#tab_5 .container{
	position:absolute;
	width:87.3%;
	height:27.1%;
	left:6.3%;
	top:22%;
}

#tab_5 .container > div{
	display:inline-block;
	float:left;
	height:50%;
	width:7.14%;
	box-sizing:border-box;
}

#tab_5 .container .item:hover{
	cursor:pointer;
}

#tab_5 .drags{
	position:absolute;
	height:14%;
	width:26.6%;
	top:2.2%;
}

#tab_5 .drags:nth-of-type(2){
	left:22.7%;
}

#tab_5 .drags:nth-of-type(3){
	left: 60%;

}

#tab_5 .drags > div{
	display:inline-block;
	float:left;
	width:10%;
	height:40%;
	margin-top:7%;
	margin-right:2%;
	border-radius:100%;
	box-sizing:border-box;
	border:solid 1px black;
}

#tab_5 .green{
	background:#2DA546;
}

#tab_5 .blue{
	background:#0071BC;
}

#tab_5 .drags > div:first-of-type{
	margin-left:2%;
}

#tab_5 .drags > div > p, #tab_5 .drop > div > p{
	font-family:'cabin-bold';
	font-size:1.6em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

#tab_5 .drop > div{
	width:60%;
	height:55%;
	border-radius:100%;
	margin-left:20%;
	margin-top:22.5%;
	box-sizing:border-box;
	border:solid 1px #000000;
}

#tab_5 .popup_incorrect{
	background-image:url("../img/popup_incorrect.png");
	background-size:50%;
}

#tab_5 .popup_correct{
	background-image:url("../img/popup_correct.png");
	background-size:50%;
}


#tab_5 .forward{
	display:none;
}

#tab_3 .popup{
	display:block;
	background-image:url("../img/popup.png");
	background-position:50% 50%;
	background-size:90%;
	background-color:rgba(0, 0, 0, 0.5);
}

#tab_3 .popup .btn_close{
	top:25%;
	left:92%;
}