/* --------- Allgemeines ---------------------------------------------------------------------*/
html, body { width:100%; height:100%; }

body { background:#FFF; }
  .wrapper { box-sizing:border-box; position:relative; display:block; margin-left:auto; margin-right:auto; padding:0 5%; }
  .hide { display:none; }

  .no-scroll {height:100%; overflow:hidden; }
  .transition {  
    transition: all 0.4s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
    -moz-transition: all 0.4s ease-in 0s; /* firefox */
    -o-transition: all 0.4s ease-in 0s; /* opera */
  }

  figure.table { margin:0;}

  .ce-right .ce-gallery { max-width: 40%; }
  .ce-gallery img { max-width:100%; height:auto; }

  .fsc-default { position: relative; width: 100%; margin-bottom:3%; }
  .fsc-default:last-child { margin-bottom:0; }

/* --------- Container -------------*/
.gridelement_content { display: flex; justify-content: space-between; flex-wrap: wrap; }


/* --------- Header ---------------------------------------------------------------------*/
#header{  }
  #header .wrapper { display: flex; justify-content: space-between; padding-top: 3%; }

  /* Logo */ 
  #header .logo { position: relative; display: flex; justify-content: flex-end;}
  #header .logo img { display:block; width:100%; height:auto; max-width: 350px; }


/* --------- Main Content -------------*/ 
#main { position:relative; overflow:hidden; }
#main .wrapper { padding:10% 5%; display:flex; flex-wrap: wrap; }
#main .wrapper .content { width: 100%; }

#main .wrapper .content ul { padding-left:20px; }


/* --------- Pageteaser -------------*/ 
#main .pageteaser { width:100%; padding-top:10%; }
#main .pageteaser-wrapper { display: flex; flex-wrap: wrap; margin:3% 0; }
#main .pageteaser a {  font-size: 1.4em; position: relative; text-transform: uppercase; display:flex; flex-direction: column; justify-content: center; padding:40px 150px 40px 30px; margin:1% 0; margin-right:2.54545455%; border:1px solid #00a9d5; color: #00a9d5; box-sizing: border-box; }
#main .pageteaser a:after { 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
  -moz-transition: all 0.4s ease-in 0s; /* firefox */
  -o-transition: all 0.4s ease-in 0s; /* opera */
}
#main .pageteaser a:hover:after { transform:scale(1.05); }
#main .pageteaser a:nth-child(3n+3) { margin-right:0; }
#main .pageteaser a.button-a:after { content:''; position: absolute; right: -35px; bottom:0; width:100%; height:150%; background: url('../Images/maedchen.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-b:after { content:''; position: absolute; right: -30px; bottom:0; width:100%; height:130%; background: url('../Images/katze.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-c:after { content:''; position: absolute; right: 5px; bottom:0; width:100%; height:150%; background: url('../Images/giraffe_mitBuch.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-d:after { content:''; position: absolute; right: 0px; bottom:0; width:100%; height:130%; background: url('../Images/ratte-mit-ring.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-e:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:100%; background: url('../Images/Gruppe.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-f:after { content:''; position: absolute; right: 10px; bottom:0; width:100%; height:120%; background: url('../Images/Maedchen_Ballon.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-g:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:110%; background: url('../Images/Schildkroete-VR.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-h:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:120%; background: url('../Images/Kraken.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-warteliste { background:#007659; border-color:#007659; color:#FFF; margin-right:0; }
#main .pageteaser a.button-warteliste:after { content:''; position: absolute; right: 0; bottom:0; width:100%; height:130%; background: url('../Images/2giraffen.png') bottom right no-repeat; background-size:auto 100%; }

/* --------- Wenn Warteliste geschlossen ist! -------------*/
#main .pageteaser div.button-warteliste { font-size: 1.4em; position: relative; text-transform: uppercase; display:flex; flex-direction: column; justify-content: center; padding:40px 150px 40px 30px; margin:1% 0; border:1px solid #00a9d5; color: #00a9d5; box-sizing: border-box; background:#007659; border-color:#007659; color:#FFF; margin-right:0; }
#main .pageteaser div.button-warteliste:after { content:''; position: absolute; right: 0; bottom:0; width:100%; height:130%; background: url('../Images/2giraffen.png') bottom right no-repeat; background-size:auto 100%; }


/* --------- Nild Madeleine Rüth -------------*/ 
#c7 .ce-textpic, #c7 .ce-gallery, #c7 .ce-row { overflow:visible; }
#c7 figure.image { content:''; position: relative; }
#c7 figure.image:after { content:''; position: absolute; right: -70px; bottom:-40px; width:70%; height:50%; background: url('../Images/katze.png') bottom right no-repeat; background-size:100% auto; }


/* --------- iFrame Warteliste -------------*/ 
.warteliste { border:1px solid #007659; aspect-ratio: 2 / 1; min-height: 550px; width:100%; height:auto; }


/* --------- Footer -------------*/
#footer { position:relative; width:100%; border-top:1px solid #00a9d5; }
#footer .wrapper { display:flex; flex-wrap:wrap; padding:2% 5%; position: relative; }
#footer .wrapper::after { content:''; position: absolute; right: 0; bottom:0; width:50%; height:120%; background: url('../Images/giraffe.jpg') bottom right no-repeat; background-size:auto 100%; }
  
  #footer p { margin-bottom:1%;  }
  #footer .address { width:100%; position: relative; z-index: 500; }
  #footer .copyright { padding-right:20px; position: relative; z-index: 501; }

  .footernav { position:relative; z-index: 502; box-sizing:border-box; display: block; }
  .footernav ul { margin:0; padding:0; list-style:none; display:flex; }
  .footernav li { position:relative; }
  .footernav li a { display:block; text-decoration:none; padding:0 20px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
  }



/* --------- Kontaktformular -------------*/
.form-element { margin-bottom:20px; display:flex; justify-content: space-between; }
.form-element label { width:30%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-weight: 700; }
.form-element input { width:70%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.form-element select { width:70%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.form-element textarea { width:70%; height:200px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.form-navigation { display: flex; justify-content: flex-end; }
button { font-size:1.0em; font-family: 'Open Sans', Arial, sans-serif; background: none; margin-top:20px; text-transform: uppercase; display:inline-block; padding:20px 30px; border:1px solid #e1bd45; color: #e1bd45; 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
  -moz-transition: all 0.4s ease-in 0s; /* firefox */
  -o-transition: all 0.4s ease-in 0s; /* opera */
}
button:hover { border:1px solid #00a9d5; color: #00a9d5; } }

.form-element input[type="checkbox"] { display: none; }
.form-element input[type="checkbox"] + span span { display: none; }
.form-element input[type="checkbox"] + span { overflow:hidden; display:block; text-indent:-9999px; }
.form-element input[type="checkbox"] + span::before { width: 30px; height: 30px; background-color: #fff; display: block; content: ""; float: left; margin-right: 5px; }
.form-element input[type="checkbox"]:checked + span::before { box-shadow: inset 0px 0px 0px 3px #fff; background-color: #206eff; }