@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   /* transition: all 0.2s ease;*/
}

mark {
    background-color: rgb(255, 121, 130);
}

:root {
    --black: #243031;
    --green: #4A968F;
    --grey: #E5E2E2;
    --grey2: #C3C9D2;
    --pink: #
}

body {
    color: #243031;
    font-family: "Noto Sans", serif;
}

h1,
h2 {
    text-transform: uppercase;
    font-family: "Noto Sans", serif;
    font-variation-settings: "wdth" 75;
    color: #D7B557;
}

h2 {
    margin-bottom: 30px;
    /* font-style: italic; */
    font-size: 50px;
    line-height: 45px;
}

ul,
li {
    list-style: none;
}

#mainMap {
    height: 100vh;
}

#map {
    /* position: absolute;*/
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#mainMap .dot {
    position: absolute;
    top: 50%;
    left: 50%;
}

#mainMap .dot i {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url(../img/heart.svg) no-repeat center center / 100%;
    margin-left: -10px;
    margin-top: -10px;
    top: 0;
    left: 0;
    display: block;
}

#mainMap .dot .hover {
    background-color: #fff;
    padding: 16px;
    border-radius: 5px;
    left: -50%;
    position: absolute;
    bottom: 15px;
    margin-left: -150px;
    width: 300px;
    box-shadow: 0px 0px 10px #ccc;
    display: none;
}

#mainMap .dot:hover .hover {
    display: block;
}

#mainMap h2 {
    font-size: 16px;
}

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

#mainMap img {
    display: block;
    width: 100%;
}

#hoverTheMap {
    position: fixed;
    top: 0;
    left: 0;
}

#mainSideNav {
    background-color: #F5F4EA;
    height: 100vh;
    width: 70px;
    /* box-shadow: -2px -2px 8px 2px #b8b8b8; */
    z-index: 2;
    position: fixed;
    border-right: 1px solid #D7B557;
}
#mainSideNav *{ transition: all 0.2s ease; }


#results {
    left: -500px;
    position: absolute;
    height: 100vh;
    background-color: #F5F4EA;
    width: 420px;
    display: flex;
    top: 0;
    /* overflow: scroll; */
    flex-direction: column;
}

#results.opened {
    left: 70px;
    box-shadow: -2px -2px 138px 2px #b8b8b8;
    border-right: 1px solid #D7B557;
}

#results .close {
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: none;
}

.resultsList {
    overflow: scroll;
}

.resultsList li:hover {
    background-color: #fff;
}

.hidden {
    display: none!important
}

#results li {
    padding: 20px;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    width: 100%;
    display: flex;
    cursor: pointer
}

#results li h2 {
    font-size: 27px;
    margin-bottom: 5px;
}

#results .resultsList li.opened {
    display: flex;
}

#results .picture img {
    max-width: 260px;
    max-height: 90px;
}

#results .picture {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: none;
}

#results h5 {
    padding: 20px;
    font-size: 18px;
    font-weight: 300;
}

#results h3 {
    font-size: 16px;
    font-weight: 500;
}

#results li .text h4,
#results li .text .intro {
    /* color: #9e9e9e; */
    font-size: 14px;
    padding: 0 8px;
    font-weight: 500;
    line-height: 25px;
    background-color: #fff;
    /* border: 1px dotted #ccc; */
}

#results li .text h4 {
    display: inline-block
    /* margin-bottom: 15px; */
}

#topLabels {
    position: fixed;
    top: 15px;
    left: 510px;
}

#topLabels li {
    background-color: #F5D8DB;
    /* border-radius: 10Px; */
    display: block;
    margin: 1px;
    float: left;
    /* box-shadow: 0px 0px 3px 0px #b8b8b8; */
}

#topLabels li.selected {
    background-color: #DF3316;
    color: #fff
}

#topLabels li:hover {
    background-color: #FF4040;
}

#topLabels li.selected a {
    color: #fff;
    text-transform: uppercase;
}

#topLabels li:hover a {
    color: #fff;
}

#topLabels li a {
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    padding: 10px 15px;
    color: #C7361C;
    font-weight: bold;
}

#expandedSideBar {
  
}

#expandedSideBar .top {
    text-align: center;
}

#expandedSideBar .top img {
    width: 100%
}

#expandedSideBar .top .close {
    background: none;
    box-shadow: none;
    position: absolute;
    right: 5px;
    top: 5px;
}

.hamburger-lines {
    display: block;
    height: 16px;
    width: 32px;
    position: absolute;
    top: 17px;
    left: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger-lines .line {
    display: block;
    height: 2px;
    width: 65%;
    border-radius: 10px;
    background: #919191;
}

.hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
}

.hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
}


/*https://alvarotrigo.com/blog/hamburger-menu-css/*/

.detail {
    position: absolute;
    top: 100px;
    background-color: #fff;
    left: calc(50vw - (100vw - 550px) / 2);
    width: calc(100vw - 550px);
    border-radius: 10px;
    height: calc(100vh - 140px);
    display: flex;
    display: none;
    box-shadow: 0px 0px 3px 0px #b8b8b8
}

.detail .bigVisual .picture {
    width: 100%;
    max-height: 100%;
}

.hasResultsOpened .detail {
    left: 530px;
}

.detail.opened {
    display: flex;
}

.detail .text {
    padding: 40px;
    border-right: 1px solid #ccc;
    min-width: 50%;
    justify-content: space-between;
    display: flex;
    background: #F5F4EA;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
}

.detail .bigVisual img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.detail .text h3 {
    font-size: 22px;
    font-weight: 500;
}

.detail .text h4,
.detail .text .intro {
    color: #9e9e9e;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
}

.detail .text h4 {
    margin-bottom: 15px;
}

.close {
    /*background-color: #fff;
     box-shadow: 0px 0px 5px #ccc;*/
    width: 40px;
    position: absolute;
    height: 40px;
    border-radius: 50%;
    cursor: pointer
}

.detail .close {
    right: 10px;
    top: 10px;
}

.close .line {
    display: block;
    height: 2px;
    width: 26px;
    border-radius: 10px;
    background: #000;
    content: '';
    position: absolute;
    top: calc( 12px / 2 + 13px);
    left: 7px;
    right: 0;
}

.close .line1 {
    transform: rotate(45deg);
}

.close .line2 {
    transform: rotate(-45deg);
}

#expandedSideBar {
    display: flex;
    width: 300px;
    background-color: #fff;
    height: 100vh;
    z-index: 2;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
}

.blackLayer {
    background-color: rgba(0, 0, 0, 0.245);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
}

.mainNavigation {
    padding: 50px 0;
}
.mainNavigation ul{ border-top: 1px solid #DF3316;}
.mainNavigation li {
    padding: 0;
    font-size: 13px;
    margin: 0;
    border-bottom: 1px solid #DF3316;
}

.mainNavigation li a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 10px;
    font-weight: bold;
    width: 100%;
    /* border-bottom: 1px dotted rgb(186, 53, 53); */
    text-transform: uppercase;
    font-size: 18px;
}

.navBeta a{ color: #000; text-decoration: none; padding: 20px; display: block; }
.navBeta li{ display: inline-block;}
.navBeta ul{ text-align: center;}
nav #expandedSideBar {
    left: -350px;
}

nav .blackLayer {
    display: none;
}

nav.opened #expandedSideBar {
    left: 0;
    /*background-color: #F5ECDB;*/
}

nav.opened .blackLayer {
    display: block;
}

#listView {
    display: flex;
    flex-wrap: wrap;
    padding-left: 70px;
}

#listView div.locationWrap {
    border-right: 2px solid #C7361C;
    border-bottom: 2px solid #C7361C;
    width: 50%;
    min-width: 50%;
}
div.locationWrap {
    display: flex;
    flex-wrap: wrap;
    align-content:start;
}
 div.locationWrap .titles{ display: block; width: 100%; padding: 20px;}
 div.locationWrap .titles h2{ margin-bottom: 5px;}
 div.locationWrap .titles h4{ 
    color: #4a5353;
    border-top: 1px solid #4a5353;
    display: inline-block;
    padding-top: 5px;
}

 div.locationWrap .text {
    padding: 20px;
   /* border-right: 1px solid #ccc;*/
    width: 50%;
    min-width: 50%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.text .up {
    margin-bottom: 30px;
}

.text .infoBox {
    padding: 10px;
    position: relative;
    min-height: 65px;
    background-color: #fff;
}

.smallPict {
    max-width: 100px;
    max-height: 100px;
    position: absolute;
    top: -20px;
    right: -16px;
    /* background-color: #fff; */
}

.text h4 {
    font-size: 15px;
    font-family: "Courier Prime", serif;
    font-weight: 600;
    /* border-bottom: 1px solid #ccc; */
}

.fromWYSIWYG {
    font-family: "Courier Prime", serif;
    font-weight: 400;
    font-style: normal;
}

.fromWYSIWYG p,
.fromWYSIWYG ul {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 25px;
}

.fromWYSIWYG ul,
.fromWYSIWYG li {
    list-style: circle inside;
}
.fromWYSIWYG a{ color: #C7361C;}

div.locationWrap .pict,
.bigVisual {
    width: 50%;
    padding: 5%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
   /* background-color: #F5F4EA;*/
}

.bigVisual {
    min-width: 50%;
}

 div.locationWrap .pict img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto 30px auto;
}

.leaflet-div-icon {
    background: none!important;
    border: none!important;
}

.insideTooltip h3 {
    text-transform: uppercase;
    font-size: 20px;
  color: #C7361C;
  line-height: 18px;
}

.insideTooltip h4 span {
    background-color: #C7361C;
    padding: 2px 10px;
    color: #FFF;
    font-size: 12px;
}


/* CONTACT */

.insideContent {
    padding: 100px 50px 100px 130px;
}

.bigTitle{ background-color: #C7361C ; display: block; width: 100%;}
.bigTitle h2{ 
    color: #F9CEE1;
    font-size: 100px;
    line-height: 90px;
    margin: 0;
    padding: 20px;
}

.smallTitle{     background-color: #fff;
    border-bottom: 2px solid #C7361C; display: block; width: 100%;}
    .marquee {
        overflow: hidden;
        width: 100%;
      }
      
      .marquee-content {
        display: flex;
        flex-wrap: nowrap;
      }
      
      .marquee-content h4 {
        flex: 0 0 auto;
        margin-right: 20px; /* ajustable */
      }
.smallTitle h4{ 
    font-size: 20px;
    line-height: 20px;
    color: #F9CEE1;
   
    margin: 0;
    padding: 20px;
}

.nameOfWebSite{ 
    position: absolute;
    rotate: -90deg;
    display: block;
    bottom: 0px;
    left: 11px;
    width: 100vh;
    transform-origin: left top;
    font-size: 30px;
    line-height: 45px;
    font-family: sans-serif;
    font-weight: bold;
}


#contactPage{
    background-color: #44776c;
    color: #fff7ff;
    height: 100vh;
    }

    #contactPage label{ display: block;     text-transform: uppercase;
        margin-bottom: -15px;
        display: block; color: #D7B557;}
#contactPage input{    color: #D7B557; }

#contactPage input, #contactPage textarea{ width: 100%;
            padding: 25px;
            font-size: 27px;border: none; }

#contactPage input[type="submit"]{background-color: #D7B557;padding: 20px;font-size: 30px;text-transform: uppercase;color: #44776c;font-weight: bold;}

            .contactWrapper { display: flex; justify-content: space-between;}
            .contactWrapper .contactBlabla{ width: 30%;}
            .contactWrapper .contactForm{ width: 60%;}

            .contactBlabla{ color: #fff;}
            .contactBlabla h3{ font-size: 70px; text-transform: uppercase; margin-bottom: 20px;}


            @media screen and (max-width: 850px) {
                #listView div.locationWrap{ width: 100%; min-width: 100%;}
            }
@media screen and (max-width: 800px) {
    div.locationWrap {
         min-width: 100%;
         width: 100%;
     }
 
     #mainSideNav{ 
         height: 50px;
         width: 100vw;
         border-top: 1px solid #D7B557;
         bottom: 0;
     }
     .nameOfWebSite{ rotate: none; }
     .hamburger-lines{ right: 24px; left: auto;}
     #results.opened{ left: 0;}
     #expandedSideBar{/* flex-direction: row; */}
     .mainNavigation  li{ display: inline-block; border: none;}
     .mainNavigation ul{ border: none;}
     nav #expandedSideBar{       
     left: 0; width: 100%; margin-top: 100px;     height: 90px; align-items: center;}
     nav.opened #expandedSideBar{
       bottom: 50px;
       height: calc( 100vh - 50px );
       }
     nav #expandedSideBar .top img{ width: 90px;}
     .mainNavigation{ padding: 0;}
     #expandedSideBar .top .close {
     
        right: 25px;
        top: 25px;
    }
    #listView{ padding-left: 0;}
    .bigTitle h2{ font-size: 55px;}
    h2{ font-size: 40px;}

    .insideContent{ padding: 50px}
    .contactWrapper{ display: block}
    .contactWrapper .contactBlabla,
    .contactWrapper .contactForm{ width: 100%;}
    .detail{     left: 20px;
        width: calc(100vw - 40px); top: 20px; 
       
        overflow: scroll;}

        .detail.opened {
            display: block;
        }
    }
 

    @media screen and (max-width: 700px) {
        div.locationWrap .text{ width: 100%;}
    }