/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* --------------------- BASIC GRID --------------------- */
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */


html {
  scroll-behavior: smooth;
}

ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}

* {
  box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 739px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}




/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* --------------------- PAGE GRID --------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */




@media only screen and (min-width: 1276px) {
    
    .content{
        width: 1276px;
        padding: 0 80px;
        margin: 0 auto;
        display: flex;
        flex-flow: column;
    }
    
}

@media only screen and (max-width: 1275px) and (min-width: 740px) {
    
    .content{
        width: 100%;
        padding: 0 40px;
        margin: 0 auto;
        display: flex;
        flex-flow: column;
    }
    
}

@media only screen and (max-width: 739px) {
    
    .content{
        width: 100vw;
        padding: 0 24px;
        margin: 0 auto;
        display: flex;
        flex-flow: column;
    }
    
}

.content-viewport{
    min-height: 100vh;
}

.content-vertical{
    display: flex;
    align-items: center;
    justify-content: center;
}

iframe{
    width: 100%;
    height: 80vh;
    border-radius: 10px;
    overflow: hidden;
}

/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* ----------------------- HEADER ----------------------- */
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */

.fixed-nav {
    width: 100%;
    padding: 20px 0;
    position: fixed;
    z-index: 1;
    background: rgba(35, 35, 35, 0);
    transition: 0.2s;
}


@media only screen and (min-width: 1125px) {
    
    .nav{
        width: 100%;
        height: 50px;
    }
    
    .nav-logo{
        float: left;
        margin: 8px 0 0 0;
        padding: 0;
        width: 247px;
        height: 34px;
        cursor: pointer;
    }
    
    .menu-display{
        display: none;
    }
    
    .nav-display{
        display: block;
    }
    
}

@media only screen and (max-width: 1124px) and (min-width: 1050px) {
    
    .nav{
        z-index: 1;
        width: 100%;
        height: 50px;
    }
    
    .nav-logo{
        float: left;
        margin: 12px 0 0 0;
        padding: 0;
        width: 174px;
        height: 24px;
        cursor: pointer;
    }
    
    .menu-display{
        display: none;
    }
    
    .nav-display{
        display: block;
    }
    
}

@media only screen and (max-width: 1049px) {
    
    .nav{
        z-index: 1;
        width: 100%;
        height: 40px;
    }
    
    .nav-logo{
        float: left;
        margin: 10px 0 0 -87px;
        padding: 0;
        width: 174px;
        height: 24px;
        cursor: pointer;
        left: 50%;
        position: absolute;
    }
    .menu-display{
        display: block;
    }
    
    .nav-display{
        display: none;
    }
    
}



.nav-right{
    float: right;
    margin: 0;
    padding: 0;
}

.nav-left{
    float: left;
    margin: 0;
    padding: 0;
}

.menu{
    float: left;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 0;
    vertical-align: middle;
}


/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* --------------------- HERO IMAGE --------------------- */
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */



@media only screen and (min-width: 740px) {
    .hero{
        position: relative;
        width: 100%;
        height: 100vh;
        /*background: url(../img/top/hero-1.jpg) no-repeat;*/
        background-size: cover;
        animation: changeBg 20s infinite;
    }
    .hero-text{
        width: 100%;
        height: 100%;
        margin-top: auto;
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 739px) {
    
    .hero{
        position: relative;
        width: 100%;
        height: 100vh;
        background: url(../img/top/hero-1.jpg) no-repeat center;
        background-size: auto;
    }
    .hero-text{
        width: 100%;
        height: 100%;
        margin-top: auto;
        padding-bottom: 0px;
    }
    
}

@keyframes changeBg{
    0%,100%  {background-image: url(../img/top/hero-1.jpg);}
    8% {background-image: url(../img/top/hero-1.jpg);}
    16% {background-image: url(../img/top/hero-1.jpg);}
    24% {background-image: url(../img/top/hero-1.jpg);}
    32% {background-image: url(../img/top/hero-2.jpg);}
    40% {background-image: url(../img/top/hero-2.jpg);}
    48% {background-image: url(../img/top/hero-2.jpg);}
    56% {background-image: url(../img/top/hero-2.jpg);}
    64% {background-image: url(../img/top/hero-3.jpg);}
    72% {background-image: url(../img/top/hero-3.jpg);}
    80% {background-image: url(../img/top/hero-3.jpg);}
    88% {background-image: url(../img/top/hero-3.jpg);}
    96% {background-image: url(../img/top/hero-3.jpg);}
    
}

/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* --------------------- HERO TEXT --------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */


.hero-carousel{
    width: 100%;
}

.hero-carousel-item{
    width: 25%;
    float: left;
    display: inline-block;
}

.top-border-active{
    border-top: 2px solid rgba(255,255,255,1);
}

.top-border-enabled{
    border-top: 2px solid rgba(255,255,255,0.3);
    transition: border .3s;
}

.top-border-enabled:hover{
    border-top: 2px solid rgba(255,255,255,1);
}

@media only screen and (min-width: 1276px) {
    .hero-carousel-display{
        display: block;
    }
}

@media only screen and (max-width: 1275px) and (min-width: 910px) {
    .hero-carousel-display{
        display: block;
    }
}
@media only screen and (max-width: 909px) {
    
    .hero-carousel-display{
        display: none;
    }
}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* --------------------- DESCRIPTION --------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */



@media only screen and (min-width: 740px) {
    .house-desc{
        margin: 0 20% 0;
    }
}
@media only screen and (max-width: 739px) {
    .house-desc{
        width: 100%;
    }
}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------ HOUSE ------------------------ */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */



@media only screen and (min-width: 740px) {
    .room{
        width: 100%;
        display: block;
        padding-left: 24px;
        padding-bottom: 0;
    }
    
    .room-selected{
        border-left: 2px solid black;
    }
    
    .room-gallery-s{
        display: none;
    }
    
    .room-chevron{
        display: none;
    }
    .room-section{
        padding-top: 100px;
        padding-bottom: 150px;
    }.gallery{
        display: flex;
        flex-flow: column;
    }
    .room-galley-section{
        display: block;
    }
    
}

@media only screen and (max-width: 739px) {
    .room{
        width: 100%;
        display: block;
        border-left: none;
        padding-left: 0;
    }
    
    .room-gallery-s{
        overflow: auto;
        white-space: nowrap;
        position: relative;
        width: 100vw;
        left: -24px;
        right: 0;
        top: 16px;
    }
    .room-chevron-up{
        display: block;
        background-image: url(../img/iconography/arrow-up.png);
        width: 24px;
        height: 24px;
        float: right;
        margin-right: 0;
        padding-right: 0;
    }
    .room-chevron-down{
        display: block;
        background-image: url(../img/iconography/arrow-down.png);
        width: 24px;
        height: 24px;
        float: right;
        margin-right: 0;
        padding-right: 0;
    }
    
    .room-section{
        padding-top: 50px;
        padding-bottom: 100px;
    }
    .gallery{
        display: none;
    }
    .room-cta{
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .room-galley-section{
        display: none;
    }
    .room-notes{
        text-align: center;
    }
    
}

.room-name{
    display: table;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: white;
    cursor: pointer;
}

.room-details{
    display: table;
    margin-bottom: 0;
}

.gallery-item{
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-grow: 1;
    flex-wrap: nowrap;
}

.gallery-item a{
    display: inline-flex;
    margin: 5px;
}
.gallery-pic{
    border-radius: 10px;
}
.gallery-pic:hover{
    filter: brightness(85%);
}
.room-content{
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 10; 
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 950px;
    max-height: 800px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.modal-menu {
    display: block; 
    position: fixed; 
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 0;
    height: 100%; 
    overflow: auto; 
    background-color: var(--dark-white);
    transition: .3s;
    overflow: hidden;
}

.modal-menu-content {
    margin: auto;
    display: block;
    position: absolute;
    top: 45%;
    left: 50%;
    right: 0;
    bottom: 0;
    width: 450px;
    max-height: 800px;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.close-menu {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--very-black);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.language-menu {
    position: absolute;
    top: 28px;
    left: 35px;
    transition: 0.3s;
}

.close-menu:hover,
.close-menu:focus {
    color: var(--very-black);
    opacity: 0.5;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    
    .modal-content {
        max-width: 100%;
        
    }
}


/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ---------------------- AMENITIES ---------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */



@media only screen and (min-width: 740px) {
    .amenity-item{
        width: 33.33%;
        padding: 0 8px 16px 8px;
    }
    .amenity-item-large{
        width: 50%;
        padding: 0 8px 16px 8px;
    }
    .amenity-pic{
        width: auto;
        height: 300px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
    }
    .amenity-section{
        padding: 150px 0;
        background-color: var(--dark-white);
    }
    
}

@media only screen and (max-width: 739px) {
    .amenity-item, .amenity-item-large{
        width: 50%;
        padding: 0 5px 10px 5px;
    }
    .amenity-pic{
        width: auto;
        height: 210px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
    }
    .amenity-section{
        padding: 100px 0;
        background-color: var(--dark-white);
    }
}
.amenity-title{
    align-self: flex-end;
}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------- CITY ------------------------ */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */



@media only screen and (min-width: 740px) {
    .city-section{
        padding-top: 150px;
        padding-bottom: 150px;
    }
    .city-aligment{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .city-pic{
        width: auto;
        height: 655px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        background-image: url(../img/city/main-pic.jpg);
    }
    .city-text{
        padding: 0 8.33% 50px 8.33%;
        text-align: left;
    }
    
}

@media only screen and (max-width: 739px) {
    .city-section{
        padding: 0 0 100px 0;
    }
    
    .city-aligment{
        display: block;
    }
    .city-pic{
        width: 100%;
        height: 450px;
        border-radius: 0;
        margin-bottom: 50px;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        background-image: url(../img/city/main-pic-s.jpg);
    }
    .city-text{
        padding: 0 24px 30px 24px;
        text-align: center;
    }
}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ----------------------- ACTIVITY ---------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */



@media only screen and (min-width: 1025px) {
    .activity-section{
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        background-image: url(../img/activity/activity-5.jpg);
        transition: 0.3s;
    }
    
    .activity-menu{
        width: 100%;
        height: 100%;
        margin-top: auto;
    }

    .activity-carousel{
        width: 100%;
        height: 330px;
        overflow-y: scroll;
        white-space: nowrap;
        position: relative;
        margin-top: 30px;
    }
    .activity-item{
        width: 250px;
        height: 150px;
        margin-right: 20px;
        display: inline-block;
    }
    .activity-item-first{
        margin-left: calc( (((100vw - 1116px - 160px)/2 ) + 80px ) );
    }
    
    .activity-thumb{
        width: 250px;
        height: 150px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    .activity-item-selected{
        opacity: 0.5;
    }
    .text-b{
        display: block;
    }
    .text-s{
        display: none;
    }
    .activity-title{
        color: var(--light-white);
        padding-top: 150px;
        width: 50%;
        text-align: left;
        font-family: "Karla";
        font-size: var(--fs-xxs);
        font-weight: 600;
        line-height: var(--fl-s);
        margin: 0;
    }
    .activity-description{
        min-height: calc(100vh - 330px);
    }
    .a1{
        background-image: url(../img/activity/activity-1.jpg);
    }
    .a2{
        background-image: url(../img/activity/activity-2.jpg);
    }
    .a3{
        background-image: url(../img/activity/activity-3.jpg);
    }
    .a4{
        background-image: url(../img/activity/activity-4.jpg);
    }
    .a5{
        background-image: url(../img/activity/activity-5.jpg);
    }
    .a6{
        background-image: url(../img/activity/activity-6.jpg);
    }
    .a7{
        background-image: url(../img/activity/activity-7.jpg);
    }
    .a8{
        background-image: url(../img/activity/activity-8.jpg);
    }

}

@media only screen and (max-width: 1275px) and (min-width: 740px) {
    
    .activity-section{
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        background-image: url(../img/activity/activity-5.jpg);
    }
    
    .activity-menu{
        width: 100%;
        height: 100%;
        margin-top: auto;
    }

    .activity-carousel{
        width: 100%;
        height: 330px;
        overflow-y: scroll;
        white-space: nowrap;
        position: relative;
        margin-top: 30px;
    }
    
    .activity-item-first{
        margin-left: 40px;
    }
    
    .activity-item{
        width: 250px;
        height: 150px;
        margin-right: 20px;
        display: inline-block;
    }
    
    .activity-thumb{
        width: 250px;
        height: 150px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .activity-item-selected{
        opacity: 0.5;
    }
    .text-b{
        display: block;
    }
    .text-s{
        display: none;
    }
    .activity-title{
        color: var(--light-white);
        padding-top: 150px;
        width: 50%;
        text-align: left;
        font-family: "Karla";
        font-size: var(--fs-xxs);
        font-weight: 600;
        line-height: var(--fl-s);
        margin: 0;
        font-style: normal;
    }
    .activity-description{
        min-height: calc(100vh - 330px);
    }
    .a1{
        background-image: url(../img/activity/activity-1.jpg);
    }
    .a2{
        background-image: url(../img/activity/activity-2.jpg);
    }
    .a3{
        background-image: url(../img/activity/activity-3.jpg);
    }
    .a4{
        background-image: url(../img/activity/activity-4.jpg);
    }
    .a5{
        background-image: url(../img/activity/activity-5.jpg);
    }
    .a6{
        background-image: url(../img/activity/activity-6.jpg);
    }
    .a7{
        background-image: url(../img/activity/activity-7.jpg);
    }
    .a8{
        background-image: url(../img/activity/activity-8.jpg);
    }

}

@media only screen and (max-width: 739px) {
    
    .activity-section{
        width: 100%;
    }
    
    .activity-menu{
        display: none;
    }

    .activity-carousel{
        width: 100vw;
        height: 550px;
        overflow-y: scroll;
        white-space: nowrap;
        position: relative;
        margin-top: 30px;
        padding-top: 10px;
    }
    
    .activity-item-first{
        margin-left: 20px;
    }

    .activity-item{
        width: 327px;
        height: 500px;
        margin-right: 20px;
        display: inline-block;
    }
    .activity-thumb{
        width: 327px;
        height: 500px;
        border-radius: 10px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        white-space: normal;
    }
    .activity-item-selected{
        opacity: 1;
    }
    .text-b{
        display: none;
    }
    .text-s{
        display: block;
        position: absolute;
        bottom: 50px;
        white-space: normal;
        width: 327px;
    }
    .activity-title{
        color: var(--night);
        padding-top: 0;
        width: 100%;
        text-align: center;
        font-family: "Rubik";
        font-size: var(--fs-xs);
        font-weight: 500;
        line-height: var(--fl-s);
        margin: 0;
    }
    .disable-link{
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: black;
    }
    .a1{
        background-image: url(../img/activity/activity-1-s.jpg);
    }
    .a2{
        background-image: url(../img/activity/activity-2-s.jpg);
    }
    .a3{
        background-image: url(../img/activity/activity-3-s.jpg);
    }
    .a4{
        background-image: url(../img/activity/activity-4-s.jpg);
    }
    .a5{
        background-image: url(../img/activity/activity-5-s.jpg);
    }
    .a6{
        background-image: url(../img/activity/activity-6-s.jpg);
    }
    .a7{
        background-image: url(../img/activity/activity-7-s.jpg);
    }
    .a8{
        background-image: url(../img/activity/activity-8-s.jpg);
    }
    
}

.scrollbar-hack::-webkit-scrollbar {
  display: none;
}
.scrollbar-hack {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------- MAP ------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

.map-section{
    width: 100%;
    height: 100vh;
    background-image: url(../img/map/map.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 1025px) {
    
}

@media only screen and (max-width: 1275px) and (min-width: 740px) {
    
}

@media only screen and (max-width: 739px) {
    
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ----------------------- CONTACT ----------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

.contact-section{
    background-color: var(--charcoal);
}

.contact-icon{
    width: 100%;
    float: left;
    text-align: center;
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ----------------------- FOOTER ------------------------ */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


.footer{
    width: 100%;
    background-color: var(--very-black);
    padding: 50px 0;
}

.footer-content{
    text-align: center;

}

.footer-toggle{
    height: 0;
}


/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* --------------------- MODAL PRICE --------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

@media only screen and (min-width: 740px) {
    .modal-content-price {
        position: relative;
        background-color: #ffffff;
        margin: auto;
        padding: 0;
        max-width: 80%;
        height: 90%;
    }
}

@media only screen and (max-width: 739px) {
    .modal-content-price {
        position: relative;
        background-color: #ffffff;
        margin: auto;
        padding: 0;
        max-width: 95%;
        height: 95%;
    }
}