@font-face{
	font-family: 'cabin-regular'; /*a name to be used later*/
    src: url('../../../common/fonts/cabin-regular-webfont.ttf'); /*URL to font*/
}

.ggb_contenidoInterno{
	background-color:white;
	background-image:url("../img/background_arboles.png");
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:50%;
}

#contenedor_opciones{
	width:97%;
	top:14.3%;
	position:absolute;
	height:7%;
	background:white;
	border-radius:10px 10px 0 0;
}

.opcion{
	background:#333333;
	width:24.79%;
	height:100%;
	display:inline-block;
}

.opcion:hover{
	cursor:pointer;
	opacity:0.85;
}
.opcion:first-of-type{
	border-radius:10px 0 0 0;
}

.opcion:last-of-type{
	border-radius:0 10px 0 0;
}

.opcion p{
	color:white;
	text-align:center;
	font-size:1.6em;
	line-height:2em;
	margin:0;
	padding:0;
}

.custom_btn{
	position:absolute;
	z-index:10;
	width:4%;
	height:6%;
	background:white;
	border-radius:10px;
	border:solid 3px #66CCCC;
}

.custom_btn i{
	color:#66CCCC;
	font-size:2.5em;
	margin:0 0 0 23%;
	line-height:1.2em;
}

#btn_ayuda{
	bottom:6%;
	left:4%;
	transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
}

#btn_ayuda:hover{
	cursor:pointer;
	opacity:0.85;
}

#ayuda{
	position:absolute;
	bottom:5%;
	height:9%;
	background:white;
	width:88%;
	left:9%;
	border-radius:10px;
	border:solid 3px #66CCCC;
	display:none;
	z-index:10;
}

#ayuda p{
	margin:0;
	margin:0 1% 0 1%;
	font-size:1.6em;

}

.tab{
	width:97%;
	position:absolute;
	height:75.6%;
	top:21.6%;
	display:none;
}

.yt_player{
	position:absolute;
	top:4% !important;
	left:15% !important;
	width:70%;
	height:80%;
	display:none;
}


.yt_play{
	width:15%;
	height:30%;
	position:absolute;
	left:42%;
	top:30%;
	background:rgba(102, 204, 204, 0.2);
	border-radius:10px;
}

.yt_play:hover{
	width:15.5%;
	height:31.5%;
	cursor:pointer;
	background:rgba(102, 204, 204, 0.4);
}


.yt_play div{
	position:absolute;
	width:60%;
	height:80%;
	top:10%;
	left:20%;
	padding:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 70.5px 0 70.5px 140px;
	border-color: transparent transparent transparent #66CCCC;
}

#yt_player{
	position:absolute;
	width:85%;
	height:90%;
	left:10%;
	top:5%;
}


.pregunta{
	position:absolute;
	width:100%;
	height:100%;
}

.contenedor_preguntas{
	position:absolute;
	width:85%;
	padding:0.5% 2%;
	height:93%;
	left:9%;
	top:3%;
	background:rgba(255, 255, 255, 0.85);
	border-radius:10px;
}

.contenedor_preguntas p{
	font-size:1.5em;
	magin:0;
	font-style:100;
	font-family:'cabin-regular';
	margin-top: 3px;
}

.contenedor_respuestas{
	position:absolute;
	width:100%;
	height:32%;
	top:56%;
	left:0;
}

.contenedor_respuestas div{
	height:100%;
	width:25%;
	margin-right:5%;
	background:#66CCCC;
	border-radius:10px;
	display:inline-block;
}

.contenedor_respuestas div:first-of-type{
	margin-left:7%;
}

.contenedor_respuestas p{
	text-align:center;
	margin:0;
}

.strong{
	margin-top:20% !important;
	font-size:2em !important;
}

.checkbox{
	margin-top:1%;
	margin-left:-7%;
	position:absolute;
	z-index:3;
	width:20%;
	height:20%;
}

.checkbox:before{
	content:'';
    display: inline-block;   
    position:absolute;
    left:43%; 
    width: 13%;  
    height: 89%;       
    background-color: white;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
} 

.checkbox:checked:before {  
    content: "\2713";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 2em;  
    color: #333333;  
    text-align: center;  
    line-height:1em; 
}  

.correct_checkbox:before{
	background-color:#8CC63F;
}

.incorrect_checkbox:before{
	background-color:red;
}

.pregunta{
	display:none;
}

.nav_btn{
	position:absolute;
	width:5.5%;
	height:10%;
	background:#66CCCC;
	bottom:0%;
	border-bottom:solid 0.3em #339999;
}

.nav_btn:hover{
	cursor:pointer;
	opacity:0.85;
}

.nav_btn:active{
	transform: scaleY(0.9);
}

.right{
	left:87%;
	border-radius:0 10px 0 0;
}

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

.last{
	border-radius:10px 10px 0 0 !important;
}

.nav_btn i{
	color:white;
	font-size:2.4em !important;
	text-align:center;
	margin:18% 0 0 30%;
}