@font-face {
    font-family: latoregular;
    src: url("font/Lato-Regular.ttf");
}
@font-face {
    font-family: latobold;
    src: url(font/Lato-Bold.ttf);
}
@font-face {
    font-family: latoblack;
    src: url(font/Lato-Black.ttf);
}
@font-face {
    font-family: latolight;
    src: url("font/Lato-Light.ttf");
}
html{
    scroll-behavior: smooth;
}
.borde{
    border: solid;
    border-width: 3px;
    border-color: green;
}
body{
    margin: 0px;
    padding: 0%;
    width: 100%;
    height: auto;
    overflow-x: hidden;
   /* background-image: url('base.jpg');
    background-size: contain;*/
}
.fotoprinci{
    position:absolute;
    top: 30vw;
    left: 22vw;
    z-index: 99;
    width: 55%;
    height: auto;

}
.fotoprinci img{
    width: 100%;
    height: auto;
}
.menuprincipal{
    background-color: white;
    width: 100%;
    height: 5.5vw;
    position: relative;
}
.logo{
    position: absolute;
    top: .7vw;
    left: 20.2vw;
    width: 13%;
    height: auto;
}
.logo img {
    width: 100%;
    height: auto;
}
.opcionesmenu{
    position: absolute;
    top: 2.3vw;
   right: 19vw;
}
.opcionesmenu a {
    text-decoration: none;
    color: rgb(53, 113, 173);
    font-family: latoregular;
    font-size: 1vw;
    margin-left: 1vw;
    margin-right: 1vw;
}
.marderecho{
    margin-right: 2vw !important;
}
.botonizquierdo{
    position: absolute; z-index: 9999;
    top: 23.5vw;
    left: 16.5vw;
}
.botonizquierdo:hover{
    transform: scale(110%);
}
.botonderecho{
    position: absolute; z-index: 9999;
    top: 23.5vw;
    left: 81.5vw;
}
.botonderecho:hover {
    transform: scale(110%);
}

.seccionslider{
    width: 100%;
    height: 40vw;
   overflow: hidden;

    
}
.sliderlargo{
    width: 300%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    
    
}
.fotoslide{
    width: 33.5%;
    height: 40vw;
    text-align: center;
    position: relative;
}
.fotis{
    width: 100%;
    height: auto;
}
.fotoslider{
    width: 30%;
    height: auto;
    position: relative;
    top: -10vw;
    left: 20vw;
}
.logslide{
    width: 27%;
    height: auto;
   position: absolute;
    top: 4.5vw;
    left: 37vw;
}
.textsli{
    width: 40%;
    height: auto;
    position: absolute;
    top: 17vw;
    left: 30vw;
}
.img1{
    background-image: url("img/slide1.jpg");
    background-size:cover;
    background-repeat: no-repeat;
}
.img2{
    background-image: url("img/slide2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.img3{
    background-image: url("img/slide3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.firma{
    background-color: rgb(218, 218, 218);
    width: 100%;
    height: 83.7vw;
    margin-top: .5vw;
}
.sello{
    width: 60%;
    height: 26vw;
    padding-top: 7vw;
    padding-left: 9vw;
}
.sello img{
    width: auto;
    height: 100%;
}
.infofirma{
    width: 30%;
    height: auto;
    margin-left: 20%;
    margin-top: 3.7vw;
    float: left;

}
.titufirma{
    font-family: latoblack;
    font-size: 2vw;
    letter-spacing: .06vw;
    color: rgb(16, 90, 104);
}
.lineafirma{
    width: 68%;
    height: 1vw;
    border: solid;
    border-top-width: .3vw;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    margin-top: .5vw;
    border-color: rgb(203, 160, 55);
}
.textosfirmas{
    font-family: latoregular;
    font-size: 1.2vw ;
    margin-top: 2.2vw;
    line-height: 1.6vw;
    color: rgb(92, 93, 93);
    text-align: justify;
}
.encabezadofirma{
    font-family: latoregular;
    font-size: 1.4vw;
    line-height: 2vw;
    color: rgb(92, 93, 93);
    text-align: justify;
}
.botoncontacto7{
    margin-top: 3.5vw;
    position: absolute;
    z-index: 999;
    left: 43vw;
    top: 64.5vw;
}
.botonconta7{
    font-family: latobold;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    background-color: rgb(170, 124, 13) ;
    border-radius: 2vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}
.botoncontacto{
    margin-top: 3.5vw;
}
.botonconta{
    font-family: latobold;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    background-color: rgb(170, 124, 13) ;
    border-radius: 2vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.imagenfirma{
    float: left;
    width: 41.5%;
    height: auto;
    margin-top: 5.7vw;
    margin-left: 6vw;
}
.imgfirm{
    width: 100%;
    height: auto;
}
.elegirnos{
    background-color: white;
    width: 100%;
    height: 41.2vw;
}
.titulo{
    width: 100%;
    height: 4.7vw;
    font-family: latoblack;
    color: rgb(16, 90, 104);
    font-size: 2.5vw;
    text-align: center;
    padding-top: 4vw;
}
.lineabaja{
     border-top: solid;
    border-top-width: 4px;
    border-color: rgb(203, 160, 55);
    border-top-color:  rgb(203, 160, 55);
    
     width: 20%;
     height: 1vw;
     margin-left: auto;
     margin-right: auto;
}
.cuad1{
    width: 20%;
    height: 22vw;
    float: left;
}
.cuadini{
    width: 18.2%;
    height: 29vw;
    margin-right: 2.7vw;
    float: left;
}
.fototitu{
    width: 100%;
    height: auto;
    margin-top: 1.2vw;
}
.cien{
    width: 100%;
    height: auto;
}
.titucuad{
    width: 100%;
    height: 5.5vw;
    font-family: latoregular;
    font-size: 1.8vw;
    text-align: center;
    align-content: end;
    color: rgb(16, 90, 104);
}
.lineainer{
    width: 62%;
    height: 1.6vw;
    border-bottom-style: solid;
    border-bottom-width: 3px;
      border-color: rgb(203, 160, 55);
     margin-left: auto;
     margin-right: auto;
}
.contenidoiner{
    width: 95%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: latoregular;
    font-size: 1.07vw;
    padding-top: 1.3vw;
    line-height: 2vw;
    color: rgb(92, 93, 93);
    text-align: justify;
}
.banercomprometidos{
    width: 100%;
    height: 18vw;
    background-image: url("img/banner1.jpg");
    background-size: cover;
}
.textobanercomp1{
    width: 100%;
    height: auto;
    font-family: latoregular;
    font-size: 2.9vw;
    word-spacing: -.1vw;
    color: white;
    text-align: center;
    padding-top: 3.8vw;
}
.textobanercomp2{
    width: 100%;
    height: auto;
    font-family: latoregular;
    font-size: 2vw;
    color: white;
    text-align: center;
}
.botn{
    width: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
b{
    font-family: latobold;
}

.servicios{
    width: 100%;
    height: 59vw;
    background-color: white;
}
.titufirma2{
    width: 100%;
    height: 5.7vw;
    align-content: end;

    text-align: center;
    font-family: latoblack;
    font-size: 2.5vw;
    letter-spacing: .06vw;
    color: rgb(16, 90, 104);
}
.lineafirma2{
    width: 20%;
    height: 1vw;
    border: solid;
    border-top-width: .3vw;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    margin-top: 1.5vw;
    border-color: rgb(203, 160, 55);
    margin-left: auto;
    margin-right: auto;
}
.textservice{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: latoregular;
    font-size: 1.4vw;
    margin-top: .8vw;
    color: rgb(128, 149, 153);
}
.barramenu{
    width: 60%;
    height: 16vw ;
    margin-left: auto;
    margin-right: auto;
}
.botones{
    width: 100%;
    height: 10.9vw;
    margin-top: 2vw;
   
}
.botone{
    font-family: latoregular;
    font-size: 1.3vw;
    background-color:rgb(225, 225, 225);
    color: rgb(128, 149, 153);
    width: 30%;
    height: 3.5vw;
    text-align: center;
    justify-content: center;
    margin-bottom: .5vw;
    float: left;
    margin-top: 1.2vw;
    display: flex;
    align-items: center;
}
.seleccionado{
    background-color: rgb(9, 54, 63) !important;
    color: white !important;
}
.botone:hover {
    transition: "all 2s";
    transform: scale(105%);
   
    background-color: rgb(9, 54, 63);
    color: white;
}
.margder{
    margin-right: 2.9vw;
}
.ventanainfo{
    width: 60%;
    height: 25.5vw;
    background-color: rgb(225, 225, 225);
    position: relative;
    top: -3%;
    left: 20%;
}
.ladoizquierdo{
    width: 39%;
    height: 24.5vw;
    text-align: center;
    position: absolute;
    top: -1vw;
    left: -1vw;
   
}
.inde1{z-index: 2;}
.inde2{z-index: 3;}
.inde3{z-index: 4;}
.inde4{z-index: 5;}
.inde5{z-index: 6;}
.inde6{z-index: 7;}
.aparecer{
  transform: translateY(0%);
  opacity: 100%;
  transition: all 1s;
  
}
.desaparecer{
   transform: translateY(-15%);
   opacity: 0%;
   transition: all 1s;
}
.icono{
    width: 15%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
}
.icono img{width: 100%; height: auto;}
.texticono{
    font-family: latolight;
    font-size: 1.3vw;
    color: rgb(16, 90, 104);
    margin-top: .7vw;
}
.ladoderecho{
    width: 55%;
    height: 25.5vw;
    display: flex;
    align-items: center;
    position: relative;
    left: 25vw;
}

.listaservicios{
    font-family: latoregular;
    font-size: 1.3vw;
    height: auto;
    width: 90%;
    line-height: 1.5vw;
    color: rgb(92, 93, 93);
    position: absolute;
    top: 2vw;
    left: 1vw;
}
li::marker{
    color: rgb(203, 160, 55);
    font-size: 2vw;
}

.curriculum{
    width: 100%;
    height: 61vw;
    background-color: rgb(9, 54, 63);
}
.logocurriculum{
    width: 100%;
    height: 14.5vw;
    display: flex;
    align-items: center;
}
.logocurriculum img{
    width: 26.7%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.lini{
    width: 20vw;
    color: rgb(203, 160, 55);
    height: 3px;
    background-color: rgb(203, 160, 55);
    
}
.titucurri{
    font-family: latoblack;
    font-size: 2.5vw;
    width: 100%;
    height: 3.8vw;
    text-align: center;
    color: white;
    margin-top: .7vw;
}
.textcurri{
    font-family: latoregular;
    font-size: 1.07vw;
    color: white;
    width: 100%;
    height: auto;
    text-align: center;
}
.fotoscurri{
    width: 60%;
    height: 31vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.7vw;
}
.fots{
    width: 28%;
    height: auto;
    text-align: center;
    float: left;
}
.fots img{width: 100%; height: auto;}
.botonconta2{
    font-family: latobold;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    background-color: rgb(170, 124, 13) ;
    border-radius: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    position:relative;
    top: 2.3vw;
}
.marg10{
    margin-left: 3vw;
}
.veinte{
    width: 100%;
    height: 19vw;
    background-image: url("img/fondoamarillo.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.botonconta3{
    font-family: latobold;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    background-color: rgb(9, 54, 63) ;
    border-radius: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}
.line1{
    width: 100%;
    height: auto;
    font-family: latolight;
    font-size: 3vw;
    text-align: center;
    color: white;
    padding-top: 2.7vw;
}
.line2{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: latoregular;
    font-size: 1.47vw;
    color: white;
    margin-top: .3vw;
}
.dondeboton{
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 3vw;
}
.clientes{
    width: 100%;
    height: 17.3vw;
    background-color: white;
}
.titucliente{
    width: 100%;
    height: 6vw;
    text-align: center;
    font-family: latolight;
    font-size: 2.5vw;
    display: flex;
    align-items: end;
    justify-content: center;
    color: rgb(0, 101, 120);
}
.linea2{
    width: 20vw;
    color: rgb(203, 160, 55);
    height: 5px;
    background-color: rgb(203, 160, 55);
    
}
.marcas{
    width: 94%;
    height: auto;
    position: relative;
    left: 12.5%;
    top: 2vw;
    overflow: hidden;
}
.grup{
    width: 282%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    
}
.grupos{
   width: 33.3%;
    height: auto;
}
.grupos2{
   width: 33.3%;
    height: auto;
}
.grupos3{
    width: 33.3%;
    height: auto;
}
.imgmarca{
    width: 85%;
    height: auto;
}

.imga{
    width: 13%;
    height: auto;
    position: absolute;
    top: 3.6vw;
    
}
.iz1{left: 12.2vw;}
.iz2{left: 21.5vw; width: 21%;top: 2.3vw;}
.iz3{left: 36.2vw; width: 14.6%; top: 4vw;}
.iz4{left: 48.9vw; width: 5.5%;top: 2.9vw}
.iz5{left: 56vw; width: 9%;}
.iz6{left: 64.5vw; width: 12%;top: 2.2vw;}
.iz7{left: 74.9vw; width: 16%; top: 4.3vw;}
.clientesmovil{
    display: none;
}
.contactoform{
    width: 100%;
    height: 49vw;
}
.contactoform2{
    width: 100%;
    height: 49vw;
    background-color: white;
    margin-top: -.3vw;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}
.linecontac{
    width: 29.2vw;
    color: rgb(203, 160, 55);
    height: 16px;
    background-color: rgb(203, 160, 55); 
    border: none;
}
.ladoizq{
    width: 53.6%;
    height: 47vw;
    float: left;
}
.mapa{
    width: 100%;
    height: 16.7vw;
}
.formadecontacto{
    width: 74.5%;
    height: 30vw;
    font-family: latoregular;
    font-size: .5vw;
    margin-left: 25%;
    color: rgba(0, 101, 120, 0.5) ;
}
.cajauno{
    width: 48%;
    height: 2vw;
    border-bottom-style: solid;
    position: relative;
    top: 3.5vw;
    float: left;
    border-bottom-width: 4px;
    border-color:rgba(0, 101, 120, 0.5) ;
}
.nameform{
    float: left;
}
.campo{
    width: 100%;
    height: 2vw;
    font-family: latobold;
    font-size: .9vw;
    color: rgba(0, 101, 120, 0.5) ;;
    border: none;
}
.cajados{
    width: 48%;
    height: 2vw;
    border-bottom-style: solid;
    position: relative;
    top: 6.5vw;
    float: left;
    border-bottom-width: 4px;
    border-color:rgba(0, 101, 120, 0.5) ;
}
.cajatres{
    width: 100%;
    height: 6.5vw;
    border-bottom-style: solid;
    position: relative;
    top: 10.5vw;
    float: left;
    border-bottom-width: 2px;
    border-color:rgba(0, 101, 120, 0.5) ;
}
.botonconta4{
    font-family: latobold;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    background-color: rgb(0, 101, 120) ;
    border-color: rgb(0, 101, 120) ;
    border-radius: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    position: relative;
    top: 13vw;
    left: 0px;
}
.areamensaje{
    width: 100%;
    height: 5.5vw;
}
.ladoder{
    width: 40%;
    height: auto;
    float: left ;
    margin-left: 0vw;
}
.logocontacto{
    width: 45%;
    height: auto;
    margin-top: 1.8vw;
    margin-left: 3vw;
}
.logocontacto img{
    width: 100%;
    height: auto;
}
.titucontacto{
    font-family: latoblack;
    font-size: 2.1vw;
    color: rgb(0, 101, 120);
    margin-left: 4.1vw;
    margin-top: 2.3vw;
}
.lineacontacto{
     width: 20vw;
    color: rgb(203, 160, 55);
    height: 4px;
    background-color: rgb(203, 160, 55); 
    margin-left: 4vw;
    margin-top: .7vw;
}
.infocontacto{
    font-family: latoregular;
    font-size: 1.2vw;
    width: 50%;
    height: auto;
    color: rgb(0, 101, 120);
    margin-top: 2vw;
    margin-left: 4.5vw;
}
.footer{
    width: 100%;
    height: 16vw;
    color: white;
    background-color: rgb(0, 101, 120) ;
    padding-top: 1vw;
}
.logofot{
    padding-top: 3.7vw;
    margin-left: 20vw;
    width: 23%;
    height: auto;
    float: left;
}
.logofot img {
    width: 100%;
    height: auto;
}
.textocontacto{
    width: 20%;
    height: auto;
    float: left;
margin-left: 12.5vw;
margin-top: 1.9vw;
font-family: latoregular;
font-size: 1vw;
color: white;
}