header:not(.scrolling):not(.show-menu){
    background-color: transparent;
    height: 105px;
}
header #burger {
    margin-top: 0;
}
header:not(.scrolling):not(.show-menu) #burger {
    margin-top: -14.5px;
}
header:not(.scrolling):not(.show-menu) #circle-book-now {
    top: 18px;
}
header:not(.scrolling):not(.show-menu) #logo{
    display: none;
}
header:not(.scrolling):not(.show-menu) #logo svg {
    height: 76px;
}

#content{
    padding-top: 0;
    margin-top: -15px;
}
#content  #watercolor_gallery_md,
#content  #watercolor_gallery{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 90px;
}
#content  #watercolor_gallery_md .slick-slide,
#content  #watercolor_gallery .slick-slide {
    height: calc(100vh - 285px);
    margin-top: 0;
    padding-bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
}
h1#welcome{
    margin-top: 160px;
    margin-bottom: 0;
    min-height: 40px;
}
.block.pink,
.block.transparent {
    position: relative;
    padding: 0 50px 70px;
    max-width: 960px;
}
.block.pink a,
.block.transparent a{
    display: inline-block;
    padding: 0 5px;
    border-top: 1px solid var(--black);
    text-decoration: none;
    margin-top: 25px;
}

.line{
    border-top: 1px solid var(--black);
    width:50px;
    height: 1px;
    margin-bottom: 20px;
}
.block.pink #svg-33,
.block.transparent #svg-33{
    max-width: 70px;

}

#first-gallery{
    max-width: 960px;
}
#first-gallery .slick-slide {
    padding-bottom: 7.5%;
}
#rooms-gallery{
    width: 100%;
    margin-top: 0;
}
#eat-and-drink .text,
#rooms .text,
#essentials .text{
    width: 100%;
    padding-top: 50px;
    padding-right: 40px;
    padding-left: 40px;
}
#rooms,
#eat-and-drink{
    margin-top: 0;
}
#eat-and-drink .gallery-container,
#rooms .gallery-container{
    width: 100%;
}
#eat-and-drink-gallery .slick-slide {
    padding-bottom:  75%;
}
#rooms .text a,
#eat-and-drink .text a,
#essentials .text a{
    text-decoration: none;
    padding-top: 15px;
    border-top: 1px solid var(--black);
    margin-top: 15px;
    max-width: max-content;

}

h1.with-img svg,
h1.with-img img{
    max-height: 50px;
    margin: auto;
}
#rooms h1 img, #rooms h2 img{
    max-height: 80px;
    top: -56px;
    left: calc(50% - 61px);
}
#eat-and-drink h1 img, #eat-and-drink h2 img{
    max-height: 75px;
    max-width: 208px;
    top: -56px;
    left: calc(50% - 104px);
}

#essentials{
    margin-bottom: 110px;
}
#essentials h1 svg, #essentials h2 svg{
    max-height: 95px;
    max-width: 150px;
    top: -80px;
    left: calc(50% - 75px);
}

#essentials #essentials-gallery {
    width: 100%;
}
#essentials .slick-slide {
    display: flex;
    padding-bottom: 0;
    position: relative;
    justify-content: center;
    align-content: end;
}
#essentials .slick-slide a.essential-link{
    width: 100%;
    display: block;
    padding-bottom: 90%;
    background-size: cover;
    background-position: center center;
}
#essentials .slick-slide a.essential-title{
    position: absolute;
    display: block;
    margin: 0 auto;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    width: 70%;
    padding: 0px 15px 15px 15px;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    line-height: 1.5em;
    font-weight: 500;
    min-height: 105px;
    text-decoration: none;

}
#essentials .slick-slide a.essential-title::before {
    content: "";
    display: block;
    background-color: var(--black);
    width: 1px;
    height: 40px;
    margin: 0 auto;
}
header #header-watercolor{
    display: none;
}

#essentials-gallery .photo .photo-text {
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    width: 70%;
    padding: 0px 15px 15px 15px;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    letter-spacing: 3px;
    line-height: 1.5em;
    font-weight: 500;
    display: none;
    position: absolute;
    bottom: 0;
    height: 103px;
}

#essentials-gallery .photo .photo-text:before {
    content: "";
    display: block;
    background-color: var(--black);
    width: 1px;
    height: 40px;
    margin: 0 auto;
}
@media(min-width: 768px){
    header nav{
        margin-top: 0px !important;
        height: 88px;
        background-color: white;
        vertical-align: middle;
        line-height: 72px;
    }
    .home-scrolling nav{
        margin-top: -50px !important;
        height: auto !important;
        line-height: unset !important;
    }
}
@media(min-width: 960px){
    .block.pink {
        max-width: 100%;
        margin: auto;
    }
    #first-gallery {
        max-width: 100%;
        margin: auto;
    }
}
@media(min-width: 992px) {

    h1.with-img{
        padding: 0;
    }
    .block.pink {
        max-width: 960px;
        margin: auto;
    }
    #first-gallery {
        max-width: 960px;
    }
    .block.pink {
        padding: 0 50px 15px;
    }
    .block.pink p{
        max-width: 710px;
    }
    .block.pink a{
        margin-top: 30px;
    }
    .block.pink #svg-33{
        max-width: 80px;
    }

    #first-gallery .slick-slide {
        padding-bottom: 7.36%;
    }
    #rooms,
    #eat-and-drink,
    #essentials{
        padding: 0 15px;
    }
    #rooms .text-cotainer,
    #rooms .gallery-container{
        width: 50%;
    }
    #eat-and-drink .gallery-container{
        width: 50%;
    }
    #eat-and-drink-gallery{
        width: 100%;

    }
    #eat-and-drink-gallery .slick-slide {
        padding-bottom: 19%;
    }
    #rooms,
    #eat-and-drink{
        margin-top: 150px;
    }
    #rooms h1, #rooms h2{
        width: 100%;        
        color: var(--black);
        box-sizing: border-box;
        margin: .67em 0;
        line-height: 1em;
        font-family: "Playfair Display", serif;
        font-weight: var(--regular);
        font-size: 40px;
        background-color: transparent;
        height: max-content;
        position: relative;
        margin-top: 50px;
        margin-bottom: 0;
        padding: 0;
        padding-left: calc(50vw - 600px);
        text-align: left;
        transition: all .15s ease-out;
        width: 100%;
    }
    #eat-and-drink h1, #eat-and-drink h2{
        margin-top: 0;
        width: 100%;
    }
    #rooms .text{
        padding-left: calc(50vw - 600px);
        width: 100%;
        padding-top: 40px;
    }
    #eat-and-drink #eat-and-drink-text{
        max-width: 54%;
    }
    #eat-and-drink h1, #eat-and-drink h2{
        padding-right: calc(50vw - 600px);
        padding-left: 40px;
        text-align: left;
    }

    #eat-and-drink .text{
        width: 100%;
        padding-top: 40px;
        padding-left: 40px;
        padding-right: calc(50vw - 600px);
    }

    #rooms .text a,
    #eat-and-drink .text a,
    #essentials .text a{
        display: block;
        padding-top: 4px;
        margin-top: 20px;
    }
    #essentials .text{
        max-width: 1000px;
        padding: 0 0 40px 0;
    }
    #rooms h1 img, #rooms h2 img{
        max-height: 200px;
        top: -174px;
        left: calc(50% - 209px);
    }
    #eat-and-drink h1 img, #eat-and-drink h2 img{
        max-height: 109px;
        max-width: 300px;
        top: -90px;
        left: calc(50% - 240px);
    }

    #essentials{
        margin-top: 0;
        margin-bottom: 120px;
    }
    #essentials h1, #essentials h2{
        margin-bottom: 35px;
        padding: 0;
        margin-top: 100px;
    }
    #essentials h1 svg, #essentials h2 svg{
        max-height: 200px;
        max-width: 315px;
        top: -95px;
        left: -134px;
    }
    #essentials .slick-track{
        display: flex;
        justify-content: space-between;
    }
    #essentials #essentials-gallery .slick-slide{
        -moz-transition: margin .25s ease-out;
        -webkit-transition: margin .25s ease-out;
        -ms-transition: margin .25s ease-out;
        -o-transition: margin .25s ease-out;
        transition: margin .25s ease-out;
        margin-bottom: 0;
        position: relative;
    }
    #essentials #essentials-gallery .slick-slide:hover{
        margin-bottom: 75px;
    }
    #essentials #essentials-gallery .slick-slide div{
        display: none;
    }
    #essentials .slick-slide {
        max-width: 31%;
        padding-bottom: initial;
    }
    #essentials .slick-slide a.essential-link{
        position: relative;
        display: block;
        width: 100%;
        padding-bottom: 100%;
        z-index: 1;
        background-position: center center;
        background-size: cover;
    }
    #essentials .slick-slide a.essential-title{
        -moz-transition: bottom .25s ease-out;
        -webkit-transition: bottom .25s ease-out;
        -ms-transition: bottom .25s ease-out;
        -o-transition: bottom .25s ease-out;
        transition: bottom .25s ease-out;
        display: flex;
        width: calc(100% - 12px);
        padding-right: 10px;
        padding-bottom: 5px;
        position: absolute;
        color: #000;
        height: 67px;
        bottom: 0;
        font-family: "Playfair Display", serif;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 1.2em;
        font-weight: 500;
        text-decoration: none;
        align-items: end;
        justify-content: end;
        z-index: 0;
        border-right: 1px solid #000;
        background-color: transparent;
    }
    #essentials .slick-slide a.essential-title::before{
        display: none;
    }
    #essentials #essentials-gallery .slick-slide:hover a.essential-title{
        bottom: -64px
    }

    #essentials-gallery div a:hover{
        color: var(--red);
    }
    #essentials-gallery .slick-slide{
        cursor:pointer;
    }
    .slick-track::before, .slick-track::after {
        display: none;
    }
}
@media(min-width: 1200px){
    header:not(.home-scrolling):not(.show-menu){
        background-color: transparent;
        height: max-content;
        position: absolute;
        padding: 6px 0px 25px;
    }
    header #header-watercolor,
    header #logo-container #logo,
    header #logo-container{
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
    /* header.scrolling .top-menu {
        width: 60%;
        max-width: 586px;
        margin-bottom: 25px;
        margin-right: 220px;
    } */
    header:not(.show-menu, .home-scrolling) .top-menu{
        max-width: 586px;
        width: 60%;
        margin-bottom: -32px;
        margin-right: 180px;
        z-index: 2;
    }
    /* header.scrolling .top-menu {
        width: 60%;
        max-width: 280px;
        margin-bottom: -32px;
        margin-right: 180px;
        z-index: 2;
    } */
    header:not(.home-scrolling) #logo-container{
        position: absolute;
        width: 100%;
        top:30px;
    }
    header:not(.home-scrolling) #logo-container #logo{
        display: none;

    }
    header #header-watercolor{
        display: block;
        height: 0;
        background-color: var(--ligth-beige);
        background-repeat: no-repeat;
        background-size: 75% auto;
        background-position: center center;
    }
    header #header-watercolor .slick-slide {
        height: calc(100vh - 85px);
        padding-bottom: 0;
        background-size: 90% auto;
        background-repeat: no-repeat;
    }

    header.home-scrolling #header-watercolor  {
        display: block;
    }
    header:not(.home-scrolling):not(.show-menu) #header-watercolor{
        width: 100%;
        height: calc(100vh - 85px);
    }

    header nav,
    header #circle-book-now-container {
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
    header:not(.home-scrolling) #circle-book-now-container{
        max-height: 160px;
        height: 160px;
        width: 160px;
        left: calc(100% - 210px);
        position: relative;
        top: calc(100vh - 340px)
    }

    header:not(.home-scrolling) #circle-book-now-container #circle-book-now{
        height: 160px;
        width: 160px;
        font-size: 20px;
        line-height: 24px;
        top: 0;
        margin-top: 0;
    }
    header:not(.home-scrolling):not(.show-menu) #logo svg {
        height: 238px;
        width: auto;
    }
    header:not(.home-scrolling):not(.show-menu) #logo{
        top: 0;
        width: 352px;
        height: 238px;
        left: calc(50% - 176px);
    }
    /*
    header.home-scrolling #circle-book-now-container {
        overflow: hidden;
        position: unset;
    }
    header:not(.home-scrolling):not(.show-menu) #circle-book-now{
        height: 256px;
        width: 256px;
        font-size: 40px;
        line-height: 52px;
        margin-right: 140px;
    }
    header:not(.home-scrolling):not(.show-menu) #circle-book-now {
        top: auto;
    }
    header:not(.home-scrolling):not(.show-menu) #logo{
        top:auto;
        left: calc(50% - 186px);
        height: min-content;
    }
    header:not(.home-scrolling):not(.show-menu) #logo svg {
        height: 238px;
        width: 373px;
    }
    header.home-scrolling #logo, header.show-menu #logo {
        top: 0;
        width:0;
    }

    */




    header:not(.home-scrolling):not(.show-menu) #burger {
        margin-top: auto;
    }
    header:not(.home-scrolling):not(.show-menu) nav .option {
        text-align: center;
        margin: 0 3%;
    }
    header:not(.home-scrolling):not(.show-menu) nav .submenu .option {
        text-align: center;
        margin: 0;
    }


    #eat-and-drink h1 img, #eat-and-drink h2 img {
        left: calc(50% - 140px);
    }

    #rooms .text {
        padding-left: calc(50vw - 600px);
    }
    #eat-and-drink .text{
        padding-right: calc(50vw - 600px);
    }
    #eat-and-drink #eat-and-drink-gallery{
        margin-right: calc(50vw - 600px);
    }

}
@media(max-width: 1200px){
    #rooms-gallery .slick-slide{
        padding-bottom: 7.5%;
    }
    #eat-and-drink-gallery .slick-slide{
        padding-bottom: 14.5%;
    }
}
@media(min-width: 768px) and (max-width: 1200px){
    nav{
        display: none !important;
    }
}
@media(min-width: 768px){
    .submenu a{
        line-height: 24px;
    }
}
@media(max-width: 768px){
    #content #watercolor_gallery_md,
    #content #watercolor_gallery{
        width: 100% !important;
        margin-top: 80px;
        margin-bottom: 50px;
    }
    #content #watercolor_gallery_md .slick-slide,
    #content #watercolor_gallery .slick-slide{
        height: calc(90vh - 285px);
    }
    #essentials-gallery .slick-slide .photo-text{
        display: block !important;
    }
	#NLModal img[alt="Cb-cumple"]{
		position:relative;
	}
    #essentials-gallery .slick-slide{
        position: relative;
    }
}
@media(min-width:768px){
    .width-60{
	width:60%;
	}
	#NLModal img[alt="Cb-cumple"]{
		position:absolute;
		left:0;
		top:32%;
	}
}