@charset "utf-8";
/* CSS Document */
@media screen and (max-width:2200px) {

}
@media screen and (max-width:1470px) {

}

@media screen and (max-width:1270px) {
	
}


@media screen and (max-width:1198px) {
	#home .intro-txt{
		right: 0;
		left: 0;
		justify-content: center;

	}
	#home .intro-txt p{
		margin: 0 0 0 10%;
	}
}

@media screen and (max-width:1145px) {
	
}

@media screen and (max-width:1090px) {
	#home .intro-txt h2{
		font-size: 100px;
	}
	#home .intro-txt p{
		margin: 0 0 0 16%;
	}
}


@media screen and (max-width:995px) {
	.container-evolucionando {
		width: 90%;
	}
}

@media screen and (max-width:900px) {
	#home .linea-naranja path{
		stroke-width:2px;
	}
	#home .linea-azul path{
		stroke-width:2px !important;
	}
	#home .linea-blanca path{
		stroke-width:2px !important;
	}
	#home .linea-roja path{
		stroke-width:2px !important;
	}
	#home .linea-puntos #maskReveal path{
		stroke-width: 6.5 !important;
  		stroke-dasharray: 0.5px, 10px !important;
	}
	
	#carta .flex-carta{
		flex-direction: column-reverse;
	}
	#carta .flex-carta > div{
		width:100% !important;
	}
	#carta .JoseAntonio{
		display:block;
		max-width: 300px;
		margin: 0 auto;
		width: 100%;
	}
	
	#divisiones{
		padding:60px 0;
		overflow: hidden;
	}
	
	#perfil .diagrama-estructura{
		width:100%;
	}
	
	#mapa .flex-mapa{
		flex-direction: column;
	}
	
	#mapa .flex-mapa > div:first-child{
		margin: 0 auto;
		width: auto;
		order: 2
	}
	#mapa .flex-mapa > div:nth-child(2){
		margin: 0 auto;
		order: 1;
		width: 50%;
	}
	
	#metas .flex-metas .bg-metas{
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		height: 80%;
		width: 100%;
	}
	
	#metas .flex-metas > div:nth-child(2){
		width: 100%;
	}
	
	#metas .flex-metas > div:nth-child(3){
		width: 39%;
	}
	#metas .flex-metas > div:nth-child(4){
		width: 21%;
	}
	#metas .flex-metas > div:nth-child(5){
		width: 40%;
	}
	
	#logos .flex-logos{
		  gap: 100px;

	}
	
	footer .foot-mid > div:first-child{
		width: 100%;
	}

	footer .foot-mid > div:nth-child(2){
		margin-top: 40px;
		width: 100%;
	}
}

@media screen and (max-width:850px) {
	
}

@media screen and (max-width:800px) {
	#home .intro-txt{
		bottom: 22%;
	}
	#home .lineas{
		width: 100%;
		bottom: 25%;
	}
	#home .intro-txt h2{
		font-size: 80px;
	}
	#home .intro-txt p{
		font-size: 17px;
		margin-top: 20px;
		margin-left: 12%;
	}
	
	#carta .evolucionando h3{
		font-size: 60px;
	}
	
	#divisiones .flex-divisiones > div:nth-child(2), #divisiones .flex-divisiones > div:nth-child(4){
		display: none;
	}
	#divisiones .flex-divisiones > div:first-child, #divisiones .flex-divisiones > div:nth-child(3), #divisiones .flex-divisiones > div:nth-child(5){
		width: 100%;
		max-width: 370px;
		margin: 30px auto;
	}
	
	#perfil .titulo-estructura{
		width: 100%;
		margin: 60px auto 0;
	}
	
	#graficas .flex-graficas > div{
		width: 45%;
	}
	
	#sostenibilidad{
		padding: 100px 0 0px;
		background:#ffffff;
	}
	#sostenibilidad h5{
		color: #7bb23b;
	}
	
	#sostenibilidad .bg-sostenibilidad .flex-sost-img{
		display: none;
	}
	#sostenibilidad .flex-sost .sost-img{display:block;}
	#sostenibilidad .flex-sost > div:nth-child(2), #sostenibilidad .flex-sost > div:nth-child(4){
		display: none;
	}
	#sostenibilidad .flex-sost > div:first-child, #sostenibilidad .flex-sost > div:nth-child(3), #sostenibilidad .flex-sost > div:nth-child(5){
		width: 100%;
		max-width: 370px;
		margin: 30px auto;
	}
}

@media screen and (max-width:760px) {
	#perfil .diagrama-estructura .circulo{
		width: 100px;
		height: 100px;
	}
	#perfil .diagrama-estructura .circulo img{
		width: 75%;
	}
	#perfil .diagrama-estructura > div:nth-child(3) .recuadro{
		width: 130px;
		height: 100px;
		margin: 5px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(3) .recuadro p.f22{
		font-size: 16px;
	}
	#perfil .diagrama-estructura > div:nth-child(4) .proximidad-divisiones .line{
		width: 20px;
	}
	#perfil .diagrama-estructura > div:nth-child(4) .proximidad-divisiones p{
		font-size: 12px;
		margin: 4px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(2) img{
		width:170px;
	}
	#perfil .diagrama-estructura > div:nth-child(4){
		height:330px;
	}
}

@media screen and (max-width:720px) {
	#home .bg-home{
		background-position: 75% top;
	}
	#home .logo{
		bottom: 3%;
	}
	#home .button-descargar{
		bottom: 13%;
	}
	
	#perfil{
		padding: 90px 0 30px;
	}
	
	#mapa .flex-mapa > div:nth-child(2){
		width: 60%;
	}
	#mapa .flex-mapa > div:first-child ol li{
		margin-bottom: 10px;
	}
	
	#graficas .flex-graficas > div.indicadores{
		width: 95%;
		margin: 20px auto;
		order: 5;
		flex-wrap: wrap;
	}
	#graficas .flex-graficas > div.indicadores > div{margin: 10px;}
}

@media screen and (max-width:690px) {
	#logos .flex-logos{
		  gap: 70px;

	}
}

@media screen and (max-width:650px) {
	#home .intro-txt h2{
		font-size: 60px;
	}
	
	#home .intro-txt p{
		margin-left: 14.5%;
	}
	
	#home .logo{
		width: 100px;
	}
	
	footer .foot-arriba{
		flex-direction: column;
	}
}

@media screen and (max-width:580px) {
	#carta .evolucionando h3{
		font-size: 50px;
	}
	
	#mapa .flex-mapa > div:nth-child(2){
		width: 100%;
	}
	
	#mapa .america{
		position:absolute;
		top: 20%;
		right: 10%;
	}
	
	#mapa .europa .europa-map{
		margin: 0 auto;
	}
	#mapa .europa .europa-numbers{
		margin: 0 auto;
	}
	
	#mapa .europa{
		position:relative;
		bottom: auto;
		left: auto;
		right: auto;
		margin: 30px auto;
	}
	
	#graficas .flex-graficas > div{
		width: 55%;
	}
	
	#metas .linea-naranja path, #metas .linea-green path, #metas .linea-purple path{
		stroke-width:2px !important;
	}
	
	
	#metas .linea-puntos, #metas .linea-naranja, #metas .linea-green, #metas .linea-purple{
		bottom: auto;
		top: 30%;
	}
	#metas .linea-puntos #maskReveal1 path, #metas .linea-puntos #maskReveal2 path, #metas .linea-puntos #maskReveal3 path{
		stroke-width: 6.5 !important;
  		stroke-dasharray: 0.5px, 10px !important;
	}
	
	#metas .flex-metas > div:nth-child(3){
		width: 100%;
	}
	#metas .flex-metas > div:nth-child(4){
		width: 100%;
	}
	#metas .flex-metas > div:nth-child(4) img{
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
		max-width: 100px;
		margin: 60px auto;
	}
	#metas .flex-metas > div:nth-child(5){
		width: 100%;
	}
}

@media screen and (max-width:560px) {
	#perfil .diagrama-estructura .circulo{
		width: 60px;
		height: 60px;
	}
	#perfil .diagrama-estructura .circulo img{
		width: 75%;
	}
	#perfil .diagrama-estructura > div:nth-child(3) .recuadro{
		width: 100px;
		height: 80px;
		margin: 5px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(3) .recuadro p.f22{
		font-size: 12px;
		margin: 5px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(4) .proximidad-divisiones .line{
		width: 15px;
	}
	#perfil .diagrama-estructura > div:nth-child(4) .proximidad-divisiones p{
		font-size: 12px;
		margin: 2px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(2) img{
		width:120px;
	}
	#perfil .diagrama-estructura > div:nth-child(4){
		height:260px;
	}
}

@media screen and (max-width:490px) {
	#home .linea-naranja path{
		stroke-width:3px;
	}
	#home .linea-naranja{
		bottom:10%;
	}
	#home .linea-azul path{
		stroke-width:3px !important;
	}
	#home .linea-blanca path{
		stroke-width:3px !important;
	}
	#home .linea-roja path{
		stroke-width:3px !important;
	}
	#home .linea-puntos #maskReveal path{
		stroke-width: 7.5 !important;
  		stroke-dasharray: 0.5px, 15px !important;
	}
	
	#home .intro-txt{
		bottom: 22%;
	}
	#home .lineas{
		width: 100%;
		bottom: 25%;
	}
	
	#home .intro-txt h2{
		font-size: 45px;
	}
	#home .intro-txt p{
		font-size: 15px;
		margin-top: 20px;
		margin-left: 6%;
	}
	#home .button-descargar{
		max-width: 250px;
	}
	.button-descargar{
		font-size: 11px;
	}
	
	#carta .evolucionando h3{
		font-size: 40px;
	}
	
	#logos .flex-logos{
		  gap: 70px;

	}
	#logos .flex-logos > div{
		width: 70px;
		height: 70px;
	}
}

@media screen and (max-width:450px) {
	
}

@media screen and (max-width:425px) {
	#carta .evolucionando h3{
		font-size: 35px;
	}
	
	#perfil .titulo-estructura{
		margin: 60px auto 30px;
	}
	#perfil .diagrama-estructura > div:nth-child(3) .recuadro{
		width: 100px;
		height: 70px;
		margin: 5px 0;
	}
	#perfil .diagrama-estructura > div:nth-child(2) img{
		width:100px;
	}
	
	#perfil .diagrama-estructura > div:nth-child(4) .proximidad-divisiones p{
		font-size: 9px;
		margin: 2px 0;
		line-height: 1;
	}
	#perfil .diagrama-estructura > div:nth-child(4){
		height:220px;
	}
	
	#graficas .flex-graficas > div{
		width: 80%;
	}
	
	#logos .flex-logos{
		  gap: 50px;

	}
	
	
	footer .foot-mid > div:nth-child(2) .redes > a{
		min-width: 25px;
		min-height: 25px;
	}

	footer .foot-mid > div:nth-child(2) i{
		font-size: 20px;
	}
}


@media screen and (max-width:325px) {
	
}

/* iPad screen size rules */
@media only screen and (device-width: 768px) {
	
}

/* Portrait iPad display */
@media only screen and (min-device-width: 720px) and (max-device-width: 1020px) and (orientation:landscape) {
	
}

/* Landscape iPad display */
@media only screen and (min-device-width: 320px) and (max-device-width: 720px) and (orientation:landscape) {	
	

}