@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* { padding: 0; margin: 0; scroll-behavior: smooth;}
body { font-family: 'Roboto', sans-serif;}

#facebody { height: 320vh; width: 100%; position: relative;}

#home { height: 100vh; width: 100%; position: absolute; background: url(../media/hotel-out.jpg) center no-repeat; background-size: cover;}
.background { height: 100vh; width: 100%; position: absolute; margin: 0; background: rgba(0, 0, 0, .7); }
.logo { height: 60px; width: 60px; position: absolute; margin: 20px 0 0 40px; background: url(../media/logo-white.png) center no-repeat; background-size: contain;}
nav { width: 565px; position: fixed; top: 30px; margin: 0 0 0 50%; display: flex; justify-content: space-between;}
nav a { font-size: 30px; font-weight: 500; text-decoration: none; color: #fff;}
.headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.headline h1 { color: #FFF; font-size: 64px; font-weight: 500;}
.headline h2 { color: #FFF; font-size: 20px; font-weight: 400; text-align: center; padding-top: 10px;}
.book { height: 40px; margin-right: 20px; background: #DC143C; border: rgba(220, 20, 60, 0) 3px solid; font-size: 30px; font-weight: 500; color: #FFF; text-decoration: none; line-height: 3em; transition: all ease-in-out .4s;}
.info { height: 40px; margin-left: 20px; background: #DC143C; border: rgba(220, 20, 60, 0) 3px solid; font-size: 30px; font-weight: 500; color: #FFF; text-decoration: none; line-height: 3em; transition: all ease-in-out .4s;}
.info:hover, .book:hover { height: 40px; background: none; border: #DC143C 3px solid;}

#info { height: 100vh; width: 100%; position: absolute; margin: 100vh 0 0 0; background: #333333;}
.info-headline { font-size: 30px; font-weight: 500; color: #fff; position: absolute; margin: 70px 0 0 calc(50% - 152px);}
.adv-cont { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex;}
.adv-cont div { height: 450px; width: 245px; position: relative;}
.adv-cont img { height: 150px; width: 150px; position: absolute; margin: 20px 0 0 50px;}
.adv-cont p { height: 160px; width: 230px; position: absolute; margin: 200px 0 0 10px; font-size: 20px; font-weight: 400; color: #FFF; text-align: center;}
.wave { width: 100%; position: absolute; top: 82.3%; left: 50%; transform: translate(-50%, -50%);}

#gallery { height: 100vh; width: 100%; position: absolute; margin: 200vh 0 0 0; background-color: #DC143C; overflow: hidden;}
.gallery-center { width: 800px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.gallery-headline { font-size: 30px; font-weight: 500; color: #fff; position: absolute; margin: 0 0 0 calc(50% - 129px);}
.slideshow-container { max-width: 800px; position: relative;margin: calc(50vh - 270px) 0 0 calc(50% - 400px);}
.mySlides { display: none; height: 500px;}
.mySlides img { width:100%; height: 500px;}
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #fff; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);}
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #fff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active, .dot:hover { background-color: #242323; height: 10px; width: 10px; margin: 2.5px 2px;}
.fade { animation-name: fade; animation-duration: 1.5s;}
@keyframes fade { from {opacity: .4} to {opacity: 1} }
.wave2 { width: 100%; position: absolute; top: 82.3%; left: 50%; transform: translate(-50%, -50%);}

footer { height: 20vh; width: 100%; position: absolute; margin: 300vh 0 0 0; background: #333333;}
.logo-container { height: 10vh; width: 50%; position: absolute; margin: 5vh 0 0 25%; display: flex; justify-content: space-between;}
.logo-container img { height: 10vh; position: relative;}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* Styles for phones in portrait orientation */
    #facebody { height: 315vh;}
    .logo { height: 40px; width: 40px; margin: 20px 0 0 10px;}
    .headline h1 { font-size: 32px; width: 310px;}
    .headline h2 { font-size: 10px;}
    nav { width: 220px; top: 32px; margin: 0 0 0 35%;}
    nav a { font-size: 14px; font-weight: 500;}
    .book { font-size: 15px; margin-right: 10px;}
    .info { font-size: 15px; margin-left: 10px;}
    footer { height: 15vh; }
    .logo-container img { height: 5vh;}
    .logo-container img { height: 5vh; position: relative;}

    .info-headline { margin: 20px 0 0 calc(50% - 152px);}
    .adv-cont { display: block;}
    .adv-cont div { height: 15vh; width: 315px; margin-bottom: 25px;}
    .adv-cont img { height: 100px; width: 100px; margin: 0 0 0 0;}
    .adv-cont p { height: auto; width: 200px; margin: 28px 0 0 115px; font-size: 10px;}
    .wave { top: 93.9vh;}

    .gallery-center { width: 315px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .slideshow-container { max-width: 315px; position: relative;margin: 0;}
    .mySlides { display: none; height: 196.8px;}
    .mySlides img { height: 196.8px;}
    .wave2 { top: 93.9vh;}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
    /* Styles for phones in landscape orientation */
    #facebody { height: 315vh;}
    .logo { height: 40px; width: 40px; margin: 20px 0 0 10px;}
    .headline h1 { font-size: 32px; width: 310px;}
    .headline h2 { font-size: 10px;}
    nav { width: 220px; top: 32px; margin: 0 0 0 60%;}
    nav a { font-size: 14px; font-weight: 500;}
    .book { font-size: 15px; margin-right: 10px;}
    .info { font-size: 15px; margin-left: 10px;}
    footer { height: 15vh; }
    .logo-container img { height: 5vh;}
    .logo-container img { height: 5vh; position: relative;}

    .info-headline { margin: 20px 0 0 calc(50% - 152px);}
    .adv-cont { display: flex;}
    .adv-cont div { height: 207px; width: 150px; margin-bottom: 25px;}
    .adv-cont img { height: 100px; width: 100px; margin: 0 0 0 25px;}
    .adv-cont p { font-size: 10px; width: 130px; height: auto; margin: 130px 0 0 10px;}
    .wave { top: 82.9vh;}

    .gallery-center { width: 315px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .slideshow-container { max-width: 315px; position: relative;margin: 0;}
    .mySlides { display: none; height: 196.8px;}
    .mySlides img { height: 196.8px;}
    .wave2 { top: 82.9vh;}
}

@media only screen and (min-width: 768px) and (max-width: 1370px) and (orientation: portrait) {
    /* Styles for tablets in portrait orientation */
    nav { width: 365px; top: 32px; margin: 0 0 0 45%;}
    nav a { font-size: 24px; font-weight: 500;}

    .adv-cont { display: block;}
    .adv-cont div { height: 15vh; width: 600px; margin-bottom: 25px;}
    .adv-cont img { height: 150px; width: 150px; margin: 0 0 0 0;}
    .adv-cont p { height: auto; width: 450px; margin: 48px 0 0 165px; font-size: 20px;}

    .gallery-center { width: 668px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .slideshow-container { max-width: 668px; position: relative;margin: 0;}
    .mySlides { display: none; height: 417px;}
    .mySlides img { height: 417px;}

    .logo-container { width: 80%; margin: 5vh 0 0 10%;}

    .wave { top: 93.2vh;}
    .wave2 { top: 93.2vh;}
}

@media only screen and (min-width: 768px) and (max-width: 1170px) and (orientation: landscape) {
    /* Styles for tablets in portrait orientation */
    nav { width: 500px; top: 32px; margin: 0; left: 45%;}

    .wave { top: 85.2vh;}
    .wave2 { top: 85.2vh;}
}