﻿/* CLEARFIX */
.clearfix::before,.clearfix::after {
  clear:both;
  content:"";
  display:table;
}
.clearfix {
  *zoom:1;
}
.clear,.clearer {
  clear:both;
}
/* ######## */


/* BASIC SETTINGS */
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
*, html {
  margin:0;
  padding:0;
}
img {
  border:none;
}
body {
  background:#FFF;
  font-family:"Arvo", serif;
  font-size:18px;
  font-weight:400;
  color:#727272;
  text-align:left;
  line-height:0;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
.page {
  width:950px;
  margin:0 auto;
}
/* ###### */


/* SCROLL NAV */
.scroll-nav {
  position:fixed;
  left:0;
  top:0;
  z-index:999;
  width:100%;
  background:#212121;
  padding:5px 0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.scroll-nav.hide {
  display:none;
}
  .scroll-nav .scroll-menu {
    margin:0 10px;
  }
/* ########## */


/* BANNER */
.banner-wrap {
  position:relative;
  height:0;
  padding-bottom:50%;
}
/*.banner-wrap::after {
  content:"";
  display:block;
  position:absolute;
  left:50%;
  bottom:0;
  z-index:2;
  transform:translateX(-50%);
  width:48px;
  height:22px;
  background:url(../Images/dreieck.png) 50% bottom no-repeat;
}*/
  .banner-wrap .banner-icons {
    position:absolute;
    right:40px;
    top:10px;
    z-index:20;
    width:36px;
  }
  .banner-wrap .banner-overlay {
    position:absolute;
    top:10px;
    left:50%;
    margin-left:135px;
    z-index:10;
    text-align:right;
  }
    .banner-overlay .mobile-menu {
      display:none;
      color:#DBC6B9;
      font-weight:400;
      font-family:"Fjalla One", sans-serif;
      font-size:26px;
      line-height:40px;
      background:rgba(30,33,49,0.8);
      text-align:center;
      cursor:pointer;
      margin-bottom:4px;
    }
    .banner-overlay .navigation {
      transform:translateY(-30px);
    }
  .banner-wrap .banner-inner img {
    width:100%;
    height:auto;
  }
/* ###### */


/* CONTENT */
.content-wrap {
  padding:0 0 60px 0;
  position:relative;
}
.content-wrap .frame-space-before-extra-small {
  margin-top: 10px;
}
.content-wrap .frame-space-before-small {
  margin-top: 25px;
}
.content-wrap .frame-space-before-medium {
  margin-top: 50px;
}
.content-wrap .frame-space-before-large {
  margin-top: 75px;
}
.content-wrap .frame-space-before-extra-large {
  margin-top: 100px;
}
.content-wrap .frame-space-after-extra-small {
  margin-bottom: 10px;
}
.content-wrap .frame-space-after-small {
  margin-bottom: 25px;
}
.content-wrap .frame-space-after-medium {
  margin-bottom: 50px;
}
.content-wrap .frame-space-after-large {
  margin-bottom: 75px;
}
.content-wrap .frame-space-after-extra-large {
  margin-bottom: 100px;
}
/* ####### */


/* FOOTER */
.footer-top {
  background:#F6F1EE;
  font-size:16px;
  padding:20px 0;
}
  .footer-top .footer-item-one,.footer-top .footer-item-two,.footer-top .footer-item-three {
    padding-top:60px;
    float:left;
  }
  .footer-top .footer-item-one {
    background:url(../Images/icons.png) 50% top no-repeat;
    width:250px;
  }
  .footer-top .footer-item-two {
    background:url(../Images/icons.png) 50% -500px no-repeat;
    width:300px;
    margin:0 75px;
    text-align:center;
  }
  .footer-top .footer-item-three {
    float:right;
    width:200px;
    background:url(../Images/icons.png) 50% -1000px no-repeat;
    text-align:right;
    margin-left:50px;
  }
.footer-bottom {
  background:url(../Images/footer-bottom.png) 50% 50% repeat;
  line-height:40px;
  text-align:center;
  color:#FFF;
  font-size:16px;
}
/* ###### */


/* ###################################################################################################### */
/* ###################################################################################################### */
/* ###################################################################################################### */
/* ###################################################################################################### */
/* ###################################################################################################### */
/* responsive Seetings */


@media only screen and (max-width: 1150px) {


/* BANNER */
.banner-wrap .banner-overlay {
  text-align:left;
}
  .banner-overlay .logo img {
    width:auto;
    height:200px;
  }
  .banner-overlay .navigation {
    transform:translateY(-20px);
  }
/* ###### */


}


@media only screen and (max-width: 1024px) {


.scroll-nav {
  display:none;
}


}


@media only screen and (max-width: 1000px) {


/* BASIC SETTINGS */
.page,.page.news_pi1#c132,.page.news_pi1#c134 {
  width:90%;
}
.page.news_pi1 {
  width:100%;
}
/* ###### */


/* BANNER */
.banner-overlay .logo img {
  width:auto;
  height:150px;
}
.banner-overlay .navigation {
  transform:translateY(-10px);
}
/* ###### */


/* FOOTER */
.footer-top .footer-item-one {
  width:30%;
}
.footer-top .footer-item-two {
  width:40%;
  margin:0 5%;
}
.footer-top .footer-item-three {
  width:20%;
  margin-left:0;
}
/* ###### */


}


@media only screen and (max-width: 800px) {


/* BANNER */
.banner-wrap {
  height:auto;
  padding:0;
}
.banner-wrap .banner-icons {
  top:0;
}
.banner-wrap .banner-overlay {
  position:relative;
  top:0;
  left:0;
  margin:0;
  z-index:0;
  text-align:left;
}
  .banner-overlay .logo {
    margin:10px 5%;
  }
  .banner-overlay .mobile-menu {
    display:block;
  }
  .banner-overlay .navigation {
    display: none;
    transform:translateY(0);
    background:rgba(30,33,49,0.8);
    text-align:center;
    margin-bottom:4px;
  }
/* ###### */


/* FOOTER */
.footer-top .footer-item-one,.footer-top .footer-item-two,.footer-top .footer-item-three {
  float:none;
  text-align:center;
}
.footer-top .footer-item-one,
.footer-top .footer-item-two,
.footer-top .footer-item-three {
  width:100%;
  margin:0 0 30px 0;
}
/* ###### */


}


@media only screen and (max-width: 600px) {


/* BANNER */
.banner-overlay .navigation {
  background:none;
  margin-bottom:0;
}
/* ###### */


}