:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario:#ffc107;
    --secundario: #0097A7;
    --gris: #757575;
    --grisclaro: #DFE9F3;


}
/*GLOBALES*/
html{
  font-size: 62.5%;
  box-sizing: border-box;
  /*scroll-snap-type: y mandatory; *//*scroll de arriba hacia abajo*/
}
/*
Scroll Snap
.servicios, 
.navegacion-principal,
.formulario{

  scroll-snap-align: center;
  scroll-snap-stop: always;
}
*/

*, *:before, *:after {
  box-sizing: inherit;
}


body {
  padding: 0px;
  font-size: 16px;       /*  1rem = 10px*/
  font-family: 'Krub', sans-serif;
  /*con linear-gradient vamos cambiando el color de la pagina a mas claro*/
  /*En este caso, "to top", cambia de color de arriba hacia abajo mas claro  */
   background-image: linear-gradient(to top, var(--gris) 0%, var(--grisclaro) 100%);
  }


  .icon-paint-format:before {
    content: "\e90c";
  }

  .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


  @media (min-width: 992px){
  .container {
      max-width: 960px;
  }

}


  @media (min-width: 768px){
  .container {
      max-width: 720px;
  }}

  @media (min-width: 576px){
  .container {
      max-width: 540px;
  }}
  
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}



/*TITULO con EFECTO*/



/* Clientes */
  .tw-client-area {
    border-top: 1px solid rgb(66, 65, 65);
    padding-top: 100px;
  }
  
  /* Home Variations */
  /* Home variation 1 */
  .tw-top-bar {
    padding: 7px 0;
    border-bottom: 1px solid #F2F2F2;
    margin-top: 0rem;
  }
  

  .bg-green {
    background-color: #888484;
  }


  .top-social-links a {
    padding-left: 30px;
  }
  .top-social-links a i {
    display: inline-block;
    font-size: 19px;
    color: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .top-social-links a i:hover {
    color: #E71D73;
  }
  .top-social-links span {
    color: #fff;
    font-size: 13px;
    
  }
  
  .top-contact-info span {
    font-size: 15px;
    color: #fff;
    padding-right: 15px;
  }
  /*la Hora*/
 

  .top-contact-info span i {
    color: #fff;
    margin-right: 15px;
  }
  
  .tw-top-bar-angle .top-contact-info span {

    color: #fff;
    padding-left: 0;
    padding-right: 40px;
  }

  
  
  /* Inline Offcanvas menu */
  .inline-menu {
    position: relative;
    top: 0px;
  }
  .inline-menu span {
    background: #000;
    width: 10px;
  }
  
  .tw-offcanvas-menu i {
    color: #2f2c2c;
  }
  .tw-offcanvas-menu i:hover {
    cursor: pointer;
  }
  
  .inline-menu span:nth-child(2) {
    width: 20px;
    margin: 3px auto;
  }
  
  @media (max-width: 480px) {
      
    .top-contact-info span {
      font-size: 12px;
      color: #fff;
      padding-right: 5px;
    }

  }


   .container gallery-container .rss {
    margin: 0;
    padding: 0;
    list-style-type: none;
 }
 .rss li {
    padding: 0 0 5px 15px;
 }



  



/*
.contenedor{

  /*1200px*/
/*
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;  
Para evitar poner muchos margin, podemos hacer lo siguiente

max-width: 120rem;
margin: 0 auto 0 auto;
}
*/
.boton {

 background-color: var(--secundario);
 color: var(--blanco);
 padding: 1rem 3rem; /*margen desde adentro del boton hasta el borde*/
 margin-top: 1rem;  
 font-size: 2rem;   /*tamaño de letra*/
 text-decoration: none; /*saca el subrayado de los link*/
 text-transform: uppercase; /*pasa a mayusculas*/
 font-weight: bold;  /*negrita*/
 border-radius: .5rem;  /*redondear las puntas del boton*/
 width: 90%;
 text-align: center;
 border:none;
}

@media (min-width: 480px) {
  .boton {
      width:auto;
  }
}

.boton:hover{
  cursor: pointer;
  text-decoration: none;
}

.sombra{
  -webkit-box-shadow: 0px 5px 15px 0px rgba(165, 160, 160, 0.48);
  -moz-box-shadow: 0px 5px 15px 0px rgba(151, 148, 148, 0.48);
  box-shadow: 0px 5px 15px 0px rgba(170, 169, 169, 0.48);
   background-color: var(--blanco);
   padding: 2rem;
   border-radius: 1rem;
}
/*Tipografias*/
h1{
  font-size: 3.8rem;
  }
h2{
  font-size: 2.8rem;
}   
h3{

  font-size: 1.8rem;
} 

h1,h2,h3 {
  text-align: center;
}

/*Titulos*/


.logo {
  
  display: flex;
  width:100%;
  height: 100px;
  background: url(../img/logo.png)no-repeat right;
  float: left;
 margin-top: -90px; 
}


 
 @media (max-width: 480px) {
  .logo  {
    
    display: flex;         /*revisar*/
    width:100px;
    height: 100px;
    margin-top: -10px;
        
 }   }

 

/*GALERIA DE IMAGENES*/

.container.gallery-container {
  background-color: rgb(179, 174, 174);
  color: #01040e;
  min-height: 100vh;
  border-radius: 20px;
  box-shadow: 0 8px 15px rgba(36, 2, 90, 0.06);
}

.gallery-container h1 {
  text-align: center;
  margin-top: 70px;
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
}

.gallery-container p.page-description {
  text-align: center;
  max-width: 800px;
  margin: 25px auto;
  color: rgb(97, 94, 94);
  font-size: 18px;
}

.tz-gallery {
  padding: 40px;
}

.tz-gallery .lightbox img {
  width: 100%;
  margin-bottom: 30px;
  transition: 0.2s ease-in-out;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}


.tz-gallery .lightbox img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.tz-gallery img {
  border-radius: 4px;
}

.baguetteBox-button {
  background-color: transparent !important;
}


@media(min-width: 768px) {
  body {
      padding: 2px;
  }

  .container.gallery-container {
      border-radius: 0;
  }
}

/*----------------------------------------------------------*/



/*menu resposive*/

*{margin:0;padding:0}
i{margin-right:10px}

.navbar-logo{
  margin-bottom: 8rem;
  padding: 5px;
  color:#fff
}
/*
img:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px #e97435;
-webkit-box-shadow: 0px 0px 15px 15px #d6df2b;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}       
*/



/*responsive el logo*/

@media (max-width: 480px) {
    
  img:hover{
  border-radius:50%;
  -webkit-border-radius:50%;
  box-shadow: 0px 0px 15px 15px #f3f3f0;
  -webkit-box-shadow: 0px 0px 15px 15px #f7f2f0;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  }
}


.navbar-mainbg{
  background-color:#8a8a8f;
  
  justify-content: space-around;

}

#navbarSupportedContent{
  overflow:hidden;
  position:relative;
}

#navbarSupportedContent ul{
  padding:0;
  margin:0
}

#navbarSupportedContent ul li a i{
  margin-right:10px
}

#navbarSupportedContent li{
  list-style-type:none;
  float:left
}
/*color por defecto del menu*/
#navbarSupportedContent ul li a{
  color:#111111;
  font-weight: bold;
  text-decoration:none;
  font-size:15px;
  display:block;
  padding:20px;
  transition-duration:.6s;
  transition-timing-function:cubic-bezier(0.68,-.55,.265,1.55);position:relative
}




/*Cuando el efecto pasa sobre el menu*/
#navbarSupportedContent>ul>li.active>a{
  color:#0097A7;
    background-color:transparent;
  transition:all .7s
}

#navbarSupportedContent a:not(:only-child):after{
  content:"\f105";
  position:absolute;
  right:20px;
  top:10px;
  font-size:14px;
  font-family:"Font Awesome 5 Free";
  display:inline-block;
  padding-right:3px;
  vertical-align:middle;
  font-weight:900;
  transition:.5s;
}

#navbarSupportedContent .active>a:not(:only-child):after{
  transform:rotate(90deg)
}


.hori-selector{
  display:flex;
  position: absolute;
  height:20%;
  top:0;
  left:0;
  transition-duration:.6s;
  transition-timing-function:cubic-bezier(0.68,-.55,.265,1.55);
  background-color:rgb(17, 16, 16);
  border-radius: 50px;
  margin-top:5px
  
}


.nav-item:hover{
  background: rgb(48, 46, 46);
  border-radius: 50px;
  margin-top:5px;
  background-color:#88bec4 ;
  color:#0097A7;

}


   

/*
.hori-selector .left,.hori-selector .right{
  position:absolute;
  width:25px;
  height:25px;
  background-color:rgb(107, 21, 21);
  bottom:10px
}
*/
.hori-selector .right{
  right:-25px
}

.hori-selector .left{
  left:-25px
}
/*
.hori-selector .left:before,.hori-selector .right:before{
  content:'';
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:#9b691e
}*/

.hori-selector .right:before{
  bottom:0;
  right:-25px
}

.hori-selector .left:before{
  bottom:0;
  left:-25px
}

@media (max-width:991px){
  
  #navbarSupportedContent ul li a{
    padding:12px 30px
  }

.hori-selector{
  margin-top:0;
  margin-left:10px;
  border-radius:50px 

}

.hori-selector .left,.hori-selector .right{
  right:10px;

}

.hori-selector .left{
  top:-25px;
  left:auto;
}

.hori-selector .right{
  bottom:-25px;
}

.hori-selector .left:before{
  left:-25px;
  top:-25px;
}

.hori-selector .right:before{
  bottom:-25px;
  left:-25px;
}
}


@media (max-width: 480px  ) {
  .navbar-toggler  {

      width: 40px;
      height: 40px;
  }
}





/*Utilidades*/

.w-sm-100{
    width: 100%;
}
@media (min-width: 768px) {
  .w-sm-100{
      width:auto;
  }
}

.flex{

  display: flex;

}
.alinear-derecha {

 justify-content: flex-end;
}

/*Navegacion Principal*/

.nav-bg{
  background-color: var(--oscuro);
  margin-top: 1rem;

}
.navegacion-principal {

  display: flex;
  flex-direction: column;
  
}



@media (min-width: 480px) {
  .navegacion-principal {
      flex-direction: row;
      justify-content: space-between;
      
  }
}





.navegacion-principal a{
 
  color: var(--blanco);
  text-decoration: none;
  font-size: 2rem;
  font-weight: 700;
  padding: 2rem;
  

}


.navegacion-principal a:hover {  /*hover le da efecto al pasar sobre los menus*/

  background-color: var(--primario) ;
  color: var(--oscuro);
  text-decoration: none;

}

.hero {

  background-image: url(../img/banner1.jpg);
  background-repeat: no-repeat;
  background-size: cover;/*toma el acho total, y agranda la imagen*/
  height: 350px;
  position: relative;
  margin-bottom: 5rem;
  animation: movimiento 20s infinite linear alternate;  


}







.contenido-hero {

  position: absolute;
  background-color: rgba(0,0,0, .7); /*le da transparencia a la imagen: va del 0 al 10*/
  background-color:rgb(0 0 0 / 70%);
  width:100%;
  height:100%;
/*El codigo que sigue*/
  display:flex;
  flex-direction: column;   
  align-items: center; 
  justify-content: center;
  padding-bottom: 5rem;
 /*Hasta aqui, lo que hace es centrar todo justo al medio de la pagina*/
 animation: movimiento 20s infinite linear alternate;  /*Realiza el efecto del movimiento de la imagen*/

}


@keyframes movimiento{
  from{
      background-position: bottom left;
  }to{
      background-position: top right;
  }
}


.contenido-hero h2,
.contenido-hero p {

color: var(--blanco);
font-size: 1rem;

}
.contenido-hero h2{

  font-size: 2rem;
}
@media (min-width: 480px) {
  .contenido-hero h2  {
font-size: 3rem;
  }
}

@media (min-width: 480px) {
  .contenido-hero p  {
font-size: 2rem;
  }
}

.contenido-hero .ubicacion {

  display: flex;
  align-items: flex-end;
}

@media (max-width: 480px) {
  .contenido-hero .ubicacion  {
    width: 95px;
    height: 95px;

  }
}

@media (max-width: 480px) {
  .contenido-hero p  {
    font-size: 1.5rem;

  }
}







/*Cargamos las tres imagenes de portada, y le damos el efecto de zoom para que aumente el tamañano cada vez que pasamos el cursor por encima*/
.imagen1 {

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmZX8cHGT4tgVnK4BWm1uy3S3n3NPs7_FVyw&s);
  background-repeat: no-repeat;
  background-size: cover;/*toma el acho total, y agranda la imagen*/
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 80%;
  margin-bottom: 1rem;
  -webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */

}



.imagen2 {

  background-image: url(https://i.ibb.co/v3SJZjk/eletricidad.jpg);
  background-repeat: no-repeat;
  background-size: cover;/*toma el acho total, y agranda la imagen*/
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 80%;
  margin-bottom: 1rem;
  -webkit-transition:all .9s ease; /* Safari y Chrome */
  -moz-transition:all .9s ease; /* Firefox */
  -o-transition:all .9s ease; /* IE 9 */
  -ms-transition:all .9s ease; /* Opera */
}


.imagen3 {

  background-image: url(https://i.ibb.co/NKPP72v/refacciones.jpg);
  background-repeat: no-repeat;
  background-size: cover;/*toma el acho total, y agranda la imagen*/
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 80%;
  margin-bottom: 1rem;
  -webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */
}
.transition {
  -webkit-transform: scale(1.8); 
  -moz-transform: scale(1.8);
  -o-transform: scale(1.8);
  transform: scale(1.8);
}



/*Servicios*/
@media (min-width: 768px) {
  .servicios{

      display:grid;
      
      grid-template-columns: 33.3% 33.3% 33.3%;
      /*Coloque 33.3% porque el total de la tabla es 100% y lo tengo que dividir en 3 columnas*/
      /*Otra forma seria, poner en lugar de 33.3%. Colocarle 1fr 1fr 1fr, donde fr significa fraccion (1fr=33.3%)*/
     
      /*Otra forma mas facil:  grid-template-columns: repeat(3, 1fr); el numero 3 significa las columnas;*/
     
     
      column-gap: 1rem;  /*separacion entre columna*/
  }
}

.servicio {

  display:flex;
  flex-direction: column;
  align-items: center;
}
.servicios h3 {

  color: var(--secundario);
  
}

.servicios p{

   line-height: 2;
   text-align: left;
   font-size: 1.5rem;
   
}

.servicios .iconos {

  height: 15rem;
  width: 15rem;
  background-color: var(--primario);
  border-radius: 50%; /*circulo amarillo*/
  display: flex;
  flex-direction: row;
  justify-content: center; /*alinea horizontalmente*/
  align-items: center;/*alinea verticalmente*/

}
/*contacto*/
.formulario{

background-color: var(--gris);
width: min(60rem, 100%);  /*optimizar el valor mas pequeño*/
margin: 0 auto; /*centra el formulario, se utiliza margin auto porque el elemento padre NO existe ningun display flex*/
padding: 2rem; /*expande un poco mas el borde gris de los campos*/
border-radius: 1rem; /*redondea las puntas del cuadrado*/


}
.formulario fieldset {

border: none;    /*elimina los bordes del formualrio*/
}


.formulario legend {

  text-align: center;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 700;  /*negrita*/
  margin-bottom: 2rem;  /*separa el contactenos llenando....de los campos.*/
  color:var(--primario);
}

@media (min-width: 768px) {
  .contenedor-campos{
      display:grid;
      grid-template-columns: 50% 50%; /*divide en dos columnas el formulario*/
      grid-template-rows: auto auto 20rem;   /*para que combine la fila 1 con la 3*/ 
      column-gap: 1rem; /*Separacion de columnas*/
  }
}
.campo:nth-child(3),  /*nth-child sirve para cuando tenemos varios clases con el mimso nombre, decimos cuales de las clases vamos a editar*/
.campo:nth-child(4) {  /*En este caso vamos a modificar la class="campo" 3 y la 4*/

  grid-column: 1 / 3  ;   /*Combino las filas que dice correo(fila 3) y mensajes(fila4)*/
}



.campo {

   margin-bottom: 1rem;  /*Separacion hacia abajo ente los campos para llenar datos*/

}

.campo label{

  color: var(--blanco);
  font-weight: bold; /*negrita*/
  margin-bottom: .5rem;
  display: block;
}

.input-text {

  width: 100%;
  border: none;
  padding: 1.5rem;
  border-radius: 1rem;
}





/*FOOTER*/

.footer-dark {
  padding:50px 0;
  color:#f0f9ff;
  background-color:var(--gris);
  margin-top: 1rem;
  position:relative;
   width: 100%;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:1px;
  font-weight:bold;
  font-size:14px;
  text-align: center;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
  text-align: center;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:60px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
  font-size: 1.5rem;
  }

  .mapa {
    float: center;
    border-radius: 5%;
  }


  .mapa{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}

.mapa iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}




  .footer-dark .mapa {

padding-left: 8rem;

  }

  @media (max-width:991px) {
    .footer-dark .mapa {
      padding-left: 2rem;
  
    }
  }
  
  



.footer-dark .item.social {
  text-align:center;
  margin: 0 auto; 

}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}






.footer-dark .item.social > a {

 
  font-size:20px;
  width:36px;
  height:36px;
  line-height:38px;
  display:inline-block;
  border-radius:39%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 10px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}


.footer-dark .item.social > a:hover {
  background: rgb(48, 46, 46);
  /*border-radius: 50px;*/
  margin-top:5px;
  background-color:#1b0ba8 ;
  color:#484e4e;

}


.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}


/* Estilo para que me aparezcan correctamente los iconos del menu */

.fa-solid fa-water::before {
  content: "\f2ed";
  }
  
  .fa-solid fa-helmet-safety::before {
  content: "\f773";
  }
  
  .fa-regular fa-window-restore::before {
  content: "\f2f5";
  }