@charset "UTF-8";
header {
  font-style: oblique;
}
header div div {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
header div div a {
  font-family: "Comforter Brush", cursive;
  text-align: center;
  font-size: 100%;
  margin-left: 10%;
}

#nav {
  margin-left: 25em !important;
  font-family: "Comforter Brush", cursive;
}
#nav a {
  font-size: 30px;
  margin-left: 2em;
}
#nav li ul li a {
  margin-left: 0%;
}
#nav li ul li a:hover:active {
  background-color: #4a362f;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
main .tamaños_main {
  width: 50%;
  height: 85vh !important;
  background-color: color-principal;
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
  font-style: oblique;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
main .tamaños_main img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main aside {
  background-color: #f8f8ec;
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
  font-style: oblique;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#promocion {
  list-style-type: none;
  text-align: center;
}
#promocion a {
  text-decoration: none;
  font-weight: bold;
  color: darkgrey;
  background-color: black;
}
#promocion a:hover {
  color: white;
  font-weight: bold;
  background-color: brown;
}

#descuento {
  font-weight: bold;
  font-size: 40px;
}

#main__dos {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #f8f8ec;
}

#footer__dos {
  height: 10vh;
}

.main__contacto {
  width: 100%;
  height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main__contacto .div_contacto {
  height: 100%;
  background-color: #f8f8ec;
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  font-style: oblique;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.main__contacto .div_contacto form {
  margin: 40px;
}
.main__contacto .div_contacto form div {
  height: 10vh;
  width: 100%;
  font-size: 15px;
}
.main__contacto .div_contacto form input {
  margin-top: 30px;
  border-radius: 10px;
  background-color: black;
  color: aliceblue;
  font-size: 15px;
}
.main__contacto .div_contacto form input:hover {
  background-color: #cdaf7b;
  font-weight: bold;
}
.main__contacto #aside_contacto {
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  font-style: oblique;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 20px;
}
.main__contacto #aside_contacto iframe {
  height: 100%;
  width: 100%;
  margin-top: 0%;
  border-radius: 20px;
}

iframe {
  width: 50vh;
  margin-top: 6em;
  height: 30vh;
}

.main-about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main-about #aside-about {
  background-image: url(../assets/images/about/annie-spratt-hCb3lIB8L8E-unsplash.jpg);
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
  font-style: oblique;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: cover;
}
.main-about #article-about {
  background-color: #f8f8ec;
  -ms-flex-preferred-size: 10em;
      flex-basis: 10em;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.5rem;
  font-style: oblique;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.main-about #article-about h1 {
  margin-top: 10%;
}
.main-about #article-about p {
  padding: 2rem;
  margin-top: 4vh;
  margin: 10%;
}

p {
  color: black;
}

footer {
  height: 100%;
  background-color: #45484b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 100%;
  font-style: oblique;
  text-align: center;
}
footer div {
  width: 50%;
  margin-top: 20px;
}
footer div p {
  color: aliceblue;
}
footer div p a {
  color: #FA3D00;
  text-decoration: none;
}
footer nav {
  width: 30%;
  margin-top: 20px;
}
footer section {
  color: aliceblue;
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  display: list-item;
}
footer section h5 {
  font-size: 15px;
}
footer section a img {
  height: 40px;
  width: 40px;
}

.footer__hombre {
  height: 20vh;
}

.footer-text a:hover {
  color: #FA3D00;
}

* {
  padding: 0%;
  margin: 0%;
}

iframe {
  width: 100%;
  height: 50vh;
  margin-top: 0%;
  margin-bottom: 0%;
}

@media (min-width: 280px) and (max-width: 374px) {
  .pagina__tienda {
    height: 100vh;
  }
  .pagina__tienda #main__dos {
    height: 250vh;
  }
}
@media (min-width: 280px) and (max-width: 319px) {
  #nav {
    margin-left: 1em !important;
  }
  #nav a {
    font-size: 20px;
  }
  .btn {
    font-size: 9px;
  }
  .body__hombre {
    height: 361vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 328vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 250vh !important;
  }
  .body__hombre .main__hombre .nav__hombre {
    height: 28vh !important;
  }
  .body__hombre .footer__hombre {
    height: 20vh;
  }
}
@media (min-width: 280px) and (max-width: 425px) {
  body {
    height: 100vh;
  }
  body .main_principal {
    height: 70vh !important;
    margin-top: 0%;
  }
  body .main_principal div {
    height: 35vh !important;
  }
  body .main_principal aside {
    height: 35vh !important;
  }
  body .main_principal aside #promocion {
    margin-right: 0em;
    margin-left: 1em;
    font-size: 20px;
  }
  body footer {
    height: 17vh;
  }
}
@media (min-width: 320px) and (max-width: 425px) {
  .pagina__tienda {
    height: 100vh;
  }
  .pagina__tienda #main__dos {
    height: 200vh;
  }
  #nav {
    margin-left: 5em !important;
  }
  #promocion {
    font-size: 15px;
    margin-left: 10px;
    margin-right: 1em;
  }
  .body-about {
    height: 133vh;
  }
  .body-about .main-about {
    height: 150vh;
  }
  .body-about .main-about #article-about {
    font-size: 20px;
    display: contents;
  }
  .body-about .footer-about {
    height: 15vh;
  }
  .body__contacto {
    height: 120vh;
  }
  .body__contacto .main__contacto {
    height: 100vh;
  }
  .body__contacto .main__contacto .div_contacto {
    height: 60vh;
  }
  .body__contacto .main__contacto #aside_contacto {
    height: 40vh;
  }
  .body__contacto .footer__contacto {
    height: 13vh;
  }
  .body__hombre {
    height: 308vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 300vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 220vh !important;
  }
  .body__hombre .footer__hombre {
    height: 20vh !important;
  }
}
@media (min-width: 375px) and (max-width: 575px) {
  #promocion {
    font-size: 15px;
    margin-left: 3em !important;
  }
  .body__hombre {
    height: 308vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 300vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 220vh !important;
  }
  .body__hombre .footer__hombre {
    height: 20vh;
  }
}
@media (min-width: 425px) and (max-width: 576px) {
  .main_principal {
    margin-top: 0%;
  }
  .main_principal aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .main_principal aside #promocion {
    font-size: 20px;
    margin-right: 0em;
    margin-left: 4em !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 305vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 220vh !important;
  }
  .body__hombre .footer__hombre {
    height: 20vh;
  }
}
@media (min-width: 540px) and (max-width: 575px) {
  main nav img {
    height: 40vh !important;
    width: 50% !important;
    margin-left: 20vh;
  }
  #promocion {
    margin-left: 10em;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .main_principal {
    margin-top: 0%;
  }
  .main_principal aside #promocion {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 30px;
  }
  #nav {
    margin-left: 25em;
  }
  main nav img {
    height: 40vh !important;
    width: 50% !important;
    margin-left: 20vh;
  }
}
@media (min-width: 768px) {
  #logo_menu {
    height: 12vh;
    margin-left: 10vh;
  }
  .pagina__tienda {
    height: 100vh;
  }
  .pagina__tienda #main__dos {
    height: 150vh;
  }
  .body__hombre {
    height: 218vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 205vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 150vh !important;
  }
  .body__hombre .main__hombre .footer__hombre {
    height: 20vh;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #nav {
    margin-left: 2em !important;
  }
}
@media (min-width: 1024px) {
  #promocion {
    margin-right: 0em;
    margin-left: 1.5em;
  }
  .body__hombre {
    height: 218vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 205vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 55vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 150vh !important;
  }
  .body__hombre .footer__hombre {
    height: 20vh;
  }
}
@media (min-width: 1440px) {
  #promocion {
    margin-right: 0em;
    margin-left: 5em;
  }
  .body__hombre {
    height: 213vh !important;
  }
  .body__hombre .header__hombre {
    height: 13vh !important;
  }
  .body__hombre .main__hombre {
    height: 200vh !important;
  }
  .body__hombre .main__hombre .aside__hombre {
    height: 100vh !important;
  }
  .body__hombre .main__hombre .article__hombre {
    height: 120vh !important;
  }
  .body__hombre .footer__hombre {
    height: 10vh;
  }
}
@media (min-width: 2560px) {
  main nav img {
    height: 80vh;
    width: 100%;
  }
  #promocion {
    font-size: 50px;
  }
  #nav {
    margin-left: 25em !important;
    font-family: "Comforter Brush", cursive;
  }
  #nav a {
    font-size: 60px;
    margin-left: 2em;
  }
  .pagina__tienda {
    height: 100vh;
  }
  .pagina__tienda #main__dos {
    height: 60vh;
  }
}