#logo{display: none;margin-top: 150px;width: 100%;}

body{font-family: 'Archivo Narrow', sans-serif; color:#585858;}
footer {background: black;}

.toldo-principal{width: 100%; margin-bottom: -90px;}
.caption-principal {width: 100%; font-size: 1.6em; font-weight: bold; color: white; text-align: center; position: relative; top: -116px; background: black; opacity: 0.7;}
.caption-principal p{margin-top: -40px;}
.parrafo-principal{text-align: center; margin-top: -50px; color: #585858;}
.parrafo-principal h2{font-size: 2.2em;color: #000000;}

 .titulo-marcas{color:#99cc99; font-size: 2em; text-align: center;}
 .descripcion-marcas{text-align: center;}

nav ul{font-size:1.2em;padding-left: 0; margin-bottom: 0;list-style: none;display: flex;line-height: 3.5;}
nav li{flex: auto;text-align: center; display: inline-block;}
nav a{color: #777;display: block;font-weight: bold;}
nav li:hover{background: #99cc99;}
nav a:hover{color: white;}
.menu{display: none;}

  form {text-align: center; width: 70%; margin: auto; padding: 10px;}
  input{width: 100%;margin-bottom: 15px; padding: 7px; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc;}
  input: hover{border-bottom:3px solid #ccc;}
  textarea{width: 100%;margin-bottom: 15px; padding: 7px; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc; font-family:sans-serif; }
  .boton {background: #adadad; display: inline-block; text-align: center; border-radius: 18px; width: 40%; color: white; text-decoration: none; padding: 10px; 1px; margin: auto; margin-bottom: 20px; outline: none; border: 0px;}
  .boton:hover{background: #e2e2e2; color: black; font-weight: bold; transition: 3s;}


.caption{width: 100%; height: 47px; margin-top: -76px; background: #000000; color: #ffffff; opacity: 0.8; text-align: center;}
.caption p{font-size: 0.8em; margin-top: -25px;}
.caption h3{font-weight: bold; font-size: 1.5em;}


.botoncaption{background: #adadad; display: inline-block; text-align: center; border-radius: 18px; width: 40%; color: white; text-decoration: none; padding: 10px; margin: auto; margin-bottom: 20px; outline: none; border: 0px;}
.botoncaption:hover{background: #e2e2e2; color: black; font-weight: bold; transition: 3s;}

#medidas-toldos{width: 440px;}

.grid-menu {display: grid; grid-template-columns: 40% 60%; align-items: center;}
.grid-productos {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;}
.grid-marcas {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; align-items: flex-end; text-align: center;}
.formulario {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 50px; background: #e7e7e7;}
.grid-contacto {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; margin-top: 50px; text-align: center;}
.icono{width: 300px;}
.icono-contacto{width: 150px;}
.h2-marcas{text-align: center;}
.grid-footer{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 2px; justify-items: center;}
.ul-footer{text-align: left; font-size: 1.2em;}
.ul-footer li{margin-top: 10px; color: #a08888;}
.titulo-footer{color: white;}
.lista-face{list-style-image:url('../img/icon-face.png');}
.lista-direccion{list-style-image:url('../img/icon-direccion.png');}
.lista-correo{list-style-image:url('../img/icon-correo.png');}
.lista-wasa{list-style-image:url('../img/icon-wasa.png');}
.lista-telefono{list-style-image:url('../img/icon-telefono.png');}
.lista-horario{list-style-image:url('../img/icon-horario.png');}
.lista-youtube{list-style-image:url('../img/icon-youtube.png');}
.lista-tutorial{list-style-image:url('../img/icon-tutorial.png');}


@media (max-width: 768px) {
  .grid-menu{grid-template-columns: 1fr;}
  .grid-productos{grid-template-columns: 1fr 1fr;}
  .grid-contacto{grid-template-columns: 1fr 1fr 1fr;}
  .grid-footer{grid-template-columns:1fr 1fr; grid-gap: 2px;}
  .icono-contacto {width: 90px; text-align: center;}
  .icono{width: 150px;}
  .h2-marcas{font-size: 0.8em; text-align: center;}
  .logo{text-align: center;}
  .caption-principal{font-size: 1em; position: relative; top: -80px;}
  .caption-principal p{margin-top: -20px;}
  .toldo-principal{margin-bottom: -10px;}

  #megatoldos{width: 100%; text-align: center;}
  .slider{margin-top: 10px;}
  nav li{margin: 0px;width: 100%;line-height: 3; font-weight: bold;}
  nav ul{display: inline;}
  nav{display: none;}
 .nav-expanded {display:block;}
 .menu{display: inline-block;font-size: 0.6em;width: 100%;}
 .menu p{float: right;padding-right: 40px;font-size: 1.8em;font-weight: bold;color: #99cc99;}
  span img {margin-left: 20px;margin-top: 10px;}
  }

@media (max-width: 480px) {
  .grid-productos{grid-template-columns: 1fr;}
  .grid-footer{grid-template-columns:1fr;}
  .caption-principal{font-size: 0.7em; position: relative; top: -50px;}
  .caption-principal p{margin-top: -12px;}
  .icono-contacto {width: 35px; text-align: center;}
  .formulario {display: grid; grid-template-columns: 1fr; grid-gap: 10px; margin-top: 50px; background: #e7e7e7;}
  .grid-contacto{font-size: 0.7em;}
  .icono{width: 100px;}



}