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

.popup{
	/* display:none; */
}

*{
	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 !important;
    display:none;
}

#tab_1{
	background:url("../img/bg_5_1.png");
	display:block;
}

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

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

#tab_4, #tab_5, #tab_6{
	background:url("../img/bg_5_4.png");
}

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

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

.back, .forward{
	position:absolute;
	width:15%;
	bottom: 1%;
	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_bg{
	position:absolute;
	width:85%;
	left:7.5%;
	top:15%;
}

.popup > div{
	/* position:absolute; */
	/* width: 50%; */
	/* left: 25%; */
	/* top: 23%; */
	/* 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;
	text-align:justify;
}

.popup-content h4{
	text-align:center;
	font-size:2.5em;
	margin-bottom:10px;
}

.popup-column{
	display:inline-block;
	float:left;
	width:45%;
	margin-right:5%;
	height: 68%;
}

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

.btn_close, #tab_3 .btn_play{
	position:absolute;
	width: 5% !important;
	height:auto !important;
	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: 4.6%;
	width: 100%;
	height: 6%;
	left: 0;
	z-index:2;
}

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

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

.custom_btn:hover{
	cursor:pointer;
	-webkit-filter:grayscale(0.5);
}

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

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

.nav_btn, .btn_home, .custom_btn, .btn_help{
	position:relative;
	bottom:15%;
	background-size:100% !important;
	background-repeat:no-repeat !important;
	margin-right:10px;
}

.btn_home{
	width:6.7%;
	background:url("../img/btn_1.png");
}

.nav_btn{
	background:url("../img/btn_2.png");
	width:13%;
}

.nav_btn:hover:not(.active), .btn_home:hover:not(.active), .custom_btn:hover{
	cursor:pointer;
	-webkit-filter:grayscale(0.5);
	transform:scale(1.05);
}

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

.active{
	-webkit-filter:grayscale(1);
}

.btn_home i, .custom_btn 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.8em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.element{
	position:absolute;
	padding:10px 25px;
	background:#7F6AC5;
	border-radius:10px;
	font-family:'cabin-regular';
	font-size:1.5em;
	box-sizing:border-box;
	border:solid 4px #312749;
	color:#FFFFFF;
}

.element:nth-of-type(1){
	left:20.8%;
	top:43.5%;
}

.element:nth-of-type(2){
	left:38%;
	top:70%;
}

.element:nth-of-type(3){
	left: 57%;
	top: 38%;
	line-height:1.4em;
}

.paragraph{
	position:absolute;
	left:33.4%;
	top:37%;
	font-size:1.7em;
}

.line{
	position:absolute;
	width:25%;
	left:33.5%;
}

.line:nth-of-type(1){
	top:41.5%;
}

.line:nth-of-type(2){
	top:47%;
}

.line:nth-of-type(3){
	top:52%;
}

.line:nth-of-type(4){
	top:57.4%;
}

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

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

..popup{
	position:absolute;
	z-index:40;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.6);
	border-radius:15px;
	background-size: 64% !important;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	display:none;
}


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

.popup{
	position:absolute;
	z-index:40;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.8);
	border-radius:15px;
	background-size: 64% !important;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	display:none;
}


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

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

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

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

.popup:not(.wide-popup){
	background-image:url("../img/popup_bg.png");
}

.popup:not(.wide-popup) > .btn_close{
	left:74%;
	top:13%;
}

.wide-popup > .btn_close{
	left:81%;
	top:10%;
}

.popup-content p{
	text-align:center;
	color:#003B37;
}

#tab_2 .popup-content p{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.btn_forward, .btn_previous{
	background-image:url("../img/btn_1.png");
	position:absolute;
	height:7%;
	bottom:3.5%;
	width: 7%;
	z-index:30;
}

.btn_forward i, .btn_previous i{
	color:#FFFF00;
	position:relative;
	top:50%;
	left:50%;
	font-size:2em;
	transform:translateX(-50%) translateY(-50%);
}

.btn_forward{
	left:85%;
}

.btn_previous{
	left:50%;
}

input{
	position:absolute;
	background:transparent;
	border:none;
	width:22.6%;
	height:5%;
	outline:none;
	font-family:'cabin-regular';
	font-size:1.8em;
	color:#312749;

}


#tab_3 input:nth-of-type(1){
	left:17.5%;
	top:64%;
}

#tab_3 input:nth-of-type(2){
	left:7.4%;
	top:74%;
	text-align:center;
}

#tab_3 input:nth-of-type(3){
	left:43.3%;
	top:74%;
}

#tab_3 input:nth-of-type(4){
	left:73.1%;
	top:64%;
}

.subTabs_buttons{
	position:absolute;
	/* background:red; */
	width:36%;
	height:7%;
	left:32%;
	top:26%;
}

.subTabs_buttons > .subTab_btn{
	display:inline-block;
	float:left;
	height:100%;
	width:18%;
	margin-right:2%;
}

.subTab_btn{
	background-size:100% !important;
	background-repeat:no-repeat !important;
	background:url("../img/btn_1.png");
}

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

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

.subTab_btn > p{
	color:#FFFF00;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.subTab{
	position:absolute;
	width:70%;
	height:40%;
	background-size:100% !important;
	background-repeat:no-repeat !important;
	background-image:url("../img/subTab_bg.png");
	left:15%;
	top:38%;
	display:none;

}

.subTab:nth-of-type(1){
	display:block;
}

.subTab h4{
	text-align:center;
	padding:15px 0;
	font-size:1.5em;
	color:#312749;

}

.check{
	height:100%;
	width:5%;
	background:whitesmoke;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 2px #000000;
	margin-left:30%;
}

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

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

.check i{
	position:relative;
	top:50%;
	left:50%;
	font-size:1.5em;
	transform:translate3d(-50%, -50%, 0);
}

.popup-content{
	width:50%;
	height: 47%;
	left:25%;
	position:relative;
	top: 50%;
	transform:translateY(-50%);
}

.popup h5{
	text-align:center;
	font-size:2em;
	padding:10px 0;
}

.medal{
	width:15%;
	position:relative;
	left:42.5%;
}

#tab_6 .popup-content{
	height: 54%;
}

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

.video{
    position:absolute;
    background:#35311E;
    width:59.3%;
    height: 61.3%;
    left: 35.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);
}

/* NEW STYLE */

.option{
	position:absolute;
	width:28%;
	text-align:center;
	padding:15px 0;
	font-size:2em;
	border-radius:10px;
	border:solid 2px #FFFFFF;
	background:#5F507F;
}

.option:nth-of-type(1){
	left:30%;
	top:50%;
}

.option:nth-of-type(2){
	left:65%;
	top:50%;
}

.option:nth-of-type(3){
	left:30%;
	top:70%;
}

.option:nth-of-type(4){
	left:65%;
	top:70%;
}

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

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

.column-image{
	background-size:cover !important;
	background-position:50% 50% !important;
}

#tab_4 .popup p{
	text-align:center;
	position:relative;
	top:15%;
}

#tab_7 .content{
	position:absolute;
	width:70%;
	left:15%;
	top:30%;
	height:52%;
	/* background:red; */
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.content .column{
	display:inline-block;
	float:left;
	width: 25%;
	height:100%;
	/* background:blue; */
}

.column > *{
	display:inline-block;
	float:left;
}

.column-picture{
	width:100%;
	height: 45%;
	background-size:cover !important;
	background-position:50% 50% !important;	
	border-radius:10px;
}

textarea{
	resize:none;
	background:#DDCCE1;
	box-sizing:border-box;
	border:solid 4px #56006A;
	border-radius:10px;
	padding:5px;
	outline:none;
	/* position:absolute; */
	width: 99%;
	height: 50%;
	overflow-x:hidden;
	overflow-y:scroll;
	font-family:'cabin-regular';
	font-size:1.2em;
	margin-top:5%;
}

#tab_4 textarea, #tab_5 textarea, #tab_6 textarea{
	width:40%;
	left:50%;
	top:20%;
	position:absolute;
}

.drop{
	position:absolute;
	width:30%;
	height:30%;
	background:whitesmoke;
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	box-sizing:border-box;
	border-radius:10px;
	border:solid 2px purple;
}

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

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

.drop p{
	text-align:center;
	padding:15px 0;
	font-size: 1.56em;
}

.drags{
	position:absolute;
	width:30%;
	top:58%;
}

.drags:nth-of-type(3){
	left:10%;
}

.drags:nth-of-type(4){
	left:60%;
}

.drag{
	padding:8px 0;
	text-align:center;
	font-size:1.6em;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 2px #86438D;
	margin-bottom:10px;
	background:#BDAEE0;
	left:0px;
	top:0px;
}

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

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

#tab_8 .popup_incorrect h5{
	margin-top:7%;
}

#tab_4 .popup{
	display:block;
}

.steps-animation{
	position:absolute;
	width:400px;
	height:225px;
    animation-iteration-count:infinite !important;
}

.steps-animation:nth-of-type(1), #tab_4 .main-animation{
	left:35%;
	top: 18%;
	-webkit-animation: play 5s steps(146);
	-moz-animation: play 5s steps(146);
	-ms-animation: play 5s steps(146);
	-o-animation: play 5s steps(146);
	animation: play 5s steps(146);
	background-image: url("../img/AN_L_G05_U04_L05_03_03_01.png");
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -58400px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -58400px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -58400px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -58400px; }
}

.steps-animation:nth-of-type(2), #tab_5 .main-animation{
	left: 68%;
	top: 18%;
	-webkit-animation: second_play 5s steps(121);
	-moz-animation: second_play 5s steps(121);
	-ms-animation: second_play 5s steps(121);
	-o-animation: second_play 5s steps(121);
	animation: second_play 5s steps(121);
	background-image: url("../img/AN_L_G05_U04_L05_03_03_02.png");
}

@-webkit-keyframes second_play {
   from { background-position:    0px; }
     to { background-position: -48400px; }
}

@-moz-keyframes second_play {
   from { background-position:    0px; }
     to { background-position: -48400px; }
}

@-ms-keyframes second_play {
   from { background-position:    0px; }
     to { background-position: -48400px; }
}

@-o-keyframes second_play {
   from { background-position:    0px; }
     to { background-position: -48400px; }
}

.steps-animation:nth-of-type(3), #tab_6 .main-animation{
	left: 53%;
	top: 53.5%;
	-webkit-animation: thrid_play 2s steps(96);
	-moz-animation: thrid_play 2s steps(96);
	-ms-animation: thrid_play 2s steps(96);
	-o-animation: thrid_play 2s steps(96);
	animation: thrid_play 2s steps(96);
	background-image: url("../img/AN_L_G05_U04_L05_03_03_03.png");
}

@-webkit-keyframes thrid_play {
   from { background-position:    0px; }
     to { background-position: -38400px; }
}

@-moz-keyframes thrid_play {
   from { background-position:    0px; }
     to { background-position: -38400px; }
}

@-ms-keyframes thrid_play {
   from { background-position:    0px; }
     to { background-position: -38400px; }
}

@-o-keyframes thrid_play {
   from { background-position:    0px; }
     to { background-position: -38400px; }
}

.main-animation{
	position:absolute;
	left: 15% !important;
	top:37% !important;
	width:400px;
	height:225px;
	animation-iteration-count:infinite !important;
}

/* 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;
}


.player{
	position:absolute;
	width:18%;
	height:7%;
	z-index:30;
	left: 62%;
	top: 90%;
}

.player > div{
	display:inline-block;
	float:left;
	height:100%;
	width:25%;
	margin-right:6%;
	background:#662D91;
	box-sizing:border-box;
	border:solid 2px #FFFFFF;
	border-radius:10px;
}

.player > div:hover{
	cursor:pointer;
	transform:scale(1.05);
}
.player > div:active{
	transform:scale(0.95);
}

.player > div > i{
	color:#FFFF00;
	font-size:2em;
	position:relative;
	top:50%;
	left:50%;
	transform:translate3d(-50%, -50%, 0);
}