@charset "UTF-8";
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  1024px DOWN  */
@media all and (max-width:1024px) and (orientation: portrait) {
  #cafe .swiper-slide:nth-child(1) {
    background: url(../img/mezcal/cafe/PERRANEGRA_mezcal_artesanal_cafe_mexico_1.webp) no-repeat;
    background-size: 100% auto !important;
    background-position: center;
  }
  #cafe .swiper-slide:nth-child(4) {
    background: url(../img/mezcal/cafe/PERRANEGRA_mezcal_artesanal_cafe_mexico_5.webp) no-repeat;
    background-size: auto 100% !important;
    background-position: center;
  }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  1024px DOWN  */
@media all and (max-width:1024px) {
  h3 {
    font-size: 28px;
  }
  p, .legal li {
    font-size: 20px;
    font-size: 2rem;
    font-size: 2vh
  }
  button {
    font-size: 16px
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  PRINCIPAL CLASS/ID  */
  .col-2 {
    width: 100% !important
  }
  .xlH, .medH {
    height: auto;
  }
  .medH {
    padding: 60px 0;
  }
  .medH .center-x {
    position: relative;
    top: 0%;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  INDEX  */
  .index_1 {
    height: 95%;
    min-height: 95%
  }
  .index_1 video {
    width: auto;
    height: 100%;
  }
  .presentation .col-2 {
    padding: 90px 0
  }
  .presentation .col-2:nth-child(1) {
    height: auto
  }
  .presentation .col-2:nth-child(2) {
    height: 60vh;
    min-height: 500px
  }
  .presentation .center-x {
    position: relative;
    top: 0%;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  .marquee {
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  MEZCAL  */
  #btn2 {
    top: 100px;
    width: 35px;
    height: 35px;
    right: 3%
  }
  .switch {
    top: 55%
  }

  .wrap_process {
  	width: 100%;
  }
  .case_info {
    padding-bottom: 115px;
  }
  .case_info .card {
    width: calc(50% - 10px);
    margin: 0 auto;
  }
  .notes p {
    max-width: 50%
  }
  .swiper-slide aside {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0
  }
  .swiper-slide aside:not(:last-of-type) {
    margin-bottom: 2vh
  }
  #tobala .swiper-slide:nth-child(1) {
    background-position: 60% center;
  }
  #cafe .swiper-slide:nth-child(2) {
    background-position: 10% center
  }

  #cannabis .swiper-slide:nth-child(2) {
    background-position: center
  }


  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  FOOTER  */
  footer {
    display: flex;
    flex-direction: column;
  }
  footer div {
    width: 100%
  }
  footer .logo {
    order: 1;
    margin: 0 auto;
  }
  .wrap_RS {
    order: 2
  }
  footer div:nth-child(2) {
    order: 3;
    margin-bottom: 30px
  }
  .legal_links {
    order: 4
  }
  .byNVN {
    order: 5
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  CONTACT  */
  .contact .col-3 {
    margin-top: 0;
    padding: 30px 0;
    font-size: 30px
  }
  .contact h2 {
    margin: 0 0 100px
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  SWIPER  */
  .swiper-wrapper p:not(.notes p) {
    max-width: 45vh
  }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  850px DOWN  */
@media all and (max-width:850px) {
  p {
    font-size: 2.7vw
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  PTINCIPAL CLASS/ID  */
  .col-3, .col-4, .col-5, .col-6, .formal .col-5:first-child, .formal .col-5:last-child {
    width: 100% !important
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  INDEX  */
  .overlay-verify {
    background-size: cover
  }
  .medH .parallax__container .parallax {
    background-size: 130% !important;
  }
  .bottleMain {
    border-top: none
  }
  .pyramid {
    background-size: 160%
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  LEGAL  */
  .legal .content {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  MEZCAL  */

  .switch {
    top: 50%
  }
  .swiper-slide aside:not(:last-of-type) {
    margin-bottom: 10px
  }
  .swiper-slide aside h3 {
  	margin: 10px auto 0;
  }
  .swiper-slide aside p {
    font-size: 75%
  }

  #espadin .swiper-slide:nth-child(2) {
    background-position: 60% center;
  }


  #tobala .swiper-slide:nth-child(2) {
    background-position: 65% center;
  }



  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  FOOTER  */
  footer{
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  SWIPER  */
  .swiper-container p {

  }
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 10px !important;
  }
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    right: 10px !important;
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  TEMPORARY SHOP  */
  .temp_shop {
    background-size: 230%
  }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  500px DOWN  */
@media all and (max-width:500px) {
  h1 {
    font-size: 14vw;
  }
  h2 {
    font-size: 15vw;
  }
  p, .legal li {
    font-size: 16px;
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  PTINCIPAL CLASS/ID  */

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  INDEX  */
  .wrap_msk {
  	width: 250px;
  	height: 250px;
  }
  .pyramid .parallax__container .parallax {
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––   MEZCAL  */
  #btn2 {
    right: 12px
  }

  .case_info{
    padding: 90px 4vh 4vh
  }

  .case_info .card {
    width: 90%;
    min-height: 420px
  }
  .wrap_process {
    flex-direction: column;
  }
  .notes p {
    max-width: 100%
  }

  #espadin .swiper-slide:nth-child(1) {
    background-size: auto 90% !important;
  }
  #espadin .swiper-slide:nth-child(2) {
    background-position: 60% 0%;
    background-size: auto 75% !important;
  }
  #tobala .swiper-slide:nth-child(1) {
    background-position: 68% center;
  }
  #tobala .swiper-slide:nth-child(2) {
    background-position: 12% center;
  }
  #tobala .swiper-slide:nth-child(4) {
    background-position: 22% center;
  }
  #espadin .swiper-slide:nth-child(3), #cafe .swiper-slide:nth-child(3), #tobala .swiper-slide:nth-child(3), #cannabis .swiper-slide:nth-child(3) {
    background-position: top center;
  	background-size: auto 140% !important
  }
  #cafe .swiper-slide:nth-child(2) {
    background-position: 28% center
  }
  #cannabis .swiper-slide:nth-child(1) {
    background-position: 40% center
  }
  .tabcontent .swiper-slide:nth-child(2) p {
    font-size: 75%
  }


  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––   FOOTER  */
  .legal_links a {
    margin: 0 6px;
    letter-spacing: 0.03em
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––   SWIPER  */
  .swiper-container h4 {
    padding: 40px 0 20px
  }
  .swiper-container p {
    width: 100%;
    font-size: 100%;
  }
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––   COOKIES  */
  #div-cookies {
    bottom: 0;
    padding: 20px 0 30px;
    border-radius: 0
  }
}