@media screen and (max-width: 825px) {

    .rooms {
        width: 95%;
    }

    .rooms article {
        width: 30%;
        height: 350px;
    }

    .rooms .detail-rooms {
        margin-top: -110px;
    }

    .serv i {
        font-size: 16px;
        margin-left: 2px;
        margin-right: 2px;
    }

    .room h2 {
        font-size: 32px;
    }

    .detail-room {
        padding-bottom: 45px;
    }

    .date-booking input {
        width: 10%;
    }

    .planes {
        width: 92%;
    }

    .gallerys {
        width: 92%;
    }

    .detail-header .description {
        width: 50%;
    }
}

@media screen and (max-width: 450px) {

    .btn-bg {
        margin-top: 30px;
    }

    .detail-header .description {
        width: 75%;
    }

    .detail-header .description button{
        display: block;
        margin: 0px auto;
    }


    .detail-header .description h1 {
        font-size: 42px;
        line-height: 45px;
        text-align: center;
    }

    .detail-header .description p {
        margin-bottom: 24px;
        text-align: center;
    }

    .experiences .btn {
        margin-left: 22px;
        margin-top: 20px;
    }

    .experiences .btn {
        display: block;
        padding: 9px 19px;
        margin: 0px auto;
        margin-top: 25px;
        font-size: 14px;
    }

    .descript {
        font-size: 18px;
        width: 76%;
        margin-top: 20px;
        text-align: center;
    }

    .rooms .detail-rooms {
        margin-top: -122px;
    }

    .experiences .colum1 img {
        margin-top: 14px;
        width: 110%;
    }

    .title {
        font-size: 26px;
    }

    .subtitel {
        font-size: 13px;
    }

    /* .experiences .img-top {
        margin-top: -132px;
    } */

    .experiences .img-top img {
        width: 95%;
    }

    .experiences .img-bootom {
        margin-top: -57px;
        margin-left: -60px;
        margin-bottom: -44px;
    }

    .experiences .img-bootom img {
        width: 110%;
    }

    .rooms {
        flex-direction: column;
    }

    .rooms article {
        width: 70%;
        height: 400px;
        margin: 0px auto;
        margin-bottom: 35px;
    }

    .room .desc-parrafo {
        font-size: 18px;
        margin-top: 20px;
    }

    .piscina,
    .coworking,
    .restauran {
        flex-direction: column;
        margin-top: 40px;
    }

    .image-trabj {
        width: 100%;
        order: -1;
    }

    .detail-piscina,
    .detail-coworking,
    .detail-restaurant {
        width: 100%;
    }

    .footer .footer-data {
        justify-content: center;
        width: 80%;
        flex-direction: column;
        margin-bottom: 45px;
    }

    .reservas, 
    .enlaces, 
    .contacto {
        width: 100%;
        align-items: center;
        text-align: center;
        margin-top: 45px;
    }

    .info .redes-min {
        margin-right: 30px;
    }

    .info span{
        margin-left: 30px;
        font-size: 12px;
        width: 40%;
    }

    .experiences{
        margin-top: 0px;
    }

    .title-home-experiences{
        margin-top: 40px;
    }

    .desc-parrafo {
        font-size: 20px; 
        margin-top: 50px;       
    }

    /* .bg_trans_pg h1 {
        margin-top: 15%;
    } */

    .header-pg .sub-title {
        margin-top: 10%;
    }

    .item-gallery {
        width: 47%;
        height: 220px;
    }

    .rooms-pg article {
        flex-direction: column;
    }

    .image-room, .detail-room {
        width: 100%;
        margin-top: 25px;
    }

    .detail-room p {
        width: 80%;
        text-align: center;
    }

    .data-serv {
        flex-direction: column;
    }

    .data-serv h2 {
        margin-left: 0px;
    }

    .serv {
        margin-right: 0px;
        margin-top: 10px;
    }

    .plan {
        flex-direction: column;
    }

    .detail-plan, 
    .img-plan {
        width: 100%;
        margin-top: 30px;
    }

    .cont-room-booking {
        flex-direction: column;
    }

    .cont-room-booking {
        width: 90%;
    }

    .desc-room {
        width: 100%;
    }

    .desc-room p {
        text-align: justify;
    }

    .date-booking form {        
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        width: 100%;
    }

    .date-booking input {
        width: 100%;
        margin-bottom: 15px;
    }

    .date-booking input[type="text"] {
        width: 94%;
        padding: 10px 6px;
    }

    .serv-icon .box-icon {
        width: 12%;
    }

    .serv-icon .box-icon p {
        font-size: 7px;
        line-height: 9px;
        width: 77%;
    }

    .box-btn {
        width: 85%;
        margin-top: 30px;
    }

    .email .descrip-email input[type="text"] {
        width: 100%;
    }

    .email .descrip-email p {
        width: 100%;
        text-align: center;
    }

    .email .descrip-email h3 {
        font-size: 20px;
        text-align: center;
    }

    .email {
        flex-direction: column;
        height: 375px;
    }

    .email .descrip-email {
        width: 72%;
        margin-left: 0px;
    }

    .email .descrip-email input[type="submit"] {
        display: block;
        margin: 0px auto;
        margin-top: 25px;
    }
    
    .box-form {
        flex-direction: column;
        margin-bottom: 0px;

    }

    .box-form-one, 
    .box-form-mult, 
    .box-form-item {
        margin-bottom: 15px;
        width: 100%;
    }

    .box-form input {
        margin-top: 5px;
    }

    .cont-det-booking {
        width: 75%;
        padding-right: 25px;
    }
}