@font-face {
  font-family: "Gotham-Bold";
  src: url(https://minisitios.ripley.cl/minisitios/estatico/fonts/font-gotham/Gotham-Bold.woff);
}

@font-face {
  font-family: "Gotham-light";
  src: url(https://minisitios.ripley.cl/minisitios/estatico/fonts/font-gotham/Gotham-Light.woff);
}

/* ESTILOS MOBILE/GENERALES */
#CONTAINER-LANDING-HEAD {
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
  scroll-behavior: smooth;
  padding: 0 0 100px 0;
  margin: auto;
  color: #fff;
  background-image: url(../img/bg-desk.png);
  background-size: contain;
  background-repeat: repeat-y;
  position: relative;
  margin-top: 10px;
}

#CONTAINER-LANDING-HEAD .container-section {
  max-width: 1140px;
  margin: auto;
}

#CONTAINER-LANDING-HEAD .titulares {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 10px;
}
#CONTAINER-LANDING-HEAD .container-video video {
  width: 100%;
}

#CONTAINER-LANDING-HEAD .video-header-desk {
  display: none;
}
#CONTAINER-LANDING-HEAD .video-header-mob {
  display: block;
}

#CONTAINER-LANDING-HEAD h1 {
  font-size: 1.5em;
  font-family: "Gotham-Bold";
}

#CONTAINER-LANDING-HEAD h2 {
  font-size: 1.4em;
  font-family: "Gotham-Bold";
}

#CONTAINER-LANDING-HEAD p {
  font-size: 1em;
  font-family: "Gotham-light";
}
#CONTAINER-LANDING-HEAD div#list_product_sku1 p{
    font-size: 11px !important;
    font-family: 'gotham-book' !important;
    color: #fff !important;
}

#CONTAINER-LANDING-HEAD #nav-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: sticky;
  top: 110px;
  z-index: 4;
}

#CONTAINER-LANDING-HEAD #nav-header img:hover {
  filter: drop-shadow(0 0 5px #fff5);
}

#nav-header img,
.banner-1-head img {
  width: 80%;
}

#CONTAINER-LANDING-HEAD .banner-1-head {
  display: none;
}
#CONTAINER-LANDING-HEAD .logo-head-mob {
  display: block;
  /* margin: 50px auto; */
}

#CONTAINER-LANDING-HEAD .logo-head-mob img {
  width: 70%;
  pointer-events: none;
}

#CONTAINER-LANDING-HEAD .franja-inferior-header {
  margin-top: -8px;
}
#CONTAINER-LANDING-HEAD img {
  max-width: 100%;
}

#CONTAINER-LANDING-HEAD a {
  text-decoration: none;
  cursor: pointer;
}

#CONTAINER-LANDING-HEAD .container-mujer,
#CONTAINER-LANDING-HEAD .container-hombre {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 900px;
  margin: 30px auto;
}

#CONTAINER-LANDING-HEAD .container-hombre {
  flex-direction: column-reverse;
}

#CONTAINER-LANDING-HEAD .box3-4-5-mujer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#CONTAINER-LANDING-HEAD .box2-3-4-hombre {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#CONTAINER-LANDING-HEAD .mujer-head,
#CONTAINER-LANDING-HEAD .hombre-head {
  margin: 30px auto;
}

#CONTAINER-LANDING-HEAD .franja_superior-desk {
  margin-bottom: -6px;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head,
#CONTAINER-LANDING-HEAD #carrusel-2-head {
  background-color: #000;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head > div,
#CONTAINER-LANDING-HEAD #carrusel-2-head > div {
  max-width: 1100px;
  margin: auto;
}

/* CHANGE NAV */
#CONTAINER-LANDING-HEAD #nav-header.change-nav {
  background-color: #000;
}

#CONTAINER-LANDING-HEAD #nav-header .logo-head {
  width: 0;
  transition: all 0.5s ease-in-out;
}

#CONTAINER-LANDING-HEAD #nav-header.change-nav .logo-head {
  width: 60px;
}

/* CHANGE NAV */

/* ESTILOS CARRUSEL API */
#CONTAINER-LANDING-HEAD #carrusel-1-head img,
#CONTAINER-LANDING-HEAD #carrusel-2-head img {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  object-fit: contain;
  gap: 5px;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head a,
#CONTAINER-LANDING-HEAD #carrusel-2-head a {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 70px 50px;
  align-items: stretch;
  justify-items: center;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head .nombre-producto,
#CONTAINER-LANDING-HEAD #carrusel-2-head .nombre-producto {
  padding: 0;
  color: #fff !important;
  font-family: "Gotham-Bold";
  font-size: 0.8em;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head .precio,
#CONTAINER-LANDING-HEAD #carrusel-2-head .precio {
  color: #fff;
  font-family: "Gotham-Bold";
  font-size: 1em;
}

#CONTAINER-LANDING-HEAD #carrusel-1-head .splide__pagination__page,
#CONTAINER-LANDING-HEAD #carrusel-2-head .splide__pagination__page {
  border-radius: 2px;
}

#carrusel-1-head .splide__pagination,
#carrusel-2-head .splide__pagination {
  bottom: -1em;
}
.container{
   padding: 0%;
   /*padding: 2% 5%;*/
 }

/* ESTILOS CARRUSEL API */

/* ESTILOS MOBILE/GENERALES */

/* ESTILOS DESKTOP */
@media (min-width: 768px) {
  #CONTAINER-LANDING-HEAD #nav-header img {
    width: 60%;
  }

  #CONTAINER-LANDING-HEAD h1 {
    font-size: 2em;
  }

  #CONTAINER-LANDING-HEAD h2 {
    font-size: 2em;
  }
  #CONTAINER-LANDING-HEAD P {
    font-size: 1em;
    font-family: "Gotham-light";
  }

  #CONTAINER-LANDING-HEAD #nav-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: sticky;
    top: 100px;
    z-index: 4;
  }
  #CONTAINER-LANDING-HEAD #nav-header {
    top: 70px;
  }

  #CONTAINER-LANDING-HEAD .banner-1-head {
    display: block;
  }

  #CONTAINER-LANDING-HEAD .banner-1-head img {
    width: 35%;
    margin: 50px auto;
  }

  #CONTAINER-LANDING-HEAD .logo-head-mob {
    display: none;
  }

  #CONTAINER-LANDING-HEAD .video-header-desk {
    display: block;
  }
  #CONTAINER-LANDING-HEAD .video-header-mob {
    display: none;
  }

  #CONTAINER-LANDING-HEAD .container-mujer,
  #CONTAINER-LANDING-HEAD .container-hombre {
    flex-direction: row;
  }

  #CONTAINER-LANDING-HEAD #carrusel-1-head .nombre-producto,
  #CONTAINER-LANDING-HEAD #carrusel-2-head .nombre-producto {
    padding: 0 35px;
  }

  #CONTAINER-LANDING-HEAD .container-mujer,
  #CONTAINER-LANDING-HEAD .container-hombre {
    margin: 70px auto;
  }
  /* ESTILOS MOB */

   @media screen and (max-width:769px){
    #CONTAINER-LANDING-HEAD {
      margin-top: 0px;
}
}


