@media (min-width: 320px) {

    /*---- HEADER ----*/
    
    
    header{
       position: relative;
       width: 100%;
   }
   
   h1{
       position: relative;
       top: 0;
       background-color: #000;
       font-size: var(--fuente-h1-cel);
       font-family: 'Cormorant SC', serif;
       text-transform: uppercase;
       text-align: center;
       margin: 0;
       padding: .5rem 0;
   }
   
   @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
   
   
   .nav-menu-pc{
      display: none;
  }
   .nav-menu-mobile {
       width: 100%;
       box-shadow: 0 1px 4px rgb(146 161 176 / 75%);
   }
   
   .nav-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 100%;
       z-index: 10;
   }

  

   .li1,
   .li2,
   .li3,
   .li4,
   .li5{
       opacity: 0;
     }


   .nav-menu-mobile .nav-container li {
       list-style: none;
   }

   .nav-menu-mobile .nav-container a {
       text-decoration: none;
       color: #ffffff;
       font-weight: 500;
       font-size: 1.5vh;
       padding: 0.7rem;
       text-transform: uppercase;
   }

   .nav-menu-mobile .nav-container a:hover{
       font-weight: bolder;
   }

   .nav-container {
       display: block;
       position: relative;
       height: 60px;
   }

   .nav-container .checkbox {
       position: absolute;
       display: block;
       height: 32px;
       width: 32px;
       top: 20px;
       left: 20px;
       z-index: 5;
       opacity: 0;
       cursor: pointer;
   }

   .nav-container .hamburger-lines {
       display: block;
       height: 2.1rem;
       width: 2.7rem;
       position: absolute;
       top: 17px;
       left: 20px;
       z-index: 2;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .nav-container .hamburger-lines .line {
       display: block;
       height: 4px;
       width: 100%;
       border-radius: 10px;
       background: #ffffff;
   }

   .nav-container .hamburger-lines .line1 {
       transform-origin: 0% 0%;
       transition: transform 0.4s ease-in-out;
   }

   .nav-container .hamburger-lines .line2 {
       transition: transform 0.2s ease-in-out;
   }

   .nav-container .hamburger-lines .line3 {
       transform-origin: 0% 100%;
       transition: transform 0.4s ease-in-out;
   }

   .nav-menu-mobile .menu-items {
       padding-top: 5rem;
       background-color: #1f1c1ce0;
       min-height: 26rem;
       height: auto;
       position: relative;
       width: 100%;
       max-width: 60rem;
       transform: translate(-150%);
       display: flex;
       flex-direction: column;
       margin-left: -40px;
       padding-left: 50px;
       transition: transform 0.5s ease-in-out;
       text-align: center;
       justify-content: space-around;
   }

   

   .logo {
       position: absolute;
       top: 5px;
       right: 15px;
       font-size: 1.2rem;
       color: #0e2431;
      }
      
    .logo img{
        height: 4.5rem;
        
    }

   .nav-container input[type="checkbox"]:checked ~ .menu-items {
       transform: translateX(0);
   }

   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
       transform: rotate(45deg);
   }

   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
       transform: scaleY(0);
   }

   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
       transform: rotate(-45deg);
   }

   .nav-container input[type="checkbox"]:checked ~ .logo{
       display: none;
   }

   @-webkit-keyframes flipInX {
       from {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0;
       }
     
       40% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
       }
     
       60% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         opacity: 1;
       }
     
       80% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
       }
     
       to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px);
       }
     }
     
     @keyframes flipInX {
       from {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0;
       }
     
       40% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
       }
     
       60% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         opacity: 1;
       }
     
       80% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
       }
     
       to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px);
       }
     }
     
     .flipInX {
       -webkit-backface-visibility: visible !important;
       backface-visibility: visible !important;
       -webkit-animation-name: flipInX;
       animation-name: flipInX;
     }
     
     .animated {
       -webkit-animation-duration: 1s;
       animation-duration: 1s;
       -webkit-animation-fill-mode: both;
       animation-fill-mode: both;
     }

     .contenedor{
       max-width: 105rem;
       margin: auto;
   }

   .slider {
    position: relative;
    height: auto;
  }

  .slider .slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }

  .slider .slick-dots li {
    display: inline-block;
    margin: 0 5px;
  }

  .slider .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: #ccc;
    cursor: pointer;
  }

  .slider .slick-dots li.slick-active button {
    background-color: #000;
  }

  #slick-slide-control00::before, 
  #slick-slide-control01::before{
    display: none !important;
  }


}

@media (min-width: 720px) {

   /*---- HEADER ----*/

  .slider,
  article ,
  main,
  aside{
      max-width: 121rem;
      min-width: 120rem;
      margin: auto;
  }

  .slider{
      margin-top: 2rem;
  }

  .article-main-aside{
      max-width: 114rem;
  }

  .nav-menu-mobile,
  #boton-menu{
      display: none;
  }

  .nav-menu-pc{
    display: inherit;
    background-color: #1b1b1b;
    display: flex;
    align-items: center;
    padding: 1.2rem 1.5rem;
    height: 9.4rem;
  }

  .activar-nav-menu-pc{
    display: inherit;
    background-color: #1b1b1b;
    display: flex;
    align-items: center;
    padding: 1.2rem 1.5rem;
    height: 9.4rem;
  }

  .nav-menu-pc img{
      height: 6rem;
      padding-left: 2rem;
      
  }

  .menu-pc{
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-around;
  }

  .list-item{
      display: inline-block;
      list-style: none;
  }

  .link{
      text-decoration: none;
      position: relative;
      padding-bottom: .5rem;
      text-transform: uppercase;
      font-size: 1.4rem;
  }

  .link:after{
      content: "";
      width: 0;
      height: .2rem;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0%;
      transition: all .5s;
      will-change: width;
  }

  .link:hover:after{
      width: 100%;
      right: 0;
  }
  
  .contenedor-campos{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1rem;
      grid-template-rows: auto auto 20rem;
  }
}