body{
    background-color: #ffffff2d;
}
.men{
    background-color: #FFFFFF;
    position:fixed;
    width: 100%;
    height: 20%;
    margin-top: -1%;
    z-index: 9999;
    font-family: "Montserrat", sans-serif;
}
.menu{
    background-color: #FFFFFF;
    position: fixed;
    z-index: 9999;
    font-family: "Montserrat", sans-serif;
 }
.hom{
    position:fixed;
    margin-top: 3%;
    margin-left:  23%;
    background-color: #FFFFFF;
}
.rep{
    position:fixed;
    margin-top: 1%;
    margin-left: 57.9%;
    background-color:#FFFFFF;
}
.bq{
    position:fixed;
    margin-top: 2.1%;
    margin-left: 70%;
    background-color: #FFFFFF;
}
.bb{
    position:fixed;
    margin-top: 2.1%;
    margin-left: 82%;
    background-color: #FFFFFF;
}
.marks{
    background-color: #FFFFFF;
    height: 200px;
}
.exu{
    margin-left: -77%;
}
.tbc{
    margin-top: -7.5%;
    margin-left: -37%;
}
.com{
    margin-top: -8%;
    margin-left: 0%;
}
.gen{
    margin-left: 36%;
    margin-top: -7.5%;
}
.unit{
    margin-left: 75%;
    margin-top: -8%;
}
.negr{
    background-color: #004AAD;
}
.checkbtn{
    margin-top: 2%;
    position: absolute;
    display: none;
    cursor: pointer;
    z-index: 9999;
    border-radius: none;
}
#check{
    display: none;
}
.catalogo a{
    color: #010103;
}
.catalogo a:hover{
    color: #004AAD;
}
.catalogo{
    color: #010103;
    padding: 0.625em 1.25em;
    border-radius:  0.25em;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #FFFFFF;
    border: none;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
}
.catalogo:hover{
    background-color: #FFFFFF;
}
.catalog{
    position:fixed;
    margin-top: 2.2%;
    margin-left: 30%;
    font-family: "Montserrat", sans-serif;
}
.catalog .catalogo a{
    font-size: 15px;
}
.divw{
    margin-left: -78%;
    margin-top: 4%;
}
.divi{
    margin-left: -47%;
    margin-top: -12.6%;
    
}
.divf{
    margin-left: -15%;
    margin-top: -12.6%;
    
}
.divu{
    margin-left: 15%;
    margin-top: -12.6%;
    
}
.divt{
    cursor: pointer;
    margin-left: 46%;
    margin-top: -12.9%;
    
}
.divm{
    margin-left: 78%;
    margin-top: -12.6%;
    
}
.contact{
    position:fixed;
    margin-top: 3%;
    margin-left:38%;
    background-color:#FFFFFF;
}
.to{
    position:fixed;
    margin-top: 1%;
    margin-left: 46%;
}
#botton{
    color: #010103;
    padding: 10px 20px;
    border-radius:  4px;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#botton:hover{
    color: #004AAD;
}
#imgh{
    overflow: hidden;
}
#imh{
    transition: 0.5s;
    object-fit: cover;
}
#imh:hover{
    transform: scale(1.2);
}
#zoom{
    transition: 0.5s;
    object-fit: cover;
}
#zoom:hover{
    transform: scale(1.2);
}
#mapa{
    width: 95%; /*ancho*/
    height: auto; /*alto*/
    overflow: hidden;
    padding: 20px;   
}
.contw{
    position: fixed;
    z-index: 999;
    border-radius: 40%;
    bottom: 1.25em;
    right: 0.525em;
    padding: 0.525em;
    transition: ease 0.3s;
}

.contw:hover{
    transform: scale(1.1);
    transition: 0.3s;
}

.botonw{
    width: 4.125em;
    transition: ease 1s;
}
input{
    border-radius:  4px;
    padding: 10px 20px;
}
.enviar{
    color: black;
    font-family: "Quicksand", sans-serif;
    background-color: rgb(3, 136, 136);
}
.enviar:hover{
    box-shadow: inset 10px 0 0 0 rgb(3, 4, 54);
    background-color:#BE1E30 ;
}
.p{
    color: #FFFFFF;
}
#infow{
    transition: 0.5s;
    object-fit: cover;
}
#infow:hover{
    transform: scale(1.2);
}
#infom{
    transition: 0.5s;
    object-fit: cover;
}
#infom:hover{
    transform: scale(1.2);
}
#infot{
    transition: 0.5s;
    object-fit: cover;
}
#infot:hover{
    transform: scale(1.2);
}
#infou{
    transition: 0.5s;
    object-fit: cover;
}
#infou:hover{
    transform: scale(1.2);
}
#cont{
    text-align: right;
    margin-right: 60%;
}
.colorfond{
    background: #01010359;
}
.contitembq{
    width: 100%;
    height: auto;
    margin: 50px auto 0;
    overflow: hidden;
}
.contitembq ul{
    display: flex;
    padding: 0;
    width: 300%;
    animation: slide 20s infinite alternate ease-in-out;
}
.contitembq li{
    list-style: none; 
    width: 100%;
    position: flex;
}
.contitembq img{
    width: 100%;
    display: block;
}
.imagen-contenedor {
    position: relative;
}

.texto2 {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: rgba(255, 255, 255, 0.575);
    padding: 24px; 
     
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    border-radius: 10px;
}

.texto2:hover{
    opacity: 1;
}
.texto2 h2{
    font-family: "Montserrat", sans-serif;
    font-size: 50px;
    margin-bottom: 45px;
    color:  #004AAD;
}
.texto2 p{
    font-family: "Montserrat", sans-serif;
    color:  #004AAD;
}
.contenedor{
    width: 100%;
}
.contenedor figure{
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 88%;
    border-radius: 15px;
}
.contenedor figure video{
    border-radius: 15px;
    width: 100%;
    height: 100%;
    transition: all 500ms ease-out;
}
.contenedor figure .capa{
    position: absolute;
    top: 0;
    width: 100%;
    height: 99.5%;
    background-color: #01010359;
    transition: all 500ms ease-out;
    opacity: 0;
    visibility: hidden;
}
.contenedor figure:hover > .capa{
    opacity: 1;
    visibility: visible;
}
.contenedor figure:hover > .capa button{
    margin-top: 345px;
    margin-bottom: 67px;
}

.video:hover{
    background-color: #01010359;
}
.infor{
    padding: 20px 30px;
    border-radius:  12px;
    background-color: #004AAD;
}
a{
    color: #FFFFFF;
    text-decoration: none;
}
p{
    color: #FFFFFF;
}
button{
    border: none;
    border-radius: 10px;
    padding: 38px 28px;
    font-size: 15px;
}
button:hover{
    background-color: #ffffff7e;
}
.link:hover{
    color: #010103;
}
.link{
    font-size: 20px;
    font-family: "Quicksand", sans-serif;
}
.link2{
    display: none;
}
#watsr{
    cursor: pointer;
}
#wb{
    cursor: pointer;
}
#ubic{
    cursor: pointer;
}
#map{
    cursor: pointer;
}
#fb{
    cursor: pointer;
}
#facer{
    cursor: pointer;
}
#ib{
    cursor: pointer;
}
#igr{
    cursor: pointer;
}
#bottonh{
    color: #010103;
    padding: 0.625em 1.25em;
    border-radius:  0.25em;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#bottonh:hover{
    color: #004AAD;
}
.hr{
    width: 100%;
    height: 1px;
    background: #004AAD;
}
#div{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px auto;
    padding: 30px;
    font-size: 14px;
    width: 100%;
    max-width:700px;
    box-sizing: border-box;
    border-radius: 10px;
}
label{
    font-size: 20px;
    padding: 10px 0px;
    color: #010103;
    text-shadow: 1px 1px 1px grey;
}
#sel{
    display: block;
    font-size: 24px;
    padding: 13px 0px;
    color: #010103;
    text-shadow: 1px 1px 1px grey;
}
input{
    padding: 10px 20px;
    border-radius:  4px;
}
select{
    padding: 10px 20px;
    border-radius:  4px;
}
textarea{
    padding: 49px 63px;
    border-radius:  5px;
}
input[type="submit"]{
    padding: 18px;
    color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid rgb(82, 143, 143);
}
.coment{
    margin-left: 52%;
    margin-top: -54%;
    height: 60%;

}
.formu{
    margin-left: -37%;
    margin-top: -4%;
}
.env{
    margin-top: 5%;
    cursor: pointer;
}
.celeste{
    background-color: #004AAD;
    border-radius: 15px;
    width: 88.3%;
}
.celeste .tex{
    color: #FFFFFF;
}
.tex{
    font-size: 50px;
    color: #004AAD;
    font-family: "Montserrat", sans-serif;
    text-shadow: #010103 1px 1px;
}
.black:hover{
    background-color: #01010359;
}.black p{
    color: #010103;
}
.black h3{
    color: #010103;
}
.marcs{
    margin-top: -3%;
}
.black{
    margin-top: -1.4%;
}
.fondobot2 .infor2{
    display: none;
 }
@media screen and (max-width: 800px) { 
   a .link2{
        display:flex;
        padding: 20px 20px;
        width: 15%;
        height: 7%;
        color: #FFFFFF;
        border-radius:  15px;
        background-color: #004AAD;
        font-size: 14px;
        margin-top: 28%;
        margin-left: 7%;
        font-family: "Quicksand", sans-serif;
        opacity: 1;
    }
a .link2:hover{
    opacity: 0;
}
    .link{
        display: none;
    }
    body{
        padding: 473px 0px 0;
    }
    #tablaPricipal{
        margin-top: 4%;
        margin-left: 20%;
        width: 80px;
    }
    #imagenLogo{
        width: 230px;
        margin-left: 4.5%;
        margin-top: 1%;
    }
    .checkbtn{
        display: block;
        margin-top: 25px;
        margin-left: 10px;
    }
    #check:checked ~ .menucel{
        left: 0px;
    }
    .men{
        height: 0%;
        width: 0%;
        margin-top: -129%;
    }
    .menu{
        margin-top: -4%;
        margin-left: 0%;
        width: 100%;
        height: 21%;
    }
    .menucel{
        width: 260px;
        height: 100vh;
        display: flex;
        position:fixed;
        top: 84px;
        left: -100%;
        z-index: 9999;
        background-color: #FFFFFF;
        box-shadow: 10px 0 20px -25px #BE1E30;
        transition: all .5s;
    }
    .hom{
        margin-top: 4%;
        margin-left: 17%;
        width: 0px;
    }
    .catalog{
        margin-top: 14%;
        margin-left: 17%;
        width: 0px;
    }
    .contact{
        margin-top: 26%;
        margin-left: 16.5%;
        width: 0px;
    }
    .to{
        margin-top: 29%;
        margin-left: 16.5%;
        width: 0px;
    }
    .rep{
        margin-top: 50%;
        margin-left: 19.5%;
        width: 0px;
    }
    #zoom:hover{
        transform: none;
    }
    .bq{
        margin-top: 67%;
        margin-left: 19%;
        width: 0px;
    }
    .bb{
        margin-top: 80.6%;
        margin-left: 19%;
        width: 0px;
    }
    .marks{
        height: 600px;
    }
    .exu{
        margin-left: 0%;
        margin-top: 1%;
    }
    .tbc{
        margin-top: 3%;
        margin-left: 0%;
    }
    .com{
        margin-top: 2%;
        margin-left: 0%;
    }
    .gen{
        margin-left:    0%;
        margin-top: 2%;
    }
    .unit{
        margin-left: 0%;
        margin-top: 2%;
    }
    .contitembq{
        margin-top: -94%;
    }
    .contitembq img{
        width: 361px;
        height: 200px;
    }
    .contitembq .texto2{
        width: 150%;
        background-color:#00000000;
    }
    .contitembq .texto2 h2{
        margin-left: 100%;
        
    }
    .divw{
        margin-left: 0%;
    }
    .divf{
        margin-top: 0%;
        margin-left: 0.5%;
    }
    .divi{
        margin-left: 0%;
        margin-top: 0%;
    }
    .divu{
        margin-left: 0%;
        margin-top: 0%;
    }
    .divt{
        margin-left: 0%;
        margin-top: 0%;

    }
    .divm{
        margin-left:0%;
        margin-top: 0%;

    }
    .formu{
        margin-left: -8%;
        margin-top: -4%;
    }
    .coment{
        margin-left: -9%;
        margin-top: 8%;
        height: 60%;
    }
    .env{
        margin-left: -6% ;
    }
    .marcimg{
        height: 130px;
        width: 107%;
        margin-left: -14%;
    }
    .fondobot .infor{
        display: none;
    }
    .celeste{
        height: 1150px;
    }
    .black{
        margin-top: 12%;
        background-color:#fdfdfd00;
    }
    .black:hover{
        background-color: #fdfdfd00;
    }
    .contenedor{
        width: 390px;
        margin-left: -9.5%;
    }

    .texto2{
        display: none;
    }
    .llamar {
        width: 100%;
        padding: -0%;
    }
    .llamar h3{
        font-size: 21px;
    }
    .llamar a{
        
        font-size: 18px;
    }
    .black{
        margin-top: -4.5%;
        border-radius: 15px;
    }
    
    
}
@keyframes efecto{
    0%{
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }
    100%{
        box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
    }
}
@keyframes slide {
    0%{margin-left: 0%;}
    20%{margin-left: 0%;}

    25%{margin-left: -100%;}
    45%{margin-left: -100%;}

    50%{margin-left: -200%;}
    100%{margin-left: -200%;} 
}