* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
}

/* ****************************************   IMAGEN DE PORTADA ********************************************/

.intro{
     background: url("../img/puentesillas-durango-lg.jpg");
     height: 100vh;
     background-size: cover;
     background-position: center; 
     background-attachment: fixed;    
}

.intro h5{
     text-transform: uppercase;
     letter-spacing: 6px;
}

/* *************************************  FIN IMAGEN DE PORTADA ********************************************/

/*******************************************  ESTILO DEL NAV ***********************************************/

.logo {
     width: 100px;
}

nav {
     display: flex;
     justify-content: space-around;
     align-items: center;
     /* background: rgb(71, 105, 153); */
     min-height:10vh; 
              
}

.top-nav-collapse {
     background-color: #212121 !important;
   }
 
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}

.nav-links {
     display: flex;
     justify-content: space-around;
     width: 40%;
}

.nav-links li {
     list-style: none;
}

.nav-links a {
     color: rgb(253, 250, 250);
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-weight: bold;
     font-size: 14px;
     padding: 0 0 0 8px;
}

.nav-links a:hover {
      color:#f8c285;
      font-size: 17px;     
}

.burger {
     display: none;
     cursor: pointer;
}

.burger div {
     width: 25px;
     height: 3px;
     background-color: rgb(250, 249, 249);
     margin: 5px;
     transition: all 0.5s ease;
}

/*****************************************  FIN ESTILO DEL NAV ***********************************************/

/************************* MENU DESPLEGABLE TOURS ************************/
     
.menu-tours {
     background: #7f837f;
     padding-left: 10px;
     padding-right: 10px;
    
}

.menu-tours a {
     color: rgb(250, 250, 250)!important;
     font-weight: bold !important;
}

.dropdown {
     z-index: 1000;
}

.dropdown-item {
     padding-top: 10px !important;
     padding-bottom: 10px !important;
}

.dropdown-item:hover {
     color: rgb(253, 137, 4) !important;
     border-radius: 10px 0px 10px 0px;
     background:rgb(253, 252, 251) !important;
     font-size: 16px !important;
}

/************************* MENU DESPLEGABLE TOURS ************************/

/***************************************** EFECTOS EN LAS FOTOGRAFIAS ***************************************/

.contenedor-foto {
     width: 300px;
     padding-left: 10px;
     padding-right: 10px;     
     position: relative;     
     overflow: hidden;
}

.contenedor-foto:hover .info {
     transform: translate(0);
}

.contenedor-foto img{
     width: 100%;
     height: 100%;
     vertical-align: right;
     object-fit: cover;
}

.info {
     position: absolute;
     bottom: 10px;
     background: rgb(240, 148, 32);
     display: flex;
     justify-content: center;
     width: 100%;
     height: 25px;
     color: rgb(208, 248, 203);
     padding-top: 3px;
     transform: translate(100%);
     transition: transform 1s;
}

h6 {
      font-size: 15px;
}
/************************************* FIN EFECTOS EN LAS FOTOGRAFIAS **************************************/

/************************************* EFECTO PARALLAX **************************************/

#parallax {
     position: relative;
     min-height: 250px;
     background-image: url(../img/colima/parallax.jpg); 
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     
     color: #fff;
} 

.contenido-mexico {
     padding: 50px 350px 50px 350px;
}

.titulo-mexico {
     font-weight: bold;
     font-size: 4rem;
     margin-bottom: 30px;
     color: rgb(253, 73, 8);
}

.descripcion-mexico {
     font-weight: 500;
     font-size: 1.3rem;
     text-align: justify;
     color: rgb(177, 169, 169);
}

/************************************* FIN EFECTO PARALLAX **************************************/

/****************************************** ASIDE LIKE ******************************************/
/*
#like {
     position: relative;
     min-height: 550px;
     background-image: url(../img/like-5.jpg); 
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
} 

.img-like {
     position: absolute;
     padding:auto;
}
*/
/************************************** FIN ASIDE LIKE ******************************************/


/************************************* CAJA DE COMENTARIOS **************************************/

.accordion {
     position: relative;
     left: 50%;
     transform: translate(-50%,0);
     padding: 30px;
}

.accordion h4 {
     display: block;
     margin: 0 0 30px 0;
     color: rgb(165, 162, 161);
     text-transform: uppercase;
     font-weight: bold;
     cursor: pointer;
}

.accordion .comentarios {
     position: relative;
     overflow: hidden;
     opacity: 1;
     transform: translate(0,0);
     z-index: 2;
}

ul {
     list-style: none;
}

.accordion ul li {
     position: relative;
     padding-bottom: 4px;
}

.accordion ul li:nth-of-type(1){
     animation-delay: 0.5s;
}

.accordion ul li:nth-of-type {
     padding-bottom: 0;
}

.accordion ul li i {
     position: absolute;
     transform: translate(-6px, 0);
     margin-top: 16px;
     right: 0;
}

.accordion ul li i:before,
.accordion ul li i:after {
     content: "";
     position: absolute;
     background: #ff6873;
     width: 3px;
     height: 9px;
}

.accordion ul li i:before {
     transform: translate(-2px, 0) rotate(45deg);
}

.accordion ul li i:after {
     transform: translate(2px, 0) rotate(-45deg);
}

.accordion .comentarios,
.accordion ul li i:before,
.accordion ul li i::after {
     transition: all 1s ease-in-out;
}

.accordion ul li input[type=checkbox] {
     position: absolute;
     cursor: pointer;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
}

.accordion ul li input[type=checkbox]:checked ~ .comentarios {
     margin-top: 0;
     max-height: 0;
     opacity: 0;
     transform: translate(0, 50%);
} 

.accordion ul li input[type=checkbox]:checked ~ i:before {
     transform: translate(2px, 0) rotate(45deg);
}

.accordion ul li input[type=checkbox]:checked ~ i:after {
     transform: translate(-2px, 0) rotate(-45deg);
}

/************************************* FIN CAJA DE COMENTARIOS **************************************/

/************************************* MEDIAS QUERYS ****************************************/

@media screen and (max-width: 1950px){ 
     aside .descripcion {
          display: none;
     }

     .contenido-mexico {
          padding: 50px 200px 50px 200px;
     } 
}

@media screen and (max-width: 1024px) {
     .nav-links {
          width: 60%;
     }
     
     .contenido-mexico {
          padding: 50px 80px 30px 80px;
     } 
}

@media screen and (max-width: 991px){
     aside .descripcion {
          display: block;
          padding-top: 20px;
          padding-right: 20px;
          text-align: justify;
     }

     .intro{
          background: url("../img/puentesillas-durango-sm.jpg");
          height: 100vh;
          background-size: cover;
          background-position: center; 
          background-attachment: fixed;    
     } 
}

@media screen and (max-width: 872px){
     aside .descripcion {
          padding-top: 5px;
          padding-right: 10px;
     }

     .contenido-mexico {
          padding: 50px 30px 50px 30px;
     }

}

@media screen and (max-width: 768px) {
    body {
          overflow-x: hidden;
     }

     .logo {
          width: 75px;
     }

     .nav-links {          
          position: absolute;
          right: 0;
          height: 90vh;
          top: 10vh;
          background: #212121;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50%;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
     }

     .nav-links li {
          opacity: 0;
     }

     .burger {
          display: block;
     }
}


@media screen and (max-width: 595px) {
     aside .descripcion {
     display: none;
     }

     .contenido-mexico {
          padding: 50px 15px 30px 15px;
     }

     .titulo-mexico {
          font-size: 2rem;
          text-align: center;
     }

     .descripcion {
          font-size: 1rem;
     }
}

/************************************* MEDIAS QUERYS *******************************************************/

/************************************* ANIMACION DEL NAV **************************************************/

.nav-active {
     transform: translateX(0%);
}

@keyframes navLinkFade {
     from {
          opacity: 0;
          transform: translateX(50px);
     }
     to {
          opacity: 1;
          transform: translateX(0px);
     }
}

.toggle .line1 {
     transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
     opacity: 0;
}

.toggle .line3 {
     transform: rotate(45deg) translate(-5px, -6px);
}

/********************************* FIN ANIMACION DEL NAV **************************************************/