@font-face {
    font-family: 'TextFont';
    src: url('./../fonts/BarlowSemiCondensed-Regular.ttf');
}
@font-face {
    font-family: 'HeaderFont';
    src: url('./../fonts/UnicaOne-Regular.ttf');
}
@font-face {
    font-family: 'SpecialFont';
    src: url('./../fonts/YesevaOne-Regular.ttf');
}

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0em;
    color: black;
    text-align: left; /* center;*/
    font-family: TextFont;
}
p {
    margin-block-start: 0;
}
/* Top bar menu. */
#header_menu {
    background-color: #806658CC; /* shades of #FFCCB1 https://color.adobe.com/de/create/color-wheel*/
    height: 6em;
    position: fixed;

    top: 0;
    width: 100%;
    z-index: 5;
    font-family: HeaderFont;
    text-transform: uppercase;
}
ul.nav {    
    list-style-type: none;
    display: flex;
    padding-inline-start: 0;
    width: 78em;
    height: 4em;
    margin: 0 auto;
    max-width: 78em;
    justify-content: space-between;
    margin-top: 1.5em;
}
ul.nav.submenu {
    margin-top: 0;
    padding-top: 0.5em;
}
ul.nav li:hover {
    cursor: pointer;
}
ul.nav li a {
    padding-inline-start: 0;
    text-decoration: none;
    color: white;
    font-size: 1.5em;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 10px;
    line-height: 48px;
}
ul.nav li a.scrolledToVisible {
    border-bottom: 1px solid white;
    font-weight: bold;
}
a {
    color: #806658CC;
    cursor: pointer;
    text-decoration: underline;
}
.portraitmenu {
    display: none;
}
/* logo element */
ul.nav .item-index img {
    width: 180px;
    margin-top: -4px;
    filter: brightness(10);
}
/*ul.nav .item-index a:hover {
    border-bottom: 0;
}
ul.nav li.current.active a,
ul.nav li a:hover {
    border-bottom: 1px solid white;
}*/
.imageselection ul  {
    display: inline-flex;
    list-style-type: none;
    padding: 0;
}
.imageselection li {
    width: 0.5em;
    height: 0.5em;
    background: #5c6375; /*#e0e4e7*/
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0.4em;
    opacity: 0.5;
    margin-right: 0.25em;
}
.imageselection li:last-child {
    margin-right: 0em;
}
h1 {
    font-family: SpecialFont;
    font-weight: normal;
    font-size: 2em;
    margin: 0;
    /*margin: 1.5em 0 0 0;*/
}
h2 {
    font-family: HeaderFont;
    font-weight: normal;
    font-size: 1.5em;
    margin: 0;
    text-transform: uppercase;
}
/*
.content.first h1 {
    margin-top: 0.5em;
}*/

@media only screen and (orientation:portrait) {}


/* 
// if scrolling is not working on mobile
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}*/

.parallax {
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0em 3em 0 3em;
    background-color: black;
    background-blend-mode: lighten;
}
.parallax.image {
    height: 75% /*40em*/;
    background-image: url(./../images/1.jpg); /*19.jpg);*/
    /*background-position-y: -75px;*/
    padding: 0;/*3em 3em 0 3em;*/
    position: relative;
}
.parallax.image1 {
    height: 70%;
    background-image: url("./../images/2.jpg"); /*20*/
}
.parallax.image2 {
    height: 70%;
    background-image: url("./../images/3.jpg"); /*24*/
}
.parallax.image3 {
    height: 70%;
    background-image: url("./../images/4.jpg"); /*26*/
}
.parallax.image4 {
    height: 70%;
    background-image: url("./../images/5.jpg");/*10*/
}
.parallax.image5 {
    height: 70%;
    background-image: url("./../images/6.jpg");/*8*/
}
.parallax.image6 {
    height: 70%;
    background-image: url("./../images/26.jpg");/*8*/
}
.parallax.imageLast {
    height: 70%;
    background-image: url("./../images/17.jpg");/*17*/
    padding: 0 3em 3em 3em;
}


.text {
    padding: 2em;
    font-size: 2em;
    font-weight: unset;
    /*width: 60%;*/
    margin: 0 auto;
}
/*.content.first .text {
    padding-top: 0;
}*/
div.borderColor {
    border: 2em solid green;
    border-width: 0em 2em 0em 2em;
}
.content {
    padding: 0 3em;
}
.content.first {
    padding-top: 0;
}
q {
    display: block;
    margin-bottom: 1em;
}
ul.textul {
    list-style-type: none;
}

/* gallery */
.gallerydisplay img {
    height: 10em;
    padding: 0 1em 1em 0;
}

/* gallery popup */
.gallerypopup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #000000DD;
    padding: 12em 0;
    display: none;
}
.gallerypopup img {
    height: 75%;
}
.gallerypopup .iconHolder {
    position: absolute;
    background-color: #FFFFFFAA;
    height: 50px;
    width: 50px;
    border-radius: 50px;
}
.gallerypopup .galleryIcons {
    width: 40px;
    height: 40px;
    margin-top: 5px;
}
.gallerypopup .iconHolder.close {
    margin-left: 63%;  
    margin-top: -1em; 
}
.gallerypopup .iconHolder.chevron {
    margin-top: 10%;
}
.gallerypopup .iconHolder.chevron.left {
    margin-left: 31.1%;    
}
.gallerypopup .iconHolder.chevron.right {
    margin-left: 67%;   
}

/* contact form */
form label {
    display: block;
}
form div {
    width: 45%;
    float: left;
    height: 3.5em;
}
form div.guestCountDiv {
    float: right;
}
form div label {
    text-align: left;
}
form div.guestCountDiv label {
    text-align: right;
}
form input,
form select,
form textarea {
    width: 100%;
    vertical-align: middle;
    font-size: 0.8em;
    padding: 0.2em;
    font-family: 'TextFont';
}
form select,
form #submitButton {
    width: 101.5%;;
}
form textarea {
    height: 4em;
}


/* content elements */
.separator img {
    width: 4em;
}
.landscapeDisplay {
    display: block;
}
.portraitDisplay {
    display: none;
}
/* custom bullet points */
.text li:before {
  content: url('./../images/icons/itemLi.png');
  display: inline-block;
  margin-left: -1.2em;
  width: 1.2em;
}
ul li {
    list-style-type: none;
}
ul {
    /*text-align: left;*/
    margin-right: 1em;
}

.content.additionalLinks {
    text-align: right;
    margin: 1em 0;
    height: 4em;
}
.content.additionalLinks a {
    margin-left: 1em;
    color: black;
    font-size: 1.5em;
    text-underline-offset: 0.2em;
}


/* @media (orientation: portrait) not working as it's not portrait anymore when keyboard opens. */ 
@media screen and (max-aspect-ratio: 13/9) {
    .content {
        padding: 0;
    }
    .text {
        width: 100%;
    }
    .gallerydisplay img {
        width: 100%;
        height: auto;
    }
    /* hack for centering ... */
    .separator {
        width: 100%;
        padding: 0 4em;
    }
    ul.nav.menu {
        display: none;
    }
    #header_menu {
        height: 8em; /*13em;*/
    }
    .portraitmenu {
        display: block;
        text-align: right;
    }
    .portraitmenu img {
        height: 8em;
    }
    .portraitmenu ul.nav.menu {
        display: none;
        padding: 0;
        margin: 0;
        width: 100%;
        background-color: #806658FF;
    }
    .portraitmenu ul.nav.menu a {
        font-size: 2em;
    }
    .portraitmenu ul.nav.menu li {
        height: 4em; /*7em;*/
        padding-right: 3em;
    }
    /*.portraitmenu ul.nav.menu li.item-index {
        height: 3em; 
    }*/
    .portraitmenu ul.nav .item-index img {
        width: 8em;
    }
    form input, form select, form textarea {
        width: 88%;
        font-size: 2em;
        padding: 13px 33px;
        border-width: 4px;
        border-color: #00000055;
    }
    form div {
        float: none;
        width: 100%;
        height: auto;
    }
    form div.guestCountDiv {
        float: none;
        margin: 1em 0;
    }
    form div label, form div.guestCountDiv label {
        text-align: center;
    }
    form select, form #submitButton {
        width: 95.5%;
    }

    #route iframe {
        width: 100%;
        height: 25em;
    }

    .portraitDisplay {
        display: block;
    }
    .landscapeDisplay {
        display: none;
    }
    .parallax.image,
    .parallax.image1,
    .parallax.image2,
    .parallax.image3,
    .parallax.image4,
    .parallax.image5,
    .parallax.image6,
    .parallax.imageLast {
        margin: 0 -8em;
        height: 40em;
        background-position-y: 0;
        /*background-position-y: -25em;*/
    }
    .parallax.image {
    	background-position-x: -13em;
        background-position-y: -23em;
        height: 80%;
    }
    .parallax.image1 {
    	background-position-x: -68em;
        background-position-y: 0;
    }
    .parallax.image2 {
    	background-position-x: -98em;
        background-position-y: 0;
    }
    .parallax.image3 {
    	background-position-x: -79em;
        background-position-y: 0;
    }
    .parallax.image4 {
    	background-position-x: -85em;
        background-position-y: 0;
    }
    .parallax.imageLast {
    	background-position-x: -111em;
        background-position-y: 65em;
    }
    .content.additionalLinks {
        padding: 2em;
    }
}