@charset "utf-8";
/* CSS Stylesheet */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');
.stand-font {
  font: 400 1rem/1.5rem 'Source Sans Pro', Helvetica, Arial, sans-serif;
}
/* Reset */
* {
  margin: 0;
  padding: 0;
  -mozbox-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
::-moz-selection {
  color: #fff;
  background: #ba4a00;
  text-shadow: none;
}
::selection {
  color: #fff;
  background: #ba4a00;
  text-shadow: none;
}
::-webkit-scrollbar {
  display: none;
}
html {
  height: 100%;
  font-size: 100%;
  /* Browserstandard: 16px */
  -webkit-text-size-adjust: 100%;
  background: #ba4a00;
}
body {
  font: 400 1rem/1.5rem 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #ba4a00;
  height: 100%;
}
#wrapper {
  width: 100%;
  text-align: center;
  margin: 0px auto;
  float: left;
  height: 100%;
}
#inhalt {
  background: #fcf3cf;
  width: 1000px;
  color: #424949;
  margin: 0 auto;
  z-index: 10;
  height: 100%;
  position: relative;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
}
#inhalt article {
  display: block;
  position: absolute;
  top: 0;
  left: 40;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin-top: -5%;
  background-image: linear-gradient(#d4e6f1 1px, transparent 1px);
  background-size: 82% 1.4em;
}
#inhalt article img {
  margin: 0px auto !important;
}
#inhalt nav {
  position: absolute;
  bottom: 0;
  width: 100%;
}
#inhalt nav ul {
  display: inline;
  list-style: none;
  width: 100%;
  float: left;
}
#inhalt nav ul li {
  width: 33.33%;
  float: left;
}
#inhalt nav ul li a {
  background: #f1c40f;
  color:  #9a7d0a;
  text-align: center;
  float: left;
  width: 100%;
  padding: 10% 0;
  text-decoration: none;
  font-weight: 300;
  text-transform: uppercase;
}
#inhalt nav ul li a:hover {
  background:  #9a7d0a;
  color: #f1c40f;
}
#inhalt nav ul .kleinlink {
  width: 100% !important;
}
#inhalt nav ul .kleinlink a {
  padding: 0.1% 0 !important;
  font-size: .8em;
  background: #212f3d;
  color: #f1c40f;
}
.essblock {
  padding: 4% 5% 10% 5%;
  background: #fcf3cf;
  width: 1000px;
  color: #424949;
  margin: 0 auto;
  z-index: 10;
  height: auto;
  position: relative;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
  overflow: scroll;
}
.essblock h2 {
  font-family: 'Special Elite', Helvetica, Arial, sans-serif;
  text-align: left;
  border-bottom: 1px solid #1b2028;
  padding-bottom: .7em;
}
.essblock h3 {
  text-align: left;
  font-size: 1em;
  margin-top: 1.5em;
  float: left;
  text-transform: uppercase;
  margin-bottom: .5em;
}
.essblock span {
  float: left;
  margin-top: 1.5em;
  margin-left: 1em;
  font-weight: 300;
  text-transform: uppercase;
}
.essblock quote {
  font-size: .8em;
  color: #ba4a00;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 300;
  margin-left: 1em;
}
.essblock quote a {
  font-style: normal;
  font-size: .8em;
  margin-left: 1em;
}
.img {
  margin: 0;
  padding: 0 0 1% 0;
}
.rezepte dl {
  padding: 0;
}
.rezepte dd {
  padding: 0;
  color: #1b2028;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ccd2dc;
  padding-bottom: .5em;
  margin-top: 1em;
}
.rezepte dd .zutaten {
  width: 28%;
  float: left;
  padding: 0;
  margin-right: 2%;
  color: #1b2028;
  font-size: .9em;
}
.rezepte dd .zutaten:before {
  content: "Zutaten";
}
.rezepte dd .zutaten .zusatzzutaten {
  margin: 2% 0;
}
.rezepte dd .zubereiten {
  width: 70%;
  float: left;
  padding: 0;
  color: #1b2028;
  font-size: .9em;
  border-left: 1px solid #52be50;
  padding-left: .5em;
}
.rezepte dd .zubereiten:before {
  content: "Zubereitung - Schritt 1";
}
.rezepte .zubereiten li {
  line-height: 1.5em;
  list-style: none;
  font-family: 'Special Elite', Helvetica, Arial, sans-serif;
}
.zubereiten:before,
.zutaten:before,
.zusatzzutaten:before,
.s2:before,
.s3:before,
.s4:before,
.s5:before,
.hauptgang,
.dazu,
.tipp,
.video,
.zutat,
.zuzutat {
  font-size: 0.8em;
  font-family: 'Special Elite', Helvetica, Arial, sans-serif;
  color: #ba4a00;
  font-size: .7em;
  border-bottom: 1px solid #ba4a00;
width: 50%;
display: inline-block;
margin: 1em 0 1.5em;
}
.schritt {
  margin: 2% 0;
  width: 96%;
  font-family: 'Special Elite', Helvetica, Arial, sans-serif;
}
.zusatzzutaten:before {
  content: "Basics";
}
.s1:before {
  content: "Zubereitung - Schritt 1";
}
.s2:before {
  content: "Schritt 2";
}
.s3:before {
  content: "Schritt 3";
}
.s4:before {
  content: "Schritt 4";
}
.hauptgang:before {
  content: "Hauptgang";
}
.dazu:before {
  content: "dazu";
}
.tipp:before {
  content: "Tipp";
}
.video:before {
  content: "Video";
}
.zuzutat:before {
  content: "Zutaten";
}
.zutat:before {
  content: "Basics";
}
.toptop {
  float: left;
  position: absolute;
  bottom: 0;
  right: 6.5%;
  color: #1b2028;
  font-family: 'Special Elite', Helvetica, Arial, sans-serif;
  padding: 15px 0 5px 0;
  background:none !important;
}
.toptop:hover {color: #b1b2b3;}
p {
  text-align: center;
  font-size: 0.9em;
  font-weight: 300;
}
.links {
  text-align: center !important;
  font-size: 0.8em;
}
a {
  color: #f1c40f;
  background: #212f3d;
  text-decoration: none;
  font-weight: 700;
  transition: 0.6s;
  padding: .2em .7em;
  border-radius:.5em;
}
a:hover {
  color: #212f3d;
  background: #f1c40f;
  text-decoration: none;
  font-weight: 700;
}
strong {
  font-weight: 700;
  padding-top: 2em;
  float: left;
  width: 100%;
}
span.fa {
  font-size: 0.8em !important;
}
/* portfolio */
#flipblog,
#flipblog-1,
#rezepte {
  width: 100%;
  margin-bottom: 1%;
  text-align: center;
  background: #1B2028;
  float: left;
  z-index: 10;
}
.info {
  border-left: 3px solid #6f6f6e !important;
  margin-right: 2%;
}
.title {
  float: left;
  width: 100%;
  text-align: center;
  background: #1b2028;
  z-index: 10;
}
.title h2 {
  text-transform: uppercase;
  font-size: 1em;
  color: #52be50;
  margin: 1% 0 1% 0;
}
/* Projektbeschreibungen */
.desc {
  font-size: 1em;
  margin: 0 0 3% 0;
  display: block;
  height: auto;
  border: none;
}
.desc p {
  text-align: left;
}
.col_4_4 {
  width: 23.5% !important;
}
.col_3_4 {
  width: 32%;
}
.col_2_4 {
  width: 40%;
  margin-left: 5%;
  margin-right: 5%;
}
.col_1_4 {
  width: 100%;
  height: 100%;
  padding: 7% 5% 0 0;
}
/* Navigation Desktop */
.top-navi {
  width: 100%;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #52be50;
  height: 73px;
}
#navigation-normal {
  display: none;
  float: right;
  margin: 0;
  position: fixed;
  top: 18px;
  right: 55px;
  z-index: 999;
}
.navimg {
  margin: 10px 20% 10px;
}
a#normal-navi-button {
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 10px 5px;
  margin: 0 0;
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #52be50;
  border-radius: 18px;
  z-index: 999;
}
a#normal-navi-button:hover {
  color: #52be50;
  background: #fff;
}
#navigation-normal li {
  display: inline !important;
  float: none;
  width: 30%;
  padding: 0 !important;
}
#navigation-normal li a {
  display: block;
  background: #52be50;
  color: #fff;
  margin: 1px 0;
  text-align: left;
}
#navigation-normal a {
  color: #333;
  text-decoration: none;
  padding: 7px 15%;
  margin: 0 10px;
}
#navigation-normal a:hover {
  color: #52be50;
  background: #fff;
}
i.fa {
  margin: 0 auto;
  font-size: 1.2em;
}
.top-link {
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: -5;
}
.top-link a {
  color: #fff;
  font-weight: 500;
}
.top-link a:hover {
  color: #52be50;
}
.top-link span {
  font-weight: 200 !important;
}
/* footer */
.notiz {
  height: 185px !important;
  overflow: auto !important;
  padding: 2% 4%;
}
footer {
  font-size: 0.7em;
  color: #1b2028;
  width: 100%;
  float: left;
  text-align: center;
  line-height: 1.5em;
  padding: 2%;
}
.green {
  background: #52be50;
}
.green h2 {
  color: #1B2028;
}
/* Flip */
#flipblog,
#flipblog-1,
#rezepte {
  padding: 0;
}
/* entire container, keeps perspective */
.flip-container {
  perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container {
  width: 33%;
  height: 300px;
  float: left;
}
.front,
.back {
  width: 100%;
  height: 300px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.front a,
.back a {
  width: 90%;
  margin: 0px auto;
}
.front p,
.back p {
  padding: 0px auto;
}
/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}
.green {
  background: #52be50;
}
.gray {
  background: #CCC;
}
.stadtimkerfront {
  background: #52be50;
}
.freizeithausfront {
  background: #52be50;
}
.konfusfront {
  background: #52be50;
}
.firstsektor {
  width: 25%;
  height: 275px;
  position: relative;
  float: left;
}
.firstarticle {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 275px;
}
.firstarticle h1 {
  text-align: center;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  float: left;
  display: block;
}
.firstarticle span {
  float: left;
  width: 100%;
  text-transform: uppercase;
  font-size: .7em;
}
.firstarticle div {
  width: 100%;
  display: block;
}
.firstarticle img {
  width: 100% !important;
  margin: 0px auto !important;
  filter: green;
  padding: 0 20%;
}
.stuff {
  width: 50% !important;
}
.secoundsektor {
  width: 100%;
  opacity: 1;
  text-align: left;
  display: inline;
  float: left;
  overflow: scroll;
}
.secoundsektor .link {
  width: 90%;
  margin: 0 5%;
  margin-top: 4%;
  padding: 5px;
  background: #fff;
  float: left;
  text-align: center;
  text-transform: uppercase;
}
.secoundsektor p {
  width: 100%;
}
.secoundsektor sup {
  margin-left: 1%;
  font-size: .5em;
}
.beilage {
  text-align: left;
}
.beilage:before {
  content: 'Beilage: (Bsp.)';
  font-size: .8em;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  float: left;
}
.rez {
  text-transform: uppercase;
}
.rez:after {
  font-family: FontAwesome;
  content: "\f0da";
  margin-left: .5em;
}
/* Verbindung */
dl {
  width: 100%;
  font-weight: 400;
}
dl dt {
  color:  #f1c40f;
  margin-bottom: .5em;
  font-size: 1em;
  font-weight: 700;
  float: left;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  background: rgb(160,64,0);
  background: linear-gradient(90deg, rgba(33,47,61,1) 70%, rgba(241,196,15,1) 70%);
  border-radius: .5em;
  padding: .5em 1em;
}
dl dt:hover {
  color: #212f3d;
  background: rgb(160,64,0);
  background: linear-gradient(90deg, rgba(241,196,15,1) 70%, rgba(33,47,61,1) 70%);
  transition:.8s;
}
dl dd {
  display: none;
  float: left;
  width: 100%;
  margin: 0.5% 0 1em 0;
  color: #212f3d;
  text-align: left;
  padding: 0 8.5% 2.5% 11.5%;
  font-family: 'Special Elite';
  background-image: linear-gradient(#d4e6f1 1px, transparent 1px);
  background-size: 82% 1.4em;
  line-height: 1.45em;
}
dd i {
  margin-right: 0.5% !important;
}
.closed {
  background: #ffdc00;
  display: none;
}
.open {
  background: #81ba24;
  display: none;
}
.complettsec {
  width: 100%;
  padding: 5% 0;
}
.firstsektor:hover .secoundsektor {
  opacity: 1;
}

#storytelling{float:left;height:26em;width:100%;margin:1em 0 0 0;position:relative}
#storytelling .swiper-button-nexter,#storytelling .swiper-button-prev{z-index:999}
#storytelling .swiper-container{float:left;overflow:hidden;position:absolute;left:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;width:100%;height:26em;border-bottom-right-radius:.5em;border-bottom-left-radius:.5em}
#storytelling .swiper-container h1{font-size:1.7em}
#storytelling .swiper-slide{height:100%;width:100%;text-align:center;font-size:18px;background:#fff;overflow:scroll;background:#fcf3cf;background-image: linear-gradient(#d4e6f1 1px,transparent 1px);background-size: 82% 1.4em;display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#storytelling .swiper-slide img{height:100%;width:100%}
#storytelling .swiper-slide p{margin-top:1em;font-weight:300;padding:0 16%;text-align:left;width:100%;float:left;color:#222}
#storytelling .swiper-slide h2{padding:.3em 2em!important;text-align:left!important;background:rgba(255, 197, 0, 0.9)!important;position:absolute;bottom:2em;right:0;color:#fff!important;font-size:1em!important;cursor:pointer;float:right;width:55%}
#storytelling .swiper-slide h2:after{content:"Mehr …";margin-left:.5em;font-size:.7em;font-style:italic}
#storytelling .swiper-slide article{overflow:scroll;display: block;width: 100%;top: 0;position: absolute;padding: 2em 3em;}
#storytelling .swiper-slide article h3{font-family: 'Special Elite', Helvetica, Arial, sans-serif; text-align: center; border-bottom: 1px solid #212f3d; padding-bottom: .4em; font-size:1.4em;font-weight:300;margin:0;width:100%;display:block;line-height:1;color:#222;margin-bottom: .2em;}
#storytelling .zutaten { font-family: 'Special Elite', Helvetica, Arial, sans-serif;  }
#storytelling .swiper-pagination-progressbar{background:#212f3d; margin:0!important;}
#storytelling .swiper-pagination-progress {background: none !important;}
#storytelling .swiper-button-next,#storytelling .swiper-button-prev{padding:0;margin-top:0}
.hvr-underline-from-left2:before{background:#cc8d00!important}

.swiper-container {
    width: 600px;
    height: 300px;
}

@media only screen and (min-width: 100px) and (max-width: 999px) {
  html,
  body,
  #inhalt,
  .essblock {
    width: 100%;
  }
  article a {
    width: 65% !important;
    margin: 0 auto;
  }
  #inhalt article img {
    padding: 0 2%;
  }
  .essblock {
    height: auto !important;
    padding: 10% 5% 10% 5%;
    overflow: auto;
  }
  dl dt {
    width: 100%;
  }
  .rezepte dd {
    padding: 0;
  }
  .rezepte dd .zutaten {
    width: 100%;
  }
  .rezepte dd .zutaten .zusatzzutaten {
    margin: 2% 0;
  }
  .rezepte dd .zubereiten {
    width: 100%;
    float: left;
    padding: 0;
    color: #1b2028;
    font-size: 1em;
    border-left: 1px solid #ba4a00;
    padding-left: .5em;
    margin-bottom: 1.5em;
  }
  .rezepte dd li {
    line-height: 1.5em;
    list-style: none;
  }
  .zubereiten:before,
  .zutaten:before,
  .zusatzzutaten:before,
  .s2:before,
  .s3:before,
  .s4:before,
  .s5:before {
    font-size: 0.9em;
    font-family: 'Special Elite', Helvetica, Arial, sans-serif;
    color: #ba4a00;
  }
  .toptop {
    float: left;
    position: absolute;
    bottom: 0;
    right: 1em;
    color: #1b2028;
    font-family: 'Special Elite', Helvetica, Arial, sans-serif;
    padding: 15px 0 5px 0;
  }
}
@media (max-width: 600px) {
  #inhalt article {
    height: 80%;
  }
  #inhalt nav ul li {
    width: 100%;
    float: left;
  }
  #inhalt nav ul li a {
  background: #f1c40f;
    text-align: center;
    float: left;
    width: 100%;
    padding: 2% 0;
  color:  #9a7d0a;
    text-decoration: none;
    font-weight: 300;
    text-transform: uppercase;
	border-bottom: 1px solid #212f3d;
border-radius: 0 !important;
  }
  #inhalt nav ul li a:hover {
    background: #9a7d0a;
	padding: 2% 0;
	color: #f1c40f;
  }
  #inhalt nav ul .kleinlink {
    width: 100% !important;
  }
  #inhalt nav ul .kleinlink a {
    padding: 0.1% 0 !important;
    font-size: .8em;
  background: #212f3d;
  color: #f1c40f;
  }
  #notiz {
    padding: 2% 5% 2% 5%;
  }
  #notiz footer {
    padding: 2% 0;
    text-align: left;
  }
  .col_4_4,
  .col_3_4,
  .col_2_4,
  .col_1_4 {
    width: 100% !important;
    min-height: 0;
    margin: 2% 0 !important;
    padding: 0 10%;
  }
}