@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
html, body {
  font-family: 'Open Sans', sans-serif;
}

body.index {
  background: #e1dfd9 url(../img/bg-texture.jpg) center fixed;
  background-size: cover;
  text-transform: uppercase;
  text-align: center;
}

a {
  color: #fff;
}
a:hover {
  color: #826a51;
}

img {
  max-width: 100%;
}

sub {
  top:-7px;
}

.preloader {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #e1dfd9 url(../img/bg-texture.jpg) center fixed;
  background-size: cover;
  text-align: center;
  line-height: 100vh;
}
.loader {
  height: 40vh;
}

.header {
  position: fixed;
  z-index: 1;
  width: 100%;
  background: rgba(81, 57, 29, .2);
  height: 150px;
}
.header a {
  text-transform: uppercase;
  font-size: 32px;
  margin: 0 22px;
  position: relative;
}

.active {
  font-weight: bold;
}
.active:after {
  content: '';
  display: block;
  width: 100px;
  height: 37px;
  background: url(../img/active.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: -40px;
  left: -22px;
}

.logo {
  max-width: 240px;
  margin-bottom: -30px;
}

.facebook {
  width: 50px;
}

.facebook-iFrame {
  margin-top: 13.5vw !important;
  text-align: center;
  width: 38vw;
  height: 30vw;
  overflow: hidden;
}

.container-full {
  position: relative;
}

.contentBox {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.contentBox .boxInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3vw 0;
}

.bold {
  font-weight: bold;
}

.invert {
  color: #fff;
}

.line-band, .line-dots {
  position: absolute;
  width: 0px;
  overflow: hidden;
  -webkit-transition: width 1s ease-out;
  transition: width 1s ease-out;
}

.line-band {
  height: 3vw;
  margin-top: -1.2vw;
}
.line-dots {
  height: 6vw;
  margin-top: -0.2vw;
}

.line-band div, .line-dots div {
  position: absolute;
  z-index: 1;
  width: 105vw;
  background-size: cover !important;
}

.inViewportIn {
  width: 100%;
}

.line-band div {
  background: url(../img/line-band.svg) -3vw 0 no-repeat;
  height: 3vw;
}

.line-dots div {
  background: url(../img/line-dots.svg) -1vw 0 no-repeat;
  height: .6vw;
}

.iframe {
  width:26.6vw;
  height: 27vw;
}

.footer {
  font-size: 25px;
  text-align: center;
  padding: 4vw 0 0 !important;
}


@media (max-width: 1000px) {
  .logo {
    max-width: 23vw;
  }

  .header {
    height: 14vw;
  }

  .header a {
    font-size: 3vw;
    margin: 0 .9vw;
  }

  .active:after {
    width: 11vw;
    height: 4vw;
    top: -4.7vw;
    left: -2.5vw;
  }

  .footer {
    font-size: 2vw;
    padding: 7vw 0 0;
  }
}

@media (max-width: 490px) {
  .header {
    height: 65px;
  }
}

/* index */
body.index .logowrapper{
  width:33%;
  height: 30vw;
  margin:0 auto;
}
body.index .logowrapper img{
  width:100%;
}
body.index a:hover{
  text-decoration:none;
}
body.index a:hover .button{
  text-decoration:none;
  background-color: rgba(130,106,81,0.9);
  transition: 0.4s ease;
}
.frage p{
  line-height: 30px;
  color:#51391d;
}
.text {
  font-size: 64px;
}
.condensed{
    font-family: 'Open Sans Condensed', sans-serif;
}
.big{
    font-size: 80px;
    line-height: 90px;
}
.buttonwrapper{
  margin:0 auto;
}
.buttonwrapper a{
  display: inline-block;
  margin:4%;
}
.clear{
  clear:both;
}
.button{
  background-color: #826a51;
  color:white;
  padding:0;
  width:100px !important;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:2em;
}
@media (max-width: 640px) {
  body.index .logowrapper{
    width:80%;
    margin:0 auto;
    height: 62vw;
  }
  body.index .condensed{
    font-size:8vw;
    line-height: 1em;
  }
  .condensed{
    line-height: 1em;
  }
  .big{
      font-size: 12vw;
      line-height:1em;
  }
  .buttonwrapper{
    width:100%;
    margin:0 auto;
  }
  .button{
    font-size:1.4em;
  }
}