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

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

#tab_2{
	background:url("../img/bg_5_2.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{
	width:100%;
	height:100%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(255, 255, 255, 0.9);
	z-index:20;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	background-size:95% !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, #tab_3 .btn_play{
	position:absolute;
	width: 5% !important;
	height:auto !important;
	top:17%;
	right:9%;
	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;
	top:17%;
	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(1){
	margin-left:5%;
}

.nav_btn, .btn_home{
	width:15%;
	position:relative;
	bottom:15%;
	box-sizing:border-box;
	border-radius:10px;
  	box-shadow:1px 1px 10px #000000;
  	margin-right:2%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7af89+0,b7af89+50,a59b6b+50,a59b6b+100 */
	background: #b7af89; /* Old browsers */
	background: -moz-linear-gradient(top,  #b7af89 0%, #b7af89 50%, #a59b6b 50%, #a59b6b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7af89), color-stop(50%,#b7af89), color-stop(50%,#a59b6b), color-stop(100%,#a59b6b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b7af89 0%,#b7af89 50%,#a59b6b 50%,#a59b6b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b7af89 0%,#b7af89 50%,#a59b6b 50%,#a59b6b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b7af89 0%,#b7af89 50%,#a59b6b 50%,#a59b6b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b7af89 0%,#b7af89 50%,#a59b6b 50%,#a59b6b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7af89', endColorstr='#a59b6b',GradientType=0 ); /* IE6-9 */

}

.btn_home{
	width:5%;

}

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

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

.active{
	background:#A59B6B !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;
}

.video{
	position:absolute;    
	width: 60%;    
	height: 64%;    
	left: 20%;    
	top: 31%;
    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;
}

.options{
	position:absolute;
	width: 50%;
	height: 55%;
	/* background: rgba(0, 0, 0, 0.15); */
	left: 4%;
	top: 30%;
	border-radius:10px;
}

.options > div{
	display:inline-block;
	float:left;
	width: 48%;
	height: 22%;
	margin-bottom: 2.1%;
	box-sizing:border-box;
	border-radius:10px;
	background:#0071BC;
	border:solid 2px #1B1464;
}

.options > div:nth-of-type(even){
	margin-left:4%;
}

.checkbox{
	height: 45%;
	width: 10%;
	background:#FFFFFF;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 1px #9E005D; 
	margin-left: 3%;
	margin-top: 6.5%;
	margin-right:2%;
}

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

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

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

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

.options > div > div:last-of-type{
	width: 81%;
	height:100%;
}

#tab_4 .incorrect_popup{
	background-image:url("../img/popup_incorrect_1.png");
}

#tab_4 .incorrect_popup .btn_close{
	top:29%;
	left:92%;
}

#tab_4 .correct_popup .btn_close{
	top:26.5%;
	left:90.1%;
}

#tab_4 .correct_popup{
	background-image:url("../img/correct_popup_1.png");
}

.drags{
	position:absolute;
	width:43.7%;
	height:60%;
	left:55%;
	top:24%;
}

.drags > div{
	display:inline-block;
	float:left;
	width:100%;
	height:16%;
	background:#0071BC;
	border-radius:13px;;
	margin-bottom:2%;
	box-sizing:border-box;
	border:solid 2px #1B1464;
}

#tab_5 .drag:first-of-type{
	margin-top:2.5%;
}

.drag > p{
	font-size:1.5em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.container{
	position:absolute;
	width:41%;
	height: 60%;
	/* background:red; */
	left:55%;
	top:24%;
}

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

.container > .row{
	height: 14%;
	width:100%;
	/* background:whitesmoke; */
}

.row > input{
	height:100%;
	display:inline-block;
	float:left;
	width:23%;
	outline:none;
	box-sizing:border-box;
	border-radius:10px;
	border:solid 2px #000000;
	text-align:center;
	font-size:1.2em;
}

.row > input:not(:last-of-type){
	margin-right:2.6%;
}

.subcontainer{
	width:100%;
	height:83%;
	/* background:white; */
	margin-top:2%;
}

.subcontainer > div{
	display:inline-block;
	float:left;
	width:48.9%;
	margin-bottom:2%;
	height:48.3%;
	background:blue;
	box-sizing:border-box;
	border-radius:12px;
	border:solid 2px #000000;
	background-size:cover !important;
}

.subcontainer > div:first-of-type, .subcontainer > div:nth-of-type(3){
	margin-right:2%;
}

.subcontainer .drag:first-of-type{
	background:url("../img/picture_1.png");
}

.subcontainer .drag:nth-of-type(2){
	background:url("../img/picture_2.png");
}

.subcontainer .drag:nth-of-type(3){
	background:url("../img/picture_3.png");
}

.subcontainer .drag:nth-of-type(4){
	background:url("../img/picture_4.png");
}

#gavel{
	position:absolute;
	z-index:10;
	width: 8%;
	left: 71%;
	top: 32.9%;
	transform:rotate(-12deg);
	transform-origin: 80% 80%;
	transition:all 0.75s ease;
}

#gavel.judge:hover{
	transform:rotate(-20deg) !important;
	cursor:pointer;
}

#gavel.judge:active{
	transition:all 0.05s ease;
	transform:rotate(-90deg) !important;
}

#tab_4 .forward{
	display:none;
}

.checkbox > i{
	font-size:1.6em;
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
}

.interact{
	position:absolute;
	width:32%;
	height:20%;
	/* background:red; */
}

.interact:nth-of-type(1){
	left:17%;
	top:39%;
}

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

.interact:nth-of-type(3){
	left:40.7%;
	top:74%;
}

.audio{
	border-bottom:solid 5px #5B8B2F;
	background:#7DA942;
	position:absolute;
	border-radius:6px;
}

#tab_2 .audio{
	width:10%;	
	height:32%;
	bottom:0;

}

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

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

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

.interact > textarea{
	position:absolute;
	background:transparent;
	box-sizing:border-box;
	border:none;
	outline:none;
	width:86%;
	left:14%;
	height:100%;
	resize:none;
	font-size:1.4em;
}

.table{
	position:absolute;
	width:94.6%;
	height:59.2%;
	left:2.6%;
	top:39%;
}

.table > div{
	display:inline-block;
	float:left;
	height:33.33%;
	width:33.33%;
}

#tab_2 textarea{
	resize:none;
	border:none;
	outline:none;
	background:transparent;
	width:100%;
	height:40%;
	font-size:2em;
	overflow:hidden;
	text-align:center;
	margin-top:11%;
}