@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('fonts/style.css');
*{
  margin: 0;
  padding: 0;
  border-style:none;
  box-sizing: border-box;
}
:root{

  font-size: 1vmin;

}

body{
  font-family: 'Montserrat', sans-serif;
}

main{
  width: 100%;
  margin: 0 auto;
}

header {
  background-color: #BBBBBB;
  padding: 20px 0;
  width: calc(100vw-(10px));
}

.caja{
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.siderbar{
  position: absolute;
  top:110px;
  right: 10px;
}

  .siderbar .vinculo{
    display: inline;
    margin: 0 0 0 15px;
  }

    .vinculo a{
      text-transform: uppercase;
      color: #000000;
      font-weight: bold;
      font-size: 3rem;
      text-decoration: none;
    }

.siderbar a:hover{
  color: #c78c19;
  text-decoration: underline;
}

.siderbar a:active{
  color:green;
}

footer{
  width: calc(100vw-(10px));
  text-align: center;
  background: #000000;
  padding:40px;
}

footer #logo{
  filter:invert(100%);
  height: 20vh;
}

.copyright{
  color:#FFFFFF;
  font-size: 2.5rem;
  margin:20px;
}



.principal,
.mapa,
.diferenciales{
  font-size: 3rem;
}

.principal{
  width:100%;
  margin: 0 auto;
  /* padding: 10px; */
  background: #fefefe;
}

#banner{
  width:100%;
  background-image: url(imagenes/banner.jpg);
  background-size: contain;
  height: 30vh;
}

.titulo-principal{
  margin: 0 0 1em;
  font-weight:bolder;
  text-align: center;
  font-size:6rem;
  clear:left;
  
}

  .titulo-principal::first-letter{
      font-weight: bold;
  }

.principal p{
  margin: 0 0 1em;
  color:#444;
}

.principal strong{
  font-weight: bold;
  color:#000;
}

.principal em{
  font-style: italic;
  color:#000;
}

.utencilios{
  width:calc(30% - (30px));
  float:left;
  margin:0 20px;
  
}

.utencilios:hover {
  filter: opacity(0.3);
}

.mapa{
  padding: 3em 0;
  background: linear-gradient(0deg,#555555,#fefefe);
}

.mapa p{
  margin: 0 0 2em 0; 
  text-align: center;
}

.contenido-mapa{
  width:70%;
  margin: 0 auto;
}

.diferenciales{
  background: linear-gradient(to top,#444444,#666666);
  padding: 25px;
}


.contenido-diferenciales{
  width:50%;
  margin: 0 auto;
}

.lista-diferenciales{
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  list-style-type: none;
}
.lista-diferenciales .items-diferenciales{
  list-style-position: inside;
  text-align: left;
}

.lista-diferenciales .items-diferenciales::before{
  content:"★";
}

#imagenDiferenciales{
  width:20vw;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(10px 15px 10px #000);
  border-radius: 20px;
}

.video{
  width:40%;
  margin:2em auto;
}



.productos{
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.productos .items-productos {
  display: inline-block;
  text-align: center;
  width: 30%;
  vertical-align: top;
  margin: 0 1.5%;
  /* padding: 10% 5%; */
  border: 2px solid #000000;
  border-radius: 10px;
  
}

.productos .items-productos:hover{
  border-color:#c78c19;
}

.productos .items-productos:active{
  border-color:#088c19;
}

.productos .titulo-productos{
  font-size: 3rem;
  font-weight: bold;
}

.productos .items-productos:hover .titulo-productos{
  font-size: 3.2rem;
}

.productos img{
  width: 90%;
}

.producto-descripcion{
  font-size: 2rem;
}

.producto-precio{
  font-size: 2.5rem;
  font-weight: bold;
  margin-top:10px;
}






#forma-contacto{
  width: 100%;
  background: #fefefe;
}

.datos-contacto,
.medio-contacto,
.horario,
.novedades{
  display: block;
  width: 50%;
  margin: 10px auto;
  font-size: 4rem;
  font-weight: bold;
}


.datos-contacto input, .datos-contacto textarea{
  font-size: 3rem;
  font-weight: normal;
  border: 1px solid #BBBBBB77;
  width: 100%;
  margin: 10px auto;
}

.tipo-medio{
  font-size: 3rem;
  font-weight: normal;
  width: 30%;
}

.medio-contacto input[type="radio"]{
  margin-right:1rem;
}

.horario select{
  font-size: 3rem;
  font-weight: lighter;
}
.enviar{
  display: block;
  width:50%;
  margin:10px auto;
  background: #c78c19;
  border-radius: 4px/6px;
  color:#fefefe;
  font-size: x-large;
  transition: all 2s;
}

.enviar:hover{
  cursor:pointer;
  box-shadow: 4px 4px 2px 4px #BBBBBB;
}

.hora-atencion{
  border-collapse: collapse;
  border: 2px solid #000;
  table-layout: fixed;
  width: 50%;
  margin: 10px auto;
  padding: 5px;
  font-size: 3rem;
}

th,td{
  border:2px solid #000;
  text-align: center;
  vertical-align: middle;
  border-collapse: collapse;
}

thead{
  background: #00f0f0;
  color: #fefefe;
}


@media screen and (max-width:480px) {

      .logo{
        text-align: center;
        display: block;
    }
    .caja .siderbar{
        position: static;
        font-size: small;
    }
    #banner{
        background-size: cover;
        height: 20vh;
        background-repeat: no-repeat;
    }
    .contenido-diferenciales{
        width: 90vw;
        margin: 0 auto;

    }
    .lista-diferenciales{
        display: block;
        width: 100vw;
        margin-bottom: 10px;
    }
    #imagenDiferenciales{
        display: block;
        width: 80vw;
        margin: 0;
    }
    .video{
        width:100%;
        margin:2em auto;
    }

    .productos .items-productos {
        display: block;
        width:100%;
    }

    .productos img{
        width:25%;
    }

    .datos-contacto,
    .medio-contacto,
    .horario,
    .enviar,
    .hora-atencion{
      width: 100%;
      margin: 10px auto;
      padding: 10px;
      box-sizing: border-box;
    }
     
}