@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) {

}

@media screen and (max-width:1145px) {
	
}
@media screen and (max-width:1119px) {
	header .menu-abajo{display: none;}
	header nav{opacity: 0; visibility: hidden; position: absolute; top: 58px; display: block; width: 100% !important; height: auto;}
	header .menu-btn{display:block;}
	header nav .menu{
		display: block;
		width: 100%;
	}
	header nav .menu > li{
		position: relative;
		display: block;
		justify-content: center;
		width: 100%;
	}
	
	header nav .menu > li > a{
		padding: 15px 0;
		text-align: center;
		font-size: 14px;
	}
	header nav .menu > li > a > br{
		display: none;

	}

	header nav .submenu{
		position: relative;
		width: 100%;
		top:0;
		left: 0;
		padding: 2px 0;
		border-radius: 0px 0px 0px 0px;
		-moz-border-radius: 0px 0px 0px 0px;
		-webkit-border-radius: 0px 0px 0px 0px;
		visibility: inherit;
		opacity: 1;
		display: block;
	}
	header nav .submenu > li{
		margin: 7px 0;
	}
	header nav .submenu > li > a{
		text-align: center;
		font-size: 11px;
	}
	header nav .submenu > li > a > br{
		display: none;
	}
}

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

}


@media screen and (max-width:995px) {
	#valor p{
		font-size:20px;
	}
	#gobernanza p{
		font-size:20px;
	}
	#social p{
		font-size:20px;
	}
	#climatico p{
		font-size:20px;
	}
	#ambiental p{
		font-size:20px;
	}
	
	#descarbonizacion .flex-potencial{
		flex-direction: column;
	}
	#descarbonizacion .flex-potencial > div:first-child{
		width:100%;
		margin-bottom: 30px;
	}
	#descarbonizacion .flex-potencial > div:nth-child(2){
		width: 50%;
		margin: 0 auto;
		height: 300px;
	}
	#minero .flex-minero{
		flex-direction: column;
	}
	#minero .flex-minero > div:first-child{
		width: 100%;
	}
	#minero .flex-minero > div:nth-child(2){
		width: 100%;
	}
	
	
	#comunidades2 .flex-inversion > div{
		width: 100%;
	}
	#dialog-content .flex-6040, #dialog-content2 .flex-6040, #dialog-content2 .flex-50{
		flex-direction: column;
	}
	#dialog-content .flex-6040 > div:first-child, #dialog-content2 .flex-6040 > div:first-child{width:100%;}
	#dialog-content .flex-6040 > div:nth-child(2), #dialog-content2 .flex-6040 > div:nth-child(2){width:100%;}
	#dialog-content2 .flex-50 > div{width:100%;}
	
	#dialog-content4 .flex4060{
		flex-direction: column;
	}
	#dialog-content4 .flex4060 > div:first-child{
		width: 100%;
	}
	#dialog-content4 .flex4060 > div:nth-child(2){
		width: 100%;
	}
}

@media screen and (max-width:900px){
	.slider-wrapper {
	  position: relative;
	  overflow: hidden;
	  height: auto;
	}
	#slider {
	  position: relative;
	  display: block; /* elimina el flex horizontal */
	  white-space: nowrap; /* permite alinearlos en fila horizontal */
	}
	.slide {
	  display: inline-block;
	  vertical-align: top;
	  width: 100vw;
	  white-space: normal;
		height: auto;
  		height: fit-content;
	}
	#home h1{
		font-size:32px;
		right: 30px;
		bottom: 28%;
		width: 380px;
		color: #ffffff;
		line-height: 1.1;
	}
	#home p.informe{
		right: 30px;
		bottom: 20%;
		width: 400px;
	}
	#home .persona{
		bottom: -20px;
		left: -40px;
		height: auto;
		width: 500px;
	}
	#home .bg-logo2{
		width:40%; 
		height: 40%; 
		top: -170px; 
		right: -60px;
	}
	#home .logo{width:60px; right: 9%; top: 11%;}
	
	.slider-container {
	  /*scroll-snap-type: x mandatory;
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch;*/
	}
	
	#ods .flex-central{
		flex-wrap: wrap;
	}
	#ods .flex-central > div:first-child{
		width: 100%;
	}
	#ods .flex-central > div:nth-child(2){
		width: 100%;
	}

	.slide {
	  scroll-snap-align: start;
	}
	#desempeno p {
	  max-width: inherit;
	}
	#desempeno .slide .flex-ambiental, #desempeno .slide .flex-social, #desempeno .slide .flex-gobernanza{
		flex-direction: column;
		justify-content: space-between;
	}
	#desempeno .slide .flex-ambiental > div, #desempeno .slide .flex-social > div, #desempeno .slide .flex-gobernanza > div{
		padding: 30px 0;
		min-height: inherit;
		width: 100% !important;
		margin-bottom: 30px;
	}
	#descarbonizacion .flex-descarbonizacion{
		flex-direction: column;
	}
	#descarbonizacion .flex-descarbonizacion > div:first-child{
		width: 100%;
	}
	#descarbonizacion .flex-descarbonizacion > div:nth-child(2){
		width: 100%;
	}
	#agua .flex-agua{
		flex-direction: column;
	}
	#agua .flex-agua > div:first-child{
		width: 100%;
	}
	#agua .flex-agua > div:nth-child(2){
		width: 100%;
	}
	
	#dialog-content3 .flex-politicas{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	#dialog-content3 .flex-politicas > div{
		width: 40%;
		padding: 30px 10px;
		margin-bottom: 20px;
	}
	
	#dialog-content6 .flex-incidentes{
		flex-direction: column;
	}
	#dialog-content6 .flex-incidentes > div:first-child{
		width: 100%;
	}
	#dialog-content6 .flex-incidentes > div:nth-child(2){
		width: 100%;
	}
	
	#dialog-content6 .flex-eficiencia{
		flex-direction: column;
	}
	#dialog-content6 .flex-eficiencia > div{
		width: 100%;
	}
	
	#dialog-content6 .flex-unidad{
		flex-wrap: wrap;
	}
	#dialog-content6 .flex-unidad > div{
		width: 50%;
	}
}

@media screen and (max-width:850px) {
	#dialog-content2 .diagrama-etica .tiempo{
		flex-direction: column;
	}
	#dialog-content2 .diagrama-etica .tiempo > div{
		width: 100% !important;
	}
	#dialog-content2 .diagrama-etica .tiempo > div .linea-t{display: none;}
	
	#dialog-content2 .flex-lineamientos{flex-direction: column;}
	#dialog-content2 .flex-lineamientos > div:nth-child(13){display: none;}
	#dialog-content2 .flex-lineamientos > div{
		width: 90% !important;
		margin: 0 auto 30px;
	}
	#agua .flex-balance{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#agua .flex-balance > div:nth-child(3){
		order: 1;
		width: 100%;
	}
	#agua .flex-balance > div:first-child{
		order: 2;
	}
	#agua .flex-balance > div:nth-child(2){
		order: 3;
		width: 40%;
	}
	#agua .flex-balance > div:nth-child(4){
		order: 4;
		width: 45%;
	}
}

@media screen and (max-width:800px) {
	#intro{
		height:600px;
	}
	#intro .flex-intro h2 {
		font-size: 18px;
		width: 80%;
	}
	#proposito .flex-principios{
		flex-direction: column;
	}
	#proposito .flex-principios > div{
		width: 100% !important;
	}
	#proposito .flex-principios .flecha img{
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
		margin: 10px auto 10px;}
	#proposito .flex-proposito{
		flex-direction: column;
	}
	#proposito .flex-proposito > div{
		width: 100%;
	}
	#compartiendo .flex-compartiendo{
		flex-wrap: wrap;
	}
	#compartiendo .flex-compartiendo > div{
		width: 100%;
	}
	#compartiendo .diagrama-valor .flecha{width:100%;}
	
	#estrategia .flex-estrategia {
		flex-direction: column;
	}
	#estrategia .flex-estrategia > div{
		 width: 100% !important;
	}
	#estrategia #info-box {
		margin-bottom: 30px;
	}
	#etica .diagrama-etica .tiempo{
		flex-direction: column;
	}
	#etica .diagrama-etica .tiempo > div{
		width: 100% !important;
	}
	#etica .diagrama-etica .tiempo > div .linea-t{display: none;}
	
	#humanos .flex-humanos{
		flex-direction: column;
	}
	#humanos .flex-humanos > div{
		width: 100%;
	}
	
	#seguridad .flex-seguridad, #seguridad .flex-seguridad2{
		flex-direction: column;
	}
	#seguridad .flex-seguridad > div, #seguridad .flex-seguridad2 > div{
		width:100% !important;
	}
	#seguridad #info-box {
		margin: 30px 0;
	}
	#comunidades .flex-comunidades{
		flex-direction: column;
	}
	#comunidades .flex-comunidades > div{
		width: 100%;
	}
	#comunidades .flex-comunidades > div:nth-child(2){
		height: 400px;
	}
	#comunidades .flex-estandar{
		flex-direction: column;
	}
	#comunidades .flex-estandar > div:first-child{
		width: 100%;
	}
	#comunidades .flex-estandar > div:nth-child(2){
		width: 100%;
	}
	#comunidades2 .flex-comunidades2{
		flex-direction: column;
	}
	#comunidades2 .flex-comunidades2 > div:first-child{
		width: 100%;
	}
	#indigenas .flex-indigenas{
		flex-direction: column;
	}
	#indigenas .flex-indigenas > div:first-child{
		width: 100%;
	}
	#indigenas .flex-indigenas > div:nth-child(2){
		width: 100%;
	}
	#gente .flex-gente{
		flex-direction: column;
	}
	#gente .flex-gente > div:first-child{
		width: 100%;
	}
	#gente .flex-gente > div:nth-child(2){
		width: 100%;
	}
	
	#inclusion .flex-inclusion{
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	#inclusion .flex-inclusion > div{
		width: 50%;
	}
	
	#descarbonizacion .flex-gei{
		flex-wrap: wrap;
	} 
	#descarbonizacion .flex-gei > div:first-child{
		width: 100%;
	}
	#descarbonizacion .flex-gei > div:nth-child(2), #descarbonizacion .flex-gei > div:nth-child(3){
		width: 50%;
	}
	
	#minero .flex-desempeno{
		flex-direction: column;
	}
	#minero .flex-desempeno > div:first-child{
		width: 100%;
		order: 1;
	}
	#minero .flex-desempeno > div:nth-child(2){
		width: 100%;
		order: 2;
	}
	#cierre .flex-cierre{
		flex-direction: column;
	}
	#cierre .flex-cierre > div:first-child{
		order: 1;
		width: 100%;
	}
	#cierre .flex-cierre > div:first-child .high{ 
		width: 100%;
		margin: 40px 0;
	}
	#cierre .flex-cierre > div:nth-child(2){
		width: 100%;
		order: 2;
	}
	
	#dialog-content2 .flex-denuncias{
		flex-direction: column;
	}
	#dialog-content2 .flex-denuncias > div{
		width: 100%;
	}
	
	#dialog-content4 .flex-ratio{
		flex-direction: column;
	}
	#dialog-content4 .flex-ratio > div{
		width: 100%;
	}
	#dialog-content6 .flex-wri{
		flex-direction: column;
	}
	#dialog-content6 .flex-wri > div:first-child{
		width: 100%;
	}
	#dialog-content6 .flex-wri > div:nth-child(2){
		width: 100%;
	}
	
	#dialog-content5 ul, #dialog-content6 ul{
		padding-left:20px;
	}
	
	#dialog-content6 .flex-hidrico{
		flex-direction: column;
	}
	#dialog-content6 .flex-hidrico > div:first-child{
		width: 100%;
	}
	#dialog-content6 .flex-hidrico > div:nth-child(2){
		width: 100%;
	}
	
	#dialog-content6 .flex-mi{
		flex-direction: column;
	}
	#dialog-content6 .flex-mi img:first-child{
		display: block;
		width:50%;
	}
	#dialog-content6 .flex-mi img:nth-child(2){
		display: block;
		width:50%;
	}
	#dialog-content6 .flex-mi img:nth-child(3){
		display: block;
		width:50%;
	}
	
	footer .flex-footer{
		flex-wrap:wrap;
		justify-content: flex-end;
	}
	footer .flex-footer > div:first-child, footer .flex-footer > div:nth-child(2), footer .flex-footer > div:nth-child(3){
		width: 50%;
	}
}

@media screen and (max-width:760px) {
	#home h1{
		font-size:30px;
		right: 30px;
		bottom: 28%;
		width: 330px;
		color: #ffffff;
		line-height: 1.1;
	}
	#home p.informe{
		right: 30px;
		bottom: 20%;
		width: 400px;
	}
	#home .persona{
		bottom: -20px;
		left: -40px;
		height: auto;
		width: 400px;
	}
	
	#valor, #gobernanza, #social, #climatico, #ambiental{
		height: 600px;
	}
	#valor h1, #gobernanza h1, #social h1, #climatico h1, #ambiental h1{
		top: 12%;
	}
	#valor p, #gobernanza p, #social p, #climatico p, #ambiental p{
		font-size:18px;
		left: 40px;
		top: 30%;
		width: 37%;
		max-width: 480px;
		line-height: 1.3;
	}
	
	#ods .flex-relacion{
		flex-wrap: wrap;
	}
	#ods .flex-relacion > div{
		width: 100%;
		margin-bottom: 30px;
	}
	
	#descarbonizacion .flex-energia{
		flex-direction: column;
	}
	#descarbonizacion .flex-energia > div:first-child{
		width: 100%;
	}
	#descarbonizacion .flex-energia > div:nth-child(2){
		width: 100%;
	}
	
	#descarbonizacion .flex-adaptacion{
		flex-direction: column;
	}
	#descarbonizacion .flex-adaptacion > div:first-child{
		width: 100%;
	}
	#descarbonizacion .flex-adaptacion > div:nth-child(2){
		width: 100%;
	}
}

@media screen and (max-width:720px) {
	#modelo .modelo{
		width: 100%;
	}
	#modelo .modelo .cuadro img{
		width: 30px;
	}
	#etica .flex-etica{
		flex-direction: column;
	}
	#etica .flex-etica > div:first-child{
		width: 100%;
	}
	#etica .flex-etica > div:nth-child(2){
		width: 90%;
		margin: 0 auto;
		height: 300px;
	}
	
	#dialog-content4 .flex-contrataciones{
		flex-direction: column;
	}
	#dialog-content4 .flex-contrataciones > div:first-child{
		width: 100%;
	}
	#dialog-content4 .flex-contrataciones > div:nth-child(2){
		width: 100%;
	}
}

@media screen and (max-width:690px) {
	#inclusion .flex-inclusion > div{
		width: 80%;
	}
	
	footer .flex-footer > div:first-child, footer .flex-footer > div:nth-child(2), footer .flex-footer > div:nth-child(3){
		width: 100%;
	}
}

@media screen and (max-width:650px) {
	
	#valor h1, #gobernanza h1, #social h1, #climatico h1, #ambiental h1{
		font-size:28px;
		width: 235px;
		left: 20px;
	}
	#valor p{
		font-size:14px;
		left: 20px;
		top: 30%;
		width: 45%;
		line-height: 1.2;
	}
	#gobernanza p{
		font-size:14px;
		left: 20px;
		top: 25%;
		width: 45%;
		line-height: 1.2;
	}
	#social p{
		font-size:14px;
		left: 20px;
		top: 22%;
		width: 45%;
		line-height: 1.2;
	}
	#climatico p{
		font-size:14px;
		left: 20px;
		top: 30%;
		width: 50%;
		line-height: 1.2;
	}
	#ambiental p{
		font-size:14px;
		left: 20px;
		top: 30%;
		width: 50%;
		line-height: 1.2;
	}
	#valor .button-down, #gobernanza .button-down{
		bottom: 38%;
		left: 20px;
		font-size: 40px;
	}
	#climatico .button-down{
		bottom: 35%;
		left: 20px;
		font-size: 40px;
	}
	#ambiental .button-down{
		bottom: 35%;
		left: 20px;
		font-size: 40px;
	}
	#social .button-down{
		bottom: 42%;
		left: 20px;
		font-size: 40px;
	}
	
	#modelo h2{font-size: 28px; line-height: 1.2;}
	#proposito h2{font-size: 28px; line-height: 1.2;}
	#compartiendo h2{font-size: 28px; line-height: 1.2;}
	#ods h2{font-size: 28px; line-height: 1.2;}
	#estrategia h2{font-size: 28px; line-height: 1.2;}
	#etica h2{font-size: 28px; line-height: 1.2;}
	#humanos h2{font-size: 28px; line-height: 1.2;}
	#seguridad h2{font-size: 28px; line-height: 1.2;}
	#comunidades h2{font-size: 28px; line-height: 1.2;}
	#comunidades2 h2{font-size: 28px; line-height: 1.2;}
	#indigenas h2{font-size: 28px; line-height: 1.2;}
	#gente h2{font-size: 28px; line-height: 1.2;}
	#agua h2{font-size: 28px; line-height: 1.2;}
	#minero h2{font-size: 28px; line-height: 1.2;}
	#cierre h2{font-size: 28px; line-height: 1.2;}
	#dialog-content h2, #dialog-content2 h2{font-size: 28px; line-height: 1.2;}
	
	.txt p.f24{font-size:20px !important;}
	
	#descarbonizacion .neutralidad p{
		font-size: 9px;
		color: #ffffff;
		padding: 5px;
		margin: 0;
		position: absolute;
		bottom: 0;
		left:0;
		font-weight: 700;
		line-height: 1.2;
	}
	#descarbonizacion .neutralidad p span{
		font-size: 7px;
	}
	
	#agua .flex-balance > div:nth-child(3){
		order: 3;
		width: 100%;
		margin-bottom: 30px;
	}
	#agua .flex-balance > div:first-child{
		order: 1;
		margin-bottom: 30px;
	}
	#agua .flex-balance > div:nth-child(2){
		order: 2;
		width: 55%;
		margin-bottom: 30px;
	}
	#agua .flex-balance > div:nth-child(4){
		order: 4;
		width: 100%;
	}
	#minero .sistema{
		flex-direction: column;
		align-items: center;
	}
	#minero .sistema > div{
		width: 50%;
	}
	#minero .sistema .linea{
		display: none;
	}
	#minero .flex-minero .nota{
	margin-top:30px;
}
}

@media screen and (max-width:580px) {
	#modelo .modelo .indicadores{
		position: relative;
		margin-top: 30px;
		width: 100%;
	}
	#modelo .modelo p{
		font-size: 10px;
		text-align: center;
	}
	#modelo .modelo .cuadro{
		padding: 25px 0px;
	}
	#comunidades2 .flex-inversion > div:first-child, #comunidades2 .flex-inversion > div:nth-child(2), #comunidades2 .flex-inversion > div:nth-child(3), #comunidades2 .flex-inversion > div:nth-child(4){
		flex-direction: column;
	}
	#comunidades2 .flex-inversion > div:first-child > div, #comunidades2 .flex-inversion > div:nth-child(2) > div, #comunidades2 .flex-inversion > div:nth-child(3) > div, #comunidades2 .flex-inversion > div:nth-child(4) > div{
		width:100%;
	}
	#comunidades2 .flex-inversion > div:first-child > div:nth-child(2), #comunidades2 .flex-inversion > div:nth-child(2) > div:nth-child(2){
		order:1;		
	}
	#comunidades2 .flex-inversion > div:first-child > div:first-child, #comunidades2 .flex-inversion > div:nth-child(2) > div:first-child{
		order:2;		
	}
	#inclusion .flex-inclusion > div{
		width: 100%;
	}
	
	#descarbonizacion .flex-gei > div:nth-child(2), #descarbonizacion .flex-gei > div:nth-child(3){
		width: 100%;
	}
	
	#dialog-content3 .flex-politicas > div{
		width: 90%;
	}
	#dialog-content6 .flex-unidad > div{
		width: 100%;
	}
	
	.fancybox__content{
		padding:0 !important;
	}
}

@media screen and (max-width:560px) {
	#home h1{
		font-size:24px;
		right: 30px;
		bottom: auto;
		top: 23%;
		width: 280px;
		color: #ffffff;
		line-height: 1.1;
	}
	#home p.informe{
		right: 30px;
		bottom: auto;
		top: 41%;
		width: 400px;
	}
	#home .persona{
		bottom: -25px;
		left: -45px;
		height: auto;
		width: 250px;
	}
	#home .bg-logo2{
		width:200px; 
		height: 200px; 
		top: -9%; 
		right: -25px;
	}
	#home .logo{width:40px; right: 14%; top: 75px;}
	#compartiendo .grafica-cont{
		flex-direction: column;
	}
	#compartiendo .grafica-cont .tb-grafica{
		width: 100%;
	}
	#indigenas .flex-estrategia-indigena{
		flex-wrap: wrap;
	}
	#indigenas .flex-estrategia-indigena > div{
		width: 38%;
		margin-bottom: 20px;
	}
	#descarbonizacion .flex-potencial > div:nth-child(2){
		width: 84%;
		margin: 0 auto;
	}
	#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:first-child p{
		transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		width: 100px;
		transform-origin: bottom left;
		left: 30px;
	}
	#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) p{
		transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		width: 100px;
		transform-origin: bottom left;
		left: 30px;
	}
	#agua .flex-agua .grafica-cont .txt{
		flex-direction: column;

	}
	#minero .sistema > div{
		width: 90%;
	}
}

@media screen and (max-width:490px) {
	#ods .flex-flecha .flecha p {
		font-size: 12px;
	}
	#seguridad .flex-ruta{
		padding: 30px 25px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#seguridad .flex-ruta > div:nth-child(2), #seguridad .flex-ruta > div:nth-child(6), #seguridad .flex-ruta > div:nth-child(10){
		width: 60%;
	}
	#seguridad .flex-ruta > div:nth-child(4), #seguridad .flex-ruta > div:nth-child(8){
		width: 60%;
		flex-direction: column;
		display: flex;
	}
	#seguridad .flex-ruta > div:nth-child(5), #seguridad .flex-ruta > div:nth-child(9){
		width: 5%;
		align-self: center;
	}
	#seguridad .flex-ruta > div:nth-child(3) .flecha, #seguridad .flex-ruta > div:nth-child(7) .flecha, #seguridad .flex-ruta > div:nth-child(5) .flecha, #seguridad .flex-ruta > div:nth-child(9) .flecha{
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	#seguridad .flex-ruta .flecha .rotate2{
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
	}
}

@media screen and (max-width:450px) {
	#modelo .modelo p{
		font-size: 7px;
		text-align: center;
	}
	#modelo .modelo .cuadro{
		padding: 25px 0px;
		min-width: 55px;
	}
	#estrategia #info-text p, #seguridad #info-text p{
		font-size: 14px;
	}
	
}

@media screen and (max-width:425px) {
	#valor p, #gobernanza p, #social p, #climatico p, #ambiental p{
		font-size:12px;
	}
}


@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) {	
	

}