html {
  font-family: 'Montserrat', helvetica, sans-serif;
  font-size: 62.5%;
  width: 100%;
}

body {
  max-width: 1500px;
  margin: auto;
}

h1 {
  font-size: 4.5rem;
  font-weight: bold;
}

h2 {
  font-size: 3rem;
  font-weight: bold;
}

h3 {
  font-size: 2.8rem;
  font-weight: bold;
}

h4 {
  font-size: 2.6rem;
}

h5 {
  font-size: 2.3rem;
}

h6 {
  font-size: 1.8rem;
}

p {
  font-size: 2rem;
}

      /* NAVBAR */

nav {
  min-height: 8vh;
  background-color: rgba(59,68,75, 0.99);
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 1500px;
  -webkit-box-shadow: 0 20px 50px 20px #000000;
  box-shadow: 0 0 19px 0 #000000;
  z-index: 100;
}



nav a {
  text-decoration: none;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  padding: 1.5rem 1.5rem;
  text-align: center;
  transition: ease-in 0.3s;
}

nav a:hover {
  color: rgba(204, 153, 51, 1);
}

/* Hide the link that should open and close the topnav on small screens */
nav .icon {
    display: none;
    font-size: 4rem;
    color: white;
}

.nav-bar {
    padding-right: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#logo {
  height: auto;
  width: 80%;
}

.language {
  display: flex;
  flex-direction: column;
}

/* Overlay dropdwon Nav menu */

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
}

.overlay a {
  padding: 2.5rem;
  font-size: 4rem;
  transition: 0.3s;
  color: rgba(200, 200, 200, 0.9);
  display: block;
}

.overlay a:hover, .overlay a:focus {
  color: rgba(204, 153, 51, 1);
}

.overlay .closebtn {
  position: absolute;
  top: 2rem;
  right: 4.5rem;
  font-size: 6rem;
}

/*#germany {
  padding-top: 0;
  padding-bottom: 1rem;
}

#italy {
  padding-top: 0;
  padding-bottom: 1rem;
}

#france {
  padding-top: 0;
  padding-bottom: 1rem;
}*/


      /* MAIN */

main {
  width: 100%;
  height: auto;
}

#topper {
  background-image: url('../images/L91A0437_1.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

/* Apartments description */

#apartment {
  padding: 15vh 2rem 3rem 2rem;
  text-align: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row;
  grid-gap: 1rem;
  grid-template-areas:  "apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg"
                        "para1 para1 para1 para1 para1 para1 para1 para1 para1 para1 para1 para1"
                        "house house house house house house house house house house house house"
                        "apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1"
                        "apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2"
                        "apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3"
                        "para2 para2 para2 para2 para2 para2 para2 para2 para2 para2 para2 para2";
}

.facility {
  background-color: rgba(59,68,75, 0.05);
}

.facility h1 {
  padding-top: 2rem;
}

#apt-hdg {
  grid-area: apt-hdg;
  padding-bottom: 5rem;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#house{
  grid-area: house;
  opacity: 0;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#apt1 {
  grid-area: apt1;
  opacity: 0;
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#apt2 {
  grid-area: apt2;
  opacity: 0;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#apt3 {
  grid-area: apt3;
  opacity: 0;
  -ms-grid-row: 6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#para1 {
  grid-area: para1;
  text-align: justify;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

#para2 {
  grid-area: para2;
  text-align: justify;
  padding-top: 1rem;
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
}

/* slide-show via jssor */

/*jssor slider loading skin double-tail-spin css*/
.jssorl-004-double-tail-spin img {
    animation-name: jssorl-004-double-tail-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-004-double-tail-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*jssor slider bullet skin 031 css*/
.jssorb031 {position:absolute;}
.jssorb031 .i {position:absolute;cursor:pointer;}
.jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
.jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
.jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
.jssorb031 .i.idn {opacity:.3;}

/*jssor slider arrow skin 052 css*/
.jssora052 {display:block;position:absolute;cursor:pointer;}
.jssora052 .a {fill:none;stroke:#000;stroke-width:360;stroke-miterlimit:10;}
.jssora052:hover {opacity:.8;}
.jssora052.jssora052dn {opacity:.5;}
.jssora052.jssora052ds {opacity:.3;pointer-events:none;}

  /* Style of icon-list */

.icons i {
  font-size: 3rem;
  color: rgba(1, 36, 59, 0.83);
}

.icons h4 {
  color: rgba(1, 36, 59, 0.83);
  font-size: 2rem;
}

.iconPersons {
  grid-area: iconPersons;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.headerPersons {
  grid-area: headerPersons;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

.persons {
  grid-area: persons;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}

.iconBed {
  grid-area: iconBed;
  -ms-grid-column: 4;
  -ms-grid-row: 1;
}

.headerBed {
  grid-area: headerBed;
  -ms-grid-column: 4;
  -ms-grid-row: 2;
}

.bed {
  grid-area: bed;
  -ms-grid-column: 4;
  -ms-grid-row: 3;
}

.iconCouch {
  grid-area: iconCouch;
  -ms-grid-column: 6;
  -ms-grid-row: 1;
}

.headerCouch {
  grid-area: headerCouch;
  -ms-grid-column: 6;
  -ms-grid-row: 2;
}

.couch {
  grid-area: couch;
  -ms-grid-column: 6;
  -ms-grid-row: 3;
}

.iconBath {
  grid-area: iconBath;
  -ms-grid-column: 8;
  -ms-grid-row: 1;
}

.headerBath {
  grid-area: headerBath;
  -ms-grid-column: 8;
  -ms-grid-row: 2;
}

.bath {
  grid-area: bath;
  -ms-grid-column: 8;
  -ms-grid-row: 3;
}

.iconWifi {
  grid-area: iconWifi;
  -ms-grid-column: 10;
  -ms-grid-row: 1;
}

.headerWifi {
  grid-area: headerWifi;
  -ms-grid-column: 10;
  -ms-grid-row: 2;
}

.wifi {
  grid-area: wifi;
  -ms-grid-column: 10;
  -ms-grid-row: 3;
}

.iconPool {
  grid-area: iconPool;
  -ms-grid-column: 12;
  -ms-grid-row: 1;
}

.headerPool {
  grid-area: headerPool;
  -ms-grid-column: 12;
  -ms-grid-row: 2;
}

.pool {
  grid-area: pool;
  -ms-grid-column: 12;
  -ms-grid-row: 3;
}

.iconWifi, .headerWifi, .wifi, .iconPool, .headerPool, .pool, .icons i:nth-child(5n+0), .icons i:nth-child(6n+0){
  display: none;
}

.icons {
  padding: 2rem 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row;
  grid-gap: 1rem;
  grid-template-areas:  "iconPersons iconBed iconCouch iconBath"
                        "headerPersons headerBed headerCouch headerBath"
                        "persons bed couch bath";
}


/* Buchung */

#buchung {
  text-align: center;
  height: auto;
  width: 100%;
  padding-top: 15vh;
  padding-bottom: 5vh;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: row;
  grid-gap: 1rem;
  grid-template-areas:  ". h1 h1 . . ."
                        "form form form form form form"
                        ". h2 h2 h2 h2 ."
                        ". link1 link1 link1 link1 ."
                        ". link2 link2 link2 link2 ."
                        ". link3 link3 link3 link3 ."
                        ". link4 link4 link4 link4 .";
}

#buchung-heading {
  grid-area: h1;
  text-align: left;
}

#form {
  grid-area: form;
  font-size: 2rem;
  font-weight: bold;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: row;
  grid-template-areas:  ". name name name . ."
                        ". email email email . ."
                        ". query query query query ."
                        ". submit . . . .";
}

#name {
  grid-area: name;
  height: 2rem;

}

#email {
  grid-area: email;
  height: 2rem;
}

#query {
  grid-area: query;
}

#name, #email, #query {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  border: 0.2rem solid rgba(59, 68, 75, 0.3);
  border-radius: 0.4rem;
}

#submit {
  grid-area: submit;
  margin-top: 2rem;
  padding: 2rem;
  background-color: rgba(59,68,75, 0.99);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
}

#link-heading {
  grid-area: h2;
  text-align: left;
  margin-top: 3rem;
}

#link1 {
  grid-area: link1;
}

#link2 {
  grid-area: link2;
}

#link3 {
  grid-area: link3;
}

#link4 {
  grid-area: link4;
}

#link1, #link2, #link3, #link4 {
  text-align: center;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(59,68,75, 0.99);
  border: 0.3rem solid rgba(59,68,75, 0.99);
  border-radius: 1rem;
  position: relative;
}

#link1:hover, #link2:hover, #link3:hover, #link4:hover, #submit:hover {
  color: rgba(204, 153, 51, 1);
  border: .3rem solid rgba(204, 153, 51, 1);
  /*color: rgba(59,68,75, 0.99);
  background-color: rgba(255, 255 ,255, 0.99);
  border: 0.1rem solid rgba(59,68,75, 0.99);*/
}

.buchung h1 {
  margin-bottom: 3rem;
}

.buchung a {
  text-decoration: none;
  color: black;
  transition: ease-in 0.3s;
  padding: 2%;
  margin: 1%;
  background-color: inherit;
  font-size: 3rem;
  font-weight: bold;
  display: block;
}


/* Anfahrt */

#anfahrt-img h1{
  font-family: 'Lobster', cursive;
  font-size: 7rem;
  font-weight: bold;
  color: white;
}

#anfahrt-img h3 {
  font-weight: bold;
  color: white;
}

#anfahrt-img {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../images/28.JPG");
  background-repeat: repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  height: 100vh;
  width: 100%;
}

.address {
  grid-area: address;
  padding: 6rem 0;
}

.address h3 {
  padding-top: 2rem;
}

.address a {
    text-decoration: none;
    color: black;
    transition: ease-in 0.3s;
    background-color: inherit;
    font-size: 2.6rem;
}

.address a:hover {
  color: rgba(204, 153, 51, 1);
}

#map {
  height: 90vh;
  width: 100%;
  grid-area: map;
}

#para3 {
  grid-area: para3;
  text-align: justify;
  padding: 0 1rem 1rem 1rem;
}

.location {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-gap: 1rem;
  grid-auto-flow: row;
  grid-template-areas:  ". address address address address ."
                        "para3 para3 para3 para3 para3 para3"
                        "map map map map map map";
  }



footer {
  background-color: rgba(59,68,75, 0.99);
  padding: 2rem;
  color: white;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row;
  grid-gap: 1rem;
  grid-template-areas:  "address-footer address-footer address-footer address-footer"
                        "gaetano phone mail-footer ."
                        "copyright . impressum datenschutz";
}

footer h6 {
  text-align: justify;
}

footer a {
  text-decoration: none;
  font-size: 2rem;
  color: white;
  transition: ease-in 0.3s;
  padding-top: 2rem 0;
}

footer a:hover {
  color: rgba(204, 153, 51, 1);
}

footer i {
  font-size: 2rem;
}

#address-footer {
  grid-area: address-footer;
}

#gaetano-footer {
  grid-area: gaetano;
}

#phone-footer {
  grid-area: phone;
}

#mail-footer {
  grid-area: mail-footer;
}

#impressum {
  grid-area: impressum;
  text-align: justify;
  font-size: 1rem;
}

#datenschutz {
  grid-area: datenschutz;
  text-align: center;
  font-size: 1rem;
}

#copyright {
  grid-area: copyright;
  font-size: 1rem;
  align-self: center;
}

/* ALL MEDIA QUERY'S */

/* NAV */
/* When the screen is less than 980 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (min-width: 980px) {

  #apartment {
    grid-template-areas:  "apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg apt-hdg"
                          ". . . para1 para1 para1 para1 para1 para1 . . ."
                          "house house house house house house house house house house house house"
                          "apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1 apt1"
                          "apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2 apt2"
                          "apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3 apt3"
                          ". . . para2 para2 para2 para2 para2 para2 . . .";
  }

  .location {
    grid-template-areas:  "address address map map map map"
                          "para3 para3 map map map map";
  }
  .address {
    text-align: center;
  }
}

@media screen and (max-width: 980px) {
.nav-bar a:nth-child(-n+3){
    display: none;
  }

  nav {
    display: flex;
    justify-content: space-between;
    padding-right: 5rem;
  }

  nav a.icon {
    font-size: 4rem;
    float: right;
    display: block;
    padding: 0 2rem 0 0;
  }

  footer {
    grid-template-areas: "address-footer address-footer address-footer address-footer"
                          "gaetano phone phone mail-footer"
                          "copyright . impressum datenschutz";
  }
}

@media screen and (min-width: 940px) {
  .iconWifi, .headerWifi, .wifi, .iconPool, .headerPool, .pool, .icons i:nth-child(5n+0), .icons i:nth-child(6n+0) {
    display: block;
  }

  .icons {
    -ms-grid-columns: 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:  "iconPersons iconBed iconCouch iconBath iconWifi iconPool"
                          "headerPersons headerBed headerCouch headerBath headerWifi headerPool"
                          "persons bed couch bath wifi pool";
  }

}

@media screen and (max-width: 550px) {
  .facility h3 {
    font-size: 2rem;
  }

  .facility h4 {
    font-size: 1.8rem;
  }

  #link1, #link2, #link3, #link4 {
    font-size: 2rem;
  }

  #form {
    grid-template-areas:  ". name name name name ."
                          ". email email email email ."
                          ". query query query query ."
                          ". submit . . . .";
  }

  #name, #email, #query {
    font-size: 1.3rem;
  }


}

@media screen and (max-width: 400px) {
  .facility h1 {
    font-size: 2rem;
  }

  .facility h3 {
    font-size: 1.6rem;
  }

  .facility h4 {
    font-size: 1.4rem;
  }

 #apartment h1, #anfahrt-img h1 {
    font-size: 3.5rem;
  }

  footer h6 {
    font-size: 1.2rem;
  }

  footer p {
    font-size: 1rem;
  }

  footer i {
    font-size: 1.8rem;
  }

  footer a {
    font-size: 1.2rem;
  }
}

#imagelightbox
{
    position: fixed;
    z-index: 19999;

    -ms-touch-action: none;
    touch-action: none;
}

/*@media screen and (max-width: 500px) {
  html {
    font-size: 31.25%;
  }
}*/