/*----------------------------------------------------------< Dimensionen >---*/

header > .inside,
footer .footerInfo,
#gruen > .inside{
  width:100%;
  max-width:1700px;
  margin:0 auto;
  padding:0 1rem;
}

main > .inside > .articleContainer > div{
  width:100%;
  padding:4rem 1rem;
  width:100%;
  max-width:1300px;
  margin:0 auto;
}

main .articleContainer:nth-child(even){
  background-color:rgba(179,218,211, .45);
}

/*---------------------------------------------------------------< Header >---*/

header{
  position:fixed;
  height:10vw;
  width:100%;
  max-height:200px;
  min-height:70px;
  background-color: #fff;
  box-shadow: 0px -10px 20px #000;
  z-index:1;
  transition:height .2s;
}

header:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:10px;
  background-color:#B3DAD3;
  z-index:-1;
}

header > .inside{
  padding-top:10px;
  height:100%;
  display:flex;
  justify-content: space-between;
  align-items: stretch;
}

header > .inside > div.side{
  position: relative;
  width:100%;
  top:10%;
  height:90%;
}

header .logo{
  width:25vw;
  max-width:500px;
  position:relative;
}

header .logo a{
  position:absolute;
  transform:translateY(-50%);
  top:50%;
  height:80%;
  width:100%;
  background-image:url('../img/logo_gross.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size:contain;
  font-size:0;
}



/*-----------------------------------------------------------< Navigation >---*/

nav ul{
  margin:0;
}

header nav ul{
  display:flex;
  justify-content: flex-end;
}

nav strong{
  font-weight:inherit;
  font-weight: 400;
}

header nav{
  text-transform: uppercase;
  font-size:.8rem;
  position:absolute;
  transform: translateY(-50%);
  top:60%;
  right:0;
  transition:font-size .2s, top .2s;
}

@media screen and (max-width:1024px){
  header nav{
    top:70%;
  }
}

header nav li:not(:first-child){
  margin-left:1rem;
}

header nav a > span{
  color:#B3DAD3;
  transition: color .15s;
  font-weight: 400;
}

header nav a:hover > span,
header nav a:focus > span{
  color:inherit;
}

.buttonContainer,
#mobileNav{
  display:none;
}

body.fixed header{
  height:5vw;
}

body.fixed header nav{
  font-size:.6rem;
  top:74%;
}


/*-----------------------------------------------------------< BurgerMenü >---*/

.buttonContainer{
  margin-left:2rem;
}

.buttonContainer > span{
  font-size:.5em;
  line-height:1em;
  padding-top:7px;
  display:block;
  text-align: center;
}

header .buttonContainer{
  color:#B3DAD3;
}

#mobileNav .buttonContainer{
  color:#fff;
}

.burger{
  height:16px;
  width:25px;
}

.burger > span{
  position:relative;
  display:block;
}

.burger > span,
.burger > span:before,
.burger > span:after{
  height:2px;
  width:100%;
  background-color:#B3DAD3
}

.burger > span:before,
.burger > span:after{
  content:"";
  position:absolute;
}

.burger > span:before{
  top:7px;
}

.burger > span:after{
  top:14px;
}


.cross{
  height:16px;
  width:16px;
  position:relative;
  margin:0 auto;
}

.cross:after,
.cross:before{
  content:"";
  height:2px;
  background-color:#fff;
  width:calc(1.4142 * 100%);
  position:absolute;
  transform-origin: left center;
}

.cross:before{
  top:-1px;
  transform:rotate(45deg);
}

.cross:after{
  bottom:-1px;
  transform:rotate(-45deg);
}



/*----------------------------------------------------------------< Bühne >---*/

#wrapper .custom{
  padding-top:10vw;
}

@media screen and (max-width:700px){#wrapper .custom{padding-top:70px !important;}}
@media screen and (min-width:2000px){#wrapper .custom{padding-top:200px !important;}}

#bild{
  height:22vw;
  min-height:280px;
  max-height:450px;
  overflow:hidden;
}

#bild > .inside{
  position:relative;
  height:100%;
  width:100%;
}

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

#gruen{
  position:relative;
  background-color:#B3DAD3;
  height:17vw;
  max-height:200px;
  min-height:100px;
  margin-bottom:3vw;
  text-align: center;
}

#gruen .articleContainer{
  padding-top:1rem;
}

#gruen h1{
  margin:0;
}

/*-----------------------------------------------------------< Leistungen >---*/

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

#navServices ul{
  text-align:center;
}

#navServices li{
  font-size:1.2rem;
  position:relative;
}

#navServices li:nth-child(1){z-index:8;}
#navServices li:nth-child(2){z-index:7;}
#navServices li:nth-child(3){z-index:6;}
#navServices li:nth-child(4){z-index:5;}
#navServices li:nth-child(5){z-index:4;}
#navServices li:nth-child(6){z-index:3;}
#navServices li:nth-child(7){z-index:2;}
#navServices li:nth-child(8){z-index:1;}

#navServices li:nth-child(odd),
.articleContainer:nth-child(odd) .ce_rsce_kugel span{
  margin-left:-10%;transform:rotate(-1.5deg);
}

#navServices li:nth-child(even),
.articleContainer:nth-child(odd) .ce_rsce_kugel span{
  margin-left:10%;transform:rotate(1.5deg);
}

#navServices a:not(.invisible),
.ce_rsce_kugel span.headlineText{
  padding:.5em;
  position: relative;
  box-shadow: 0px 21px 20px -25px #000;
  color:#1B2442;
  font-family: 'Righteous';
  text-decoration:none;
  line-height:1em;
  display:inline-block;
  white-space: nowrap;
  transition:box-shadow .2s, transform .2s;
  z-index:0;
}

#navServices a:not(.invisible):hover{
  box-shadow: 0px 25px 20px -25px #000;
  transform:scale(1.05);
}

#navServices > span{
  display:block;
}

#navServices a:before,
.ce_rsce_kugel span:before{
  content:"";
  width:1.414em;
  height:1.414em;
  position:absolute;
  top:0.3em;
  transform-origin:center;
  transform:rotate(45deg);
  left:-.7em;
  z-index:-1;
}

#navServices li:nth-child(1) a,
#navServices li:nth-child(1) a:before,
.ce_rsce_kugel.hl1st span,
.ce_rsce_kugel.hl1st span:before{
  background-color:#F4ACCD;
}

#navServices li:nth-child(2) a,
#navServices li:nth-child(2) a:before,
.ce_rsce_kugel.hl2nd span,
.ce_rsce_kugel.hl2nd span:before{
  background-color:#FCC870;
}

#navServices li:nth-child(3) a,
#navServices li:nth-child(3) a:before,
.ce_rsce_kugel.hl3rd span,
.ce_rsce_kugel.hl3rd span:before{
  background-color:#CEDC76;
}

#navServices li:nth-child(4) a,
#navServices li:nth-child(4) a:before,
.ce_rsce_kugel.hl4th span,
.ce_rsce_kugel.hl4th span:before{
  background-color:#A2D3E3;
}

/*-----------------------------------------------------------< Leistungen >---*/

.ce_rsce_kugel{
  position: relative;
}

.ce_rsce_kugel figure{
  border-radius:50%;
  overflow:hidden;
}

.articleContainer .ce_rsce_kugel > div{
  position:absolute;
  transform:translate(-50%, -50%);
  top:0;
  left:50%;
}

/*--------------------------------------------------------------< Kontakt >---*/

header .contact{
  font-size:.5rem;
  display:flex;
  justify-content: flex-end;
}

header .contact > div:not(:last-child){
  margin-right:1rem;
}

.contact a,
.address .add{
  display:flex;
  align-items: stretch;
}

.address .add p{
  margin:0;
}

.contact a:before,
.address .add:before{
  content:"";
  width:1em;
  margin-right:.5em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.address .add:before{
  background-position: center top;
}

.contact .phone a:before{background-image:url('../img/icon_phone.svg');}
.contact .mail a:before{background-image:url('../img/icon_mail.svg');}
.contact .fax a:before{background-image:url('../img/icon_fax.svg');}
.address .add:before{background-image:url('../img/icon_marker.svg');}


/*----------------------------------------------------------------< Allg. >---*/

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

main strong{
  font-weight:700;
}
main .jobs {
	border-top: 1px solid #B3DAD3;
	margin: 1em 0 3em;
	grid-row-gap: 0;
}
main .job {
	position: relative;
	border-bottom: 1px solid #B3DAD3;
	padding: 1em 0 0;
}
main .job .button {
	position: absolute;
	right: 0;
	top: 1em;
}

a.button,
button,
.fineuploader-wrapper .qq-upload-button{
  display:inline-block;
  background-color: #85c4b9;
  padding: .5rem 1rem .3rem;
  color:#fff;
  border-radius:1rem !important;
  box-shadow: 0px 17px 20px -25px #000;
  border:inherit;
  cursor:pointer;
  transition: transform .2s, color .1s;
}

a.button:hover,
button:hover,
.fineuploader-wrapper .qq-upload-button:hover{
  color:#11355B;
  transform:scale(1.05);
}

form fieldset {
	padding: 1rem 1rem 0;
	border-radius: .5rem;
	background-color: rgba(179,218,211, .45);
	margin-bottom: 1rem;
}
form fieldset legend {
	color: #11355B;
	font-weight: 600;
}
form fieldset fieldset {
	padding: 0;
	background-color: transparent;
	margin: 0;
}
form fieldset fieldset legend {
	color: #111C33;
    font-weight: 200;
}
form .widget {
	margin-bottom: 1rem;
}
form .widget-text input, 
form .widget-select select,
form .widget-textarea textarea {
	width: 100%;
	padding: .3rem .5rem;
}
form .radio_container span {
	margin-right: 1.5rem;
}
form p.error {
	color: #11355B;
	font-weight: 600;
	font-size: .7rem;
	line-height: 1;
	border: 1px solid #11355B;
	padding: .3rem .5rem;
}
form .fineuploader-item {
	width: 100%;
	border-bottom: 1px solid #11355B;
	margin-bottom: .5em;
}
form .fineuploader-item img {
	height: 2em;
	width: auto;
	float: left;
	margin-right: .5em;
}
form .fineuploader-item span, 
form .fineuploader-item .delete {
	margin-top: .3em;
	display: inline-block;
}
form .fineuploader-item .delete {
	float: right;
}

main > .inside > .articleContainer{
  position: relative;
}

main > .inside > .articleContainer:after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  bottom:0;
  background-image:url('../img/icons02.png');
  background-repeat:no-repeat;
  background-position:right bottom;
  opacity:.4;
  z-index:-1;
}

main > .inside > .articleContainer:nth-child(odd):after{background-image:url('../img/icons02.png');}
main > .inside > .articleContainer:nth-child(even):after{background-image:url('../img/icons01.png');background-position:right top;}

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

footer{
  background-color: #B3DAD3;
  color:#11355B;
  font-weight:300;
}

footer .footerInfo{
  font-size:.6rem;
  line-height:1.5em;
  padding:.5rem 0;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer .footerInfo > div{
  padding:.5rem 1rem;
}

#map{
  width:100%;
  height: 25vw;
  min-height: 350px;
  max-height: 600px;
  overflow: hidden;
  position: relative;
}

#map .gm-style .gm-style-iw-t::after{
  content:none;
}

#map .gm-style .gm-style-iw-c{
  background-color:rgba(255,255,255,.7);
  padding:.5rem !important;
  box-shadow: 0 2px 7px 1px rgb(0 0 0 / 15%);
  border-radius: 100px;
}

#map .gm-style .gm-style-iw-c > button{
  top:10px !important;
  right:6px !important;
}

#map .gm-style-iw-d{
  overflow: auto !important;
}

#map .message{
  position: absolute;
  transform:translate(-50%, -50%);
  left:50%;
  top:50%;

  width:75vw;
  margin:auto;
  text-align: center;
  cursor:pointer;
  padding:3rem;
  border:1px solid #85c4b9;
  opacity:.5;
  transition:opacity .2s;
}

#map .message:hover{
  opacity: 1;
}

footer nav{
  padding:1rem 1rem 4rem 1rem;
}

footer nav ul{
  display:flex;
  justify-content: center;
  text-transform: uppercase;
}

footer nav ul li{
  padding:1em;
}

footer nav a{
  font-weight:300;
}

/*----------------------------------------------------------< Datenschutz >---*/

#privacyBackground{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.7);
  z-index:1;
}

#privacyContainer{
  padding:2rem;
  position:absolute;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  background-color:#fff;
  border:10px solid #B3DAD3;
  box-shadow:0 25px 40px -15px #000;
}

body:not(.showPrivacy) #privacyBackground{
  display:none;
}

body.network #privacyContainer{border-color:#cca62a;}
body.event #privacyContainer{border-color:#a3aaac;}

#privacyContainer label{
  font-weight:bold;
}

#privacyContainer .personal:not(.show){ display:none; }
#privacyContainer .default.hide{ display:none; }

#Analytics, #gMaps{ margin-bottom:.5em; font-weight:bold; }
#changePrivacy{ margin-bottom: 2em;}
#changePrivacy button, #map > .message button{ width:inherit; }

#privacyContainer fieldset.button{
  display:flex;
  margin-top:2rem;
}

#privacyContainer fieldset.button > *{
  margin-right:1rem;
}

#privacyContainer button:not(.setAll){
  background-color:#eee;
}

#privacyContainer > .ce_text{
  margin-bottom:1em;
}

#privacyContainer .headline{
  font-weight:700;
  font-size:1.5rem;
}


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

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

  .side{
    display:flex;
    justify-content: flex-end;
    align-items: center;
  }

  header .contact{
    display:block;
    line-height:1.5em;
  }

  header nav{
    display:none;
  }

  .buttonContainer{
    display:block;
  }

  #mobileNav{
    display:block;
    position:fixed;
    top:50%;
    left:0;
    right:0;
    height:0;
    background-color:#B3DAD3;
    z-index:1;
    transition:top .2s, height .2s;
    overflow:hidden;
  }

  body:not(.open) #mobileNav{
    top:50%;
    height:0;
  }

  body.open #mobileNav{
    top:0;
    height:100%;
  }

  .menuContainer{
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    text-align:center;
    width:100%;
  }

  #mobileNav .buttonContainer{
    position:absolute;
    right:.7rem;
    top:28px;
  }

  #mobileNav .logo{
    font-size:0;
    width:50%;
    height:50px;
    margin:0 auto 5vh auto;
  }

  #mobileNav .logo a{
    display:block;
    height:100%;
    background-image:url('../img/logo_gross.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
  }

  #mobileNav nav ul li > a,
  #mobileNav nav ul li > strong{
    display:block;
    padding:.4em;
  }

  body.leistungen .articleContainer:nth-child(even) .row > div:first-child{

  }

  body.leistungen .articleContainer:nth-child(even) .row > div:last-child{
    grid-row:1;

  }

}