@font-face {
  src: url("../fonts/Century_Gothic_Regular.ttf");
  font-family: "Century Gothik";
}

h1, h2, h3, h4, h5, h6, a, p, li, ul, ol, table, tbody, th, tr, td, footer,
aside, section, article {
  font-family: "Century Gothik", sans-serif;
}

header {
  width: 100%;
  background: white;
}

header .header-top {
  width: 100%;
}

header .header-top .border-top {
  width: 100%;
  height: 15px;
  background: #60000F;
}

header .header-top .logo-language {
  height: 160px;
  width: 100%;
  padding: 10px;
}
/*
header .header-top .logo-language.home {
  background: url("../img/supercow.png") no-repeat 95% center;
  background-size: auto 100%;
}
*/
header .header-top .logo-language.ferienw {
  background: url("../../../../bilder/_headerbilder/ferienwohnungen_neu.jpg") no-repeat right top;
  background-size: auto 100%;
}

header .header-top .logo-language.grindelwalder {
  background: url("../../../../bilder/_headerbilder/grindelwalder_neu.jpg") no-repeat right top;
  background-size: auto 100%;
}

header .header-top .logo-language.aktuell{
  background: url("../../../../bilder/_headerbilder/aktuell_neu.jpg") no-repeat right top;
  background-size: auto 100%;
}

header .header-top .logo-language.informationen {
  background: url("../../../../bilder/_headerbilder/informationen_neu.jpg") no-repeat right top;
  background-size: auto 100%;
}

header .header-top .logo-language.kontakt {
  background: url("../../../../bilder/_headerbilder/kontakt_neu.jpg") no-repeat right top;
  background-size: auto 100%;
}

header .header-top .logo {
  width: 25%;
  height: 100%;
  float: left;
  background: url("../img/wir_grindelwalder-DE.png") no-repeat center center;
  background-size: auto 80%;
}
/*
header .header-top .home .logo {
  position: relative;
  width: 25%;
  height: 100%;
  float: left;
  background: url("../img/wir_grindelwalder-DE.png") no-repeat center center;
  background-size: auto 80%;
  left: 50%;
  transform: translateX(-50%);
}
*/
header .header-top .logo a {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}

header .header-top .logo.de {
  background: url("../img/wir_grindelwalder-DE.png") no-repeat center center;
  background-size: auto 80%;
}

header .header-top .logo.fr {
  background: url("../img/wir_grindelwalder-FR.png") no-repeat center center;
  background-size: auto 80%;
}

header .header-top .logo.en {
  background: url("../img/wir_grindelwalder-EN.png") no-repeat center center;
  background-size: auto 80%;
}

header .header-top .logo-language .language {
  height: 100%;
  width: 25%;
  float: right;
}
/*
header .header-top .logo-language.home .language {
  height: 100%;
  width: 25%;
  float: right;
  position: relative;
  right: 50%;
  transform: translateX(50%);
}
*/
header .header-top .logo-language .language.content {
  position: relative;
  height: 70px;
  width: 465px;
  margin: auto;
  float: none;
  top: -10px;
}

header .header-top .logo-language .language.content .asset-left {
  overflow: hidden;
  height: 70px;
  width: 70px;
  float: left;
  background: transparent;
  box-shadow: 1px -38px 0 0 #60000F;
  border-radius: 0 35px 0 0;
}

header .header-top .logo-language .language.content .asset-right {
  overflow: hidden;
  height: 70px;
  width: 70px;
  float: left;
  background: transparent;
  box-shadow: 0 -38px 0 0 #60000F;
  border-radius: 50% 0 0 0;
}

header .header-top .logo-language .language .lang-container {
  position: relative;
  width: 75%;
  height: 100%;
  display: flex;
  margin: auto;
}

header .header-top .logo-language .language.content .lang-container {
  position: relative;
  width: 325px;
  height: 100%;
  display: flex;
  background: #60000F;
  border-radius: 0 0 38px 38px;
  padding: 0 15px 0 15px;
  float: left;
}

header .header-top .logo-language .language .lang-container .lang {
  padding: 0;
}

header .header-top .logo-language .language .lang-container .lang a {
  display: block;
  position: relative;
  /*height: calc(100vw * 0.33 * 0.66 / 4 * 0.5);
  width: calc(100vw * 0.33 * 0.66 / 4 * 0.5);*/
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

header .header-top .logo-language .language.content .lang-container .lang a {
  transform: translateX(-50%) translateY(-65%);
  /*-webkit-transform: translate(-50%, -65%);*/
  background: white;
  width: 54%;
  padding-top: 54%;
  height: 0;
  overflow: hidden;
  top: 50%;
}

header .header-top .logo-language .language .lang-container .lang.de a {
  background: url("../img/icons/icon_de.png") no-repeat center center;
  background-size: 115% 115%;
}

header .header-top .logo-language .language .lang-container .lang.de.active a {
  background: url("../img/icons/icon_de_active.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.fr a {
  background: url("../img/icons/icon_fr.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.fr.active a {
  background: url("../img/icons/icon_fr_active.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.en a {
  background: url("../img/icons/icon_en.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.en.active a {
  background: url("../img/icons/icon_en_active.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.home a {
  background: url("../img/icons/icon_home.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-top .logo-language .language .lang-container .lang.home.active a {
  background: url("../img/icons/icon_home_active.png") no-repeat center center;
  background-size: auto 110%;
}

header .header-bottom {
  width: 100%;
}

header .header-bottom nav {
  background: #333333;
  border-bottom: 2px solid white;
}

header .header-bottom nav ul {
  list-style: none;
  max-width: 90%;
  margin: auto;
}

header .header-bottom nav ul.menu {
  background: #333333
}

header .header-bottom nav ul.menu > li {
  padding: 0;
  line-height: 50px;
}

header .header-bottom nav ul.menu li.active > a {
  color: #e5a243;
  background-color: transparent;
}

header .header-bottom nav ul.menu > li:hover {
  background: #60000F;
}

header .header-bottom nav ul.menu > li > a {
  text-align: center;
  line-height: 50px;
  color: white;
  font-size: 20px;
}

header .header-bottom nav ul.menu > li .submenu {
  background: rgba(51, 51, 51, 0.9);
  border: none;
  border-top: 2px solid white;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0 10px 10px 20px;
  left: 0;
  right: 0;
}

header .header-bottom nav ul.menu > li .submenu > li a {
  color: white;
  font-size: 19px;
}

header .header-bottom nav ul.menu > li .submenu > li.submenulv1 {
  padding-top: 50px;
}

header .header-bottom nav ul.menu > li .submenu > li.submenulv2 {
  padding-left: 20px;
}

header .header-bottom nav ul.menu > li .submenu > li.submenulv1.active a,
header .header-bottom nav ul.menu > li .submenu > li.submenulv2.active a {
  color: #E5A243;
  background: none;
}

header .header-bottom .picture-box {
  height: 370px;
  width: 100%;
  background: url("../../../../bilder/_homebild/homebild.png") no-repeat center center;
  background-size: cover;
}

main {
  min-height: calc(100vh - 694px);
  width: 100%;
}

.outer-booking {
  width: 100%;
  margin-bottom: 20px;
}

.outer-booking .booking-button {
  margin: auto;
  width: 300px;
  display: block;
}

.outer-booking .booking-button a {
  position: relative;
  padding: 20px 0 20px 0;
  color: white;
  background: #60000F;
  text-align: center;
  display: block;
  with: 100%;

}

main.content::before {
  content: '';
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: -1;
}

main.content.ferienw::before {
  background: url("../../../../bilder/_hintergrundbilder/hintergrund-ferienwohnungen.jpg") no-repeat center center;
  background-size: cover;
}

main.content.grindelwalder::before {
  background: url("../../../../bilder/_hintergrundbilder/hintergrund-grindelwalder.jpg") no-repeat center center;
  background-size: cover;
}

main.content.aktuell::before {
  background: url("../../../../bilder/_hintergrundbilder/hintergrund-aktuell.jpg") no-repeat center center;
  background-size: cover;
}

main.content.informationen::before {
  background: url("../../../../bilder/_hintergrundbilder/hintergrund-informationen.jpg") no-repeat center center;
  background-size: cover;
}

main.content.kontakt::before {
  background: url("../../../../bilder/_hintergrundbilder/hintergrund-kontakt.jpg") no-repeat center center;
  background-size: cover;
}

main.content {
  min-height: calc(100vh - 324px);
  width: 100%;
}

main .spacer-top {
  height: 48px;
  border-top: 2px solid #60000F;
  display: flex;
}

main .main-content article .bookingbutton {
  width: 66%;
  height: auto;
  background: #60000F;
  margin: auto;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  display: block;
}

main .main-content article .bookingbutton a {
  position: relative;
  color: white;
  width: 100%;
  display: block;
  padding: 30px 0 30px 0;
}

main .main-content article .welcome {
  width: 75%;
  height: auto;
}

main .main-content article .welcome h2 {
  line-height: 1;
  width: 80%;
  float: right;
}

main .main-content article .welcome h2 a {
  color: #60000F;
}

main.content .main-content {
  position: relative;
  min-height: calc(100vh - 324px);
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
}

.ferienwohnungen {
  display: flex;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #CCC;
}

.ferienwohnungen .textlinks {
  padding-left: 20px;
}

.kontaktcon {
  position: relative;
  width: 50%;
  float: left;
}

footer {
  height: 75px;
}

footer .footer-border {
  height: 5px;
  background: #60000F;
}

footer .footer-content {
  height: 70px;
  background: #CCC1C3;
  line-height: 70px;
  text-align: center;
  font-size: 18px;
}

.ce-menu.ce-menu-1 li a {
  color: black;
}

.ce-menu.ce-menu-1 li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1199px){
  header .header-bottom nav ul {
    list-style: none;
    max-width: 100%;
  }

  header .header-bottom nav ul.menu > li > a {
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 17px;
  }

  header .header-bottom nav ul.menu > li .submenu {
    background: rgba(51, 51, 51, 0.9);
    border: none;
    margin: 2px 0 0 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0 10px 10px 20px;
    left: 0;
    right: 0;
  }

  header .header-bottom nav ul.menu > li .submenu > li a {
    color: white;
    font-size: 16px;
  }

  header .header-bottom nav ul.menu > li .submenu > li.submenulv1 {
    padding-top: 25px;
  }

  header .header-bottom nav ul.menu > li .submenu > li.submenulv2 {
    padding-left: 10px;
  }

  header .header-bottom .picture-box {
    height: 200px;
    width: 100%;
  }

  main .main-content article .welcome h2 {
    width: 95%;
  }

  main .main-content article .bookingbutton {
    width: 95%;
    font-size: 20px;
  }
}

@media screen and (max-width: 950px){
  header .header-top .logo-language {
    padding: 0;
  }

  header .header-top .logo-language .logo {
    float: none;
    width: 100%;
    height: 110px;
    background-size: auto 95%;
  }

  header .header-top .logo-language .language {
    position: relative;
    height: 50px;
    width: auto;
    margin: auto;
    float: none;
    top: 0;
    background: #60000F;
  }

  header .header-top .logo-language .language.content {
    position: relative;
    height: 50px;
    width: auto;
    margin: auto;
    float: none;
    top: 0;
    background: #60000F;
  }

  header .header-top .logo-language .language .lang-container {
    position: relative;
    width: 225px;
    height: 100%;
    display: flex;
    background: #60000F;
    border-radius: 0 0 20px 20px;
    padding: 0 15px 0 15px;
  }

  header .header-top .logo-language .language.content .lang-container {
    position: relative;
    width: 225px;
    height: 100%;
    display: flex;
    background: #60000F;
    border-radius: 0 0 20px 20px;
    padding: 0 15px 0 15px;
    left: 50%;
    transform: translateX(-50%);
  }

  header .header-top .logo-language .language.content .lang-container .lang a {
    transform: translate(-50%, -50%)
  }

  header .header-top .logo-language .language.content .asset-left {
    display: none;
  }

  header .header-top .logo-language .language.content .asset-right {
    display: none;
  }

  
}

@media screen and (max-width: 639px) {
  header .header-bottom nav {
    background: #333333;
    border-bottom: none;
  }

  main {
    min-height: calc(100vh - 366px);
    width: 100%;
  }

  header .header-bottom nav ul {
    list-style: none;
    max-width: 100%;
    width: 100%;
    margin: auto;
  }

  header .header-bottom nav ul.menu {
    background: #333333;
    display: block;
  }

  header .header-bottom nav ul.menu > li {
    padding: 0;
    line-height: 100%;
    width: 100%;
  }

  header .header-bottom nav ul.menu > li:hover {
    background: #333333;
  }

  header .header-bottom nav ul.menu > li > a {
    line-height: 100%;
    color: white;
    font-size: 16px;
    text-align: left;
    border-top: 1px solid white;
  }

  header .header-bottom nav ul.menu > li .submenu {
    background: rgba(51, 51, 51, 0.9);
    border: none;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0 10px 10px 20px;
    left: 0;
    right: 0;
    position: relative;
  }

  header .header-bottom nav ul.menu > li .submenu > li a {
    font-size: 15px;
  }

  header .header-bottom nav ul.menu > li .submenu > li.submenulv1 {
    padding-top: 0;
  }

  header .header-bottom .picture-box {
    height: 100px;
    width: 100%;
  }

  main.content .main-content {
    position: relative;
    min-height: calc(100vh - 266px);
    background: white;
  }

  footer {
    height: auto;
  }

  footer aside.footer-content {
    font-size: 12px;
    line-height: 100%;
    height: auto;
    padding: 10px;
  }
}