@font-face{
    font-family:"Helvetica-Bold";
    src: url("../fonts/Helvetica-Bold-Font.ttf");
}
@font-face{
    font-family:"Monotype-Corsiva";
    src: url("../fonts/MTCORSVA.TTF");
}
@font-face{
    font-family:"Helvetica";
    src: url("../fonts/Helvetica.ttf");
}


*{
    padding: 0%;
    margin: 0%;
}
body{
    width:100%;
    background: #41B6E6;
    height: auto;
}

/*--------- INDEX----------*/ 
header{
    width: 100%;

    height: auto;
    background: rgba(172, 169, 169, 0.08);
}
.fotoheader{
    padding-top: 5%;
    height: 700px;
    width: 100%;
   
}
/***---HOME---***/
.home{
    width: 40px;
    height: 40px;
    background: rgba(65, 182, 230, 0.7);
    top: 80px; /*-- arriba --*/
    right: 7px; /*-- del margen derecho --*/
    position: fixed; /*-- me sigue cuando hago scroll--*/
    cursor: pointer;
    border-radius: 20px;
    z-index: 200;
}

@media(max-width:1200px){
    .home{
        top: 60px;
    }
    
}
@media(max-width:800px){
    .home{
        top: 10px;
    }
    
}

/*----------FLECHA-ARRIBA----------*/
.ir-arriba{
    width: 40px;
    height: 40px;
    background: rgba(0, 26, 114, 0.81);
    bottom: 110px; /*-- abajo --*/
    right: 10px; /*-- del margen derecho --*/
    position: fixed; /*-- me sigue cuando hago scroll--*/
    transform:rotate(270deg);
    cursor: pointer;
    border-radius: 20px;
}
.flecha{
    width: 40px;
    height: 40px; 
}
/*---------FOOTER---------*/
footer{
    margin: 0;
    width: 100%;
    height: auto;
    background:#001A72;
    float: left;
    color: white;
}
.info-footer{
    font-size: 20px;
    width: 100%;
    float: center;
    text-align: center;
    align-content: center;
    margin-top: 1%;
}
.infofooter{
    animation-duration: 3s;
}
.redesfooter{
    margin-left: 1%;
    width: 20%;
    float: left;
    padding-top: 30px; 
}
.iconoredes{
    margin-top: .20%;
    float: left;
    animation-duration: 1s;
    width: 80px;
    transition: .3s;
    border-radius: 40px;
}
.iconoredes:hover{
    opacity: .7;
    transform:scale(1.25);
}
.btn-footer{
    text-decoration:none;
    color: white;
    /*font-family: Monotype-Corsiva;*/
}
.btn-footer:hover{
    color: white;
}

@media(max-width:950px){
    .btn-footer{
        font-size: 20px;
    }
    .redesfooter{
    padding-top: 20px; 
    }
    .info-footer{
        font-size: 18px;
    }
}
@media(max-width:800px){
    .info-footer{
        width: 80%;
        margin: 0 10%;
        align-content: center;
        float: left;
    }
    .redesfooter{
        width: 40%;
        margin: 0 30%;
    }
    .iconoredes{
        margin: 0 5%;
    }
    .btn-footer{
        font-size: 18px;
    }
    .info-footer{
        font-size: 17px;
    }
}


@media(max-width:540px){
     .btn-footer{
        font-size: 14px;
    }
    .info-footer{
        font-size: 14px;
    }
}
@media(max-width:440px){
     .btn-footer{
        font-size: 12px;
    }
    .info-footer{
        font-size: 12px;
    }
}
@media(max-width:340px){
     .btn-footer{
        font-size: 10px;
    }
    .info-footer{
        font-size: 10px;
    }
}

/*-------------BOTONERA-------------*/
nav{
    width:100%;
    height: auto;
    position: fixed; /* acompaña con scroll */
    text-align: center;
    background: white;
    z-index: 100; /* capa queda arriba de lo demas*/
}
#btn-menu{
    display: none;
}
nav label{
    display: none;
}
.logo-nav{
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 1%;
    float: left;
    transition: .3s;
}

.logo-nav:hover{
    transform:scale(1.25);
}
.menu{
    width: 100%;
    float: left;
    height: auto;
    background: white;
}
.menu ul{
    width: 100%; 
    list-style: none;
    padding: 0% 0%;
}
.menu ul li{
    width: 18%;
    float:left;
    font-size: 16px;
}
.menu ul a{
    color: #001A72;
    text-transform: uppercase;
    text-decoration:none;
    font-family: Helvetica-Bold;
    transition: .5s;
}
.menu ul a:hover{
    color: black;
    background: lightblue;
    border-bottom: 2px solid; 
}
#submenu{
    display: none;
    width:20%;
    float:left;
    height: auto;
    position: absolute;
    background: white;
}
#submenu li{
    width: 100%;
    border-right: 1px;
    border-bottom: 1px solid grey;
}
nav ul li:hover ul#submenu{
    display: block;
}
@media(max-width:1250px){
    .menu ul li{
        font-size: 14px;
    }
}
@media(max-width:1260px){
    .menu ul li{
        font-size: 12px;
        }
    .logonav{
        width: 10%;
        margin: .5% 40%;}
    
}
@media(max-width:930px){
    .menu ul li{
        font-size: 11px;
        }
}
@media(max-width:850px){
    .menu ul li{
        font-size: 8px;
        }
}
@media(max-width:768px){
    nav label{
        display: block;
        width: 50px;
        height: 50px;
        cursor:pointer;
    }
    #iconomenu{
        width:100%;
    }
    .menu{
        position: absolute;
        width: 50%;
        background: white;
        margin-left: -50%;
        transition: .3s;
    }
    .menu ul{
        flex-direction: column;
    }
    .menu ul li {
        width: 100%;
        border-right: 0px;
        border-bottom: 1px solid grey;
        
    }
    #btn-menu:checked ~ .menu{
        margin: 0;
    }
    ul#submenu{
        position: relative;
        width:100%;
    }
    .fotoheader{
        height: 600px;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }
}
@media(max-width:500px){
    .menu ul li{
        font-size: 8px;
        }
}

/*----------CONTACTO----------*/
.contacto{
    padding-top: 140px;
    float: left;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    height: auto;
}
.container {
	max-width:400px;
	width:90%;
	margin:0 auto;
	position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#F9F9F9;
	padding:25px;
	margin:50px 0;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
    resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#001A72;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}
#mapacontact iframe{
    width:100%;
    height:300px; 
    padding: 10px;
}

/*----------DONDE ESTAMOS----------*/
.dondeestamos{
    padding-top: 150px;
    width: 100%;
    height: auto;
    padding-bottom: 1%;
}
.mapa2{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------ QUIENES SOMOS -----*/
.quienessomos{
    padding-top: 140px;
    margin: 0 10%;
    width: 80%;
    float: left;
}
.seccionquienes{
    width: 95%;
    margin: 2.5%;
    text-align: center;
}
.seccionquienes p{
    font-size: 14px;
    font-family:"Helvetica";
    text-align: center;
    color: #001A72;
}

@media@media (max-width:1100px){
    .seccionquienes p{
    font-size: 11px;
    }
}
@media@media (max-width:900px){
    .seccionquienes p{
    font-size: 10px;
    }
}
@media (max-width:768px){
    .seccionquienes{
        width: 100%;
        margin: 0%
        }
}
/*------ INSTITUCIONAL -----*/
.institucional{
    padding-top: 140px;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    height: auto;
    float: left;
}
.data{
    width: 60%;
    margin: 1% 20%;
    float: left;
}
.instfoto{
    width: 100%;
    height: 400px;
}
@media (max-width:768px){
    .data{
        width: 100%;
        margin: 0%
        }
}
/*------ SITIOS -----*/
.sitios{
    padding-top: 150px;
    float: left;
    height: auto;
    margin-bottom: auto;
    margin-top: auto;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

}
.contenedor{
    width: 30%;
    padding-bottom: 5%;
    margin: 1.5%;
    
    float: left;
    text-align: center;
    margin-bottom: auto;
    margin-top: auto;
}
.texto a{
    list-style: none;
    text-decoration:none;
    color: white;
    margin-bottom: auto;
    margin-top: auto;
}
.texto a:hover{
    color: white;
    text-decoration:none;
    margin-bottom: auto;
    margin-top: auto;
}

.texto{
    width:80%;
    margin: 1% 10%;
    font-size: 30px;
    background: #001A72;
    color: white;
    font-family: MTCORSVA;
    font-weight: bold;
    text-shadow: 2px 2px black;
    margin-bottom: auto;
    margin-top: auto;
}
.textolegales{
    width:98%;
    margin: 1% 1%;
    font-size: 22px;
    background: #001A72;
    color: white;
    font-family: MTCORSVA;
    font-weight: bold;
    margin-bottom: auto;
    margin-top: auto;   
}
.titulovalores{
    width:96%;
    margin: 1% 2%;
    font-size: 40px;
    color: #001A72;
    font-family: MTCORSVA;
    font-weight: bold;
    margin-bottom: auto;
    margin-top: auto;
}
.parrafo{
    font-size: 20px;
    color: #10478C;
    font-family: MTCORSVA;
}

.sitiofoto{
    width: 80%;
    height: 200px;
    margin: 1%;
    margin-bottom: auto;
    margin-top: auto;
}
.sitiologo{

}
.centro{
    margin-top: 10%;
    margin-bottom: 10%;
}
@media (max-width:1350px){
    .texto{
        font-size: 25px;
        }
    .parrafo{
         font-size: 20px;
    }
}
@media (max-width:1120px){
    .texto{
        font-size: 23px;
        }
    .parrafo{
         font-size: 18px;
    }
}
@media (max-width:1030px){
    .texto{
        font-size: 22px;
        }
    .parrafo{
         font-size: 16px;
    }
}

@media (max-width:990px){

    .quienessomos{
        padding-top: 140px;
    }
    .contenedor{
        width: 100%;
        padding: 2%;
        }
    .texto{
        font-size: 20px;
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
        }
    .sitiofoto{
        width: 60%;
    }
    .parrafo{
         font-size: 14px;
    }
    .textolegales{
        font-size: 18px;
    }
}
@media (max-width:780px){
    .parrafo{
         font-size: 14px;
    }
    .textolegales{
        font-size: 16px;
    }
   
    .texto{
         font-size: 16px;
    }
    
}
@media (max-width:690px){
    .parrafo{
         font-size: 12px;
    }
    .textolegales,  .texto{
        font-size: 12px;
    }
    .quienessomos{
    margin: 0 1%;
    width: 98%;
    }
}
@media (max-width:490px){
    .textolegales{
         font-size: 9px;
    }
}
/*------ Contact -----*/
.Contact{
    width: 100%;
    float: left;
    height: 650px;
    padding-top: 200px;
}

.Contact p{
    animation-duration: 2s;
}