@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Hind+Guntur:300,400,500,600,700');
@charset "UTF-8";

@font-face {
    font-family: 'Variable';
    src: url('Variable-BoldItalic.eot');
    src: url('Variable-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('Variable-BoldItalic.woff2') format('woff2'),
        url('Variable-BoldItalic.woff') format('woff'),
        url('Variable-BoldItalic.ttf') format('truetype'),
        url('Variable-BoldItalic.svg#Variable-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Variable';
    src: url('Variable-Black.eot');
    src: url('Variable-Black.eot?#iefix') format('embedded-opentype'),
        url('Variable-Black.woff2') format('woff2'),
        url('Variable-Black.woff') format('woff'),
        url('Variable-Black.ttf') format('truetype'),
        url('Variable-Black.svg#Variable-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Variable';
    src: url('Variable-Bold.eot');
    src: url('Variable-Bold.eot?#iefix') format('embedded-opentype'),
        url('Variable-Bold.woff2') format('woff2'),
        url('Variable-Bold.woff') format('woff'),
        url('Variable-Bold.ttf') format('truetype'),
        url('Variable-Bold.svg#Variable-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cabrito Sans Norm';
    src: url('CabritoSans-NorMed.eot');
    src: url('CabritoSans-NorMed.eot?#iefix') format('embedded-opentype'),
        url('CabritoSans-NorMed.woff2') format('woff2'),
        url('CabritoSans-NorMed.woff') format('woff'),
        url('CabritoSans-NorMed.ttf') format('truetype'),
        url('CabritoSans-NorMed.svg#CabritoSans-NorMed') format('svg');
    font-weight: 500;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6{font-family: Variable; color: #635850;}
h5{line-height: 1.4;}
h6{font-size: 14px;}
p{color: #635850; font-family: Hind Guntur; font-size: 14px;}

nav.top-right {top: -140px; right: -166px;}

#portada-prn{background: url(../shapes/reciclado-05.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.title-port{font-family: Cabrito Sans Norm; color: #6d6e71;}
.logo-port{width: 100%; max-width: 250px; margin-bottom: 20px;}

/*INDEX 2*/
#portada-prn-2{background: url(../shapes/back-2.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.ico-welcome {position: absolute; bottom: 2vh;}
.gota-svg{height: 100%; max-height: 200px;}
.rayo-svg{height: 100%; max-height: 200px;}
.antena-svg{height: 100%; max-height: 200px;}
.sol-svg{height: 100%; max-height: 200px;}
.aero-svg{height: 100%; max-height: 200px;}
.ampolleta-svg{height: 100%; max-height: 200px;}
.lienzo{background: url(../shapes/reciclado-05.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 18vh 4vw 10vh 4vw;}
/*FIN INDEX 2*/

/*BREADCRUMS*/
.bread-div{ margin-top: 20px; color: #888a8d; font-size: 13px; font-family: Hind Guntur; padding-bottom: 10px;}
.bread-top{}
.bread-bottom{font-style: italic; font-weight: 600;}
/*FIN BREADCRUMS*/

/*TITULO SUBTEMA*/
.titulo-sub{display: flex;}
.nro-item-a, .nro-item-o, .nro-item-c, .nro-item-v, .nro-item-n{width: 100%; max-width: 90px;}
.tit-item{width: 100%;}
.nro-item-a h1{font-weight: 900; color: #00afd7;}
.nro-item-o h1{font-weight: 900; color: #f78d31;}
.nro-item-c h1{font-weight: 900; color: #1c75bc;}
.nro-item-v h1{font-weight: 900; color: #008c44;}
.nro-item-n h1{font-weight: 900; color: #f16122;}
.tit-item h1{font-weight: 900;}
.bajada-sub p{width: 40%; font-family: Variable; font-size: 18px;}
.bajada-sub{margin-top: 50px;}
/*FIN TITULO SUBTEMA*/

/*CSS GENERAL*/
.white-text{color: #ffffff;}
.blue-text{color: #1c75bc;}
.cian-text{color:#00b7de;}
.green-text{color:#78be20;}
.orange-text{color: #f78d31;}
.ocre-text{color: #cecc2c;}
.wood-text{color: #008c44;}
.gold-text{color: #ffc920;}
.old-blue-text{color: #204D6B;}
.old-cian-text{color: #209E9A;}
.old-green-text{color: #709930;}
.old-orange-text{color: #CE6B21;}
.white-back{background-color: #ffffff;}
.blue-back{background-color: #1c75bc;}
.orange-back{background-color: #f16122;}
.carrot-back{background-color: #f78d31;}
.grey-back-2{background-color: #f3f3f3;}
.silver-back{background-color: #ebebec;}
.cian-back{background-color:#00b7de;}
.flexer{display: flex;}
.space-01{padding-top: 30px;}
.space-02{padding-top: 50px;}
.space-03{padding-top: 80px;}
.mini-space-01{padding-top: 20px;}
.mini-space-0{padding-top: 10px;}
.inv-space-01{padding-bottom: 30px;}
.inv-space-02{padding-bottom: 50px;}
.inv-space-03{padding-bottom: 80px;}
.book-pad{padding-left: 8%; padding-right: 8%;}
.book-pad-2{padding-left: 8%; padding-right: 8%; padding-top: 80px; padding-bottom: 80px;}
.book-pad-2-izq{padding-left: 8%;}
.book-pad-2-der{padding-right: 8%;}
.book-pad-3-izq{padding-left: 8%; padding-top: 80px; padding-bottom: 80px;}
.book-pad-3-der{padding-right: 8%;}
.mini-book-pad-01{padding-left: 4%; padding-right: 4%;}
.pad-esp-01{padding-top: 80px; padding-bottom: 80px;}
.book-pad-4-der{padding-right: 8%; padding-top: 80px; padding-bottom: 80px;}
.book-pad-5{padding-bottom: 80px;}
.blacky{font-weight: 900;}
.black-text{font-weight: 500; color: #333333;}
.black-text-03{font-weight: 600; color: #333333;}
.black-text-04{font-weight: 600;}
.black-text-2{color: #333333;}
.mini-pad{padding-top: 50px; padding-bottom: 50px;}
.no-pad-2{padding-left: 0; padding-right: 0;}
.mini-pad-left{padding-left: 30px;}
.mini-pad-left2{padding-left: 50px;}
.mini-pad-right2{padding-right: 50px;}
.ghost-item{visibility: hidden;}
.shortener-01{width: 80%;}
.mayus{text-transform: uppercase;}
.gri{color: #e6e6e6; font-weight: 300;}
.gri-dark{font-weight: 300;}
.italer{font-style: italic; font-size: 14px;}
.italer-01{font-style: italic;}
.italer-02{font-style: italic; font-size: 12px;}
.italer-03{font-style: italic; font-size: 12px; color: #cccccc;}
.upper-01{font-size: 16px; line-height: 22px;}
.upper-02{font-size: 18px; font-family: Variable;}
.lower-01{font-size: 13px;}
.green-glass{background-color: rgba(80, 184, 72, 0.6); padding: 20px;}
.white-glass{background-color: rgba(255, 255, 255, 0.5);}

.navig {position: fixed; bottom: 20px;}

.go-next-b{background-color: rgba(28, 117, 188, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-next-b:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #245095;}
.go-next-b svg{color: #ffffff;}

.go-prev-b{background-color: rgba(28, 117, 188, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-prev-b:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #245095;}
.go-prev-b svg{color: #ffffff;}

.go-next-g{background-color: rgba(0, 161, 75, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-next-g:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #008c44;}
.go-next-g svg{color: #ffffff;}

.go-prev-g{background-color: rgba(0, 161, 75, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-prev-g:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #008c44;}
.go-prev-g svg{color: #ffffff;}

.go-next-o{background-color: rgba(246, 139, 49, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-next-o:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f16122;}
.go-next-o svg{color: #ffffff;}

.go-prev-o{background-color: rgba(246, 139, 49, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-prev-o:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f16122;}
.go-prev-o svg{color: #ffffff;}

.go-next-c{background-color: rgba(0, 183, 222, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-next-c:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #1c75bc;}
.go-next-c svg{color: #ffffff;}

.go-prev-c{background-color: rgba(0, 183, 222, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-prev-c:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #1c75bc;}
.go-prev-c svg{color: #ffffff;}

.go-next-v{background-color: rgba(80, 184, 72, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-next-v:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #78be20;}
.go-next-v svg{color: #ffffff;}

.go-prev-v{background-color: rgba(80, 184, 72, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s;}
.go-prev-v:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #78be20;}
.go-prev-v svg{color: #ffffff;}

.btn-ghost{background-color: rgba(124, 124, 124, 0.6); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px;}
.btn-ghost svg{color: #ffffff;}

.btn-ghost-next{background-color: rgba(124, 124, 124, 0.6); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px;}
.btn-ghost-next svg{color: #ffffff;}

.next-b{background-color: rgba(28, 117, 188, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-b:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #245095;}
.next-b svg{color: #ffffff;}

.next-g{background-color: rgba(0, 161, 75, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-g:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #008c44;}
.next-g svg{color: #ffffff;}

.prev-g{background-color: rgba(0, 161, 75, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.prev-g:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #008c44;}
.prev-g svg{color: #ffffff;}

.next-v{background-color: rgba(0, 140, 68, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-v:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #78be20;}
.next-v svg{color: #ffffff;}

.prev-v{background-color: rgba(0, 140, 68, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.prev-v:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #78be20;}
.prev-v svg{color: #ffffff;}

.next-o{background-color: rgba(241, 97, 34, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-o:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f78d31;}
.next-o svg{color: #ffffff;}

.prev-o{background-color: rgba(241, 97, 34, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.prev-o:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f78d31;}
.prev-o svg{color: #ffffff;}

.next-c{background-color: rgba(0, 183, 222, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-c:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #1c75bc;}
.next-c svg{color: #ffffff;}

.prev-c{background-color: rgba(0, 183, 222, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.prev-c:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #1c75bc;}
.prev-c svg{color: #ffffff;}

.next-n{background-color: rgba(241, 97, 34, 0.9); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50px; margin-top: 30px; font-size: 18px; transition: .3s; -webkit-transition: .3s; font-family: Variable; font-weight: 900; color: #ffffff;}
.next-n:hover{text-decoration: none; color: #ffffff; cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #d84a0e;}
.next-n svg{color: #ffffff;}

.fuente-01{color: #666666; margin-top: 10px;}
.fadeinleft{opacity: 0;}
.descrip-1757 sup{font-size: 50%; top: -.7em;}
/*FIN CSS GENERAL*/

/*INDICE*/
.menu-pad {margin-top: 12vh;}
.cap-azul{background-color: #245095; padding: 30px;}
.cap-azul img, .cap-verde img, .cap-naranjo img, .cap-celeste img, .cap-green img, .cap-orange img{width: 100%; max-width: 120px; margin-bottom: 30px;}
.cap-yellow img, .cap-amarillo img{width: 100%; max-width: 50px; visibility: hidden;}
.cap-azul h5, .cap-verde h5, .cap-naranjo h5, .cap-celeste h5, .cap-green h5, .cap-orange h5, .cap-yellow h5, .cap-amarillo h5{font-weight: 900; color: #ffffff; width: 80%;}

.cap-verde{background-color: #008c44; padding: 30px;}
.cap-naranjo{background-color: #f16122; padding: 30px;}
.cap-celeste{background-color: #00b7de; padding: 30px;}
.cap-green{background-color: #50b848; padding: 30px;}
.cap-orange{background-color: #f78d31; padding: 30px;}
.cap-yellow{background-color: #ffc72c; padding: 30px;}
.cap-amarillo{background-color: #ffa300; padding: 30px;}

.cap-azul a, .cap-verde a, .cap-naranjo a, .cap-celeste a, .cap-green a, .cap-orange a, .cap-yellow a, .cap-amarillo a{position: absolute; top: 30px; right: 30px; font-size: 30px; transition: .3s; -webkit-transition: .3s;}
.cap-azul a > svg, .cap-verde a > svg, .cap-naranjo a > svg, .cap-celeste svg, .cap-green svg, .cap-orange svg, .cap-yellow svg, .cap-amarillo svg{color: #ffffff; transition: .3s; -webkit-transition: .3s;}

.cap-azul a:hover, .cap-verde a:hover, .cap-naranjo a:hover, .cap-celeste a:hover, .cap-green a:hover, .cap-orange a:hover, .cap-yellow a:hover, .cap-amarillo a:hover{cursor: pointer; -ms-transform: translateX(3px); -webkit-transform: translateX(3px); transform: translateX(3px);}
.cap-azul a > svg:hover{color: #00b7de;}
.cap-verde a > svg:hover{color: #50b848;}
.cap-naranjo a > svg:hover{color: #f78d31;}
.cap-celeste a > svg:hover{color: #245095;}
.cap-green a > svg:hover{color: #008c44;}
.cap-orange a > svg:hover{color: #f16122;}
.cap-yellow a > svg:hover{color: #ffa300;}
.cap-amarillo a > svg:hover{color: #ffc72c;}
/*FIN INDICE*/

/*PORTADA PRINCIPAL*/
.izq-box, .der-box{height: 100vh;}
.der-box{padding-top: 35vh; padding-right: 15%; box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.8);}
.izq-box{padding-top: 10vh;}
.gota-colbun{width: 100%; max-width: 350px;}

.rain-bow{
    padding: 4px;
    position: fixed;
    top: 0;
    z-index: 9;
    background: #0072ce;
    background: -moz-linear-gradient(left, #0072ce 0%, #00afd7 12%, #00b140 25%, #78be20 38%, #c4d600 50%, #ffcd00 63%, #ffa300 75%, #ff6a13 87%, #ee2737 100%);
    background: -webkit-linear-gradient(left, #0072ce 0%,#00afd7 12%,#00b140 25%,#78be20 38%,#c4d600 50%,#ffcd00 63%,#ffa300 75%,#ff6a13 87%,#ee2737 100%);
    background: linear-gradient(to right, #0072ce 0%,#00afd7 12%,#00b140 25%,#78be20 38%,#c4d600 50%,#ffcd00 63%,#ffa300 75%,#ff6a13 87%,#ee2737 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072ce', endColorstr='#ee2737',GradientType=1 );
}

.entrar-cian{background-color: #00afd7; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px; transition: .3s; -webkit-transition: .3s;}
.entrar-cian:hover{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #245095;}
.entrar-cian svg{color: #ffffff;}
.ebitda{width: 100%; max-width: 200px;}
.neta{width: 100%; max-width: 200px;}
.margen-ebitda{width: 100%; max-width: 350px;}
.trabajadores-1733 img{width: 100%; max-width: 136px;}
.descrip-1733{padding-left: 15px;}
.ico-1757 img{width: 70px;}
.descrip-1757{padding-left: 15px;}
.aguas-01{width: 100%; max-width: 250px; position: absolute; top: 26vh;}
.aguas-03{width: 100%; max-width: 250px; position: absolute; top: 30vh; right: 0;}

.juan-eduardo-correa{width: 100%; max-width: 600px;}
.comillas-presidente-gris{width: 100%; max-width: 250px; position: absolute; top: 0; right: 35vw;}
.comillas-presidente-verdes{width: 100%; max-width: 40px; position: absolute; bottom: -5px; right: 15vw;}

#reconocimiento-back{background: url(../shapes/reconocimientos-back-2.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.colbun-corp{width: 100%; max-width: 300px;}

/*PORTADA 01*/
#portada-01{background: url(../shapes/cap01/01-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.izq-box-01{padding-left: 10vw; padding-top: 18vh;}
.tit-01, .tit-02, .tit-03, .tit-04, .tit-05, .tit-06{width: 100%; max-width: 260px; margin-bottom: 20px;}
.tit-cap-port{color: #ffffff; font-size: 35px; font-weight: 900; font-family: Variable; line-height: 38px;}
.subtit-cap-port{margin-top: 30px; color: #ffffff; width: 60%; font-family: Hind Guntur;}

.entrar-cian-01{background-color: #00afd7; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px;}
.entrar-cian-01:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); background-color: #1d75bd;}
.entrar-cian-01 svg{color: #ffffff;}

.down-green{background-color: #ff6a13; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 47px; border-radius: 50px; margin-top: 30px; transition: .3s; -webkit-transition: .3s; position: fixed; right: 35px; bottom: 20px;}
.down-green:hover{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #ffc72c;}
.down-green svg{color: #ffffff;}

.home-green{background-color: #78be20; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 47px; border-radius: 50px; margin-top: 30px; transition: .3s; -webkit-transition: .3s; position: fixed; right: 35px; bottom: 80px;}
.home-green:hover{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #c4d600;}
.home-green svg{color: #ffffff;}

.back-azul{background-color: #1c75bc; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 47px; border-radius: 50px; margin-top: 30px; transition: .3s; -webkit-transition: .3s; position: fixed; right: 35px; bottom: 140px;}
.back-azul:hover{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #004a8b;}
.back-azul svg{color: #ffffff;}

.aqua-circle, .circle-02, .circle-03, .circle-04, .circle-05, .circle-06{width: 700px; margin-left: 1vw; margin-top: 14vh ;}
.waves-01{width: 100%; max-width: 200px; position: absolute; top: 14vh; left: 0vw; z-index: -1;}
.conexiones{width: 100%; max-width: 300px; position: absolute; margin-top: 75vh; margin-left: -60px; z-index: -1;}
.flecha-03{width: 100%; max-width: 250px; position: absolute; margin-top: 75vh; margin-left: -60px;}
.waves-02{width: 100%; max-width: 200px; position: fixed; right: 40vw; top: -2vh;}
.conector-01{width: 100%; max-width: 200px; position: fixed; left: 35vw; top: -2vh;}
.peces-01{width: 100%; max-width: 340px;}
.tuerca-01{width: 100%; max-width: 250px; position: fixed; right: -4vw; top: 45vh;}

/*INNER CAP 01*/
#analisis-materialidad{height: 100vh; background: url(../shapes/cap01/01-back02.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.izq-box-01-a{padding-left: 0;}
.der-box-01-a{padding-right: 8%; padding-top: 18vh;}
.image-001{opacity: 0.6; max-height: 1005px;}
.tit-inner-cap{font-family: Variable; font-weight: 900; color: #58595b; margin-bottom: 20px;}
.cap-text{ color: #58595b; font-family: Hind Guntur;}
.box-text-1{width: 60%;}
.antetitulo-01{font-weight: 900; color: #ff6a13;}
.cap-subtext{font-weight: 900; color: #58595b;}
.table-01{font-size: 14px;}
.table-01 p{font-family: Hind Guntur; font-weight: 400; color: #58595b;} 
.table-01 .table-a-01, .table-01 .table-a-02, .table-01 .table-a-03{border: 8px solid #ff6a13; padding: 15px;}
.table-01 .table-a-01{width: 25%; vertical-align: top; text-align: left;}
.table-01 .table-a-02{width: 40%; vertical-align: top; text-align: left;}
.table-01 .table-a-03{width: 35%; vertical-align: top; text-align: left; background-color: #ff6a13; color: #ffffff !important;}
.table-a-01 h5{font-weight: 900; color: #ff6a13;}
.table-a-02 h5{font-weight: 900; color: #ff6a13;}
.table-a-03 h5{font-weight: 900; margin-top: 20px; margin-bottom: 15px;}
.table-a-03 p{color: #ffffff;}
.mini-bullet{font-size: 8px;}

.titinner-01-a{font-family: Variable; font-weight: 900; color: #00afd7; margin-bottom: 3vh;}
.generacion-energia{width: 100%; max-width: 300px;}
.graf-tit{font-weight: 900; color: #58595b; margin-top: 10px;}
.datos-001{margin: 20px 0px;}
.datos-001 p{line-height: 100%; margin: 10px 0;}

.sky-back{margin-top: 80px; padding-top: 80px; padding-bottom: 80px; background-color: #00afd7;}
.white-back-esp{background-color: #ffffff;}
.grey-back{background-color: #f3f3f3; padding-bottom: 80px;}
.cita-text{font-style: italic; font-weight: 300; border-top: 1px solid #ffffff; margin-top: 10px; padding-top: 10px; font-size: 13px;}
.cita-text-dark{font-style: italic; font-weight: 300; border-top: 1px solid #635850; margin-top: 10px; padding-top: 10px; font-size: 13px;}
.conector-02{width: 150px;}
.rayo-01{width: 150px;} 
.cifra-aumento{padding-left: 15%; padding-top: 30px;}
.cifra-aumento h1{color: #ffffff; font-weight: 900;}
.cifra-aumento p{color: #1d75bd; font-family: Variable; font-weight: 900; font-size: 20px;}

#complejo-termo{background: url(../shapes/cap01/complejo-termoelectrico.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.compromisos-ruta h1{font-weight: 900; color: #f78d31;}
.compromisos-ruta p, .economia-aumento p{font-family: Variable; font-weight: 900; width: 72%;}
.compromisos-ruta-2 p{font-family: Variable; font-size: 18px;}
.ruta-energetica {position: absolute; width: 260px; left: -50px; top: 45px;}
.economia-aumento h1{font-weight: 900; color: #1d75bd;}

.completo-circle{width: 100%; max-width: 220px; position: relative; top: 50vh; float: right;}
.industria-peru{width: 100%;}
.conector-03{width: 100%; max-width: 150px;}
.demanda-peru{padding-left: 30px; margin-top: 30px;}
.demanda-peru h1{color: #f78d31; font-weight: 900;}
.demanda-peru p{font-family: Variable; font-weight: 900; font-size: 20px; width: 80%;}

.ministerio-energia{width: 100%; max-width: 150px; padding-right: 15px;}
.media-body p{font-size: 13px;}
.media-body p > svg{font-size: 4px; vertical-align: middle;}

#cambios-regulatorios{background: url(../shapes/cap01/cambios-regulatorios.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#cambios-regulatorios-2{background: url(../shapes/cap01/cambios-regulatorios-2.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.elaboracion-reglamentos {width: 100%; max-width: 330px; position: absolute; top: -230px; left: -40px; z-index: -1;}

.avances-img{width: 100%; max-width: 350px;}

#reglamento-servicios{background: url(../shapes/cap01/reglamento-servicios-02.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.anual-normativo{width: 100%;}
.codigo-aguas{width: 100%;}
.img-leyes{width: 100%; max-width: 180px;}
#intervencion-estado{background: url(../shapes/cap01/intervencion-estado.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

#embalse-guardia-vieja{background: url(../shapes/embalse-guardia-vieja.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#regul-trans-energetica{background: url(../shapes/regulaciones-transicion-energetica.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.circ-embalse-guardia{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.helice-carta{width: 100%; max-width: 180px;}
.gota-carta{width: 100%; max-width: 150px; position: absolute; right: 0; top: 4vh;}
.mundo-carta{width: 100%; max-width: 250px;}

.reciclado-02{background: url(../shapes/reciclado-05.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.shorty-01 {width: 45%;}
.tipo-clientes-contratos{width: 80%; background-color: #eaeaea; border: 2px solid #eaeaea;}
.tipo-clientes-contratos > tbody > tr > th, .tipo-clientes-contratos > tbody > tr > td{padding: 15px; font-size: 14px; border: 1px solid #bfbfbf;}
.tipo-clientes-contratos > tbody > tr > th {font-family: Variable; font-weight: 900;}
.tipo-clientes-contratos .pais{width: 10%;}
.tipo-clientes-contratos .kw{width: 25%;}
.tipo-clientes-contratos .descrip{width: 45%;}
.tipo-clientes-contratos .kw-libres{width: 20%;}


.liner-01{border-top: 1px solid #bfbfbf; padding-top: 10px; margin-bottom: -10px;}
.total-01{background-color: #78be20; padding-top: 15px; color: #ffffff;}
.total-02{background-color: #c4d600; padding-top: 15px; color: #ffffff;}

.reciclado-03{background: url(../shapes/reciclado-05.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#viviana-gandino{background: url(../shapes/cap01/colbun-vivana-gandino.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.circ-viviana{width: 100%; max-width: 200px; margin-top: 50vh;}
.eficiencia-energetica{width: 100%; max-width: 150px; position: absolute; top: 15vh; right: 0px;}
.seia-vec{width: 100%; max-width: 150px; position: absolute; right: 0px; bottom: 20vh;}
.antena-electrica{width: 100%; max-width: 200px; position: absolute; bottom: 0; left: 0;}
.ley-flexibilidad-vec{width: 100%; max-width: 200px; position: absolute; top: 0; right: 0;}
.perfect-transmision{width: 100%; max-width: 200px;}
.descarbonizacion{width: 100%; max-width: 350px;}
.wave-gris{width: 100%; max-width: 200px; position: absolute; right: 0; top: 5vh;}
#codigo-aguas{background: url(../shapes/cap01/codigo-aguas.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.peru-crecimiento{width: 100%; max-width: 200px; position: absolute; top: 0; right: 30vw;}
.participacion-mercado{width: 100%; max-width: 130px;}
#precio-gas{background: url(../shapes/cap01/precio-gas.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#embalse-colbun{background: url(../shapes/cap01/embalse-colbun.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.despacho-energia{width: 100%;}
#embalse-colbun-dos{background: url(../shapes/cap01/embalse-colbun-2.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#anual-normativo{background: url(../shapes/cap01/anual-normativo.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.comp-mercado-elec{width: 100%; max-width: 125px;}
.energia-generada{width: 100%; max-width: 130px;}
.tb-comercio-01{width: 100%; max-width: 600px;}
.tb-comercio-02{width: 100%; max-width: 300px;}
.graph-energia-peru{width: 100%; max-width: 350px;}
.graph-generacion-energia{width: 100%; max-width: 350px;}
.conector-demanda-sist{width: 100%; max-width: 150px;}
#economia-del-peru{background: url(../shapes/cap01/economia-del-peru.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.crecio-economia-peru{width: 100%; max-width: 200px; position: absolute; left: 0; top: 4vh;}
.crecio-demanda-peru{width: 100%; max-width: 150px; position: absolute; right: 7vw; top: 0;}

.circ-complejo-termo-valpo{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
.circ-embalse-colbun-maule{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
/*FIN PORTADA 01*/

/*PORTADA 02*/
.green-back{background-color: #008c44;}
.greeny-back{background-color: #50b848;}
.nro-item-g{width: 100%; max-width: 90px;}
.nro-item-g h1 {font-weight: 900; color: #50b848;}
#portada-02{background: url(../shapes/cap02/02-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.entrar-green-02{background-color: #50b848; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px; transition: .3s; -webkit-transition: .3s;}
.entrar-green-02:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(0, 91, 47, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #00a14b;}
.entrar-green-02 svg{color: #ffffff;}

.map-nro{width: 50px; padding-right: 10px;}
.map-nro p{background-color: #709930; color: #ffffff; width: 25px; height: 25px; text-align: center; line-height: 30px; border-radius: 50px; font-weight: 700;}

.map-nro-nar{width: 50px; padding-right: 10px;}
.map-nro-nar p{background-color: #CE6B21; color: #ffffff; width: 25px; height: 25px; text-align: center; line-height: 30px; border-radius: 50px; font-weight: 700;}

.map-descrip{margin-bottom: 15px;}
.map-descrip p{margin-bottom: 5px; line-height: 100%;}

.map-nro-wood{width: 50px; padding-right: 10px;}
.map-nro-wood p{background-color: #008c44; color: #ffffff; width: 25px; height: 25px; text-align: center; line-height: 30px; border-radius: 50px; font-weight: 700;}

.map-nro-cian{width: 50px; padding-right: 10px;}
.map-nro-cian p{background-color: #209E9A; color: #ffffff; width: 25px; height: 25px; text-align: center; line-height: 30px; border-radius: 50px; font-weight: 700;}

.corp-nro-gris{width: 50px; padding-right: 10px;}
.corp-nro-gris p{background-color: #939598; color: #ffffff; width: 25px; height: 25px; text-align: center; line-height: 28px; border-radius: 50px;}
.corp-descrip{margin-bottom: 15px;}
.corp-descrip p{margin-bottom: 0px; line-height: 100%;}

.mapa-centrales{width: 100%; max-width: 350px;}
.centrales-dieciocho{width: 100%; max-width: 300px;}
.termoelectricas{width: 100%; max-width: 180px;}
.mayores-accionistas{width: 100%;}

.maria-ignacia{width: 100%; max-width: 400px;}
.juan-eduardo{width: 100%; max-width: 300px;}
.miembros-directorio{font-size: 13px;}
.member-img{width: 100%; max-width: 200px;}
.remu-direct{width: 100%; max-width: 900px;}
.directorio-circ{width: 100%; max-width: 100px;}
.linea-circu {position: relative; top: -65px; z-index: -1; border-top: 2px solid rgba(0,0,0,.2);}
.thomas-keller{width: 100%; max-width: 550px;}
.gtes-diversidad{width: 100%; max-width: 120px;}
.gtes-antiguedad{width: 100%; max-width: 450px;}
.grte-fenix{width: 100%;}
.grte-fenix .foto{width: 150px;}
.gtes-nacionalidad .title{padding-right: 30px;}
.gtes-nacionalidad .pais-nac{padding-left: 10px; padding-right: 10px;}
.tb-diversidad tbody > tr > td{padding-left: 10px; padding-right: 10px; text-align: center;}
.antiguedad-comp{width: 100%; max-width: 330px;}
.cir-comite{width: 100%; max-width: 150px;}
.sello-colbun{width: 100%;}
.organ-colbun{width: 100%; max-width: 400px;}
#negocio-colbun{background: url(../shapes/reciclado-05.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.img-modelo{width: 100%; max-width: 120px;}
.es-space-01{margin-top: 100%;}
.clientes-agre{width: 65px;}
.valor-agregado-1{padding-right: 10px;}
.img-ods{width: 100%; max-width: 100px; margin-bottom: 15px;}
.liniers-01{border-bottom: 1px solid #008c44;}
.liniers-02{border-left: 1px solid #008c44;}
.liniers-03{border-top: 1px solid #635850; padding-top: 20px;}
.liniers-04{border-bottom: 1px solid #635850; margin-bottom: 20px;}
.side-pad-book{padding-left: 15px; padding-right: 15px;}
.side-pad-book-izq{padding-left: 20px;}

.riesgo-ico{padding-right: 15px;}
.riesgo-descrip p{width: 80%;}
.riesgo-ico img{width: 150px;}
.contribucion-ods{width: 100%; max-width: 120px;}
.eval-del-riesgo{width: 100%; max-width: 360px;}
.directrices-riesgos{width: 100%; max-width: 200px;}
.ges-ries p{margin-bottom: 0px; padding-top: 10px; padding-bottom: 5px;}
.tb-comun-grupo{width: 100%;}
#reciclado-04{background: url(../shapes/reciclado-05.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.img-meses{width: 100%; max-width: 250px; margin-bottom: 30px;}
.bullet-space{width: 15px;}
.bullet-text{width: 100%;}
#materialidad-icons{background-image: url("../shapes/cap01/materialidad-icons.png"); background-size: cover; background-repeat: no-repeat; height: 100vh;}
.regulacion-industria{width: 100%; max-width: 750px;}

.tb-cap-2{width: 100%;}
.anio-actual{border-top: 1px solid #50B848; margin-top: 30px;}
.his-libro{width: 100%; max-width: 250px; position: absolute; left: 0;}
.his-flecha{width: 100%; max-width: 250px; position: absolute; right: 0; top: 50vh;}
.his-mundo{width: 100%; max-width: 250px; position: absolute; left: 0; top: 80vh;}
.his-sol{width: 100%; max-width: 250px; position: absolute; right: 0; top: 120vh;}
.his-conector{width: 100%; max-width: 250px; position: absolute; left: 0; top: 160vh;}
.his-gota{width: 100%; max-width: 250px; position: absolute; right: 0; top: 200vh;}
.cta-publica2018{font-size: 13px; border: 2px solid #ffffff; background-color: #EBEBEC}
.cta-publica2018 > tbody > tr > td{padding: 2px 5px; border: 1px solid #635850;}

.insta-rayo img{width: 100%; max-width: 100px;}
.mapa-centrales-chile{width: 100%;}
.fuentes-renovables img{width: 100%; max-width: 150px;}
#propiedades-societarias{background: url(../shapes/cap02/propiedad-societaria.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.estruc-soc-01{width: 100%;}
.estruc-soc-03{width: 100%; max-width: 520px; text-align: center;}
#nuestro-gob-corp{background: url(../shapes/cap02/nuestro-gobierno-corporativo.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.estruc-corp img{width: 100%; max-width: 440px;}
#jardin-central{background: url(../shapes/cap02/jardin-central-los-pinos.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#complejo-nehuenco{background: url(../shapes/cap02/complejo-nehuenco.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.directores-por img{width: 100%; max-width: 400px;}
#directorio-equipo{background: url(../shapes/cap02/corporativo-001537.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#directorio-equipo2{background: url(../shapes/cap02/corporativo-001624.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#directorio-equipo3{background: url(../shapes/cap02/corporativo-001635.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.visita-012 {padding: 20px 40px;}
.img-remun-002{width: 100%;}
.manos-01 img{width: 100%; max-width: 250px;}
.nota-comite{width: 100%; max-width: 250px;}
.complekp-nehuenco-qui {width: 100%; max-width: 200px; position: absolute; right: 0; top: 50vh;}
.jardin-central{width: 100%; max-width: 200px; position: absolute; right: 0; top: 50vh;}
.francisco-camus{width: 100%; max-width: 200px; position: absolute; left: 0; top: 50vh;}
.tuercas-proposito{width: 100%; max-width: 250px; position: absolute; top: 0; right: 30vw;}
#crea-modelo-nego{background: url(../shapes/cap02/crea-modelo-negocio.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.estragia-creci{width: 100%; max-width: 200px;}
.estrategia-tensiom{width: 100%; max-width: 300px;}
#gestion-riesgos{background: url(../shapes/cap02/gestion-riesgos.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.profile-circle {width: 100%; max-width: 310px; position: absolute; top: 0; right: 20vw;}
.fabrica-humo {width: 100%; max-width: 200px; position: absolute; bottom: 0; left: 7vw;}
#central-santa-maria{background: url(../shapes/cap02/central-santa-maria.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#gestion-sos{background: url(../shapes/cap02/gestion-sos.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.fabrica-eco{width: 100%; max-width: 150px;}
.mundo-sos{width: 100%; max-width: 184px; position: absolute; top: 37vh; left: 0px;}
.plan-integridad{width: 100%; max-width: 300px;}
.conver-per{width: 100%; max-width: 184px; position: absolute; top: 20vh; left: 0px;}
#gobernanza-ddhh{background: url(../shapes/cap02/gobernanza-ddhh.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.mundo-red{width: 100%; max-width: 150px;}
.dialogo-box{width: 100%; max-width: 150px;}
#reciclaje-maule{background: url(../shapes/cap02/reciclaje-maule.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.mujer-reciclaje{width: 100%; max-width: 120px;}
.lapiz-reciclaje{width: 100%; max-width: 120px;}
.cursos-flechas{width: 100%; max-width: 150px;}
#innova-trans-digital{background: url(../shapes/cap02/innova-trans-digital.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#avances-2018{background: url(../shapes/cap02/avances-2018.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#transformacion-digital-colbun{background: url(../shapes/cap02/transformacion-digital-colbun.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.desafios-circ{width: 100%; max-width: 140px;}
.manito-device{width: 100%; max-width: 150px; position: absolute; top: 0; right: 2vw; opacity: 0.8;}
.gotita-agua{width: 100%; max-width: 150px;}
.ampolleta-encendida.gotita-agua{width: 100%; max-width: 180px;}
.brote-de-quila{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
.circ-central-santa-maria{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
.fecha-circ{width: 100%;}
.insta-rayo{width: 100%; max-width: 100px;}
.modelo-negocio-colbun{width: 100%;}
.thumb-centrales{width: 100%;}
.thumb-nehuenco{background: url('../shapes/cap02/thumb-central-nehuenco.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 56vh;}
.thumb-colbun{background: url('../shapes/cap02/thumb-central-colbun.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-candelaria{background: url('../shapes/cap02/thumb-central-candelaria.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-canutillar{background: url('../shapes/cap02/thumb-central-canutillar.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-santa-maria{background: url('../shapes/cap02/thumb-central-santan-maria.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-angostura{background: url('../shapes/cap02/thumb-central-angostura.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-la-mina{background: url('../shapes/cap02/thumb-central-la-mina.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-solar{background: url('../shapes/cap02/thumb-planta-solar.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.thumb-rucue{background: url('../shapes/cap02/thumb-central-rucue.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.central-tit-thumb{position: absolute; top: 2vh; left: 1vh;}
.central-tit-thumb p{line-height: 15px; font-style: italic;}
.avances-2018-02{width: 100%; max-width: 300px;}
.manos-01 {width: 100%; max-width: 200px;}
#directorio-member-01{background: url('../shapes/cap02/miembros-directorio-01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 56vh;}
#directorio-member-02{background: url('../shapes/cap02/miembros-directorio-02.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
#directorio-member-03{background: url('../shapes/cap02/miembros-directorio-03.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
#directorio-member-04{background: url('../shapes/cap02/miembros-directorio-04.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
#directorio-member-05{background: url('../shapes/cap02/miembros-directorio-05.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
#directorio-member-06{background: url('../shapes/cap02/miembros-directorio-06.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 28vh;}
.circ-proyecto-reciclaje{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
.circ-cerntro-monitoreo{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; left: 0;}
.circ-central-clemente-maule{width: 100%; max-width: 180px; position: absolute; bottom: 25vh; right: 0;}
/*FIN PORTADA 02*/

/*PORTADA 03*/
#portada-03{background: url(../shapes/cap03/03-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.entrar-orange-03{background-color: #f78d31; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 22px; transition: .3s; -webkit-transition: .3s;}
.entrar-orange-03:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(193, 61, 30, 0.4); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f47722;}
.entrar-orange-03 svg{color: #ffffff;}

.chispas-03 {width: 100%; max-width: 200px; position: fixed; left: 35vw; top: 24vh;}
.flecha-032 {width: 100%; max-width: 250px; position: fixed; right: 7vw; top: 4vh;}
.proyector {width: 100%; max-width: 220px; margin-left: 10vw;}

.graph-queso{width: 100%; max-width: 250px;}
.tb-integrales{width: 100%; max-width: 750px;}
.tb-evol{width: 100%; max-width: 350px;}
#metricas-financieras{background: url(../shapes/cap03/metricas-financieras.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.billet-icon{width: 100%; max-width: 150px;}
.tb-financieras{width: 100%; max-width: 350px;}
.razon-deuda{width: 100%; max-width: 120px;}
.eco-directo{width: 100%; max-width: 450px;}
#central-hornitos{background: url(../shapes/cap03/central-hornitos.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.circ-info-inver{width: 100%; max-width: 120px;}
.tb-gestion-client{width: 100%;}
.mod-indice{width: 25px;}
.mod-descrip{width: 100%;}
.profile-politica{width: 100%; max-width: 200px; position: absolute; left: 0; top: 50px;}
.line-accionistas {margin-bottom: -60px; margin-top: 60px;}
.ev-nro-clientes{width: 100%; max-width: 500px;}
.ev-nro-clientes-tipo{width: 100%; max-width: 260px;}
.clic-estrella{position: absolute; right: 0; width: 100%; max-width: 200px; top: 35px;}
.people-arrow{position: absolute; left: 0; width: 100%; max-width: 250px; top: 8vh;}
.tortas-generacion img{width: 100%; max-width: 180px;}
.tortas-generacion-2 img{height: 100%;}
#central-angostura{background: url(../shapes/cap03/central-angostura.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.rayo-generacion{position: absolute; top: 0; width: 100%; right: 85px; max-width: 250px;}
.mundo-ventas{width: 100%; max-width: 250px; position: absolute; left: 0; top: 8vh;}
.tb-gener-ventas{width: 100%; max-width: 475px;}
.tb-grapch-gener{width: 100%; max-width: 650px;}
.tb-grapch-versus{width: 100%; max-width: 480px;}
.conector-gener{width: 100%; max-width: 150px; position: absolute; right: 0; top: 25vh;}
.generacion-peru{width: 100%; width: 180px; position: absolute; left: 0; top: 5vh;}
.generacion-ventas-peru{width: 100%; max-width: 800px;}
.img-dispon{width: 100%; max-width: 330px;}
.dispon-centrales{width: 100%; max-width: 180px; position: absolute; right: 1vw; bottom: 10vh;}
.dispon-nuclear{width: 100%; max-width: 150px; margin-bottom: 20px;}
.dispon-por-central{width: 100%; max-width: 500px;}
#centrales-de-chile{background: url(../shapes/cap03/centrales-de-chile.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 20vh;}
.tb-negocio-transmision{width: 100%; max-width: 500px;}
.tb-desarrollo-proyectos{width: 100%; max-width: 600px;}
.tb-proceso-licitacion{width: 100%; max-width: 600px;}
.tb-clientes-tranmision{width: 100%; max-width: 250px;}
.parque-fotovoltaico{background: url('../shapes/cap03/parque-fotovoltaico.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 45vh;}
.eco-square{width: 100%; max-width: 250px; position: absolute; left: 0; top: 54vh;}
.molino-desarrollo{width: 100%; width: 180px; position: absolute; bottom: 0; left: 33vw;}
#central-fenix{background: url(../shapes/cap03/central-fenix.jpg) no-repeat left bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.etica-piramide{width: 100%; max-width: 700px;}
.personas-cultura{width: 100%; max-width: 250px;}
.denuncia-circs{width: 100%; max-width: 200px;}
#central-la-mina{background: url(../shapes/cap03/central-la-mina.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.vigilantes{width: 100%; max-width: 150px;}
.gorra-vigilantes{width: 100%; max-width: 200px;}
#conflictos-interes{background: url(../shapes/cap03/conflictos-interes.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.corrupcion{width: 100%; max-width: 150px;}
#planta-depuradora{background: url(../shapes/cap03/planta-depuradora.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.proyector-svg{width: 100%; max-width: 180px; position: absolute; bottom: -8vh; right: 8vw;}
..proyector-svg {width: 100%; max-width: 180px; position: absolute; bottom: 0vh; right: 17vw;}
.tb-colors-03{width: 100%; max-width: 770px;}
#evaluacion-inversionistas{background: url(../shapes/cap03/evaluacion-inversionistas.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.graph-finan-conso{width: 100%; max-width: 200px; position: absolute; left: 0; top: 4vh;}
.circ-parque-fotovoltaico{width: 100%; max-width: 150px; position: absolute; right: 0; bottom: 10vh;}
.circ-central-angostura{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-vista-cordillera{width: 100%; max-width: 180px; position: absolute; left: 0; bottom: 25vh;}
.hitos201801{background: url('../shapes/cap03/hitos-2018-01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201802{background: url('../shapes/cap03/hitos-2018-02.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201803{background: url('../shapes/cap03/hitos-2018-03.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201804{background: url('../shapes/cap03/hitos-2018-04.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201805{background: url('../shapes/cap03/hitos-2018-05.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201806{background: url('../shapes/cap03/hitos-2018-06.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201807{background: url('../shapes/cap03/hitos-2018-07.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.hitos201808{background: url('../shapes/cap03/hitos-2018-08.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 22vh;}
.circ-central-chilca{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-san-clemente{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-depuradora-nehuenco{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.turbina-graph{width: 100%; max-width: 520px;}
#energia-frutos-01{background: url('../shapes/cap02/frutos-energia-01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 40vh;}
#energia-frutos-02{background: url('../shapes/cap02/frutos-energia-02.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 40vh;}
#energia-frutos-03{background: url('../shapes/cap02/frutos-energia-03.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 40vh;}
#energia-frutos-04{background: url('../shapes/cap02/frutos-energia-04.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 40vh;}
#energia-frutos-05{background: url('../shapes/cap02/frutos-energia-05.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 40vh;}
/*FIN PORTADA 03*/

/*PORTADA 04*/
#portada-04{background: url(../shapes/cap04/04-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.entrar-blue-04{background-color: #245095; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px; transition: .3s; -webkit-transition: .3s;}
.entrar-blue-04:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(36, 80, 149, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #1c75bc;}
.entrar-blue-04 svg{color: #ffffff;}

.bicicleta-04 {width: 100%; max-width: 270px; position: fixed; left: 35vw; top: 28vh;}
.nube-04{width: 100%; max-width: 250px; position: fixed; right: -2vw; top: 30vh;}
.casa-hoja {width: 100%; max-width: 300px; position: absolute; bottom: 0; left: 18vw;}

.sello-colbun{width: 100%; max-width: 580px;}
.manos-04{width: 100%; max-width: 200px; position: absolute; right: 0;}
.constructor-04{width: 100%; max-width: 130px; position: absolute; right: 0; top: 30vh;}
.alerta-04{width: 100%; max-width: 170px; position: absolute; right: 0; bottom: 10vh;}
.dotacion-chile-fenix{width: 100%; max-width: 650px;}
.trabajadores-rango{width: 100%; max-width: 300px;}
#dotacion-cifras{background: url(../shapes/cap04/dotacion-crifras.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.tb-dotacion-global{width: 100%; max-width: 650px;}
#diversidad-trabajadores{background: url(../shapes/cap04/diverdidad-trabajadores.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.salario-mujeres{width: 100%; max-width: 300px;}
.tb-salario-muejeres{width: 100%; max-width: 470px;}
.salario-h-m{width: 100%; max-width: 180px;}
.horas-capacitacion{width: 100%; max-width: 120px;}
.gastos-remuneraciones{width: 100%; max-width: 570px;}
#gastos-remuneraciones{background: url(../shapes/cap04/gasto-remuneraciones.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.cupos-laborales{width: 100%; max-width: 650px;}
#cupos-laborales-capacitados{background: url(../shapes/cap04/cupos-laborales-capacitados.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.desempenio-chile-peru{width: 100%; max-width: 500px;}
#evaluacion-desempenio{background: url(../shapes/cap04/evaluacion-desempenio.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#relaciones-laborales-ddhh{background: url(../shapes/cap04/relaciones-laborales-ddhh.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.dotaciones-agrupaciones{width: 100%; max-width: 150px;}
.definicion-trabajadores{width: 100%; max-width: 500px;}
#voluntariado-corporativo{background: url(../shapes/cap04/voluntariado-corporativo.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.voluntariado{width: 100%; max-width: 300px; position: absolute; left: 0;}
.equidad-genero{width: 100%; max-width: 300px;}
.equidad-genero-01{width: 100%; max-width: 250px; position: absolute; bottom: 10vh; left: 0;}
.la-mejor-energia{width: 100%; max-width: 400px;}
.clima-laboral{width: 100%; max-width: 700px;}
.canal-comunicacion{width: 100%; max-width: 120px;}
.mano-like{width: 100%; max-width: 230px; position: absolute; right: 0; top: 8vh;}
#central-los-quilos{background: url(../shapes/cap04/central-los-quilos.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#contratistas-proveedores{background: url(../shapes/cap04/contratista-proveedores.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.modelo-gestion{width: 100%; max-width: 400px;}
#numero-distribucion{background: url(../shapes/cap04/numero-distribucion.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.empresas-proveedoras{width: 100%; max-width: 150px; position: absolute; right: 0; top: 4vh;}
.dot-contra-colbun{width: 100%; max-width: 380px;}
.distri-geo-chile{width: 100%; max-width: 800px;}
.distri-geo-peru{width: 100%; max-width: 650px;}
.monto-compras{width: 100%; max-width: 200px;}
#itercambio-buenas-practicas{background: url(../shapes/cap04/itercambio-practicas.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.repro-achile{width: 100%; max-width: 180px;}
#encueta-percepcion{background: url(../shapes/cap04/encuesta-percepcion.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#evalua-socio-ambiente{background: url(../shapes/cap04/evaluacion-socio-ambientales.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.impactos-negativos{width: 100%; max-width: 600px;}
#seguridad-salud{background: url(../shapes/cap04/seguridad-salud.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.casco-seguridad{width: 100%; max-width: 180px;}
.segur-ocupacional{width: 100%; max-width: 300px;}
.fatalidad-colbun{width: 100%; max-width: 180px;}
.obj-seguridad-peru{width: 100%; max-width: 580px;}
.indice-frec-chile-peru{width: 100%; max-width: 400px;}
.accidentabilidad{width: 100%; max-width: 600px;}
#cultura-seguridad{background: url(../shapes/cap04/cultura-seguridad.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.curso-conduccion{width: 100%; max-width: 200px;}
.tasa-ausentismo{width: 100%; max-width: 400px;}
.pilares-salud{width: 100%; max-width: 100px;}
.hitos-seguridad{width: 100%; max-width: 150px;}
.manzana{width: 100%; max-width: 180px;}
.temas-segur-com{width: 100%; max-width: 300px;}
#central-seguridad{background: url(../shapes/cap04/central-seguridad.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.obrero-gestion{width: 100%; max-width: 180px;}
#relacionamiento-comun{background: url(../shapes/cap04/relacionamiento-publico.jpg) no-repeat left top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.modelo-relac-comuni{width: 100%; max-width: 750px;}
.generando-confianza{width: 100%; max-width: 300px;}
.canal-comu-cdad{width: 100%; max-width: 120px;}
#programa-ctas-publicas{background: url(../shapes/cap04/programa-cuentas-publicas.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.dialogo-cta-publica{width: 100%; max-width: 200px; position: absolute; bottom: 5vh; right: 0;}
#participacion-ciudadana{background: url(../shapes/cap04/participacion-ciudadana.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.ciudadania{width: 100%; max-width: 200px; position: absolute; bottom: 0; right: 8vw;}
.generacion-oport{width: 100%; max-width: 315px;}
#prog-desarrollo-comun{background: url(../shapes/cap04/program-desarrollo-comunitarios.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#inver-comun-chile{background: url(../shapes/cap04/inversion-comunitaria-chie.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.generando-futuro{width: 100%; max-width: 200px;}
.tb-inv-com-chile{width: 100%; max-width: 500px;}
#inv-progr-sociales{background: url(../shapes/cap04/inv-programas-sociales.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.centro-historico{width: 100%; max-width: 180px;}
#fondos-concursables{background: url(../shapes/cap04/fondos-concursables.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.juntas-vecino{width: 100%; max-width:150px;}
.proyecto-antuco{width: 100%; max-width: 300px;}
#balneario-machicura{background: url(../shapes/cap04/balneario-machicura.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.lago-chapo{width: 100%; max-width: 240px; position: absolute; bottom: 0; left: 18vw;}
#entorno-central-canutillar{background: url(../shapes/cap04/entorno-central-canutillar.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.tb-sociales-peru{width: 100%; max-width: 500px;}
.circ-entorno-canutillar{width: 100%; max-width: 150px; position: absolute; left: 0; bottom: 25vh;}
.tb-proyecto-centrales{width: 100%; max-width: 750px;}
#bahia-coronel{background: url(../shapes/cap04/bahia-coronel.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.ddhh-coronel{width: 100%; max-width: 200px; margin-top: 5vh;}
.pad-fill{padding-top: 30vh; padding-bottom: 30vh;}
.circ-bahia-coronel{width: 100%; max-width: 150px; position: absolute; right: 0; bottom: 25vh;}
.tb-compras-comunas{width: 100%; max-width: 450px;}
.tb-resumen-cta-publica{width: 100%; max-width: 450px;}
.tb-impactos-neg-pos{width: 100%; max-width: 700px;}
.mejor-calidad-vida{width: 100%; max-width: 200px; float: right;}
#entorno-cochamo{background: url(../shapes/cap04/entorno-cochamo.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.circ-instalaciones-central{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-central-los-quilos{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-entorno-central{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.dot-cif-av{width: 100%; max-width: 35px;}
#equidad-gro-nehuenco{background: url('../shapes/cap04/equidad-genero-nehuenco.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 38vh;}
#canales-comn-nehuenco{background: url('../shapes/cap04/canales-comunicaciones-nehuenco.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 38vh;}
#pilares-trabajador-01{background: url('../shapes/cap04/pilares-trabajador-01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 38vh;}
#pilares-trabajador-02{background: url('../shapes/cap04/pilares-trabajador-02.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 38vh;}
/*FIN PORTADA 04*/

/*PORTADA 05*/
#portada-05{background: url(../shapes/cap05/05-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.entrar-green-05{background-color: #008c44; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px; transition: .3s; -webkit-transition: .3s;}
.entrar-green-05:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(0, 91, 47, 0.2); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #50b848;}
.entrar-green-05 svg{color: #ffffff;}

.viento{width: 100%; max-width: 250px; position: absolute; bottom: -20px; left: 18vw;}
.gota-05 {width: 100%; max-width: 220px; position: fixed; left: 38vw; top: 44vh;}
.arbolitos-05 {position: absolute; width: 100%; max-width: 300px; bottom: 0px; left: 44vw;}
.sol-05 {position: absolute; width: 100%; max-width: 300px; top: 0px; right: 5vw;}
.gota-iniciativas{width: 100%; max-width: 150px; position: absolute; right: 3vw; top: 0;}
#pato-jergon{background: url(../shapes/cap05/pato-jergon.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.represa-centrales{width: 100%; max-width: 180px; position: absolute; right: 0; top: 6vh;}
.gestion-del-agua{width: 100%;}
.reutilizacion-agua-01{width: 100%; max-width: 180px;}
.centrales-hidroelectricas{width: 100%; max-width: 250px;}
.consuma-agua-total{width: 100%; max-width: 180px;}
#entorno-central-cantilla{background: url(../shapes/cap05/entorno-central-cantilla.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.agua-potable{width: 100%; max-width: 200px;}
.consumo-diesel{width: 100%; max-width: 120px;}
.emision-gases{width: 100%; max-width: 180px;}
#zorro-silvestre{background: url(../shapes/cap05/zorro-silvestre.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#martin-perscador{background: url(../shapes/cap05/martin-perscador.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.huella-carbono{width: 100%; max-width: 200px;}
.emisiones-gei{width: 100%; max-width: 200px;}
#entorno-rio-chapo{background: url(../shapes/cap05/entorno-rio-chapo.jpg) no-repeat right bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.emisiones-atmosfericas{width: 100%; max-width: 300px;}
#impuestos-verdes{background: url(../shapes/cap05/impuestos-verdes.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.hoja-impuestos{width: 100%; max-width: 180px;}
#biodiversidad{background: url(../shapes/cap05/biodiversidad.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.proyectos-molifero{width: 100%;}
.colmena{width: 100%; max-width: 200px;}
.agua-captada{width: 100%; max-width: 500px;}
.embalse-angostura{width: 100%; max-width: 150px; position: absolute; left: 0; top: 25vh;}
.tb-agua-reutilizada{width: 100%; max-width: 550px;}
.tb-aprovechamiento-energetico{width: 100%; max-width: 650px;}
.tb-consumo-agua-chile{width: 100%; max-width: 500px;}
.tb-agua-mar-peru{width: 100%; max-width: 550px;}
.circ-comuna-cochamo{width: 100%; max-width: 150px; position: absolute; right: 0; bottom: 25vh;}
.tb-combustibles-utilizados{width: 100%; max-width: 730px;}
.tb-combustibles-utilizados-peru{width: 100%; max-width: 470px;}
.tb-eficiencia-centrales-chile{width: 100%; max-width: 400px;}
.tb-ahorro-energetico-colbun{width: 100%; max-width: 770px;}
.graph-cambio-climatico{width: 100%; max-width: 650px;}
.graph-evo-factor{width: 100%; max-width: 500px;}
.tb-factor-emision-gases{width: 100%; max-width: 550px;}
.tb-total-emisiones-gei{width: 100%; max-width: 700px;}
.buenas-practicas-cambio{width: 100%; max-width: 500px;}
.graph-balance-ernc{width: 100%; max-width: 500px;}
.tb-emisiones-atmos{width: 100%; max-width: 500px;}
.tb-emisiones-santa-maria{width: 100%; max-width: 750px;}
.viento-ico{width: 100%; max-width: 200px; position: absolute; right: 0; bottom: 6vh;}
.pajarito-biodiversidad{width: 100%; max-width: 200px; position: absolute; right: 0; top: 6vh;}
.pad-fill-02{padding-top: 20vh; padding-bottom: 20vh;}
.flor-manzano{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.flecha-carta{width: 100%; max-width: 200px; position: absolute; left: 0; bottom: 4vh;}
.circ-central-biobio{width: 100%; max-width: 180px; position: absolute; left: 0; bottom: 25vh;}
.tb-mater-05
.tb-mater-05{width: 100%; max-width: 770px;}
.modelo-ambiente{width: 100%; max-width: 100px;}
.graph-energia-segura{width: 100%; max-width: 500px;}
.tb-mater-04{width: 100%; max-width: 770px;}
.circ-martin-pescador{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
.circ-entorno-lago-chapo{width: 100%; max-width: 180px; position: absolute; right: 0; bottom: 25vh;}
#zorro-salvaje-colbun{background: url('../shapes/cap05/zorro-silvestre.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.circ-zorro-silvestre{width: 100%; max-width: 180px; float: right; margin-right: -15px; padding-top: 25vh; padding-bottom: 25vh;}
/*FIN PORTADA 05*/

/*PORTADA 06*/
#portada-06{background: url(../shapes/cap06/06-back.jpg) no-repeat left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.entrar-orange-06{background-color: #f16122; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border-radius: 50px; margin-top: 30px; font-size: 28px; transition: .3s; -webkit-transition: .3s;}
.entrar-orange-06:hover{cursor: pointer; box-shadow: 0px 10px 10px 0px rgba(193, 61, 30, 0.4); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #f47b2a;}
.entrar-orange-06 svg{color: #ffffff;}
.rayo-06 {position: absolute; width: 100%; max-width: 150px; top: 0px; right: 5vw;}
.constructor-06 {width: 100%; max-width: 220px; position: fixed; left: 36vw; top: 30vh;}
.ampolleta-06{width: 100%; max-width: 300px; position: absolute; bottom: -20px; left: -2vw;}
.industria-06{position: absolute; width: 100%; max-width: 300px; bottom: 0px; left: 28vw;}
#alcance-memoria{background: url(../shapes/cap06/alcance-memoria.jpg) no-repeat left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 80vh;}
#metodología{background: url(../shapes/cap06/metodologia.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 80vh;}
#depuradora-aguas{background: url(../shapes/cap06/depuradora-aguas.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#objetivos-sostenibles{background: url(../shapes/cap06/objetivos-sostenible.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.metas-publicas{width: 100%; max-width: 760px;}
.circ-depuradora-agua{width: 100%; max-width: 180px; position: absolute; right: 0; top: 25vh;}
.linea-fuentes{width: 100%; max-width: 750px;}
.tb-info-industria{width: 100%; max-width: 850px;}
.matriz-de-materialidad{width: 100%; max-width: 600px;}
.iden-temas-rel{width: 100%; max-width: 200px;}
.tb-temas-mater{width: 100%;}
#central-coronel-biobio{background: url(../shapes/cap06/central-coronel-biobio.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.firma-declaracion{width: 100%; max-width: 200px;}
.indice-gri-tb{width: 100%; max-width: 750px;}
.info-ver{width: 100%;}
#info-rel-planta{background: url(../shapes/cap06/info-rel-planta.jpg) no-repeat right center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
/*FIN PORTADA 06*


/*FADE IN ANIMATION*/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.fade-in.two {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay:0.6s;
  animation-delay: 0.6s;
}

.fade-in.three {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.fade-in.four {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }

  .fade-in.five {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  .fade-in.six {
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    animation-delay: 1.8s;
  }

  .fade-in.seven {
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    animation-delay: 2.1s;
  }

  .fade-in.eight {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    animation-delay: 2.4s;
  }

  .fade-in.nine {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay:2.7s;
    animation-delay: 2.7s;
  }
/*FIN FADE IN AN ANIMATION*/

/*BEAT EFECT*/
.human-heart {
  animation: 1.5s infinite beatHeart;
}

@keyframes beatHeart {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
    background-color: #245095;
  }
  40% {
    transform: scale(1);
    background-color: #245095;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);

  }
}
/*FIN BEAT EFECT*/


/*BEAT EFECT CAP 01*/
.human-heart-01 {
  animation: 1.5s infinite beatHeartUno;
}

@keyframes beatHeartUno {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
    background-color: #FFC72C;
  }
  40% {
    transform: scale(1);
    background-color: #FFC72C;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);

  }
}
/*FIN BEAT EFECT CAP 01*/