@import url("reset.css");
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800';
@import 'https://fonts.googleapis.com/css?family=Atma:300,400,500,600,700';

.clear { clear: both;}

body {background: #BBB;font-family: 'Open Sans', sans-serif; box-sizing: border-box;}
.wrapper{display: block; margin: auto; width: 90%; background-image: url(../images/pattern-bg.jpg);}
.wrapper-1{display: block; margin: auto; width: 68%; background-color: #FDF8F2;padding: 7% 5%;margin-top: -10%; position: relative;}
.wrapper-2{display: block; margin: auto; width: 68%; background-color: #FEF0D7;padding: 7% 5%; position: relative;}
header{background: #282014; width: 100%; height: 150px;}
.wrapper-3{display: block; margin: auto; width: 68%; background-color: #FDF8F2;padding: 7% 5%;margin-top: 0%; position: relative;}
h1{font-family: 'Atma', cursive; color: #F4B143; font-size: 3em;padding-bottom: 5%;}
h2{font-family: 'Atma', cursive; color: #F4B143; font-size: 2em;padding-bottom: 5%;}
h3{font-family: 'Atma', cursive; color: #fff; font-size: 3em;padding-bottom: 5%;}
h4{color: #fff; font-size: 18px;padding-bottom: 5%; font-weight: 300}
h5{font-family: 'Atma', cursive; color: #F4B143; font-size: 2em;padding-bottom: 2%;}
p{padding-bottom: 15px; font-size: 14px;font-weight: lighter; line-height: 20px; color: #40341d;}
strong{font-weight: bold;}

ul{padding-bottom: 15px;}
ul li{padding-bottom: 5px; font-size: 14px;font-weight: lighter; line-height: 20px; color: #40341d;}

nav{width: auto;display: inline-block;right: 5%;position: absolute;top: 50px; max-width: 50%; text-align: right;}
nav ul{}
nav ul li{display: inline-block; padding-right: 30px;}
nav ul li a{text-decoration: none;color:#F4D8AD;font-weight: lighter;font-size: 14px;}

.logo{display: inline-block; padding-left: 5%; padding-top: 15px;}
.head-img{width: 100%; height: auto;}
.slogan{right: 18%; top: 45%; position: absolute; display: none;}
.slogan span{font-family: 'Atma', cursive;display: block; background: #F4B143; color:#fff;padding: 12px;margin-bottom: 15px; font-size: 3em; text-align: right; width: auto;}
strong{font-weight: bold;}

#accordion {margin: 0px 0 0 0px; cursor:pointer;}
#accordion h3 {outline: none!important; color: #F4B143; border-bottom: 2px solid #F4B143; margin-bottom: 10px; font-size: 20px;padding-bottom: 5px; font-weight: lighter;}
#accordion .inhalt {position: relative; left: 0; top: 0; width: 95%;padding-bottom: 20px; padding-left: 0%; color:#40341d; font-weight: lighter;line-height: 20px; font-size: 14px;text-align: left}
#accordion a {background: url(../images/arrow.png) right bottom no-repeat; display: block; padding-top: 35px; text-decoration: none; padding-left: 0px; text-align: left; padding-bottom: 0px;}
#accordion a.active {background: url(../images/arrow-a.png) #FEF0D7 right bottom no-repeat; display: block; padding-top: 0px; text-decoration: none; padding-left: 0px;}
.icon{display: inline-block; padding-right: 15px;margin-bottom: -8px; width: 60px;height: auto;}
.acc-inner{width: 43%; float: left;padding-left: 7%;padding-top: 5%;}
.acc-inner p{padding-bottom: 15px;color:#40341d;}
.saxo{float: left; width: 50%; padding-right: 5%;}
.acc-inner ul{padding-bottom: 15px;}
.acc-inner ul li{list-style-image: url(../images/list-style.png);padding-left: 15px;}

.yellow{background: #FEF0D7;width: 100%;}
.inner{width: 43%; float: left;padding-right: 7%;padding-top: 0%;}
.inner p{padding-bottom: 15px;color:#40341d;}
.maps{width: 78%; height: 400px;display: block; margin: auto;}
.headline-maps{padding-bottom: 0px; padding-top: 10%;}
.wrapper-maps{padding-bottom: 40px;}
.wrapper-impressum{background: #282014;}

footer .inner p{color: #fff;padding-bottom: 15px;}
footer .inner a{color:#fff; text-decoration: none;}

.kf{width: 100%; height: 700px;}

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/
@media screen and (max-width: 980px) {
.acc-inner {width: 90%;}
}

@media screen and (max-width: 920px) {
 nav { display: inline; position: static; padding-left: 6%;}
  .maps{height: 300px;}
  header {height: 180px;}
}

@media screen and (max-width: 860px) {
h1 { font-size: 2.5em;line-height: 1.1em;}
}

@media screen and (max-width: 768px) {
  .inner {width: 100%;}
  .logo{width: 250px;padding-bottom: 15px;}
  .icon {width: 40px;margin-bottom: -9px;}
  .wrapper{width: 100%;}
  nav {width: 100%;}
}

@media screen and (max-width: 520px) {
   .maps{height: 200px;}
}

@media screen and (max-width: 480px) {
  
  .wrapper-1, .wrapper-2, .wrapper-3{width: 100%; box-sizing: padding-box;}
  .maps{width: 100%;}
  
}


@media screen and (max-width: 480px) {

h1 {font-size: 1.5em;}
}