*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
    font-family: Arial, Helvetica, sans-serif;
    /* transition: all .5s ease-in-out; */
}
html{
    scroll-behavior: smooth;
}
:root{
        --color1: #042799;
        --color2: #9F128E;
        --color3: #E43272;
        --color4: #FF7457;
        --color5: #FFB84D;
        --color6: #F9F871;
        --color7: #F4ECFF;
        --color8: #484554;

}
body{
    padding: 1px;
    position: relative;
    background-color:white;
    
}

.nav{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    position: fixed;
    z-index: 99999999;
    border-bottom: 1px solid var(--color1);
    background-color: white;
    backdrop-filter: blur(9px);
    top: 0PX;
}
.section_containerLH{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid blue; */
    padding: 4px;
    gap: 10px;
    position: relative;
    left: 30px;
    /* background-color: red; */
}
.ham{
    width: 30px;
    height: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* background-color: blue; */
    cursor: pointer;
    transition: all .5s ease;
    /* border: 2px solid red; */
}
.tache{
    width: 30px;
    height: 15px;
    display: flex;
    flex-direction: column;
    /* position: absolute; */
    justify-content: space-between;
    cursor: pointer;
    transition: all .4s ease;
    display: none;
    /* border: 2px solid red; */


}
.tache span{
    width: 100%;
    height: 3px;
    background-color: var(--color1);
    transition: all .5s ease;

}
.tache span:nth-child(1){
    transform: rotate(45deg) translateY(3px);
    transform-origin: center;
    transition: .4s ease;
    /* border: 2px solid red; */


}
.tache span:nth-child(2){
    transform: rotate(-45deg) translateY(-2px);
    transform-origin:center ;
    transition: .4s ease;

}


.vertache{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999999;
    transition:all .4s ease;
    transform-origin: center;

}
.ocultar{
    display: none;
    /* background-color: red; */
}

.liMenu{
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color1);

}
.logoB{
    display: flex;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    /* color: var(--color1); */

}
.formula{
    color: black;
}
.logo_section{
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden;  */
       /* border: 2px solid rgb(255, 116, 47); */
       font-size: 20%;
       cursor: pointer;
       /* background-color: #042799; */
       text-align: center;

}
.img_logo{
    max-width: 56%;
    position: relative;
    right: 5px;
    background: none;

}
.slogan_container{
    width: 40%;
    height: 90%;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color1);
    opacity: .5;
    /* border: 2px solid red; */
}
.iconos_container{
    width: 40%;
    height: 90%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
}
.icono{
    width: 40px;
    height: 40px;

    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:50% ;
    transition: all .3s ease-in-out;
}
/*
ontenedor de telefonos contenedor de telefonos contenedor de telefonos  contenedor de telefo nos contenedor de telefonos
*/


.telefonos_container{
    padding: 5px 15px;
    position: absolute;
    top: 60px;
    background-color: white;
    display: none;
    transition: all .3s;
    background-color: var(--color1);
    border-radius: 10px;
    
    
}
.telefonos_container:hover{
    display: block;
}
.telefonos_container p{
    color: var(--color7);
    text-align: center  ;
}
.telefonos_container ul {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* background-color: var(--color1); */
    color: var(--color7);
    box-shadow: 0px 9px 19px 1px black;
    border-radius: 10px;

    text-align: center;
}

.telefonos_container ul{
    list-style: none;
}
.telefonos_container p{
    font-size: 1.3rem;
    padding: 9px 3px;
}

/*
contenedor de correos contenedor de correos contenedor de correos contenedor de correo
*/


.correos_container{
    width: 27%;
   padding: 20px;
    background-color: var(--color1);
    position: absolute;
    top: 60px;
    right: 15px;
    box-shadow: 4px 3px 19px 1px black;
    border-radius: 20px;
    display: none;
    
    

}
.correos_container .cta_correo{
    color: var(--color7);
    text-align: center;
    display: block;
    /* background-color: red; */
    transition: all .5s ease;
    margin: 20px auto;
    
}
@keyframes entrada{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}


.icono:hover{
    
    background-color: #6982d68a;
}
.fono{
    width: 25px;
    
    cursor: pointer;
    border-radius: 50%;
}


.buttons{
    width: 20%;
    height: 100vh;
    position: relative;
    top: 70px;
    /* left: -100%; */
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    transition: all 1s ease;
    padding-left: 20px;
    /* background-color: blue; */
    display: none;
    /* background-color: #f4ecff; */
    background-color: white;
    /* backdrop-filter: blur(20px); */
    /* backdrop-filter: blur(100px); */
}
.listaDeOpciones{
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
    /* border: 2px solid red; */



    /* background-color: aquamarine */




}


.opcion{
    width: 100%;
    text-align:justify ;
    color: var(--color1);
    font-size: 1rem;
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    /* background-color: red; */
    /* text-shadow: 3px 2px 6px black; */
    /* background-image: url("./assets/fondoMenu.svg"); */

}
.opcion:hover{
    border-bottom: 4px double var(--color1);
}
.menuActive{
    display: flex;
    left: 0px;
    transition: all 1s ease-in-out;
    border-right: 1px solid rgba(0, 0, 0, 0.452);
    animation: entradaMenu .3s ease;
    position: absolute;
    /* background-image: url("assets/fondoMenu.svg"); */





}



/* slider show */


.s_container{
    width: 500%;
    height: 100%;
    display: flex;
    position: absolute;
    /* margin: 50px auto; */
    /* background-color: red; */
}
.texto{
    width: 400px;
    height: 70px;
    text-align: justify;
    text-size-adjust: 20;
}








@keyframes entradaMenu {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0);
    }
    
}

/* sectiomn header en adelante */
.header_container{
    width: 100%;
    height: 70vh;
    /* border: 5px solid red; */
    margin-top: 70px;
    position: relative;
    background-image:linear-gradient(-45deg,rgba(27, 89, 247, 0.452), rgba(255, 255, 255, 0.562)), url("img/img_nosotros/84801527_2663967326985053_2766237965469351936_n.jpeg");
    background-size: 100%;
    background-position: bottom;
    background-attachment: fixed;
}
.opciones_header{
    width: 60%;
    height: 20%;
    /* border: 2px solid red; */
    position: absolute;
    bottom: 20px;
    right: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color1);
    color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: -3px -3px 12px 0px var(--color8);
    
}
.cta-headerOption{
    width: 90%;
    height: 100%;
    display: inline-block;
    color: var(--color7);
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 20px; */
    text-decoration: none;
    font-size: 1.5rem;
    

}
.cta-headerOption:hover{
    background-color: rgb(4, 4, 124);
    /* border-radius: 20px; */

}
.main_container{
    
    background-image: url("img/fondo\ marca\ de\ agua.png");
    background-repeat: no-repeat;
    /* background-color: red; */
    /* border: 2px solid red; */
}

.historia{
    width: 60%;
    height: 250px;
    /* border: 2px solid red; */
    margin: 20px auto;
    padding: 20px;
}
.historia_p{
    color: whitesmoke;
    font-size: 3.5rem;
    text-shadow: 3px 2px 4px var(--color8);
    margin-top: 100px;
}
.historia_container{
    width: 80%;
    height: 70vh;
    /* border: 2px solid red; */
    margin: 0 auto;
    padding-top: 60px;
    
}
.nuestra_h{

    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-size: 4rem;
    color: #48455495;
    margin: 70px auto;
}
.h_t{
    width: 50%;
    padding: 30px 10px;
    margin: 30px auto;
    /* border: 2px solid greenyellow; */
    
    /* text-align: justify; */
}
.tituloGaleria{
    
    width: 30%;
    /* background-color: red; */
    margin: 70px  auto 70px auto;
    font-size: 4rem;
    text-align: center;
    color: #48455495;

    
}
.img_container{
    width: 90%;
    height: 90%;
    /* background-color: red; */
    margin: 10px auto;
    background-position: center;
    background-size: cover;

}


/* 
seccion de galeria 
*/


.galery_container{
  width: 80%;
  height: 70vh;
  margin: 10px auto;
  /* border: 2px solid rgb(20, 178, 104); */
  display: flex;
  align-items: center;
  /* display: none; */
  position: relative;
  

}

.botonT{
    width: 70px;
    height: 70px;
    /* background-color: red; */
    border-radius: 50%;

}
.botonT img{
    width: 100%;
    cursor: pointer;
    

}
.foto{
    width: 100%;
    height: 100%;
    background-color: var(--color1);
    /* border: 2px solid red; */
}
.quitar{
    display: none;
}
.visible{
    display: block;
}
.mision_container{
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 3px solid red; */
    /* background-color: var(--color1); */
    /* display: none; */
}
.mision_titulo{
    margin-top: 9%;
    font-size: 4rem;
    color: #4845548e;
}
.misionT{
    width: 50%;
    height: 100%;
    /* border: 2pX solid greenyellow; */
    margin: 0 auto;
    font-size: 2rem;
    /* background-color: var(--color4); */
    text-align: center;
    padding: 20px 70px;
    border-radius: 50px;
    /* box-shadow: 2px 9px 15px 2px var(--color8); */

    /* display: none; */
}

.footer{
    width: 100%;
    height: 60vh;
    background-image: linear-gradient(-45deg, blue, rgb(3, 3, 77));
    position: absolute;
    bottom: px;
    z-index: 9;
    position: relative;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
}
.patron_container img{
    width: 100%;
    filter: drop-shadow(-5px 5px 12px rgba(0, 0, 0, 0.555));
    position: absolute;
    top: 0px;
    left: 0;
}
.item_footer{
    width: 25%;
    height: 90%;
    /* border: 2px solid red; */
    z-index: 999999999;
    /* backdrop-filter: blur(3px); */
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 2px solid red ; */
    /* box-shadow: 3px 4px 9px 0px var(--color8);
    border-radius: 50px; */
    gap: 15px;
}
.footer .item_footer:nth-child(1) ul{
    list-style: none;
    /* border: 2px solid red; */
    height: 40%;
 
 }
 .foofter .item_footer:nth-child(1) h3{
     padding: 5px ;
 }

.footer .item_footer:nth-child(2){
    justify-content: center;
    /* background-color: red; */
}
.foot_cta{
    color: whitesmoke;
    text-decoration: none;
    opacity: .8;
    transition: all .1s ease-in ;

}
.foot_cta:hover{
    text-decoration:  underline;
    opacity: 1;

}

.icon_redes_container{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: flex-start;
    /* background-color: #484554; */
}
.icono_red{
    width: 50px;
    /* background-color: red; */
}
.cta_red{
    color: var(--color7);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}


/* <!-- end menuu end menu end menu end menu  end menu end menu end menu end menu -->
<!-- end menuu end menu end menu end menu  end menu end menu end menu end menu -->
<!-- end menuu end menu end menu end menu  end menu end menu end menu end menu -->
<!-- end menuu end menu end menu end menu  end menu end menu end menu end menu --> */

@media  screen and (min-width: 767px) and (max-width: 1262px) {

    body{
        
       
        
        /* background-color: red; */
    }
    /* section nav */

    .img_logo{
        width: 100%;
    }
    .slogan_container{
        font-size: .6rem;
        /* background-color: red; */
        
    }
    .buttons{
        width: 30%;
    }
    .listaDeOpciones{
        text-align: center;
        /* background-color: red; */

    }

    /* section nav end*/

    .header_container{
        background-repeat: no-repeat;
        background-attachment: local;

    }
    .historia_p{
        font-size: 2rem;
    }
    .opciones_header{
        width: 90%;
    }
    .main_container{
        height: 300vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        
    }
    .historia_container{
        width: 90%;
        height: 80vh;

        /* border: 2px solid red; */
    }
    .nuestra_h{
        margin: 0 auto;
    }
    .h_t{
        width: 95%;
    }
    .misionT{
        width: 95%;
    }
    .tituloGaleria{
margin: 10px auto;
    }
    .galery_container{
        width: 98%;
        /* border: 2px solid red; */
    }
    .mg_container{
        width: 98%;
        
    }
    .botonT{
        width: 40px;
    }


    
}
@media  (max-width: 1262px) and (min-width: 767px) {
    
    .img_logo{
        width: 100%;
    }
    .slogan_container{
        font-size: .6rem;
        /* background-color: red; */
        
    }
    .buttons{
        width: 35%;
    }
    .listaDeOpciones{
        text-align: center;
        /* background-color: red; */

    }
    .footer{
        height: 150vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    



    
}
@media  (max-width: 1550px) and (min-width: 1262px){

    .slogan_container{
        font-size: .9rem;
    }
    .correos_container{
        width: 40%;
    }
    .header_container{
        /* border: 3px solid red; */
        overflow: hidden;
        
    }
    .historia_p{
        font-size: 2rem;
    }



    .sections{
        /* border: 2px solid red; */
    }

    .historia_container{
        /* overflow: hidden; */
    }
    .nuestra_h{
        margin: 20px auto;
    }
    .h_t{
        width: 100%;
        margin: 0 auto;
        font-size: 18px;
    }
    .horarios_main{
        width: 50%;
        height: 70%;
        /* border: 2px solid  greenyellow; */
        position: relative;
        top: 140px;
        left: 100px;
        color: var(--color1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
        /* text-shadow: 3px 3px 5px black; */
        /* border-radius: 50%; */
    }
    .footer{
        
        display: flex;
        /* flex-direction: column; */
       
    }

}




.sections{
    height: 90vh;
    /* background-color: red; */
}



@media screen and (max-width: 767px){
   
    body{
        padding: 0;
        width: 100%;
        /* overflow: hidden; */
    }
.nav{
    /* background-color: red; */
    padding-top: 5px;
    position: fixed;
    /* width: 100%; */
}

.buttons{
    width: 70%;
}
.section_containerLH{
    width: 30%;
    border: 2px solid ridge;
}
.ham{
    width: 40px;
}
.logo_section{
    width: 110%;
    /* background-color: blue; */
}
.img_logo{
    
    /* background-color: red; */
}

.slogan_container{
    display: none;
}
.telefonos_container{
    width: 80%;
    font-size: 15px;
    right: 40px;
    

}
.correos_container{
   
    width: 90%;
    font-size: 14px;
}
.header_container{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.historia{
    width: 100%;
    height: 250px;
    /* border: 2px solid red; */
    
}
.historia_p{
    
    font-size: 1.5rem;
    text-align: center;
    /* border: 2px solid red; */
    /* background-repeat: no-repeat; */
}
.opciones_header{
    width: 100%;
    /* background-color: red; */
    gap: 10px;
    right: 0;
    bottom: -100px;
}
.cta-headerOption{
    width: 15%;
    height: 4px;
   /* border: 2px solid red; */
   font-size: .7rem;
   

}
.main_container{
    background-color: transparent;
}
.nuestra_h{
    width: 100%;
    font-size: 1.5rem;
    margin-top: 20px;
    

}
.h_t{
    width: 100%;
    height: 400vh;
}
.mision_container{
    /* background-color: red; */
    margin-top: 350px;
    margin-bottom: 0;
    /* background-color: red; */
    height: 500px;
}
.mision_titulo{
    font-size: 1.5rem;
}
.misionT{
    width: 100%;
    height: 30vh;
    font-size: 1rem;
    /* border: 2px solid red; */
}
.galery_container{
    width: 100%;
    /* border: 2px solid red; */
    margin-bottom: 10px;
}
.img_container{
    width: 100%;
    object-fit: cover;
}
.tituloGaleria{
    font-size: 1.9rem;
    margin-bottom: 1opx;
}
.botonT{
    position: absolute;
    bottom: 0;
}
.botonT:nth-child(3){
    right: 0;
}





.footer{
    margin-top: 80px;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    /* z-index: 999999999999; */

}
.item_footer{
    /* border:2px solid red; */
    width: 100%;
    
}

.icon_redes_container{
    width: 100%;
    height: 30vh;
    align-items: stretch;
}
.icon_redes_container a:nth-child(3){
    /* background-color: red; */
    
    margin-left: -35px;
}
.minimapa{
    padding: 10px;
    width: 100%;
}
.minimapa iframe{
    width: 100%;
    margin: 10px auto;
}
.minimapa h2{
    font-size: 1rem;
    margin: 5px auto;
}
.cta_aviso{
    display: none;
}


}