@font-face {
  font-family: amaranth-r;
  src: url(../fonts/AMARANTH-REGULAR.TTF);
}
@font-face {
  font-family: amaranth-b;
  src: url(../fonts/AMARANTH-BOLD.TTF);
}
html{ background-color: #0c5178; }
body{margin:0%; padding:0%; width: 2194px; height: 1234px; background: center center no-repeat fixed cover ; background-size:contain; overflow: hidden;}

h1{margin-top:0px; padding-top: 3%; font-family: amaranth-r; font-size: 100px; color:#fff; text-align: center; width: 98%;
    text-shadow: 0px 6px 0px #215475;}
h2{margin-top:0px; padding-top: 2%; margin-left: 2%; font-family: amaranth-r; font-size: 60px; color:#fff;


  text-shadow:0 5px 0 #639CC1, 0 2px 0 #8ec2e2, 0 3px 0 #639CC1, 0 4px 0 #639CC1, 0 5px 0 #639CC1, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
text-shadow: 7px 3px 8px #000000;
}
h1 > span{ font-size: 50px; }
.trivia h1{ font-size: 60px; width: 90%; margin:0% 5%; }
.fotos h1{ width: 72%; font-family: "amaranth-b";  text-align: left; margin: 2% 5% 0%;  font-size: 75px;}
.ambiente h1{    width: 100%;  text-align: center; padding: 5% 0% 0% 0%;font-size: 75px;}
footer{ width: 100%; position: absolute; bottom:0px;  z-index: 5; }

.btn-trivia{ float:left; width: 18%; }
.btn-inicio{ margin-top: 0px; width: 35%; }
.logo{float:right; margin-top: 10px; width: 17%;}
.logo2{right: 0;width: 15%;top: 0; position: absolute;}

.lona{ width: 1097px; height: 1234px; top: 0;background-color: rgba(40,40,40,0.8); position: absolute; z-index: 5; display: none;}
.left{ margin-left:0px;}
.right{ margin-left:1097px;}

.modal{ width: 100%;  margin: 15% 0%;}
.modal .foto-modal{ width: 100%; }
.modal .cruz{ width: 4%; position: absolute; top: 2%; right: 2%; cursor: pointer; }

.modal p{  font-family: amaranth-r; font-size: 42px;color: white; margin: 2%;height: 800px;overflow-y: auto; }
.modal span{ font-family: amaranth-b; font-size: 50px; color: white; margin: 2%; }
.ver-mas-der,.ver-mas-izq{ width: 20%; position: relative; left: 70%; top: -80px; cursor: pointer;}


.close{float: right;margin: 0% 12% 0% 0%;background-color:#70B261; width: 100px;height: 100px; border-radius: 50%;color:#fff;font-family: amaranth-b;text-align: center;padding: 5px 5px 0px 5px;font-size: 4em;
font-family: amaranth-b; font-weight: bold; cursor: pointer; }


h4{margin-top:0px; margin: 3%; font-family: amaranth-r; font-size: 45px; color:#fff; text-align: center; float: left;
text-shadow:0 5px 0 #639CC1, 0 2px 0 #8ec2e2, 0 3px 0 #639CC1, 0 4px 0 #639CC1, 0 5px 0 #639CC1, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}


.cont-info{ width: 840px;height: 443px;background: #83b0de; position: absolute;top: 365px; left: 0px; color: #fff;}
.cont-info p{ font-size: 28px;font-family: amaranth-r;color: #fff;text-align: justify; width: 90%;margin: 5%; max-height: 350px;overflow-y: auto;}

.info-salto{ width: 41%;font-family: amaranth-r;color: white; margin: 2% 3% 0% 5%; font-size: 40px; float: left; }
.info-salto div{overflow-y: auto;direction: rtl; text-align: left; padding-left: 3%;height: 735px; }
.info-salto p{ direction: ltr; }
.info-salto2{ overflow-y: auto; height: 616px; direction: rtl;width: 36%; font-family: amaranth-r;color: white; margin: 5% 4% 0% 8%; font-size: 37px;
    float: left;}
.info-salto2 p{text-align: left; padding: 0% 8% 0% 6%; direction: ltr; }

.cont-fotos{ float: left; width: 48%; margin-top: 2%; }
.cont-galeria{ float: left; width: 95%; margin-top: 2%; }

.recuadro{    width: 520px; height: 420px; float: left;  margin: 1%;}
.recuadro img{ position: absolute; border:solid 15px #fff;  width: 441px;  margin: 3%; height: 320px;  float: left;}
.recuadro-c {width: 978px; height: 768px;}
.recuadro-c img{ position: absolute;width: 410px;height: 300px; margin: 65px; border:solid 15px #fff; }

.recuadro2{width: 978; height: 768px;float: left;}
.recuadro2 img{position: absolute; width: 72%; height: 69%; z-index: 11;  margin: 11% 0% 0% 9.6%;}

.cintas{background: url(../img/recuadro.png); position: absolute; width: 520px; height: 420px; z-index: 10; }
.cintas2{background: url(../img/recuadro-grande.png); position: absolute; width: 978px; height: 768px; }


.cont-galeria .carousel-item{ margin: -2% 6% 8%;}
.carousel-item .recuadro-c img{     width: 750px; margin: 10%;  height: 500px;}

.carousel-control-next-icon, .carousel-control-prev-icon { width:50px; height:50px;}
.carousel-control-next, .carousel-control-prev {width: 13%; align-items: unset; top: 400px;}
.carousel-control-prev { left: -85px;}
.carousel-control-next { right: -85px;}

.lb-data .lb-caption{font-size: 30px;}

.grande{ position: absolute;  background: url(img/grande.png); width: 250px; height: 250px;}
.grande:hover{  background: url(img/grande-h.png);}
.grande p{ font-family: amaranth-r; font-size: 30px; color:#fff;
text-shadow:0 5px 0 #639CC1, 0 2px 0 #8ec2e2, 0 3px 0 #639CC1, 0 4px 0 #639CC1, 0 5px 0 #639CC1, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
text-shadow: 7px 3px 8px #000000;
position: relative;font-size: 45px;z-index: 2;}
.g1{left: 925px;top: 55px;}
.g1 p{  top: 25px;  left: -122px; width: 256%; font-size: 50px;}

.g2{left: 320px;top: 234px;}
.g2 p{ top: 10px; left: -67px;width: 187%;line-height: 42px;text-align: center;}

.g3{left: 785px; top: 289px;}
.g3 p{    top: 10px;left: -31px; width: 129%; line-height: 42px;  text-align: center; }

.g4{left: 1468px;top: 197px;}
.g4 p{top: -28px;left: -118px;width: 187%;line-height: 48px;text-align: center;}

.g5{left: 1794px;top: 149px;}
.g5 p{ top: -28px;left: -67px;width: 187%;line-height: 48px;text-align: center;}


.mediano{ position: absolute;  background: url(img/mediano.png); width: 230px; height: 230px;}
.mediano:hover{  background: url(img/mediano-h.png);}
.mediano p{ font-family: amaranth-r; font-size: 20px; color:#fff; text-align: center;
text-shadow:0 5px 0 #639CC1, 0 2px 0 #8ec2e2, 0 3px 0 #639CC1, 0 4px 0 #639CC1, 0 5px 0 #639CC1, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
text-shadow: 7px 3px 8px #000000;
position: relative;font-size: 37px;z-index: 2; line-height: 37px;}

.m1{    left: 159px;  top: 484px;}
.m1 p{ white-space: nowrap; top: 25px; }

.m2{left: 403px;top: 652px;}
.m2 p{ white-space: nowrap; top: 15px; }

.m3{left: 114px;top: 815px;}
.m3 p{white-space: nowrap;top: 5px;left: -50px; width: 133%; }

.m4{left: 399px;top: 922px;z-index: 10;}
.m4 p{ white-space: nowrap; top: 15px; }

.m5{left: 987px;top: 529px;}
.m5 p{ white-space: nowrap; top: 25px; }

.m6{left: 694px;top: 726px;}
.m6 p{ white-space: nowrap; top: 25px; }

.m7{left: 1000px;top: 806px;}
.m7 p{ white-space: nowrap; top: 25px; }

.m8{ left: 766px;top: 973px;z-index: 10;}
.m8 p{ white-space: nowrap; top: 25px; }

.m9{left: 1241px;top: 386px;}
.m9 p{ white-space: nowrap; top: 25px; }

.m10{left: 1659px;top: 425px;}
.m10 p{ white-space: nowrap; top: 25px; }

.m11{left: 1269px;top: 662px;}
.m11 p{ white-space: nowrap; top: 25px; }

.m12{left: 1528px;top: 929px;z-index: 10;}
.m12 p{  top: 25px; width: 115%; }

.m13{left: 1212px;top: 998px;z-index: 10;}
.m13 p{ white-space: nowrap; top: 25px; }


.chico{ position: absolute;  background: url(img/chico.png); width: 60px; height: 58px;}
.chico p{ font-family: amaranth-r; color:#fff; text-align: center;
text-shadow:0 5px 0 #639CC1, 0 2px 0 #8ec2e2, 0 3px 0 #639CC1, 0 4px 0 #639CC1, 0 5px 0 #639CC1, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
text-shadow: 7px 3px 8px #000000; position: relative; font-size: 35px; z-index: 2; }

.ch1{
    left: 1603px;
    top: 647px;
    white-space: nowrap;
    }
.ch1 p{ top: -22px; left: 73px; }

.ch2{left: 1841px;top: 723px;}
.ch2 p{ top: -25px; left: 73px; }

.ch3{left: 1643px;top: 757px;}
.ch3 p{ top: -25px; left: 73px; }

.ch4{left: 1776px;top: 826px;}
.ch4 p{ top: -25px; left: 73px; }

.ch5{left: 1576px;top: 858px;}
.ch5 p{ top: -22px; left: 73px; }

/******SCROLLBAR *********/


::-webkit-scrollbar {
  width: 20px;
  height: 12px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #cec9cd;
  border: 0px none #ffffff;
  border-radius: 32px;
}
::-webkit-scrollbar-thumb:hover {
  background: #cec9cd;
}
::-webkit-scrollbar-thumb:active {
  background: #cec9cd;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


/*************************COMPLEJO HIDROELECTRICO ********************/

.container-hidro{ width: 100%; height: 1234px; background-image: url("../img/fondo-logo.png");  }
.fondo-logo{ width: 100%; height: 1234px; background-image: url("../img/fondo-logo.png"); position: absolute;}
.container-hidro a{ text-decoration: none; font-family: "amaranth-b";}
.container-hidro h1{ font-size: 80px; }
.container-hidro div{ width: 35%; position: absolute;  }
.container-hidro div img{ float: left; }
.container-hidro p{ color:#fff; font-family: amaranth-b; font-size: 65px; margin-top:4%;text-shadow:3px 2px 0 #215475; line-height: 68px;}

.btn-complejo-galeria{    top: 541px;    left: 1270px; }
.btn-complejo-mision{top: 250px; left: 190px;}
.btn-complejo-preguntas{top: 815px;  left: 793px;}
.btn-complejo-institucional{top: 250px; left: 1000px;}
.btn-complejo-historia{    top: 541px; left: 459px;}
.btn-inicio-c{margin-top: 0px;  width: 13%;  margin-left: 4%;}


.recuadro-c{ background-image: url("../img/cintas-c.png"); }
.institucional iframe{  margin: 4% 20%;  border: solid 40px rgba(86,78,78,0.7); }

.carousel-galeria{ margin-left: 4%; }

.menu-galeria li,.menu-preguntas li{ list-style-image: url("../img/bullet.png"); line-height: 138px;}
.menu-preguntas li{line-height: 91px;  margin-bottom: 2%;}
.menu-galeria ul { width: 40%;  float: left;  margin: 6% -20% 0% 20%;}
.menu-galeria a, .menu-preguntas a{ font-family: "amaranth-b"; color:#fff; font-size: 76px; }
.menu-preguntas ul {  width: 80%;  margin: 6% 0% 0% 10%;}
.carousel-preguntas{ width: 90%;    margin: 0% auto;}
.carousel-preguntas p{ font-size: 65px; }
.cont-preguntas{   }