@charset "utf-8";
@import url("navigation.css");

html, body{margin:0; padding:0; width:100%; height:100%; font-family: lft-etica, sans-serif; position: relative;}

.fouc {
    visibility: hidden;
}

a.nav-brand{text-decoration: none;}

.container{width: 100%; margin:0 auto; max-width: 1280px;}
.txt{padding:0 25px;}

.pdf{display:block;}
.movil{display:none; overflow: auto; width: 100%; height: 89%;}

.clear{clear:both;}

#penoles-cont{background: #ededf0; height: 100%; overflow: hidden;}


#intro{width:100%; height: 100%; overflow: hidden; position: relative;}
#intro .bg-intro{width:100%; height: 100%;  background: url("../img/home/bg-intro.jpg") no-repeat center; background-size: cover;}
#intro .cuadro{
	height: 100%;
	position: absolute; 
	-moz-transform: skew(40deg, 0deg);
	-webkit-transform: skew(40deg, 0deg);
	-o-transform: skew(40deg, 0deg);
	-ms-transform: skew(40deg, 0deg);
	transform: skew(40deg, 0deg);
	 background: rgb(9,118,70);
background: -webkit-linear-gradient(bottom, rgba(9,118,70,1) 31%, rgba(9,118,70,0.4906163148853291) 100%);
background: -o-linear-gradient(bottom, rgba(9,118,70,1) 31%, rgba(9,118,70,0.4906163148853291) 100%);
background: linear-gradient(to top, rgba(9,118,70,1) 31%, rgba(9,118,70,0.4906163148853291) 100%);    
}
#intro .c1{width: 10%; opacity: 0.4; bottom: 0; right: 40%;}
#intro .c2{width: 10%; opacity: 0.6; bottom: 0; right: 30.01%;}
#intro .c3{width: 10%; opacity: 0.9; bottom: 0; right: 20.03%;}
#intro .c4{width: 50%; opacity: 1; bottom: 0; right: -29.9%; background: #097646;}
#intro .c5{width: 70%; opacity: 1; bottom: 0; right: -99.6%; background: #097646;}

#intro h2{font-size: 110px; margin:0; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 24%; right: 6%;}
#intro p.hacia{font-weight: 200; margin:0; font-size: 45px; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 18%; right: 6%;}
#intro p.informe{font-weight: 300; display: flex; align-items: center; margin:0; text-transform: uppercase; font-size: 15px; color:#ffffff; position: absolute; bottom: 10%; right: 6%;}
#intro p.informe span{font-weight: 400; font-size: 15px;}
#intro p.informe .go-down{font-size: 28px; color:#ffffff; margin-right: 10px;}
#intro .logo-intro{position:absolute; width: 80px; right: 10%; top:15%;}

#intro2{width:100%; height: 100%; overflow: hidden; position: relative;}
#intro2 .bg-intro{width:100%; height: 100%; background: url("../img/home/bg-intro2.jpg") no-repeat center; background-size: cover; position: absolute;}
#intro2 h2{font-size: 90px; margin:0; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 23%; left: 5%;}
#intro2 p.para{font-weight: 200; margin:0; font-size: 40px; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 17%; left: 20%;}

#intro2 .bal{position:absolute; width: 50%; bottom: 4%; right: 0;}
#intro2 .bal-movil{position:relative; width: 100%; display: none; overflow: hidden;}
#intro2 .bal-movil .bg-bal{background: #ffffff; opacity: 0.85; position: absolute; width: 100%; height: 100%;}
#intro2 .bal-movil .bal-logo{width: 50px; margin: 20px auto 0; display: block; position: relative;}
#intro2 .bal-movil p{position: relative; font-size: 10px; line-height: 1.4; font-weight: 300; margin-bottom: 40px;}

#intro2 .cuadro-cont{ overflow: hidden; position: absolute; top: -325px; left: 160px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);}

#intro2 .cuadro2{background:#424557; height: 100%;}
#intro2 .cuadro-cont .c1a{width: 55%; opacity: 1;}
#intro2 .cuadro-cont .c2a{width: 15%; opacity: 0.8;}
#intro2 .cuadro-cont .c3a{width: 15%; opacity: 0.6;}
#intro2 .cuadro-cont .c4a{width: 15%; opacity: 0.4;}
#intro2 h5{font-size:17px; line-height: 1.4; position: absolute; top: 40px; left: 148px; text-align: center; width: 680px; font-weight: 400; color:#ffffff;}


#intro2 .iniciar{color:#ffffff; position: absolute; bottom: 10%; left:40%; font-size: 15px; display: flex; align-items: center; text-decoration: none;}
#intro2 .iniciar i{font-size: 28px; margin-left: 10px;}


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

#perfil h2{font-size: 80px; margin:0; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 250px; right: 210px;}
#perfil p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; bottom: 20%; left: 10px; text-align: center; width: 100%; max-width: 350px; font-weight: 400; color:#ffffff;}
#perfil p.ingresos span{color:#ffb30a; font-weight: 500; font-style: italic;}
#perfil p.ingresos span.fch{font-size: 32px;}
#perfil p.ingresos span.fgr{font-size: 48px;}

#perfil .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#perfil .cuadro{background:#ffb30a; height: 100%;}
#perfil .cuadro-cont .c1{width: 55%; opacity: 1;}
#perfil .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#perfil .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#perfil .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#perfil h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 10px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#gobernanza h2{font-size: 80px; margin:0; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 220px; right: 80px;}
#gobernanza p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; bottom: 10%; left: 10px; text-align: center; width: 100%; max-width: 320px; font-weight: 400; color:#ffffff;}
#gobernanza p.ingresos span{color:#ffffff; font-weight: 500; font-style: italic;}
#gobernanza p.ingresos span.fch{font-size: 32px;}
#gobernanza p.ingresos span.fgr{font-size: 48px;}

#gobernanza .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#gobernanza .cuadro{background:#ed1c24; height: 100%;}
#gobernanza .cuadro-cont .c1{width: 55%; opacity: 1;}
#gobernanza .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#gobernanza .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#gobernanza .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#gobernanza h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 50px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#economico h2{font-size: 70px; margin:0; line-height: 1; text-align: center; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 200px; right: 110px;}
#economico p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; top: 35%; left: 10px; text-align: center; width: 100%; max-width: 350px; font-weight: 400; color:#ffffff;}
#economico p.ingresos span{color:#ffffff; font-weight: 500; font-style: italic;}
#economico p.ingresos span.fch{font-size: 32px;}
#economico p.ingresos span.fgr{font-size: 48px;}

#economico .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#economico .cuadro{background:#2e3192; height: 100%;}
#economico .cuadro-cont .c1{width: 55%; opacity: 1;}
#economico .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#economico .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#economico .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#economico h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 50px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#ambiental h2{font-size: 70px; margin:0; line-height: 1; text-align: center; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 240px; right: 110px;}
#ambiental p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; bottom: 15%; left: 30px; text-align: center; width: 100%; max-width: 320px; font-weight: 400; color:#ffffff;}
#ambiental p.ingresos span{color:#ffffff; font-weight: 500; font-style: italic;}
#ambiental p.ingresos span.fch{font-size: 32px;}
#ambiental p.ingresos span.fgr{font-size: 48px;}

#ambiental .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#ambiental .cuadro{background:#097646; height: 100%;}
#ambiental .cuadro-cont .c1{width: 55%; opacity: 1;}
#ambiental .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#ambiental .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#ambiental .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#ambiental h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 40px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#social h2{font-size: 70px; margin:0; line-height: 1; text-align: center; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 240px; right: 110px;}
#social p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; bottom: 15%; left: 30px; text-align: center; width: 100%; max-width: 300px; font-weight: 400; color:#ffffff;}
#social p.ingresos span{color:#ffffff; font-weight: 500; font-style: italic;}
#social p.ingresos span.fch{font-size: 32px;}
#social p.ingresos span.fgr{font-size: 48px;}

#social .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#social .cuadro{background:#0285d7; height: 100%;}
#social .cuadro-cont .c1{width: 55%; opacity: 1;}
#social .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#social .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#social .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#social h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 40px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#subsidiaria h2{font-size: 70px; margin:0; line-height: 1; text-align: center; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 200px; right: 110px;}

#subsidiaria .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#subsidiaria .cuadro{background:#0d9886; height: 100%;}
#subsidiaria .cuadro-cont .c1{width: 55%; opacity: 1;}
#subsidiaria .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#subsidiaria .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#subsidiaria .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#subsidiaria h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 60px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}


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

#acerca h2{font-size: 70px; margin:0; line-height: 1; text-align: center; font-weight: 700; font-family: yorkten-slab-normal, sans-serif; color:#ffffff; position: absolute; bottom: 190px; right: 50px;}
#acerca p.ingresos{font-size:16px; text-shadow: 1px 1px 30px rgba(0, 0, 0, 0.9); font-family: yorkten-slab-normal, sans-serif; line-height: 1.4; position: absolute; top:20%; left: 30px; text-align: center; width: 100%; max-width: 150px; font-weight: 400; color:#ffffff;}
#acerca p.ingresos span{color:#ffffff; font-weight: 500; font-style: italic;}
#acerca p.ingresos span.fch{font-size: 32px;}
#acerca p.ingresos span.fgr{font-size: 48px;}

#acerca .cuadro-cont{ overflow: hidden; position: absolute; bottom: -325px; right: -10px; width: 650px; height: 650px; display: flex; -moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);}

#acerca .cuadro{background:#424557; height: 100%;}
#acerca .cuadro-cont .c1{width: 55%; opacity: 1;}
#acerca .cuadro-cont .c2{width: 15%; opacity: 0.8;}
#acerca .cuadro-cont .c3{width: 15%; opacity: 0.6;}
#acerca .cuadro-cont .c4{width: 15%; opacity: 0.4;}
#acerca h5{font-size:18px; line-height: 1.4; position: absolute; bottom: 40px; right: 20px; text-align: center; width: 600px; font-weight: 400; color:#ffffff;}



footer{padding: 20px 0 60px; width: 100%; background: #ffffff; z-index: 9999; display: block; position: relative;}
footer .bg-footer{background: #424557; width: 110%; height: 100%; position: absolute; top:0; left:-70%; -moz-transform: skew(-42deg, 0deg);
-webkit-transform: skew(-42deg, 0deg);
-o-transform: skew(-42deg, 0deg);
-ms-transform: skew(-42deg, 0deg);
transform: skew(-42deg, 0deg);}
footer h3{color:#ffffff; font-size: 36px; font-family: yorkten-slab-normal, sans-serif; font-weight: 200; position: relative; margin-bottom: 20px;}
footer .flex-footer{display: flex; position: relative; align-items: flex-end; margin-bottom: 20px;}
footer .flex-footer > div:first-child{width: 56%;}
footer .flex-footer > div:first-child p.high{color:#95a7b9; font-size: 17px; line-height: 1.5; width: 60%; font-family: lft-etica, sans-serif;  font-weight: 400; margin-bottom: 60px;}
footer .flex-footer > div:first-child > .flex-abreviaturas{display: flex;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:first-child{width: 35%;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:first-child p{font-size:11px; color:#ffffff; font-weight: 300;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:first-child table{width: 100%; max-width: 250px;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:first-child table tr td{font-size:11px; color:#ffffff; font-weight: 300; padding: 4px;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:first-child table tr td sup{font-size:7px;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:nth-child(2){width: 65%;}
footer .flex-footer > div:first-child > .flex-abreviaturas > div:nth-child(2) img{display: block; width: 100%;}

footer .flex-footer > div:nth-child(2){width: 44%;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer{display: flex;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div{width: 50%;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul{list-style: none; padding-left: 15px;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul li{font-size: 12px; font-weight: 300; font-family: lft-etica, sans-serif;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul li a{text-decoration: none; color:#000000; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul li:first-child{font-size: 16px; font-weight: 600; font-family: yorkten-slab-normal, sans-serif;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.negro li a{color: #000000;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.negro li a:hover{color: #626262;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.amarillo li:first-child a{color: #ffb30a;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.amarillo li:first-child a:hover{color: #FFC750;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.amarillo li a:hover{color: #ffb30a;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.rojo li:first-child a{color: #ed1c24;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.rojo li:first-child a:hover{color: #EF5258;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.rojo li a:hover{color: #ed1c24;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.morado li:first-child a{color: #2e3192;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.morado li:first-child a:hover{color: #3539B7;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.morado li a:hover{color: #2e3192;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.green li:first-child a{color: #097646;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.green li:first-child a:hover{color: #0C9458;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.green li a:hover{color: #097646;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.blue li:first-child a{color: #0285d7;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.blue li:first-child a:hover{color: #239DE9;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.blue li a:hover{color: #0285d7;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.green2 li:first-child a{color: #0d9886;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.green2 li:first-child a:hover{color: #18B5A1;}

footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.gray li:first-child a{color: #8e8f9a;}
footer .flex-footer > div:nth-child(2) .flex-menu-footer > div ul.gray li:first-child a:hover{color: #A2A3B0;}

footer .flex-footer > div:nth-child(2) .icon-footer{display:flex; align-items: flex-start; margin-top: 30px;}
footer .flex-footer > div:nth-child(2) .icon-footer > img{display:block;}
footer .flex-footer > div:nth-child(2) .icon-footer > img:first-child{width: 12%;}
footer .flex-footer > div:nth-child(2) .icon-footer > img:nth-child(2){width: 16%; margin: 0 15px;}
footer .flex-footer > div:nth-child(2) .icon-footer > img:nth-child(3){width: 19%; margin: 0 15px 0 0;}
footer .flex-footer > div:nth-child(2) .icon-footer > img:nth-child(4){width: 53%;}

.footer-show{height: 4%; position: absolute; background: #424557; width: 100%; bottom: 0; z-index: 9999;}
.footer-show .f-show{position: absolute; cursor: pointer; left: 20%; top:-20px; background: #424557; color: #ffffff; font-size: 10px; font-weight: 400; padding: 4px 6px; font-family: yorkten-slab-normal, sans-serif;}
.footer-show .container{height: 100%;}
.footer-show .nav-foot{width: 100%; height: 100%; display: flex; align-items: center;}
.footer-show .nav-foot > div{width: 33.33%; display: flex; align-items: center;}
.footer-show .nav-foot > div:last-child{text-align: right; justify-content: flex-end;}
.footer-show .nav-foot > div:nth-child(2){text-align: center; justify-content: center;}
.footer-show .nav-foot > div a{color:#ffffff; font-size: 10px; text-decoration: none; padding: 0 30px; font-family: yorkten-slab-normal, sans-serif; font-weight: 300;}

.f-close{position: absolute; cursor: pointer; z-index: 99; top:10px; right: 30px; color:#424557; font-size: 24px;}


.experience{
	z-index:99999999999;
	background: #097646;
	position: fixed;
	width: 100%; height: 100%;
	justify-content: center;
	align-items: center;
	display: none;
}
.experience p{color: #ffffff; text-align: center;font-size: 16px; line-height: 1.5; max-width: 200px; font-family: yorkten-slab-normal, sans-serif; font-weight: 200;}
.experience p i{font-size: 22px;}
/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:9999999998; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:0; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	right:0;
	text-align: center;
	 background-image:url(../img/status.gif); /*path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:0 auto; /* is width and height divided by two */
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}