body {
    overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  user-select: none;
  scroll-snap-type: y proximity;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  --verde: #001a15;
  --azul: #425cc7;
  --naranja: #f5a023;
  --rojo: #ff4713;
  --blanco: #f4f2e3;
}
/* MAYORIA DE EDAD */

.fondo-rojo {
  width: 100vw;
  height: 100vh;
  background-color: var(--rojo);
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.box-question {
  width: 75vw;
  height: 75vh;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.box-question-one {
  background-color: var(--naranja);
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.box-question-two {
  background-color: var(--azul);
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.box-question-three {
  background-color: var(--verde);
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.answer {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.text-question {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: var(--azul);
  font-size: 85px;
}
.yes,
.no {
  font-family: "Noto Serif Display", serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yes {
  color: var(--rojo);
  background-color: var(--azul);
  border: var(--azul);
}

.no {
  color: var(--naranja);
  background-color: var(--verde);
  border: var(--verde);
}

/* THE END MAYORIA DE EDAD */

.link {
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--verde);
  font-weight: 600;
}
.link:hover {
  text-decoration: underline;
}

nav {
  transition: all 0.5s;
  top: -200px;
  position: absolute;
  width: 100%;
  background-color: var(--blanco);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 1em 0;
  overflow: hidden;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

nav img {
  width: 15vw;
}

nav .menu {
  width: 65%;
  margin: 0 1em;
  padding: 1em 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.icono {
  display: none;
}
menu {
  transition: all 0.5s;
  top: 0px;
  width: 100%;
  background-color: var(--blanco);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 1em 0;
  overflow: hidden;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

menu img {
  width: 15vw;
}

menu .menu {
  width: 65%;
  margin: 0 1em;
  padding: 1em 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

section {
  scroll-snap-align: start !important;
  color: var(--blanco);
}

#landing {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.img-first {
  width: 50vw !important;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-img {
  width: 50vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contenedor-img h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 121px;
}

.back-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 50vw;
  height: 100vh;
}

#landing img {
  width: 50vw;
}

#png {
  width: 50vw;
  background-color: var(--verde);
}

#png img {
  width: 50%;
}

#global {
  top: -3rem;
}

#que-hacemos {
  width: 100%;
  height: 100vh;
  background-color: var(--azul);
  color: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  overflow: hidden;
}
.que-hacemos-img-bottom {
  display: none;
}
.copa,
.copa-white {
  transition: all 0.5s;
  position: fixed;
  left: 7rem;
  top: 4rem;
  overflow: hidden;
  z-index: 20;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.copa,
.copa-white img {
  width: 6em !important;
}

#movile {
  display: none;
}

.quienes-somos {
  width: 55%;
}
div p {
  text-align: justify;
  margin-top: 2vw;
  font-size: 1.8em;
  word-spacing: 7px;
  line-height: 2rem;
}

span {
  font-size: 5vw;
}

.parentesis {
  font-family: "Noto Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}

.text-50 {
  width: 50vw;
  display: flex;
  flex-direction: column;
  padding: 3rem;
  align-items: center;
  justify-content: center;
}

.text-35 {
  width: 75%;
}

section .contenedor-img img {
  width: 50vw;
  height: 110vh;
}

/* IMAGENES ADAPTABLES DESKTOP Y MOVILE */
/* SLIDER */
.img-hombre-rojo {
  background-image: url("../src/img/Foto1-01.png");
}
.img-hombre-amarillo {
  background-image: url("../src/img/Foto2-01.png");
}
.img-botella-roja {
  background-image: url("../src/img/Foto3-01.png");
}

.img-fabrica-amarilla {
    background-image: url("../src/img/mision-2.png");
}

.img-botellas-amarillas {
  background-image: url("../src/img/Foto4-01.png");
}
.img-botellas-vaca {
  background-image: url("../src/img/la-vaca.png");
}
/* FIN SLIDER */

/* IMAGENES TOTALES DE LA PAGINA BACKGROUND */

/* HACEMOS */
.img-botella-azul {
  background-image: url("../src/img/Imagen-03.png");
}
.img-camion-rojo {
  background-image: url("../src/img/Imagen2-03.png");
}
/* BODEGA */
.img-santonegro-logo {
  background-image: url("../src/img/Imagen3-03.png");
}
.img-santonegro-bodega {
  background-image: url("../src/img/bodega.jpg");
}
.img-santonegro-logo .clickeable-santonegro {
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}

#vision {
  background-color: var(--naranja);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#mision {
  background-color: var(--azul);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#puntos-desarrollo {
    background-color: #f5a023;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    padding: 150px 0 100px 0;
}
#puntos-desarrollo p {
    margin-top: 0;
}

#puntos-desarrollo .div-superior,
#puntos-desarrollo .div-puntos,
#puntos-desarrollo .div-inferior {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 40px 0;
}

#puntos-desarrollo .div-puntos {
    width: 80%;
    flex-wrap: wrap;
    margin: 100px 0;
}

#puntos-desarrollo .div-puntos img{
    width: 100%;
    max-width: 100%;
}

#puntos-desarrollo .div-superior p {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

#puntos-desarrollo .div-superior p,
#puntos-desarrollo .div-inferior img{
    width: 10%;
}

#puntos-desarrollo .div-superior img,
#puntos-desarrollo .div-inferior .flecha{
    width: 75%;
}

#puntos-desarrollo .punto {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    position: relative;
    display: none;
}

#puntos-desarrollo .punto img {
    width: 90px;
}

#puntos-desarrollo .punto p {
    font-size: 18px;
    margin-top: 15px;
    position: relative;
}

#puntos-desarrollo .punto:after {
    content: '';
    background-image: url(src/img/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
}

#puntos-desarrollo .punto:nth-child(4):after,
#puntos-desarrollo .punto:nth-child(8):after{
    display: none;    
}

#puntos-desarrollo .punto:nth-child(1n+5) {
    margin-top: 50px;
}

.flecha-mobile {
    display: none;
}

/* BODEGA */

.nuestros-vinedos {
  width: 100%;
  height: 100vh;
  background-color: var(--verde);
  display: flex;
  justify-content: center;
  align-items: center;
}
.bodega-text {
  width: 50%;
}
.logo-sn-responsive {
  display: none;
}
/* END BODEGA */

/* PRODUCTOS */
.vino-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.vino-title {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  font-weight: 900 !important;
  padding: 5%;
  position: relative;
}
.vino-title span {
  opacity: 1;
}
.vino-title p {
  transition: all 0.5s;
  margin: auto;
  z-index: -1;
  opacity: 0;
  line-height: 34px;
  font-size: 26px;
  position: absolute;
  left: 0;
  right: 0;
  color: var(--blanco);
  width: 65%;
}
.mostrar-description {
  opacity: 1 !important;
  z-index: 30 !important;
}
.ocultar-title {
  opacity: 0 !important;
}
.mover-more {
  z-index: 40;
  position: absolute;
  bottom: 55px;
  left: 17.5%;
}
.mover-title {
  position: absolute;
  z-index: 40;
  bottom: 87px;
  left: 17.5%;
  font-size: 3rem;
}
.color-letra-blanca {
  color: var(--blanco) !important;
}
.oculto-desktop {
  display: none !important;
}
.vino-container a {
  text-decoration: none;
  font-size: 26px;
  text-transform: lowercase;
}

.item img {
    height: 500px!important;
    object-fit: contain;
}

.img-vino {
  width: 50%;
  background-color: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-vino img {
  width: 50%;
}

.img-vino > img {
    height: 500px;
    object-fit: contain;
}


.img-vino a {
  cursor: pointer;
  font-size: 40px;
}
.vino-container a:hover,
.img-vino a:hover {
  cursor: pointer;
  text-decoration: underline;
}
.img-vino h4 {
  text-transform: lowercase;
  font-size: 22px;
  margin-top: 7.5px;
}
.botones-compra-vino {
  width: 100%;
  display: flex;
  justify-content: center;
  transition: all 0.5s;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.btn-oculto {
  display: none;
}
.botones-compra-vino img {
  width: 25%;
  padding: 1rem;
}
.grupo-botones-compra {
  text-align: center !important;
}
.grupo-botones-compra a {
  text-decoration: none !important;
  color: var(--blanco);
  margin: auto;
}
.cancelar-compra i {
  font-size: 2em;
  color: var(--verde);
  cursor: pointer;
  position: relative;
}
.desktop {
  display: flex;
  justify-content: center;
  align-items: center;
}
.movile {
  display: none;
}

.redes {
  position: absolute;
  bottom: 1em;
  right: 1em;
}
.redes a {
  color: var(--blanco);
}
.redes i {
  font-size: 3rem;
  margin: 0.2em;
}

/* BUTTON DE PRODUCT */
#btn-round img {
  width: 13%;
  position: fixed;
  right: 5rem;
  top: 7.5rem;
  animation: 20s rotate linear infinite;
  transform-origin: 50% 50%;
  overflow: hidden;
  z-index: 20;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* THE END PRODUCT */

/* BODEGAS */
.bck-brown {
  background-color: var(--naranja) !important;
}

.contenedor-img-bode {
  width: 50vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* THE END BODEGAS */

/* CONTACT */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact {
  background-color: var(--verde) !important;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10% 0 20% 0;
}

.yellow {
  font-family: "Noto Serif Display", serif;
  font-style: italic;
  font-size: 1.8rem;
  font-weight: bolder;
  background-color: var(--naranja);
  width: 15vw;
  color: var(--azul);
  display: flex;
  justify-content: center;
  align-items: center;
}

.net {
  font-size: 2vw;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  text-align: center;
}

.red {
  color: var(--rojo);
  user-select: text !important;
}

.blue {
  color: var(--naranja);
  user-select: text !important;
  padding-top: 2vh;
}

.confidencial {
  position: absolute;
  bottom: 1%;
  width: 90%;
  font-size: 1em;
  text-align: justify;
}

/* THE END CONTACT */

/* DENEGADO */

.tamanio {
  width: 25%;
  text-align: center;
}
.denegado {
  width: 100%;
  height: 100vh;
  color: var(--blanco);
  background-color: var(--verde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.denegado span {
  font-size: 2rem;
}

.denegado img {
  width: 18%;
  position: absolute;
  bottom: 10%;
  right: 41.5%;
}

/* VIDEO YOUTUBE */
.content-media {
  width: 100%;
  position: relative;
  background-color: rgb(0, 0, 0);
  display: block;
  width: 100%;
  padding-bottom: 45.19%;
}
.content-media--video iframe {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
}

/* MEDIA QUERIES */

@media screen and (max-width: 800px) {
    
    .punto-desktop {
        display: none;
    }
    
    #puntos-desarrollo .punto img {
        width: 80px;
    }
    
    #puntos-desarrollo {
        height: auto;
        padding: 50px 0;
    }
    
    #puntos-desarrollo .div-superior,
    #puntos-desarrollo .div-inferior{
        flex-direction: column;
        align-items: center;
    }
    
    #puntos-desarrollo .div-superior *{
        width: 100%!important;
        margin-bottom: 0;
    }
    
    #puntos-desarrollo .div-inferior img {
        width: 150px;
    }
    
    #puntos-desarrollo .div-puntos {
        width: 85%;
        margin: 0;
    }
    
     #puntos-desarrollo img.flecha-mobile {
        display: inline-block;
        transform: rotate(90deg);
        width: 12.5px!important;
        height: 12.5px;
        object-fit: contain;
        margin: 15px 0;
    }
    
    #puntos-desarrollo .div-inferior img.flecha-mobile {
        margin: 20px 0 5px 0;
    }
    
    #puntos-desarrollo .punto {
        width: 50%;
        margin-bottom: 40px;
        display: flex;
    }
    
    #puntos-desarrollo .punto p {
        font-size: 16px;
    }
    
    #puntos-desarrollo .punto:after{
        top: 30%;
        width: 15px;
        height: 15px;
    }
    
    #puntos-desarrollo .punto:nth-child(even):after {
        display: none;
    }
    
    #puntos-desarrollo .punto:nth-child(1n+5) {
        margin-top: 0;
    }
    
    .flecha-desktop {
        display: none;
    }
    
    .cancelar-compra i {
        top: 20px;
    }
    
    .mover-title {
        left: 10%;
        bottom: 30px;
    }
    
    .img-vino {
        width: 80%;
    }
    
    .img-vino > img {
        height: 350px;
    }
    
    .item img {
        height: 300px!important;
    }
    
  body::-webkit-scrollbar {
    display: none; /* width of the entire scrollbar */
  }
  .font-query h2,
  .font-query div {
    font-size: 6vw;
  }
  .font-query span {
    font-size: 4vw;
  }
  .box-question {
    flex-direction: column;
    width: 100vw;
    height: 100vh;
  }
  .box-question-one {
    width: 100vw;
    height: 100vh;
  }
  .answer {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100%;
  }
  .box-question-two,
  .box-question-three {
    width: 100%;
    height: 100%;
  }
  .tamanio {
    width: 50%;
  }
  .denegado img {
    width: 35%;
    right: 32.5%;
  }
  /* MENU RESPONSIVE home*/

  menu {
    position: absolute;
    flex-direction: column;
    text-align: center;
    z-index: 20;
  }
  menu img {
    width: 30vw;
  }
  .menu {
    padding: 0 !important;
  }
  .menu-responsive-header {
    display: flex;
    align-items: center;
  }
  .menu-responsive-link {
    flex-direction: column !important;
  }
  .menu-responsive-link a {
    font-size: 120% !important;
    padding: 2vw 0;
  }
  .icono {
    display: block;
    color: #001a15;
    z-index: 40;
    position: absolute;
    left: 10%;
  }
  .icono:hover {
    cursor: pointer;
  }
  .icono i {
    font-size: 3rem;
  }
  #btn-round img {
    width: 30%;
    right: 2%;
    top: 7%;
  }
  #landing .img-first {
    display: none;
  }
  .contenedor-slider {
    display: inline !important;
    width: 100vw;
  }
  #landing img {
    width: 100vw;
  }
  .no-vision {
    height: 0 !important;
    transition: all 0.5s;
    opacity: 0;
  }
  .vision {
    padding: 5vw 0 !important;
    height: 30vh !important;
    transition: all 0.5s;
    opacity: 1;
  }
  /* END MENU RESPONSIVE home */
  /* MENU RESPONSIVE GENERAL */
  #desktop {
    display: none;
  }
  #movile {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .copa-white {
    display: flex;
    align-items: center;
    flex-direction: column;
    left: 9%;
    top: 4vh;
  }
  .copa-white img {
    width: 10vw !important;
  }
  nav {
    top: -300px;
  }
  nav,
  nav .menu {
    flex-direction: column;
    text-align: center;
  }
  nav img {
    width: 20vw;
  }
  nav .link {
    padding: 0.4rem 0;
  }
  /* END MENU RESPONSIVE */
  /* HACEMOS */
  span {
    font-size: 7vw;
  }
  .quienes-somos {
    width: 90%;
  }
  .text-50,
  .text-35 {
    width: 95%;
  }
  div p {
    margin-top: 4.5vh;
    font-size: 3.6vw;
    line-height: 3vh;
  }

  .contenedor-img {
    display: none;
  }
  .que-hacemos-img-bottom {
    display: inline !important;
  }
  .que-hacemos-img-bottom img {
    position: absolute;
    bottom: 2vh;
    left: 40%;
    width: 20vw;
  }
  .img-responsive-botella {
    background-image: url("../src/img/Imagen-03.png");
  }
  /* BODEGA */
  #png-brown {
    display: none;
  }
  #bodega {
    width: 100%;
    display: inline;
  }
  .bodega-text {
    width: 80%;
  }

  .logo-sn-responsive {
    display: flex;
    justify-content: center;
    position: relative;
    top: 10vh;
  }
  .logo-sn-responsive img {
    width: 12rem;
  }
  .back-img-responsive {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  /* PRODUCTOS */
  .vino-container {
    background-color: var(--blanco) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .vino-container span {
    font-size: 2rem;
  }
  .vino-title {
    width: 100%;
    height: 20%;
    padding: 0;
    color: var(--azul) !important;
    display: flex;
    align-items: center;
    margin-bottom: -5%;
  }
  .vino-title p {
    background-color: var(--verde);
  }
  .mover-more {
    bottom: 0;
    left: 10%;
  }
  .color-letra-blanca {
    color: var(--blanco) !important;
  }
  .oculto-desktop {
    display: flex !important;
    align-items: center;
    text-align: center !important;
  }
  .oculto-responsive {
    display: none;
  }
  .grupo-botones-compra {
    display: flex;
    flex-direction: row;
  }
  .grupo-botones-compra a {
    width: 10rem;
    margin: 0.5rem;
  }
  .botones-compra-vino {
    width: 50%;
  }
  .vino-title a,
  .img-vino a {
    color: var(--azul) !important;
  }
  .img-vino img {
    width: 100%;
  }
  .img-vino a {
    font-size: 3rem;
    margin-top: 50px;
  }
  
  .vino-title .more {
      font-size: 20px;
  }
  .img-vino h4 {
    font-size: 4vw;
  }
  .redes {
    top: 35vh;
    right: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
  }
  .musas-responsive {
    background-color: var(--verde) !important;
  }
  .musas-responsive span {
    color: var(--blanco) !important;
  }
  .background-none {
    background-color: transparent !important;
  }
  .description-movile-vinos {
    font-size: 2.5vh !important;
    line-height: 3vh !important;
    top: 5vh;
    width: 100% !important;
    height: 70vh;
    display: flex;
    padding: 3rem;
    align-items: center;
    position: relative;
  }
  .fondo-naranja {
    background-color: var(--naranja) !important;
  }
  .fondo-red {
    background-color: var(--rojo) !important;
  }
  .mover-more {
    z-index: 40;
  }
  .more {
    color: var(--blanco);
  }
  .desktop {
    display: none;
  }
  .movile {
    display: flex;
  }
  /* CONTACTANOS */
  .box-contact {
    margin: 25% 0 20% 0;
  }
  .net {
    font-size: 4vw;
  }
  .confidencial {
    width: 90%;
    font-size: 0.7em;
  }
}