/* colours */
:root{
    --color-orange : rgb(226, 153, 0);
    --color-grey: rgb(76, 91, 98);
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-light-gray: rgb(129, 132, 129);
    --color-green: rgb(19, 204, 19);
    --color-red: rgb(204, 19, 19);
}

/* ===================================butttons ===================================*/

.btn-aragon {
    color: #FFFFFF;
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-aragon:hover,
.btn-aragon:focus,
.btn-aragon:active,
.btn-aragon.active,
.open .dropdown-toggle.btn-aragon {
    color: #FFFFFF;
    background-color: rgb(0, 0, 0);
    border-color: var(--color-);
}

.btn-aragon-danger {
    color: var(--color-orange);
    background-color: rgb(0, 0, 0);
    border-color: var(--color-black);
}

.btn-aragon-danger:hover,
.btn-aragon-danger:focus,
.btn-aragon-danger:active,
.btn-aragon-danger.active,
.open .dropdown-toggle.btn-aragon-danger {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-black);
}


body{
    background: var(--color-grey)
}

/* ===================================navegador=================================== */
nav{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position : sticky;
    top : 0;
    z-index:99999;
    background-color: rgb(0, 0, 0,0.2);
    backdrop-filter: blur(10px);
    border-top: 2px solid var( --color-orange );
}

.container__logo{
    width: 240px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container__logo img{
    width: 150px;
    height: 50px;
    margin-left: 50px;
}

input[type = checkbox], label{
  display: none;
}

nav ul{
    margin-top: 10px;
    display : flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-right: 40px;
}

.active{
    border-bottom: 2px solid var(--color-orange);
    background-color: var(--color-black);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color : var(--color-black);
}

.active a{
    color : var(--color-orange);
}


nav ul li{
    margin: 40px;
    padding: 5px;
    list-style: none;
    transition: all 0.3;
    -webkit-transition: all 0.3;
    -moz-transition: all 0.3;
    -ms-transition: all 0.3;
    -o-transition: all 0.3;
}

nav ul li:hover{
    border-bottom: 2px solid var(--color-orange);
    background-color: var(--color-black);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

nav ul li a i{
    color: var(--color-orange);
}

nav ul li a{
    margin: 10px;
    text-decoration: none;
    font-size: 18px;
    color: var(--color-white);
    font-weight: 600;
}

nav ul li a:hover{
    color : var(--color-white);
}

section .section__bg{
    width: 100%;
    height: 560px;
}

.section__bg{
    background-image: url(../img/carrusel/portada.jpg);
    width: 100%;
    max-width: 100%;
    height: 110vh;
    margin-top: -80px;
    background-size: cover;
    background-position: center center;
    position: relative;
}


.section__bg .bg__portada{
    position: absolute;
    width: 100%;
    height: 90px; 
    overflow: hidden; 
    transform: rotate(180deg); 
    line-height: 0;
    left: 0;
    bottom: 0;
}
.section__bg .bg__portada svg{
    stroke: none; 
    fill: var(--color-black);
    width: calc(100% + 1.3px);
}

/* ===================================formulario de reservas=================================== */
.section__form{
    padding: 30px 15px;
    position: absolute;
    top:62%;
    left:8%;
    background-color: rgb(255, 255, 255,0.2);
    backdrop-filter: blur(3px);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.section__form .btn-aragon{
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
}

.section__form .btn-aragon:hover i{
    color:var(--color-orange);
}

.btn__reserva{
    pointer-events: none;
    background: var(--color-black);
    border:1px solid var(--color-orange);
}

.btn__reserva i{
    color: var(--color-orange);
}

.btn__reserva__room .btn-aragon{
    border: 1px solid var(--color-orange);
}

.btn__reserva__room .btn-aragon{
    color: var(--color-black);
    font-weight: 500;
    box-shadow: 1px 1px 8px var(--color-black);
}

.btn__reserva__room .btn-aragon:hover i{
    color: var(--color-white);
}

.btn__reserva__room .btn-aragon:hover{
    color: var(--color-white);
    font-weight: 500;
    box-shadow: 1px 1px 8px var(--color-grey);
}

.btn__reserva__room .btn-aragon i{
    color:var(--color-black);
}

.is-valid{
    border: 2px solid var(--color-green);
}

.is-invalid{
    border: 2px solid var(--color-red);
}
.wave__form{
    display:none;
}

/* ===================================container__room ===================================*/

.container__room{
    width: 100%;
    max-width: 100%;
    padding: 20px 180px;
    background-color: var(--color-black);
    position: relative;
    z-index: 0;
}

.container__room h1, h2{
    color: var(--color-white);
    text-align: center;
    margin-bottom: 30px;
}
.container__room .container__img{
    width: 400px;
    height: 300px;
    padding: 10px;
    z-index: 1;

}

.container__room .container__img img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


.container__room .information{
    display:flex;
    flex-direction: column;
    align-items: left;
    padding: 20px 100px;
    color: var(--color-white);
    font-size: 18px;
}

.container__room .information__room p{
    padding: 5px 50px;
    font-size: 18px;
    color: var(--color-white);
}

.row__habitaciones{
    display: flex;
    flex-direction: row-reverse;
}

.container__room .information__room ul{
    list-style: none;
    padding: 5px 50px;
}

.container__room .information__room li{
    font-size: 18px;
    color: var(--color-orange);
}

.container__room .information__room i{
    font-size: 18px;
    color: var(--color-orange);
}

hr{
    color: var(--color-white);
}

.divider__room{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: -1;
}

.divider__room svg{
    width: calc(100% + 1.3px);
    height: 120px;
    transform: rotateY(180deg);
    fill: var( --color-grey );
}


.container__room img{
    width: 500px;
    height:auto;
    box-shadow: 2px 3px 5px var(--color-light-gray);
}

.col__animation{
    display:flex;
    justify-content: center;
    padding-bottom: 15px;
    height:200px;
}

.col__animation img{
    box-shadow:none;
    width: 500px;
    animation-name:logo;
    animation-duration:5s;
    animation-direction: alternate;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    margin-bottom: 15px;
}

@keyframes logo {
    0% {
        transform: translateY(10%);
        -webkit-transform: translateY(10%);
        -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
        -o-transform: translateY(10%);
};

    25% {
        transform: translateY(50%);
        -webkit-transform: translateY(50%);
        -moz-transform: translateY(50%);
        -ms-transform: translateY(50%);
        -o-transform: translateY(50%);
};

    50% {
        transform: translateY(70%);
        -webkit-transform: translateY(70%);
        -moz-transform: translateY(70%);
        -ms-transform: translateY(70%);
        -o-transform: translateY(70%);
};
    100% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
};
}


.col__covic{
    height:340px;
    padding:10px 20px;
}

.col__covic .carousel-inner img{
    width:100%;
    height:320px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
}

.col__covic__data h3{
    color: var(--color-white);
    text-align: center;
}

.col__covic__data p{
    color: var(--color-white);
    padding: 20px 10px;
}

/* ===================================section aside=================================== */
aside{
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    background-color: var( --color-grey );
}

.row__aside{
    padding: 0 50px;
}

.row__aside .col__card{
    margin-top: 30px;
    position: relative;
}

.row__aside .card__hospedaje,
.card__politicas,
.card__turismo{
    background-color: rgb(255, 255, 255,.7);
    backdrop-filter: blur(20px);
    width: 400px;
    height:380px;
    padding:5px 10px;
    margin-bottom:5px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.row__aside .ico__aside{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    text-align: center;
}

.row__aside .col__card .ico__aside i{
    padding: 20px;
    border: 1px solid var(--color-orange);
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    font-size:40px;
    color: var(--color-orange);
    background-color: var(--color-black);
}

.row__aside .col__card h5{
    text-align: center;
    margin-top: 10px;
    color: var(--color-black);
    margin-bottom : 10px;
}

.row__aside .col__card p{
    padding : 5px;
    color: var(--color-gray);
    margin-bottom : 40px;
}

.row__aside .col__card button{
    position: absolute;
    left : 40%;
    bottom : 0;
    margin-bottom: 10px;
}

/* ===================================section map=================================== */
.section__map {
    position: relative;
    background-color: var(--color-black);
    z-index:-1;
}

.section__map .divide__map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: -1;
}

.section__map .divide__map svg{
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    fill: var( --color-grey );
}
.section__map h2{
    color: var(--color-white);
    margin: 40px 0;
    text-align: center;
}

.section__map .col__map{
    padding: 10px 60px;
}

.section__map .col__map iframe{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 1px solid var(--color-orange);
}

/* ===================================section habitaciones=================================== */

main{
    width: 100%;
    max-width: 100%;
    height:auto;
    margin-top: -60px;
    background-image: url(../img/habitaciones/4.jpg);
    background-size: cover;
    background-position: center center;
}


main .row{
    padding: 10px 200px;
    height: auto;
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(7px);
}

main h1{
    width: 100%;
    height: auto;
    margin-top: 80px;
    margin-bottom: 20px;
    text-align: center;
    color:var(--color-black);
    text-decoration: underline solid var(--color-black);
    text-transform: uppercase;
    font-size: 30px;
}

main .row h2{
    margin-top: 20px;
}

main .col__room{
    height: auto;
    padding: 10px;
}

.card__room{
    height: 100%;
    padding: 30px 20px;
    background-color: rgba(0,0,0,0.8);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.col__room img{
    width: 100%;
    max-width: 100%;
    height : 300px;
    object-fit: cover;
    border: 2px solid var(--color-orange);
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
.col__room h2{
    text-align: center;
    color:var(--color-orange);
    margin-top: 5px;
}

.col__room p{
    padding:15px 10px;
    color : var(--color-white);
}

.col__room ul{
    width: 100%;
    height: auto;
    list-style: none;
}

.col__room li{
    margin-top:10px;
}

.col__room li, i{
    font-size:18px;
    color : var(--color-orange);
}

.col__room li i{
    margin-right: 15px;
}

.col__room button i{
    color : var(--color-black);
}

.col__room button:hover i{
    color : var(--color-orange);
}

/* ===================================section contacto=================================== */
.main__form{
    height: 100%;
    margin-top:-60px;
    padding-top: 80px;
    background-color: var(--color-white);
    background-image: url(../img/habitaciones/20200228_201102.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.col__form {
    width : 100%;
    height: 100vh;
    margin-top:-60px;
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255,255,255,0.4);
    backdrop-filter: blur(5px);
}


section .form__contacto{
    width: 450px;
    height: 500px;
    padding : 30px;
    background-color: rgba(0,0,0,0.9);
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}

section .form__contacto h2{
    color : var(--color-orange);
    text-align : center;
    margin-bottom: 30px;
}

section .form__contacto input, textarea{
    width:100%;
    color: var(--color-orange);
    font-size: 18px;
    margin:10px 0;
    background: #0F0E0E;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-orange);
    outline: none;
    transition: all .5;
    -webkit-transition: all .5;
    -moz-transition: all .5;
    -ms-transition: all .5;
    -o-transition: all .5;
}

.form__contacto input:focus, textarea:focus{
    border-bottom: 1px solid var(--color-grey);
}

section .form__contacto input::placeholder, textarea::placeholder{
    width:100%;
    color : var(--color-orange);
    font-size: 18px;
}

section i{
    color:var(--color-black);
}

.form__contacto .btn-aragon:hover i{
    color:var(--color-orange)
}


/* ===================================formulario de Galeria=================================== */
.container__galeria{
    margin:0px;
    padding:0px;
    margin-top: -60px;
}
.col__galeria img{
    width:100%;
    height:100vh;
    top: -60px;
}

.col__galeria  .btn-aragon-danger{
    border: 1px solid var(--color-orange);
    font-weight: 600;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.col__galeria  .btn-aragon-danger:hover{
    border: 1px solid var(--color-black);
    font-weight: 600;
    background: var(--color-orange);
    color: var(--color-black);
}

.col__galeria  .btn-aragon-danger:active{
    border: 1px solid var(--color-black);
    font-weight: 600;
    background: var(--color-orange);
    color: var(--color-black);
}

.col__galeria  .btn-aragon-danger:hover i{
    color: var(--color-black);
}

.col__galeria button i{
    color : var(--color-orange);
}

.galery__room{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left:40px;
    padding-right:40px;
    
}
.galery__room img{
    height: 500px;
    width:100%;
    border-radius: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow:3px 3px 8px rgba(0,0,0,0.5)
}

/* ===================================section turismo=================================== */
.turismo{
    background-color: var(--color-black);
    width: 100%;
    height: auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
}


.turismo .divide__turismo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 350px;
    overflow: hidden;
    line-height: 0;
}

.turismo .divide__turismo svg {
    display: block;
    width: calc(100% + 1.3px);
    fill: var(--color-grey);
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.turismo .divide__turismo__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 350px;
    transform: rotate(180deg);
    overflow: hidden;
    line-height: 0;
    z-index: -1;
}

.turismo .divide__turismo__bottom svg {
    display: block;
    width: calc(100% + 1.3px);
    fill: var(--color-grey);
}

.turismo .row{
    padding:100px 250px;
    position: relative;
    z-index: 1;
}
.turismo img{
    width:90%;
    height:300px;
    /* border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px; */
}

.turismo .information__turismo__cartago{
    padding:10px;
}

.turismo .information__turismo__cartago h3{
    color:var(--color-orange);
    text-align:center;
    padding:20px 0;
}

.turismo .information__turismo__cartago p{
    color:var(--color-white);
    padding:10px;
    text-align:center;
}

.turismo .information__turismo__cartago button{
    border: 1px solid var(--color-orange);
}

.turismo .information__turismo__cafetero{
    padding:10px;
}

.turismo .information__turismo__cafetero h3{
    color:var(--color-orange);
    text-align:center;
    padding:20px 0;
}

.turismo .information__turismo__cafetero p{
    color:var(--color-white);
    padding:2px;
    text-align:center;
}

.information__turismo__cafetero  button{
    border: 1px solid var(--color-orange);
}

.turismo .row__cafetero{
    display: flex;
    flex-direction: row-reverse;
}

.container__resena{
    display:flex;
    align-items: center;
    justify-items: center;
    height: 300px;
    padding: 20px 150px;
    margin-bottom: 30px;
}

.container__resena img{
    width: 100%;
    height: 300px;
    box-shadow:2px 2px 8px rgba(0,0,0,0.9);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.parrafo__resena{
    padding: 30px 60px;
    text-align: left;
    direction: rtl;
}

.btn__politicas:hover{
    color: var(--color-black);
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    margin-bottom: 10px;
}

/*===================================style modal turismo=================================== */

.modal{
    margin-top: 70px;
    max-width: 100%;
    background-color: rgb(0, 0, 0,.2);
    backdrop-filter: blur(15px);
    padding-bottom: 60px;
}


.modal h5{
    color: var(--color-black);
}

.modal .modal-content{
    box-shadow: 2px 0  5px var(--color-white);
}

.modal .card{
    width: 100%;
    height: 320px;
    margin:  10px;
    background: var(--color-grey);
    border: 1px solid var(--color-black);
}

.modal .card h5{
    color:var(--color-white);
    font-size: 15px;
    text-align:center;
    padding: 3px;
    margin-top: 2px;
    margin-bottom: 10px;
}

.modal .card img{
    width: 100%;
    height: 180px;
}

.modal .card .btn__url{
    width: 90%;
    position:absolute;
    bottom: 10px;
    display:flex;
    justify-content: center;
}

.modal .card .btn__url .btn-aragon-danger:hover{
    background: var(--color-orange);
}

.modal .card .btn__url .btn-aragon-danger:hover i{
    color: var(--color-black);
}


.modal .modal-footer .btn-aragon-danger{
    border: 1px solid var(--color-orange);
}

.modal .modal-footer .btn-aragon-danger:hover{
    border: 1px solid var(--color-black);
    background: var(--color-orange);
}
/*===================================setion footer=================================== */

footer{
    width: 100%;
    height: 110px;
    background-color: rgb(0, 0, 0,.3);
    backdrop-filter: blur(10px);
}

footer ul{
    display: flex;
    justify-content: space-between;
    align-items : center;
    padding-top: 10px;
}

footer li{
    list-style: none;
    padding: 10px;
    transition: all 0.3;
    -webkit-transition: all 0.3;
    -moz-transition: all 0.3;
    -ms-transition: all 0.3;
    -o-transition: all 0.3;
}

footer li:hover{
    border-bottom: 2px solid var(--color-orange);
    background-color: var(--color-black);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

footer a:hover{
    text-decoration: none;
    color: var(--color-orange);
}

footer li:hover  a{
    color: var(--color-orange);
}

footer li:hover  i{
    color: var(--color-orange);
}

footer i, a{
    text-decoration: none;
    font-size:18px;
    color: var(--color-white);
}

footer p{
    font-size:18px;
    color: var(--color-orange);
    text-align : center;
}

.see{
    display: block;
}

.see__not{
    display: none;
}


/*=================================== @medias-------tablet ===================================*/

@media (min-width: 768px) and (max-width: 1023px) {

    
    nav{
        max-width: 100%;
        height: 50px;
        border-top: 1px solid var( --color-orange );
    }

    nav ul{
        display:flex;
        align-items: center;
        margin-right: 30px;
    }

    nav ul li{
        margin: 3px;
        padding: 5px;
    }
    nav ul li a{
        margin: 2px;
        font-size: 18px;
    }

    .container__logo{
        width: 100px;
        height: 40px;
    }
    .container__logo img{
        width: 100px;
        height: 40px;
        margin-left: 15px;
    }

    .section__bg{
        background-image: url(../img/habitaciones/4.jpg) no-repeat;
        width: 100%;
        max-width: 100%;
        margin-bottom: 7px;
        height: 60vh;
        box-shadow: 0px 4px 6px rgba(0,0,0);
        object-fit: cover;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .section__form{
        padding: 30px 15px;
        position: absolute;
        top:40%;
        left:3%;
        background-color: rgb(255, 255, 255,0.2);
        backdrop-filter: blur(3px);
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    /* ===================================container__room ===================================*/

    .container__room{
        padding: 20px 20px;
        margin-top: -8px;
    }

    .container__room h1{
        color: var(--color-white);
        text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .container__room h2{
        color: var(--color-white);
        text-align: center;
        margin-top: 0;
        margin-bottom: 5px;
    }
    .container__room .container__img{
        width: 365px;
        height: 250px;
        padding: 10px;
        display:flex;
        justify-content: center;
        align-items: center;
        z-index: 1;

    }

    .container__room .container__img img{
        width: 100%;
        height: auto;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .container__room .information{
        display:flex;
        flex-direction: column;
        align-items: left;
        padding: 20px 7px;
        color: var(--color-white);
        font-size: 18px;
    }

    .container__room .information__room p{
        padding: 5px 50px;
        font-size: 18px;
        color: var(--color-white);
    }

    .container__room .information__room ul{
        list-style: none;
        padding: 5px 50px;
    }

    .container__room .information__room li{
        font-size: 18px;
        color: var(--color-orange);
    }

    .container__room .information__room i{
        font-size: 18px;
        color: var(--color-orange);
    }

    hr{
        color: var(--color-white);
    }
    
    /* ===================================section aside=================================== */
    aside{
        width: 100%;
        max-width: 100%;
        height: auto;
        background-color: var( --color-grey );
    }

    .row__aside{
        padding: 0 5px;
    }

    .row__aside .col__card{
        margin-top: 10px;
    }

    .row__aside .card__hospedaje,
    .card__politicas,
    .card__turismo{
        background-color: rgb(255, 255, 255,.7);
        backdrop-filter: blur(20px);
        width: 230px;
        height:590px;
        padding:5px 3px;
        margin-bottom:5px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .row__aside .col__card button{
        position: absolute;
        left : 30%;
        bottom : 0;
        margin-bottom: 10px;
    }

    /* ===================================section map=================================== */

    .section__map h2{
        margin: 30px 0;
    }

    .section__map .col__map{
        padding: 10px 10px;
    }

    .section__map .col__map iframe{
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border: 1px solid var(--color-orange);
    }

    /* ===================================section habitaciones=================================== */

    main .row{
        padding: 10px 20px;
    }


    main .col__room{
        height: auto;
        padding: 5px;
    }

    .card__room{
        padding: 20px 10px;
    }

    .col__room img{
        width: 100%;
        max-width: 100%;
        height : 220px;
        border: 1px solid var(--color-orange);
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .col__room p{
        padding:5px 5px;
        color : var(--color-white);
    }

    .col__room li{
        margin-top:8px;
    }

    .col__room li, i{
        font-size:16px;
        color : var(--color-orange);
    }

    /* ===================================section contacto=================================== */
    .main__form{
        height: 100%;
        margin-top:0;
        padding-top: 10px;
    }

    .col__form {
        width : 100%;
        height: auto;
        margin-top:-20px;
        padding-top: 20px;
    }

    section .form__contacto{
        width: 450px;
        height: 500px;
        padding : 10px;
        margin-bottom: 10px;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    /* ===================================section turismo=================================== */


    .turismo .row{
        padding:100px 20px;
        z-index: 1;
    }
    .turismo img{
        height:280px;
    }

    .turismo .information__turismo__cartago{
        padding:3px;
    }

    .turismo .information__turismo__cartago h3{
        padding:10px 0;
    }

    .turismo .information__turismo__cartago p{
        padding:1px;
    }

    .turismo .information__turismo__cafetero{
        padding:1px;
    }

    .turismo .information__turismo__cafetero h3{
    padding:10px 0;
    }

    .turismo .information__turismo__cafetero p{
        padding:1px;
    }

    .container__resena{
        display:flex;
        align-items: center;
        justify-items: center;
        height: 300px;
        padding: 20px 30px;
    }
    
    .container__resena img{
        width: 100%;
        height: 300px;
        box-shadow:2px 2px 8px rgba(0,0,0,0.9);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    
    .parrafo__resena{
        padding: 10px 10px;
        text-align: left;
        direction: rtl;
    }


}


/* ===================================@medias------- movil ===================================*/

@media (max-width: 767px) {

    nav{
        width: 100%;
        max-width: 100%;
        height: 50px;
        display: block;
        background-color: rgb(0, 0, 0, 0.2);
        backdrop-filter: blur(20px);
        border-top: 1px solid var( --color-orange );
    }

    nav label{
        display: block;
        position: absolute;
        top: 10px;
        left: 85%;
        color: var(--color-orange);
    }

    nav label i{
        font-size: 30px;
        color: var(--color-orange);
    }

    nav ul{
        width: 100%;
        height: 100vh;
        margin-left:-100%;
        display : block;
        text-align: center;
        position : sticky;
        padding-top: 14px;
        background-color: rgb(0, 0, 0, 0.94);
        backdrop-filter: blur(8px);
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    nav ul li{
        margin-top : 8px;
    }

    nav ul li:hover{
        border-right: 1px solid var(--color-orange);
    }

    nav ul li a{
        margin: 8px;
        padding: 10px;
        font-size: 20px;
    }

    .active{
        border-right: 2px solid var(--color-orange);
        border-bottom: 2px solid var(--color-orange);
        background: var(--color-grey);
        color: var(--color-black);
    }

    .active a{
        color: var(--color-white);
        font-size: 20px;
    }
    .active i{
        font-size: 20px;
    }

    .check__bars:checked ~ ul{
        margin-left:0;
    }

    .container__logo{
        width: 150px;
        height: 40px;
        padding:2px;
    }

    .container__logo img{
        width: 100px;
        height: 40px;
        margin-left: 5px;
    }

    .section__bg{
        background-image: url(../img/habitaciones/4.jpg) no-repeat;
        width: 100%;
        max-width: 100%;
        margin-bottom: 7px;
        height: 60vh;
        box-shadow: 0px 4px 6px rgba(0,0,0);
        object-fit: cover;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .bg__portada{
        display: none;
    }

    .wave__form{
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
    }

    .wave__form svg{
        display: block;
        width: calc(100% + 1.3px);
        height: 29px;
        fill: var(--color-white);
    }

    /* ===================================formulario reservas=================================== */
    .section__form{
        padding: 4px 15px;
        margin-top: -10px;
        display: block;
        position : static;
        background-color: var(--color-white);
    }

    .section__form button{
        margin-bottom: 10px;
        background: var(--color-black);
        border:1px solid var(--color-black);
    }

    .section__form button i{
        color: var(--color-orange)
    }

    .section__form::before{
        content: 'Generar Reservar';
        width: 100%;
        font-size: 30px;
        display: flex;
        font-weight: 600;
        align-items: center;
        justify-content: center;
        padding: 10px;
        color: var(--color-black);
    }
   
    .container__room{
        width: 100%;
        max-width: 100%;
        padding: 30px 2px;
        margin-top: 20px;
        background-color: var(--color-black);
        position: relative;
        z-index: 0;
    }
    
    .container__room h1, h2{
        color: var(--color-orange);
        text-align: center;
        padding: 0 20px;
        margin-top: 5px;
        margin-bottom: 30px;
    }
    .container__room .container__img{
        width: 100%;
        height: auto;
        padding: 10px 20px;
        z-index: 1;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
    
    }
    
    .container__room .container__img img{
        width: 100%;
        height: auto;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;

        box-shadow: 1px 5px 8px var(--color-grey);
    }
    
    .container__room .information{
        display:flex;
        flex-direction: column;
        align-items: left;
        padding: 20px 30px;
    }
    
    .container__room .information{
        color: var(--color-white);
        font-size: 18px;
    }
    
    .container__room .information__room p{
        padding: 5px 30px;
        font-size: 18px;
        color: var(--color-white);
    }
    
    .row__habitaciones{
        display: flex;
        flex-direction: row-reverse;
    }
    
    .container__room .information__room ul{
        list-style: none;
        padding: 5px 50px;
    }
    
    .container__room .information__room li{
        font-size: 18px;
        color: var(--color-orange);
    }
    
    .container__room .information__room i{
        font-size: 18px;
        color: var(--color-orange);
    }
    
    hr{
        color: var(--color-white);
    }
    
    .divider__room{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
        z-index: -1;
    }
    
    .divider__room svg{
        width: calc(100% + 1.3px);
        height: 120px;
        transform: rotateY(180deg);
        fill: var( --color-grey );
    }
    
    
    .container__room img{
        width: 500px;
        height:auto;
    }
    

    aside{
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
        background-color: var( --color-grey );
    }
    
    .row__aside{
        padding: 0 1px;
    }
    
    .row__aside .col__card{
        margin-top: 10px;
        position: relative;
    }
    
    .row__aside .card__hospedaje,
    .card__politicas,
    .card__turismo{
        width: 100%;
        height:auto;
        padding:5px 5px;
        margin-bottom:5px;
    }

    .row__aside .col__card .ico__aside i{
        padding: 20px;
        border: 1px solid var(--color-orange);
        border-radius:50%;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        -ms-border-radius:50%;
        -o-border-radius:50%;
        font-size:40px;
        color: var(--color-orange);
        background-color: var(--color-black);
    }
    
    .row__aside .col__card p{
        padding : 5px;
        margin-bottom : 50px;
    }
    
    .row__aside .col__card button{
        left : 30%;
    }

    .col__covic{
        max-width: 100%;
        height:240px;
        padding:15px 20px;
    }
    /* http://jetro.colombiahosting.com.co/cpanel */
    .col__covic .carousel-inner img{
        max-width:100%;
        height:220px;
    }

    .col__animation{
        height:200px;
    }

    .col__animation img{
        box-shadow:none;
        max-width: 100%;
    }
   
    /* ===================================section map ===================================*/
    .section__map .divide__map svg{
        display: block;
        width: calc(100% + 1.3px);
        height: 60px;
        fill: var( --color-grey );
    }
    .section__map h2{
        margin: 20px 0;
    }

    .section__map .col__map{
        padding: 10px 1px;
    }

    .section__map .col__map iframe{
        height:300px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border: 1px solid var(--color-orange);
    }

    /*=================================== section habitaciones ===================================*/


    main .row{
        padding: 5px 4px;
    }

    main h1{
        color: var( --color-white);
        margin-top:60px;
        margin-bottom:10px;
        text-decoration : none;
    }

    main .row h2{
        margin-top: 10px;
        margin-bottom: 10px;
    }

    main .col__room{
        height: auto;
        padding: 3px;
    }

    .card__room{
        height: 100%;
        padding: 15px 8px;
    }

    .col__room img{
        height : 200px;
        border: 1px solid var(--color-orange);
        border-top-left-radius: 20%;
        border-bottom-right-radius: 20%;
    }

    .col__room p{
        padding:10px 5px;
        color : var(--color-white);
    }

    .col__room ul{
        width: 100%;
        height: auto;
        list-style: none;
    }

    .col__room li{
        margin-top:3px;
    }

    .col__room li i{
        margin-right: 15px;
    }


    /* ===================================section contacto ===================================*/
    .col__form {
        max-width : 100%;
        height: auto;
        margin: 0;
        padding: 3px;
        margin-top:-60px;
        padding-top: 1px;
        display: block;
    }

    section .form__contacto{
        width: 100%;
        margin-top:50px;
        margin-bottom: 10px;
        height: auto;
        padding : 15px;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    section .form__contacto h2{
        text-decoration: underline;
    }

    section .form__contacto input, textarea{
        margin: 20px 0;
    }

    /* ===================================section Galeria ===================================*/

    .galery__room{
        padding: 0;
        padding-top:5px;
        padding-bottom:5px;
    }
    .galery__room img{
        height: 300px;
    }




    /* ===================================section turismo ===================================*/
    .turismo{
        background-color: var(--color-black);
        width: 100%;
        max-width: 100%;
        height: auto;
        max-width: 100%;
        padding: 1px;
        position: relative;
    }

    .turismo .divide__turismo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 350px;
        overflow: hidden;
        line-height: 0;
        z-index: -1;
    }

    .turismo .divide__turismo svg {
        display: block;
        width: calc(100% + 1.3px);
        fill: var(--color-grey);
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }

    .turismo .divide__turismo__bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 350px;
        transform: rotate(180deg);
        overflow: hidden;
        line-height: 0;
        z-index: -1;
    }

    .turismo .divide__turismo__bottom svg {
        display: block;
        width: calc(100% + 1.3px);
        fill: var(--color-grey);
    }

    .turismo .row{
        padding: 20px 0;
        margin:0;
        z-index: 1;
    }

    .turismo img{
        width:100%;
        max-width: 100%;
        height:200px;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        z-index: 1;
}

    .turismo .information__turismo__cartago{
        padding:3px;
    }

    .turismo .information__turismo__cartago h3{
        padding:10px 0;
    }

    .turismo .information__turismo__cartago p{
        padding:3px;
    }

    .turismo .information__turismo__cartago button{
        border: 1px solid var(--color-orange);
    }

    .turismo .information__turismo__cafetero{
        padding:3px;
    }

    .turismo .information__turismo__cafetero h3{
        padding:10px 0;
    }

    .turismo .information__turismo__cafetero p{
        padding:2px;
    }
    .information__turismo__cafetero  button{
        border: 1px solid var(--color-orange);
    }

    .turismo .row__cafetero{
        display: flex;
        flex-direction: row-reverse;
    }

    .container__resena{
        display:flex;
        align-items: center;
        justify-items: center;
        height: 300px;
        padding: 20px 15px;
    }
    
    .container__resena img{
        width: 100%;
        height: 300px;
        box-shadow:2px 2px 8px rgba(0,0,0,0.9);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    
    .parrafo__resena{
        padding: 10px 10px;
        text-align: left;
        direction: rtl;
    }

    /*===================================style modal turismo=================================== */

    .modal{
        margin-top: 50px;
        width: 100%;
        max-width: 100%;
        background-color: rgb(0, 0, 0,.2);
        backdrop-filter: blur(15px);
        padding-bottom: 20px;
        padding: 5px;
    }


    .modal h5{
        color: var(--color-black);
        font-size: 15px;
    }

    .modal .card{
        width: 100%;
        max-width: 100%;
        height: 300px;
        margin:  0px;
        margin-bottom: 10px;
        background: var(--color-grey);
        border: 1px solid var(--color-black);
    }

    .modal .card h5{
        color:var(--color-white);
        font-size: 15px;
        text-align:center;
        padding: 3px;
        margin-top: 2px;
        margin-bottom: 10px;
    }

    .modal .card img{
        width: 100%;
        height: 180px;
    }

    .modal .card .btn__url{
        width: 90%;
        position:absolute;
        bottom: 10px;
        display:flex;
        justify-content: center;
    }

    .modal .card .btn__url .btn-aragon-danger:hover{
        background: var(--color-orange);
    }

    .modal .card .btn__url .btn-aragon-danger:hover i{
        color: var(--color-black);
    }


    .modal .modal-footer .btn-aragon-danger{
        border: 1px solid var(--color-orange);
    }

    .modal .modal-footer .btn-aragon-danger:hover{
        border: 1px solid var(--color-black);
        background: var(--color-orange);
    }


    
    /* ===================================formulario de Galeria=================================== */

    .col__galeria img{
        width:100%;
        max-height:60vh;
    }

    .col__galeria h2{
        display:block;
        color: var(--color-white);
        text-shadow: 2px 3px 8px  rgba(0,0,0,0.9);
    }


    footer{
        margin-top: 10px;
        width: 100%;
        height: auto;
    }

    footer ul{
        display: flex;
        flex-direction: column;
        align-items : center;
        padding-top: 10px;
    }

    footer ul li i,a{
        color:var(--color-orange);
        font-weight: 500;
    }

    .see{
        display: block;
    }
    
    .see__not{
        display: none;
    }


}