@charset "UTF-8";
/*
 * Theme Name: Haus Bönne
 * Theme URI: http://haus-boenne.eilinghoff.de
 * Description: Ein responsives Design, optimiert für 1920x1080p.
 * Author: Denny Nordmann
 * Author URI: http://eilinghoff.de
 *
 */

/* merriweather-sans-300 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/merriweather-sans-v22-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/merriweather-sans-v22-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/merriweather-sans-v22-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/merriweather-sans-v22-latin-300.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-regular - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-sans-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/merriweather-sans-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/merriweather-sans-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/merriweather-sans-v22-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-700 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/merriweather-sans-v22-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/merriweather-sans-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/merriweather-sans-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/merriweather-sans-v22-latin-700.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-800 - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/merriweather-sans-v22-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/merriweather-sans-v22-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/merriweather-sans-v22-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-800.woff') format('woff'), /* Modern Browsers */
       url('fonts/merriweather-sans-v22-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/merriweather-sans-v22-latin-800.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* shadows-into-light-regular - latin */
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/shadows-into-light-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/shadows-into-light-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/shadows-into-light-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/shadows-into-light-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/shadows-into-light-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/shadows-into-light-v15-latin-regular.svg#ShadowsIntoLight') format('svg'); /* Legacy iOS */
}


#map_360{
	width:100%;
	text-align: center;
}
.cmplz-iframe{
	width:100%;
}
.color-green {
  color: #408927; }

.bg-green {
  background-color: #408927; }

.bg-grey {
  background-color: #c6c6c6; }

.clear {
  clear: both; }

body {
  margin: 0;
  padding: 0;
  font-family: "Merriweather Sans", sans-serif;
  line-height: 1.5em; }

.wrap {
  width: 1200px;
  margin: 0 auto; }

figure {
  margin: 0;
  padding: 0; }

h1 {
  color: #408927;
  font-size: 14pt; }

h2 {
  color: #5a5a59; }

p {
  color: #5a5a59; }

ul {
  color: #5a5a59; }

header nav {
  position: fixed;
  background-color: white;
  top: 0;
  width: 100%;
  padding: 50px 0;
  z-index: 9999; }
  header nav ul {
    margin: 0;
    padding: 0;
    text-align: right; }
    header nav ul li {
      display: inline;
      list-style-type: none;
      margin-right: 30px; }
      header nav ul li:last-of-type {
        margin-right: 0; }
      header nav ul li a {
        text-decoration: none;
        color: #4a4a49;
        padding: 0;
        transition: all 0.5s;
        border-top: solid thin white;
        border-bottom: solid thin white; }
        header nav ul li a:hover {
          border-top: solid thin #408927;
          border-bottom: solid thin #408927;
          padding: 10px 0;
          color: #408927; }
    header nav ul .current_page_item a {
      border-top: solid thin #408927;
      border-bottom: solid thin #408927;
      padding: 10px 0;
      color: #408927; }

.videos {
	display: flex;
	justify-content: space-between;
}

.videos div {
	width: 45%;
}

.videos div p {
	text-align: center;
}

.intro {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  width: 400px;
  right: 0;
  bottom: 0;
  border-top-left-radius: 25px;
  padding: 50px;
  z-index: 999; }

#logo {
  width: 400px;
  position: fixed;
  left: 0;
  top: -25px;
  right: 0;
  mix-blend-mode: multiply;
  z-index: 99999;
  pointer-events: none; }

#wave-element {
  width: 500px;
  height: auto;
  position: absolute;
  right: 0;
  bottom: -335px;
  z-index: -1; }

#titelbild {
  position: relative; }

#titelbild img {
  width: 100%;
  height: auto;
  display: block; }

main #intro {
  padding: 50px 0;
  margin: 150px 0 100px 0; }

.two-columns .wrap {
  display: flex;
  justify-content: space-between; }
  .two-columns .wrap article {
    width: 45%; }

#offer {
  background-color: #c6c6c6; }
  #offer figure {
    position: relative; }
  #offer p {
    color: #408927;
    position: absolute;
    left: -20px;
    bottom: -20px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform-origin: left;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left; }
  #offer img {
    display: block; }

#unser-haus {
  padding: 150px 0; }
  #unser-haus .left {
    width: 45%; }
  #unser-haus .right {
    width: 45%; }
    #unser-haus .right img {
      width: 100%;
      height: auto; }

#subline h1 {
  font-size: 54pt; }

.size-full {
  width: 45%;
  height: auto; }

.alignright {
  float: right;
  padding: 0 0 25px 25px; }

.editor {
  padding: 50px 0; }

.editor-grey {
  padding: 50px 0;
  background-color: #f4f4f4; }

.editor-grey-left, .editor-grey-right {
  background-color: #f4f4f4;
  padding: 50px 0; }
  .editor-grey-left h1, .editor-grey-right h1 {
    font-size: 14pt;
    margin: 0;
    line-height: 1.5em; }
  .editor-grey-left .wrap, .editor-grey-right .wrap {
    display: flex;
    justify-content: space-between; }
  .editor-grey-left figure, .editor-grey-right figure {
    width: 35%; }
    .editor-grey-left figure img, .editor-grey-right figure img {
      width: 100%;
      height: auto; }
  .editor-grey-left div, .editor-grey-right div {
    width: 60%; }

.toggle_content {
  padding: 50px 0; }
  .toggle_content h1 {
    font-size: 14pt; }
  .toggle_content .toggle:hover div {
    max-height: 500px; }
  .toggle_content .toggle:hover .arrow-toggle {
    transform: rotate(60deg); }
  .toggle_content .toggle div {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    max-height: 0px;
    transition: all 0.7s; }
  .toggle_content h2 {
    background-color: #f4f4f4;
    padding: 10px 0 10px 25px;
    font-size: 14pt;
    cursor: pointer; }

.toggle-up {
  max-height: 500px !important; }

.toggle-rotate {
  transform: rotate(60deg) !important; }

.arrow-toggle {
  float: right;
  margin-right: 15px;
  padding-top: 5px;
  width: 20px;
  transform-origin: 50% 50%;
  transition: all 0.5s; }

.img-full-width {
  padding: 50px 0; }
  .img-full-width img {
    width: 100%;
    height: auto; }

#link-row {
  display: flex;
  justify-content: space-between;
  padding: 50px 0; }

#tenkleve-logo {
  width: 300px !important;
  height: auto;
  position: absolute;
  bottom: 90px;
  right: 110px;
  pointer-events: auto; }

#maps {
  max-height: 550px;
  overflow: hidden; }

#maps-left {
  width: 60%;
  float: left; }

#maps-right {
  width: 39.5%;
  float: right; }

#maps-left img {
  width: 100%;
  height: auto;
  display: block; }

#maps-right article:first-of-type {
  height: 275px;
  position: relative; }

#maps-right article:last-of-type {
  height: 265px;
  margin: 10px 0 0 0; }

#maps-right p {
  color: white; }

#maps-right .bg-green div {
  position: absolute;
  top: 15%;
  left: 15%; }

#subline {
  margin: 150px 0;
  font-family: "Shadows Into Light", cursive;
  text-align: center;
  font-size: 45pt; }

#page {
  margin: 100px 0; }

#flexible_content {
  padding: 100px 0 0; }

footer {
  background-color: #c6c6c6;
  background-image: url(img/footer-right.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 50px 0;
  position: relative;
  margin-top: 250px; }
  footer p {
    color: white; }
  footer a {
    color: white;
    text-decoration: none; }
    footer a:hover {
      color: #408927; }
  footer .footer-info {
    width: 500px; }
  footer #footer-logo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 700px;
    pointer-events: none; }
    footer #footer-logo img {
      width: 100%;
      height: auto;
      display: block; }

.left {
  float: left; }

.right {
  float: right; }

.wpcf7-form input {
  width: 100%;
  padding: 5px; }
.wpcf7-form textarea {
  width: 100%;
  padding: 5px; }
.wpcf7-form input[type=checkbox] {
  width: auto; }

#burger-nav {
  display: none !important; }

@media only screen and (max-width: 1420px) {
  #logo {
    width: 300px; }

  .wrap {
    width: 1000px; }

  main #intro {
    margin: 100px 0 100px 0; }

  footer #footer-logo {
    width: 500px; } }
@media only screen and (max-width: 1200px) {
  .wrap {
    width: 90%; }

  footer {
    background-image: none; }
    footer .footer-info {
      width: 430px; }

  #tenkleve-logo {
    width: 200px !important; }

  .intro {
    width: 60%;
    padding: 15px; }

  .titelbild-content {
    padding-top: 90px; } }
@media only screen and (max-width: 1050px) {
  .intro {
    position: relative;
    margin: 50px auto 0; }

  main #intro {
    margin: 0px 0 100px 0; }

  #subline {
    margin: 110px 0; }

  footer {
    margin-top: 125px; } }
@media only screen and (max-width: 980px) {
  #logo {
    mix-blend-mode: inherit; }

  footer #footer-logo {
    width: 450px; }

  #tenkleve-logo {
    bottom: 65px;
    right: 70px; }

  header nav ul li {
    display: block;
    margin: 0 0 25px 0; }

  header nav {
    padding: 50px 0 25px;
    max-height: 15px;
    overflow: hidden;
    transition: all 0.7s; }

  #burger-nav {
    display: block !important;
    width: 50px !important;
    height: auto !important;
    float: right;
    margin-bottom: 25px;
    margin-top: -25px;
    cursor: pointer;
	  z-index: 99;
	
	} }
.slide-down {
  max-height: 500px; }

@media only screen and (max-width: 920px) {
  #offer .left, #offer .right {
    width: 45%; }

  #offer img {
    width: 100%;
    height: auto; } }
@media only screen and (max-width: 800px) {
  #subline {
    font-size: 30pt;
    margin: 75px 0; }

  .wrap {
    width: 90%; }

  footer #footer-logo {
    width: 350px; }

  #tenkleve-logo {
    bottom: 35px;
    right: 35px; }

  #subline {
    margin: 115px 0; }

  #logo {
    top: 0; }

  .editor-grey-left figure, .editor-grey-right figure {
    width: 45%; }

  .editor-grey-left div, .editor-grey-right div {
    width: 50%; } 

	.videos {
		display: block;
	}
	
	.videos div {
		width: 100%;
	}}
@media only screen and (max-width: 720px) {
  .size-full {
    width: 60%;
    position: relative;
    z-index: 99; } }
@media only screen and (max-width: 700px) {
  #offer {
    padding: 50px 0; }

  #offer .left {
    padding-bottom: 25px; }

  #offer .left, #offer .right {
    width: 70%;
    float: none;
    margin: 0 auto; }

  #offer p {
    position: relative;
    left: 0;
    bottom: 0;
    text-align: center;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); }

  .footer-info .left, .footer-info .right {
    float: none; }

  #unser-haus .left, #unser-haus .right {
    width: 100%;
    float: none; } }
@media only screen and (max-width: 680px) {
  #wpgmza_map_1 {
    height: 350px !important;
    float: none !important; }

  #maps {
    max-height: inherit; }

  #maps-left {
    width: 100%;
    float: none; }

  #maps-right {
    width: 100%;
    float: none; }

  #maps-right article:first-of-type {
    height: auto; }

  #maps-right article:last-of-type {
    display: none; }

  #maps-right .bg-green div {
    position: relative;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
    padding: 25px 0; } }
@media only screen and (max-width: 600px) {
  footer .footer-info {
    width: auto; }

  footer .wrap {
    width: 90%; }

  footer {
    background-image: none; }

  main #intro {
    margin: 0; }

  #wave-element {
    display: none; }

  h1 {
    font-size: 16pt; }

  h2 {
    font-size: 15pt; }

  #subline h1 {
    font-size: 30pt; }

  .size-full {
    width: 100%; }

  #flexible_content {
    padding: 0 0 0; }

  .editor-grey-left figure, .editor-grey-right figure {
    width: 100%; }

  .editor-grey-left div, .editor-grey-right div {
    width: 100%;
    margin-top: 25px; }

  .editor-grey-left .wrap, .editor-grey-right .wrap {
    display: block; }

  .two-columns .wrap {
    display: block; }

  .two-columns .wrap article {
    width: 100%; } }
@media only screen and (max-width: 520px) {
  #unser-haus {
    padding: 50px 0; }

  footer #footer-logo {
    width: 275px; }

  #tenkleve-logo {
    width: 155px !important; } }
@media only screen and (max-width: 460px) {
  #logo {
    width: 200px; }

  h1 {
    font-size: 14pt; }

  h2 {
    font-size: 13pt; }

  footer .font-info {
    font-size: 10pt; }

  .intro {
    width: 95%; }

  .titelbild-content {
    padding-top: 90px; }

  body {
    overflow-x: hidden; } }
@media only screen and (max-width: 410px) {
  footer #footer-logo {
    width: 225px; }

  #tenkleve-logo {
    width: 100px !important; }

  #page {
    margin: 50px 0; }

  .toggle_content h2 {
    font-size: 11pt; } }
@media only screen and (max-width: 370px) {
  #offer .left, #offer .right {
    width: 100%; }

  footer .footer-info {
    font-size: 10pt; } }