body{
  background-color:#e4e4e4;
}

#wrapper{
  transition:filter .5s;
}

#wrapper:after{
  content:"";
  position: fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  opacity:0;
  transition:opacity .5s;
  background-color:rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

header{
  position:relative;
  height:35vh;
  width:100%;
  overflow:hidden;
  border-bottom:3px solid #fff;
}

body.home header{
  height:100vh;
}

#headerGallery{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:-1;
}

#headerGallery figure.image_container{
  position:relative;
  height:35vh;
  width:100%;
}

body.home #headerGallery figure.image_container{
  height:100vh;
}


#headerGallery picture img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

#headerGallery:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  opacity: .3;
  background:url('../img/pattern.png') repeat;
}

#headerGallery:before{
  content:"";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.3);
  z-index:1;
}






header .ce_text{
  position:absolute;
  font-size: 1.2em;
  line-height: 1.2em;
  left:2.5%;
  bottom:50px;
  right:33%;
  color:#fff;
  font-weight:400;
  text-shadow:0 1px 20px rgba(0, 0, 0, 0.5);
}

header h1{
  font-size:4em;
  font-weight:700;
  color:#2cb5b5;
}

/*----------------------------------------------------< Navigationsbereich >---*/

#navSection{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:50px;
  background-color:rgba(0, 0, 0, 0);
  transition:background-color .5s, height .5s;
  z-index:1;
}

#navSection:after{
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  border-bottom:3px solid #fff;
  transform: scaleX(0);
  transition:transform 1s ease-in-out;
  z-index:-1;
}

#navSection:not(.top){
  height:50px;
  background-color: rgb(145, 222, 222);
}

#navSection:not(.top):after{
  transform:scaleX(1);
}

#navSection > .inside,
footer > .inside{
  position: relative;
  width: 95%;
  margin:0 auto;

}



/*-------------------------------------------------------------< Hauptmenü >---*/

body:not(.home) #mainNav{
  display:none;
}

body.home #mainNav{
  position:absolute;
  right: 0;
  top:75px;
}

body.home #mainNav ul{
  position:relative;
}

body.home #navSection #mainNav li{
  text-align:right;
  margin-bottom:1em;
  opacity:0;
}

body.home #navSection:not(.top) #mainNav li{
  opacity:1;
}



@keyframes fadeIn{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

@keyframes fadeOut{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

body.home #navSection:not(.top) #mainNav li{
  animation: fadeOut .15s ease-in forwards;
  pointer-events: none;
}
body.home #navSection.top #mainNav li{
  animation: fadeIn .15s ease-in forwards;
  pointer-events: all;
}

body.home #navSection.top #mainNav li:nth-child(1) { animation-delay: .1s; }
body.home #navSection.top #mainNav li:nth-child(2) { animation-delay: .15s; }
body.home #navSection.top #mainNav li:nth-child(3) { animation-delay: .2s; }
body.home #navSection.top #mainNav li:nth-child(4) { animation-delay: .25s; }
body.home #navSection.top #mainNav li:nth-child(5) { animation-delay: .3s; }
body.home #navSection.top #mainNav li:nth-child(6) { animation-delay: .35s; }
body.home #navSection.top #mainNav li:nth-child(7) { animation-delay: .4s; }
body.home #navSection.top #mainNav li:nth-child(8) { animation-delay: .45s; }
body.home #navSection.top #mainNav li:nth-child(9) { animation-delay: .5s; }

body.home #navSection:not(.top) #mainNav li:nth-child(1) { animation-delay: .5s; }
body.home #navSection:not(.top) #mainNav li:nth-child(2) { animation-delay: .45s; }
body.home #navSection:not(.top) #mainNav li:nth-child(3) { animation-delay: .4s; }
body.home #navSection:not(.top) #mainNav li:nth-child(4) { animation-delay: .35s; }
body.home #navSection:not(.top) #mainNav li:nth-child(5) { animation-delay: .3s; }
body.home #navSection:not(.top) #mainNav li:nth-child(6) { animation-delay: .25s; }
body.home #navSection:not(.top) #mainNav li:nth-child(7) { animation-delay: .2s; }
body.home #navSection:not(.top) #mainNav li:nth-child(8) { animation-delay: .15s; }
body.home #navSection:not(.top) #mainNav li:nth-child(9) { animation-delay: .1s; }

body.home #mainNav a,
body.home #mainNav strong{
  padding: .5em 1em;
  background-color:#c17fb6;
  transition:background-color .2s;
  outline:none;
  transition:font-weight .5s, font-size .5s;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  line-height:1.5em;
}

body.home #mainNav li:nth-of-type(even) a{
  background-color: #7cd2d6;
}

/* body.home header .mod_navigation a,
body.home header .mod_navigation strong{

} */

/*-------------------------------------------------------------< Nebenmenü >---*/

#navSection > .inside > a.logo{
  position: relative;
  top:18px;
  float:left;
  margin-right:3em;
  margin-left: -100%;
  transition:margin-left 1s;
}

header a.logo{
 text-decoration: none;
 font-weight:700;
 color:#d78cdc;
}

header a.logo span.eins{color:#a026af;}
header a.logo span.zwei{color:#b268d8;}

#navSection.small > .inside > a.logo{
  margin-left:0;
}

#navSection > .inside > a.house{
  position:relative;
  float:left;
  top:13px;
  margin-right:8px;
  transition:top .3s;
}

#openCart{
  position:relative;
  float:left;
  top:13px;
  margin-right:8px;
  transition:top .3s;
  background-color:inherit;
  border:none;
  cursor:pointer;
  outline:none;
}

a.house > svg,
#openCart > svg{
  fill:#ffffff;
  transition: fill .5s;
}

body:not(.home) #navSection:not(.top) > .inside > a.house svg,
body:not(.home) #mobileNav a.house svg,
body:not(.home) #navSection:not(.top) #openCart > svg,
body:not(.home) #mobileNav #openCart > svg{
  fill:#666;
}

body:not(.home) #navSection:not(.top) a.house:hover svg,
body:not(.home) #navSection:not(.top) a.house:focus svg,
body:not(.home) #navSection:not(.top) #openCart:hover svg,
body:not(.home) #navSection:not(.top) #openCart:focus svg{
  fill:#ffffff;
  transition: fill .5s;
}


#secNav{
  position: relative;
  top:18px;
  transition: top .5s;
  color:#fff;
}

body.home #navSection.top > .inside > a.house,
body.home #navSection.top #openCart{
  top:70px;
}

body.home #secNav{
  top:75px;
}

#navSection:not(.top) #secNav{
  top:18px;
}

#secNav ul li{
  float:left;
  margin-right:.5em;
}

#secNav a,
#secNav strong{
  color:#fff;
  font-size:.7em;
  font-weight:400;
  padding:0 8px;
  text-decoration: none;
  transition:color .2s;
}

#navSection:not(.top) #secNav a{
  color:#666;
}

#navSection:not(.top) #secNav a:hover,
#navSection:not(.top) #secNav a:focus,
#navSection:not(.top) #secNav strong{
  color:#fff;
}

/*----------------------------------------------------------< Mobiles Menü >---*/

#mobileNav{
  position:fixed;
  top:50%;
  height:0;
  left:0;
  right:0;
  background-color:rgb(97, 93, 93);
  overflow:hidden;
  opacity: 0;
  transition:top .2s, height .2s, opacity .4s;
}

body.showMobileNav #mobileNav{
  top:50px;
  height:100%;
  opacity: 1;
  overflow-y: auto;
}

#mobileNav > a{
  margin-bottom:1em;
}

#mobileNav > .mod_navigation:first-of-type{
  padding:7vh 0;
  font-size:1.2em;
}

#mobileNav > .mod_navigation:last-of-type{
  padding:4vh 0;
  border-top:3px solid rgb(145, 222, 222);
}

#mobileNav > .mod_navigation:last-of-type a{
  color:#666;
}

#mobileNav a,
#mobileNav strong{
  display:block;
  text-align: center;
  text-decoration:none;
}

#mobileNav .mod_navigation a{
  font-weight:400;
  padding:5px 0;
  transition:font-size .2s, color .2s;
}

#mobileNav a:hover,
#mobileNav a:focus{
  color:#fff !important;
  font-weight:700;
  font-size:1.1em;
}

#mobileNav .mod_navigation strong{
  color:#fff;
  font-weight:700;
  font-size:1.5em;
  margin:.6em 0;
}

@media screen and (max-width: 500px){
  #mobileNav .mod_navigation strong{
    font-size:1.1em;
    margin:.4em 0;
  }
}

/*----------------------------------------------------------------< Footer >---*/

#footer{
  border-top:3px solid #8041aa;
  color:#777;
  background-color:#000;
}

footer > .inside > .ce_text{
  text-align: center;
  margin:1em 0 3em;
}

footer a{
  text-decoration:none;
  color:inherit;
}

footer{
  padding-bottom:2em;
}

footer .row > div:last-child{
  text-align: right;
}

/*------------------------------------------------------------------< Main >---*/

main,
#cartOverlay > .inside{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:0 1em;
}

main > .inside > .mod_article{
  margin:3em 0;
}

main > .inside > .mod_article:not(:last-child):after{
  content:"";
  display:block;
  width:50%;
  height:0;
  border-top:1px dotted #ccc;
  margin:3em auto 0;
}

#main{
}


main .mod_article > *:not(:last-child):not(h1):not(h2){
  margin-bottom:3em;
}

main p:not(:last-child),
footer p:not(:last-child),
main ol,
main ul{
  margin-bottom:1em;
}

main h2{
  color:#333;
}

main ul{
  list-style-type: disc;
  margin-left:1em;
}

main ol{
  margin-left:1em;
}

main a{
  text-decoration:none;
}

main a:hover,
main a:focus{
  text-decoration:underline;
}




/*-------------------------------------------------------------< Formulare >---*/

form .widget{
  margin-bottom:.7em;
  position:relative;
}

form .widget-text input,
form select,
form textarea,
form button{
  display:block;
  width:100%;
  padding:0 15px;
  outline: none;
  border:1px solid #333;
  border-radius:2px;
  background-color:transparent;
}

form .widget-text input,
form button{
  line-height:2em;
}

form .widget-text label,
form .widget-textarea label{
  position: absolute;
  left:15px;
  bottom:0;
  color:#ccc;
  line-height:1.5em;
  transition: bottom .1s, font-size .1s, padding .1s, color .1s;
}

form textarea{
  resize:vertical;
  padding:15px;
}



form .widget-text.focus label,
form .widget-text.filled label,
form .widget-textarea.focus label,
form .widget-textarea.filled label{
  bottom:-1em;
  font-size:.5em;
  padding:0 15px;
  background-color:#fff;
  z-index:1;
  color:#333;
}

form .widget-checkbox legend{
  display:none;
}


form button{
  border:none;
  color:#fff;
  width:100%;
  cursor:pointer;
  background-color:#aaa;
}

form .widget-text.filled > input,
form .widget-textarea.filled > textarea{
  border-color:#25BB3D;
}

/*-------------------------------------------------< verschiedene Elemente >---*/

main .ce_hyperlink.sm a:before,
footer .ce_hyperlink a:after{
  content: "";
  position: relative;
  top:.15em;
  margin-right:.5em;
  display:inline-block;
  height:1em;
  width:1em;
  background-size:contain;
  background-repeat:no-repeat;
}

footer .ce_hyperlink a:after{
  margin-left:.5em;
}

.ce_hyperlink.sm.facebook a:before,
.ce_hyperlink.sm.facebook a:after{
  background-image:url('../img/facebook_logo.png');
}

.ce_hyperlink.sm.instagram a:before,
.ce_hyperlink.sm.instagram a:after{
  background-image:url('../img/instagram_logo.png');
}

/*--------------------------------------------------< Warenkorb Seitenkopf >---*/

#openCart > span{
  position:absolute;
  transform:translate(50%,-50%);
  top:4px;
  right:6px;
  height:18px;
  width:18px;
  line-height:19px;
  font-size:.6em;
  background-color:red;
  color:white;
  font-weight:400;
  border-radius:50%;
  text-align:center;
}


#cartOverlay{
  position:fixed;
  top:-100vh;
  left:0;
  right:0;
  height:100vh;
  
  transition:top .5s;
  z-index:1;
}

#cartOverlay.show{
  top:0;
}

#wrapper.blur{
  filter:blur(10px);
}

#wrapper.blur:after{
  opacity:1;
}

#cartOverlay > .inside{
  position:relative;
  color:#fff;
  margin-top:10vh;
  padding-top:10vh;
}

#closeCart{
  position:absolute;
  top:0;
  right:0;
  border:inherit;
  background-color: inherit;
  color:inherit;
  padding-right:1.3em;
  font-size:.8em;
  cursor:pointer;
  color:#555;
  transition:color .2s;
}

#closeCart:hover,
#closeCart:focus{
  color:#fff;
}

#closeCart:after{
  content:"";
  height:1em;
  width:1em;
  top:0;
  right:0;
  display:block;
  position:absolute;
  background-image:url('../img/close.svg');
  background-size:contain;
}

#cartOverlay .headline{
  font-family: 'Henny Penny', sans-serif;
  font-size:4em;
  color:#2cb5b5;
  display:block;
  line-height:1em;
  margin-bottom:.5em;
}

/*----------------------------------------------------------< Media-Queries>---*/

@media (max-width:767px){
  #secNav{
    display:none;
  }
  @media (max-width:700px){
    header h1{
      font-size:3em;
    }
    header .ce_text{
      right:2.5%;
      bottom:100px;
    }
  }
}