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

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

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

@font-face{
	font-family: 'cabin-bold-italic'; /*a name to be used later*/
    src: url('../fonts/Cabin-BoldItalic.ttf'); /*URL to font*/
}

@font-face{
	font-family: 'big-noodle'; /*a name to be used later*/
    src: url('../fonts/big_noodle_titling.ttf'); /*URL to font*/
}

p{
	font-family:'cabin-regular';
}

*{
	margin:0;
	padding:0;
}

.ggb_contenidoInterno{
    background:none;
}

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

.btn_check{
	position:absolute;
	bottom:2%;
	right:2%;
	width:13%;
}

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

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

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

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

.popup{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255, 255, 255, 0.5);
	z-index:3;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	background-size:70% !important;
	display:none;
}

#tab_1 .popup_correct{
	background-image:url("../img/popup_correct_1.png");
}

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

#tab_2 .popup_correct{
	background-image:url("../img/popup_correct_2.png");
}

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

.btn_close{
	position:absolute;
	width:5%;
	left:80%;
	top:25%;
}

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

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

.questions{
	position:absolute;
	width:45.5%;
	height:45.5%;
	/* background:red; */
}

.forward, .back{
	position:absolute;
	width:15%;
	bottom:1%;
}

.forward{
	right:3%;
}

.back{
	left:3%;
}

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

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

.record{
	position:absolute;
	width:6%;
	height:20%;
	background:url("../img/record.png");
	background-size:100%;
	background-repeat:no-repeat;
}

.record > input{
	display:inline-block;
	float:left;
	width:80%;
	margin-left:10%;
	height:34%;
	box-sizing:border-box;
	border:none;
	outline:none;
	border-radius:10px;
	font-family:'cabin-regular';
	font-size:2em;
	text-align:center;
	background:white;
}

.record > input:first-of-type{
	margin-top:14%;
	margin-bottom:14%;
}

#tab_1 .record:nth-of-type(3){
	left:10%;
	top:18%;	
}

#tab_1 .record:nth-of-type(4){
	left:28%;
	top:18%;	
}

#tab_1 .record:nth-of-type(5){
	left:48%;
	top:18%;	
}

#tab_1 .record:nth-of-type(6){
	left:69%;
	top:18%;	
}

#tab_1 .record:nth-of-type(7){
	left:89%;
	top:18%;	
}

#tab_1 .record:nth-of-type(8){
	left:82%;
	top:42%;	
}

#tab_1 .record:nth-of-type(9){
	left:65%;
	top:42%;	
}

#tab_1 .record:nth-of-type(10){
	left:47%;
	top:42%;	
}

#tab_1 .record:nth-of-type(11){
	left:26%;
	top:42%;	
}

#tab_1 .record:nth-of-type(12){
	left:4%;
	top:42%;	
}

#tab_1 .record:nth-of-type(13){
	left:14%;
	top:68%;	
}

#tab_1 .record:nth-of-type(14){
	left:34%;
	top:69%;	
}

#tab_1 .record:nth-of-type(15){
	left:51%;
	top:69%;	
}

#tab_1 .record:nth-of-type(16){
	left:69%;
	top:69%;	
}

#tab_1 .record:nth-of-type(17){
	left:88%;
	top:69%;	
}

.pattern{
	position:absolute;
	bottom:2%;
	width:8%;
	height:9%;
	box-sizing:border-box;
	border: solid 5px rgb(140, 198, 63);
	border-radius:10px;
	font-family:'cabin-bold';
	font-size:2.7em;
	vertical-align:middle;
	text-align:center;
}

.pattern:nth-of-type(1){
	left: 60%;
}

.pattern:nth-of-type(2){
	left: 71%;
}

.slash{
	position:absolute;
	font-size:3em;
	bottom:2%;
	left:68.5%;
}

#nav_btn{
	position:absolute;
	left: 72.5%;
	top: 19%;
	width: 17%;
	height:13%;
	z-index:3;
}

#nav_btn > div{
	display:inline-block;
	float:left;
	height:100%;
	width:50%;
	background:whitesmoke;
	-webkit-filter: grayscale(1);
}

#nav_btn > div.active{
	-webkit-filter: grayscale(0);
}

#nav_btn > div:not(.active):hover{
	cursor:pointer;
	opacity:0.85;
}

#nav_btn > div:first-of-type{
	background:url("../img/btn_1.png");
	background-size:100%;
	background-repeat:no-repeat;
}

#nav_btn > div:last-of-type{
	background:url("../img/btn_2.png");
	background-size:100%;
	background-repeat:no-repeat;
}

#tab_2 .record:nth-of-type(3){
	left:15%;
	top:13%;	
}

#tab_2 .record:nth-of-type(4){
	left:34%;
	top:11%;	
}

#tab_2 .record:nth-of-type(5){
	left:53%;
	top:9%;	
}

#tab_2 .record:nth-of-type(6){
	left:68%;
	top:11%;	
}

#tab_2 .record:nth-of-type(7){
	left:90%;
	top:8%;	
}

#tab_2 .record:nth-of-type(8){
	left:12%;
	top:40%;	
}

#tab_2 .record:nth-of-type(9){
	left:25%;
	top:50%;	
}

#tab_2 .record:nth-of-type(10){
	left:40%;
	top:41%;	
}

#tab_2 .record:nth-of-type(11){
	left:51%;
	top:53%;	
}

#tab_2 .record:nth-of-type(12){
	left:65%;
	top:47%;	
}
.incorrect_input{
	color: red !important;
}

.correct_input{
	color: rgb(140, 218, 37) !important;
}