@font-face {
  font-family: "asap";
  src        : url("fuentes/asap-regular-webfont.woff2") format("woff2"),
    url("fuentes/asap-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style : normal;
}

@font-face {
  font-family: "asap";
  src        : url("fuentes/asap-bold-webfont.woff2") format("woff2"),
    url("fuentes/asap-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style : normal;
}

* {
  scroll-margin: 150px;
}

html {
  /*scroll-behavior: smooth; se lo quité porque, de lo contrario, en chromium hace el scroll a la tienda hasta q termina de cargar todo y la experiencia se vuelve mala*/
}

:root {
  --primary-color: #e2aab4;
}

.contenido {
  max-width: 1360px;
  margin   : 10px auto;
  padding  : 0 14px;
}

.mitadder {
  padding-left: 10px;
}

.mitadizq {
  padding-right: 10px;
}

.mitadcentro {
  padding: 0 5px;
}

.btn {
  padding         : 0;
  margin          : 0;
  border          : 0;
  background-color: black;
  color           : white;
  cursor          : pointer;
  width           : 135px;
  max-width       : 100%;
  padding         : 5px 0;
}

.btn,
select,
input {
  border-radius        : 7px;
  -moz-appearance      : none;
  -webkit-appearance   : none;
  appearance           : none;
  -webkit-border-radius: 7px;
  -moz-border-radius   : 7px;
  -ms-border-radius    : 7px;
  -o-border-radius     : 7px;
}

select {
  position           : relative;
  padding            : 0 10px;
  background-image   : url("assets/icono-flecha-abajo.svg");
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : cover;
  display            : inline-block;
  width              : 3px;
  height             : 3px;
  background-size    : 15px;
  background-position: 93% center;
}

input {
  position: relative;
  padding : 0 10px;
}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  background-image   : url("assets/icono-flecha-abajo.svg");
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : cover;
  display            : inline-block;
  width              : 10px;
  height             : 10px;
  background-size    : 15px;
  width              : 20px;
  background-position: 93% center;
}

.items-wrapper {
  margin-bottom: 80px;
  margin-top   : 2.5em;
}

.items-wrapper .item {
  text-align      : center;
  background-color: initial;
  padding         : 10px;
  margin-bottom   : 4em;
  float           : left;
  width           : 20%;
  cursor          : pointer
}

.items-wrapper .item button {
  margin-top: 10px;
}

.items-wrapper .item img {
  display      : block;
  margin       : 0 auto;
  margin-bottom: 10px;
  /*width      : 200px;*/
  max-width    : 100%;
  max-height   : 275px
}

select,
input {
  box-shadow: rgba(56, 56, 56, 0.3) 3px 3px 5px;
}

.disponible {
  background-color: var(--primary-color);
}

.no-disponible {
  background-color: black;
}

.imgmax {
  max-width: 100%;
  margin   : auto;
}

.margensupinf {
  margin: 56px auto;
}

.margensup {
  margin-top: 56px;
}

.icored {
  vertical-align: bottom;
  width         : 21px;
  margin        : auto 5px !important;
}

.redondeado {
  border-radius: 6px;
}

.mitad {
  width: 50%;
  float: left;
}

.wa-float {
  position: fixed;
  bottom  : 27px;
  right   : 80px;
  z-index : 5;
}

.wa-float img {
  width : 55px;
  filter: drop-shadow(3px 3px 5px rgba(56, 56, 56, 0.3));
}

@media only screen and (max-width: 600px) {
  .centrar-small {
    text-align: center;
  }

  .wa-float {
    bottom: 25px;
    right : 30px;
  }

  .btn {
    font-size: 12px;
  }

  .items-wrapper .item {
    width: 50%;
  }

  .items-wrapper .item:nth-last-child(1) {
    display: none;
  }
}

header {
  background-color: white;
  z-index         : 5 !important;
}

header .contenido {
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
}

header nav {
  position : absolute;
  right    : 0;
  bottom   : 50%;
  transform: translateY(50%)
}

header .logo {
  width : 200px;
  margin: 10px 0px;
}

header a {
  text-decoration: none;
  font-size      : 16px;
  margin         : 0 14px 0 0;
}

header div a:last-child {
  margin-right: 0;
}

.activo {
  font-weight: bold;
}

@media only screen and (max-width: 600px) {
  header div a {
    font-size: 14px;
    margin   : 0 3px;
  }

  header #collapsing-menu .w3-bar-item:nth-last-child(1) {
    padding-bottom: 20px;
  }
}

.eapps-instagram-feed-container .eapps-instagram-feed-title {
  font-size    : 40px;
  margin-bottom: 10px;
}

footer {
  background-color: var(--primary-color);
  color           : white;
  padding         : 30px 0;
  margin-top      : 50px;
  font-size       : 14px;
}

footer .w3-col .logo {
  margin-top   : 100px;
  padding-right: 10px;
  width        : 350px;
}

footer .w3-col a {
  display: block;
}

footer .w3-col h3 {
  margin-bottom: 10px;
}

footer .w3-col div {
  display      : flex;
  align-items  : center;
  margin-bottom: 10px;
  text-align   : initial;
}

footer .w3-col div .icono {
  background-image   : url("assets/icon-prueba.png");
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : cover;
  display            : inline-block;
  width              : 25px;
  height             : 25px;
  margin-right       : 10px;
}

footer .w3-center {
  font-size: 13px;
}

footer .redes-wrapper {
  display        : flex;
  justify-content: space-between;
  max-width      : 100px;
  margin         : 110px auto 30px 10px;
}

footer .redes-wrapper img {
  filter: invert(1);
  width : 40px;
}

@media only screen and (max-width: 600px) {
  .eapps-instagram-feed-container .eapps-instagram-feed-title {
    font-size: 20px;
    padding  : 4px 10px;
  }

  footer .mitadder {
    padding-left : 0px;
    margin-bottom: 25px;
  }

  footer .mitadizq {
    padding-right: 0px;
  }

  footer .w3-col .logo {
    width: 150px;
  }

  footer .w3-col h3 {
    margin-bottom: 25px;
  }

  footer .w3-col div {
    justify-content: center;
    text-align     : center;
  }
}

#index .img-principal {
  background-image   : url("assets/imginicio.jpg");
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : cover;
  display            : inline-block;
  width              : 100%;
  height             : 100vh;
  height             : calc(100vh - 107px);
  margin-top         : 107px;
}

#index .img-principal .w3-display-middle {
  position : relative;
  padding  : 0 15px;
  width    : 540px;
  max-width: 100%;
}

#index .img-principal .w3-display-middle>span {
  color        : white;
  display      : block;
  font-size    : 20px;
  font-style   : italic;
  margin-bottom: 30px;
}

#index .img-principal .w3-display-middle div {
  text-align      : center;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.65);
  color           : black;
  border-radius   : 20px;
  padding         : 30px;
  margin          : auto;
  width           : min(90%, 400px);
}

#index .img-principal .w3-display-middle div span {
  font-size: 20px;
}

#index .img-principal .w3-display-middle div select {
  height: 40px;
  margin: 10px auto 40px;
  width : 180px;
}

#index .img-principal .w3-display-middle div button {
  font-size: 20px;
}

#como-rentar h2 {
  padding-top: 50px;
}

#como-rentar .w3-half img {
  width: 100%;
}

#como-rentar .w3-half:nth-child(1) img {
  padding: 30px;
  width  : 400px;
}

#rentar #vestido {
  margin-bottom: 60px;
  max-width    : 1200px;
}

#rentar #vestido .w3-col span {
  font-size  : 25px;
  font-weight: bold;
  color      : #0d7f00;
}

#rentar #vestido .w3-col:first-child {
  text-align: center;
}

#rentar #vestido .w3-col .btn-wrapper {
  padding-left: 60px;
  margin-top  : 60px;
}

#rentar #vestido .w3-col .btn-wrapper .btn {
  background-color: black;
  color           : white;
  position        : relative;
  font-size       : 20px;
  padding         : 5px 20px;
  width           : auto;
  border-radius   : 0 7px 7px 0;
}

#rentar #vestido .w3-col .btn-wrapper .btn img {
  width   : 100px;
  position: absolute;
  left    : -80px;
  bottom  : 50%;
  top     : 50%;
}

#rentar #vestido .w3-col .swiper {
  z-index: 0;
  height : 200px;
}

#rentar #vestido .w3-col .swiper .swiper-wrapper .swiper-slide {
  background-position: center;
  background-size    : contain;
  background-repeat  : no-repeat;
}

#rentar #vestido .w3-col .swiper .swiper-button-next {
  right: 15%;
}

#rentar #vestido .w3-col .swiper .swiper-button-prev {
  left: 15%;
}

#rentar #vestido .w3-col .swiper .swiper-button-next:after,
#rentar #vestido .w3-col .swiper .swiper-button-prev:after {
  font-size: 25px;
}

#rentar #vestido .w3-col .mySwiper2 {
  height: clamp(400px, 60vw, 500px);
}

#rentar #vestido .w3-col .mySwiper {
  height: clamp(120px, 10vw, 180px);
}

#rentar #relacionados {
  max-width: 1360px;
}

#rentar ul {
  list-style-type: none;
  font-size      : 18px;
}

#rentar ul li {
  padding-bottom: 16px;
  font-size     : 20px;
}

#preguntas-frecuentes {
  max-width: 750px;
  margin   : 150px auto;
}

#preguntas-frecuentes h3 {
  font-size    : 20px;
  padding-right: 15px;
}

details {
  position: relative;
  cursor  : pointer;
}

details p {
  padding: 20px 0 10px;
}

details>summary {
  list-style-type: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

details>summary::after {
  content  : '+';
  font-size: 1.5em;
  position : absolute;
  right    : 0;
  top      : -4px;
}

details[open]>summary::after {
  content  : '-';
  font-size: 2em;
  top      : -11px;
}

@media only screen and (max-width: 600px) {
  #rentar #vestido .w3-col .btn-wrapper {
    margin-top  : 10px;
    padding-left: 40px;
  }

  #rentar #vestido .w3-col .btn-wrapper .btn {
    font-size: 18px;
  }

  #rentar #vestido .w3-col .btn-wrapper .btn img {
    left : -55px;
    width: 80px;
  }
}

#inicio h2 {
  padding-top  : 10px;
  margin-bottom: 30px;
}

#inicio .select-wrapper {
  display: inline-block;
}

#inicio .select-wrapper select,
#inicio .select-wrapper input {
  margin: 0 15px 25px;
  color : #d30662;
  height: 30px;
  width : 140px;
}

input[type=submit] {
  color: white !important;
}

#inicio .swiper {
  z-index: 0;
}

#inicio .swiper .swiper-wrapper {
  height: 750px;
}

#inicio .swiper .swiper-pagination {
  bottom: 20px;
}

#inicio .swiper .swiper-wrapper .swiper-slide {
  background-position: center;
  background-size    : cover;
}

#inicio .swiper .swiper-pagination-bullet {
  border          : none;
  background-color: white;
  opacity         : 1;
  height          : 12px;
  margin          : 0 8px;
  width           : 12px;
}

#inicio .swiper .swiper-pagination-bullet-active {
  opacity: 0.5;
}

#inicio .banner {
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : cover;
  display            : inline-block;
  width              : 100%;
  height             : 650px;
  position           : relative;
}

#inicio .banner .contenido {
  color      : white;
  text-shadow: 5px 5px 10px grey;
  font-size  : 50px;
}

#inicio .banner .w3-display-middle {
  width: 100%;
}

#como-rentar {
  margin: 100px 0;
}

#como-rentar img {
  margin-top: 0;
}

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

  #inicio .select-wrapper select,
  #inicio .select-wrapper input {
    margin: 0 5px 15px;
    width : 100px;
  }

  #inicio .banner {
    height: 350px;
  }

  #inicio .banner .contenido {
    font-size: 25px;
  }

  #inicio .swiper .swiper-wrapper {
    height: 500px;
  }
}

#moditem {
  padding-top: 0;
}

#moditem .w3-display-middle .contenido-modal {
  border-radius   : 20px;
  position        : relative;
  margin          : 10px auto;
  padding         : 20px;
  padding-top     : 40px;
  width           : 650px;
  background-color: white;
}

#moditem .w3-display-middle .contenido-modal i {
  font-size  : 50px;
  font-style : normal;
  line-height: 1;
  right      : 10px;
  cursor     : pointer;
}

#moditem .w3-display-middle .contenido-modal i:hover {
  color: #b20000;
}

#moditem .w3-display-middle .contenido-modal .item img {
  width: 270px;
}

#moditem .w3-display-middle .contenido-modal span {
  color: black;
}

.catalogo {
  color                    : white;
  background-color         : var(--primary-color);
  max-width                : 250px;
  font-size                : 40px;
  border-top-right-radius  : 25px;
  border-bottom-left-radius: 25px;
  padding                  : 5px;
  box-shadow               : rgb(226 170 180 / 90%) 3px 3px 5px;
  margin                   : 100px auto 50px;
}

@media only screen and (max-width: 600px) {
  #moditem .w3-display-middle .contenido-modal {
    max-width: 320px;
  }

  #moditem .w3-display-middle .contenido-modal .mitadder {
    padding-left: 0;
  }
}

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

a {
  text-decoration: none;
}

body {
  font-family: "asap", Arial, sans-serif;
  color      : #383838;
}

h1,
h2,
h3 {
  font-family: "asap", Arial, sans-serif;
  padding    : 0;
  margin     : 0;
  border     : 0;
}

h2,
h3 {
  font-weight: bold;
}

strong {
  color: #e93f36;
}

#inicio,
#como-rentar {
  margin-top: 88px;
}

#rentar {
  margin-top: 130px;
}

#tienda {
  color: #d30662;
}

@media only screen and (max-width: 600px) {
  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 23px;
  }

  footer .w3-col .logo {
    padding   : 0;
    margin-top: 50px;
    width     : 200px;
  }

  footer .redes-wrapper {
    margin         : 80px auto 20px;
    justify-content: space-between !important;
  }

  .catalogo {
    max-width: 200px;
    font-size: 25px;
  }

  header nav {
    right: 14px;
  }

  #inicio .swiper .swiper-pagination {
    bottom: 10px;
  }

  #como-rentar .w3-half:nth-child(1) img {
    width: 300px;
  }

  #inicio #como-rentar {
    margin: 70px 0;
  }

  #preguntas-frecuentes h3 {
    font-size: 18px;
  }
}

@media only screen and (min-width:601px) {
  .cflex {
    display: -webkit-flex;
    /* Safari */
    display: flex;
  }
}

/*# sourceMappingURL=estilo.css.map */