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

@font-face {
    font-family: cabin-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

@font-face {
    font-family: cabin-bold-italic;
    src: url('../fonts/Cabin-BoldItalic.ttf');
}

*{
	margin:0;
	padding:0;
}

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

.tab{
    position:absolute;
    width:97.1%;
    height:83%;
    border-radius:15px;
    display:none;
    overflow:hidden;
    background-image:url('../img/bg_1.png');
    background-color: #F9B04C;
    background-size:cover;
}

#tab_12, #tab_13, #tab_14, #tab_15, #tab_16, #tab_17{
	background-color: #D1E39B;;
}

#tab_1{
	display:block;
}

.tab_nav{
	position:absolute;
	bottom:0;
	width:16%;
	height:9.5%;
	left: 42%;
	z-index:1;
}

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

.custom_btn{
	width:33.33%;
	height:100%;
	background: #EB7F26;
	color:#FFF;
	font-size:3em;
	text-align:center;
	border-bottom:solid 6px #89380F;
	bottom:0;
	position:absolute;
}

.custom_btn:hover{
	cursor:pointer;
	background:#EA9D63;
}

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

.popup{
	width:100%;
	height:100%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(255, 255, 255, 0.6);
	z-index:20;
	display:none;
	top:0;
	left:0;
}

#popup_help{
	display:block;
	background-image:url("../img/popup_help.svg");
	background-size:84%;
	background-position:50% 60%;
	background-repeat:no-repeat;
}

.btn_close{
	position:absolute;
	width: 5%;
	top: 15%;
	right: 6%;
	z-index:7;
}

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

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

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

.btn_home{
	border-radius:0;
	right:33%;
}

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

.btn_play{
	position:absolute;
	width:15%;
	left:42.5%;
	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;
}

.audio{
	position:absolute;
	width: 13%;
	height: 8%;
	top:2%;
	left:1.5%;
	box-sizing:border-box;
	border-radius:10px;
	background:#8BC53F;
	border:solid 3px #000000;
}

.audio p{
	font-size:2.4em;
	padding: 0 9%;
}

.audio > div{
	position:absolute;
	top:-15%;
	right:-7%;
	height:130%;
	width:36%;
	border-radius:100%;
	background: #a44a99; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #a44a99 0%, #a44a99 50%, #8d1d80 50%, #8d1d80 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a44a99), color-stop(50%,#a44a99), color-stop(50%,#8d1d80), color-stop(100%,#8d1d80)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* IE10+ */
	background: linear-gradient(135deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a44a99', endColorstr='#8d1d80',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	box-sizing:border-box;
	border:solid 3px #000000;
}

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

.audio > div:hover{
	cursor:pointer;
	transform:scale(1.1);
	opacity:0.95;
}

.audio > div:active{
	opacity:1;
	transform:scale(1);
}

.nav{
	position:absolute;
	width:13%;
	height: 7.8%;
	right:1%;
	top: 15%;
	z-index:1;
}

.nav div{
	height:100%;
	width: 35%;
	display:inline-block;
	float:left;
	background: #a44a99; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #a44a99 0%, #a44a99 50%, #8d1d80 50%, #8d1d80 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a44a99), color-stop(50%,#a44a99), color-stop(50%,#8d1d80), color-stop(100%,#8d1d80)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* IE10+ */
	background: linear-gradient(135deg, #a44a99 0%,#a44a99 50%,#8d1d80 50%,#8d1d80 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a44a99', endColorstr='#8d1d80',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	box-sizing:border-box;
	border:solid 3px #000000;
	border-radius:100%;
}

.nav div p{
	color:#FFFFFF;
	font-size:3.5em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.active{
	background: #a2d165 !important; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #a2d165 0%, #a2d165 50%, #8bc53f 50%, #8bc53f 100%) !important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a2d165), color-stop(50%,#a2d165), color-stop(50%,#8bc53f), color-stop(100%,#8bc53f)) !important; /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #a2d165 0%,#a2d165 50%,#8bc53f 50%,#8bc53f 100%) !important; /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #a2d165 0%,#a2d165 50%,#8bc53f 50%,#8bc53f 100%) !important; /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #a2d165 0%,#a2d165 50%,#8bc53f 50%,#8bc53f 100%) !important; /* IE10+ */
	background: linear-gradient(135deg, #a2d165 0%,#a2d165 50%,#8bc53f 50%,#8bc53f 100%) !important; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2d165', endColorstr='#8bc53f',GradientType=1 ) !important; /* IE6-9 fallback on horizontal gradient */
}

.nav div:first-of-type{
	margin-right:10%;
}

.container{
	width: 96%;
	height: 77%;
	margin-top:1%;
	margin-left: 2%;
	background-color:#FFFFFF;
	background-size:30% !important;
	background-position:97% 50% !important;
	background-repeat:no-repeat !important;
	border-radius:14px;
	box-sizing:border-box;
	border:solid 3px #6A4293;
}

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

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

#tab_3 .container{
	background-image:url("../img/illustration_3.png");
}

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

#tab_5 .container{
	background-image:url("../img/illustration_5.png");
	background-size:17% !important;
}

#tab_6 .container{
	background-image:url("../img/illustration_6.png");
	background-size:17% !important;
}

#tab_7 .container{
	background-image:url("../img/illustration_7.png");
}

#tab_8 .container{
	background-image:url("../img/illustration_8.png");
	background-size:20% !important;
}

#tab_9 .container{
	background-image:url("../img/illustration_9.png");
}

#tab_10 .container{
	background-image:url("../img/illustration_10.png");
}

#tab_11 .container{
	background-image:url("../img/illustration_11.png");
}

.container > p{
	font-size:1.4em;
	text-align:justify;
	padding:0.5% 1.3%;
}

.header{
	width:20%;
	height:8%;
	margin-top:0.7%;
	margin-left:40%;
	background:#FFFFFF;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 3px #000000;
}

.header h3{
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}


input{
	height: 100%;
	width: 100%;
	text-align:center;
	font-size: 2.2em;
	background:transparent;
	border:none;
	outline:none;
}

#tab_5 input{
	font-size:3em;
}

input:focus{
	box-sizing:border-box;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(247,147,30,1);
	-moz-box-shadow: 0px 0px 9px 0px rgba(247,147,30,1);
	box-shadow: 0px 0px 9px 0px rgba(247,147,30,1);
	outline:none;
}

#tab_1 .btn_home{
	border-radius:10px 0 0 0;
}

#tab_17 .btn_home{
	border-radius:0 10px 0 0;
}

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

.exercise{
	width:96%;
	height: 31%;
	margin-top:2%;
	margin-left:2%;
	/* background:red; */
}

.exercise_1 > div:not(.info){
	height:100%;
	width:10%;
	/* background:whitesmoke; */
	display:inline-block;
	float:left;
}

.exercise_1 > div > div{
	margin-bottom:8%;
}

.exercise_1 > div > div:not(.line){
	margin-left:25%;
}

.exercise_1 > div > div:nth-of-type(1), .exercise_1 > div > div:nth-of-type(3){
	width:50%;
	height:40%;
	background:#FBB03B;
	box-sizing:border-box;
	border:solid 2px #AB5D25;

}

.line{
	width:100%;
	height:3%;
	background:#6A4293;
}

.select{
	background:red;
	height:28% !important;
	margin-top:36%;
}

.select > div{
	width:50%;
	height:100%;
	display:inline-block;
	float:left;
}

.dropdown{
	background:#FBB03B;	
}

.dropdown > p{
	font-size:3.5em;
	line-height:0.5em;
	text-align:center;
}

.dropdown_select > div:not(.triangle){
	height:100%;
	width: 107%;
	background:#FCCC86;
	box-sizing:border-box;
	border:solid 2px #AB5D25;
	display:none;
}

.dropdown_select > div:nth-of-type(2){
	margin-top: 85%;
}

.dropdown_select > div:not(.triangle) > p{
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.triangle{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 12px 0 12px;
	border-color: #FFFFFF transparent transparent transparent;
	position:relative;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}

.dropdown_select{
	background: rgba(239,152,81,1);
	background: -moz-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(239,152,81,1)), color-stop(50%, rgba(239,152,81,1)), color-stop(51%, rgba(235,127,38,1)), color-stop(100%, rgba(235,127,38,1)));
	background: -webkit-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
}

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

.dropdown_select:hover > div{
	display:block;
}

.dropdown_select > div:not(.triangle):hover{
	background:#EB7F26;	
}

.dropdown_select > div:not(.triangle):active{
	background:#EF9951;	
}

.exercise > div h3{
	font-size:5em;
	text-align:center;
	margin-top:15%;
}

.exercise > h3{
	font-size: 3em;
	position:absolute;
	left:52%;
	top:40%;
}

#tab_1 .exercise > h3{
	top:42.5%;
}

#tab_2 .exercise > h3, #tab_6 .exercise > h3{
	top:37.5%;
}

#tab_3 .exercise > h3{
	top:71%;
}

#tab_5 .exercise > h3{
	top:71%;
	left:60%;
}

#tab_4 .exercise > h3{
	top:62%;
}

#tab_8 .exercise > h3{
	left:70%;
	top:42.5%;
}

#tab_7 .exercise > h3{
	left: 59%;
	top:72%;
}

#tab_9 .exercise > h3{
	left:59%;
	top:61%;
}

#tab_10 .exercise > h3{
	top:62%;
	left:49%;
}

#tab_11 .exercise > h3{
	top:37.5%;
}
.grid{
	position:absolute;
	z-index:1;
}

.grid > div{
	display:inline-block;
	float:left;
	background:#FBB03B;
	box-sizing:border-box;
	border:solid 2px #AB5D25;
}

#tab_3 .grid{
	width: 22%;
	height: 33%;
}

#tab_3 .grid > div{
	height:32%;
	width:25%;
}

#tab_5 .grid{
	width:33%;
	height:33%;
}

#tab_5 .grid > div{
	height:33%;
	width:20%;
}

#tab_3 .grid:nth-of-type(2), #tab_5 .grid:nth-of-type(2){
	top:33%;
	left:25%;
}

#tab_3 .grid:nth-of-type(4), #tab_5 .grid:nth-of-type(4){
	top:69%;
	left:25%;
}

#tab_4 .grid, #tab_10 .grid{
	width: 22%;
	height: 33%;
}

#tab_7 .grid{
	width:40%;
	height:40%;
}

#tab_4 .grid > div, #tab_10 .grid > div{
	height:32%;
	width:25%;
}

#tab_7 .grid > div{
	height:32%;
	width:20%;
}

#tab_4 .grid:nth-of-type(2), #tab_10 .grid:nth-of-type(2){
	top:33%;
	left:25%;
}

#tab_4 .grid:nth-of-type(4), #tab_10 .grid:nth-of-type(4){
	top: 59%;
	left:25%;
}

#tab_7 .grid:nth-of-type(2){
	top: 36%;
	left:16%;
}

#tab_7 .grid:nth-of-type(4){
	top:67%;
	left:16%;
}

#tab_3 .line, #tab_5 .line{
	position:absolute;
	top:66.4%;
	left:23%;
	width:27%;
	height:1%;
}

#tab_5 .line{
	width:36%;
}

#tab_4 .line, #tab_10 .line{
	position:absolute;
	top: 56%;
	left:23%;
	width:27%;
	height:1%;
}

#tab_7 .line{
	position:absolute;
	top: 64%;
	left:15%;
	width:43%;
	height:1%;
}

#tab_3 input, #tab_4 input{
	font-size:3em;
}

#tab_3 .exercise, #tab_4 .exercise{
	margin-left:14%;
}

#tab_9 .grid{
	width: 35%;
	height: 41%;
}

#tab_9 .grid > div{
	height:25%;
	width:15%;
}

#tab_9 .grid:nth-of-type(2){
	top:33%;
	left:25%;
}

#tab_9 .grid:nth-of-type(4){
	top: 59%;
	left:25%;
}

#tab_9 .line{
	position:absolute;
	top: 56%;
	left:23%;
	width:35%;
	height:1%;
}

.content{
	width:100%;
	/* background:pink; */
}

.bottom_items{
	position:absolute;
	width:95.6%;
	height:10%;
	bottom:15%;
}

.bottom_items > div{
	height:100%;
	width:20%;
	display:inline-block;
	float:left;
	margin-right:10%;
	background: rgba(239,152,81,1);
	background: -moz-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(239,152,81,1)), color-stop(50%, rgba(239,152,81,1)), color-stop(51%, rgba(235,127,38,1)), color-stop(100%, rgba(235,127,38,1)));
	background: -webkit-linear-gradient(-74deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(239,152,81,1) 0%, rgba(239,152,81,1) 50%, rgba(235,127,38,1) 51%, rgba(235,127,38,1) 100%);
	border-radius:10px;
}

.bottom_items > div:hover{
	cursor:pointer;
	opacity:0.85;
}

.bottom_items > div:active{
	opacity:1;
	transform:scale(0.95);
}

.bottom_items > div > p{
	color:white;
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.bottom_items > div:first-of-type{
	margin-left:9%;
}

.content > h3{
	text-align:center;
	font-size:3em;
}

.fields{
	width:100%;
	height: 10%;
	/* background:red; */
}

.fields > div{
	height:100%;
	width:5%;
	display:inline-block;
}

.fields > div > input{
	background:#FBB03B;
	box-sizing:border-box;
	border:solid 2px #AB5D25;
}

.content > input{
	background:#FBB03B;
	box-sizing:border-box;
	border:solid 2px #AB5D25;
	width:8%;
}

#tab_13 .content > input, #tab_15 .content > input{
	position:absolute;
	height:8%;
	top: 40%;
	left:59%;
}

#tab_12 .fields > div:first-of-type, #tab_17 .fields > div:first-of-type{
	margin-left:42.5%;
}

#tab_12 .content, #tab_17 .content{
	margin-top:9%;
}

#tab_13 .content, #tab_15 .content{
	margin-top: 11%;
}
#tab_14 .content, #tab_16 .content{
	margin-top:5%;
}

#tab_14 .fields:first-of-type > div:first-of-type, #tab_16 .fields:first-of-type > div:first-of-type{
	margin-left:32%;
}

#tab_14 .fields:last-of-type > div, #tab_16 .fields:last-of-type > div{
	margin-right:5%;
}

#tab_14 .fields:last-of-type > div:first-of-type, #tab_16 .fields:last-of-type > div:first-of-type{
	margin-left:37.6%;
}

.fields p{
	font-size:4em;
	text-align:center;
}

.info{
	position:absolute;
	width:57%;
	height:18%;
	background: rgb(245, 192, 120);
	bottom:11.5%;
	left:2%;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 3px #6A4293;
	display:none;
}

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

.correct, .correct_input{
	background: rgb(138, 196, 64) !important;
	color:white !important;
}

.incorrect, .incorrect_input{
	background:red !important;
	color:white !important;
}