@charset "utf-8";
/* CSS Document */
html, body{
	margin:0; 
	padding:0; 
	width:100%; 
	height:100%; 
	font-family: rothwood, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	color: #4d4d4d;
	position: relative;
	display: block;
}

.over{
	overflow-x:auto;
}

.blue{color:#4282de !important;}
.blue2{color:#17b5de !important;}
.blue3{color:#005ca6 !important;}
.blue4{color:#363583 !important;}
.green{color:#0da48e !important;}
.orange{color:#f58220 !important;}
.purple{color:#7b5ca7 !important;}
.white{color:#ffffff !important;}
.gray{color: #4d4d4d !important;}
.gray1{color: #95a7b9 !important;}
.aqua{color:#19c8cd;}

.bg-red{background-color:#d70000;}
.bg-purple{background-color:#7b5ca7;}
.bg-green{background-color:#0da48e;}
.bg-green2{background-color:#51b048;}
.bg-green3{background-color:#006251;}
.bg-blue{background-color:#005ca6;}
.bg-bluea{background-color:#005ca6;}
.bg-blue2{background-color:#17b5de;}
.bg-blue2a{background-color:#45c4e4;}
.bg-blue3{background-color:#4282de;}
.bg-blue3a{background-color:#689be4;}
.bg-aqua{background-color:#19c8cd;}
.bg-orange{background-color:#f58220;}
.bg-orange2{background-color:#f04f29 !important;}
.bg-yellow{background-color:#ffc43d !important;}
.bg-white{background-color:#ffffff !important;}


.fcenter{text-align:center  !important;}
.fleft{text-align:left !important;}

.fitalic{font-style: italic !important;}

.f11{font-size:11px !important;}
.f12{font-size:12px !important;}
.f14{font-size:14px !important;}
.f16{font-size:16px !important;}
.f18{font-size:18px !important;}
.f24{font-size:24px !important;}

.container {
	max-width: 1180px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.txt{
	padding:0 30px;
}
.txt15{
	padding:0 15px;
}
.txt p{
	line-height: 1.4;
	font-weight: 400;
	margin: 20px 0;
	font-size: 14px;
}
.txt a i{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}
.txt a{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
	text-decoration: none;
	color: #4d4d4d;
}
.txt a:hover{
	color: #d70000;
}
.txt a:hover i{
	font-size: 18px;
}

.nomargin-bottom{margin-bottom:0 !important;}
.nomargin-top{margin-top:0 !important;}

.nowrap{white-space:nowrap;}

.fbold{font-weight:700 !important;}
.fdbold{font-weight:600 !important;}
.fbitalic{font-weight:400 !important; font-style: italic !important;}

.f16{font-size:16px;}

.flex50{
	display:flex;
}
.flex50 > div{width:50%;}

.nota{
	font-size:8px !important;
}

header{
	position: fixed;
	z-index: 3;
	width: 100%;
	top:0;
	font-family: rothwood, serif;
	background: #ffffff;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: 60px;
	-webkit-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.29);
	-moz-box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.29);
	box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.29);
}

header .logo{
	width: 10%;
	background: #ffffff;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding: 5px 0;
}
header .logo a{
	display: inline-flex;
	height: 100%;
	padding-left: 30px;
	justify-content: left;
  	align-items: center;
	text-align: center; 
	vertical-align: middle;
}
header .logo img{
	width: 100%;
	max-width:26px;
}


header nav{
	width: 100%;
	height: 40px;
	background: #ffffff;
	display: inline-block;
	vertical-align: top;
	z-index: 90;
}
header nav ul{
	margin:0 auto;
	padding: 0;
	list-style: none;
}
header nav .menu{
	width: 90%;
	height: 100%;
	display: flex;
	background: #ffffff;
	justify-content: flex-start;
}
header nav .menu > li{
	position: relative;
	display: inline-flex;
	justify-content: center;
  	align-items: center;
	vertical-align: bottom;
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}

header nav .menu > li.active{
	background: #17b5de;
	font-weight: 400;
}
header nav .menu > li.active > a{
	color: #ffffff;
}

header nav .menu > li > a{
	display: block;
	width: 100%;
	font-size: 12px;
	text-decoration: none;
	padding: 12px 20px;
	color: #9F9F9F;
	font-family: 'rothwood', serif;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
	font-weight: 400;
}
header nav .menu > li:nth-child(7){margin-left: auto;;}
header nav .menu > li:hover{
	background: #17b5de;
	font-weight: 400;
}

header nav .menu > li:hover > a{
	color: #ffffff;
}



header .menu-abajo{
	width: 100%;
	height: 20px;
	position: relative;
}
header .menu-abajo .linea{
	position: absolute;
	width: 90%;
	margin: 0 auto;
	height: 1px;
	background: #b2b2b2;
	top: 0;
	left: 0;
	right: 0;
}

header .menu-btn{width: 100px; display:none;  position: absolute; top: 2px; right: 0px; background-color: transparent; z-index: 999999999;}
header .menu-btn #toggle {z-index: 20; display: block; width: 37px; height: 20px; position: absolute; right: 32px; top:21px; border:0;}
header .menu-btn #toggle span:after,
header .menu-btn #toggle span:before {content: ""; position: absolute; right: 0; top: -8px;}
header .menu-btn #toggle span:after{top: 8px;}
header .menu-btn #toggle span {position: relative; display: block;}
header .menu-btn #toggle span,
header .menu-btn #toggle span:after{width: 100%; height: 1.5px; background:#df3423; transition: all 0.3s; backface-visibility: hidden; border-radius: 0px;}
header .menu-btn #toggle span:before {width: 100%; height: 1.5px; background:#df3423; transition: all 0.3s; backface-visibility: hidden; border-radius: 0px;}
/* on activation */
header .menu-btn #toggle.on span {background: transparent;}
header .menu-btn #toggle.on span:before {transform: rotate(45deg) translate(7px, 5px); width: 100%; height: 2px;}
header .menu-btn #toggle.on span:after {transform: rotate(-45deg) translate(6px, -5px); width: 100%; height: 2px;}


/***INICIO****/
#home .button-down{
	position:absolute;
	bottom: 10%;
	cursor: pointer;
	right: 10%;;
	font-size: 60px;
	color: #ffffff;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}

#home{
	width: 100%;
	height: 100%;
	background: url("../img/home/bg-intro.jpg") no-repeat center;
	background-size: cover;
	overflow: hidden;
	position: relative;
}

#home .bg-rombos{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/home/bg-rombos.png") no-repeat right center;
	background-size: cover;
}

#home h1{
	font-size:36px;
	position: absolute;
	right: 40px;
	bottom: 35%;
	width: 400px;
	color: #ffffff;
	line-height: 1.1;
	font-weight: 300;
	text-align: right;
}
#home p.informe{
	
	position: absolute;
	right: 40px;
	bottom: 25%;
	width: 400px;
	text-align: right;
}
#home p.informe a{
	font-size:16px;
	color: #ffffff;
	font-weight: 300;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; 
}
#home p.informe a:hover{
	color: #d70000;
}

#home .persona{
	position:absolute;
	bottom: -20px;
	left: 40px;
	height: 95%;
}

#home .bg-logo{width:100%; height: 100%; position: absolute; background: #ffffff;}
#home .bg-logo2{
	width:40%; 
	height: 40%; 
	position: absolute; 
	background: #ffffff; 
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	top: -150px; right: -25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
#home .logo{width:80px; position: absolute; right: 10%; top: 10%;}

#intro{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
#intro .bg1{
	background: url("../img/home/bg-1.png") no-repeat center top;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#intro .bg2{
	background: url("../img/home/bg-2.png") no-repeat center top;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#intro .bg3{
	background: url("../img/home/bg-3.png") no-repeat center top;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#intro .flex-intro{
	display:flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#intro .flex-intro h2{
	font-size: 24px;
	text-align: center;
	font-weight: 300;
	line-height: 1.4;
	width: 55%;
	margin: 50px auto;
}

#intro .rombo1{
	position:absolute;
	top: -10%;
	left:-10%;
	width: 30%;
}
#intro .rombo2{
	position:absolute;
	top: 10%;
	left:30%;
	width: 5%;
}
#intro .rombo3{
	position:absolute;
	bottom: -15%;
	left:30%;
	width: 25%;
	opacity: 0.3;
}
#intro .rombo4{
	position:absolute;
	top: -15%;
	right:30%;
	width: 15%;
	opacity: 0.5;
}
#intro .rombo5{
	position:absolute;
	bottom: 15%;
	right:25%;
	width: 10%;
	opacity: 0.8;
}
#intro .rombo6{
	position:absolute;
	top: 10%;
	right:-15%;
	width: 35%;
}

#secciones{
	display: flex;
	height: 100%;
	background: #2BB2E1;
	background: -webkit-linear-gradient(109deg,rgba(43, 178, 225, 1) 0%, rgba(211, 157, 56, 1) 100%);
	background: -moz-linear-gradient(109deg,rgba(43, 178, 225, 1) 0%, rgba(211, 157, 56, 1) 100%);
	background: linear-gradient(109deg,rgba(43, 178, 225, 1) 0%, rgba(211, 157, 56, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#2BB2E1",
	  endColorstr="#D39D38",
	  GradientType=0
	);
}
#secciones > div{
}

#desempeno{
	padding:30px 0;
}

#desempeno h1{
	font-size: 37px;
	font-weight: 300;
	margin-bottom: 0;
}
#desempeno h1 span{
	font-size: 37px;
	font-weight: 700;
}

#desempeno .slider-wrapper {
  position: relative;
  width: 100%;
  height: auto;       /* ✅ importante */
  overflow: hidden;   /* ✅ necesario para el efecto */
}

#desempeno .slider-container {
  display: flex;
  transition: transform 0.5s ease;
}

#desempeno .slide {
  min-width: 100%;
  padding: 3rem;
  box-sizing: border-box;
  position: relative;
}

#desempeno .slide h2, .slide p, .slide .counter {
  /*opacity: 0;*/
}

#desempeno h2 {
  font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-align: center;
	margin-bottom: 30px;
}

#desempeno p {
  font-size: 1.2rem;
  max-width: 500px;
  text-align: center;
}


#desempeno .slide .flex-ambiental{
  	display: flex;
	justify-content: space-between;
}
#desempeno .slide .flex-social{
  	display: flex;
	justify-content: space-between;
	max-width:800px;
	margin: 0 auto;
}
#desempeno .slide .flex-gobernanza{
  	display: flex;
	justify-content: space-between;
}
#desempeno .slide .flex-ambiental > div, #desempeno .slide .flex-social > div, #desempeno .slide .flex-gobernanza > div{
	-webkit-border-radius: 26px 26px 26px 26px;
	-moz-border-radius: 26px 26px 26px 26px;
	border-radius: 26px 26px 26px 26px;
	overflow: hidden;
	padding: 30px 0;
	min-height: 500px;
}
#desempeno .slide .flex-ambiental > div img, #desempeno .slide .flex-social > div img, #desempeno .slide .flex-gobernanza > div img{width:60px; margin: 0 auto 20px; display: block;}
#desempeno .slide .flex-ambiental > div p, #desempeno .slide .flex-social > div p, #desempeno .slide .flex-gobernanza > div p{font-size:12px; color: #ffffff;}
#desempeno .slide .flex-ambiental > div p a, #desempeno .slide .flex-social > div p a, #desempeno .slide .flex-gobernanza > div p a{font-weight: 700; font-size: 16px; text-decoration: none; color: #ffffff;}

#desempeno .slide .flex-ambiental > div:first-child{
  background: #2aaf9c;
	width: 18%;
}
#desempeno .slide .flex-ambiental > div:nth-child(2){
  background: #3b81ba;
	width: 36%;
}
#desempeno .slide .flex-ambiental > div:nth-child(3){
  background: #66a197;
	width: 19%;
}
#desempeno .slide .flex-ambiental > div:nth-child(4){
  background: #51b048;
	width: 22%;
}

#desempeno .slide .flex-social > div:first-child{
  background: #f6913a;
	width: 26%;
}
#desempeno .slide .flex-social > div:nth-child(2){
  background: #e34d4d;
	width: 26%;
}
#desempeno .slide .flex-social > div:nth-child(3){
  background: #d39d38;
	width: 40%;
}

#desempeno .slide .flex-gobernanza > div:first-child{
  background: #363583;
	width: 15%;
}
#desempeno .slide .flex-gobernanza > div:nth-child(2){
  background: #7b5ca7;
	width: 47%;
}
#desempeno .slide .flex-gobernanza > div:nth-child(3){
  background: #a38dc1;
	width: 35%;
}

#desempeno .counter {
  font-size: 16px;
  margin-top: 1rem;
  font-weight: bold;
  color: #fff;
}

#desempeno .ambiental { background: #ffffff; }
#desempeno .social { background: #ffffff; }
#desempeno .gobernanza { background: #ffffff; }

#desempeno .nav-buttons {
  position: absolute;
  top: 0%;
	height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

#desempeno .nav-buttons button {
  background: rgba(0, 0, 0, 0);
  color: #939393;
  border: none;
  font-size: 4rem;
	width: 50px;
	height: 100%;
  cursor: pointer;
  pointer-events: all;
  border-radius: 50%;
}

#desempeno .dots {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
	padding: 5px;
}

#desempeno .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #999;
	cursor: pointer;
	border: 2px solid #ffffff;
	-webkit-box-shadow: 0px 0px 6px -2px rgba(66, 68, 90, 1);
	-moz-box-shadow: 0px 0px 6px -2px rgba(66, 68, 90, 1);
	box-shadow: 0px 0px 6px -2px rgba(66, 68, 90, 1);
}

#desempeno .dot.active {
  background: #333;
}

/***INICIO****/


/******CREANDO VALOR*******/
#valor .button-down{
	position:absolute;
	bottom: 20%;
	cursor: pointer;
	left: 40px;
	font-size: 60px;
	color: #17b5de;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}
#valor{
	width:100%;
	height: 100%;
	background: url("../img/valor/bg-valor.jpg") no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#valor .bg1{
	background: url("../img/valor/bg-1.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#valor .bg2{
	background: url("../img/valor/bg-2.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#valor .bg3{
	background: url("../img/valor/bg-3.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

#valor h1{
	font-size:36px;
	position: absolute;
	left: 40px;
	top: 15%;
	width: 400px;
	color: #999999;
	line-height: 1.1;
	font-weight: 300;
}
#valor p{
	font-size:24px;
	position: absolute;
	left: 40px;
	top: 35%;
	width: 37%;
	max-width: 480px;
	color: #999999;
	line-height: 1.4;
	font-weight: 300;
}

#modelo{
	padding:40px 0;
}
#modelo h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#modelo .modelo{
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	width: 75%;
	position: relative;
}
#modelo .modelo p{
	font-size: 12px;
	text-align: center;
}
#modelo .modelo .cuadro{
	padding: 25px 15px;
	min-width: 70px;
	max-width: 80px;
}
#modelo .modelo .cuadro img{
	width: 50px;display: block;
	margin: 0 auto;
}
#modelo .modelo .gobierno{
	width: 70%;
	background: #f2eff6;
	-webkit-border-radius: 70px 70px 70px 70px;
	-moz-border-radius: 70px 70px 70px 70px;
	border-radius: 70px 70px 70px 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#modelo .modelo .linea1{
	position:relative;
	border-left:2px solid #7b5ca7;
	border-right:2px solid #7b5ca7;
	width: 93%;
	height: 10px;
	display: flex;
	align-items: center;
	margin: 20px 0;
}
#modelo .modelo .linea1-a{
	position:relative;
	background: #7b5ca7;
	width: 100%;
	height: 2px;
}
#modelo .modelo .linea1-b{
	position:absolute;
	border-top: 2px solid #7b5ca7;
	width: 10px;
	height: 10px;
	top: -6px;
	left: 54%;
}
#modelo .modelo .linea1-c{
	position:absolute;
	background:#7b5ca7;
	width: 2px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#modelo .modelo .proceso{
	width:100%;
	background: #fbf5eb;
	-webkit-border-radius: 70px 70px 70px 70px;
	-moz-border-radius: 70px 70px 70px 70px;
	border-radius: 70px 70px 70px 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#modelo .modelo .proceso img:nth-child(2){width: 14%; position: relative;}
#modelo .modelo .proceso img:nth-child(3){width: 17%; position: relative;}
#modelo .modelo .proceso img:nth-child(4){width: 17%; position: relative;}
#modelo .modelo .proceso img:nth-child(5){width: 17%; position: relative;}
#modelo .modelo .proceso img:nth-child(6){width: 17%; position: relative;}
#modelo .modelo .proceso img:nth-child(7){width: 12%; position: relative;}

#modelo .modelo .energia{
	width: 70%;
	background: #ebebf3;
	border-radius: 70px 70px 70px 70px;
	-webkit-border-radius: 70px 70px 70px 70px;
	-moz-border-radius: 70px 70px 70px 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#modelo .modelo .linea2{
	position:relative;
	border-left:2px solid #363583;
	border-right:2px solid #363583;
	width: 93%;
	height: 10px;
	display: flex;
	align-items: center;
	margin: 20px 0;
}
#modelo .modelo .linea2-a{
	position:relative;
	background: #363583;
	width: 100%;
	height: 2px;
}
#modelo .modelo .linea2-b{
	position:absolute;
	border-bottom: 2px solid #363583;
	width: 10px;
	height: 10px;
	bottom: -6px;
	right: 25%;
}
#modelo .modelo .linea2-c{
	position:absolute;
	background:#363583;
	width: 2px;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#modelo .modelo .linea3{
	position:absolute;
	border-left:2px solid #d39d38;
	border-top:2px solid #d39d38;
	border-bottom:2px solid #d39d38;
	width: 50px;
	height: 99%;
	left: 7%;
	top:0;
}
#modelo .modelo .linea3-a{
	width:2px;
	position: absolute;
	height: 10px;
	top: -6px;
	right: 0;
	background: #d39d38;
}
#modelo .modelo .linea3-b{
	width:2px;
	position: absolute;
	height: 10px;
	bottom: -6px;
	right: 0;
	background: #d39d38;
}
#modelo .modelo .indicadores{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 12px;
}
#modelo .modelo .indicadores .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}

#proposito{
	padding:40px 0;
}
#proposito h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#proposito .flex-proposito{
	display: flex;
}
#proposito .flex-proposito > div{
	width: 50%;
}

#proposito .flex-principios{
	margin-top: 30px;
	display: flex;
}
#proposito .flex-principios > div p{
	color:#ffffff;
}
#proposito .flex-principios > div .numero{
	opacity: 0.5;
	color: #ffffff;
	position: absolute;
	right: 20px;
	top: 20px;
	font-weight: 700;
	font-size: 30px;
}
#proposito .flex-principios > div:first-child{
	width: 30%;
	position: relative;
	background: #19c8cd;
	padding: 30px 0;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
}
#proposito .flex-principios .flecha{width:5%;}
#proposito .flex-principios .flecha img{width:90%; max-width: 45px; display: block; margin: 30px auto 0;}
#proposito .flex-principios > div:nth-child(3){
	width: 30%;
	position: relative;
	background: #51b048;
	padding: 30px 0;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
}
#proposito .flex-principios > div:nth-child(5){
	width: 30%;
	position: relative;
	background: #f58220;
	padding: 30px 0;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
}

#compartiendo{
	padding:40px 0;
}
#compartiendo h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#compartiendo .flex-compartiendo{
	display: flex;
}
#compartiendo .flex-compartiendo > div{
	width: 50%;
}

#compartiendo .grafica-cont{
	margin-top: 30px;
	padding: 30px;
	display: flex;
	justify-content: space-around;
	background:#f4f6f8;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
}
#compartiendo .grafica-cont .grafica{
	width: 35%;
	position: relative;
	margin: 0 auto 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 300px;
	min-width: 160px;
}
#compartiendo .grafica-cont .grafica .g1{
	width: 100%;
	display: block;
	position: relative;
	margin: 0 auto;
}
#compartiendo .grafica-cont .grafica .g2{
	width: 50px;
	display: block;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}

#compartiendo .grafica-cont .tb-grafica{
	width: 55%;
	font-size: 12px;
}

#compartiendo .grafica-cont .tb-grafica .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}

#compartiendo .tb-compartiendo{
	margin-bottom: 20px;
	width: 100%;
}
#compartiendo .tb-compartiendo tr th{
	padding: 5px 10px;
	background: #17b5de;
	text-align: right;
	font-weight: 400;
	color: #ffffff;
}
#compartiendo .tb-compartiendo tr th:first-child{text-align: left;}
#compartiendo .tb-compartiendo tr td{
	padding: 5px 10px;
	background: #f4f6f8;
	text-align: right;
	font-weight: 400;
	font-size: 12px;
}
#compartiendo .tb-compartiendo tr td:first-child{text-align: left;}
#compartiendo .tb-compartiendo tr td:nth-child(2){font-weight: 700; background: #d5dce3;}
#compartiendo .tb-compartiendo tr.bg-no td{background: #ffffff;}
#compartiendo .tb-compartiendo tr.bg-no td:nth-child(2){background: #eaedf1 !important;}
#compartiendo .tb-compartiendo tr.bg-total td:nth-child(2){background: #7b7d89 !important;}
#compartiendo .tb-compartiendo tr.bg-total td{background: #95a7b9; color:#ffffff;}

#compartiendo .diagrama-valor{
	margin-top:30px;
}
#compartiendo .diagrama-valor p{text-align: center;}
#compartiendo .diagrama-valor .flecha{position: relative; width: 60%; margin: 0 auto; display: flex; align-items: center;}
#compartiendo .diagrama-valor .flecha .linea{width: 100%; height: 5px; background: #17b5de; position: relative; display: block; transform-origin: 50% 50%;}
#compartiendo .diagrama-valor .flecha .punta1{width: 10px; position: absolute; left: -5px;}
#compartiendo .diagrama-valor .flecha .punta2{width: 10px; position: absolute; right: -5px;}
#compartiendo .diagrama-valor .flex-diagrama{
	display:flex;
	width: 90%;
	margin: 20px auto;
	justify-content: space-between;
}
#compartiendo .diagrama-valor .flex-diagrama img{
	width: 16%;
}

#ods{
	padding:40px 0;
}
#ods h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#ods .flex-central{
	display:flex;
}
#ods .flex-central > div:first-child{
	width: 60%;
}
#ods .flex-central > div:nth-child(2){
	width: 40%;
}


#ods .flex-flecha{
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 40px;
}
#ods .flex-flecha .flecha{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#ods .flex-flecha .bg-gray{
	width: 70%;
	height: 100%;
	position: absolute;
	right: 0;
	background: #f4f6f8;
	-webkit-border-radius: 0px 30px 0px 0px;
	-moz-border-radius: 0px 30px 0px 0px;
	border-radius: 0px 30px 0px 0px;
}
#ods .flex-flecha .bg-gray2{
	width: 70%;
	height: 100%;
	position: absolute;
	right: 0;
	background: #f4f6f8;
	-webkit-border-radius: 0px 0px 30px 0px;
	-moz-border-radius: 0px 0px 30px 0px;
	border-radius: 0px 0px 30px 0px;
}
#ods .flex-flecha .flecha p{
	color: #ffffff;
	font-size: 17px;
	position: absolute;
}
#ods .flex-flecha .flecha img{
	width: 100%;
	display: block;
}
#ods .flex-flecha .ods{
	width: 60%;
	position: relative;
}
#ods .flex-ods2{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	
}
#ods .flex-ods2 img{
	width: 33%;
	max-width: 70px;
	margin: 10px 20px;
}


#ods .flex-ods{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#ods .flex-ods img{
	width: 22%;
	max-width: 90px;
	margin-bottom: 20px;
}

#ods .flex-ods3{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
#ods .flex-ods3 img{
	max-width: 60px;
	margin: 10px 10px;
}

#ods .flex-relacion{
	display:flex;
	justify-content: space-between;
	margin: 30px 0;
	align-items: flex-start;
}
#ods .flex-relacion > div{
	background: #f4f6f8;
	width: 30%;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
	overflow: hidden;
}
#ods .flex-relacion > div:first-child .titulo{
	background: url("../img/valor/bg-tit1.jpg") repeat-y center;
	background-size: contain;
}
#ods .flex-relacion > div:nth-child(2) .titulo{
	background: url("../img/valor/bg-tit2.jpg") repeat-y center;
	background-size: contain;
}
#ods .flex-relacion > div:nth-child(3) .titulo{
	background: url("../img/valor/bg-tit3.jpg") repeat-y center;
	background-size: contain;
}
#ods .flex-relacion > div .titulo{
	text-align: center;
	padding: 20px 0;
	font-size: 20px;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 0;
	font-weight: 700;
}
#ods .flex-relacion > div .bg-rel-ambiental{
	height: 200px;
	width:100%;
	background: url("../img/valor/bg-4.jpg") no-repeat center;
	background-size: cover;
}
#ods .flex-relacion > div .bg-rel-social{
	height: 200px;
	width:100%;
	background: url("../img/valor/bg-5.jpg") no-repeat center;
	background-size: cover;
}
#ods .flex-relacion > div .bg-rel-gob{
	height: 200px;
	width:100%;
	background: url("../img/valor/bg-6.jpg") no-repeat center;
	background-size: cover;
}
#ods .flex-relacion ul{
	margin:20px auto;
	width: 80%;
	padding-left: 0px;
	list-style: none;
}
#ods .flex-relacion ul li{
	padding: 5px;
	border-bottom: 1px solid #4F4F4F;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/******CREANDO VALOR*******/


/******GOBERNANZA*******/
#gobernanza .button-down{
	position:absolute;
	bottom: 20%;
	cursor: pointer;
	left: 40px;
	font-size: 60px;
	color: #17b5de;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}
#gobernanza{
	width:100%;
	height: 100%;
	background: url("../img/gobernanza/bg-gobernanza.jpg") no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#gobernanza .bg1{
	background: url("../img/gobernanza/bg-1.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#gobernanza .bg2{
	background: url("../img/gobernanza/bg-2.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#gobernanza .bg3{
	background: url("../img/gobernanza/bg-3.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

#gobernanza h1{
	font-size:36px;
	position: absolute;
	left: 40px;
	top: 15%;
	width: 400px;
	color: #999999;
	line-height: 1.1;
	font-weight: 300;
}
#gobernanza p{
	font-size:24px;
	position: absolute;
	left: 40px;
	top: 30%;
	width: 37%;
	max-width: 480px;
	color: #999999;
	line-height: 1.4;
	font-weight: 300;
}

#estrategia{
	padding:40px 0;
	box-sizing: border-box;
	overflow: hidden;
}
#estrategia h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#estrategia .flex-estrategia {
     display: flex;
}
#estrategia .flex-estrategia > div:first-child {
     width: 50%;
}
#estrategia .flex-estrategia > div:nth-child(2) {
     width: 50%;
}

#estrategia .diagram-wrapper {
  max-width: 400px;
  margin: auto;
}
#estrategia svg {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
#estrategia #info-box {
  margin-top: 60px;
  background: #ECECEC;
  max-width: 550px;
  margin-inline: auto;
  font-size: 1rem;
  height: 200px;
  position: relative;
	border-radius: 30px 30px 0px 30px;
-webkit-border-radius: 30px 30px 0px 30px;
-moz-border-radius: 30px 30px 0px 30px;overflow: hidden;
	display: flex;
}
#estrategia #info-box #icon-info{
	background: #17b5de;
	position: relative;
	height: 100%;
	width: 15%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#estrategia #info-box img {
  width: 40px;
  height: 40px;
	opacity: 0;
}

#estrategia #info-text{
	width:85%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
#estrategia #info-text p{padding: 0 15px; font-size: 18px; color:#4d4d4d}
#estrategia #info-text p .titulo{font-weight: 700;}

#estrategia path:hover {
  filter: brightness(1.2);
  cursor: pointer;
}
#estrategia .icon-overlay {
  pointer-events: none;
}

#etica{
	padding:40px 0;
	overflow: hidden;
}
#etica h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#etica .flex-etica{
	display:flex;
	justify-content: space-between;
}
#etica .flex-etica > div:first-child{
	width: 60%;
}
#etica .flex-etica > div:nth-child(2){
	background: url("../img/gobernanza/etica-01.png") no-repeat center;
	background-size: cover;
	width: 40%;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
}
#etica .diagrama-etica{margin: 60px 0;}
#etica .diagrama-etica .p1{text-align: center;}
#etica .diagrama-etica .tiempo{
	display:flex;
}
#etica .diagrama-etica .tiempo > div .linea-t{width:100%; height: 5px; background: #17b5de; display: flex; align-items: center; position: relative;}
#etica .diagrama-etica .tiempo > div .linea-t img{position: absolute; right: -2px;}
#etica .diagrama-etica .tiempo > div .linea-t span{
	width:10px; 
	height: 10px; 
	background: #4282de; 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#etica .diagrama-etica .tiempo > div ul{
	padding-left: 15px;
	padding-right: 15px;
}
#etica .diagrama-etica .tiempo > div:first-child{width: 15%;}
#etica .diagrama-etica .tiempo > div:nth-child(2){width: 15%;}
#etica .diagrama-etica .tiempo > div:nth-child(3){width: 20%;}
#etica .diagrama-etica .tiempo > div:nth-child(4){width: 32%;}
#etica .diagrama-etica .tiempo > div:nth-child(5){width: 15%;}
#etica .diagrama-etica .tiempo > div:nth-child(6){width: 3%;}
/******GOBERNANZA*******/

/******SOCIAL*******/
#social .button-down{
	position:absolute;
	bottom: 20%;
	cursor: pointer;
	left: 40px;
	font-size: 60px;
	color: #17b5de;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}
#social{
	width:100%;
	height: 100%;
	background: url("../img/social/bg-social.jpg") no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#social .bg1{
	background: url("../img/social/bg-1.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#social .bg2{
	background: url("../img/social/bg-2.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#social .bg3{
	background: url("../img/social/bg-3.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

#social h1{
	font-size:36px;
	position: absolute;
	left: 40px;
	top: 15%;
	width: 400px;
	color: #999999;
	line-height: 1.1;
	font-weight: 300;
}
#social p{
	font-size:22px;
	position: absolute;
	left: 40px;
	top: 30%;
	width: 27%;
	max-width: 480px;
	color: #999999;
	line-height: 1.4;
	font-weight: 300;
}

#humanos{
	padding:40px 0 20px;	
}
#humanos h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#humanos .flex-humanos{
	display:flex;
	justify-content: space-between;
}
#humanos .flex-humanos > div{
	width: 50%;
}

#humanos .tb-humanos{
	width: 100%;
	max-width: 600px;
	margin: 25px auto ;
}
#humanos .tb-humanos tr th{
	background: #17b5de;
	font-weight: 700;
	text-align: center;
	font-size: 12px;
	color: #ffffff;
	padding: 5px;
}
#humanos .tb-humanos tr td{
	font-weight: 400;
	font-size: 12px;
	padding: 5px;
	border-bottom: 1px solid #BCBCBC;
}
#humanos .tb-humanos tr:last-child td{
	border-bottom: 2px solid #17b5de; 
}
#humanos .tb-humanos tr td:last-child{
	background: #f4f6f8;
}

#seguridad{
	padding:20px 0;	
}
#seguridad h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#seguridad .social-01{
	background: url("../img/social/social-01.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
	width: 100%;
	max-width: 550px;
	margin: 0 auto 30px;
	height: 200px;
}

#seguridad .flex-seguridad{
	display:flex;
	justify-content: space-between;
}
#seguridad .flex-seguridad > div:first-child{
	width: 50%;
}
#seguridad .flex-seguridad > div:nth-child(2){
	width: 50%;
	background-color: #f4f6f8;
	margin-bottom: 30px;
}
#seguridad .diagram-wrapper {
  max-width: 300px;
  margin: 0 auto 40px;
}
#seguridad svg {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
#seguridad #info-box {
  margin-top: 60px;
  background: #ECECEC;
  max-width: 550px;
  margin-inline: auto;
  font-size: 1rem;
  height: 200px;
  position: relative;
	border-radius: 30px 30px 0px 30px;
-webkit-border-radius: 30px 30px 0px 30px;
-moz-border-radius: 30px 30px 0px 30px;overflow: hidden;
	display: flex;
}
#seguridad #info-box #icon-info{
	background: #17b5de;
	position: relative;
	height: 100%;
	width: 15%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#seguridad #info-box img {
  width: 40px;
  height: 40px;
	opacity: 0;
}

#seguridad #info-text{
	width:85%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
#seguridad #info-text p{padding: 0 15px; font-size: 18px; color:#4d4d4d; text-align: left;}
#seguridad #info-text p .titulo{font-weight: 700;}

#seguridad path:hover {
  filter: brightness(1.2);
  cursor: pointer;
}
#seguridad .icon-overlay {
  pointer-events: none;
}


#seguridad .flex-seguridad2{
	display:flex;
	justify-content: space-between;
}
#seguridad .flex-seguridad2 > div:first-child{
	width: 65%;
}
#seguridad .flex-seguridad2 > div:nth-child(2){
	width:35%;
}
#seguridad .flex-ruta{
	display:flex;
	align-items: flex-end;
	position: relative;
	padding: 30px 35px;
}
#seguridad .flex-ruta .linea{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 95%;
	margin: 0 auto;
	border-top: 2px solid #17b5de;
	border-left: 2px solid #17b5de;
	border-right: 2px solid #17b5de;
	height: 30px;
}
#seguridad .flex-ruta .linea .inicio{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	left: -6px;
}
#seguridad .flex-ruta .linea .fin{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	right: -6px;
}
#seguridad .flex-ruta > div:nth-child(2), #seguridad .flex-ruta > div:nth-child(6), #seguridad .flex-ruta > div:nth-child(10){
	width: 16%;
	
}
#seguridad .flex-ruta > div:nth-child(3), #seguridad .flex-ruta > div:nth-child(7){
	width: 5%;
}
#seguridad .flex-ruta > div:nth-child(3) .flecha, #seguridad .flex-ruta > div:nth-child(7) .flecha{
	min-height: 150px;
}
#seguridad .flex-ruta > div:nth-child(5), #seguridad .flex-ruta > div:nth-child(9){
	width: 5%;
	align-self: flex-start;
}
#seguridad .flex-ruta > div:nth-child(5) .flecha, #seguridad .flex-ruta > div:nth-child(9) .flecha{
	min-height: 150px;
}
#seguridad .flex-ruta > div:nth-child(4), #seguridad .flex-ruta > div:nth-child(8){
	width: 16%;
	flex-direction: column-reverse;
	display: flex;
}
#seguridad .flex-ruta .ruta{
	background-color:#17b5de;
	padding: 15px 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 10px;
	color:#ffffff;
	min-height: 120px;
}
#seguridad .flex-ruta .ruta .potencial{
	font-size: 10px;
	color:#ffffff;
	text-align: center;
	margin: 0;
}
#seguridad .flex-ruta .ruta .numero{
	font-size:21px;
	color: #ffffff;
	text-align: center;
	opacity:0.5;
	font-weight: 700;
	margin: 0;
}
#seguridad .flex-ruta .flecha{
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#seguridad .flex-ruta .flecha .rotate1{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
}
#seguridad .flex-ruta .flecha .rotate2{
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
}

#comunidades{
	padding:20px 0;	
}
#comunidades h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#comunidades .flex-comunidades{
	display:flex;
}
#comunidades .flex-comunidades > div{
	width: 50%;
}
#comunidades .flex-comunidades > div:nth-child(2){
	background: url("../img/social/social-02.jpg") no-repeat center top;
	background-size: cover;
	border-radius: 30px 0px 30px 30px;
-webkit-border-radius: 30px 0px 30px 30px;
-moz-border-radius: 30px 0px 30px 30px;
}

#comunidades .flex-estandar{
	display:flex;
}
#comunidades .flex-estandar > div:first-child{
	width: 50%;
}
#comunidades .flex-estandar > div:first-child .estandares{
	background: #f4f6f8;
	padding: 35px 25px;
	border-radius: 30px 30px 30px 30px;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	margin: 20px auto;
}
#comunidades .flex-estandar > div:first-child .estandares ul{
	padding-left: 15px;
	font-size: 14px;
}
#comunidades .flex-estandar > div:first-child .estandares ul li{margin-bottom: 10px;}
#comunidades .flex-estandar > div:nth-child(2){
	width: 50%;
}
#comunidades .flex-estandar > div:nth-child(2) .diagrama-madurez{
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

#comunidades2{
	padding:20px 0;	
}
#comunidades2 h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#comunidades2 .flex-comunidades2{
	display:flex;
}
#comunidades2 .flex-comunidades2 > div:first-child{
	width: 60%;
}
#comunidades2 .flex-inversion{
	display:flex;
	margin: 30px auto 0;
	flex-wrap: wrap;
}
#comunidades2 .flex-inversion > div{
	width: 50%;
	margin-bottom: 40px;
}
#comunidades2 .flex-inversion > div .od{
	display: flex;
	align-items: flex-end;
}
#comunidades2 .flex-inversion > div .od p{font-size: 18px; color:#95a7b9; font-weight: 700; margin: 0 0 0 10px;}
#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){
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#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:50%;
}
#comunidades2 .flex-inversion > div:first-child > div:first-child{
	background: url("../img/social/social-04.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
	min-height: 250px;
}
#comunidades2 .flex-inversion > div:nth-child(2) > div:first-child{
	background: url("../img/social/social-05.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
	min-height: 250px;
}
#comunidades2 .flex-inversion > div:nth-child(3) > div:nth-child(2){
	background: url("../img/social/social-06.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 30px 30px 30px 0px;
	-moz-border-radius: 30px 30px 30px 0px;
	border-radius: 30px 30px 30px 0px;
	min-height: 250px;
}
#comunidades2 .flex-inversion > div:nth-child(4) > div:nth-child(2){
	background: url("../img/social/social-07.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
	min-height: 250px;
}


#indigenas{
	padding:20px 0;	
}
#indigenas h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#indigenas .flex-indigenas{
	display: flex;
}
#indigenas .flex-indigenas > div:first-child{
	width: 40%;
}
#indigenas .flex-indigenas > div:nth-child(2){
	width: 60%;
}
#indigenas .flex-estrategia-indigena{
	display:flex;
	position: relative;
	padding: 30px 35px;
	justify-content: space-around;
}
#indigenas .flex-estrategia-indigena > div{
	width: 15%;
	padding: 30px 15px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color:#ffffff;
}
#indigenas .flex-estrategia-indigena .linea{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 95%;
	margin: 0 auto;
	border-top: 2px solid #17b5de;
	border-left: 2px solid #17b5de;
	border-right: 2px solid #17b5de;
	height: 30px;
}
#indigenas .flex-estrategia-indigena .linea .inicio{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	left: -6px;
}
#indigenas .flex-estrategia-indigena .linea .fin{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	right: -6px;
}

#gente{
	padding:20px 0;	
}
#gente h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#gente .flex-gente{
	display: flex;
}
#gente .flex-gente > div:first-child{
	width: 50%;
}
#gente .flex-gente > div:nth-child(2){
	width: 50%;
}
#gente .social-08{
	display:block;
	max-width: 4300px;
	margin: 0 auto 20px;
	width: 100%;
}

#inclusion{
	padding:20px 0 0;	
}

#inclusion .flex-inclusion{
	display: flex;
	flex-wrap: wrap;
}
#inclusion .flex-inclusion > div{
	width: 33.333%;
	min-height: 300px;
}
#inclusion .flex-inclusion > div p:first-of-type{
	margin-bottom: 0;
	font-weight: 700;
	color:#ffffff;
	font-size: 18px;
	width: 100%;
	text-align: center;
}
#inclusion .flex-inclusion > div p:nth-of-type(2){
	color:#ffffff !important;
	text-align: center;
	font-size: 13px;
}
#inclusion .flex-inclusion > div .txt{
	height: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
}
#inclusion .flex-inclusion > div:first-child{
	background: url("../img/social/social-09.jpg") no-repeat left top;
	background-size: cover;
}
#inclusion .flex-inclusion > div:nth-child(2){
	background-color: #f04f29;
}
#inclusion .flex-inclusion > div:nth-child(3){
	background: url("../img/social/social-010.jpg") no-repeat center top;
	background-size: cover;
}
#inclusion .flex-inclusion > div:nth-child(4){
	background-color: #17b5de;
}
#inclusion .flex-inclusion > div:nth-child(5){
	background: url("../img/social/social-11.jpg") no-repeat center top;
	background-size: cover;
}
#inclusion .flex-inclusion > div:nth-child(6){
	background-color: #4282de;
}
#inclusion .flex-inclusion > div:nth-child(7){
	background: url("../img/social/social-12.jpg") no-repeat center top;
	background-size: cover;
}
#inclusion .flex-inclusion > div:nth-child(8){
	background-color: #f58220;
}
#inclusion .flex-inclusion > div:nth-child(9){
	background: url("../img/social/social-13.jpg") no-repeat center top;
	background-size: cover;
}

/*********SOCIAL**********/


/******CAMBIO CLIMATICO*******/


.climatico-01{
	width:100%;
	background: url("../img/climatico/climatico-01.jpg") no-repeat center;
	height: 180px;
	margin: 0 auto 20px;
	background-size: cover;
	max-width: 300px;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
}
.climatico-03{
	width:100%;
	display: block;
	margin: 0 auto;
	max-width: 1000px;
}

#climatico .button-down{
	position:absolute;
	bottom: 20%;
	cursor: pointer;
	left: 40px;
	font-size: 60px;
	color: #17b5de;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}
#climatico{
	width:100%;
	height: 100%;
	background: url("../img/climatico/bg-climatico.jpg") no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#climatico .bg1{
	background: url("../img/climatico/bg-1.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#climatico .bg2{
	background: url("../img/climatico/bg-2.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#climatico .bg3{
	background: url("../img/climatico/bg-3.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

#climatico h1{
	font-size:36px;
	position: absolute;
	left: 40px;
	top: 15%;
	width: 400px;
	color: #999999;
	line-height: 1.1;
	font-weight: 300;
}
#climatico p{
	font-size:24px;
	position: absolute;
	left: 40px;
	top: 30%;
	width: 37%;
	max-width: 480px;
	color: #999999;
	line-height: 1.4;
	font-weight: 300;
}

#descarbonizacion{
	padding:20px 0;	
}
#descarbonizacion h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#descarbonizacion .flex-descarbonizacion{
	display: flex;
}
#descarbonizacion .flex-descarbonizacion > div:first-child{
	width: 30%;
}
#descarbonizacion .flex-descarbonizacion > div:nth-child(2){
	width: 70%;
}
#descarbonizacion .tb-descarbo{
	width:100%;
}
#descarbonizacion .tb-descarbo tr th{
	font-size: 12px;
	color: #ffffff;
	font-weight: 400;
	padding: 5px;
}
#descarbonizacion .tb-descarbo tr td{
	font-size: 12px;
	padding: 5px 10px;
	border-bottom: 1px solid #B4B4B4;
}
#descarbonizacion .tb-descarbo tr td ul{
	margin: 0;
	padding-left: 15px;
}
#descarbonizacion .tb-descarbo tr td:first-child{
	text-align: center;
}
#descarbonizacion .tb-descarbo tr td:nth-child(2){
	text-align: center;
	background: #f4f6f8;
}
#descarbonizacion .tb-descarbo tr td:nth-child(4){
	background: #f4f6f8;
}

#descarbonizacion .flex-potencial{
	display: flex;
	margin: 40px auto;
}
#descarbonizacion .flex-potencial > div:first-child{
	width:70%;
}
#descarbonizacion .flex-potencial > div:nth-child(2){
	width: 30%;
	background: url("../img/climatico/climatico-02.jpg") no-repeat top left;
	background-size: cover;
	-webkit-border-radius: 0px 0px 30px 0px;
	-moz-border-radius: 0px 0px 30px 0px;
	border-radius: 0px 0px 30px 0px;
}
#descarbonizacion .neutralidad{
	display:flex;
	height: 300px;
}
#descarbonizacion .neutralidad > div{
	position:relative;
	
}
#descarbonizacion .neutralidad .borde{
	border: 1px solid #ffffff;
}
#descarbonizacion .neutralidad p{
	font-size: 12px;
	color: #ffffff;
	padding: 10px;
	margin: 0;
	position: absolute;
	bottom: 0;
	left:0;
	font-weight: 700;
	line-height: 1.2;
}
#descarbonizacion .neutralidad p span{
	font-size: 10px;
}
#descarbonizacion .neutralidad > div:first-child{
	width: 55%;
}
#descarbonizacion .neutralidad > div:nth-child(2){
	width: 45%;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:first-child{
	display: flex;
	height: 40%;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:first-child > div:first-child{
	width: 60%;
	position: relative;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:first-child > div:nth-child(2){
	width: 40%;
	position: relative;
}

#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2){
	height:60%;
	display: flex;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:first-child{
	width:25%;
	position: relative;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:nth-child(2){
	width:25%;
	position: relative;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:nth-child(3){
	width:50%;
	position: relative;
	display: flex;
	flex-direction: column;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) > div:first-child{
	height: 50%;
	position: relative;
}
#descarbonizacion .neutralidad > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2){
	position: relative;
	height: 50%;
}

#descarbonizacion .energia-bg{
	background:#f4f6f8;
	padding: 40px 0;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
}

#descarbonizacion .flex-energia{
	display: flex;
	margin: 40px 0;
	align-items: flex-end;
}
#descarbonizacion .flex-energia > div:first-child{
	width: 55%;
}
#descarbonizacion .flex-energia > div:nth-child(2){
	width: 45%;
}
#descarbonizacion .flex-energia .grafica-cont{
	background:#f4f6f8;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	overflow: hidden;
}
#descarbonizacion .flex-energia .grafica{
	display:flex;
	max-width: 300px;
	margin: 30px auto 0;
}
#descarbonizacion .flex-energia .grafica > div{
	width: 25%;
	text-align: center;
}
#descarbonizacion .flex-energia .grafica p{
	margin-top: 5px;
}
#descarbonizacion .flex-energia .grafica > div img{
	width: 22px;
	text-align: center;
}
#descarbonizacion .flex-energia .indicadores{
	font-size:12px;
	max-width: 300px;
	margin: 0px auto 30px;
	text-align: center;
}
#descarbonizacion .flex-energia .indicadores .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}

#descarbonizacion .flex-adaptacion{
	display: flex;
	margin: 40px 0;
	align-items: flex-end;
}
#descarbonizacion .flex-adaptacion > div:first-child{
	width: 70%;
}
#descarbonizacion .flex-adaptacion > div:nth-child(2){
	width: 30%;
}
#descarbonizacion .flex-gei{
	display: flex;
	margin: 20px 0 40px;
} 
#descarbonizacion .flex-gei > div{
	width: 33.33%;
}

#descarbonizacion .flex-gei > div:nth-child(2) .graf-gei{
	display: flex;
}

#descarbonizacion .flex-gei .grafica-cont{
	background:#f4f6f8;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	overflow: hidden;
}
#descarbonizacion .flex-gei .grafica{
	display:flex;
	max-width: 300px;
	margin: 30px auto 0;
	justify-content: space-between;
}
#descarbonizacion .flex-gei .grafica > div{
	width: 33.33%;
	text-align: left;
}
#descarbonizacion .flex-gei .grafica p{
	margin-top: 5px;
}
#descarbonizacion .flex-gei .grafica > div img{
	width: 100%;
	max-width: 60px;
	text-align: center;
}
#descarbonizacion .flex-gei .indicadores{
	font-size:12px;
	max-width: 300px;
	margin: 0px auto 30px;
}
#descarbonizacion .flex-gei .indicadores .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}

#descarbonizacion .flex-gei .grafica2{
	display:flex;
	max-width: 300px;
	margin: 30px auto 0;
	justify-content: center;
}
#descarbonizacion .flex-gei .grafica2 img{
	display: block;
	margin: 0 auto 20px;
	width: 100%;
	max-width: 190px;
}

/******CAMBIO CLIMATICO*******/

/******AMBIENTAL*******/
#ambiental .button-down{
	position:absolute;
	bottom: 20%;
	cursor: pointer;
	left: 40px;
	font-size: 60px;
	color: #17b5de;
	line-height: 1;
	opacity: 0.5;
	text-align: center;
}
#ambiental{
	width:100%;
	height: 100%;
	background: url("../img/ambiental/bg-ambiental.jpg") no-repeat center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#ambiental .bg1{
	background: url("../img/ambiental/bg-1.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#ambiental .bg2{
	background: url("../img/ambiental/bg-2.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
#ambiental .bg3{
	background: url("../img/ambiental/bg-3.png") no-repeat center;
	background-size: cover;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}

#ambiental h1{
	font-size:36px;
	position: absolute;
	left: 40px;
	top: 15%;
	width: 400px;
	color: #999999;
	line-height: 1.1;
	font-weight: 300;
}
#ambiental p{
	font-size:24px;
	position: absolute;
	left: 40px;
	top: 30%;
	width: 37%;
	max-width: 480px;
	color: #999999;
	line-height: 1.4;
	font-weight: 300;
}

#agua{
	padding:20px 0;	
}
#agua h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#agua .flex-agua{
	display: flex;
}
#agua .flex-agua > div:first-child{
	width: 50%;
}
#agua .flex-agua > div:nth-child(2){
	width: 50%;
}
#agua .flex-agua .grafica-cont{
	background:#f4f6f8;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	overflow: hidden;
}
#agua .flex-agua .grafica-cont .txt{
	display: flex;
	align-items: center;
	
}
#agua .flex-agua .grafica{
	display:flex;
	max-width: 200px;
	margin: 30px auto;
}
#agua .flex-agua .grafica p{
	margin-top: 5px;
}
#agua .flex-agua .grafica  img{
	width: 100%;
	display: block;
	text-align: center;
}
#agua .flex-agua .indicadores{
	font-size:12px;
	max-width: 300px;
	margin: 0px auto 30px;
	text-align: left;
}
#agua .flex-agua .indicadores .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}
#agua .bg-balance{
	margin-top: 30px;
	background:#f4f6f8;
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	overflow: hidden;
}
#agua .flex-balance{
	display:flex;
	margin-bottom: 40px;
}
#agua .flex-balance > div:first-child{
	position:relative;
	width: 15%;
	display: flex;
	align-items: center;
}
#agua .flex-balance > div:first-child .entradas{
	background: url("../img/ambiental/bg-balance.jpg") repeat-y center;
	background-size: contain;
	padding: 0px 10px;
	position: relative;
	margin: 0 auto;
}
#agua .flex-balance > div:first-child .entradas p{
	color: #ffffff;
	text-align: center;
	font-weight: 700;
}
#agua .flex-balance > div:first-child .linea{
	position:absolute;
	height: 100%;
	width: 25%;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-left: 2px solid #0c8ac3;
	border-top: 2px solid #0c8ac3;
	border-bottom: 2px solid #0c8ac3;
}
#agua .flex-balance > div:first-child .linea .punta1{
	position:absolute;
	width:2px;
	background: #0c8ac3;
	height: 10px;
	top: -6px;
	right: 0;
}
#agua .flex-balance > div:first-child .linea .punta2{
	position:absolute;
	width:2px;
	background: #0c8ac3;
	height: 10px;
	bottom: -6px;
	right: 0;
}
#agua .flex-balance > div:nth-child(2){
	position:relative;
	width: 20%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
#agua .flex-balance > div:nth-child(2) img{
	max-width:200px;
}
#agua .flex-balance > div:nth-child(3){
	width:30%;
	position: relative;
}
#agua .flex-balance > div:nth-child(3) .titulo{
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	background: #17b5de;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	text-align: center;
	margin: 0 auto;
}
#agua .flex-balance > div:nth-child(3) .titulo p{
	margin-left: 5px;
	font-weight: 400;
}
#agua .flex-balance > div:nth-child(3) .circulo{
	width: 100%;
	max-width: 280px;
	margin: 20px auto 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#agua .flex-balance > div:nth-child(3) .circulo img{
	display: block;
	position: relative;
	width: 100%;
}
#agua .flex-balance > div:nth-child(3) .circulo p{
	position: absolute;
	text-align: center;
	font-size: 16px;
	color: #17b5de;
}
#agua .flex-balance > div:nth-child(3) .circulo p span{
	font-weight: 700;
	font-size: 24px;
}

#agua .flex-balance > div:nth-child(4){
	width:30%;
}

#agua .flex-desvio{
	display:flex;
}
#agua .flex-desvio > div:first-child{
	position:relative;
	width: 30%;
	display: flex;
	align-items: center;
}
#agua .flex-desvio > div:first-child .entradas{
	background: url("../img/ambiental/bg-balance.jpg") repeat-y center;
	background-size: contain;
	padding: 0px 10px;
	position: relative;
	margin: 40px auto 0;
}
#agua .flex-desvio > div:first-child .entradas p{
	color: #ffffff;
	text-align: center;
	font-weight: 700;
}
#agua .flex-desvio > div:first-child .linea{
	position:absolute;
	height: 100%;
	width: 30%;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-left: 2px solid #0c8ac3;
	border-top: 2px solid #0c8ac3;
	border-bottom: 2px solid #0c8ac3;
}
#agua .flex-desvio > div:first-child .linea .punta1{
	position:absolute;
	width:2px;
	background: #0c8ac3;
	height: 10px;
	top: -6px;
	right: 0;
}
#agua .flex-desvio > div:first-child .linea .punta2{
	position:absolute;
	width:2px;
	background: #0c8ac3;
	height: 10px;
	bottom: -6px;
	right: 0;
}
#agua .flex-desvio > div:nth-child(2){
	width: 70%;
}
#agua .flex-desvio > div:nth-child(2) img{
	display: block;
	width: 100%;
	max-width:235px;
}
#agua .flex-desvio > div:nth-child(2) img:first-of-type{
	margin-bottom: 30px;
}
#agua .flex-consumo{
	display:flex;
	justify-content: flex-end;
	margin-top: 20px;
}
#agua .flex-consumo img{
	max-width:235px;
	display: block;
}

#minero{
	padding:20px 0;	
}
#minero h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#minero .flex-minero{
	display: flex;
	margin-bottom: 40px;
}
#minero .flex-minero .nota{
	margin-top:-80px;
}
#minero .flex-minero > div:first-child{
	width: 30%;
}
#minero .flex-minero > div:nth-child(2){
	width: 70%;
}
#minero .flex-desempeno{
	display: flex;
}
#minero .flex-desempeno > div:first-child{
	width: 40%;
	order: 2;
}
#minero .flex-desempeno > div:nth-child(2){
	width: 60%;
	order: 1;
}
#minero .flex-desempeno > div:nth-child(2) img{
	width: 100%;
	display: block;
	max-width: 600px;
	margin: 0 auto;
}

#minero .sistema{
	display:flex;
	justify-content: space-between;
}
#minero .sistema > div{
	width: 16.6666%;
}
#minero .sistema .cuadro{
	background: #4282de;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	padding: 20px;
	color: #ffffff;
	margin: 0 auto;
	display: table;
}
#minero .sistema .linea{
	height: 50px;
	border-bottom: 5px solid #17b5de;
	position: relative;
}
#minero .sistema .linea .linea-media{
	height: 100%;
	width: 5px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: #17b5de;
}
#minero .sistema .linea .flecha{
	position: absolute;
	right: -4px;
	bottom: -12px;
}
#minero .sistema .linea .punto{
	width: 10px;
	height: 10px;
	background: #4282de;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -6px;
	border-radius: 50%;
}
#minero .sistema p{
	font-size:12px;
	line-height: 1.1;
	padding: 0 4px;
}
#minero .sistema ul{
	padding-left: 15px;
}
#minero .sistema ul li{
	font-size:11px;
}


#cierre{
	padding:20px 0;	
}
#cierre h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}
#cierre .flex-cierre{
	display: flex;
}
#cierre .flex-cierre > div:first-child{
	order: 2;
	width: 60%;
}
#cierre .flex-cierre > div:first-child .high{ 
	width: 60%;
	margin: 40px 0;
}
#cierre .flex-cierre > div:nth-child(2){
	width: 40%;
	background: url("../img/ambiental/cierre-01.jpg") no-repeat center;
	background-size: cover;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
	order: 1;
}
/******AMBIENTAL*******/


/******DIALGO *******/
#dialog-content .circle, #dialog-content2 .circle, #dialog-content4 .circle, #dialog-content5 .circle, #dialog-content6 .circle{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}
#dialog-content, #dialog-content2, #dialog-content3, #dialog-content4, #dialog-content5, #dialog-content6{
	display: none;
	max-width:1200px; 
	width: 80%;
	-webkit-border-radius: 30px 0px 30px 30px;
	-moz-border-radius: 30px 0px 30px 30px;
	border-radius: 30px 0px 30px 30px;
	height: 90%;
	overflow-y: auto;
}

#dialog-content .is-close-btn, #dialog-content2 .is-close-btn, #dialog-content3 .is-close-btn, #dialog-content4 .is-close-btn, #dialog-content5 .is-close-btn, #dialog-content6 .is-close-btn{
	position: fixed;
	top: 5%;
	right: 10%;
}
#dialog-content h2, #dialog-content2 h2, #dialog-content3 h2, #dialog-content4 h2, #dialog-content5 h2, #dialog-content6 h2{
	font-weight: 300;
	font-size: 36px;
	color:#999999;
}

#dialog-content .bg-gray, #dialog-content2 .bg-gray, #dialog-content3 .bg-gray, #dialog-content4 .bg-gray, #dialog-content5 .bg-gray, #dialog-content6 .bg-gray{
	padding: 10px 0;
	background: #f4f6f8;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
}
#dialog-content .high, #dialog-content3 .high, #dialog-content4 .high, #dialog-content5 .high, #dialog-content6 .high{
	max-width:500px;
}

#dialog-content .etica-01{
	max-width:280px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}

#dialog-content .flex-6040, #dialog-content2 .flex-6040, #dialog-content2 .flex-50{
	display:flex;
}

#dialog-content2 .flex-50 > div{width:50%;}

#dialog-content .flex-6040 > div:first-child, #dialog-content2 .flex-6040 > div:first-child{width:60%;}
#dialog-content .flex-6040 > div:nth-child(2), #dialog-content2 .flex-6040 > div:nth-child(2){width:40%;}

#dialog-content2 .diagrama-etica{margin: 20px 0 40px;}
#dialog-content2 .diagrama-etica .p1{text-align: center;}
#dialog-content2 .diagrama-etica .tiempo{
	display:flex;
}
#dialog-content2 .diagrama-etica .tiempo > div .linea-t{width:100%; height: 5px; background: #17b5de; display: flex; align-items: center; position: relative;}
#dialog-content2 .diagrama-etica .tiempo > div .linea-t img{position: absolute; right: -2px;}
#dialog-content2 .diagrama-etica .tiempo > div .linea-t span{
	width:10px; 
	height: 10px; 
	background: #4282de; 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#dialog-content2 .diagrama-etica .tiempo > div ul{
	padding-left: 15px;
	padding-right: 15px;
}
#dialog-content2 .diagrama-etica .tiempo > div:first-child{width: 15%;}
#dialog-content2 .diagrama-etica .tiempo > div:nth-child(2){width: 15%;}
#dialog-content2 .diagrama-etica .tiempo > div:nth-child(3){width: 20%;}
#dialog-content2 .diagrama-etica .tiempo > div:nth-child(4){width: 32%;}
#dialog-content2 .diagrama-etica .tiempo > div:nth-child(5){width: 15%;}
#dialog-content2 .diagrama-etica .tiempo > div:nth-child(6){width: 3%;}


#dialog-content2 .flex-lineamientos{display: flex; flex-wrap: wrap; justify-content: space-between;}
#dialog-content2 .flex-lineamientos > div{
	text-align: center; 
	background: #b9e9f5;
	font-size: 12px;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
#dialog-content2 .flex-lineamientos > div:first-child, #dialog-content2 .flex-lineamientos > div:nth-child(5), #dialog-content2 .flex-lineamientos > div:nth-child(9), #dialog-content2 .flex-lineamientos > div:nth-child(13){
	width: 30%;
}
#dialog-content2 .flex-lineamientos > div:nth-child(2), 
#dialog-content2 .flex-lineamientos > div:nth-child(3), 
#dialog-content2 .flex-lineamientos > div:nth-child(4),
#dialog-content2 .flex-lineamientos > div:nth-child(6),
#dialog-content2 .flex-lineamientos > div:nth-child(7),
#dialog-content2 .flex-lineamientos > div:nth-child(8),
#dialog-content2 .flex-lineamientos > div:nth-child(10),
#dialog-content2 .flex-lineamientos > div:nth-child(11),
#dialog-content2 .flex-lineamientos > div:nth-child(12),
#dialog-content2 .flex-lineamientos > div:nth-child(14){
	width: 20%;
}
#dialog-content2 .flex-lineamientos > div:nth-child(13){
	background: #ffffff;
}
#dialog-content2 .flex-lineamientos > div:nth-child(15){
	width:43.3%;
}
#dialog-content2 .bg-blue, #dialog-content6 .bg-blue{
	padding: 10px 0;
	background: #4282de;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
	margin-bottom: 20px;
}
#dialog-content2 .flex-denuncias{
	display: flex;
}
#dialog-content2 .flex-denuncias > div{
	width: 50%;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr th{
	background: #17b5de;
	padding: 10px 5px;
	color: #ffffff;
	text-align: right;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr th:first-child{
	text-align: left;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr th:nth-child(2){
	background: #4282de;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr td{
	border-bottom: 1px solid #969696;
	padding: 7px;
	text-align: right;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr td:first-child{
	text-align: left;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr:last-child td{
	background: #95a7b9;
	color: #ffffff;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr:last-child td:nth-child(2){
	background: #7b7d89;
}
#dialog-content2 .flex-denuncias .tb-denuncias tr td:nth-child(2){
	background: #f4f6f8;
}

#dialog-content2 .flex-denuncias > div:nth-child(2){
	background: #f4f6f8;
	-webkit-border-radius: 0px 30px 30px 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
}

#dialog-content3 .flex-politicas{
	display:flex;
	position: relative;
	padding: 30px 25px;
	justify-content: space-around;
}
#dialog-content3 .flex-politicas > div{
	width: 14%;
	padding: 30px 10px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color:#ffffff;
}
#dialog-content3 .flex-politicas .linea{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 97%;
	margin: 0 auto;
	border-top: 2px solid #17b5de;
	border-left: 2px solid #17b5de;
	border-right: 2px solid #17b5de;
	height: 30px;
}
#dialog-content3 .flex-politicas .linea .inicio{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	left: -6px;
}
#dialog-content3 .flex-politicas .linea .fin{
	position: absolute;
	width: 10px;
	bottom: -2px;
	height: 2px;
	background: #17b5de;
	right: -6px;
}

#dialog-content4 .flex4060{
	display: flex;
}
#dialog-content4 .flex4060 > div:first-child{
	width: 40%;
}
#dialog-content4 .flex4060 > div:nth-child(2){
	width: 60%;
}
#dialog-content4 .soc-01{
	width:100%;
	max-width: 350px;
	margin: 20px auto;
	display: block;
}
#dialog-content4 .soc-02{
	width:100%;
	max-width: 250px;
	margin: 20px auto;
	display: block;
}
#dialog-content4 .tb-gral tr th{
	padding:3px 5px;
	color: #ffffff;
	text-align: right;
	font-weight: 400;
	font-size: 12px;
}
#dialog-content4 .tb-gral tr th:first-child{
	text-align: left;
}
#dialog-content4 .tb-gral tr td{
	padding: 3px 5px;
	border-bottom: 1px solid #979797;
	text-align: right;
	font-size: 12px;
}
#dialog-content4 .tb-gral tr td.bg-gray-1{
	background:#f4f6f8;
}
#dialog-content4 .tb-gral tr td.bg-gray-2{
	background:#7b7d89 !important;
}
#dialog-content4 .tb-gral tr td:first-child{
	text-align: left;
}
#dialog-content4 .tb-gral tr.total td{
	background:#95a7b9;
	font-weight: 700;
	color: #ffffff;
}

#dialog-content4 .flex-ratio{
	display:flex;
}
#dialog-content4 .flex-ratio > div{
	width: 50%;
}
#dialog-content4 .soc-03{
	width:100%;
	max-width: 180px;
	margin: 20px auto;
	display: block;
}
#dialog-content4 .flex-contrataciones{
	display:flex;
}
#dialog-content4 .flex-contrataciones > div:first-child{
	width: 60%;
}
#dialog-content4 .flex-contrataciones > div:nth-child(2){
	width: 40%;
}
#dialog-content4 .soc-04{
	width:100%;
	max-width: 180px;
	margin: 40px auto 30px;
	display: block;
}

#dialog-content5 .amb-01{
	width:100%;
	max-width: 400px;
	margin: 40px auto 30px;
	display: block;
}
#dialog-content5 .tb-gral tr th{
	padding:3px 5px;
	color: #ffffff;
	text-align: center;
	font-weight: 400;
	font-size: 12px;
}
#dialog-content5 .tb-gral tr th:first-child{
	text-align: left;
}
#dialog-content5 .tb-gral tr td{
	padding: 3px 5px;
	border-bottom: 1px solid #979797;
	text-align: left;
	font-size: 12px;
}
#dialog-content5 .tb-gral tr td.bg-gray-1{
	background:#f4f6f8;
}
#dialog-content6 .amb-02{
	max-width:200px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
#dialog-content6 .amb-03{
	max-width:310px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
#dialog-content6 .amb-04{
	max-width:280px; 
	display: block;
	margin: 30px 0 15px 30px;
	width: 100%;
	float: right;
}
#dialog-content6 .flex-wri{
	display:flex;
}
#dialog-content6 .flex-wri > div:first-child{
	width: 40%;
}
#dialog-content6 .flex-wri > div:nth-child(2){
	width: 60%;
}
#dialog-content6 .tb-gral tr th{
	padding:3px 5px;
	color: #ffffff;
	text-align: right;
	font-weight: 400;
	font-size: 12px;
}
#dialog-content6 .tb-gral tr th:first-child{
	text-align: left;
}
#dialog-content6 .tb-gral tr td{
	padding: 3px 5px;
	border-bottom: 1px solid #979797;
	text-align: right;
	font-size: 12px;
}
#dialog-content6 .tb-gral tr td.bg-gray-1{
	background:#f4f6f8;
}
#dialog-content6 .tb-gral tr td.bg-gray-2{
	background:#7b7d89 !important;
}
#dialog-content6 .tb-gral tr td:first-child{
	text-align: left;
}
#dialog-content6 .tb-gral tr.total td{
	background:#95a7b9;
	font-weight: 700;
	color: #ffffff;
}
#dialog-content6 .flex-incidentes{
	display:flex;
}
#dialog-content6 .flex-incidentes > div:first-child{
	width: 65%;
}
#dialog-content6 .flex-incidentes > div:nth-child(2){
	width: 40%;
}
#dialog-content6 .flex-mi{
	display:flex;
	align-items: center;
}
#dialog-content6 .flex-mi img:first-child{
	display: block;
	width:33%;
}
#dialog-content6 .flex-mi img:nth-child(2){
	display: block;
	width:33%;
}
#dialog-content6 .flex-mi img:nth-child(3){
	display: block;
	width:33%;
}
#dialog-content6 .flex-eficiencia{
	display:flex;
	justify-content: space-between;
}
#dialog-content6 .flex-eficiencia > div{
	width: 32%;
}
#dialog-content6 .amb-05{
	max-width:350px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
#dialog-content6 .amb-06{
	max-width:170px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
#dialog-content6 .amb-07{
	max-width:250px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
#dialog-content6 .flex-unidad{
	display:flex;
}
#dialog-content6 .flex-unidad > div{
	width: 25%;
}
#dialog-content6 .flex-hidrico{
	display:flex;
}
#dialog-content6 .flex-hidrico > div:first-child{
	width: 65%;
}
#dialog-content6 .flex-hidrico > div:nth-child(2){
	width: 35%;
}
#dialog-content6 .amb-08{
	max-width:350px; 
	display: block;
	margin: 20px auto;
	width: 100%;
}
/*********FOOTER**********/
footer{
	padding:30px 0;
	background: #EDEDED;
}

footer .logo{
	display:block;
	width: 40px;
}

footer p{
	font-weight: 400 !important;
	font-size: 12px;
	color: #636363;
}
footer p a{
	color:#4f5cd6;
	-webkit-transition: color 0.5s ease-in-out;
  	-moz-transition: color 0.5s ease-in-out;
  	-o-transition: color 0.5s ease-in-out;
  	transition: color 0.5s ease-in-out;
}
footer p a:hover{
	color:#17b5de;
}

footer .flex-footer{
	display:flex;
}
footer .flex-footer > div:first-child{
	width: 40%;
}
/*********FOOTER**********/

.fouc {
	visibility: hidden;
}
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff;
	z-index:9999999998;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:50%;
	right:0;
	text-align: center;
	background-image:url(../img/loading.gif);
	background-repeat:no-repeat;
	background-position:center;
	margin:0 auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}