/*   
Theme Name: Rauth
Theme URI: http://bergblick-pitztal.at/
Description: Theme für Ferienhaus Bergblick. Dieses Theme wurde von Patrick Rauth designt und programmiert.
Author: Patrick Rauth
Version: 1.0
*/

/* playwrite-us-modern-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playwrite US Modern';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/playwrite-us-modern-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/playwrite-us-modern-v11-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* mulish-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/mulish-v18-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/mulish-v18-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* mulish-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/mulish-v18-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/mulish-v18-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* mulish-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/mulish-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/mulish-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* mulish-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/mulish-v18-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/mulish-v18-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* mulish-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/mulish-v18-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/mulish-v18-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
body{
  padding: 0;
  margin: 0;
  left: 0;
}
body, html {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  height: 100%;
  word-wrap: break-word; 
  background-color: white;
}
.playwrite-us-modern{
 font-family: "Playwrite US Modern", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#content a:hover{
  font-style: italic; 
}
iframe{ 
  max-width: 90%
}
a{
  text-decoration: 
  none; color: black
}
a:hover{
  font-style: italic;
}
img {
  vertical-align: top;
  margin:0;
  padding: 0;
}
#element1{
  position: relative;
  left: -100%;
}
#element2{
  opacity: 0;
}
#element3{
  position: relative;
  left: -100%;
}
#footer{
  background-color: #e1d1b8;
}
.paddingLeftRight{
  padding-left: 5% !important;
  padding-right: 5% !important;
}
/* Startseite */
.headerGruppe{
  padding-left: 5%;
  padding-right: 5%;
}
.bookingImageMobile{
  display: none !important;
}
.bookingImage{
  margin-right: 50px !important;
  margin-left: 50px !important;
}
@media only screen and (max-width:  1500px) {
  .column1{
    flex-basis:0% !important;
  }
  .column4{
    flex-basis:0% !important;
  }
  .column2{
    flex-basis:75% !important;
  }
  .column3{
    flex-basis:25% !important;
  }
}
@media only screen and (max-width:  1100px) {

  .column1{
    flex-basis:0% !important;
  }
  .column4{
    flex-basis:0% !important;
  }
  .column2{
    flex-basis:70% !important;
  }
  .column3{
    flex-basis:30% !important;
  }
}
@media only screen and (max-width:  781px) {
  .paddingStart{
    display: none !important;
  }
  .bookingImage{
    display: none !important;
  }
  .bookingImageMobile{
    display: block !important;
  }
  .bookingGroup{ 
    text-align: center !important;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media only screen and (max-width:  500px) {
  .wp-block-cover__inner-container .herzlichWillkommen{ 
    font-size: 29px !important;
  }
}
@media only screen and (max-width:  390px) {
  .wp-block-cover__inner-container .herzlichWillkommen{ 
    font-size: 27px !important;
  }
}
@media only screen and (max-width:  218px) {
  .wp-block-cover__inner-container .herzlichWillkommen{ 
   display: none;
  }
}
/* Ausstattung */
.austattungSpalten li {
    list-style: none;
}
.tabelleBorder table td{
  border: 0px !important;
  padding: 0 !important;
}
.austattungSpalten ul {
  padding-left: 0 !important;
}
@media only screen and (min-width:  1300px) {
  .ausstattungGallery{
    display: none !important;
  }
  .austattungSpalten h3{
    margin-top: 0 !important;
  }
}
@media only screen and (max-width:  1300px) {
  .austattungSpalten{
    display: block !important;
  }
  .ausstattungBilderSpalte{
    display: none; !important;
  }
  .austattungSpalten .has-text-align-right {
    text-align: left !important;
  }
}
/* Overlay */
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 2;
  top: -100%;
  left: 0;
  background-color: #876750;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 0px;
  width: auto;
  left:0;
  text-align: center;
  margin-top: 90px;
  margin-bottom: 80px;
  color: white;
}
.overlay li{
  list-style: none;
}
.overlay ul{
  padding-left: 0;
}
.overlay a {
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px;
  text-decoration: none;
  font-size: 1.8em;
  color: white;
  display: block;
  transition: 0.3s;
}
@media only screen and (max-width:  330px) {
  .overlay a {
    font-size: 1.5em;
  }
}
@media only screen and (max-width:  260px) {
  .overlay a {
    font-size: 1.1em;
  }
}
/* Navigation */
#navcontainer {
  z-index: 3; 
  padding-top: 5px;
  padding-bottom: 5px;
}
#navcontainer{
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  position: fixed;
}
#navcontainer .navigation a{
  text-transform: uppercase;
  color: white;
  font-size: 1.3em;
}
#navcontainer .navigation li{
  display: inline-block;
}
#navcontainer .navigation li a::after{
  content:" • ";
  padding-right: 20px;
  padding-left: 20px;
  color: white !important;
}
#navcontainer .navigation li:last-child a::after {
  content:"";
}

#navcontainer a:hover{
  font-style: normal;
  color: black ;
}
/* Mobiles Menu ab 700px */
@media only screen and (max-width:  1070px) {
  #desktopMenu{
    display: none;
  }
  #navcontainer{
  text-align:left;
  font-size: 1.8em;
  }
}
@media only screen and (min-width:  1071px) {
  #burgerMenu{
   display: none;
  }
}
@media only screen and (max-width:  240px) {
  #burgerMenu #logo a{
   display: none;
  }
  #navcontainer{
    height: 68px;
  }
}
.current-menu-item a{
  color: black !important; 
}
/* Burger Menu */
#burgerMenu #logo{
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
}
#burgerMenu #logo a{
  color: white;
}
.nav-container{
  line-height: 50px;
  width: 80px;
  height: 60px;
  top: 3px;
  position: fixed; ;
  right: 0;
  z-index: 2; 
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}
.navbar .menu-items {
  display: flex;
}
.navbar .nav-container li {
  list-style: none;
}
.navbar .nav-container a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.7em;
}
.navbar .nav-container a:hover{
  font-weight: bolder;
}
.nav-container {
  display: block;
  height: 60px;
}
.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 22px;
  left: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nav-container .hamburger-lines .line {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 10px;
  background: white;
}
.nav-container .checkbox:hover + div .line {
  
  background: white !important;
}
.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}
.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  z-index: 4;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}
@media only screen and (min-width:  1000px) {
  .maxWidthForm{
    max-width: 50%;


  }
}