/* Copyright (C) 2024 KaceM

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

contacto@kacem.pw */
:root {
    --light: #FFFFFF;
    --light-ts: #DADAE655;
    --green: #576640;
    --orange: #D07320;
    --yellow: #DAAA19;
    --blue: #024A60;
    --blue-ts: #024A6099;
    --black-ts-d: #0B0B0CAA;
    --black-ts: #0B0B0C40;
}

* {
    margin: 0;
    padding: 0;
}

main {
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: ui-sans-serif;
}

p {
    font-family: serif;
}

body {
    min-height: 100vh;
    background-color: #FFFFFF;
}

header {
    background-color: transparent;
    color: var(--light);
    text-align: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    flex-wrap: wrap;
    width: 100%;
    backdrop-filter: brightness(0.8);
    z-index: 4;
}

nav a img[alt="Logo"] {
    margin: 0 0 10px 10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.col-l {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.col-sm {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: fit-content;
}

.col-m {
    display: flex;
    flex-direction: column;
    width: 45%;
}

.col-s {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.btn-transparent {
    background: transparent;
    border: none;
    font-size: 42px;
    color: var(--light);
    margin-right: 36px;
}

.btn-transparent:hover {
    cursor: pointer;
}

.btn-primary {
    font-size: 1.2rem;
    padding: 10px 20px;
    background: var(--yellow);
    border: transparent;
    color: #FFFFFF;
    filter: brightness(0.8);
    transition: .25s ease-in-out;
    word-break: break-all;
}

.btn-primary:hover {
    cursor: pointer;
    filter: brightness(1);
}

#reserva-btn, #checkin-btn {
    margin-left: auto;
    margin-right: 45px;
    text-decoration: none;
    font-family: 'Poppins';
    font-size: 20px;
    width: 130px;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 1.5rem;
    font-weight: 200;
}

#checkin-btn {
    margin-left: 0;
    width: 175px;
}

#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: normal;
    max-width: 0px;
    height: 100%;
    z-index: 4;
    overflow: hidden;
    background: var(--black-ts-d);
}

#sidebar-btn {
    align-self: baseline;
    font-size: 22px;
    background: transparent;
    border: transparent;
    padding: 5px 0;
    margin-left: 13.5%;
    color: var(--light);
}

#sidebar-btn:hover {
    cursor: pointer;
}

#sidebar ul {
    width: 73%;
    align-self: center;
    margin-top: 20px;
    list-style: none;
}

#sidebar ul li {
    font-size: 14px;
    font-weight: 300;
    font-family: 'Poppins';
    border-bottom: 1px solid var(--light-ts);
    margin-bottom: 20px;
}

#sidebar ul li button {
    background: transparent;
    border: transparent;
    font-family: 'Poppins';
    font-size: 14px;
    color: var(--light);
    font-weight: 300;
}

#sidebar ul li button[title="Eliminar"] {
    margin-left: auto;
}

#sidebar ul li a:hover {
    color: var(--yellow);
}

#sidebar ul li button:hover {
    cursor: pointer;
    color: var(--yellow);
}

#sidebar li a {
    color: var(--light);
    text-decoration: none;
}

#sidebar ul li[id^="d"] {
    border-bottom: none;
}

#sidebar ul li[id^="d"]:hover {
    background: none;
}

#sidebar ul li[id^="d"] ul {
    all: unset;
}

#sidebar ul li[id^="d"] ul li {
    all: unset;
    display: list-item;
    color: var(--light);
    padding: 5px 0;
    margin-left: 20px;
}

shop-cart li {
    border-bottom: 1px solid #FBFBFB55 !important;
    margin: 0;
}

shop-cart p {
    color: var(--light);
    font-family: 'Cinzel';
}

shop-cart button {
    font-family: 'Poppins';
}

shop-cart img + div {
    display: flex;
    flex-direction: column;
    min-height: 70px;
    width: 65%;
}

shop-cart img + div p:nth-child(2) {
    font-size: 80%;
}

shop-cart input {
    font-family: 'Poppins';
    background: transparent;
    border: transparent;
    box-sizing: border-box;
    text-align: center;
    color: var(--light);
    width: 25%;
    max-width: 50px; 
}

shop-cart input:focus {
    outline: 0;
}

.border-decoration {
    border-bottom: 1px solid #00000044;
}

shop-cart li > div {
    display: flex;
    justify-content: space-between;
}

.cart-btn-group {
    display: flex;
    margin-top: auto;
}

@keyframes slider {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#slider {
    width: 100%;
    height: 820px;
    background: linear-gradient(45deg, #024A6070, #00101470);
}

.slider {
    width: 100%;
    height: 820px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-s {
    position: relative;
    height: 419px;
}

.slider-text {
    position: absolute;
    position-area: y-start;
    transform: translateY(-286px);
    font-family: 'Cinzel';
    font-size: 36px;
    font-weight: 200;
}

.slider-img {
    position: absolute;
    position-area: y-start;
    width: 240px;
    height: 89px;
    transform: translateY(-116px);
}

#slider div.slider:nth-child(n + 2) {
    filter: opacity(0.5);
}

.fit-content {
    width: fit-content;
}

.justify-center {
    justify-content: center;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-start {
    justify-content: start;
}

.justify-end {
    justify-content: end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.align-center {
    align-items: center;
}

.align-self-center {
    align-self: center;
}

.align-end {
    align-items: end;
}

.no-wrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-row {
    flex-direction: row !important;
}

.display-block {
    display: block !important;
}

.display-inline-flex {
    display: inline-flex;
}

.border-none {
    border: 0;
}

.p-s {
    padding: 5px !important;
}

.p-m {
    padding: 10px;
}

.padding-none {
    padding: 0 !important;
}

.margin-none {
    margin: 0 !important;
}

.m-s {
    margin: 5px;
}

.m-m {
    margin: 15px !important;
}

.mtb-s {
    margin: 5px 0 !important;
}

.mtb-m {
    margin: 15px 0;
}

.mt-20 {
    margin-top: 20px;
}

.m-37 {
    margin: 37px 0;
}

.mb-36 {
    margin-bottom: 36px;
}

.m-left-s {
    margin-left: 5px;
}

.m-left-m {
    margin-left: 15px;
}

.m-left-17 {
    margin-left: 17px;
}

.m-right-20 {
    margin-right: 20px;
}

.m-li {
    margin: 10px 0 10px 17px;
}

.fs-s {
    font-size: 90% !important;
}

.fs-xs {
    font-size: 70%;
}

.fs-m {
    font-size: 1.2rem !important;
}

.poppins-regular-21 {
    font-family: 'Poppins';
    font-size: 21px;
    font-weight: 400;
}

.poppins-light-20 {
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 200;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700;
}

.color-white {
    color: var(--light) !important;
}

.color-primary {
    color: var(--blue) !important;
}

.color-secondary {
    color: var(--green) !important;
}

.color-yellow {
    color: var(--yellow);
}

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

.text-justify {
    text-align: justify;
}

.text-center {
    text-align: center !important;
}

.text-start {
    text-align: start !important;
}

.text-end {
    text-align: end !important;
}

.text-none {
    text-decoration: none;
}

.bg-green {
    background: var(--green);
    color: #FFF !important;
}

.bg-blue {
    background-color: var(--blue);
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-light {
    background-color: #FFFFFF !important;
}

#id_principal {
    display: flex;
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
}

.principal-lg {
    display: flex;
    justify-content: space-between;
    height: 600px;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

.principal-inner-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.principal-inner-container div {
    width: 100%;
    height: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.principal-lg div.btn-container {
    position: absolute;
    width: 50px;
    backdrop-filter: unset;
    height: inherit;
}

.principal-lg div.btn-container:last-child {
    right: 0;
}

#home-card {
    min-height: 367px;
    width: 63%;
    max-width: 914px;
    margin: 106px 0 68px 0;
}

#home-card h2 {
    font-family: cinzel;
    font-weight: bold;
    font-size: 48px;
}

#home-card p {
    margin-top: 38px;
}

#home-card div:first-child img {
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-bottom: 30px;
}

.yellow-box {
    width: 63%;
    max-width: 917px;
    height: 200px;
    background-color: var(--yellow);
    padding: 48px 64px;
    box-sizing: border-box;
    position: relative;
    bottom: -24px;
}

.yellow-box p {
    font-family: 'Poppins';
    font-size: 21px;
    text-align: center;
    color: #FFFFFF;
}

.green-box {
    height: 620px;
    background-color: var(--green);
}

.home-box {
    max-width: 450px;
    height: 620px;
    z-index: 1;
}

.home-box a {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.box-1 {
    background-image: url("/static/cabanias/img/home_1.png");
    margin-left: 1.25%;
}

.box-2 {
    background-image: url("/static/cabanias/img/home_2.png");
    margin-left: .625%;
    margin-right: .625%;
}

.box-3 {
    background-image: url("/static/cabanias/img/home_3.png");
    margin-right: 1.25%;
}

.box-1 div, .box-2 div, .box-3 div {
    background-color: #0010147F;
    height: 100%;
    cursor: pointer;
}

.box-text {
    font-family: 'Poppins';
    color: #FFFFFF;
    font-weight: bold;
    font-size: 32px;
    transition: 0.5s ease-in-out;
    text-align: center;
}

.box-text + p {
    overflow: hidden;
    padding: 0 40px;
}

.light-box {
    background-color: #F0E5D8;
    padding-bottom: 105px;
    padding-top: 105px;
}

.light-box-img {
    object-fit: cover;
}

.home-card-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 10px 0;
}

.home-card {
    display: flex;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 35px;
    overflow: hidden;
}

.home-card div:first-child {
    width: 60%;
    max-width: 880px;
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: 1.5s ease-in-out;
}

.home-card-right {
    margin-left: auto;
}

.home-card-left {
    margin-right: auto;
}

.card {
    background: linear-gradient(to left, #FFFFFFBC, #FFFFFF);
    max-width: 660px;
    height: 240px;
    position: absolute;
    margin-left: 50px;
    box-shadow: 2px 2px 5px var(--black-ts);
    transition: 1.5s ease-in-out;
}

.card-right {
    right: 50px;
}

.title {
    font-family: 'Cinzel';
    font-size: 32px;
    font-weight: 400;
}

.card p:last-child {
    padding: 0 9.9%;
}

.card-hidden {
    transform: translateX(calc(-100% - 10px));
}

.card-right-hidden {
    right: unset;
    transform: translateX(calc(100% + 10px));
}

iframe {
    border: 0;
    border-radius: 10px;
    height: 490px;
}

#location {
    padding-bottom: 100px;
    padding-top: 80px
}

#location p.poppins-light-20 {
    margin: 36px 0;
}

.btn-orange {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 227px;
    height: 40px;
    background: var(--orange);
    color: #FFF;
    border-radius: 20px;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 200;
    text-align: center;
    text-decoration: none;
}

.btn-more {
    background: transparent;
    font-family: 'Poppins';
    border: 1px solid var(--orange);
    color: var(--orange);
    padding: 10px 32px;
    margin: 5px;
    border-radius: 50px;
    filter: opacity(0.5);
    transition: .5s ease-in-out;
}

.btn-more:hover {
    filter: opacity(1);
    cursor: pointer;
}

#btn_confirm, #btn_back {
    font-size: 21px;
    width: 307px;
    height: 52px;
    font-family: 'Poppins';
    padding: 10px 10px;
    border-radius: 50px;
    background: var(--yellow);
    margin: 0 10px;
}

#btn_confirm:disabled {
    background: var(--orange);
    filter: brightness(1);
    opacity: 0.5;
}

#btn_confirm:disabled:hover {
    cursor: not-allowed;
}

.section-divider {
    position: relative;
    background: linear-gradient(45deg, #024A6070, #00101470);
}

.section-divider div {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 20px;
    background: var(--blue);
    color: #FFF;
}

footer > div:first-child {
    width: 80%;
    height: 142px;
}

.footer-content {
    height: 20px;
    word-break: break-word;
    width: 100%;
    text-align: center;
    font-family: 'Poppins';
    font-size: 70%;
}

.footer-text {
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 200;
    margin-bottom: 5px;
}

.redes {
    margin: 0 5px;
}

footer a {
    color: #FFF;
}

#institucional-card {
    min-height: 97px;
    width: 63%;
    max-width: 940px;
    margin: 84px 0 70px 0;
}

#institucional-card h2 {
    font-family: 'Cinzel';
    font-weight: 400;
    font-size: 36px;
    color: var(--orange);
}

.orange-box {
    width: 70%;
    max-width: 1000px;
    height: 230px;
    background-color: var(--orange);
    padding: 33px 44px;
    box-sizing: border-box;
}

.orange-box p {
    font-family: 'Poppins';
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
}

#wrapper {
    padding: 70px 100px;
    box-sizing: border-box;
    min-height: 100vh;
}

#wrapper > div:first-child {
    margin-bottom: 67px;
}

#wrapper > div:last-child {
    margin-top: 67px;
}

.light-box-m {
    position: absolute;
    box-shadow: 2px 2px 5px var(--black-ts);
    max-width: 683px;
    height: 580px;
    padding: 0 96px;
    box-sizing: border-box;
}

.light-box-m-right {
    background: linear-gradient(to right, #FFFFFFBC, #FFFFFF);
    right: 100px;
}

.light-box-m-left {
    background: linear-gradient(to left, #FFFFFFBC, #FFFFFF);
    left: 100px;
}

.light-box-m-title {
    color: var(--green);
    font-weight: bold;
    margin-bottom: 20px;
}

.institucion-img-box {
    align-items: end;
    max-width: 660px;
    height: 580px;
}

.input-icon {
    display: flex;
    align-items: center;
    font-size: 24px;
    padding: 4px 4px;
    background: #FFF;
    color: var(--orange);
    transition: 1s ease-in-out;
}

.form-input {
    font-family: 'Poppins';
    height: 45px;
    padding: 8px 8px;
    width: 100%;
    border: 0;
    box-sizing: border-box;
}

.input-icon-green {
    color: var(--green);
}

.form-input:focus {
    outline: 0;
    box-shadow: 2px 2px 2px 1px var(--blue-ts-33);
}

#reserva-form {
    margin-top: 56px;
}

#reserva-form div.container {
    margin-bottom: 34px;
}

#id_status {
    background: #FFFFFF;
    margin-top: 65px;
    margin-bottom: 160px;
    padding: 36px 29px;
}

.status-link {
    width: fit-content;
    padding: 10px 32px;
    border-radius: 50px;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 15px;
}

.modal-bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: #FFFFFF;
}

.modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.modal-btn {
    font-size: 1.5rem;
    width: fit-content;
    color: var(--orange);
    background: transparent;
    border: transparent;
    padding: 10px;
    transition: 1s ease-in-out;
}

.modal-btn:hover {
    cursor: pointer;
}

.close-btn {
    margin-left: auto;
}

.like-counter {
    font-family: serif;
    font-size: 70%;
    padding: 0 2px;
}

.modal-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

.modal-img, .modal-video {
    width: 70%;
    max-width: 700px;
    height: 500px;
}

.modal-video {
    height: fit-content;
}


/* Galeria */
.galeria-box {
    width: 100%;
    perspective: 600px;
    transform-style: preserve-3d;
}

#galeria-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#galeria-container > div {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    min-height: 300px;
    margin: 5px 0;
}

.gallery-img {
    width: 30%;
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 5;
    margin: 0 1px;
    transition: 1s ease-in-out;
    cursor: pointer;
}

.album-btn {
    font-family: 'Poppins';
    background: none;
    border: 1px solid var(--green);
    border-radius: 50px;
    padding: 5px 15px;
    filter: opacity(0.5);
    transition: .5s ease-in-out;
}

.album-btn:hover {
    filter: opacity(1);
    cursor: pointer;
}

.box {
    height: 593px;
    padding: 54px 13px;
    border-radius: 15px;
    background: #FFF;
    box-sizing: border-box;
    margin-bottom: 90px;
}

#id_thumbnail {
    height: 235px;
}

#id_thumbnail > div {
    height: 235px;
}

#id_thumbnail .thumbnail-s:hover {
    cursor: pointer;
}

.thumbnail {
    width: 15%;
    height: 100%;
    transition: 1s ease-in-out;
    margin: 0 2.5%;
}

.thumbnail-noactive {
    filter: brightness(0.5);
    box-shadow: none;
}

.thumbnail-active {
    filter: brightness(1);
    box-shadow: 4px 4px 2px var(--blue-ts);
}


/* Reserva */
.btn-container {
    display: flex;
    z-index: 1;
    width: 0px;
    height: 100%;
    overflow: hidden;
}

.btn-container .btn-transparent {
    font-size: 1.5rem;
}

.btn-shop {
    font-family: 'Poppins';
    font-size: 21px;
    font-weight: 400;
    color: var(--green);
    background: transparent;
    padding: 8px 32px;
    border: 1px solid var(--green);
    border-radius: 25px;
    transition: .5s ease-in-out;
}

.btn-shop:hover {
    cursor: pointer;
}

.btn-shop:disabled {
    cursor: auto;
    color: var(--green);
}

.thumbnail-container {
    overflow: hidden;
    margin-top: auto;
}

.thumbnail-container-s {
    max-width: 350px;
    height: 70px;
    margin-top: 5px;
}

.thumbnail-inner-container {
    width: 100%;
    height: 105px;
    margin-top: 5px;
}

.thumbnail-inner-container-s {
    width: calc(100% - 60px);
    height: 70px;
    overflow: hidden;
}

.thumbnail-inner-container-s > div:first-child {
    height: 70px;
}

.thumbnail-s {
    width: 30%;
    margin: 0 2.5%;
    background-size: cover;
    background-repeat: no-repeat;
}

.thumbnail-first {
    margin: 0 2.5% 0 0;
}

.principal {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 350px;
    width: 100%;
}

#id_cabanias h4 {
    font-family: 'Cinzel';
    font-size: 28px;
    font-weight: 600;
    color: var(--green);
}

#id_cabanias .btn-container {
    backdrop-filter: brightness(0.5);
}

#id_cabanias .btn-transparent {
    margin-right: 0;
}

.service-container h4 {
    font-size: 21px !important;
}

.service-container span {
    font-size: 18px;
}

.shop-container {
    height: 90px;
}

.shop-container .title {
    font-size: 21px !important;
    font-weight: 600 !important;
}

calendar-day {
    display: block;
    position: absolute;
    z-index: 2;
    transform: translateY(90px);
    min-width: 250px;
    max-width: 400px;
    padding: 5px;
    background: #FFFFFF;
}

calendar-day button {
    font-size: unset !important;
    margin: unset !important;
}

calendar-day p {
    font-size: 80% !important;
}

calendar-day table {
    width: 100%;
}

calendar-day th {
    font-weight: 500;
    font-size: 70%;
    padding-bottom: 10px;
}

calendar-day td {
    box-sizing: border-box;
    height: 70px;
    width: 46px;
    text-align: center;
    color: var(--black);
    font-size: 80%;
}

.date-box {
    transition: .5s ease-in-out;
}

.date-box-disabled {
    color: #AA0000;
    opacity: 0.4;
    cursor: not-allowed;
}

.date-box:hover {
    cursor: pointer;
    box-shadow: 2px 2px 2px var(--blue-ts-33);
}

.date-box div, .date-box-disabled div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.date-box-disabled div {
    justify-content: space-evenly;
}

.date-box div span:first-child {
    font-size: 65%;
}

.date-box div span:last-child, .date-box-disabled span:last-child {
    font-size: 55%;
}

.calendar-icon {
    background: #FFFFFF;
    padding-right: 8px;
}

#status-msg {
    margin-top: 36px;
}

.btn-group {
    width: 100%;
    margin: 5px 0;
}

.btn-group button {
    font-size: 1.2rem;
}

#id_total {
    margin-top: auto;
    margin-bottom: 15px;
}

.input-m {
    font-family: 'Poppins';
    border-radius: 0;
    border: transparent;
    padding: 10px 5px;
    margin: 10px 15px;
}

.input-200 {
    width: 200px;
    flex: 1 1 200px;
}

.area-reserva-input {
    max-width: fit-content;
    min-width: 100%;
    height: 254px;
    box-sizing: border-box;
}

form[name="hotel-reserva-form"] input, form[name="hotel-reserva-form"] textarea {
    margin-bottom: 34px;
}

.politicas-title {
    margin-bottom: 16px;
}

.politicas-text {
    margin-bottom: 24px;
}

.btn_reserva {
    border-radius: 50px;
}

.cabania-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 200px;
    margin-bottom: 37px;
}


/* Web Chek In */
#bg-slider, #web-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

#bg-slider div {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

#web-container > div:first-child {
    flex: initial;
    padding: 36px 29px;
}

.first {
    background-image: url("/static/img/bg1.jpg");
    z-index: 0;
    opacity: (1);
}

.second {
    background-image: url("/static/img/bg2.jpg");
    z-index: -1;
    opacity: (0);
}

.third {
    background-image: url("/static/img/bg3.jpg");
    z-index: -2;
    opacity: (0);
}

.fourth {
    background-image: url("/static/img/bg4.jpg");
    z-index: -3;
    opacity: (0);
}

#web-footer {
    position: absolute;
    bottom: 0;
    left: calc(50% - 77px);
    z-index: 2;
    font-size: 70%;
    color: #000000;
    display: block;
    min-height: auto;
    padding-top: 0;
    background: transparent;
}

#web-footer a {
    color: #000000;
}


@media only screen and (max-width: 1024px) {
    .card {
        min-width: 660px;
    }

    .institucion-img-box img {
        width: 100%;
    }

    #id_cabanias h4 {
        font-size: 24px;
    }

    #id_cabanias img {
        width: 22px;
        height: 22px;
    }

    #id_cabanias .poppins-light-20 {
        font-size: 14px;
    }

    .btn-shop {
        font-size: 18px;
        padding: 5px 12px;
    }

    .service-container span {
        font-size: 15px;
    }

    #btn_confirm, #btn_back {
        font-size: 14px;
        width: 214px;
        height: 41px;
        padding: 10px 10px;
    }

    #galeria-container > div {
        min-height: 150px;
    }
}


@media only screen and (max-width: 839px) {
    #reserva-btn, #checkin-btn {
        margin-right: 37px;
        font-size: 16px;
        width: 112px;
    }

    #checkin-btn {
        width: 130px;
    }

    .btn-transparent {
        font-size: 36px;
        margin-right: 21px;
    }

    #sidebar-btn {
        font-size: 20px;
    }

    #sidebar ul li {
        margin-bottom: 18px;
    }

    #nav-menu + ul {
        display: none;
    }

    nav div:last-child {
       width: 100%;
    }

    #nav-btn {
        display: block;
        padding: 0 5px 20px 0;
    }

    #nav-menu {
        flex-direction: column;
        height: 0;
        overflow: hidden;
        border: none;
    }

    #nav-menu li:nth-child(-n + 4) {
        border-bottom: 1px solid #00000044;
    }

    #nav-menu li a, #nav-menu li button {
        text-align: left;
    }

    #nav-menu li:hover {
        background: #0000FF33;
        & a {
            color: #FFFFFF;
        }
    }

    #slider, .slider {
        height: 500px;
    }

    .slider-text {
        font-size: 28px;
        transform: translateY(-171px);
    }

    .slider-img {
        transform: translateY(-70px);
    }

    #home-card {
        margin: 53px 0 34px 0;
        min-height: initial;
    }

    #home-card h2 {
        font-size: 24px;
    }

    .yellow-box {
        height: 125px;
        padding: 24px 32px;
        bottom: -12px;
    }

    .card {
        min-width: initial;
    }

    .yellow-box p {
        font-size: 14px;
    }

    .green-box, .box-1, .box-2, .box-3 {
        height: 310px;
    }

    .box-1 img, .box-2 img, .box-3 img {
        width: 32px;
    }

    .box-text {
        font-size: 20px;
    }

    .poppins-regular-21 {
        font-size: 12px;
    }

    .light-box {
        padding-bottom: 52px;
        padding-top: 52px;
    }

    .home-card {
        margin-top: 17px;
        margin-bottom: 17px;
    }

    #home-card p {
        margin-top: 19px;
    }

    .home-card div:first-child {
        height: 200px;
    }

    .card {
        height: 120px;
    }

    .title {
        font-size: 16px;
    }

    .poppins-light-20, #id_cabanias .poppins-light-20 {
        font-size: 10px;
    }

    #location {
        padding-bottom: 50px;
        padding-top: 40px;
    }

    #location p.poppins-light-20 {
        margin: 18px 0;
    }

    .btn-orange {
        width: 113px;
        height: 20px;
        font-size: 10px;
    }

    iframe {
        height: 245px;
    }

    footer {
        padding-top: 50px;
        padding-bottom: 10px;
    }

    #logo img, .slider-img {
        width: 120px;
        height: 45px;
    }

    footer > div:first-child {
        height: 121px;
    }

    .footer-text {
        font-size: 9px;
    }

    footer div.col-s:last-child img {
        width: 24px;
        height: 24px;
    }

    .footer-content {
        font-size: 9px;
    }

    .orange-box {
        height: 213px;
    }

    .orange-box p {
        font-size: 16px;
    }

    .light-box-m {
        max-width: 478px;
        height: 406px;
        padding: 0 67px;
    }

    .light-box-img {
        width: 420px;
        height: 457px;
    }

    .institucion-img-box {
        height: 406px;
    }

    .institucion-img-box img {
        height: 196px;
    }

    #id_thumbnail {
        height: 125px;
    }
    
    #id_thumbnail > div {
        height: 125px;
    }

    #id_cabanias h4 {
        font-size: 14px;
    }

    #wrapper {
        padding: 70px 60px;
    }

    .box {
        height: fit-content;
        padding: 29px 13px;
    }

    .service-container h4, .shop-container .title {
        font-size: 14px !important;
    }

    .principal {
        min-height: 210px;
    }

    .thumbnail-inner-container {
        height: 70px;
    }

    #id_cabanias img {
        width: 18px;
        height: 18px;
    }

    .btn-shop {
        font-size: 14px;
        padding: 3px 10px;
    }

    #btn_confirm, #btn_back {
        width: 184px;
        height: 31px;
        margin: 10px 0;
        padding: 5px 6px;
    }

    #id_status img, #web-container img{
        width: 64px;
        height: 64px;
    }

    .status-link {
        padding: 10px 16px;
    }

    calendar-day {
        transform: translateY(69px);
    }

    .politicas-img {
        width: 16px;
        height: 16px;
    }

    .mb-36 {
        margin-bottom: 24px;
    }
}


@media only screen and (max-width: 425px) {
    #reserva-btn, #checkin-btn {
        font-size: 12px;
        margin-right: 19px;
        width: 70px;
    }

    #checkin-btn {
        width: 100px;
    }

    .btn-transparent {
        margin-right: 10px;
    }

    nav a img[alt="Logo"] {
        width: 80px;
        height: 40px;
    }

    .slider-text {
        font-size: 20px;
    }

    .col-sm, .col-m, .col-s {
        flex: 1 1 100%;
    }

    #home-cabanias, #galeria-container > div {
        flex-wrap: wrap;
    }

    #home-cabanias div, #galeria-container > div > div{
        flex: 1 1 200px;
        min-height: 200px;
        margin: 1px 0;
    }

    #home-card {
        margin: 30px 0 28px 0;
    }

    #home-card h2 {
        font-size: 14px;
    }

    #home-card p {
        margin-top: 12px;
    }

    .yellow-box {
        height: 75px;
        padding: 14px 9px;
        bottom: 0px;
    }

    .yellow-box p {
        font-size: 9px;
    }

    .green-box {
        height: max-content;
    }

    .box-1, .box-2, .box-3 {
        margin: 0;
        background-size: 100% 100%;
    }

    .box-1, .box-2 {
        margin-bottom: 10px;
    }

    .card {
        margin: 0;
    }

    .home-card {
        flex-wrap: wrap;
        justify-content: center;
    }

    .home-card div:first-child {
        width: 90%;
        height: 250px;
    }
    
    .home-card-right {
        margin-left: unset;
    }
    
    .home-card-left {
        margin-right: unset;
    }
    
    .card {
        position: unset;
        transform: translateY(-100px);
        height: 150px;
    }

    footer > div:first-child {
        height: unset;
        width: 100%;
    }

    #logo img {
        width: 72px;
        height: 27px;
        padding-left: 10px;
    }

    .footer-text {
        text-align: left;
        padding-left: 10px;
    }

    #institucional-card {
        margin: 36px 0 30px 0;
    }

    #institucional-card h2 {
        font-size: 20px;
    }

    .orange-box {
        width: 90%;
        height: 213px;
        padding: 14px 18px;
    }

    .orange-box p {
        font-size: 12px;
    }

    #wrapper {
        padding: 70px 5%;
    }

    .light-box-img {
        width: 100%;
        height: 411px;
    }

    .light-box-m {
        width: 90%;
        transform: translateY(135px);
        max-width: 100%;
        min-height: 250px;
        max-height: fit-content;
        padding: 15px 28px;
    }

    .light-box-m-right {
        right: auto;
    }

    .light-box-m-left {
        left: auto;
    }

    #id_thumbnail {
        height: 80px;
    }
    
    #id_thumbnail > div {
        height: 80px;
    }

    .box {
        height: fit-content;
    }

    .fs-s {
        font-size: 70% !important;
    }

    #cabanias-container > div, .cabanias-container > div, #id_principal, #id_principal + div {
        flex: 0 0 100%;
    }

    #cabanias-container div:last-child {
        max-width: 350px;
    }

    .input-group {
        flex-basis: 80%;
    }

    #id_principal{
        height: 200px;
    }

    .principal-lg {
        height: 400px;
        width: 100%;
    }

    .principal-lg div.btn-container:last-child {
        right: 5%;
    }

    .form-input {
        width: 100%;
    }

    .input-200 {
        width: 100%;
    }

    .form-select {
        width: 122px;
    }

    .principal, .thumbnail-container-s {
        max-width: initial;
    }

    form[name="reserva-form"] > div > div {
        justify-content: center;
    }

    calendar-day {
        transform: translateY(218px);
    }

    calendar-day td {
        height: 50px;
        width: 35px;
        font-size: 50%;
    }

    .reserva-table td {
        height: 40px;
    }

    #id_status img, #web-container img {
        width: 48px;
        height: 48px;
    }

    .modal-img, .modal-video {
        max-height: 250px;
    }

    #web-container > div:first-child {
        padding: 14px 11px;
    }
}