@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto:wght@300&display=swap');
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background-color: #b6afeb;
    font-family: 'Roboto', sans-serif;

}
.section-cabanas-los-agaves{
    width: 100%;
}

.cabanas-los-agaves-body{
    background-color: #0efff9;
    border: solid 1px white;
    width: 98%;
    margin:auto;
    margin-top: 10px;

    padding: 10px;
    box-shadow: 2px 2px 2px black;

    opacity: 0;
    transform: scale(0.5);
    transition: 0.7s ease-in-out all;

}


.cabanas-los-agaves-body.visible{
    opacity: 1;
    transform: scale(1);
}

.cabanas-los-agaves-body-header{
    font-family: 'Great Vibes', cursive;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
}
.cabanas-los-agaves-body-header p{
    font-size: 27px;
    text-align: center;
    letter-spacing: 5px;

}

.cabanas-los-agaves-body-poster-slider-estatico{
    width: 100%;
    padding: 5px;
}
.cabanas-los-agaves-poster{
    width: 100%;
    display:flex
}
.cabanas-los-agaves-poster-imagen{
    width: 96%;
    margin: auto;
    text-align: center;
}
.cabanas-los-agaves-poster-imagen img{
    border-radius: 7px;
    width: 100%;
    box-shadow: 2px 2px 2px black;
}
.cabanas-los-agaves-slider-estatico{
    width: 96%;
    margin: auto;
    padding: 5px;

}
.cabanas-los-agaves-slider-poster{
    width: 92%;
    margin: auto;
}
.cabanas-los-agaves-slider-poster-imagen{
    width: 100%;
    margin: auto;
}
.cabanas-los-agaves-slider-poster-imagen img{
    border-radius: 7px;
    width: 100%;
    box-shadow: 2px 2px 2px black;
}



.cabanas-los-agaves-slider-miniatura {
    border: solid 1px white;
    border-radius: 5px;
    width: 96%;
    margin: auto;
    padding: 5px 0px;
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    box-shadow: 2px 2px 2px black;
  }
  
  .cabanas-los-agaves-slider-miniatura button {
    background-color: rgb(206, 226, 186);
    border-radius: 6px;
    margin: auto;
    padding: 2px;
    transition: 700ms;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .cabanas-los-agaves-slider-miniatura button:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
  
  .cabanas-los-agaves-slider-miniatura .imagenMiniatura {
    width: 98%;
    max-width: 90px;
  }
  .cabanas-los-agaves-slider-miniatura .imagenMiniatura img {
    border-radius: 4px;
    width: 100%;

    }

.cabanas-los-agaves-descripcion-reservacion-container{
    width: 100%;
    padding: 5px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.cabanas-los-agaves-descripcion{
    border: solid 1px white;
    border-radius: 5px;
    width: 96%;
    margin: auto;
    margin-bottom: 5px;
    padding: 8px 5px 8px 15px;
    box-shadow: 2px 2px 2px black;
}
.cabanas-los-agaves-reservacion{
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.cabanas-los-agaves-reservacion p{
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 5px;
}
.cabanas-los-agaves-reservacion a{
    background-color: whitesmoke;
    border-radius: 4px;

    color: black;
    text-decoration: none;
    width: 75%;
    margin: auto;
    padding: 3px;
    display: flex;
    justify-content: space-around;
    box-shadow: 2px 2px 2px black;
    transition: 500ms;
}
.cabanas-los-agaves-reservacion a:hover{
    transform: scale(1.1);
}

.cabanas-los-agaves-reservacion a img{
    width: 80%;
    max-width: 30px;
}
.cabanas-los-agaves-reservacion a .texto-what{
    display: flex;
    align-items: center;
    
}
.ubicacion{
    background-color: rgba(195, 178, 241, 0.8);
    width: 100%;
    max-width: 380px;
    margin: 8px auto 0px;
    padding: 4px;
    box-shadow: 2px 2px 2px black;

}

footer{
    background-color: rgba(151, 150, 150, 0.8);

    width: 98%;
    margin: 10px auto;
    box-shadow: 2px 2px 2px black;
    
}
.footer-header{

    text-align: center;
    width: 100%;
    margin: auto;
    
}
.footer-article{
    text-align: center;
}


/*-----------------600----------------------------------*/
@media (min-width: 600px) {
    #inicio{
    margin-top: 50px;
    }
    .cabanas-los-agaves-body-poster-slider-estatico{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
   
   
    }
   /*-----------------700----------------------------------*/
@media (min-width: 700px) {
    .cabanas-los-agaves-descripcion-reservacion-container{
        padding: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .cabanas-los-agaves-descripcion{
        width: 45%;
        margin: auto;
         
    }
   
   
    }
       /*-----------------900----------------------------------*/
@media (min-width: 900px) {
    section{
        width: 90%;
        margin: auto;
    }

   .section-cabanas-los-agaves{
       display: flex;
       flex-direction: row;
       justify-content: space-around;
   }
   .cabanas-los-agaves-body{
       width: 45%;
   }
  
   .cabanas-los-agaves-descripcion-reservacion-container{
    display: flex;
    flex-direction: column;
   }
   .cabanas-los-agaves-descripcion{
       width: 100%;
       margin-top: 5px;
   }
    }

         /*-----------------1400----------------------------------*/
         @media (min-width: 1400px) {
            .cabanas-los-agaves-descripcion-reservacion-container{
                padding: 5px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }
            .cabanas-los-agaves-body{
                width: 48%;
            }
            .cabanas-los-agaves-descripcion{
                width: 45%;
                margin: auto;
                 
            }
            .cabanas-los-agaves-reservacion a{
                width: 65%;
            }
             
              }