body {
    background-color: #FFF;
    color: #000;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}
p{
    color:#000;
}
#header .header-nav-main.header-nav-main-light nav > ul > li > a{
    font-weight: 600;
}
#header .header-nav-main nav > ul > li > a {
    color: #000;
    font-size: 16px;
    padding: 0.5rem 0.9rem;
    font-weight: bold;
}
/** form footer **/
#contactform input,#contactform textarea{
    background: transparent;
    border: 1px solid #89c500;
    color:#FFF;
}
/** small **/
small, .small {
    font-size: 75%;
}

/** error **/
.errorSummary,.errorMessage{
    color:red
}
.index-servicios{
    width: 43%;background: #000;
}
.index-control{
    position: absolute; top: -110px;right: -20px;
    max-width: 100%;
    height: auto;

}
.img-nosotros, .img-servicios, .img-comercial{
    height: 500px;width: auto;position: absolute;right: 0;bottom: 0;
}
.titulo-nosotros, .titulo-servicios, .texto-servicios{
    width: 43%;background: #000;
}
.imagen-contacto{
    height: 600px;width: auto;position: absolute;left: -50px;bottom: 0;
}
.imagen-empleado{
    height: 400px;width: auto;position: absolute;left: 0;bottom: 0;
}
/*Titulos*/
.t-1{
    color:black;position: absolute;z-index: 2;font-size:2.2em;padding-left:35%;font-weight: bold;padding-top:10px;
  }
.t-2{
  font-size:2.1em;font-weight: bold;color:black;
}
.t-3{
  font-size:2.1em;font-weight: bold;color:white;
}
@media(min-width: 240px){
    .index-servicios, .texto-contacto, .texto-galeria{
        width: 90%;
    }
    .index-control{
        position: absolute; top: 5px;right: 0px;
        max-width: 40%;
        height: auto;
    }
     .text-promo{
        position: absolute;z-index: 2;top:40%;left:54%;background-color: black !important;font-size: 8px;padding:4px;
    }
    .img-nosotros, .img-servicios, .img-comercial, .imagen-contacto, .imagen-empleado{
        display: none;
    }
    .titulo-nosotros, .titulo-servicios, .texto-servicios{
        width: 80%;
    }
    .t-1{
      padding-left: 6%;
      font-size:1.5em;
    }
    .t-2{
      font-size:1.4em;
    }
}
@media(min-width: 360px){
     .text-promo{
        position: absolute;z-index: 2;top:40%;left:50%;background-color: #000000c9 !important;font-size: 10px;padding:4px;
    }
    .t-1 {
    padding-left: 8%;
    font-size: 1.7em;
    }
}
@media(min-width: 480px){
    .index-servicios, .titulo-nosotros, .titulo-servicios, .texto-contacto, .texto-galeria{
        width: 60%;
    }
    .texto-servicios{
        width: 80%;
    }
    .index-control{
        position: absolute;
        top: -28px;
        right: 3px;
    }
     .text-promo{
        position: absolute;z-index: 2;top:40%;left:60%;background-color: #000000c9;font-size: 10px;padding:4px;
    }
}
@media(min-width: 600px){
    .index-servicios, .titulo-nosotros, .titulo-servicios, .texto-contacto, .texto-galeria{
        width: 43%;
    }
    .texto-servicios{
        width: 60%;
    }
    .index-control{
        position: absolute;
        top: -30px;
        right: -3px;
    }
     .text-promo{
        position: absolute;z-index: 2;top:50%;left:50%;background-color: #000000c9;font-size: 18px;padding:4px;
    }

}
 @media(min-width: 768px){ 
    .index-control{ 
        position: absolute; 
        top: 8px;
        right: -3px;
    } 
    .img-nosotros, .imagen-contacto{ 
        display: block;
        height: 434px;
    } 
    .img-servicios{ 
        height:380px; display:block;
    }

    .texto-servicios{
     width: 60%;
    }
    .imagen-empleado{
        height: 269px;
        display:block;
    }

  } 

    @media(min-width: 800px){ 
    .index-control{
        position: absolute; 
        top: 8px; 
        right: -3px;
         } 
    .text-promo{ 
        position: absolute;
        z-index: 2;
        top:50%;
        left:60%;
        background-color: #000000c9;
        font-size: 18px;padding:4px;
    } 
    .texto-servicios{ 
        width: 43%;
    }
    .img-servicios{ 
        height:382px;
         }

    .img-comercial{
        height: 260px;
        display: block;
    }
}

@media(min-width: 992px){
    .img-nosotros{
        height: 500px;
    }
    .imagen-contacto{
        height:600px;
    }
    .imagen-empleado{
        height:332px;
    }
     .img-comercial{
        height: 320px;
    }
}

@media(min-width: 1024px){
    .index-control{
        position: absolute;
        top: 0px;
        right: -10px;
        max-width: 100%;
        height: 90px;
    }
     .text-promo{
        position: absolute;z-index: 2;top:50%;left:60%;background-color: #000000c9;font-size: 18px;padding:4px;
    }
     .t-1 {
      padding-left: 35%;
      font-size: 2.2em;
    }

    .t-2{
      font-size:2.1em;
    }
}
@media(min-width: 1148px){
     .text-promo{
        position: absolute;z-index: 2;top:50%;left:65%;background-color: #000000c9;font-size: 18px;padding:4px;
    }
}
@media(min-width: 1200px){
     .text-promo{
        position: absolute;z-index: 2;top:50%;left:70%;background-color: #000000c9;font-size: 18px;padding:4px;
    }
    .imagen-empleado{
        height:400px;
    }
    .img-comercial{
        height: 400px;
    }
}

@media(min-width: 1300px){
     .text-promo{
        position: absolute;z-index: 2;top:50%;left:75%;background-color: #000000c9;font-size: 18px;padding:4px;
    }
}

/*Botones whatsapp y telefono*/
 .social {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  right: 0; /* Establecemos la barra en la direccion */
  top: 400px; /* Bajamos la barra 300px de arriba a abajo */
  z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  background:#00000094;
  border-radius: 10px 0px 0px 10px;
  text-align: right;

}
 
  .social ul {
    list-style: none;
    text-align: right;
    padding:10px 4px 14px 4px;
    margin:0;
    align-items: center;

  }
 
  .social ul li a {
    display: inline-block;
    color:#fff;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
    border-radius: 10px;
  }
  .social ul li .icon-background-ws {background:#1FC045 !important;} /* Establecemos los colores de cada red social, aprovechando su class */
  .social ul li .icon-background-ws:hover {background:#16e046 !important;} 
  .social ul li .icon-background-phone {background:#4a4a4a !important;}
  .social ul li .icon-background-phone:hover {background:#7b7a7a !important;}

 
  .social ul li a:hover {
    background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
    /*padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
  }
  @media(min-width: 600px){
    .social{
      top:200px;
    }
  }
  @media(max-width:720px){
      .verboton{
        display:none !important;
        align-content: center!important;
      }
  }
  @media(min-width:720px){
    .verboton-cel{
      display:none !important;
    }
  }
    @media(min-width: 992px){
    .social{
      top:370px;
    }
  }
     .socialcel {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  bottom: -25px; /* Establecemos la barra en la direccion */
  right:10px; /* Bajamos la barra 300px de arriba a abajo */
  z-index: 1; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  background:#00000094;
  border-radius: 10px 10px 0px 0px;
  align-items: center;
  margin-bottom: 15px;
  text-align:center;
}
 
  .socialcel ul {
    list-style: none;
    padding:5px 10px;
  }
 
  .socialcel ul li a {
    display: inline-block;
    color:#fff;
    padding: 10px 15px;
    text-decoration: none;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
    border-radius: 10px;
  }
 
  .socialcel ul li .icon-background-ws-cel {background:#1FC045 !important;} /* Establecemos los colores de cada red social, aprovechando su class */
  .socialcel ul li .icon-background-ws-cel:hover {background:#16e046 !important;} 
  .socialcel ul li .icon-background-phone-cel {background:#4a4a4a !important;}
  .socialcel ul li .icon-background-phone-cel:hover {background:#545454 !important;}

 
  .socialcel ul li a:hover {
        background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
  }