@charset "UTF-8";
/* CSS Document */

body{
	font-family: "Maven Pro", sans-serif;
	margin: 0 !important;
	padding: 0 !important;
}

.slogan{
	font-family: "Libre Baskerville", sans-serif;
}

#hero-image{
	background-image: url("../img/cabecera.jpg");
	background-size: cover;
	height: 540px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.logo{
	padding-top: 3em;
	transition: width 1s, height 1s, transform 0.5s;
}

.logo:hover{
	transform : scale(1.025);
}

.ready{
	padding-top: 3em;
	margin-left: -4em;
}

h1{
	margin-top: 3.2em;
	font-size: 65px;
}

.titulo1{
	color:#F7F2B0;
}
	
.titulo2{
	color:#102C65;
}

#h2-image{
	background-image: url("../img/fondo-1.png");
	background-size: cover;
	height: 323px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.levels{
	color: #102C65;
	font-size: 2.15em;
	font-weight: 500;
	padding: 0 9em;
}

#body-image{
	background-image: url("../img/body-image.jpg");
	background-size: cover;
	height: 900px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: -1px;
}

p{
	font-size: 20px;
	color: #557096;
}

.unesco{
	padding: 4em 16em 2em;
}

.key{
	color: #235BAA;
	font-weight: 700;
	font-size: 30px;
	padding-bottom: 1em;
}

.iconos{
	padding-left: 8em;
	padding-right: 8em;
}

.focus-areas p{
	color: #000000;
}

.education{
	padding: 0 5em;
}

.competences{
	color: #235BAA;
	font-weight: 700;
	font-size: 30px;
	margin: 5em 0 2em;
}

.accordion{
	width: 534px;
}

.button-left{
	background-image: url("../img/frame-left.png");
	width: 534px;
	border-radius: 15px !important;
	color: #ffffff;
	font-size: 20px;
}

.button-right{
	background-image: url("../img/frame-right.png");
	width: 534px;
	border-radius: 15px !important;
	color: #ffffff;
	font-size: 20px;
	margin-top: 5em;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgb(255 193 247);
}

.highlight p{
	font-weight: 700;
	color: #102C65 !important;
/**text-align: center !important;**/
	padding-top: 0.5rem;
}

.accordion-body{
	padding-top: 4rem;
}

.acordeon{
	margin: 2em 0;
}


.hero-2{
	color: #102C65;
	font-size: 2.15em;
	font-weight: 500;
	padding: 11.5em 9em 0;
}


.we-are-ready{
	font-weight: 800;
	color: #102C65;
	font-size: 36px;
	margin-top: -4em;
}

#fondo-2{
	background-image: url("../img/fondo-2.jpg");
	background-size: cover;
	height: 900px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: -20em !important;
}

#fondo-3{
	background-image: url("../img/materials.png");
	background-size:auto;
	height: 630px;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.specific-competences{
	margin-top: -5em;
}

.specific p{
	color: #000000;
	text-align: left;
}

.numbers p{
	font-size: 70px;
	font-weight: 500;
}

.foreign{
	margin-top: 25px;
}


.materials{
	font-size: 26px;
	padding: 0 12em;
	margin: 4em 0 -4em;
	color: #102C65;
}

.cares{
	font-family: "LibreBaskerville", serif;
	color: #000000;
	font-size: 46px;
	margin: -0.6em
}

.linea{
background-color:#000;
  height:0.2em;
}


footer{
	background-color: #102C65;
	height: 7em;
}

footer a:hover{
	color: #ffffff !important;
}

a{
	text-decoration: none;
}

.blocks{
	background-color: #F9D7CD;
	margin-top: -4em;
}

.three{
	padding-top: 2em;
}

.three-list{
	padding-bottom: 2em;
}

@media (max-width: 1740px){
	
	.levels{
	font-size: 2.15em;
	padding: 0 5em;
	}
	
	.ready{
	margin-left: -5em;
	}
	
	.unesco{
	padding: 4em 12em 2em;
	}
	
	.education{
	padding: 0 2em;
	}
	
	.hero-2{
	padding: 11.5em 7em 0;
}
	

@media (max-width: 1690px){
	.materials{
	padding: 0 8em;
}
}

@media (max-width: 1500px){
	
	.levels{
	font-size: 2.15em;
	padding: 0 3em;
	}
	
	#h2-image{
	height: 230px;
	}
	
	.ready{
	margin-left: -5em;
	}
	
	.unesco{
	padding: 4em 8.5em 2em;
	}
	
	.education{
	padding: 0 1em;
	}
	
	.hero-2{
	padding: 11.5em 3em 0;
	}
	
	.materials{
	padding: 0 5em;
	}
	
	.cares{
	font-size: 40px;
	margin: -0.6em
	}
}


@media (max-width: 1200px){
	
	#hero-image{
		height: 360px;
	}
	
	.logo{
		padding-top: 2em;
		width: 400px;
	}
	
	.ready{
	margin-left: -5em;
	margin-top: -3em;
	width: 140px;
	}

	h1{
	margin-top: 2.7em;
	font-size: 50px;
	}
	
	#body-image{
	background-image: url("../img/body-image-ipad.png");
	height: 800px;
	margin-top: -2px;
	}

	.levels{
	font-size: 1.5em;
	padding: 0 5em;
	}
	
	#h2-image{
		height: 220px;
	}

	.unesco{
	font-size: 15px;
	padding: 3em 12em 2em;
	}
	
	.key{
	font-size: 22px;
	}
	
	.children{
		height: 10em;
	}
	
	p{
	font-size: 15px;
	}
	
	.competences{
	font-size: 22px;
	margin-top: -2em;
	}
	
	.accordion{
	width: 430px;
	}

	.button-left{
	width: 450px;
	font-size: 15px;
	}

	.button-right{
	width: 450px;
	font-size: 15px;
	margin-top: 8em;
	}
	
	.hero-2{
	font-size: 24px;
	padding: 13em 3em 0;
	}

	.we-are-ready{
	font-size: 24px;
	}

	#fondo-2{
	height: 700px;
	}
	
	#fondo-3{
	background-image: url("../img/materials-1200.png");
	height: 500px;
	width: 100%;
	}
	
	.materials{
	font-size: 20px;
	padding: 0 4em;
	margin-top: 3em;
	}
	
	.cares{
	font-size: 28px;
	margin: -0.9em;
	}
	
	.linea{
	margin: -0.7em 0;
	}
	
	.specific-competences{
	margin-top: 5em;
	}
	
	.blocks{
	margin-top: 7em;
	}

}

@media (max-width: 1024px){
	
	#h2-image{
		height: 180px;
	}
	
}

@media (max-width: 990px){
	
	footer{
	height: 9em;
	}
	
	.ready{
	margin-left: -5em;
	}
	
	h1{
	margin-top: 3em;
	font-size: 44px;
	}
	
		
	#h2-image{
	height: 160px;
	}

	.levels{
	margin-top: -0.5em;
	padding: 0 2em;
	font-size: 1.5em;
	}
	
	#body-image{
	height: 450px;
	}

	.unesco{
	font-size: 15px;
	padding: 3em 10em 2em;
	}
	
	.iconos{
	padding-left: 5em;
	padding-right: 5em;
}
	.competences{
	margin-top: 14em;
	}
	
	.accordion{
	width: 300px;
	}

	.button-left{
	width: 300px;
	font-size: 15px;
	}

	.button-right{
	width: 300px;
	font-size: 15px;
	margin-top: 7em;
	}
	
	.cares{
	font-size: 25px;
	margin: -1em;
	}
	
	.linea{
	margin: -1em 0;
	}
	
	.specific-competences{
	margin-top: -17em;
	}
	
	.blocks{
	margin-top: -15em;
	}
	
}

@media (max-width: 768px){
	
	footer{
	height: 16em;
	}
	
	.logo{
	width: 300px;
	}
	
	.ready{
	margin-left: -5em;
	margin-top: -3.5em;
	width: 120px;
	}
	
	h1{
	margin-top: 2em;
	font-size: 50px;
	}
	
	.titulo2{
	color:#F7F2B0;
	}
			
	#h2-image{
	background-image: url("../img/fondo-1-mobile.jpg");
	height: 380px;
	}

	.levels{
	font-size: 35px;
	padding: 0.5em 1em;
	}
	
	#body-image{
	height: 360px;
	}

	.unesco{
	font-size: 20px;
	padding: 3em 6em 2em;
	text-align: center;
	}
	
	.key{
	font-size: 30px;
	}
	
	.children{
		height: 17em;
	}
	
	.children-mobile p{
	color: #000000;
	}
	
	p{
	font-size: 20px;
	}
	
	.competences{
	font-size: 30px;
	margin-top: 62em;
	}
	
	.accordion{
	width: 400px;
	}

	.button-left{
	width: 500px;
	font-size: 20px;
	}

	.button-right{
	width: 500px;
	font-size: 20px;
	margin-top: 0;
	}
	
	.hero-2{
	font-size: 25px;
	padding: 14.8em 1em 0;
	}

	.we-are-ready{
	font-size: 28px;
	padding: 0em 1em 0;
	}
	
	.materials{
	padding: 0 1em;
	margin-top: 3em;
	}
	
	.cares{
	font-size: 34px;
	margin: -0.5em 2em;
	}
	
	.linea{
	margin: -0.5em 0;
	}
	
		
	h2.competences.text-center.six{
	margin: 12em 1em 2em;
	}
	
	.foreign{
	margin-top: 0px;
	}
	
	h2.competences.text-center.three{
	margin: 12em 1em 2em;
	}
	
	.three-list{
	margin-bottom: 3em;
	}
	
	#fondo-3{
	background-image: url("../img/materials-768.png");
	height: 600px;
	}

}

@media (max-width: 570px){
	
	#hero-image{
		background-image: url("../img/cabecera-mobile.jpg");
		height: 400px;
	}
	
	.logo{
	margin-top: -7em;
	width: 230px;
	}
	
	.ready{
	margin-left: -6.5em;
	margin-top: -11em;
	width: 120px;
	}
	
	h1{
	margin: 2em 1.2em;
	font-size: 48px;
	}
	
	#h2-image{
	background-image: url("../img/fondo-1-mobile-2.png");
	height: 550px;
	}
	
	.unesco{
	padding: 3em 2em 2em;
	text-align: center;
	}
	
	.key{
	font-size: 25px;
	}
	
	.competences{
	font-size: 25px;
		margin-top: 72em;
	}
	
	.hero-2{
	font-size: 23px;
	padding: 15em 0 0;
	}

	.we-are-ready{
	font-size: 25px;
		padding: 1.5em 0 0;
	}
	
	.materials{
	padding: 0 0;
	margin-top: 1em;
	}
	
	.cares{
	font-size: 35px;
	margin: -0.5em 0;
	}
	
	.accordion{
	width: 350px;
	}
	
	.button-left,.button-right{
	width: 400px;
	margin-left: 2em;
	}

	h2.competences.text-center.six{
	margin: 14em 1em 2em;
	}
	
	.numbers, .foreign, .three-list{
	margin: 0 2em;
	}
	
	h2.competences.text-center.three{
	margin: 14em 1em 2em;
	}
	
	.three-list{
	margin-bottom: 3em;
	}
	
	#fondo-3{
	height: 540px;
	}
}

@media (max-width: 480px){
	
	.titulo1,.titulo2{
		font-size: 58%;
	}
	
	.accordion{
	width: 260px;
	}
	
	.button-left,.button-right{
	width: 350px;
	margin-left: 2em;
	}
	
	.button-left{
	background-image: url("../img/frame-left-mobile.png");
	height: 100px;
}
	
	.competences{
	padding-left: 1em;
		padding-right: 1em;
	}
	
	.levels{
	font-size: 190%;
	}
	
	.materials{
		margin-top: 2em;
	}
	
	#body-image{
	height: 450px;
	}

}

@media (max-width: 450px){
	
	.competences{
		margin-top: 74em;
	}
	
	.levels{
		margin: 0 -10px;
	}
	
	.logo{
		margin-top: -5em;
		width: 160%;
	}
	
	.ready{
		margin-top: -9.5em;
		width: 1200%;
	}
	
	.education{
		margin: 0 -2em;
	}
	
	#fondo-3{
		background-image: url("../img/materials-450.png");
		height: 600px;
	}
	
	.materials{
		margin-top: 4em;
	}
	
}

@media (max-width: 435px){
	
	.competences{
		margin-top: 75em;
	}
	
	.button-left,.button-right{
		width: 130%;
	}
	
	.materials{
		margin-top: 3em;
	}
	
	h2.competences.text-center.six{
	margin: 17em 1em 2em;
	}
	
	h2.competences.text-center.three{
	margin: 16em 1em 2em;
	}
	
}

@media (max-width: 417px){
	
	h1{
		font-size: 300%;
		margin-top: 1.5em;
	}
	
	.logo{
		margin-top: -2em;
	}
	
	.ready{
		margin-top: -5em;
	}

	.leaftlet-col{
		margin-bottom: 0 !important;
	}

}

@media (max-width: 402px){
	
	.competences{
		margin-top: 79em;
	}
	
	.button-left,.button-right{
		width: 115%;
	}
	
	.materials{
		margin-top: 3em;
	}
	
	.logo{
		margin-top: -9em;
		width: 200%;
	}
	
	.ready{
		margin-top: -12em;
		width: 100px;
	}
	
	h2.competences.text-center.six{
	margin: 18em 1em 2em;
	}
	
	
	h2.competences.text-center.three{
	margin: 17em 1em 2em;
	}
	
}

@media (max-width: 375px){

	
	.logo{
		margin-top: -9em;
		width: 200%;
	}
	
	.ready{
		margin-left: -4.5em;
		margin-top: -12em;
		width: 90px;
	}
	
	.children{
		height: 12em;
	}
	
	.competences{
		margin-top: 63em;
	}
	
	.accordion{
		width: 345px;
	}
	
	.button-right,.button-left{
		width: 270px;
	}
	
	.materials{
		margin-top: 5em;
	}
	
	h2.competences.text-center.six{
	margin: 20em 1em 2em;
	}
	
	.three-list{
	margin-bottom: 3em;
	}
	
	.materials{
		font-size: 18px;
	}
	
	.we-are-ready{
		font-size: 20px;
	}
	
}

@media (max-width:370px){
	
	.key,.competences{
		margin-left: 2em;
		margin-right: 2em;
	}
	
	.competences{
		margin-top: 65em;
	}
	
}
	
	
@media (max-width:340px){
	
	.levels{
		font-size: 26px;
	}
	
	.accordion{
		width: 300px;
	}
	
	.button-left,.button-right{
		width: 230px;
	font-size: 17px;
	}
	
	.children{
		margin-left: -1em;
	}
	
	.materials{
		margin-top: 4em;
	}
	
	.competences{
		margin-top: 69em;
	}
	
	h2.competences.text-center.six{
	margin: 25em 1em 2em;
	}
}

	
@media (max-width: 320px){
	
	.competences{
		margin-top: 72em;
	}
	
	.accordion{
		width: 280px;
	}
	
	.materials{
		margin-top: 2em; 
		padding-bottom: 3em;
	}
	
}

@media (max-width: 302px){
	
	.competences{
		margin-top: 86em !important;
	}
	
	.accordion{
		width: 260px;
	}
	
	.button-left,.button-right{
		width: 200px;
		font-size: 17px;
	}
	
	h1{
		font-size: 45px;
	}
	
	.logo,.ready{
		display: none;
	}
	
	.levels{
		font-size: 20px;
	}
	
	#h2-image{
		height: 360px;
	}
	
	.unesco{
		font-size: 18px;
	}
	
	.children{
		margin-left: -2em;
	}
	
	.competences{
		font-size: 20px;
		margin-top: 75em;
	}
	
	.button-left,.button-right{
		font-size: 15px;
	}
	
	.materials{
		margin-top: 3em;
	}

}
}