/*------------------------------------------------------------------
[Main Stylesheet]

Project:        Tierpark Hagenbeck
Version:        1.2
Last change:    06/02/20 [Anpassungen]
Assigned to:    Stefan Koch (sk), Michael Boettger (mb)
Agency:         SOP 
Last Comment:   Added Styles from main-nav.css, Added Styles from _temp.css
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color Codes]

/* Rot: rgb(210,41,28) / #D1291B */
/* Gruen: rgb(0,107,50) / #006b32 */
/* Blau: rgb(0,56,116) / #103873 */

/* Orange: rgb(230,142,36) / #F2A513 */
/* Orange-Dunkel:  / #CC8B10 */

/* Dunkelgrau: / #95989A */
/* Grau: #bcc4c7 */
/* Hellgrau: / #E6ECF0 */

/* Braun:  / #7F6430 */
/* Hellbraun-2 #f3f0ec */
/* Hellbraun-1 #E6E0D6 */

@import url();

:root {
    --main-color-red: rgb(210,41,28);
    --main-color-green: rgb(0,107,50);
    --main-color-blue: rgb(0,56,116);
    --main-color-orange: rgb(230,142,36);
}

/* var(--main-bg-color); */

/* ==========================================================================
   TEMPORARY
   ========================================================================== */
/* Steckbrief Verbreitung u. UICN temporär ausblenden */
/*.lexikon--filter {display: none;} */

/* Fütterungen Zeitstrahl Anpassung aufgrund weniger Termine */
.horizontal-timeline .events {border-right: 50vw solid #dfdfdf;box-sizing: content-box;}

/* ==========================================================================
1. TYPOGRAPHY, LISTS, LINKS & BUTTONS
========================================================================== */

body {font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;}
/* !!!!! Blur Animation sorgt für Fehlfunktion bei der Bildergallerie !!!!! */
/* !!!!! Blur Animation sorgt für Fehlfunktion bei der Bildergallerie !!!!! */
/* be careful of FF-Bug, combining blur effect with fixed position elements */
main {filter:blur(5px);-webkit-filter: blur(5px); opacity: 0.4; animation: start 1s ease 0.5s forwards; height: 100%} 
@keyframes start {
	0% {filter:blur(5px)}
	100% {filter:blur(0px);opacity: 1;}
}
/* !!!!! Blur Animation sorgt für Fehlfunktion bei der Bildergallerie !!!!! */
/* !!!!! Blur Animation sorgt für Fehlfunktion bei der Bildergallerie !!!!! */
a {color: rgb(0,107,50);font-weight: 400;}
a:hover {text-decoration: underline;}
a[href^="https:"]::after {content: '\f08b';font-family: "FontAwesome";position: relative;margin: 0 3px 0 4px;text-transform: none;border: 0;top: 0px;color: var(--main-color-green);font-size: 0.9rem;}
#tropen-aq a[href^="https:"]::after {color: var(--main-color-blue)}
a.button[target="_blank"]::after {display: none;}


a[href^="https:"]:not(.button):hover {text-decoration: none;color: rgb(210,41,28)}
article a[href^="https:"]:not(.button):hover, article a[href^="https:"]:not(.button):hover::after {color: #fff;}
p, article p, article li {font-size: calc(0.75rem + 0.3vw);font-weight: 300;}
.ta strong {color: var(--main-color-blue)}

h1, h2, h3 {font-family: 'Averia Libre', 'Helvetica Neue', Helvetica, sans-serif; font-weight: 700;}
h2, h3, h3 a, h4 {color: rgb(0,107,50);}
.ta h1, .ta h2, .ta h3, .ta h3 a, .ta h4 {color: var(--main-color-blue)}
h2 {font-size: 3.6rem;}
h3 {font-size: 1.38rem;margin-top: 1.5rem;margin-bottom: 1.25rem;}
h4 {font-size: calc(0.75rem + 0.68vw);font-family: 'Averia Libre', 'Helvetica Neue', Helvetica, sans-serif;font-weight: 400;color: #006b32;}
h5 {font-size: 1.125rem}

h1 {font-weight: 400;font-size: 4rem;color: rgb(0,107,50);letter-spacing: -4px;margin-bottom: 0;text-align: center;margin-top: 60px;}
h2.title {margin: 50px -5px 2.5rem -3.75rem; background: #e6ecf0 url('../img/grafiken/noise.png'); display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 56px; border-radius: 50px; position: sticky; font-weight: 700; top: 0px; text-transform: uppercase; border: 15px solid #fff; z-index: 3; font-size: 0.9rem; color: #fefefe; font-family: 'Lato', sans-serif;}   
h2 .heading { background: #006b32; border-radius: 0 50px 50px 0; padding: 0 1.75rem; display: inline-flex; height: 100%; align-items: center; margin-left: -1rem; min-width: 49%; }   
h2 .heading-detail {font-size: 0.9rem; display: inline-block; margin-left: 10px; text-transform: none; color: #d2291c; position: relative; top: 1px; }
h3 .heading-icon { background: rgb(0, 107, 50); border-radius: 30px; color: #fff; width: 30px; height: 30px; font-size: 20px;float: left;margin-right: 12px;text-align: center; }
h3 small {color: #5c5c5c;font-weight: 400;font-size: 75%;top: -5px;display: inline-block;position: relative;}
.italic {font-style: italic}
.callout {border: 0;margin-top: 8px;padding: 2rem 3.5rem;border-width: 3px 4px 3px 5px;border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;}
.callout.primary {background: #E6E0D6;border: 0;} 
.callout.primary ul {margin-left: 24px;list-style-type: none;}   
.callout.primary ul li {list-style-type: none;margin: 8px 0;color: #333;}
.callout.primary ul li strong {color: #000;}
.callout.secondary {border: 0;background: #C3DCCE	}     
.large-btn, .medium-btn, .small-btn {display: inline-block; padding: 0.75rem 2.25rem; font-size: 0.9rem; font-weight: 600; color: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; text-transform: uppercase; border-radius: 6px; background: rgb(0,107,50) }
.medium-btn {padding: 0.5rem 1.5rem;}
.small-btn {padding: 0.38rem 1.25rem;font-size: 0.8rem;}
.large-btn:hover, .medium-btn:hover, .small-btn:hover {color: #1f672d;background: #f3f0ec;text-decoration: none;}
.large-btn::before, .medium-btn::before, .small-btn::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 6px; -webkit-transition: all 0.3s; transition: all 0.3s; }
.parallax-content .medium-btn::before {border: 2px solid rgb(254, 254, 254);}
.large-btn:hover::before, .medium-btn:hover::before, .small-btn:hover::before{opacity: 0;-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);}
.large-btn::after, .medium-btn::after, .small-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; background-color: rgba(255, 255, 255, 0.25); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); border-radius: 6px; border: 2px solid #1e662d; }
.large-btn:hover::after, .medium-btn:hover::after, .small-btn:hover::after{opacity: 1 ;-webkit-transform: scale(1,1);transform: scale(1,1);}
.large-btn.no-radius, .medium-btn.no-radius, .small-btn.no-radius {border: 0}
.large-btn.no-radius::after, .large-btn.no-radius::before, .medium-btn.no-radius::after, .medium-btn.no-radius::before, .small-btn.no-radius::after, .small-btn.no-radius::before {border-radius: 0}

.small-btn + .small-btn {margin-left: 10px}
a.small-btn[href^="https:"]::after {display: none;}

div[class$="-bg"] a.large-btn, div[class$="-bg"] a.medium-btn, div[class$="-bg"] a.small-btn {background: none}
div[class$="-bg"] a.large-btn:hover, div[class$="-bg"] a.medium-btn:hover, div[class$="-bg"] a.small-btn:hover {background: #fff; color: #1f672d}
div[class$="-bg"] a.large-btn::before, div[class$="-bg"] a.medium-btn::before, div[class$="-bg"] a.small-btn::before {border: 2px solid #fff}
div[class$="-bg"] a.large-btn:hover::after, div[class$="-bg"] a.medium-btn:hover::after, div[class$="-bg"] a.small-btn:hover::after {background-color: transparent; border: 0}

/* Button mit Mouse-Over-Beschreibung */
.button-leiste a { position: relative; display: inline-block; color: rgb(255, 255, 255); margin: 15px 25px; outline: none; text-decoration: none; min-width:  240px; }
.button-leiste a::before { position: relative; top: 100%; width: 100%;    /* left: 0; */ display: block; }
.button-leiste a::before { position: absolute; box-sizing: border-box; opacity: 1; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; color: #fff; font-weight: 600; content: attr(data-hover); transform: translateX(-25%); -webkit-transform: translateX(-25%); padding: 0.75rem 2.25rem; background-color: #fff; transition: transform 0.3s 0.05s, background-color 0.1s; -webkit-transition: transform 0.3s 0.05s, background-color 0.1s; border-radius: 6px; text-align: center; }
.button-leiste.download a::before { background: url('../img/interface/download-2-xxl.png') no-repeat calc(100% - 15px) center; background-size: 24px; }
.button-leiste.video a::before { background: url('../img/interface/play-icon.png') no-repeat calc(100% - 15px) center; background-size: 32px; }
.button-leiste.external-link a::before { background: url('../img/interface/external-link-icon.png') no-repeat calc(100% - 15px) center; background-size: 24px; }
.button-leiste a { overflow: hidden; margin: 0 }
.button-leiste a span { display: block; padding: 0.75rem 2.25rem; background: rgb(30, 106, 51); transition: transform 0.3s; -webkit-transition: transform 0.3s; border-radius: 6px;text-align: center; }
.button-leiste a:hover span, .button-leiste a:focus span { -webkit-transform: translateX(100%); transform: translateX(100%); }
.button-leiste a:hover::before, .button-leiste a:focus::before { -webkit-transform: translateX(0%); transform: translateX(0%); }
.button-leiste a:hover::before { background-color: rgb(211, 42, 28) }

.label {font-size: 0.9rem;font-weight: 400;}
.label.label-light {background: #e6ecf0;padding: 3px 8px;border-radius: 4px;font-size: 1rem;font-weight: 600;display: inline;}

/* Definition Lists */
dl {padding-left: 14rem !important;}
dl:after {content: "";display: table;clear: both;}
dt, dd {margin-bottom: 0.5rem;float: left;}
dt:last-of-type, dd:last-of-type {margin-bottom: 0;}
dt {font-weight: bold;width: 14rem;margin-left: -14rem;clear: left;}
dt:after {}   /* content: ":"; */
dd {margin-left: 0;clear: right;color: #1e6a33}
dl {padding: 0.125rem 0.5rem;margin: 0;}
dt {padding-left: 0.5rem;}

/* DL Fütterungen */
#dl--fuetterung {}
#dl--fuetterung .dl-fuetterung-zeile {padding-left: 4rem !important;padding: 0.5rem;display: flex;
    justify-content: space-between;
    align-items: center;border-bottom: 1px solid #ddd;}
#dl--fuetterung .dl-fuetterung-zeile dt {width: 4rem;margin-left: -4rem;}
#dl--fuetterung .dl-fuetterung-zeile dt .gehege {width:42px;height:42px;border-radius:30px;top:auto}
#dl--fuetterung .dl-fuetterung-zeile dd {margin-bottom: 0;flex: 1 0 25%;}

/* OnePager Heading Styles */
.headline {margin: 50px 0 30px; text-align: center;}

/*h2.special-one, h2.special-two, h2.special-three {color: #003874;font-weight: 500;margin: 50px 0;font-size: 4rem;text-transform: none;}
h2.special-one::after {content:"";background:url(../img/interface/h1-linie-welle.png) no-repeat center center; width: 100%; display: block;height: 30px;}
h2.special-two {color: rgb(0,107,50);display: flex;justify-content: center;align-items: center;}
h2.special-two::after, h2.special-two::before {content:"";background:url(../img/interface/h1-linie-strich-rechts.png) no-repeat center left; width: 100%;display: inline-block;height: 30px;max-width: 244px;margin: 0 15px;background-size: 100%;-webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;}    
h2.special-two::before {background:url(../img/interface/h1-linie-strich-links.png) no-repeat center right;background-size: 100%;}

h2.special-three {color: rgb(0,107,50);display: flex;flex-direction: column;justify-content: center;align-items: center;}
h2.special-three img {max-width: 460px;margin-bottom: 10px;}*/
.headline-icon {
      background: rgb(0,107,50);
    font-size: 30px;
    color: #FFF;
    border-radius: 40px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 12px;
    margin-top: 40px;
}
h3 .headline-icon {    
  font-size: 14px;
    padding: 6px;
    position: relative;
    top: -1px;margin-top: 0;}
/* ==========================================================================
2. GENERAL LAYOUT
========================================================================== */
header {height: 140px;position: relative;z-index: 101;}

main section {margin: 100px 0}

.grid-container {max-width: 80rem;padding: 0 1.5rem;}
.grid-container.grid-wide {max-width: 88rem}

.gehege {    background: rgb(0, 107, 50);
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 20px;
    font-weight: 700;
    margin-left: 0;
    min-width: 30px;
    position: relative;
    top: -3px;}
.gehege.ta-icon {padding: 3px;position: relative;top: 4px;}

h1 .gehege {width: 60px;height: 60px;font-size: 40px;border-radius: 30px;top: -9px;text-indent: -5px;}   
 
.status {background: rgb(210,41,28);display: inline-block;width: 30px;height: 30px;text-align: center;color: #fff;font-size: 0.9rem;border-radius: 20px;font-weight: 700;margin-left: 5px;min-width: 30px}

.js-is-sticky, .js-is-stuck {position:relative!important;}

.has-tip {font-weight: normal;border: 0;}
svg.curveddivider {display: block;} 
svg:not(:root) {overflow: hidden;}

main section.outercolor, main section.parallax-divider, main section.text-divider {margin: 0}
main section.outercolor {margin: -20px 0;z-index: 5;padding-top: 50px;}
main section.outercolor + section:not(.outercolor):not(.parallax-divider):not(.text-divider) {margin-top: 150px;}
main section.parallax-divider {z-index: 0}
main section:last-child:not(.outercolor) {padding-bottom: 100px;}

.outercolor {padding: 80px 0;position: relative;margin-top: 40px;}
.outercolor article {padding-bottom: 0;}
.outercolor h2.special-two {margin-top: 0;}
.outercolor h2.title {border: 5px solid #e6e0d7;margin-top: 0;background: #e6e0d7;}   
.outercolor h2.title .heading {min-width: 50%; height: 28px;} 
.outercolor h2 .heading-icon {border: 5px solid #e6e0d7}
.outercolor .headline {margin: 0 0 20px;}

main section.outercolor.boxed-content {margin: 100px auto 0;}
.boxed-content {padding: 2.5rem}
.boxed-content .grid-x:last-child {padding-bottom: 0;}

.tooltip {background: rgb(210,41,28); font-weight: 600;text-align: center;padding: 0.25rem 0.5rem;}
.tooltip.top:before {border-color: rgb(210,41,28) transparent transparent}
.tooltip.left:before {border-color: transparent transparent transparent rgb(210,41,28)}
.tooltip.left {border-radius: 6px 0 0 6px}
.tooltip.right:before {border-color: rgb(210,41,28) transparent transparent}
.tooltip.bottom:before {border-color: rgb(210,41,28) transparent transparent}
.thumbnail img {max-width: 200px;}
#aktuelles {margin-top: 80px;margin-bottom: 80px;}

.accordion-title {font-size: calc(0.75rem + 0.75vw);}
.accordion-title:hover, .accordion-title:focus {background-color: #e6ecf0;text-decoration: none;}
.accordion-title::before {position: absolute;top: 50%;right: 1rem;margin-top: -0.75rem;content: '\f0fe';font-family: 'FontAwesome';}
.is-active > .accordion-title::before {content: '\f146'}

.stichpunkte.callout {background: #e7edf0; display: flex;display: -webkit-box;display: -webkit-flex; display: -ms-flexbox;justify-content: flex-start;align-items:center;-webkit-align-items: center; -ms-flex-align: center; border:0;color: #222;font-size: calc(0.75rem + 0.3vw);font-weight: 300;margin-top: 10px;margin-bottom: 0;position: relative;border-radius:0;padding-left: 30px;padding-right: 30px;}
.stichpunkte.callout a::after {content:'\f054';font-family: 'FontAwesome';position: absolute;margin-left: 0.5rem;color: rgb(0,107,50);margin-top: 2px;font-size: 15px;}    

.contenttable tbody {border: 0}


/* ==========================================================================
3. IMAGE / FIGURE STYLES
========================================================================== */
.copyright {    
    font-size: 70%;
    display: inline-block;
    margin-left: 20px;
    padding: 0 5px;
    line-height: 1;
    border-right: 5px solid #fefefe;
    position: absolute;
    top: 15px;
    right: 20px;
    color: #fff;}
.media-object img {border-radius: 4px}    


/* ==========================================================================
4. UTILITY CLASSES
========================================================================== */
/* Backgrounds */
.orange-bg {background-color: rgb(230,142,36)}
.darkorange-bg {background-color: #CC8B10}
.brown-bg {background-color: #7F6430;}
.lightbrown-bg {background-color: rgb(230,224,214)}
.lightgreenblue-bg {background-color: rgb(217, 225, 219)}
.lightgreen-bg {background-color: rgb(208, 232,218)}
.red-bg {background-color: rgb(210,41,28)}
.red {color: var(--main-color-red)}
.blue-bg {background-color: rgb(0,56,116)}
.light-blue-bg {background-color: #1e90ff}
.green-bg {background-color: rgb(0,107,50)}
.cd-primary-nav .cd-secondary-nav .green-bg a {color: #FFF;}
.grey-bg {background-color: #dae3e9;}
.lightgrey-bg {background-color: #E6ECF0;}
.white-bg {background: #fff}

.green-85 {background: rgba(47,144,74,1)}
.green-75 {background: rgba(47,144,74,0.75)}
.green-70 {background: rgba(47,144,74,0.7)}
.green-65 {background: rgba(47,144,74,0.65)}
.green-50 {background: rgba(47,144,74,0.5)}
.green-35 {background: rgba(47,144,74,0.35)}
.green-20 {background: rgba(47,144,74,0.2)}
.green-10 {background: rgba(47,144,74,0.1)}
.green-5 {background: rgba(47,144,74,0.05)}

.highlight {color: rgb(210,41,28)!important}
.highlight-green {color: rgb(0,107,50)!important}
.highlight-brown {color: #7F6430!important}
.highlight-blue {color: rgb(0,56,116)!important}
.important {color: #f2a513}

.rounded {border-radius: 6px}
.no-radius {border-radius: 0}
.show-mobile {display: none;}

.center-x-y { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.full-height {height: 100%;}
.no-border {border: 0}
.no-margin {margin: 0!important;}
.no-padding {padding: 0!important;}

.relative {position: relative;}

.mt50 {margin-top: 50px;}
.mb50 {margin-bottom: 50px;}
.mt-auto {margin-top: auto;}
.mb-auto {margin-bottom: auto;}
.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}

.sticky {    
	position: sticky;
    background: #fff;
    top: -1px;
    z-index: 11;
    max-width: 100%;padding: 0!important;}
.outercolor.lightbrown-bg .sticky {background: #e6e0d7}
.outercolor.lightgreen-bg .sticky {background: #d1e8db}
.outercolor.lightgreenblue-bg .sticky {background: #d9e1db}
.lightwhite-bg {position: relative;}

.largertypo {font-size: 138%;}

/*------------------------------------------------------------------
MAIN NAVIGATION
-------------------------------------------------------------------*/
#navigation a:hover {text-decoration: none;}
#tierpark-menuitem {-webkit-transition: .25s all ease;transition: .25s all ease;border-radius: 6px}
#tierpark-menuitem div.show-for-large span {background: rgb(0,107,50); -webkit-transition: .25s all ease;
transition: .25s all ease;  }
#tierpark-menuitem div.show-for-large {padding-left: 10px;margin-left: 40px;position: relative;}
#tierpark-menuitem div.show-for-large span, #tropen-aq div.show-for-large span {    
  width: 60px;
    height: 60px;
    position: absolute;
    left: -57px;
    top: -18px;
    background: #006b32;
    border-radius: 60px;
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}
#tierpark-menuitem:hover, #tierpark-menuitem:hover div.show-for-large span, #tropen-aq:hover > a {background: rgb(210,41,28);}    

@media only screen and (min-width: 1024px) {
  #tierpark-menuitem.selected, #tierpark-menuitem.selected div.show-for-large span, #tropen-aq > a.selected, #tropen-aq a.selected div.show-for-large span  {background: rgb(210,41,28);}  
}

#tierpark-menuitem div.show-for-large span img {    
  -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    max-width: 44px;
    margin-top: -3px;
    margin-left: -4px;}

#tropen-aq > a {margin-right: 40px;position: relative;-webkit-transition: .25s all ease;transition: .25s all ease;padding-right: 20px;border-radius: 6px 0 0 6px;background: #103873;}
#tropen-aq div.show-for-large span {    
  width: 60px;
    height: 60px;
    position: absolute;
    left: auto;
    right: -48px;
    top: -13px;
    background: #003874;
    border-radius: 60px;
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .25s all ease;
transition: .25s all ease;  }  
#tropen-aq > a span img {    
  -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
        max-width: 40px;}
#tropen-aq:hover div.show-for-large span {background: rgb(210,41,28);}
.cd-main-content ul, .cd-main-header ul, .cd-nav ul {list-style-type: none;}

.cd-main-content, .cd-main-header {
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.cd-main-content, .cd-main-header {
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.cd-main-header {position: relative;z-index: 99;}
.cd-main-content {
  background: #e2e3df;
  min-height: 100vh;
  z-index: 2;
  display: block;
}

/* Navigation Fix  
.cd-main-header {z-index: 3;position: absolute;left: 0;right: 0;}
.cd-nav {display: block;}*/

.cd-header-buttons {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 8px;
}
.cd-header-buttons li {
  display: inline-block;
}


.cd-nav-trigger {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  white-space: nowrap;
  /* hide text */
  color: transparent;
  z-index: 3;
}

.cd-nav-trigger.nav-is-visible span {
  /* hide line in the center */
  background: rgba(46, 50, 51, 0);
}
.cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
  /* keep visible other 2 lines */
  background: #2e3233;
}
.cd-nav-trigger.nav-is-visible span::before {
  -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
  -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
  transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
  -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
  -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
  transform: translateX(4px) translateY(2px) rotate(-45deg);
}

.cd-primary-nav, .cd-primary-nav ul {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 45vw;
  background: #2e3233;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.cd-primary-nav ul a {
  display: block;
  color: #ffffff;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.cd-primary-nav.hided, .cd-primary-nav ul.hided {

}
.cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a {
  /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.cd-primary-nav .cd-secondary-nav .nav-category {height: 30px;line-height: 30px;}
.cd-primary-nav .cd-secondary-nav .nav-category .nav-category-icon {
    background: #006b32;
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 20px;
    padding: 4px 0;
    margin-right: 5px;
}

.cd-primary-nav .nav-category .nav-category-icon .fa {  
    color: #fff;
}
.cd-primary-nav .nav-category .nav-category-item img {
    background: #006b32;
    border-radius: 30px;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    margin-top: -2px;
}
.cd-primary-nav .cd-secondary-nav .green-bg .nav-category, .cd-primary-nav .cd-secondary-nav .green-bg .nav-category:hover, .cd-primary-nav .cd-secondary-nav .green-bg .nav-category:focus {
  background: #fff; color: #195a2b;    border-radius: 4px;}
.cd-primary-nav .cd-secondary-nav .blue-bg .nav-category, .cd-primary-nav .cd-secondary-nav .blue-bg .nav-category:hover, .cd-primary-nav .cd-secondary-nav .blue-bg .nav-category:focus {
  background: #fff; color: #103873;    border-radius: 4px;padding: 0 15px;position: relative;}  

.cd-primary-nav .cd-secondary-nav .green-bg .nav-category i {color: #1e6a33;}
.cd-primary-nav .green-bg .nav-category .fa {
    font-size: 36px;
    position: relative;
    top: 0;
    padding: 0;
    background: none;
    width: auto;height: auto;
    margin-right: 8px;
    margin-left: 3px;
}
.cd-primary-nav .green-bg {color: #FFF;width: 25%;}
.ta .cd-primary-nav .green-bg strong {color: #fff}
.cd-primary-nav .nav-content {padding-right: 20px;width: 100%;height: 85%;}

.cd-primary-nav .see-all a {
  color: #69aa6f;
}

.cd-primary-nav .cd-nav-icons .cd-nav-item {
  padding-left: 75px;
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
  color: #2e3233;
  font-size: 1.3rem;
  /* hide description on small devices */
  display: none;
}

.cd-secondary-nav .has-children > a, .go-back a {
  position: relative;
}
.cd-secondary-nav .has-children > a::before, .cd-secondary-nav .has-children > a::after, .go-back a::before, .go-back a::after {
  /* arrow icon in CSS - for element with nested unordered lists */
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: inline-block;
  height: 2px;
  width: 10px;
  background: #464c4e;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-secondary-nav .has-children > a::before, .go-back a::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-secondary-nav .has-children > a::after, .go-back a::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.cd-primary-nav .cd-secondary-nav .menu-quick-links a {    
  color: #000;
    text-overflow: initial;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    background: #e6ecf0;
    border-radius: 6px;
    margin: 10px 10px;}

.cd-secondary-nav .has-children > a {
  padding-right: 40px;
}
.cd-secondary-nav .has-children > a::before, .cd-secondary-nav .has-children > a::after {
  /* arrow goes on the right side - children navigation */
  right: 30px;
  -webkit-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
}

.cd-primary-nav .go-back a {
  padding-left: 40px;
}
.cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
  /* arrow goes on the left side - go back button */
  left: 20px;
  -webkit-transform-origin: 1px 50%;
  -ms-transform-origin: 1px 50%;
  transform-origin: 1px 50%;
}


.cd-overlay {
  /* shadow layer visible when navigation is active */
  position: fixed;
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  background-color: rgba(2, 2, 2, 0.3);
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.4s ease 0s, visibility 0s 0.4s ease, -webkit-transform 0.4s ease 0s;
  transition: opacity 0.4s ease 0s, visibility 0s 0.4s ease, transform 0.4s ease 0s;
}
.cd-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.4s ease 0s, visibility 0s 0s, -webkit-transform 0.4s ease 0s;
  transition: opacity 0.4s ease 0s, visibility 0s 0s, transform 0.4s ease 0s;
}
/* -------------------------------- 

support for no js 

-------------------------------- */
.no-js .cd-primary-nav {
  position: relative;
  height: auto;
  width: 100%;
  overflow: visible;
  visibility: visible;
  z-index: 2;
}

.cd-primary-nav .cd-secondary-nav > li.nav-direct-links {border-right: 0;width: 100%;padding: 0;    max-width: 100%;
    margin-left: 25%;
    margin-top: -50px;}
.cd-primary-nav .cd-secondary-nav > li.nav-direct-links .menu-quick-links {width: 100%; height: 50px;background: #e6ecf0;
    border-top: 1px solid #ccc;}

.mobile-nav .nav-direct-links {display: none;}
.mobile-nav > li:first-child {background: rgb(0,107,50);}
.mobile-nav > li:first-child > a, .mobile-nav > li#tropen-aq > a {padding: 13px 20px; display: block;color: #FFF;margin-right: 0;border-radius:0}
.mobile-nav > li:first-child > a i, .mobile-nav > li#tropen-aq > a i {float: right;margin-right: 0;position: relative;top: 6px;}
.mobile-nav.cd-primary-nav .cd-secondary-nav {width: 100%;margin-left: 0;}
#navigation .mobile-nav.cd-primary-nav .cd-secondary-nav a:hover {color: rgb(230,142,36);}
.mobile-nav.cd-primary-nav ul a {padding: 0 40px 0 15px;}
.mobile-nav.cd-primary-nav .go-back a {padding-left: 40px;}

.mobile-nav .cd-secondary-nav .has-children > a::before, .mobile-nav .cd-secondary-nav .has-children > a::after, .mobile-nav .go-back a::before, .mobile-nav .go-back a::after {background: #fff}

.mobile-nav .has-children.green-bg, .mobile-nav .has-children.blue-bg {display: none;}

#navigation .cd-secondary-nav a.button.nav-button {padding: 0;    background: rgb(210,41,28);
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;}
#navigation .cd-secondary-nav a.button.nav-button:hover {padding: 0;background: rgb(210,41,28); color: #fff}



/* ==========================================================================
   HAUPT-NAVIGATION LINKE SEITE
========================================================================== */

/* Words-Rotator */
/* Words-Rotator */
.sentence{
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    text-transform: none;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 2.6;
    margin-bottom: 0;
}
.sentence small {font-weight: 400;color: rgba(255,255,255,0.8);}
.sentence span {color: #FFF;font-size: 138%;text-transform: none;margin-top: -10px;}
.sentence span a {display: inline;}
.sentence i {color: rgba(255,255,255,0.5);
    font-size: 20px;position: relative;
    top: 2px;}
/* Words-Rotator Animations */
.slidingVertical{
  display: block;
  text-indent: 20px;
}
.slidingVertical span{
  animation: topToBottom 17.5s linear infinite 0s;
  -ms-animation: topToBottom 17.5s linear infinite 0s;
  -webkit-animation: topToBottom 17.5s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.slidingVertical span:nth-child(2){
  animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.slidingVertical span:nth-child(3){
  animation-delay: 7s;
  -ms-animation-delay: 7s;
  -webkit-animation-delay: 7s;
}
.slidingVertical span:nth-child(4){
  animation-delay: 10.5s;
  -ms-animation-delay: 10.5s;
  -webkit-animation-delay: 10.5s;
}
.slidingVertical span:nth-child(5){
  animation-delay: 14s;
  -ms-animation-delay: 14s;
  -webkit-animation-delay: 14s;
}

/*topToBottom Animation*/
@keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; transform: translateY(-50px); }
  10% { opacity: 1; transform: translateY(0px); }
  25% { opacity: 1; transform: translateY(0px); }
  30% { opacity: 0; transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform: translateY(-50px); }
  10% { opacity: 1; -webkit-transform: translateY(0px); }
  25% { opacity: 1; -webkit-transform: translateY(0px); }
  30% { opacity: 0; -webkit-transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: translateY(-50px); }
  10% { opacity: 1; -ms-transform: translateY(0px); }
  25% { opacity: 1; -ms-transform: translateY(0px); }
  30% { opacity: 0; -ms-transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/*Horizontal Flip*/
.horizontalFlip{
  display: inline;
  text-indent: 8px;
}
.horizontalFlip span{
  animation: horizontal 17.5s linear infinite 0s;
  -ms-animation: horizontal 17.5s linear infinite 0s;
  -webkit-animation: horizontal 17.5s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.horizontalFlip span:nth-child(2){
  animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.horizontalFlip span:nth-child(3){
  animation-delay: 7s;
  -ms-animation-delay: 7s;
  -webkit-animation-delay: 7s;
}
.horizontalFlip span:nth-child(4){
  animation-delay: 10.5s;
  -ms-animation-delay: 10.5s;
  -webkit-animation-delay: 10.5s;
}
.horizontalFlip span:nth-child(5){
  animation-delay: 14s;
  -ms-animation-delay: 14s;
  -webkit-animation-delay: 14s;
}

/*Horizontal Flip Animation*/
@keyframes horizontal{
  0% { opacity: 0; }
  5% { opacity: 0; transform: rotateY(180deg); }
  10% { opacity: 1; transform: translateX(0px); }
  25% { opacity: 1; transform: translateX(0px); }
  30% { opacity: 0; transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0;}
}
@-webkit-keyframes horizontal{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform: rotateY(180deg); }
  10% { opacity: 1; -webkit-transform: translateX(0px); }
  25% { opacity: 1; -webkit-transform: translateX(0px); }
  30% { opacity: 0; -webkit-transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes horizontal{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: rotateY(180deg); }
  10% { opacity: 1; -ms-transform: translateX(0px); }
  25% { opacity: 1; -ms-transform: translateX(0px); }
  30% { opacity: 0; -ms-transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}


/*Pop Effect*/
.popEffect{
  display: inline;
  text-indent: 8px;
}
.popEffect span{
  animation: pop 20s linear infinite 0s;
  -ms-animation: pop 20s linear infinite 0s;
  -webkit-animation: pop 20s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.popEffect span:nth-child(2){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.popEffect span:nth-child(3){
  animation-delay: 8s;
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
.popEffect span:nth-child(4){
  animation-delay: 12s;
  -ms-animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
.popEffect span:nth-child(5){
  animation-delay: 16s;
  -ms-animation-delay: 16s;
  -webkit-animation-delay: 16s;
}

/*Pop Effect Animation*/
@keyframes pop{
  0% { opacity: 0; }
  5% { opacity: 0; transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
  10% { opacity: 1; transform: translateY(0px); }
  25% { opacity: 1; transform: translateY(0px); }
  30% { opacity: 0; transform: translateY(0px); }
  80% { opacity: 0; }
  100% { opacity: 0;}
}
@-webkit-keyframes pop{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
  10% { opacity: 1; -webkit-transform: translateY(0px); }
  25% { opacity: 1; -webkit-transform: translateY(0px); }
  30% { opacity: 0; -webkit-transform: translateY(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes pop{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
  10% { opacity: 1; -ms-transform: translateY(0px); }
  25% { opacity: 1; -ms-transform: translateY(0px); }
  30% { opacity: 0; -ms-transform: translateY(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/*Push Effect*/
.pushEffect{
  display: inline;
  text-indent: 8px;
}
.pushEffect span{
  animation: push 20s linear infinite 0.1s;
  -ms-animation: push 20s linear infinite 0.1s;
  -webkit-animation: push 20s linear infinite 0.1s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.pushEffect span:nth-child(2){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.pushEffect span:nth-child(3){
  animation-delay: 8s;
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
.pushEffect span:nth-child(4){
  animation-delay: 12s;
  -ms-animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
.pushEffect span:nth-child(5){
  animation-delay: 16s;
  -ms-animation-delay: 16s;
  -webkit-animation-delay: 16s;
}

/*Push Effect Animation*/
@keyframes push{
  0% { opacity: 0; }
  5% { opacity: 0; transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
  10% { opacity: 1; transform: translateX(0px); }
  25% { opacity: 1; transform: translateX(0px); }
  30% { opacity: 0; transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0;}
}
@-webkit-keyframes push{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px);}
    10% { opacity: 1; -webkit-transform: translateX(0px); }
  25% { opacity: 1; -webkit-transform: translateX(0px); }
  30% { opacity: 0; -webkit-transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes push{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
  10% { opacity: 1; -ms-transform: translateX(0px); }
  25% { opacity: 1; -ms-transform: translateX(0px); }
  30% { opacity: 0; -ms-transform: translateX(0px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.slidingHorizontal span{
  animation: leftToRight 17.5s linear infinite 0s;
  -ms-animation: leftToRight 17.5s linear infinite 0s;
  -webkit-animation: leftToRight 17.5s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.slidingHorizontal span:nth-child(2){
  animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.slidingHorizontal span:nth-child(3){
  animation-delay: 7s;
  -ms-animation-delay: 7s;
  -webkit-animation-delay: 7s;
}
.slidingHorizontal span:nth-child(4){
  animation-delay: 10.5s;
  -ms-animation-delay: 10.5s;
  -webkit-animation-delay: 10.5s;
}
.slidingHorizontal span:nth-child(5){
  animation-delay: 14s;
  -ms-animation-delay: 14s;
  -webkit-animation-delay: 14s;
}
.slidingHorizontal i:first-child {    
    left: 0;
    color: #f2a513;
    position: absolute;
    top: 9px;
    font-size: 22px;}

/*leftToRight Animation*/
@keyframes leftToRight{
  0% { opacity: 0; }
  5% { opacity: 0; transform: translateX(-50px); }
  10% { opacity: 1; transform: translateX(0px); }
  25% { opacity: 1; transform: translateX(0px); }
  30% { opacity: 0; transform: translateX(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes leftToRight{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform: translateX(-50px); }
  10% { opacity: 1; -webkit-transform: translateX(0px); }
  25% { opacity: 1; -webkit-transform: translateX(0px); }
  30% { opacity: 0; -webkit-transform: translateX(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes leftToRight{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: translateX(-50px); }
  10% { opacity: 1; -ms-transform: translateX(0px); }
  25% { opacity: 1; -ms-transform: translateX(0px); }
  30% { opacity: 0; -ms-transform: translateX(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

.contact-details .follow {
  display: inline-block;
  cursor: default;
  padding: 0;
  margin: 0;
  position: relative;
  text-align: center;
  top: 2px;
}
.contact-details .follow:hover .label {
  opacity: 0;
  -webkit-transition: opacity .5s .125s ease-out;
  transition: opacity .5s .125s ease-out;
}
.contact-details .follow:hover .icon {
  border-radius: 1em;
  margin: 0 4px 0 0;
}
#tropen-aq .contact-details p, #tropen-aq .contact-details p strong {color: #fff}
.nav-content .contact-details {margin-top: 0;padding: 0 15px;}
.nav-content .contact-details p {font-weight: 400;font-size: 0.93rem;margin: 0 0 0.5rem;}
.nav-content .contact-details p a {text-decoration: underline;}
.nav-content .contact-details .icon, .nav-content .contact-details .label {
  background-color: #fff;
  line-height: 2rem;
  margin: 0 auto;
}

.nav-content .contact-details .label {
  border-radius: 1rem;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  pointer-events: none;
  -webkit-transition: opacity .5s .75s ease-out;
  transition: opacity .5s .75s ease-out;
  color: #000;
}

.nav-content .contact-details .icon {
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  height: 2em;
  margin: 0 -.5em;
  -webkit-transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out,  width .5s .25s ease-out;
  transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out,  width .5s .25s ease-out;
  width: 4em;
  color: #000;
}
.nav-content .contact-details .icon.first {
  border-bottom-left-radius: 1em;
  border-top-left-radius: 1em;
  margin-left: 0;
  width:  2em;
}
.nav-content .contact-details .icon:not(.first) {border-radius: 0 20px 20px 0}
.nav-content .contact-details .follow:hover .icon:not(.first) {width:2em; border-radius: 20px}
.nav-content .contact-details .icon.last {
  border-bottom-right-radius: 1em;
  border-top-right-radius: 1em;
  margin-right: 0;
  
}
.nav-content .contact-details .icon:hover, .nav-content .contact-details .icon-lg:hover {
  background-color: rgb(210,41,28);
  color: #fff;
}

.nav-content .contact-details button {
  -webkit-appearance: none;
          appearance: none;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  color: #000;
  font-family: inherit;
  position: relative;
  text-transform: uppercase;
  -webkit-transition: background-color .25s ease-out, -webkit-transform .5s ease-out;
  transition: background-color .25s ease-out, -webkit-transform .5s ease-out;
  transition: background-color .25s ease-out, transform .5s ease-out;
  transition: background-color .25s ease-out, transform .5s ease-out, -webkit-transform .5s ease-out;
  cursor: pointer
}

.nav-content .contact-details p span {display: inline-block;width: 20px;float: left;height: 30px;}

.icon-lg {vertical-align: middle;}
.icon-lg {
  height: 2rem;
  width: 2rem;
  margin: 5px 5px 5px 0;
}
.icon-lg .text {
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
  -webkit-transform: scale(1);
          transform: scale(1);
}


/* TA Navigation Anpassungen */
/* TA Navigation Anpassungen */
/* TA Navigation Anpassungen */
.cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-icons {right: -170px;}
.cd-primary-nav #tropen-aq .cd-secondary-nav {box-shadow: none; margin-left: 0;}
.cd-primary-nav #tropen-aq .cd-secondary-nav > li a {color: #333}
.cd-primary-nav #tropen-aq .cd-secondary-nav > li a:hover {color: #113874}
.cd-primary-nav #tropen-aq .cd-secondary-nav > li {border-right: none}
/*.cd-primary-nav #tropen-aq .nav-category {background: rgba(0, 0, 0, 0.45)}*/
.cd-primary-nav #tropen-aq .nav-category .fa {background: #113874;}
.cd-primary-nav #tropen-aq .nav-category img {background: none;width: 43px;height: auto}
.cd-primary-nav > li {margin-right: 11px;}
.cd-primary-nav > li > a {border-radius: 6px}

.cd-primary-nav > li:nth-child(2) {margin-right: 0;}
.cd-primary-nav > li:nth-child(2) a  { border-radius: 6px 0 0 6px;}
.cd-primary-nav > li:nth-child(3) a  { border-radius: 0 6px 6px 0;border-left: 1px solid #ccc;}


.besucher-infos{position: relative;margin: 0;}
.besucher-infos a {height: auto!important; line-height: auto!important;padding: 0!important;-webkit-transition: .25s all ease;transition: .25s all ease;  }
.besucher-infos a::after {display: none!important;}
.besucher-infos a:hover i, .besucher-infos a:focus i, .besucher-infos a:hover span, .besucher-infos a:focus span {color: #d42b1d}
.besucher-infos a:hover .slidingHorizontal, .besucher-infos a:focus .slidingHorizontal {background: #fff}
.besucher-infos .o-zeiten {
    color: #333;
    padding: 5px 1px 5px 0;
    position: relative;
    line-height: 16px;
    font-size: 12px;
    letter-spacing: 0.4px;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    text-align: left;
}
.besucher-infos .o-zeiten.tp {margin-top: 5px;margin-bottom: 10px;}
.besucher-infos .o-zeiten span.circle {
   
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: #006b32;
    border-radius: 20px;
    margin: 0 6px 0 0;
    border: 4px solid #FFF;
}
.besucher-infos .o-zeiten span.offen, .besucher-infos .o-zeiten span.closed, .besucher-infos .o-zeiten span.schliesstbald, .besucher-infos .o-zeiten span.highlight-green {
        background: #fff;
    display: inline-block;
    width: auto;
    height: 100%;
    text-align: center;
    color: #006b32;
    border-radius: 6px;
    font-weight: 700;
    margin-left: auto;
    min-width: 50px;
    position: relative;
    right: 5px;
    line-height: 16px;
    padding: 2px 8px;
    text-transform: none;
    font-size: 12px;
}
.besucher-infos .o-zeiten span.closed {color: var(--main-color-red)}
.besucher-infos .o-zeiten span.schliesstbald {color: #F2A513!important}

.besucher-infos .o-zeiten span.offen.geschlossen {background: #d32a1c;}
.besucher-infos .o-zeiten.ta span.circle {background: #103873;}

.besucher-infos a.button {
    background: var(--main-color-red);
    color: #fff!important;
    border-radius: 20px;
    padding: 2px 12px 4px!important;
    font-size: 0.9rem!important;
    display: inline-block!important;
    line-height: inherit!important;
    align-self: flex-start;
    position: relative!important;
    top: 10px!important;
}
.besucher-infos a.button:hover {background: #fff;}
.besucher-infos a.button i {font-weight: bold;}
.besucher-infos a:hover span {color: #2b6a2d}

#tropen-aq .besucher-infos .sentence span a {color: #fff}

@media only screen and (min-width: 1024px) {
  .cd-main-header::after {
    clear: both;
    content: "";
    display: table;
  }
  .cd-main-content {display: none;}
  .no-js .cd-primary-nav {
    position: absolute;
    z-index: 3;
    display: inline-block;
    width: auto;
    top: 0;
    right: 150px;
    padding: 0;
  }

  .cd-header-buttons {
    top: 18px;
    right: 4rem;
  }

  .cd-nav-trigger {
    display: none;
  }

    .cd-primary-nav {
      position: static;
      padding: 0;
      height: auto;
      width: auto;
      float: right;
      overflow: visible;
      background: transparent;
      margin: 0;
    }
    .cd-primary-nav::after {
      clear: both;
      content: "";
      display: table;
    }
    .cd-primary-nav.moves-out > li > a {
      /* reset mobile style */
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    .cd-primary-nav ul {
      position: static;
      height: auto;
      width: auto;
      background: transparent;
      overflow: visible;
      z-index: 100;
      margin: 0;
    }
    .cd-primary-nav ul.hided {
      min-height: 85%;
    }
    .cd-primary-nav ul.moves-out > li > a {
      /* reset mobile style */
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }


    .cd-primary-nav > .has-children > a {
        padding-right: 35px !important;
    }
    .cd-primary-nav > li {
        float: left;
    }
    .cd-primary-nav > li.last-item a {border-radius: 0 6px 6px 0}
    .cd-primary-nav > li > a {
        position: relative;
        display: inline-block;
        padding: 6px 12px 7px;
        background-color: #006b32;
        color: #fefefe;
        border-radius: 0;
        overflow: visible;
        border-bottom: none;
        -webkit-transition: color 0.3s, box-shadow 0.3s;
        transition: color 0.3s, box-shadow 0.3s;
        font-size: 0.93rem;
    }
    .cd-primary-nav > li > a:hover {background-color: var(--main-color-red)}
    

    .has-children > a::after, .go-back a::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .has-children > a::before, .go-back a::before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -1px;
        display: inline-block;
        height: 2px;
        width: 10px;
        background: #464c4e;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
        background: #c9cbc4;
    }
    .has-children > a::before, .has-children > a::after {
        right: 20px;
        -webkit-transform-origin: 9px 50%;
        -ms-transform-origin: 9px 50%;
        transform-origin: 9px 50%;
    }
    .has-children > a::before, .has-children > a::after {
        right: 15%;
    }

    .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after {
        width: 9px;
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        background: #fff;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
        transition: width 0.3s, transform 0.3s;
    }

    .cd-primary-nav > .has-children > a::before {
        right: 17px;
    }
    .cd-primary-nav > .has-children > a::after {
        right: 12px;
    }

    .cd-primary-nav > .has-children > a.selected::after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .cd-primary-nav > .has-children > a.selected::before {
        -webkit-transform: translateX(5px) rotate(-45deg);
        -ms-transform: translateX(5px) rotate(-45deg);
        transform: translateX(5px) rotate(-45deg);
    }
    .cd-primary-nav > .has-children > a.selected::before, .cd-primary-nav > .has-children > a.selected::after {
        width: 14px;
    }

    .cd-primary-nav .go-back, .cd-primary-nav .see-all {
      display: none;
    }
    .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-icons {
      /* dropdown menu style */
      position: absolute;
      top: 80px;
      width: 96.5vw;
      background: #E6ECF0;
      padding: 0px;
      box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05);
      -webkit-transition: opacity .3s 0s, visibility 0s 0s;
      transition: opacity .3s 0s, visibility 0s 0s;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
          border-radius: 6px;
      overflow: hidden;
          max-width: 1400px;
          right: -165px;
      left: auto;    
    }
    .cd-primary-nav .cd-secondary-nav {background: #E6ECF0 url('../img/grafiken/navi-illu.png') no-repeat bottom right;background-size: 45%;}
    .cd-primary-nav #tropen-aq .cd-secondary-nav {background: #E6ECF0 url('../img/grafiken/navi-illu-ta.png') no-repeat bottom right;background-size: 45%;}

    #tropen-aq .cd-secondary-nav, .cd-primary-nav .cd-nav-icons {background: #E6ECF0;}

    .cd-primary-nav .cd-secondary-nav::after, .cd-primary-nav .cd-nav-icons::after {
      clear: both;
      content: "";
      display: table;
    }
    .cd-primary-nav .cd-secondary-nav.hided, .cd-primary-nav .cd-nav-icons.hided {
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity .3s 0s, visibility 0s .3s;
      transition: opacity .3s 0s, visibility 0s .3s;
    }
    .cd-primary-nav .cd-secondary-nav > li {
      padding: 1.5rem;
      padding-right: 0;
      -webkit-overflow-scrolling: touch;
      -webkit-flex: 1 1 auto; /* Safari 6.1+ */
      -ms-flex: 1 1 auto; /* IE 10 */ 
      flex: 1 1 auto;
      width: 25%;
      border: 1px solid #fff;
      border-bottom: 0;
      border-right: 0;
      /* Prevent scroll bar on more than 6 list items */
      overflow: hidden;
      position: relative;
    }
    .cd-primary-nav .cd-secondary-nav > li:nth-child(1) {border: 0}
    .cd-primary-nav .cd-secondary-nav > li:nth-child(2) {border-top: 0;border-left: 0}
    .cd-primary-nav .cd-secondary-nav > li:nth-child(3), .cd-primary-nav .cd-secondary-nav > li:nth-child(4), .cd-primary-nav .cd-secondary-nav > li:nth-child(5) {border-top: 0}
    .cd-primary-nav .cd-secondary-nav > li:nth-child(6) {border-top: 0;border-left: 0;background: #2d8656}
    .cd-primary-nav #tropen-aq .cd-secondary-nav > li:nth-child(6) {background: rgb(0, 39, 81);}
    .cd-primary-nav .cd-secondary-nav > li:nth-child(9) {border-left: 0;}

    .cd-primary-nav .cd-secondary-nav > li:nth-child(9) a {display: none;}

    
    .cd-primary-nav .cd-secondary-nav > li:nth-child(4n+2) {
      /* +2 because we have 2 list items with display:none */
      margin-right: 0;
      border-right: none;
      border-bottom: none
    }

    .cd-primary-nav .cd-secondary-nav > li > a {
      /* secondary nav title */
      color: #1e6a33;
      font-weight: 700;
      margin-bottom: .6rem;
      cursor: default;
      display: flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      font-size: 1rem;
      background:rgba(253,253,253,0.5);
      font-family: 'Averia Libre', sans-serif;
/*  
    background: -webkit-linear-gradient(left, rgba(253,253,253,0.65), #e6ecf0);
    background: -ms-linear-gradient(top, rgba(253,253,253,0.65), #e6ecf0);
    background: linear-gradient(top, rgba(253,253,253,0.65), #e6ecf0);*/
    }

    .cd-primary-nav .cd-secondary-nav a {
      height: 36px;
      line-height: 36px;
      padding: 0;
      color: #333;
      border-bottom: none;
      font-size: 0.93rem;
      overflow: visible;
    }
    
    .cd-primary-nav .cd-secondary-nav a:hover {
      color: #006b32;
    }
    /* .cd-primary-nav .cd-secondary-nav ul > li:not(.has-children) a::before, .cd-primary-nav .cd-secondary-nav ul > li:not(.go-back) a::before {content:"\00B7";font-size:20px;top: -2px;position: absolute;transition: 0.3s ease;opacity: 0;left: -20px;}
    .cd-primary-nav .cd-secondary-nav ul > li:not(.has-children) a:hover::before, .cd-primary-nav .cd-secondary-nav ul > li:not(.go-back) a:hover::before {left: -10px;opacity: 1;} */
    
    .cd-primary-nav .cd-secondary-nav a .nav-category-item {
      flex: 0 0 auto;
      -webkit-box-flex: 0 0 auto; 
      -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto; 
      margin-top: -5px;}
    /*.cd-primary-nav .cd-secondary-nav a[href$=".htm"]::after, .cd-primary-nav .cd-secondary-nav a[href$=".php"]::after {    
      content: "";
      width: 2px;
      height: 2px;
      background:#fff;
      position: absolute;
      top: 16px;
      margin-left: 8px;
      border-radius: 20px;}*/
    .cd-primary-nav .nav-category {
      border-radius: 20px 6px 6px 20px;
      width: 93%;}
    .cd-primary-nav .nav-animal.giraffe {    
    position: absolute;
    bottom: 20px;
    right: 20px;
    top: auto;
    /* Temporär */
    display: none;}
    
    .cd-primary-nav .nav-category .fa {
      background: #006b32;
    color: #fff;
    width: 42px;
    height: 42px;
    text-align: center;
    border-radius: 22px;
    padding: 11px 5px;
    margin-right: 8px;
    top: 0;
    align-self: center;
    position: relative;
    font-size: 20px;}

    .cd-primary-nav .cd-secondary-nav > li:nth-child(2) a, .cd-primary-nav .cd-secondary-nav > li:nth-child(6) a {
      color: #FFF;padding: 0 15px;position: relative;}
    .cd-primary-nav .cd-secondary-nav ul {
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      width: 100%;    
      overflow: hidden;
      padding-left: 15px;
    }
    .cd-primary-nav .cd-secondary-nav li.green-bg ul {padding-left: 0;}
    .cd-primary-nav .cd-secondary-nav ul ul {
      /* tertiary navigation */
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
    }
    

    .cd-primary-nav .cd-secondary-nav ul ul.hided {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    .cd-primary-nav .cd-secondary-nav ul ul .go-back {
      display: block;
    }
    .cd-primary-nav .cd-secondary-nav ul ul .go-back a {
      color: #006b32;
    }
    .cd-primary-nav .cd-secondary-nav ul ul .see-all {
      display: block;
    }
    .cd-primary-nav .cd-secondary-nav .moves-out > li > a {
      /* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    #navigation .cd-primary-nav .cd-secondary-nav .button {margin: 10px;}
    
    .cd-primary-nav .cd-nav-icons li {
      /* set here number of columns - use width percentage */
      width: 32%;
      float: left;
      margin: 0 2% 20px 0;
    }
    .cd-primary-nav .cd-nav-icons li:nth-child(3n+2) {
      /* +2 because we have two additional list items with display:none */
      margin-right: 0;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item {
      border-bottom: none;
      height: 80px;
      line-height: 1.2;
      padding: 24px 0 0 85px;
      position: relative;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
      background: #f6f6f5;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
      color: #69aa6f;
      font-weight: bold;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item p {
      display: block;
    }
    .cd-primary-nav .cd-nav-icons .cd-nav-item::before {
      left: 25px;
    }

    .cd-secondary-nav .has-children > a::before, .cd-secondary-nav .has-children > a::after, .go-back a::before, .go-back a::after {
      background: #006b32;
    }
    .cd-secondary-nav .has-children > a:hover::before, .cd-secondary-nav .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after {
      background: rgb(0,0,0);
    }
    
    .cd-secondary-nav > .has-children > a::before, .cd-secondary-nav > .has-children > a::after {
      /* remove arrows on secondary nav titles */
      display: none;
    }

    .cd-primary-nav .go-back a {
      padding-left: 20px;
    }
    .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after {
      left: 1px;
    }

  .no-js .nav-is-fixed .cd-primary-nav {
    position: fixed;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1080px) {
  .cd-primary-nav .cd-secondary-nav > li > a {font-size: 0.85rem;}
}
@media only screen and (max-width: 1023px) {
    .cd-primary-nav.hided, .cd-primary-nav ul.hided {
    /* secondary navigations hidden by default */
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(-45vw);
    -ms-transform: translateX(-45vw);

    transform: translateX(-45vw);
  }
  .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(45vw);
    -ms-transform: translateX(45vw);

    transform: translateX(45vw);
  }
  .nav-is-fixed .cd-main-header {
  /* add .nav-is-fixed class to body if you want a fixed navigation on > 1024px */
    position: absolute;
    top: 67px;
    right: 25px;}
  #navigation > div {height: 42px;} 

  .nav-on-left .cd-header-buttons {
    right: auto;
    left: 5%;
  }
  .nav-on-left .cd-header-buttons li {
    float: right;
  }

  .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul {
    right: auto;
    left: 0;
  }

  .cd-primary-nav {
    /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */
    visibility: hidden;
    -webkit-transition: visibility 0s 0.4s ease;
    transition: visibility 0s 0.4s ease;  
  }
  .cd-primary-nav.nav-is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
  }
  .cd-primary-nav {right: -45vw;-webkit-transition: .4s all ease;transition: .4s all ease;  }
  .cd-primary-nav.nav-is-visible {right: 0;-webkit-transition: .4s all ease;transition: .4s all ease;}
  .cd-primary-nav > li, #tierpark-menuitem {margin-right: 0;border-radius:0;font-family: 'Averia Libre', sans-serif;}
  .cd-primary-nav > li:nth-child(2), .cd-primary-nav > li:nth-child(3) {display: none;}


  .cd-overlay {background-color: rgba(0, 0, 0, 0.5);z-index: 0;}
  .cd-overlay.is-visible {
    -webkit-transform: translateX(-45vw);
    -ms-transform: translateX(-45vw);

    transform: translateX(-45vw);
  }
  .nav-on-left .cd-overlay.is-visible {
    -webkit-transform: translateX(45vw);
    -ms-transform: translateX(45vw);

    transform: translateX(45vw);
  }
  .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);

    transform: translateX(0);
  }
  #navigation .cd-primary-nav > li {margin-right: 0;}
}

@media only screen and (max-width: 1240px) {
  .cd-primary-nav .cd-secondary-nav {right: -15px;}
}
@media only screen and (max-width: 1180px) {
  .cd-primary-nav .cd-secondary-nav {right: 0;}
}
@media only screen and (max-width: 1023px) {

  .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-icons {right: 0;}
  .cd-secondary-nav .button {margin: 5px 15px;}
  .cd-primary-nav .cd-secondary-nav > li > a {background: none; color: #fff; padding-left: 1rem;}
  .cd-primary-nav .cd-secondary-nav > li:nth-child(3), .cd-primary-nav .cd-secondary-nav ul > li:nth-child(2), .cd-primary-nav #tropen-aq .cd-secondary-nav > li:nth-child(3), .cd-primary-nav #tropen-aq .cd-secondary-nav ul > li:nth-child(2) {padding-top: 22px;}
  
  .cd-primary-nav .cd-secondary-nav > li:last-child .nav-category {display: none;}
  .cd-primary-nav #tropen-aq .cd-secondary-nav > li:last-child .nav-category {display: block;}
  .cd-primary-nav .cd-secondary-nav .nav-category {height: 50px;line-height: 50px;}
  
  .cd-primary-nav .cd-secondary-nav > li:nth-child(9) a {display: none;}
  

  .mobile-nav.cd-primary-nav ul a {padding: 0 30px 0 15px;font-family: 'Averia Libre', sans-serif;}
  .mobile-nav.cd-primary-nav .cd-secondary-nav, .mobile-nav.cd-primary-nav .cd-secondary-nav ul {
    width: 100%;
    margin-left: 0;
    background: #333 url('/img/interface/papierkante_oben_green.png') no-repeat center 50px;
    background-size: 200vw;}
  .mobile-nav.cd-primary-nav #tropen-aq .cd-secondary-nav, .mobile-nav.cd-primary-nav #tropen-aq .cd-secondary-nav ul {
    background: #333 url('/img/interface/papierkante_oben_blue.png') no-repeat center 50px;}  
  .mobile-nav.cd-primary-nav .cd-secondary-nav li:nth-child(n+2) {margin: 10px 0}
  .mobile-nav.cd-primary-nav .go-back a {padding-left: 40px;background: var(--main-color-green);}
  .mobile-nav.cd-primary-nav #tropen-aq .go-back a {background: var(--main-color-blue);}

  .cd-secondary-nav .has-children > a::before, .cd-secondary-nav .has-children > a::after {right: 15px;}

  .mobile-nav.cd-primary-nav .cd-secondary-nav.moves-out ul li a {padding-left: 39px;}

  .mobile-quick-infos {padding: 20px 5px 20px 10px;background: #e6ecf0;height: calc(100vh - 110px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
        -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;}
  .mobile-quick-infos .info-field {font-size: 80%;margin-top: 25px;} 
  .mobile-quick-infos .info-field:first-child {margin-top: 0;}
  .mobile-quick-infos .info-field p {margin-bottom: 0;font-weight: 400;}

  .cd-primary-nav.moves-out .mobile-quick-infos {transform: translateX(-50%);}
  .mobile-quick-infos {transform: translateX(0);transition: 0.3s ease;}

  .mobile-social-icons {
        margin-top: auto;
    padding-top: 10px;
    background: #fff;
    padding: 3px 15px 0;
    margin-right: 6px;
    border-radius: 10px;
  }
  .mobile-social-icons span {margin-right: 10px;}
  .mobile-social-icons span:first-child {margin-right: 10px;}
  .mobile-social-icons span:last-child {margin-right: 0;}
  .mobile-social-icons span a {font-size: 40px;}  
  .mobile-social-icons span a[href^="https:"]::after {display: none;}
  .mobile-social-icons span a .fa-youtube-square {color: #e90000 }
  .mobile-social-icons span a .fa-facebook-square {color: #4267b2}

  .cd-primary-nav #tropen-aq .cd-secondary-nav > li a {color: #fff}
  .mobile-quick-infos table.nostyle tbody th, .mobile-quick-infos table.nostyle tbody td {padding: 0.15rem 0rem 0.15rem;}
  

  .cd-header-buttons {right: 0;}

  .sentence span {    
    color: rgb(230,142,36);
      white-space: nowrap;
      left: 32px;
      line-height: 28px;
      font-size: 12px;
      letter-spacing: 0.2px;
      font-weight: 600;margin-top: 6px;}
  .sentence strong {color: #FFF;}
  /* Animation */
  .slidingHorizontal{
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    font-size: 18px;
    line-height: 36px;
    position: relative;
    overflow: hidden;
  }

  .nav-animal {display: none;}
}
@media screen and (max-width: 719px) { 
  .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(-75vw);
    -ms-transform: translateX(-75vw);

    transform: translateX(-75vw);
  }
  .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(70vw);
    -ms-transform: translateX(70vw);

    transform: translateX(70vw);
  }
  .cd-primary-nav {right: -70vw;}
  .cd-primary-nav, .cd-primary-nav ul {width: 70vw;}

  .cd-overlay.is-visible {
    -webkit-transform: translateX(-60vw);
    -ms-transform: translateX(-60vw);

    transform: translateX(-60vw);
  }
  .nav-on-left .cd-overlay.is-visible {
    -webkit-transform: translateX(70vw);
    -ms-transform: translateX(70vw);

    transform: translateX(70vw);
  }
}
/* ==========================================================================
5. HEADER & NAV
========================================================================== */
nav {display: inline-block;}
#logo {padding: 0;}
#logo img {max-width: 300px;width: 100%;height: auto;min-width: 140px;}
#meta-nav {border-left: 1px solid #95989A;font-size: 0.9rem;}
.ta #meta-nav a {color: var(--main-color-blue)}
#meta-nav ul {padding: 0;margin: 0;}
#meta-nav ul li {list-style-type: none;}
#meta-nav a i {transition: .25s all ease;}
#meta-nav ul li:last-child > a:hover {text-decoration: none;}
#meta-nav a:hover {color:rgb(210,41,28)}
#meta-nav a:hover i {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
#meta-nav a[target="_blank"]::after {font-size: 0.8rem;margin-left: 0;padding: 1px 3px 2px 4px;border-radius: 3px;
    color: #006b32;}    
.ta #meta-nav a[target="_blank"]::after {color: var(--main-color-blue)}    

#navigation > div:first-child {z-index: 2;}
#navigation > div {line-height: 0;margin-left: 0.9375rem;}
#navigation .button-group, #navigation .button {margin-bottom: 0;}
#navigation .button-group .button {border-radius: 0;font-size: 0.93rem;padding: 0.7em 1em;}
#navigation .button-group .button:first-child {border-radius: 6px 0 0 6px}
#navigation .button-group .button:last-child {border-radius: 0 6px 6px 0;}
#search a {padding: 5px;font-size: 24px;min-width: 44px;}

.button:hover, .button:focus, .button-group.primary .button:hover, .button-group.primary .button:focus, #search a:hover {background: rgb(210,41,28);}


/* Trigger Navigation */
.navTrigger { cursor: pointer; width: 50px; height: 40px; margin: auto; padding: 10px 11px; background-color: rgb(0, 107, 50); border-radius: 6px; -webkit-transition: .25s all ease; transition: .25s all ease; }
.navTrigger:hover { background: rgb(230, 142, 36) }
.navTrigger i { background-color: #fff; border-radius: 2px; content: ''; display: block; width: 100%; height: 4px; }
.navTrigger i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; }
.navTrigger i:nth-child(2) { margin: 5px 0; -webkit-animation: outM 0.8s backwards; animation: outM 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; }
.navTrigger i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; }
a.selected .navTrigger, .nav-is-visible .navTrigger { background: rgb(210, 41, 28); -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
a.selected .navTrigger i:nth-child(1), .nav-is-visible .navTrigger i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; }
a.selected .navTrigger i:nth-child(2), .nav-is-visible .navTrigger i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; }
a.selected .navTrigger i:nth-child(3), .nav-is-visible .navTrigger i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; }
@-webkit-keyframes inM {
  50% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(45deg); }
}
@keyframes inM {
  50% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}
@-webkit-keyframes outM {
  50% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(45deg); }
}
@keyframes outM {
  50% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}
@-webkit-keyframes inT {
  0% { -webkit-transform: translateY(0px) rotate(0deg); }
  50% { -webkit-transform: translateY(9px) rotate(0deg); }
  100% { -webkit-transform: translateY(9px) rotate(135deg); }
}
@keyframes inT {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(9px) rotate(0deg); }
  100% { transform: translateY(9px) rotate(135deg); }
}
@-webkit-keyframes outT {
  0% { -webkit-transform: translateY(0px) rotate(0deg); }
  50% { -webkit-transform: translateY(9px) rotate(0deg); }
  100% { -webkit-transform: translateY(9px) rotate(135deg); }
}
@keyframes outT {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(9px) rotate(0deg); }
  100% { transform: translateY(9px) rotate(135deg); }
}
@-webkit-keyframes inBtm {
  0% { -webkit-transform: translateY(0px) rotate(0deg); }
  50% { -webkit-transform: translateY(-9px) rotate(0deg); }
  100% { -webkit-transform: translateY(-9px) rotate(135deg); }
}
@keyframes inBtm {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(0deg); }
  100% { transform: translateY(-9px) rotate(135deg); }
}
@-webkit-keyframes outBtm {
  0% { -webkit-transform: translateY(0px) rotate(0deg); }
  50% { -webkit-transform: translateY(-9px) rotate(0deg); }
  100% { -webkit-transform: translateY(-9px) rotate(135deg); }
}
@keyframes outBtm {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(0deg); }
  100% { transform: translateY(-9px) rotate(135deg); }
}
.mini-dropdown { background: #E6ECF0; border-radius: 4px; padding: 1px 7px 0; display: inline-block; color: rgb(210, 41, 28); font-weight: 700; font-family: 'Averia Libre', sans-serif }
.mini-dropdown i { color: rgb(0, 107, 50); margin-left: 3px; }
.dropdown-pane { width: auto; padding: 0.5rem 1rem; border-radius: 4px }

/* Sub Page Header */
.header-container { width: 100%; min-width: 280px; margin-bottom: 10px; }
.header-container .right, .header-container .left { background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #e6ecf0; }
.header-container .left { padding: 2em; background: #1e6934; }
.header-container .left .inner { position: relative; margin: auto; padding: 0; }
#teaser .left .inner h1 { text-align: center; text-shadow: none; font-size: 4rem; }
@media only screen and (min-width:800px) {
  .header-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 30vh; }
  .header-container .left, .header-container .right { -webkit-box-flex: 1; -ms-flex: 1 1 62%; flex: 1 1 62%; width: 62%; position: relative; background-size: cover; }
  .header-container .right img { -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; }
  .header-container .left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 38%; -ms-flex: 1 1 38%; flex: 1 1 38%; }
}
.bread-crumbs { position: relative; z-index: 1; }
.bread-crumbs .headline-icon { position: absolute; left: 50%; margin-left: -27px; top: -68px; }
.header-container.sub-teaser .bread-crumbs { background: #E8E4DB; }
.page-headline.sticky .papier-unten-aussen { top: 0; bottom: auto; z-index: 1; margin-top: 12.75rem; }
.ripped-paper { background: url(../img/grafiken/ripped-paper.png) top center no-repeat; padding-bottom: 60px; position: relative; z-index: 1; margin-top: -40px; background-size: 100%; margin-top: -45px; margin-bottom: 30px; background-size: 100% }
.go-top { position: fixed; bottom: 10px; opacity: 0.3; right: -100px; text-decoration: none; color: white; background-color: #d32a1c;  font-size: 16px; padding: 0.8rem 1rem; z-index: 100; border-radius: 40px; -webkit-transition: all 0.3s ease 0.3s; transition: all 0.3s ease 0.3s; }
.ta .go-top {color: #fff}
.go-top:hover, .go-top:focus { background-color: rgba(0, 0, 0, 0.6); color: #fff }
.go-top.active { right: 12px; opacity: 1; }
.off-canvas-active .go-top { bottom: 90px; right: 30px; }

/* Smart Search */
#search { position: relative; z-index: 5; width: 56px; height: 38px; }
.searching #search { z-index: 2; }
.search-wrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; }
.search-wrapper.active { transform: translate(0%, -31px); position: absolute; top: 50%; right: 60px; z-index: 5; transition: all 0.3s ease-in-out }
.search-wrapper .input-holder { height: 38px; width: 56px; background: rgba(255, 255, 255, 0); border-radius: 8px; position: relative; transition: all 0.3s ease-in-out; }
.search-wrapper.active .input-holder { width: 400px; height: 60px; border-radius: 30px; background: rgb(30, 107, 51); transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); }
.search-wrapper .input-holder .search-input {visibility: hidden; width: 100%; height: 60px; padding: 0px 70px 0 60px; opacity: 0; position: absolute; top: -10px; left: 0px; background: transparent; box-sizing: border-box; border: none; outline: none; font-size: 1rem; font-weight: 400; line-height: 20px; color: #FFF; transform: translate(0, 60px); transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition-delay: 0.3s; }
.search-wrapper.active .input-holder .search-input {visibility:  visible; opacity: 1; transform: translate(0, 10px); box-shadow: none; }
.search-wrapper .input-holder .search-icon { width: 56px; height: 37px; border: none; border-radius: 6px; background: #1e6b33; padding: 0px; outline: none; position: absolute; top: 0; z-index: 2; float: right; cursor: pointer; transition: all 0.3s ease-in-out; }
.search-wrapper .input-holder .search-icon:hover {background-color: var(--main-color-red)}
.search-wrapper.active .input-holder .search-icon { width: 50px; height: 50px; margin: 6px; border-radius: 30px; }
.search-wrapper .input-holder .search-icon span { width: 22px; height: 22px; display: inline-block; vertical-align: middle; position: relative; transform: rotate(45deg); transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); top: 1px; left: -2px; }
.search-wrapper.active .input-holder .search-icon span { transform: rotate(-45deg); top: 2px; }
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after { position: absolute; content: ''; }
.search-wrapper .input-holder .search-icon span::before { width: 4px; height: 16px; left: 10px; top: 11px; border-radius: 2px; background: #fefefe; }
.search-wrapper .input-holder .search-icon span::after { width: 20px; height: 20px; left: 2px; top: -5px; border-radius: 16px; border: 4px solid #fefefe; }
.search-wrapper .close { position: absolute; z-index: 1; top: 10px; right: 6px; width: 44px; height: 44px; cursor: pointer; transform: rotate(-135deg);/*    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
      transition-delay: 0.2s;*/ }
  .search-wrapper.active .close { right: -54px; transform: rotate(45deg); transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition-delay: 0.5s; top: 10px; background: #d12a1c; border-radius: 50px; }
  .search-wrapper .close::before, .search-wrapper .close::after { position: absolute; content: ''; background: #fff; border-radius: 2px; transform: translate(10px, 10px); }
  .search-wrapper.active .close::before { width: 5px; height: 25px; left: 10px; top: 0px; }
  .search-wrapper.active .close::after { width: 25px; height: 5px; left: 0px; top: 10px; }


/* Suchergebnisse */
#suche {}

/* ==========================================================================
   DEFAULT MENU
   ========================================================================== */
.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  [data-whatinput='mouse'] .menu li {
    outline: 0; }
  .menu a,
  .menu .button {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: 0.7rem 1rem; }
  .menu input,
  .menu select,
  .menu a,
  .menu button {
    margin-bottom: 0; }
  .menu input {
    display: inline-block; }
  .menu, .menu.horizontal {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; }
  .menu.vertical {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
  .menu.expanded li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px; }
  .menu.simple {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    .menu.simple li + li {
      margin-left: 1rem; }
    .menu.simple a {
      padding: 0; }
  @media print, screen and (min-width: 40em) {
    .menu.medium-horizontal {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row; }
    .menu.medium-vertical {
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
    .menu.medium-expanded li {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; }
    .menu.medium-simple li {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; } }
  @media print, screen and (min-width: 64em) {
    .menu.large-horizontal {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row; }
    .menu.large-vertical {
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
    .menu.large-expanded li {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; }
    .menu.large-simple li {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 0px;
          -ms-flex: 1 1 0px;
              flex: 1 1 0px; } }
  .menu.nested {
    margin-right: 0;
    margin-left: 1rem; }
  .menu.icons a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
  .menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
  .menu.icon-left li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap; }
    .menu.icon-left li a img,
    .menu.icon-left li a i,
    .menu.icon-left li a svg {
      margin-right: 0.25rem; }
  .menu.icon-right li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap; }
    .menu.icon-right li a img,
    .menu.icon-right li a i,
    .menu.icon-right li a svg {
      margin-left: 0.25rem; }
  .menu.icon-top li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap; }
    .menu.icon-top li a img,
    .menu.icon-top li a i,
    .menu.icon-top li a svg {
      -webkit-align-self: stretch;
          -ms-flex-item-align: stretch;
              align-self: stretch;
      margin-bottom: 0.25rem;
      text-align: center; }
  .menu.icon-bottom li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap; }
    .menu.icon-bottom li a img,
    .menu.icon-bottom li a i,
    .menu.icon-bottom li a svg {
      -webkit-align-self: stretch;
          -ms-flex-item-align: stretch;
              align-self: stretch;
      margin-bottom: 0.25rem;
      text-align: center; }
  .menu .is-active > a {
    background: #1779ba;
    color: #fefefe; }
  .menu .active > a {
    background: #1779ba;
    color: #fefefe; }
  .menu.align-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .menu.align-right li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
    .menu.align-right li .submenu li {
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start; }
  .menu.align-right.vertical li {
    display: block;
    text-align: right; }
    .menu.align-right.vertical li .submenu li {
      text-align: right; }
  .menu.align-right .nested {
    margin-right: 1rem;
    margin-left: 0; }
  .menu.align-center li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .menu.align-center li .submenu li {
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start; }
  .menu .menu-text {
    padding: 0.7rem 1rem;
    font-weight: bold;
    line-height: 1;
    color: inherit; }

.menu-centered > .menu {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .menu-centered > .menu li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .menu-centered > .menu li .submenu li {
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start; }

.no-js [data-responsive-menu] ul {
  display: none; }

.menu-icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 16px;
  cursor: pointer; }
  .menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #fefefe;
    -webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
            box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    content: ''; }
  .menu-icon:hover::after {
    background: #cacaca;
    -webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
            box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }

.menu-icon.dark {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 16px;
  cursor: pointer; }
  .menu-icon.dark::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
            box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    content: ''; }
  .menu-icon.dark:hover::after {
    background: #8a8a8a;
    -webkit-box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;
            box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }

  /* ==========================================================================
  6.  VERTICAL SCROLLING NAVIGATION
  ========================================================================== */
  .off-canvas-active .go-top { bottom: 90px; right: 30px; }
  .off-canvas-active .bread-crumbs { opacity: 0; }
  .off-canvas-active .bt-menu-trigger.active { right: 20px; }
  .bt-menu {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 0; border-width: 0px; border-style: solid; border-color: #e6e6e6; background-color: rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s; z-index: 1000; }
  .bt-menu.bt-menu-open { height: 100%; border-width: 0px 0px 50px 0; -webkit-transition: border-width 0.3s, background-color 0.3s; transition: border-width 0.3s, background-color 0.3s; }
  .bt-overlay { position: absolute; width: 100%; }
  .bt-menu-open { border-bottom-color: #006b32; }
  .bt-menu-open .bt-overlay { height: 100%; box-shadow: inset 3px -3px 0.5rem rgba(0, 0, 0, 0.2); }
  .bt-menu-trigger { position: fixed; bottom: -100px; opacity: 0.3; right: 20px; z-index: 100; display: block; width: 50px; height: 50px; cursor: pointer; background: rgb(0, 107, 50); border-radius: 50px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .bt-menu-trigger.active { bottom: 10px; opacity: 1; right: 10px; }
  .bt-menu-trigger span { position: absolute; top: 23px; left: 12px; display: block; width: 26px; height: 4px; background-color: #fefefe; font-size: 0px; border-radius: 6px; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
  .bt-menu-trigger span:before, .bt-menu-trigger span:after { position: absolute; left: 0; width: 100%; height: 4px; background: #fff; content: ''; border-radius: 6px; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }
  .bt-menu.bt-menu-open .bt-menu-trigger { bottom: 10px; background: #fff; width: 70px; height: 70px; box-shadow: 0 -3px 0.5rem rgba(0, 0, 0, 0.15) }
  .bt-menu.bt-menu-open .bt-menu-trigger span:before, .bt-menu.bt-menu-open .bt-menu-trigger span:after { background: #d42b1d; }
  .bt-menu.bt-menu-open .bt-menu-trigger span { background: transparent; top: 48%; left: 20%; display: block; width: 60%; height: 4px; }
  .bt-menu-trigger span:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  .bt-menu-trigger span:after { -webkit-transform: translateY(10px); transform: translateY(10px); }
  .bt-menu-open .bt-menu-trigger span:before { -webkit-transform: translateY(0%) rotate(45deg); transform: translateY(0%) rotate(45deg); }
  .bt-menu-open .bt-menu-trigger span:after { -webkit-transform: translateY(0%) rotate(-45deg); transform: translateY(0%) rotate(-45deg); }
  .bt-menu-trigger .bt-menu--name {bottom: -100px;position: fixed;}
  .bt-menu-trigger.active .bt-menu--name {    
    display: inline-block;
    background: #006b32;
    padding: 5px 8px 5px 12px;
    position: fixed;
    right: 50px;
    bottom: 15px;
    color: #fff;
    border-radius: 6px 0 0 6px;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: .2s ease; 
    max-width: 85px; 
  }
  .bt-menu-open .bt-menu-trigger.active .bt-menu--name {bottom: -100px;}
  .bt-menu form {position: fixed;bottom: -50px;opacity: 0;transition: 0.2s ease 0.2s;}
  .bt-menu.bt-menu-open form {position: fixed;bottom: 0px;opacity: 1;color: #fff;width: 75%;height: 50px;}
  .bt-menu.bt-menu-open form > div {height: 100%}
  .bt-menu form label {color: #fff;line-height: 1.4;margin-top: 1px;}
  .bt-menu form select {margin-bottom: 0;}
  .bt-menu ul { position: fixed; margin: 0; padding: 0; list-style: none; }
  .bt-menu ul { right: 90px; bottom: -50px; left: 20px; }
  .bt-menu ul li, .bt-menu ul li a { display: block; }
  .bt-menu ul li { float: left; color: #fff }
  .bt-menu ul li { visibility: hidden; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s; transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s; }
  .bt-menu ul li .large-btn { margin: 5px; }
  .bt-menu.bt-menu-open ul {bottom: 0;}
  .bt-menu.bt-menu-open ul:first-of-type li, .bt-menu.bt-menu-open ul li { visibility: visible; opacity: 1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s; transition: transform 0.3s, opacity 0.3s; }
  .bt-menu ul li { width: auto; height: 50px; line-height: 44px; margin: 0 7px; -webkit-transform: scale(0); transform: scale(0); }
  .bt-menu.bt-menu-open ul li:first-child { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
  .bt-menu.bt-menu-open ul li:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
  .bt-menu.bt-menu-open ul li:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
  .bt-menu.bt-menu-open ul li:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
  .bt-menu.bt-menu-open ul li:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  .bt-menu.bt-menu-open ul li:nth-child(6) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
  .bt-menu.bt-menu-open ul li:nth-child(7) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }
  .bt-menu.bt-menu-open ul li:nth-child(8) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
  .bt-menu.bt-menu-open ul li:nth-child(9) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }
  .bt-menu.bt-menu-open ul li:nth-child(10) { -webkit-transition-delay: 1s; transition-delay: 1s; }
  .bt-menu.bt-menu-open ul li:nth-child(11) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
  .bt-menu.bt-menu-open ul li { -webkit-transform: scale(1); transform: scale(1); }
  .bt-menu ul li a { display: block; outline: none; text-decoration: none; }
  .bt-menu ul li a .label { cursor: pointer; }
  .bt-menu ul li a .label:hover { background: #d42b1d; }
  .bt-menu ul li a { color: #fff; text-align: center; font-size: 20px; }
  .bt-menu ul li a:before { color: #fff; font-size: 24px; -webkit-transition: color 0.2s; transition: color 0.2s; }
  .bt-menu ul:first-of-type li a:hover, .bt-menu ul:first-of-type li a:focus, .bt-menu ul li a:hover:before, .bt-menu ul li a:focus:before { color: #1abc9c; }




/* ==========================================================================
6. TEASER & SLIDESHOW
========================================================================== */

.papier-oben, .papier-unten {position: absolute;top: -1px;z-index: 5;	display: -ms-flexbox;display: -webkit-box;display:-webkit-flex;display: flex; display: -ms-flexbox;   right: 0;left: 0;}
.papier-unten {bottom: -1px;z-index: 5;top: auto;}
.papier-unten.aussenrand { bottom: -34px;height: 34px;}
.papier-oben.aussenrand {top: -34px;height: 34px;}  
.papier-oben.aussenrand img {-webkit-align-self: flex-end;align-self: flex-end;}  

.papier-oben img, .papier-unten img, .papier-unten-aussen img, .papier-oben-aussen img  {-webkit-align-self: flex-start;align-self: flex-start;width: 100%;}
.papier-links {
	height: 100%;
    position: absolute;
    left: 0;
    min-height: 1px;
    min-width: 1px;
    max-width: 140px;
}
.papier-rechts {
  height: 100%;
    position: absolute;
    right: 0;
    min-height: 1px;
    min-width: 1px;
    max-width: 140px;
}
.papier-unten-aussen {position: absolute;top: auto;z-index: 1;bottom: -2.2vw;right: 0;left: 0;}
.papier-oben-aussen {top: -2.2vw;position: absolute;z-index: 1;right: 0;left: 0;}

.teaser-hidden {opacity: 0;transition: 1.5s opacity ease;min-height: 33vw}
#teaser {position: relative;background: #E8E4DB;z-index: 1;overflow: hidden; }
#teaser .sp-bottom-thumbnails {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#teaser .sp-thumbnail {padding: 12px 20px;background-color: rgba(0, 0, 0, 0.5);}
#teaser .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {bottom: 0;border-radius: 6px;text-align: center;}
#teaser .sp-thumbnail-title {
	margin-bottom: 5px;
	color: #fff;
	font-size: 1.3rem;
    display: flex;text-align: left;justify-content: space-between;align-items: center;
    height: 80%;
}
#teaser .sp-thumbnail-container .sp-thumbnail.highlight {background: rgba(230,142,36, 0.7);} 
#teaser .sp-thumbnail-container .sp-thumbnail.highlight-blue {background: rgba(27, 56, 117, 0.8);}
#teaser .sp-thumbnail-description {
	font-size: 0.9rem;
	color: #fff;
}
#teaser .sp-selected-thumbnail .sp-thumbnail, #teaser .sp-selected-thumbnail .sp-thumbnail.highlight {background: rgba(0, 107, 50, 0.5)}
#teaser .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {display: none;}
#teaser .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {display: none;}

#teaser h1 {font-family: 'Averia Libre', sans-serif;font-size: 4.8rem;margin-top: 0;max-width: 700px;line-height: 1;color: rgba(255,255,255,0.9);text-shadow:0 1px 24px rgba(0, 0, 0, 0.5);letter-spacing: 0;text-align: left;}
#teaser p {font-size: 1rem;margin-bottom: 20px;max-width: 500px;color: #FFF;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);font-weight: 300;}

#teaser .sp-layer .large-btn {margin-top: 20px;font-weight: 300; position: relative;background: rgba(0,0,0,0.3);}
#teaser .sp-layer .large-btn:hover {background: #FFF;}
#teaser .sp-layer .large-btn::before {border: 2px solid rgb(254, 254, 254);}
#teaser .sp-layer .large-btn:hover::after {border:0;background-color: transparent}
#teaser .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {top: 0;}

#teaser .sp-thumbnail {width: 100%;}

#teaser.sub-teaser {height: 25vw;min-height: 380px;background: #E8E4DB;margin-bottom: 10px;}

.sub-teaser .stoerer {    
    animation: fadeRight 0.8s 0.4s ease forwards;
    font-size: 1.5rem;
    padding: 1.5rem 2.5rem 1.5rem 2.5rem;
    background: rgba(30, 107, 50, 0.9);
    max-width: 45%;
    position: absolute;
        right: 30px;
    bottom: 0%;
    color: #fff;
    border-width: 3px 4px 3px 5px;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;color:#fff}
.sub-teaser .stoerer a {color:#fff} 
.sub-teaser .stoerer a:hover {color:#ddd;text-decoration: none;}    
.sub-teaser .stoerer .gehege {background:white;color:#333;margin-left: 5px;font-size: 26px;top: 1px;}    
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}    

/* --- Notfall-Hinweis --- */
#important {margin: 30px 0 0}
#important .callout.alert {background: rgb(230,142,36)}
#important .callout.alert h3 {color:#fff}
#important .callout.alert p {font-weight:400; color:#fff}
#important .callout.alert .close-button, .close-button.medium {    
right: 2.5rem;
top: 1.5rem;
font-size: 2.5rem;
line-height: 1;
color: #fff;}

/* ==========================================================================
7. SLIDER & CAROUSEL
========================================================================== */

.multiple-items .card .card-header {max-height: 100%;}
.multiple-items figure, .multiple-images figure {margin-top: 0;margin-bottom: 0;position: relative;overflow: hidden;}
.multiple-items figure figcaption, .multiple-images figure figcaption {text-align: center;font-size: calc(0.75rem + 0.5vw);position: absolute;bottom: -100px;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    padding: 7px 10px 20px;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transform: rotate(-2deg);}
.multiple-items figure:hover figcaption, .multiple-items figure:focus figcaption, .multiple-images figure:hover figcaption, .multiple-images figure:focus figcaption {visibility: visible;bottom: -8px;background: rgb(30, 106, 51);color: #fff;}  
.multiple-items figure figcaption a {color: #FFF;text-decoration: underline;} 
.multiple-items figure span.copyright, .multiple-images figure span.copyright {font-size: 80%;border:0;text-align: right;color: #ccc;display: inline-block;    position: absolute;
    top: 5px;
    right: 10px;}
.multiple-items figure figcaption::after, .multiple-images figure figcaption::after {visibility: hidden;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;background: rgba(30, 106, 51, 0.2);}    
.multiple-items figure:hover figcaption::after, .multiple-images figure:hover figcaption::after {    
    position: absolute;
    visibility: visible;
    background: rgb(30, 106, 51);
    width: 30%;
    top: -11px;
    height: 30px;
    content: "";
    left: -40px;
    z-index: -1;
    transform: rotate(15deg);}

.multiple-images {margin-top: 50px;}
.multiple-images .cell {margin-bottom: 1.5rem;}   




/* ==========================================================================
7. CONTENT CARDS
========================================================================== */

.card {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 50px;
  color: #363636;
  text-decoration: none;
  border-radius: 6px;
  border: 0;
  background: none
}

.card .card-summary {
  padding: 0 1.5rem 1rem 0;
}
.card h3 {
  padding: 1.5rem 0 0;
  font-size: 1.38rem;
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: none;
}
.card span.description {
  color: #666;
  font-size: 1rem;
  font-weight: 300;
  display: inline-block;
  padding: 0 0 10px;
}
.card .card-header {
  position: relative;
  max-height: 100%;
  height: auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.15);
  background-blend-mode: overlay;
  border-radius: 6px;
}
#aktuelles .card .card-header::before {
    content: 'Tierpark';
    position: absolute;
    background: var(--main-color-green) url('../img/grafiken/elephant9.png') no-repeat 3px center;
    background-size: 20px;
    left: 0;
    bottom: 0;
    z-index: 1;
    color: #fff;
    padding: 3px 9px 3px 28px;
    font-size: 0.8rem;
    border-radius: 0 6px;
}
#aktuelles .card.ta .card-header::before {
        content: 'Tropen-Aquarium';
    position: absolute;
    background: var(--main-color-blue) url('../img/grafiken/icon-shark.png') no-repeat 3px center;
    background-size: 20px;
    left: 0;
    bottom: 0;
    z-index: 1;
    color: #fff;
    padding: 3px 9px 3px 28px;
    font-size: 0.8rem;
    border-radius: 0 6px;
}
.card .card-category {
  background: rgb(30, 107, 51);
  color: #fff;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  width: auto;
}
.card .card-category {
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.5rem 1.5rem;
  margin: 0;
}
.card .card-category.orange-bg {background: rgb(230,142,36)}
.card .card-category.red-bg {background: rgb(210,41,28)}
.card .card-category.blue-bg {background: rgb(0,56,116)}
.card .card-category.green-bg {background: rgb(0,107,50)}

.card .card-meta {
  max-height: 0;
  overflow: hidden;
  color: #666;
  font-size: .75rem;
  text-transform: uppercase;
  position: absolute;
  bottom: 1.5rem;
  padding: 0 1.5rem;
  right: 0;
  -webkit-transition-property: max-height;
  transition-property: max-height;

  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;

  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.card .show-date {background: rgb(210,41,28);width: 90px;height: 90px;border-radius: 90px;display: -ms-flexbox;
    display: -webkit-box;display:-webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: 'Averia Libre', sans-serif;
    font-size: 2.5rem;font-weight: bold;color: #FFF;
    position: absolute;top: 10px;right: 10px;line-height: 1;}
.card .show-date span {font-size: 0.8rem;}    

.card:hover .card-meta, .card:focus .card-meta {
  max-height: 1rem;
}
.card .spin {
  border: 0;
  box-sizing: border-box;
}
.card .spin::before, .card .spin::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.card .spin::before, .card .spin::after {
  top: 0;
  left: 0;
}
.card .spin::before {
  border: 2px solid transparent;
}
.card:hover .spin::before {
  border-top-color: #fff;
  border-right-color: #fff;
  border-bottom-color: #fff;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.card .spin::after {
  border: 0 solid transparent;
}
.card:hover .spin::after {
  border-top: 2px solid #fff;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.card .circle {
  border-radius: 100%;
  box-shadow: none;
}
.card .circle::before, .circle::after {
  border-radius: 100%;
}
.card .card--infobutton {position: absolute; bottom: 0;right: 0;}
.card .card--infobutton span {
    width: 40px;
    height: 36px;
    border-radius: 30px;
    background: #fefefe;
    color: #2b6b2c;
    border-radius: 10px 0px 0px;
    font-size: 22px;
}

/* Neue Styles für Von-Bis-Angaben */
.card .show-date {font-size:26px;width:100px;height:100px;justify-content: space-evenly;background:rgba(0, 0, 0, 0.6);right:20px}
.dates {display: -webkit-flex;display: flex;justify-content: space-evenly;align-items:center;width:120%;border-top: 1px solid rgba(255, 255, 255, 0.53);border-bottom: 1px solid rgba(255, 255, 255, 0.57);padding: 3px 0 5px;background: #d1281c;position: relative;z-index: 1;border-radius: 7px;}
.dates div {display:flex;flex-direction:column;align-items:center}
.date-bis {font-size: 14px;}
.card .show-date span {font-size: 14px;color:rgba(255,255,255,1);font-weight:300}
div.date-1, div.date-2 {font-size: 24px;}
.card .show-date div.date-1 span, .card .show-date div.date-2 span {font-size: 14px;color:#fff;font-weight: 300;}

/* ==========================================================================
   CONTENT
========================================================================== */


@media only screen and (min-width: 800px) {
  article .text-large {
    -webkit-columns: 2;
            columns: 2;
    -webkit-column-gap: 2rem;
            column-gap: 2rem;
    margin-bottom: 30px;  
  }
}
article {margin-bottom: 1.5rem;}
article h2, article h3, article h4 {page-break-after: avoid}
article p, article li {
  widows: 2;
  orphans: 2;
}
article ul {margin-left: 0;}
article ul li, #important .callout ul li {
  list-style:none;
  position: relative;
  padding-left:25px;
  margin-bottom: calc(0.5rem + 0.25vw);
}
article ol {margin-left: 3rem;}
article ol li {padding-left: 1.5rem}

article ul li:before, #important .callout ul li::before {
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  color: #006B32;
  content:"\f0a9";
}

article ul li.bullet-style-disc:before {
   content:"\f111"; 
}
article ul li.bullet-style-check:before {
   content:"\f00c";
}
article ul li.bullet-style-circle:before {
   content:"\f10c";
}

article ul li:hover:before {
  color:#d12a1c;
}
article figure img {
  max-width: 100%;
    margin: 0;
    border-radius: 6px;
    width: 100%;
}
article .list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

article .list--ordered {
  counter-reset: list-counter;
  display: block;
  margin-left: 0;
}
article .list--ordered .list__item {
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 1rem center;
  display: block;
  min-height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 3rem;
  position: relative;
  margin-bottom: calc(0.75rem + 0.75vw);
}

article .list--ordered .list__item::before {
    background: #006b32;
    background-repeat: no-repeat;
    background-size: 2rem 20rem;
    border-radius: 6px;
    color: white;
    content: counter(list-counter);
    counter-increment: list-counter;
    display: block;
    left: 0;
    line-height: 1.4;
    position: absolute;
    text-align: center;
    width: 2rem;
    font-family: 'Averia Libre', sans-serif;
}
article .divider {margin: 50px 0;}

section:last-child article .divider {display: none;}
article figure {margin-bottom: 20px;}

figure {
  display: block;
  position: relative;
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  -webkit-column-span: all;
          column-span: all;
}
figure img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
  margin: 0;
  border-radius: 6px;
}
figure figcaption div  {
  font-size: calc(0.5rem + 0.5vw);
  display: block;
  color: #767677;
  padding: 6px 0 calc(0.75rem + 0.75vw * 2);
  padding-bottom: 0;
  text-align: right;
}
figure figcaption div:before {
  content: '\f083';
  font-family: 'FontAwesome';
  padding-right: 6px;
}

/* Scale up */
article a, .hag-overview a, .card-summary a {
  font-weight: 700;
  position: relative;
  display: inline-block;
  outline: none;
  color: rgb(210,41,28);
  vertical-align: bottom;
  text-decoration: none;
  white-space: nowrap;
  z-index: 1;
  -webkit-transition: .15s all ease;
  transition: .15s all ease;  
}
article a {white-space: normal}
article a::before, .hag-overview a::before, .card-summary a::before 
article a::after, .hag-overview a::after, .card-summary a::after
{
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

article a::after, .hag-overview a::after, .card-summary a::after {   
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0px;
    bottom: 2px;
    -webkit-transition: .35s all ease;
  transition: .35s all ease;}

article a::before, .hag-overview a::before, .card-summary a::before  {
  position: absolute;
  top: 0;
  left: -3px;
  z-index: -1;
  box-sizing: content-box;
  padding: 0 3px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: rgb(210,41,28);
  content: '';
  opacity: 0;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  -webkit-transform: scale(0);
  transform: scale(0);
}

article a:hover::before, .hag-overview a:hover::before, .card-summary a:hover::before,
article a:focus::before, .hag-overview a:focus::before, .card-summary a:focus::before {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
article a:hover, .hag-overview a:hover, .card-summary a:hover {color: #fff;text-decoration: none;}
.card-summary a[href^="https:"]:not(.button):hover {color:#fff}

article .large-btn {margin: 30px 0px 20px;}

.button-leiste {margin: 30px 0;text-align: left;}
div[class*="-12"] .button-leiste, article[class*="-12"] .button-leiste {text-align: center;}
div[class*="-6"] .button-leiste, div[class*="-4"] .button-leiste, article[class*="-6"] .button-leiste, article[class*="-4"] .button-leiste {text-align: left;}

.flex-container.flex-dir-column .large-btn {margin-top: auto;-webkit-align-self: flex-start;align-self: flex-start;border: 0;}  

.grid-list, .grid-gerastert {
  margin: 0 0 40px;
  display: -webkit-box;
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;}
.grid-list li {
  margin: 0;
 -webkit-box-flex: 0 0 auto; 
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;  
    flex: 0 0 auto;
    padding:0.75rem;
  margin:0.2em;
  background-color: rgba(0,0,0,0.125);
  list-style: none;}

.grid-list li:before, .grid-gerastert li:before {display: none;} 

.grid-gerastert li {
  margin: 0;
 -webkit-box-flex: 0 0 24.4%; 
  -webkit-flex: 0 0 24.4%;
  -ms-flex: 0 0 24.4%;  
    flex: 0 0 24.4%;
    padding:0.75rem;
  margin:0.2em;
  background-color: rgba(0,0,0,0.125);
  list-style: none;}
.grid-list li a, .grid-gerastert li a {color:#333; text-decoration: underline;font-weight: normal;padding: 0 10px}
.grid-list li a:hover, .grid-gerastert li a:hover {color:#fff;text-decoration: none;}
/* ==========================================================================
   Übersichtsseite Bild-Text Flow
========================================================================== */

.hag-overview article p:first-of-type:first-letter {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  float: none;
  color: inherit;
  font-weight: normal;
  background: none;
  vertical-align: inherit;
  border-radius: 0
}

.hag-overview {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 50px;
  position: relative;
}

.hag-overview .button.round {
  border-radius: 50px;
  text-transform: uppercase;
  margin-bottom: 0;
  color: #fff;
  text-decoration: none;
}
.hag-overview a.button::before, .hag-overview a.button::before {display: none;}

.hag-overview .hag-overview-img {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  -webkit-flex: 1 0 100%;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
}

.hag-overview .hag-overview-img img {
  width: 100%;
}

.hag-overview p {    
  color: #222;
    font-weight: 300;
}
.hag-overview a {
  color: #000;
  text-decoration: underline;
}

@media screen and (min-width: 40em) {
  .hag-overview .hag-overview-img {
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
      max-height: 408px;
  }
}


.hag-overview .hag-overview-block {
  padding: 1rem;
  -webkit-flex: 1 0 100%;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  background: #e6e6e6;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media screen and (min-width: 40em) {
  .hag-overview .hag-overview-block {
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    padding: 2rem;
  }
}



/* ==========================================================================
   WEBSITE BREADCRUMBS
========================================================================== */
.hag-breadcrumb, .hag-multi-steps {
  padding: 0.25rem 1rem;
  margin: 0 auto;
  background-color: #edeff0;
  border-radius: .25rem;
}
.hag-breadcrumb::after, .hag-multi-steps::after {
  clear: both;
  content: "";
  display: table;
}
.hag-breadcrumb li, .hag-multi-steps li {
  display: inline-block;
  float: left;
  margin: 0.5rem 0;
}
.hag-breadcrumb li::after, .hag-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6rem;
  color: #959fa5;
}
.hag-breadcrumb li:last-of-type::after, .hag-multi-steps li:last-of-type::after {
  display: none;
}
.hag-breadcrumb li > *, .hag-multi-steps li a {
  display: inline-block;
  font-size: 1rem;
  color: #0a0a0a;
}
.hag-breadcrumb li.current a, .hag-multi-steps li.current a {
  color: var(--main-color-green);
  font-weight: bold;
}
.no-touch .hag-breadcrumb a:hover, .no-touch .hag-multi-steps a:hover {
  color: var(--main-color-green);
}
.hag-multi-steps.text-center li a i {position: relative;margin-right: 5px;color: #1e6b33;font-size: 20px;top: 2px;}
.ta .hag-multi-steps.text-center li a i {color: var(--main-color-blue)}

@media only screen and (min-width: 720px) {
  .hag-breadcrumb, .hag-multi-steps {
    padding: 0 1.2em;
  }
  .hag-breadcrumb li, .hag-multi-steps li {
    margin: 1.2em 0;
  }
  .hag-breadcrumb li::after, .hag-multi-steps li::after {
    margin: 0 1em;
  }
  .hag-breadcrumb li > *, .hag-multi-steps li a {
    font-size: 0.8rem;
  }
}
/* Bread Crumbs */

  .hag-multi-steps {
    background-color: transparent;
    padding: 0;
    text-align: left;
  }

  .hag-multi-steps li {
    position: relative;
    float: none;
    margin: 5px;
    text-transform: uppercase;
    font-size: 0.7rem;
  }
  .hag-multi-steps li:last-of-type {
    margin-right: 0;
  }
  .hag-multi-steps li::after {
    position: relative;
    content: '';
    height: 2px;
    background: #1e6b33;
    margin: 0;
  }
  .hag-multi-steps li.visited::after {
    background-color: #1e6b33;
  }
  .ta .hag-multi-steps li.visited::after {
    background-color: var(--main-color-blue);
  }

  .hag-multi-steps li a, .hag-multi-steps li.current a {
    position: relative;
    color: #d32a1c;
  }

  .hag-multi-steps.custom-separator li::after {
    height: 4px;
  }

  .hag-multi-steps.text-center li::after {
    width: 20px;
    top: -4px;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    left: 8px;
  }
  .hag-multi-steps.text-center li a {
    z-index: 1;
    padding: .15rem 0;
        text-transform: uppercase;
    font-size: 0.7rem;
  }

  .hag-multi-steps.text-center li.visited a {
    color:var(--main-color-green);
  }
  .ta .hag-multi-steps.text-center li.visited a {
    color:var(--main-color-blue);
  }
  .no-touch .hag-multi-steps.text-center a:hover {
    text-decoration: none;
    color: var(--main-color-red);
  }
  .ta .no-touch .hag-multi-steps.text-center a:hover, .ta .hag-multi-steps.text-center li.visited a:hover {color: var(--main-color-red)}
  .hag-multi-steps.text-center.custom-icons li.visited a::before {
    background-position: 0 -60px;
  }

  .hag-multi-steps.text-top li, .hag-multi-steps.text-bottom li {
    width: 80px;
    text-align: center;
  }
  .hag-multi-steps.text-top li::after, .hag-multi-steps.text-bottom li::after {
    position: absolute;
    left: 50%;
    width: calc(100% + 40px);
  }
  .hag-multi-steps.text-top li a::before, .hag-multi-steps.text-bottom li a::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #edeff0;
  }
  .hag-multi-steps.text-top li.visited a::before,
  .hag-multi-steps.text-top li.current a::before, .hag-multi-steps.text-bottom li.visited a::before,
  .hag-multi-steps.text-bottom li.current a::before {
    background-color: rgb(0,107,50);
  }
  .no-touch .hag-multi-steps.text-top a:hover, .no-touch .hag-multi-steps.text-bottom a:hover {
    color: rgb(0,107,50);
  }
  .no-touch .hag-multi-steps.text-top a:hover::before, .no-touch .hag-multi-steps.text-bottom a:hover::before {
    box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
  }

  .hag-multi-steps.text-top li::after {
    bottom: 4px;
  }
  .hag-multi-steps.text-top li a {
    padding-bottom: 20px;
  }
  .hag-multi-steps.text-top li a::before {
    bottom: 0;
  }

  .hag-multi-steps.text-bottom li::after {
    top: 3px;
  }
  .hag-multi-steps.text-bottom li a {
    padding-top: 20px;
  }
  .hag-multi-steps.text-bottom li a::before {
    top: 0;
  }

#teaser .hag-multi-steps {text-align: center;}

@media only screen and (max-width: 719px) {
    #gattungen li a {padding-right: 5px;height: 30px;line-height: 30px;font-size: 0.85rem;}
    #gattungen li:first-child a {padding-left: 10px;}
    #gattungen li a:before, #gattungen li a:after {border-width: 15px 10px}
}




/* ==========================================================================
8. FLOATING INFO BUTTON 
========================================================================== */

.floatmenu {
  visibility: hidden; /* for wow.js effect */
  display: block;
  box-sizing: border-box;
  height: 60px;
  width: 60px;
  border-radius: 45px;
  position: relative;
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1);
  position: fixed;
  z-index: 101;
  right: 4px;
  top: 130px; 
  padding: 20px;
}
.floatmenu.scroll {top: 10px;}
.floatmenu.expanded {
  width: 50%;
  height: auto;
  border-radius: 0;
  background: none
}

.info-container {
  position: absolute;
  top: 5px;
  right: calc(100% - 55px);
  height: 50px;
  width: 50px;
  transition: 1s;
      background: #d32a1c;
    border-radius: 28px;
    z-index: 2;
}
.info-container.close {
  right: 10px;
  background: #d2291c;
  border-radius: 30px 30px 30px 0;
}

.toggle {
  position: relative;
  height: 50px;
  width: 50px;
  cursor: pointer;
  border-radius: 50px;
}
.toggle:after, .toggle:before {
  content: '';
  background: #fff;
  width: 36px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
  transform: rotate(90deg);
  border-radius: 10px
}
.toggle:before {
  top: -20px;
  width: 8px;
}
.toggle:after {
  top: 12px;
  width: 20px;
  height: 8px;
  left: -1px;
}
.toggle.close:before {
  content: '';
  background: #fff;
  width: 26px;
  height: 5px;
  margin: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
  transform: rotate(-225deg);
  top: 0;
}
.toggle.close:after {
  content: '';
  background: #fff;
  width: 26px;
  height: 5px;
  margin: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
  transform: rotate(225deg);
  top: 0;
}
.toggle .quickinfo {
    background: #d32a1c;
    display: inline-block;
    color: #fff;
    font-size: 0.8rem;
    padding: 8px 12px 8px 12px;
    position: relative;
    margin-left: -85px;
    width: 100px;
    border-radius: 6px 0 0 6px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 10px;
    -webkit-transition: .25s all 0.25s ease;
    transition: .25s all 0.25s ease;
}
.floatmenu .info-accordion {visibility: hidden;opacity: 0;-webkit-transition: .5s all ease;transition: .5s all ease; }
.floatmenu.expanded .info-accordion {visibility: visible;opacity: 1;height: auto;}
.floatmenu.expanded .quickinfo {opacity: 0;margin-left: -300px;}

.info-accordion {
    width: auto;
    margin:25px 30px 20px 20px;
    background: none;
    border-radius: 6px;
    list-style-type: none;
    position: relative;
    min-width: 420px;
    z-index: 1;
 }
.info-accordion > li{margin-bottom: 5px; border-radius: 6px;     background: #e5e0d4;
    border: 2px solid #fff;
    box-shadow: 0 0 1.5rem rgba(0,0,0,0.2);}

.info-accordion .link {
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	color: #333;
	font-size: 1rem;
	font-weight: 500;
	position: relative;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.info-accordion li i {
	position: absolute;
	top: 19px;
	left: 12px;
	font-size: 18px;
	color: #333;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.info-accordion > li:last-child .link {border-bottom: 0;}

.info-accordion li i.fa-chevron-down {
	right: 15px;
	left: auto;
	font-size: 16px;
}
.info-accordion li.open {background: #d32a1c;}
.info-accordion li.open .link {color:#fff;}
.info-accordion li.open i {color:#fff;}
.info-accordion li.open:first-child .link, .info-accordion li.open:first-child i {color: #fff;}
.info-accordion li.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.info-accordion li.default .submenu {display: block;}

.info-accordion .feedings_quick {display: flex; align-items: center;justify-content: space-between;margin: 5px 0}
.info-accordion li.open .feedings_quick i {    position: relative;
    top: auto;
    color: #7d8e9b;
    display: inline-block;
    left: 0;
    margin-right: 12px;}
.info-accordion .feedings_quick .gehege {margin-left: 12px;top: -2px;}

.info-accordion .download-button {padding-left: 50px;}
.info-accordion .download-button::before {left: 20px;}

.submenu {
 	display: none;
    background: #e6e0d8;
    font-size: 14px;
    list-style-type: none;
    margin: 0;
    padding: 15px 15px 10px;
    color: #010101;
    border-top: 2px solid #efece7;
    border-radius: 0 0 6px 6px;
    overflow: hidden;    
    position: relative;
 }
.submenu p {font-size: 14px}
.submenu li {border-bottom: 1px solid #b5b3b3;}

.submenu table {margin-bottom: 0;}

.submenu a i {color: #333!important;position: relative;top: 1px;left: auto;}


/* ==========================================================================
9. UI-EFFECTS
========================================================================== */

/* Text Reveal (Teaser) */
.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  position: relative;
  font-size: 10vw;
  display: block;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-animation-name: reveal-text;
          animation-name: reveal-text;
  color: #FFF;
  
}

.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  pointer-events: none;
  -webkit-animation-name: revealer-text;
          animation-name: revealer-text;
}

@-webkit-keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@keyframes reveal-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@-webkit-keyframes revealer-text {
  
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;   
  }

  
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}


@keyframes revealer-text {
  
  0%, 50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  
  60%, 100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;   
  }

  
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
/* Parallax Effect */
.parallax {
    border: 0;
    height: 100%;
    min-height:  50vh;
    margin: -9px -10px 0 -10px;
    overflow: hidden;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
.parallax img {
    height: auto;
    margin: 0 auto;
    width: 100%;
    margin-top: -20%;
  }
@media only screen and (max-width: 797px) {
  #parallax h2 {
      left: 0;
      right: 0;
      -webkit-transform: translate(0,-50%);
      transform: translate(0,-50%);
    }
  #parallax img {
      height: 280px;
      margin: 0 auto;
      object-fit: cover;
      width: 100%;
      -webkit-transform: none !important;
      transform: none !important;
    }
}
.parallax h1 {color: #FFF;font-weight: 400;font-size: 4rem;margin-bottom: 10px;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    line-height: 1.2;margin-top: 0;text-align: center;}   
.parallax iframe, .parallax video {width: 100vw; height: 120vh; margin-top: -50vh}    
.parallax-divider {height: 100%;max-height:50vh; overflow: hidden;position: relative;margin: 80px 0;}
.parallax-divider.small {height: 30vh;}
.parallax-divider .papier-unten {bottom: -1px;}
.parallax-content {position: absolute;top: 20vh;left: 0;right: 0;}
.parallax-content .large-btn {background: rgba(0,0,0,0.3);}
.parallax-content .large-btn[href^="https:"]::after {color: #fff;opacity: 1;margin-left: 7px;}
.parallax-content .large-btn:hover {background: #fff;}
.parallax-content .large-btn:hover::after {background: none;}
.parallax-content .large-btn:hover[href^="https:"]::after {color: #d32a1b;}

.divider {margin: 80px 0;}

.text-divider {position: relative;margin: 80px 0;z-index: 0;}
.text-divider .content {padding: 100px 10%;}
.text-divider .content .question {font-weight: 700;color: rgb(210,41,28);font-size: 1.3rem;}
.text-divider .content .answer {font-size: 2.8rem;color: #95989A;font-family: 'Averia Libre', sans-serif;}
.text-divider .content .solution {color: #080808;max-width: 80%;}

#planer .content {padding: 50px 15%;}
#planer select {
    width: auto;
    position: relative;
    font-size: 2.4rem;
    height: auto;
    color: #1e6b33;
    border-radius: 10px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
}



/* ==========================================================================
17. MISC
========================================================================== */
/* Error Page */
#error-404 {margin-top: 50px;}
#error-404 .callout {border-radius: 0 0 10px 10px; background: #006b32;padding-bottom: 30px;}
#error-404 .callout h1, #error-404 .callout h3 {text-align: left;color: #fff;margin-top: 0;}
#error-404 .callout .large-btn {background: transparent}
#error-404 .callout .large-btn:hover {color: #FFF;}
#error-404 .callout .large-btn::before {    border: 2px solid #fff;}

.schiefer-rahmen {border-width: 3px 4px 3px 5px;border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;} 

/* Daten & Fakten */
#parallax-onepager .flex-container {position: relative;}
#parallax-onepager .block {background: white; padding: 60px 0; width:100%; margin:0 auto;}
#parallax-onepager .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-onepager .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
#parallax-onepager .parallax-canvas {height: 66vh;margin: 0;overflow: hidden; position: relative;width: 100%}
#parallax-onepager .parallax-canvas img {margin: 0;height: auto;width: 100%;}
#parallax-onepager .parallax-canvas > div {width: 100%;}
#parallax-onepager .parallax-canvas .facts {position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;}
#parallax-onepager .parallax-canvas .facts > div {height: 100%;padding: 60px 40px;background-size: cover;background-position: center;}
#parallax-onepager .parallax-canvas .facts > div p {color: rgba(255, 255, 255, 0.7686274509803922);line-height:1.3;font-size: calc(1rem + 0.3vw);font-weight: 400;}
#parallax-onepager .parallax-canvas .facts > div p strong {color: #FFF;}
#parallax-onepager .parallax-canvas .facts > div .large-btn {-webkit-align-self: flex-start;align-self: flex-start;}
#parallax-onepager .parallax-canvas .facts > div .numbers {position: relative;}

#parallax-onepager .parallax-canvas .facts > div.lightbrown-bg {background: rgba(230, 224, 214, 1)}
#parallax-onepager .parallax-canvas .facts > div.orange-bg {background: rgba(230,142,36,1)}
#parallax-onepager .parallax-canvas .facts > div.green-bg {background: rgba(0,107,50,1)}
#parallax-onepager .parallax-canvas .facts > div.black-bg {background: rgba(23,31,23,1)}
#parallax-onepager .parallax-canvas .facts > div.brown-bg {background: rgba(127,100,48,1)}

#parallax-onepager .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

h1 + .short-tag {margin-bottom: 30px;text-transform: uppercase;letter-spacing: 3px;font-weight: 300;}
#steckbrief h1 + .short-tag {font-style: italic}

h2 .facts--title {position: relative;}
.facts:first-child {margin: 40px 0 10px;}
.facts h2 {display: inline-block;margin-bottom: 0;}
.facts--title span {display: inline-block;line-height: 1;}
.facts--title span.large, .facts--title span.large + span.unit {font-size: 80px;}
.facts--title span.medium {font-size: 60px;}
.facts--title span.small {font-size: 40px;}
.parallax-canvas .facts .facts--title span {color: #fff}

.facts .tier-illu {display: block; margin-right: 20px;}
.facts .tier-illu img {max-height: 120px;width: auto;}
.facts .facts--title {font-family: 'Averia Libre', sans-serif;color: rgb(0,107,50);font-size: 2.6rem;position: relative;font-weight: 700;}
.facts strong {color: rgb(0,107,50)}

@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-onepager .block {padding: 40px 0;}
}
@media screen and (max-width: 767px) {
  #parallax-onepager .block {padding: 30px 0;}
  #parallax-onepager .parallax-one, #parallax-onepager .parallax-two, #parallax-onepager .parallax-three {
    padding-top:100px; padding-bottom:100px;}
}
@media screen and (max-width: 540px) {
  #parallax-onepager .block {padding: 30px 0; }
  #parallax-onepager .parallax-canvas img {
    height:auto;
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
    object-fit: cover;
    margin-top: 10%;}
  #parallax-onepager .parallax-canvas .facts > div {height: 60%;margin-top: 50%;}
}



/* Download Button */
.download-button, .button-group a.download-button { display: inline-block; margin-right: 10px; margin-top: 10px; padding: 10px 30px 10px 70px; color: #ffffff; text-decoration: none; position: relative; transition: 0.15s; -webkit-transition: 0.15s; background: #1e6a33; border-radius: 8px; white-space: nowrap; font-weight: 400; text-align: left; }
.download-button:focus, .download-button:hover { border-color: rgb(210, 41, 28); outline: none; background: rgb(210, 41, 28); color: #fff; }
.download-button:active { animation: enlight 0.5s; -webkit-animation: enlight 0.5s; }
.download-button::before { content: '\f019'; font-family: 'FontAwesome'; position: absolute; top: 50%; bottom: 0; left: 30px; width: 80px; margin-top: -15px; font-size: 20px; }
.download-button[data-filesize]::after { content: '('attr(data-filesize) ' MB)'; /* 1 */ font-size: 0.8em; /* 2 */ color: rgba(254, 254, 254, 0.67); margin-left: 10px; /* 4 */ }

/* Adress / Profilkarte */
.contact-details {margin-top: 50px;}
.user-profile .grid-y { height: 100%; }
.user-profile button {background: #1e6a33;border-radius: 30px}
.user-profile {    margin: auto;
    width: calc(100% - 40px);
    height: auto;
    background: #e6e0d7;
    border-width: 3px 4px 3px 5px;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
    padding: 40px 20px;
    position: relative;
    left: 20px;}
.user-profile  .kontaktdaten { display: inline-block; color: #333; font-size: .87rem; }
.user-profile  .kontaktdaten a {vertical-align: inherit;color: inherit;font-weight: normal}
.user-profile  .kontaktdaten a:hover {color: #fff}
.user-profile  .kontaktdaten .label {background: #fefefe;
    color: #0a0a0a;
    margin-left: 10px;
    font-size: 0.8rem;
    padding-bottom: 0.3rem;}
.user-profile img.avatar { padding: 0; height: auto; width: 140px; border-radius: 200px; margin-bottom: 20px; }
.user-profile span { color: #fff; white-space: nowrap; font-size: 1rem; }
.user-profile span:hover { color: #daebea; }
.user-profile a[target="_blank"]::after {font-size: 0.8rem;margin-left: 5px;background: #e6e0d6;padding: 1px 3px 2px 4px;border-radius: 3px;
    color: #006b32;}    
.outercolor .user-profile {background: #fff}

/* HVV Icons */
.hvv-bus {position: relative;border-radius: 0; margin: 2px 12px;}
.hvv-bus::before, .hvv-bus::after {    
    content: '';
    position: absolute;
    top: 0;
    height: 0;
    width: 0;}
.hvv-bus::before {    
    left: -12px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--main-color-red)}
.hvv-bus::after {    
    right: -12px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid var(--main-color-red)}

/* Tierbabys Layout Anpassungen */
#tierbabys .grid-x .grid-x {margin: 0 0 50px}
#tierbabys .tierbaby--info {
        background: #e6e0d7;
    border-width: 3px 4px 3px 5px;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
    padding: 20px 40px;
    margin-bottom: 10px;
}
#tierbabys img.tierbaby--img {max-width: 100%;margin: 0;border-radius: 6px;width: 90%;}

/* ==========================================================================
     VISITING TIME CLOCK
========================================================================== */
.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 120px;
  width: 120px;
  position: relative;
}
.clock .hour {
  background: #000;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
    margin: -35px -4px 0;
    padding: 35px 4px 0;
    z-index: 2;
    border-radius: 10px;
  z-index: 2;
}
.clock .hour::after {    
    content: '';
    position: absolute;
    right: 0px;
    bottom: -3px;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background: #000000;}
.clock .minute {
  background: #000;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -51px -1.5px 0;
  padding: 50px 1.5px 0;
  border-radius: 10px;
  z-index: 2;
}

.bottom-circle {
  position: relative;
  margin: 0 auto;
  height: 110px;
  width: 110px;
  background-color: transparent;
  border-radius: 50%;
}

.off-color {
  overflow: hidden;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  z-index: 5;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  z-index: 1;
}

.off-color-contents {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: rgb(242, 165, 19);
      border-top: 6px solid rgb(210,41,28);
    background: none;
    border-right: 6px solid rgb(210,41,28);
}
.off-color-2 {
    overflow: hidden;
    position: absolute;
    bottom: -12px;
    left: 27px;
    width: 50%;
    height: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 5;
    -webkit-transform: rotate(-210deg);
    transform: rotate(-224deg);
    z-index: 0;
}
.off-color-2 .off-color-contents {
      background: rgb(242, 165, 19);
      border-top: 6px dashed #ff9c22;
    background: none;
    border-right: 6px dashed #ff9c22;
}


/* ==========================================================================
     ANIMATED DOWNLOAD ICON
========================================================================== */
.folder {
  background-color: #decda8;
  position: relative;
  width: 122px;
  height: 64px;
  display: block;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
      margin: 20px 0 20px 15px;
    float: right;
    padding-right: 10px;
    text-align: center;
}
.folder small {margin-top: 10px;display: inline-block;}
.folder-tab {
  position: absolute;
  height: 10px;
  left: 0;
  bottom: 100%;
  display: block;
  width: 30%;
  border-top-left-radius: 8px;
  background-color: inherit;
  background: #decda8;
}
.folder-tab:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 0 14px 0 0;
    left: calc(100% - 7px);
    background: #decda8;
}

.folder-icn {
    padding-top: 12px;
    display: inline-block;
    float: right;
}

.downloading {
  width: 30px;
  height: 32px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.custom-arrow {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -7px;
  background-color: #fff;
  -webkit-animation-name: downloading;
  -webkit-animation-duration: 3.5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: downloading;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
}
.custom-arrow:after {
  content: '';
  position: absolute;
  display: block;
  top: 100%;
  left: -9px;
  border-top: 15px solid #fff;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
}

.bar {
  width: 30px;
  height: 4px;
  background-color: #fff;
  margin: 0 auto;
}

@-webkit-keyframes downloading {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 110%;
    opacity: 0;
  }
  52% {
    top: -110%;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes downloading {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 110%;
    opacity: 0;
  }
  52% {
    top: -110%;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

/* ==========================================================================
     FISCH BUBBLES
========================================================================== */
@media screen and (min-width: 1025px) 
{

  #bubbles { height:  100%;position: relative; }
  .bubble {
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 200px;
      -webkit-border-radius: 200px;
      position: absolute;
  }

  .x1 {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0.2;
      -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
  }

  .x2 {
      left: 200px;
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.5;
      -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
  }
  .x3 {
      left: 350px;
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3;
      -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  }
  .x4 {
      left: 470px;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      opacity: 0.35;
      -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
  }
  .x5 {
      left: 150px;
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3; 
      -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
  }
  @-webkit-keyframes moveclouds { 
      0% { 
          top: 500px;
      }
      100% { 
          top: -500px;
      }
  }

  @-webkit-keyframes sideWays { 
      0% { 
          margin-left:0px;
      }
      100% { 
          margin-left:50px;
      }
  }

}

/* ==========================================================================
    ARTENSCHUTZ PROZESS
========================================================================== */
.artenschutz-bild {
    background: #e6ecf0;
    border-radius: 6px;
    margin: 10px 0 30px;
      border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
}

/* TP - TA BUTTON */
.switch-button {
  max-width: 500px;
  height: 40px;
  text-align: center;
  will-change: transform;
  cursor: pointer;
  transition: .3s ease all;
  position: relative;
}
.switch-button-case {
  display: inline-block;
  background: none;
  width: 49%;
  height: 100%;
  color: #333;
  position: relative;
  border: none;
  transition: .3s ease all;
  text-transform: uppercase;
  padding-bottom: 1px;
}
.switch-button-case:hover {
  color: grey;
  cursor: pointer;
}
.switch-button-case:focus {
  outline: none;
}
.switch-button .active {
  color: #fff;
  background-color: #005c2b;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  transition: .3s ease-out all;
  border-radius:  6px;
}
.switch-button .active-case {
  color: #fff;
}
.switch-button span[style*="left: 50%"] {background: var(--main-color-blue)}

#item-group ul.list > li.TA {display: none;}
.tiere-ta #item-group ul.list > li.TP {display: none;}

.tiere-ta #item-group ul.list > li.TA {display: flex}

/* Artenschutz Flipping Circles */
/* ==========================================================================
     FLIPPING CARDS
========================================================================== */
.flipping_cards .cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 50px;
}

.flipping_cards .col{
    width: calc(21%);
    cursor: pointer;
    margin: 0% 0 5% 0;
}

.flipping_cards .container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
}
/*.flipping_cards .badge {
    left: 32px;
    position: absolute;
    top: 17px;
    font-size: 16px;
    transform: rotate(-15deg) translateZ(40px);
    border-radius: 6px;
    text-align: center;
    width: 140px;
    height: 30px;
    background: rgba(211, 53, 42, 0.88);
    line-height: 20px;
    font-weight: bold;
}*/
.flipping_cards .front,
.flipping_cards .back{
  background-size: cover;
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    text-align: center;
    min-height: 260px;
    height: auto;
    border-radius: 300px;
    color: #fff;
    font-size: 1.5rem;
    
}

.flipping_cards .back{
  background: #000;
}

.flipping_cards .front:after{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: 0;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.flipping_cards .container:hover .front,
.flipping_cards .container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flipping_cards .back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.flipping_cards .inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.flipping_cards .container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.flipping_cards .container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.flipping_cards .container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.flipping_cards .container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.flipping_cards .front .inner p{
  font-size: 1.35rem;
  margin-bottom: 0;
  position: relative;
  line-height: 1.3;
      background: rgba(0,0,0,0.65);
    border-radius: 6px;
    padding: 3px 0px;
}
.flipping_cards .back p {margin-bottom: 0;font-size: 1rem;    background: rgba(0,0,0,0.65);
    border-radius: 6px;
    padding: 3px 0px;}

.flipping_cards .front .inner span{
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  font-size: 1rem;
}

@media screen and (max-width: 64rem){
  .flipping_cards .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .flipping_cards .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .flipping_cards .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

/* Artenschutz Prozess */
#engagement {margin: 50px auto 80px;}
.prozess * {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.prozess {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.prozess .step {
  position: relative;
  padding: 25px 20px;
  width: 25%;
  background: #111;
  font-family: 'Lato';
  cursor: pointer;
  box-sizing: border-box;
}

/* Button Backgrounds */
.prozess .step:nth-child(1) {
  background: rgba(47,144,74,0.7);
  border-radius: 6px 0 0 6px;
}

.prozess .step:nth-child(2) {
  background: rgba(47,144,74,0.8);
}

.prozess .step:nth-child(3) {
  background: rgba(47,144,74,0.9);
}

.prozess .step:nth-child(4) {
  background: rgba(47,144,74,1);
  border-radius: 0 6px 6px 0;
}

/* Arrows */
.prozess .step:nth-child(1):after,
.prozess .step:nth-child(2):after,
.prozess .step:nth-child(3):after {
  position: absolute;
  top: 45%;
  right: -18px;
  z-index: 1;
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #6db180;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.prozess .step:nth-child(2):after {
  border-left: 20px solid #58a66e;
}

.prozess .step:nth-child(3):after {
  border-left: 20px solid #439a5b;
}


/* Text Styles */
.prozess .step h3 {
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-top: calc(0.75rem + 0.75vw);
}

.prozess .step p {
  color: #fff;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

/* Hover Effects */
.prozess .step:hover {
  background: rgb(230,142,36);
}

.prozess .step:hover:after {
  border-left: 20px solid rgb(230,142,36);
}

.prozess .step:hover h2 {
  color: #fff;
}

/* Media Queries */
@media all and (max-width: 950px) and (min-width: 701px) {
  .prozess .step {
    width: 50%;
  }

  .prozess .step:nth-child(2):after {
    border-left: 0px;
  }
}
@media all and (max-width: 700px) and (min-width: 0px) {
  .prozess .step {
    display: block;
    width: 100%;
  }

  .prozess .step:nth-child(1):after,
  .prozess .step:nth-child(2):after,
  .prozess .step:nth-child(3):after {
    border-left: 0px;
  }
}


/* ==========================================================================
     SCHAUKELNDER AFFE
========================================================================== */

.ape {    
    animation: swing 10s infinite alternate ease-in-out;
    top: 28px;
    width: 70%;
    position: absolute;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: 50% -40px;
    right: 10px;
    z-index: -1;
        -webkit-transition: .5s all .5s ease;
    transition: .5s all .5s ease;}
.expanded .ape {    
    width: 60px;
    right: 50px;
    bottom: 0;
    top: 90%;}    
@keyframes swing {
  0% { transform: rotate(-1deg) }
  100% { transform: rotate(1deg) }
}

/* ==========================================================================
   WETTER INFO
========================================================================== */
/* Wheater App */
.hag_wetter {border-radius: 8px;overflow: hidden;margin-top: 40px;}
.hag_wetter .grid-x:nth-child(1) {position: relative;z-index: 2;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);background: rgba(255,255,255,0); }
.hag_wetter .grid-x:nth-child(1) .cell {font-size: 2rem;font-weight: 300;}
.hag_wetter .grid-x:nth-child(2) {height: 160px;margin-top: -60px;}
.hag_wetter .wetter-zeit {margin-top: -33px;}
.hag_wetter .wetter-zeit .cell {font-size: 0.8rem;color: #0a0a0a;}

.hag_wetter .cell {font-size: 0.75rem;margin: 0;border-radius: 0; border: 0;background: none;padding: 5px;
    display: -webkit-box;
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-transition: .35s all ease;
  transition: .35s all ease;  
    text-align: center;
    position: relative;
    color: #222
    }

.hag_wetter .cell.clear-day {background: #fff url('../img/interface/wetter/wetter_klar.png') no-repeat center 60px; background-size: 55%}
.hag_wetter .cell.partly-cloudy-day {background: #bcd2e0 url('../img/interface/wetter/wetter_heiter.png') no-repeat center 60px; background-size: 70%;}
.hag_wetter .cell.rain {background: #859398 url('../img/interface/wetter/wetter_regen.png') no-repeat center 60px; background-size: 70%;}
.hag_wetter .cell.snow {background: #859398 url('../img/interface/wetter/wetter_schnee.png') no-repeat center 60px; background-size: 84%;}
.hag_wetter .cell.sleet {background: #859398 url('../img/interface/wetter/wetter_sleet.png') no-repeat center 60px; background-size: 75%;}
.hag_wetter .cell.fog {background: #cbd2d6 url('../img/interface/wetter/wetter_nebel.png') no-repeat center 63px; background-size: 68%;}
.hag_wetter .cell.hail, .hag_wetter .cell.thunderstorm {background: #859398 url('../img/interface/wetter/wetter_gewitter.png') no-repeat center 60px; background-size: 70%;}

.hag_wetter .cell.cloudy {background: #b4bcbf url('../img/interface/wetter/wetter_bedeckt.png') no-repeat center 60px; background-size: 80%;}
.hag_wetter .cell.wind {background: #bcc4c7 url('../img/interface/wetter/wetter_windig.png') no-repeat center 60px; background-size: 65%;}
.hag_wetter .cell.wind:before {content: '';position: absolute; left: 10px;top: 52px;width: 50px;height: 50px;background: url('../img/interface/wetter/wetter_windig.png') no-repeat center center; background-size: 100%;opacity: 0.5;}
/*.hag_wetter .grid-x div[class*="night"] {background: #62656f url(../img/interface/wetter/clouds-night.png) no-repeat center 60px; background-size: 60%;color: #fff}*/
.hag_wetter .grid-x div[class*="night"] {background: #7c8d98 url('../img/interface/wetter/wetter_nachts.png') no-repeat center 60px; background-size: 65%;}
.hag_wetter .wetter-status div[class*="night"]:first-child {background:linear-gradient(270deg, rgb(124, 141, 152) 0%, rgba(188,210,224,1) 100%)}
.hag_wetter .grid-x .cell.clear-night {background: #7c8d98 url('../img/interface/wetter/wetter_mond.png') no-repeat center 60px; background-size: 55%}
/*.hag_wetter .grid-x .cell.clear-night {background: #525252 url(../img/interface/wetter/night-sky.jpg) no-repeat center top; background-size: cover}
.hag_wetter .grid-x .cell.clear-night:before {content:'';position: absolute;left: 0;right: 0;top: 0;bottom: 0; background: url(../img/interface/wetter/wetter_nachts.png) no-repeat center 6px; background-size: 40%}*/



/* ==========================================================================
16. FOOTER
========================================================================== */
.footer {
  background:#171f17;
  color: #8aa0ae;
  padding: 4rem 0 0;
  font-size: 90%;
  position: relative;
  margin-top: -16px;
}
.footer .papier-oben {height: 34px;top: -34px;}
.footer .papier-oben img {-webkit-align-self: flex-end;align-self: flex-end;}
.footer .footer-ta-teaser {padding: 0 30px 30px; border-left: 1px solid rgba(255,255,255,0.3);position: relative;}
.footer .footer-ta-link {bottom: 20px;}
.footer .footer-ta-link::before {border: 0}
.footer .footer-menu-social {margin-bottom: 30px;}
.footer .footer-menu-social a {color: #e6e0d7;font-size: 40px;margin-bottom: 20px;margin-top: 8px;}
.footer .footer-menu-social a:hover {color: var(--main-color-orange)}
.footer .footer-menu-social a[href^="https:"]::after {display: none;} 

.footer p .large-btn {background: none;margin-right: 8px;}
.footer p .large-btn::before {    border: 2px solid rgb(254, 254, 254);}
.footer p .large-btn:hover::after {border:0}

.footer hr {border-bottom: 1px solid rgba(255,255,255,0.3);margin: 5px 0;}
.footer a[href^="https:"]::after, .footer a {color: #fff;}
.ta .footer strong {color: #fff}
.footer .column-block {
  margin-bottom: 30px;
}

.footer > .row {
  margin-bottom: 1rem;
}

.footer-name {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.footer-title, .ta .footer-title {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.footer-block {
  display: -webkit-box;display:-webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.5rem;
}

.footer-block .fa {
    font-size: 1.2rem;
    color: #ffffff;
        display: inline-block;
    width: 34px;
}

.footer-block p, footer p {
  margin-left: 0;
  line-height: 1.125rem;
  font-weight: 400;
  font-size: 90%;
}

.footer-bottom {
    background:#181e17;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.footer-bottom p,
.footer-bottom .menu {
  margin-bottom: 0;
  line-height: 2.75;
}

.footer-bottom .footer-bottom-links {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.footer-bottom .footer-bottom-links a {
  color: #8aa0ae;
}

@media screen and (max-width: 63.9375em) {
  .footer-bottom .footer-bottom-links {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 63.9375em) {
  .footer-bottom {
    text-align: center;padding-bottom: 60px;
  }
}





/* ==========================================================================
9. SCHNELLINFO FELDER
========================================================================== */
#schnell-infos .grid-container > .grid-x > .cell {margin-bottom: 20px;}

.callout.schnellinfo-callout {padding: 8px 0 0;background: #fefefe;height: 100%;border: 0;    min-height: 160px;}   
.callout.schnellinfo-callout h3 {    
    padding: 10px 20px 5px;margin-bottom: 5px;font-weight: 700;border-bottom: 2px solid #e5e0d4;} 
.callout.schnellinfo-callout h3 i {    
	position: absolute;
    right: 25px;
    top: 20px;
    font-size: 24px;
    color: rgb(0,107,50);}   
.callout.schnellinfo-callout h3 i.fa-download {font-size: 24px;top: 20px;}  
.callout.schnellinfo-callout h3 a {display: block;} 
.callout.schnellinfo-callout h3 a:hover {text-decoration: underline;}
.callout.schnellinfo-callout .schnellinfo-content {padding: 8px 20px 15px;
    /*height: calc(80% - 50px);*/}   
.callout.schnellinfo-callout .schnellinfo-content .cell.medium-6:first-child {padding-right: 0.9375rem;}
.callout.schnellinfo-callout .schnellinfo-content .cell.medium-6:last-child {border-left: 1px solid #9ebfae;padding-left: 0.9375rem;}



.schnellinfo-callout .fuetterungen .gehege {top: 0;}
.schnellinfo-callout .fuetterungen .tier-illu {max-height: 50px; max-width: 80px}
#feedings .grid-x {padding: 10px 0;}
#feedings .gehege {width: 36px;height: 36px;}
#feedings .fuetterungen .cell:first-child {padding-left: 15px;}

.schnellinfo-content .large-number {margin: 0;
    color: #103873;
    font-size: 54px;
    font-weight: 400;
    text-align: left;
    font-family: 'Averia Libre', sans-serif;
    line-height: 1;
    border: 0;}

.callout .stamp {
    font-family: 'Averia Libre', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 24px;
    color: #8a796b;
    width: 80%;
    margin: 25px auto 0;
    padding: 5px 15px 4px 15px;
    border: 3px dashed #c1b8b0;
    border-radius: 26px;
    transform: rotate(-10deg);
    text-align: center;
        background: #e6e0d7;
        outline: none;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    
}


#open-hours span {display: inline-block;}
#open-hours span.label {margin-bottom: 7px;}
#open-hours .highlight {    
  font-size: 0.7rem;
    display: inline-block;
    background: #1e6a33;
    color: #fff!important;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;}
#open-hours .highlight.closed {background: rgb(210,41,28);}
#open-hours .highlight.schliesstbald {background: #F2A513;}
#open-hours small {margin-top: 20px;display: inline-block;}


table.nostyle, table.nostyle thead, table.nostyle tbody, table.nostyle tbody tr:nth-child(even) {background: none; border: 0}
table.nostyle tbody th, table.nostyle tbody td {padding: 0.5rem 0rem 0.625rem;}
table.nostyle tbody td:last-child {text-align: right;}
.submenu table.nostyle tbody td:last-child {text-align: left;}

table.nostyle.whiteborder tr {border-bottom: 1px solid #ddd;}
table.nostyle.whiteborder tr:first-child {border-bottom: 2px solid #ddd;}
table tr.active, table tbody tr.active:nth-child(even), table tbody tr.active:nth-child(odd) {background: #f4eee6;}

table.lightborder tbody {border: 0;background: none}
table.lightborder tbody tr:nth-child(even), table.lightborder tbody tr:nth-child(odd) {background: none;}
table.lightborder tbody tr {border-bottom: 1px solid rgba(36, 14, 6, 0.2)}

/* Schnellinfo-Wetter-Panel */
@font-face {
    font-family: 'weather';
    src: url('weather-fonts/artill_clean_icons-webfont.eot');
    src: url('weather-fonts/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('weather-fonts/artill_clean_icons-webfont.woff') format('woff'),
         url('weather-fonts/artill_clean_icons-webfont.ttf') format('truetype'),
         url('weather-fonts/artill_clean_icons-webfont.ttf.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#smtw {
    color: #333;
    width: 100%;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
}
#smtw h2 {
    margin: 0;
    color: rgb(0,107,50);
    font-size: 54px;
    font-weight: 400;
    text-align: left;
    font-family: 'Averia Libre', sans-serif;
    border: 0;
    line-height: 1;
    display: inline-block;
}
#smtw h2 br {display: none;}
#smtw i {
    color: rgb(0,107,50);
    position: relative;
    font-family: 'weather';
    font-size: 300%;
    font-weight: normal;
    font-style: normal !important;
    line-height: 1;
    float: right;
    font-size: 7rem;
    

    display: none;
}
#smtw p {
    font-size: 68%;
    

    display: none;
}
#smtw p::after {content: " – Tierpark Hagenbeck";color: #006b32;display: inline-block;padding-left: 3px;font-weight: bold;}

.icon-0:before  { content: ":"; } .icon-1:before  { content: "p"; } .icon-2:before  { content: "S"; } .icon-3:before  { content: "Q"; } .icon-4:before  { content: "S"; } .icon-5:before  { content: "W"; } .icon-6:before  { content: "W"; } .icon-7:before  { content: "W"; } .icon-8:before  { content: "W"; } .icon-9:before  { content: "I"; } .icon-10:before { content: "W"; } .icon-11:before { content: "I"; } .icon-12:before { content: "I"; } .icon-13:before { content: "I"; } .icon-14:before { content: "I"; } .icon-15:before { content: "W"; } .icon-16:before { content: "I"; } .icon-17:before { content: "W"; } .icon-18:before { content: "U"; } .icon-19:before { content: "Z"; } .icon-20:before { content: "Z"; } .icon-21:before { content: "Z"; } .icon-22:before { content: "Z"; } .icon-23:before { content: "Z"; } .icon-24:before { content: "E"; } .icon-25:before { content: "E"; } .icon-26:before { content: "3"; } .icon-27:before { content: "a"; } .icon-28:before { content: "A"; } .icon-29:before { content: "a"; } .icon-30:before { content: "A"; } .icon-31:before { content: "6"; } .icon-32:before { content: "1"; } .icon-33:before { content: "6"; } .icon-34:before { content: "1"; } .icon-35:before { content: "W"; } .icon-36:before { content: "1"; } .icon-37:before { content: "S"; } .icon-38:before { content: "S"; } .icon-39:before { content: "S"; } .icon-40:before { content: "M"; } .icon-41:before { content: "W"; } .icon-42:before { content: "I"; } .icon-43:before { content: "W"; } .icon-44:before { content: "a"; } .icon-45:before { content: "S"; } .icon-46:before { content: "U"; } .icon-47:before { content: "S"; }


/* ==========================================================================
10. TIER-LEXIKON & ÜBERSICHT
========================================================================== */

#item-group {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#item-group .header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
    border-bottom: 1px solid #efefef;
    margin-bottom: 1.5rem;
    border-top: 1px solid #efefef;
    margin-top: 20px;
    padding: 7px 0;
}
#item-group .header h3 {margin-top: 1.15rem;font-size: 1.38rem;margin-right: 10px;}
#item-group ul.list {margin-left: 0;margin-right: 0;}
#item-group ul.list > li {display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;margin-top: 10px;margin-bottom: 40px;}

#item-group .header .btn-group button {
  background: #efefef;
  border: none;
  outline: none;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
      padding: 8px 10px;
      font-size: 26px;
      cursor: pointer;
      color: #113874;
}
#item-group .header .btn-group button.active {
  background: #cecece;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#item-group .cell {-webkit-transition: all .5s ease;transition: all .5s ease;margin-top: 0;}

#item-group.gridview {
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
}
#item-group.list {
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  border: none;
}

li.item:hover .lexikon_thumb {
    transform: scale(1.1);
}

@media (max-width: 640px) {
  #item-group .header {display: none;}
  #item-group.list .item {
    width: 100%;
    padding: 2.5%;
    padding-bottom: calc(2.5% + 10px);
  }
  #item-group .header .btn-group {display: none;}
  #item-group .header h2 {padding: 0 1rem;}
  #item-group form {    padding: 0 1rem;}
}

#item-group.list ul.list > li {
	margin-top: 0;
	width: calc(100% - 1.875rem);
}
#item-group.list ul.list .tier-card {
	display: -webkit-box;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    align-items: center;
    padding: 20px;
}
#item-group.list ul.list .tier-card header {
	width: auto;
	height: auto;
}
.tiere-ta #item-group.list ul.list .tier-card header {
    width: 100%;
    height: auto;
    flex: 0 0 320px;
}
#item-group.list ul.list .tier-card header .avatar {
	position: relative;
    min-width:  200px;
    left: auto;
    top: auto;
    margin-left: 0;
}
#item-group.list ul.list .tier-card .search-content {
-webkit-box-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;  
    flex: 1 1 auto;
	text-align: left;
	    padding: 1rem 1.5rem;
}
#item-group.list ul.list .tier-card .search-content .tier-card h3::after {left: 0;margin-left: 0}
#item-group.list ul.list .tier-card .search-content h3, #item-group.list ul.list .tier-card .search-content .desc {text-align: left;margin-top: 0;}

#item-group.list ul.list .tier-card footer {height: 100%;min-width: 200px;}
#item-group.list ul.list .tier-card footer::before {
	top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    background: #e2e0d7;
      -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
}
#item-group.list ul.list .tier-card p {position: relative;    height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}


.tier-card {
	position: relative;
	background: #f4f2ee;
	box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	padding: 0 10px;
    -webkit-box-flex: 1;
    width:  100%;
    -webkit-flex: 1;    
    -ms-flex: 1;    
    flex: 1; 
}
.tier-card header {
    position: relative;
    width: calc(100% + 18px);
    height: auto;
    margin-top: 0;
    left: -9px;
    z-index: 0;
    padding:  15px;
}
.tier-card header figure {margin: 0;}
.tier-card header figure img {margin-bottom: 0;border-radius: 6px 6px 0 0}

/* TA Modification  */
li.TA .tier-card header {padding: 0;}
li.TA .tier-card header .avatar {height: auto;border: 0;   background: #f4f2ee;
    border: 14px solid #f4f2ee;}
li.TA .tier-card header .avatar img { position: relative;top: 0;left: 0; -webkit-transform: translate(0, 0);transform: translate(0, 0);   max-width: 100%;width:  100%; height:  auto;max-height: 100%;}
li.TA .tier-card figure img {display: none;}
li.TA .tier-card .gehege {display: none;}
li.TA .tier-card h3 {color: var(--main-color-blue)}

/* Illu-Variante 1

.tier-card header .avatar {
    position: absolute;
    right: 15px;
    bottom: -20px;
    z-index: 5;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e0d8;
    border: 3px solid #fff;
} */
/* Illu-Variante 2

.tier-card header .avatar {
    position: absolute;
    bottom: -38px;
    z-index: 1;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e0d8;
    border: 8px solid #fff;
    left: 50%;
    margin-left: -90px;} */

/* Illu Variante 3 */
.tier-card header .avatar {
    z-index: 1;
    width: 100%;
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
    background: #f4f2ee;
    border: 4px dashed #e2e0d8;}

.tier-card header .avatar img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 145px;
    max-height: 145px;
}
.tier-card header .status {
	top: 150px;
    position: absolute;
    z-index: 99;
    left: calc(50% - 63px);
    border: 3px solid #fff;
    width: 36px;
    height: 36px;
}
.tier-card .gehege {
    position: relative;
    top: 0px;
    width: 36px;
    height: 36px;
    margin-right: 8px;
}
#item-group.list .tier-card .gehege { 
    width: 80px;
    height: 80px;
    margin-right: 0;
    border-radius: 80px;
    font-size: 36px;
    font-family: 'Averia Libre', sans-serif;}
.tier-card h3 {
    position: relative;
    margin: 5px 0 20px;
    text-align: center;
    border-radius: 20px;
}



/* .tier-card h3::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
	height: 1px;
	background: #000;
} */
.tier-card .search-content {
	padding: 0 1rem 1.5rem;
	text-align: center;
	line-height: 1.5;
	color: #777;
    -webkit-box-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.tier-card .details {
	display: -webkit-box;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 40px;
    width: 60%;
}
.tier-card footer {
    position: relative;
    height: 55px;
    text-align: center;
}
.tier-card footer p {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.tier-card footer p a {
    padding: 0.4rem 1.5rem;
    color: #1e6b33;
    -webkit-transition: color .4s;
    transition: color .4s;
    background: none;
    border-color: #1e6b33;
}
.tier-card footer p a.large-btn {font-weight: 500;}
.tier-card footer p a.large-btn::before {border: 2px solid rgb(30, 106, 51);}
.tier-card footer p a.large-btn::after {background-color: transparent}
.tier-card footer p a.large-btn:hover {    
	color: #fff;
    text-decoration: none;
    background: #1e6b33;} 
.tier-card footer p a.large-btn:hover::after {opacity: 0;}   
.tier-card footer::before {
	z-index: 0;
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	background: inherit;
	-webkit-transform: skewY(5deg);
	transform: skewY(5deg);
	-webkit-transform-origin: 100%;
	transform-origin: 100%;
}

.TA .tier-card footer p a.large-btn::before {border: 2px solid var(--main-color-blue)}
.TA .tier-card footer p a {color: var(--main-color-blue); border-color: var(--main-color-blue)}
.TA .tier-card footer p a.large-btn:hover {background: var(--main-color-blue)}

/* RESPONSIVE */
@media only screen and (max-width: 810px) {
  .tier-card {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* LEXIKON SEARCH */
.lexikon-search {
	position: relative;
	padding: 0;
	margin: 35px 0 30px;
	border: none;
	overflow: visible;
}
.lexikon-search input {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 10px 8px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	-webkit-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out;
	font-size: 120%;
	outline: none;
	cursor: text;
	margin-bottom: 0;
	height: 3rem;
	background: rgba(96, 125, 139, 0.15);
	border-radius: 50px;
}
.lexikon-search input:focus {border: 0;box-shadow: none; background: rgba(96, 125, 139, 0.1);border-radius: 0}
.lexikon-search input::-webkit-input-placeholder {
	-webkit-transition: color 300ms ease;
	transition: color 300ms ease;
}
.lexikon-search input:not(:focus)::-webkit-input-placeholder {color: transparent;}
.lexikon-search input:not(:focus)::placeholder {color: transparent;}
.lexikon-search hr {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	height: 2px;
	border: none;
	background: #d12b1d;
	font-size: 1px;
	will-change: transform, visibility;
	-webkit-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
	-webkit-transform: scaleX(0);
	        transform: scaleX(0);
	visibility: hidden;
	z-index: 10;
}
.lexikon-search i {
	position: absolute; 
    left: 13px;
    top: 9px;
    font-size: 30px;
	color:#607d8b; -webkit-transition: all 650ms ease-out;
	transition: all 650ms ease-out;
	}
.lexikon-search input:focus ~ hr {
	-webkit-transform: scaleX(1);
	        transform: scaleX(1);
	visibility: visible;
}
.lexikon-search input:focus ~ i {
	position: absolute;left: calc(100% - 60px);
}
.lexikon-search label {
	position: absolute;
	top: 7px;
	left: 50px;
	font-size: 120%;
	color: #607D8B;
	-webkit-transform-origin: 0 -150%;
	        transform-origin: 0 -150%;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	transition: all 300ms ease;
	transition: all 300ms ease, all 300ms ease;
	pointer-events: none;
}
.lexikon-search input:focus ~ label,
.lexikon-search input:valid ~ label {
	-webkit-transform: scale(0.6);
	        transform: scale(0.6);
	left: 10px;  
	top:-1px;
	color: #d12b1d
}

/* GATTUNGEN BREADCRUMBS */
#gattungen {
  list-style: none;
  display: inline-block;
  margin-left: 0;
  	display: -webkit-box;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      margin: 20px 0 10px 10px; 
          flex-wrap: wrap;
          justify-content:  center;
}
#gattungen .icon {
  font-size: 14px;
}
#gattungen li {
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
    flex: 0 1 auto;
margin-top:  5px; 
}
#gattungen li a {
  color: #FFF;
  display: block;
  background: #2c6b2d;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  pointer-events: none
}
#gattungen li:nth-child(even) a {
  background-color: #2c6b2d;
}
#gattungen li:nth-child(even) a::before {
  border-color: #2c6b2d;
  border-left-color: transparent;
}
#gattungen li:nth-child(even) a::after {
  border-left-color: #2c6b2d;
}
#gattungen li:first-child a {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
  background: #333;
}
#gattungen li:first-child a::after {border-left-color: #333;}
#gattungen li:nth-of-type(2) a {background: rgb(0,107,50);}
#gattungen li:nth-of-type(2) a::before {border-color: rgb(0,107,50);border-left-color: transparent;}
#gattungen li:nth-of-type(2) a::after {border-left-color: rgb(0,107,50);}
#gattungen li:nth-of-type(3) a {background: #128246;}
#gattungen li:nth-of-type(3) a::before {border-color: #128246;border-left-color: transparent;}
#gattungen li:nth-of-type(3) a::after {border-left-color: #128246;}
#gattungen li:nth-of-type(4) a {background: #379e67;}
#gattungen li:nth-of-type(4) a::before {border-color: #379e67;border-left-color: transparent;}
#gattungen li:nth-of-type(4) a::after {border-left-color: #379e67;}
#gattungen li:nth-of-type(5) a {background: #52b781;}
#gattungen li:nth-of-type(5) a::before {border-color: #52b781;border-left-color: transparent;}
#gattungen li:nth-of-type(5) a::after {border-left-color: #52b781;}
#gattungen li:nth-of-type(6) a {background: #52b781;}
#gattungen li:nth-of-type(6) a::before {border-color: #52b781;border-left-color: transparent;}
#gattungen li:nth-of-type(6) a::after {border-left-color: #52b781;}

#gattungen li:first-child a::before {
  border: none;
}
#gattungen li:last-child a {
  padding-right: 15px;
  border-radius: 0 20px 20px 0;
}
#gattungen li:last-child a::after {
  border: none;
}
#gattungen li a::before, #gattungen li a::after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #2c6b2d;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#gattungen li a::before {
  left: -20px;
  border-left-color: transparent;
}
#gattungen li a::after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}
#gattungen li a:active {
  background-color: #16a085;
}
#gattungen li a:active::before {
  border-color: #16a085;
  border-left-color: transparent;
}
#gattungen li a:active::after {
  border-left-color: #16a085;
}
@media screen and (max-width: 540px) { 
    #gattungen {-webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-bottom: 30px;}
    #gattungen li {display: block;width: 100%;}
    #gattungen li a::after, #gattungen li a::before {display: none;}
    #gattungen li:first-child a, #gattungen li:last-child a {border-radius: 0}
    .status_gefahr {width: 20%;}
    .dashboard-nav-card-title img {max-width: 100px;}
}


/* ==========================================================================
11. EVENTS
========================================================================== */
#events .event-container {margin: 45px 0;}
#events .date-square {width: 60px;height: 60px;color: #FFF;background: #F2A513;font-family: 'Averia Libre', Arial, sans-serif; position: relative;border-radius: 80px;margin-bottom: 40px;}
#events .date-square:nth-child(2)::before {
    content: 'bis';
    color: #F2A513;
    position: absolute;
    width: auto;
    height: 29px;
    bottom: 100%;
    font-size: 18px;
    left: 50%;
    margin-left: -11px;
    line-height: 1;} 
#events .grid-x > div.cell:nth-child(2) .date-square {background: #CC8B10}
#events .grid-x > div.cell:nth-child(2) .date-square::before {color: #CC8B10}
#events .grid-x > div.cell:nth-child(3) .date-square {background: #7F6430}    
#events .grid-x > div.cell:nth-child(3) .date-square::before {color: #7F6430}
#events .grid-x > div.cell:nth-child(4) .date-square {background: #584516}    
#events .grid-x > div.cell:nth-child(4) .date-square::before {color: #584516}

#events .date {font-size: 1.5rem;font-weight: 700;line-height: 1.2;}
#events .month {font-size: 0.9rem;font-family: 'Lato', sans-serif;position: relative;top: -3px;}

#events h3 {margin-top: 0;margin-bottom: inherit;}
#events h4 {color: #95989A; font-weight: 700;font-size: 1.1rem;margin-top: 30px;margin-bottom: 0;}
#events .all-dates {list-style-type: none;font-size: 0.9rem;margin: 0;}
#events .all-dates li {padding-top: 10px;padding-right: 20px;}
#events .all-dates li:last-child {padding-right: 0;}
/*#events .all-dates li > i {float: left;position: relative;top: 3px;margin-right: 5px;}*/
#events .full-date {display: inline-block;color: #006b32;font-weight: 600;}
#events .full-time {display: block;} 
#events .event-img {min-width: 300px;max-width: 360px;width: 22vw;border-radius: 6px;}
#events .event-details {width: 50px;font-size: 30px;padding-bottom: 10px;position: relative;top: -1px;right: -1px;border-radius: 6px}
#events .event-details a {color: #006b32;}



/* ==========================================================================
12. TIMELINE (Fütterungen)
========================================================================== */
#fuetterungen {padding-bottom: 80px;}
.timeline ul, .timeline ol, .horizontal-timeline ol { list-style: none;}
.horizontal-timeline { opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.horizontal-timeline::before {  /* never visible - this is used in jQuery to check the current MQ */
content: 'mobile'; display: none; }
.horizontal-timeline.loaded {  /* show the timeline after events position has been set (using JavaScript) */
opacity: 1; }
.horizontal-timeline .timeline { position: relative; height: 400px; margin: 0 auto; }
.horizontal-timeline .events-wrapper { position: relative; height: 100%; margin: 0 40px; overflow: hidden; }
.horizontal-timeline .events-wrapper::after, .horizontal-timeline .events-wrapper::before {  /* these are used to create a shadow effect at the sides of the timeline */
content: ''; position: absolute; z-index: 2; top: 0; height: 100%; width: 40px; }
.horizontal-timeline .events-wrapper::before { left: 0; background-image: -webkit-linear-gradient(left, #fff, rgba(248, 248, 248, 0)); background-image: linear-gradient(to right, #fff, rgba(248, 248, 248, 0)); }
.horizontal-timeline .events-wrapper::after { right: 0; background-image: -webkit-linear-gradient(right, #fff, rgba(248, 248, 248, 0)); background-image: linear-gradient(to left, #fff, rgba(248, 248, 248, 0)); }
.horizontal-timeline .events {  /* this is the grey line/timeline */
position: absolute; z-index: 1; left: 0; top: 50%; height: 2px;  /* width will be set using JavaScript */ background: #dfdfdf; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; }
.horizontal-timeline .filling-line {  /* this is used to create the green line filling the timeline */
position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; background-color: #d32a1c; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.horizontal-timeline .events a { position: absolute; bottom: 0; z-index: 2; text-align: center; font-size: 1.3rem; padding-bottom: 15px; color: #fff;  /* fix bug on Safari - text flickering while timeline translates */ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
.horizontal-timeline .events a span { display: inline-block; position: absolute; top: 80px; background: rgb(0,107,50); color: #fff; padding: 4px 10px 5px; margin-left: -43px; font-size: 1rem; white-space: nowrap;border-radius: 6px }
.horizontal-timeline .events a span.ta-fuetterung { background: rgb(0,56,116); left: 0 }
.horizontal-timeline .events a span i.amount { background: rgb(210, 41, 28); color: #fff; width: 24px; height: 24px; font-size: 0.9rem; border-radius: 20px; font-weight: 700; position: absolute; right: -12px; top: -12px; font-style: normal; visibility: hidden; }
.horizontal-timeline .events a span.full-hour { top: 150px; }
.horizontal-timeline .events a span.ta-fuetterung {background: rgb(0,56,116);left: 0;}
.horizontal-timeline .events a.older-event span, .horizontal-timeline .events a.older-event span.full-hour.ta-fuetterung { background: #E6ECF0; color: #95989A; }
.horizontal-timeline .events a.selected span { background: #d32a1c; color: #fff; }
.horizontal-timeline .events a span::after { content: ""; position: absolute; width: 2px; background: rgb(0,107,50); top: -58px; height: 58px; left: 50%; margin-left: 2px; z-index: 0; }
.horizontal-timeline .events a span.ta-fuetterung::after {background: rgb(0,56,116)}
.horizontal-timeline .events a span.full-hour::after { top: -128px; height: 128px; }
.horizontal-timeline .events a.older-event span::after { background: #E6ECF0; }
.horizontal-timeline .events a.selected span::after { background: #d32a1c; }
.horizontal-timeline .events li:nth-child(2n+1) a span { top: -75px; margin-left: -42px; }
.horizontal-timeline .events li:nth-child(2n+1) a span.full-hour { top: -145px; }
.horizontal-timeline .events li:nth-child(2n+1) a span::after { top: 30px; }
.horizontal-timeline .events a::after {  /* this is used to create the event spot */
content: ''; position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -7px; height: 16px; width: 16px; border-radius: 50%; border: 2px solid rgb(0,107,50); background-color: rgb(0,107,50); -webkit-transition: background-color 0.3s, border-color 0.3s; transition: background-color 0.3s, border-color 0.3s; }
.horizontal-timeline .events a.older-event::after { background: #fff }
.no-touch .horizontal-timeline .events a:hover::after { background-color: #d32a1c; border-color: #d32a1c; }
.horizontal-timeline .events a.selected { pointer-events: none; }
.horizontal-timeline .events a.selected::after { background-color: #d32a1c; border-color: #d32a1c; }
.horizontal-timeline .events a.older-event::after { border-color: #d32a1c; }
@media only screen and (min-width:1100px) {
	.horizontal-timeline::before {    /* never visible - this is used in jQuery to check the current MQ */
	content: 'desktop'; }
    .horizontal-timeline .events {}
}

.timeline-navigation a {  /* these are the left/right arrows to navigate the timeline */
position: absolute; z-index: 5; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform: translateY(-50%); height: 34px; width: 34px;overflow: hidden; color: transparent; white-space: nowrap; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; }
.timeline-navigation a::after {  /* arrow icon */
content: '\f04b'; font-family: 'FontAwesome'; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: rgb(0,107,50); font-size: 30px; }
.timeline-navigation a.prev { left: 0; content: '\f04b'; font-family: 'FontAwesome'; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
.timeline-navigation a.next { right: 0; }
.no-touch .timeline-navigation a:hover::after { color: #d32a1c; }
.no-touch .timeline-navigation a.inactive:hover::after {color: rgb(0,107,50)}
.timeline-navigation a.inactive { cursor: not-allowed; }
.timeline-navigation a.inactive::after { background-position: 0 -16px;     color: #d2e8d8;}
.no-touch .timeline-navigation a.inactive:hover { border-color: #dfdfdf; }
.events-content { position: relative; width: 100%; margin: 2rem 0 3rem; overflow: hidden; -webkit-transition: height 0.4s; transition: height 0.4s; }
.events-content h3 {margin-bottom: inherit;}
.events-content li { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; -webkit-transform: translateX(-100%);  -ms-transform: translateX(-100%); transform: translateX(-100%); padding: 0 5%; opacity: 0; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
.events-content li.selected {  /* visible event content */
position: relative; z-index: 2; opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0);transform: translateX(0); }
.events-content li.enter-right, .events-content li.leave-right { -webkit-animation-name: enter-right; animation-name: enter-right; }
.events-content li.enter-left, .events-content li.leave-left { -webkit-animation-name: enter-left;  animation-name: enter-left; }
.events-content li.leave-right, .events-content li.leave-left { -webkit-animation-direction: reverse; animation-direction: reverse; }
.events-content li > * { margin: 0 auto; }
.events-content p { line-height: 1.6; }
.events-content .fuetterung-zeit {    
  font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
    color: rgb(0,107,50);
    font-size: 0.9rem; }
.events-content .fuetterung-img {    
  border-radius: 6px;
    float: left;
    margin-right: 10px;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 20px;
margin-bottom: 20px;}
@-webkit-keyframes enter-right {
	0% { opacity: 0; -webkit-transform: translateX(100%); }
	100% { opacity: 1; -webkit-transform: translateX(0%); }
}
@keyframes enter-right {
	0% { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }
	100% { opacity: 1; -webkit-transform: translateX(0%); -ms-transform: translateX(0%);transform: translateX(0%); }
}
@-webkit-keyframes enter-left {
	0% { opacity: 0; -webkit-transform: translateX(-100%); }
	100% { opacity: 1; -webkit-transform: translateX(0%); }
}

@keyframes enter-left {
	0% { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
	100% { opacity: 1; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }
}
@media screen and (max-width: 720px) {
	.horizontal-timeline .events-wrapper {margin: 0;}
		.timeline-navigation a {-webkit-transform: translateY(-50%) scale(2);transform: translateY(-50%) scale(2);background: #FFF;}
	.timeline-navigation a.prev {-webkit-transform: translateY(-50%) rotate(180deg) scale(2);transform: translateY(-50%) rotate(180deg) scale(2);}
    .timeline ul, .timeline ol, .horizontal-timeline ol {margin: 0;}
}

/* ==========================================================================
13. ÜBERBLICK
========================================================================== */
.ueberblick {margin-top: 40px;position: relative;background: #e5f1ea}
.ueberblick .info-grid {margin: 0 auto; max-width: 1540px}
.ueberblick .cell {min-height: 250px;}
.ueberblick .cell .content {padding: 20px 30px;}
.ueberblick .cell .content h3 {color: #FFF;font-size: 2rem;margin-bottom: 1rem;margin-top: 1.25rem;}
.ueberblick .cell .content p {font-size: 0.9rem;color: rgba(255,255,255,1);font-weight: 400;}
.ueberblick .cell .content {
	display: -ms-flexbox;
    display: -webkit-box;display:-webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.ueberblick .cell .content a {margin-top: auto;margin-left: auto;}
.ueberblick .cell .content .bottom {margin-top: auto;width: 100%;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.ueberblick .cell .content .large-btn {font-size: 0.8rem;padding: 0.5rem 1.25rem;font-weight: 400;background: transparent}
.ueberblick .cell .content .large-btn:hover {color: #FFF;}
.ueberblick .cell .content .large-btn::before {border: 2px solid #fff}
.ueberblick .cell .content .icon {margin-right: auto;max-width: 100px;display: none;}
.ueberblick .cell .content .icon img {max-height: 70px;}
.ueberblick .background-mood-1 {background: url('../img/bilder/20111030_LS_01.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-2 {background: url('../img/bilder/GB_20160121_02.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-3 {background: url('../img/bilder/20130921_LS_097.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-4 {background: url('../img/bilder/20130708_LS_44.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-5 {background: url('../img/bilder/20111030_LS_02.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-6 {background: url('../img/bilder/20111030_LS_03.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-7 {background: url('../img/bilder/20111030_LS_04.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-8 {background: url('../img/bilder/bi_hai.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-9 {background: url('../img/bilder/bi_krokodil.jpg') no-repeat center center; background-size: cover}
.ueberblick .background-mood-10 {background: url('../img/bilder/bi_schlange.jpg') no-repeat center center; background-size: cover}
.ueberblick .green-35 .content h3, .ueberblick .green-35 .content p, .ueberblick .green-50 .content h3, .ueberblick .green-50 .content p, .ueberblick .green-10 .content h3, .ueberblick .green-10 .content p, .ueberblick .green-20 .content h3, .ueberblick .green-20 .content p, .ueberblick .green-5 .content h3, .ueberblick .green-5 .content p {color: #333}



/* ==========================================================================
   PICTURE GALLERY GRID
========================================================================== */
.gallery .grid {
  position: relative;
  margin: 0 auto;
}

.js .grid::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.5) url(../js/gallery/loading.svg) no-repeat 50% 75px;
  background-size: 60px auto;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.js .grid--loaded::after {
  opacity: 0;
}

.grid__item {
  width: 33%;
  padding: 10px 10px 0 0;
}

.grid__item--current {
  opacity: 0 !important;
}

.img-wrap {
  display: block;
}

.img-wrap:focus,
.img-wrap:hover {
  outline: none;
}

.img-wrap img {
  display: block;
  max-width: 100%;
      border-radius: 6px;
}

.preview {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 75%;
  pointer-events: none;
}

.preview::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: #1f1d1d;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.preview--open {
  pointer-events: auto;
}

.preview--open::before {
  opacity: 1;
}

.gallery .clone {
  position: fixed;
  z-index: 110;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
}

.gallery .original {
  position: relative;
  z-index: 120;
  display: block;
  margin: auto 0;
  object-fit: contain;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  -webkit-backface-visibility: hidden;
}

.preview--open .animate {
  /* open */
  -webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
  transition: transform 0.6s, opacity 0.2s;
}

.gallery .animate {
  /* close */
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.gallery .description {
  color: #fff;
}

.js .description--grid {
  display: none;
}

.description--preview {
  font-size: 2em;
  font-size: 1.5em;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 140;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 25vh;
  text-align: center;
  padding: 1em 3vw;
  opacity: 0;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}

.preview--open .description--preview {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/* Close button */

.action {
    font-size: 4.5rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: top;
    color: #fbfbfb;
    border: none;
    background: #006B32;
    border-radius: 0 0 0 300px;
}

.action:hover,
.action:focus {
  color: #D1291B;
  background: #fff;
  outline: none;
}

.action--close {
  position: fixed;
  z-index: 150;
  top: 0;
  right: 0;
  padding: 60px;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: scale3d(0.6, 0.6, 1);
  transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.gallery .text-hidden {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  color: transparent;
}

.gallery .button {
  font-size: 0.5em;
  font-weight: bold;
  margin: 0;
  padding: 1em 2em;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 2em;
  background: none;
}

.gallery .button--view {
  margin-top: 2em;
}

/* ==========================================================================
   COOKIE HINWEIS
========================================================================== */


.cookie-disclaimer.fixed {
  position: fixed;
  will-change: transform;
}

.cookie-disclaimer.fixed--bottom {
    bottom: 20px;
    left: 20px;
    right: 50%;
    border-radius: 10px;
}

.cookie-disclaimer button {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
}

.cookie-disclaimer .button {
  border-style: solid;
  border-width: 2px;
  padding: 0.5em 1em;
  position: relative;
}

.cookie-disclaimer .button::after {
  background-color: #800202;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  will-change: opacity;
  z-index: -1;
}

.cookie-disclaimer .button:focus::after,
.cookie-disclaimer .button:hover::after {
  opacity: 1;
}

/* modules/cookie-disclaimer.css */

.cookie-disclaimer {
  background-color: #1e6b31;
  color: #fff;
  font-size: 12px;
  font-size: 0.75rem;
  opacity: 0;
  padding: 12px;
  padding: 1rem 1rem 1.25rem;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.5s;
  transition: opacity 0.3s, -webkit-transform 0.5s;
  transition: opacity 0.3s, transform 0.5s;
  transition: opacity 0.3s, transform 0.5s, -webkit-transform 0.5s;
  z-index: 200;
}

.cookie-disclaimer.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.cookie-disclaimer :first-child {
  margin-top: 0;
}

.cookie-disclaimer :last-child {
  margin-bottom: 0;
}

.cookie-disclaimer .media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cookie-disclaimer .media--center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cookie-disclaimer .media__object--left {
  margin-right: 1em;
}

.cookie-disclaimer .media__object--right {
  margin-left: 1em;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.cookie-disclaimer .media__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.cookie-disclaimer .media__body p {font-weight: 400;font-size: 0.93rem;}
.cookie-disclaimer .media__body a {color:#fff;font-weight: bold;text-decoration: underline;}
/* ==========================================================================
14.	 FAQs
========================================================================== */
#faq {margin-bottom: 80px;}
#barrierefreiheit ul li {font-size: calc(0.75rem + 0.3vw);font-weight: 300;}

.cd-faq {
  width: 100%;
  margin: 2em auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  height: 100vh;
}
.cd-faq::after {
  clear: both;
  content: "";
  display: table;
}
@media only screen and (min-width: 720px) {
  .cd-faq {
    position: relative;
    margin: 0;
    box-shadow: none;
    height:  100%;
  }
}
.cd-faq-categories {list-style:none;padding: 0;margin: 0;}
.cd-faq-categories a {
  position: relative;
  display: block;
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  padding: 0 28px 0 16px;
  background-color: #1e6b33;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
  white-space: nowrap;
  border-bottom: 1px solid #488c64;
  text-overflow: ellipsis;
}
.cd-faq-categories a::before, .cd-faq-categories a::after {
  /* plus icon on the right */
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-block;
  height: 1px;
  width: 10px;
  background-color: #7f868e;
}
.cd-faq-categories a::after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cd-faq-categories li:last-child a {
  border-bottom: none;
}
@media only screen and (min-width: 720px) {
  .cd-faq-categories {
    width: 20%;
    float: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  .cd-faq-categories a {
    font-size: 13px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding-left: 24px;
    padding: 0 24px;
    -webkit-transition: background 0.2s, padding 0.2s;
    transition: background 0.2s, padding 0.2s;
  }
  .cd-faq-categories a::before, .cd-faq-categories a::after {
    display: none;
  }
  .no-touch .cd-faq-categories a:hover {
    background: #174e27;
  }
  .no-js .cd-faq-categories {
    width: 100%;
    margin-bottom: 2em;
  }
}

@media only screen and (min-width: 1024px) {
  .cd-faq-categories {
    position: absolute;
    top: 0;
    left: 0!important;
    width: 200px;
    z-index: 2;
    list-style: none;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
  }
  .cd-faq-categories a::before {
    /* decorative rectangle on the left visible for the selected item */
    display: block;
    top: 0;
    right: auto;
    left: 0;
    height: 100%;
    width: 10px;
    background-color: var(--main-color-red);
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .cd-faq-categories a:hover {text-decoration: none;}
  .cd-faq-categories a:hover::before {opacity: 1;background-color: #F2A513;}
  .cd-faq-categories .selected {
    background: #174e27 !important
  }
  .cd-faq-categories .selected::before {
    opacity: 1;
  }
  .cd-faq-categories.is-fixed {
    /* top and left value assigned in jQuery */
    position: sticky;
        left: 85px!important;
            top: 80px!important;
  }
  .no-js .cd-faq-categories {
    position: relative;
  }
}

.cd-faq-items {
 position: absolute;
    height: 100%;
    width: 80%;
    top: 10px;
    right: 0;
    background: #ffffff;
    padding: 0 5% 1em;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) translateX(100%);
    -ms-transform: translateZ(0) translateX(100%);
    transform: translateZ(0) translateX(100%);
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
}
.cd-faq-items.slide-in {
  -webkit-transform: translateZ(0) translateX(0%);
  -ms-transform: translateZ(0) translateX(0%);
  transform: translateZ(0) translateX(0%);
}
.no-js .cd-faq-items {
  position: static;
  height: auto;
  width: 100%;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
@media only screen and (min-width: 720px) {
  .cd-faq-items {
    position: static;
    height: auto;
    width: 78%;
    float: right;
    overflow: visible;
    -webkit-transform: translateZ(0) translateX(0);
    -ms-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    padding: 0;
    background: transparent;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-faq-items {
    float: none;
    width: 100%;
    padding-left: 220px;
    box-shadow: none;
  }
  .no-js .cd-faq-items {
    padding-left: 0;
  }
}

.cd-close-panel {
position: absolute;
top: 0px;
right: -100%;
display: block;
height: 40px;
width: 40px;
overflow: hidden;
white-space: nowrap;
z-index: 11;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: right 0.4s;
transition: right 0.4s;
background: #d32a1c;
color: #fff;
text-align: center;
padding: 7px 0;
font-weight: bold;
}
.cd-close-panel::before, .cd-close-panel::after {
  /* close icon in CSS */
  position: absolute;
  top: 16px;
  left: 12px;
  display: inline-block;
  height: 3px;
  width: 18px;
  background: #6c7d8e;
}
.cd-close-panel::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-close-panel::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.cd-close-panel.move-left {
     left: auto;
     top: 10px;
    right: 80%;
}
@media only screen and (min-width: 720px) {
  .cd-close-panel {
    display: none;
  }
}

.cd-faq-group {
  /* hide group not selected */
  display: none;
}
.cd-faq-group {list-style-type: none;}
.cd-faq-group.selected {
  display: block;
}
.cd-faq-group .cd-faq-title {
  background: transparent;
  box-shadow: none;
  margin: 1em 0;
      margin-left: 0;
}
.no-touch .cd-faq-group .cd-faq-title:hover {
  box-shadow: none;
}
.cd-faq-group .cd-faq-title h2 {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: var(--main-color-green);
}
.no-js .cd-faq-group {
  display: block;
}
@media only screen and (min-width: 720px) {
  .cd-faq-group {
    /* all groups visible */
    display: block;
  }
  .cd-faq-group > li {
    background: #ffffff;
    margin-bottom: 6px;
  }
  .no-touch .cd-faq-group > li:hover a {
    background: #dae0e3;
  }
  .cd-faq-group .cd-faq-title {
    margin: 2em 0 1em;
  }
  .cd-faq-group:first-child .cd-faq-title {
    margin-top: 0;
  }
}

.cd-faq-trigger {
  position: relative;
  display: block;
  margin: 1.6rem 0 .4rem;
  line-height: 1.2;
}
@media only screen and (min-width: 720px) {
  .cd-faq-trigger {
    font-size: 1rem;
    font-weight: 400;
    padding: 14px 72px 14px 24px;
    background: #e6ecf0;
    border-radius: 6px;
    color: #333;
  }
  .cd-faq-trigger::before, .cd-faq-trigger::after {
    /* arrow icon on the right */
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    height: 2px;
    width: 13px;
    background: var(--main-color-green);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .cd-faq-trigger::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 32px;
  }
  .cd-faq-trigger::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .content-visible .cd-faq-trigger::before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .content-visible .cd-faq-trigger::after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

@media only screen and (min-width: 720px) {
  .cd-faq-content {
    display: none;
    padding: 0 24px 30px;
  }
  .no-js .cd-faq-content {
    display: block;
  }
}

/* ==========================================================================
19. NEWS Container
========================================================================== */
  .news-panel {margin-top: 20px;}
  .news-panel::before, .news-panel::after {
    display: table;
    content: ' ';
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .news-panel::after {
    clear: both;
  }

  @media print, screen and (min-width: 40em) {
    .news-panel {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem;
    }
  }

  .news-panel:last-child:not(:first-child) {
    float: right;
  }

  .news-panel, .news-panel:last-child {
    float: none;
  }

  .news-panel .panel-content {
    padding: 0.9375rem 0;
  }

  .news-panel .posts-list .post-item:not(:last-child) {
    border-bottom: 0.0625rem solid #e6e6e6;
  }

  .news-panel .post-item {
    max-width: 75rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2.5rem 0;
  }

  .news-panel .post-item::before, .news-panel .post-item::after {
    display: table;
    content: ' ';
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .news-panel .post-item::after {
    clear: both;
  }

  .news-panel .post-item .post-thumbnail {
    display: block;
    width: 33.33333%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }

  @media print, screen and (min-width: 40em) {
    .news-panel .post-item .post-thumbnail {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem;
    }
  }

  .news-panel .post-item .post-thumbnail:last-child:not(:first-child) {
    float: right;
  }

  .news-panel .post-item .post-thumbnail img {
    width: 100%;
    height: auto;
  }

  .news-panel .post-item .post-text {
    width: 66.66667%;
    float: left;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }

  @media print, screen and (min-width: 40em) {
    .news-panel .post-item .post-text {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem;
    }
  }

  .news-panel .post-item .post-text:last-child:not(:first-child) {
    float: right;
  }
    
  .news-panel .post-item .post-text p {
    margin: 0.75rem 0px 0;
  }
  .post-text ~ div p {margin: 0.75rem 0px 0}
  .news-panel .post-item .post-title, .post-title  {
    /* font-size: 1.625rem; */
    margin-top: 0;
    margin-bottom: 8px;
  }

  .news-panel .post-item .post-meta, .post-meta {
    color: #8a8a8a;
    font-size: 0.875rem;
  }

  .news-panel .post-item .meta, .meta {
    display: inline-block;
    margin-right: 0.9375rem;
  }

  .news-panel .post-item .meta-icon, .meta-icon, .news-panel .post-item .meta-text, .meta-text {
    display: inline-block;
    padding-right: 0.3125rem;
  }

  .news-panel .post-item .post-read-more {
    display: block;
    font-size: 0.875rem;
  }

  .news-panel .post-item .post-read-more .fa {
    padding: 0 0.3125rem;
  }

  @media screen and (max-width: 39.9375em) {
    .news-panel .posts-list .post-title {
      font-size: 1.125rem;
    }
    .news-panel .posts-list .post-meta {
      font-size: 0.75rem;
    }
    .news-panel .posts-list .post-summary {
      font-size: 0.75rem;
    }
    .news-panel .posts-list .post-read-more {
      display: none;
    }
  }

  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .news-panel .posts-list .post-title {
      font-size: 1.25rem;
    }
    .news-panel .posts-list .post-meta {
      font-size: 0.875rem;
    }
    .news-panel .posts-list .post-summary {
      font-size: 0.875rem;
    }
  }

  .news-panel.news_grid .posts-list .post-title {
    font-size: 1.125rem;
  }

  .news-panel.news_grid .posts-list .post-meta {
    font-size: 0.75rem;
  }

  .news-panel.news_grid .posts-list .post-summary {
    font-size: 0.75rem;
  }

  .news-panel.news_grid .posts-list .post-read-more {
    display: none;
  }



/* ==========================================================================
   SUCHEERGEBNISSE
   ========================================================================== */
input#search-query {height: 2.5rem;margin:0;border-radius: 0}
#search-form .button {background: var(--main-color-red)}

.search_pagenav {    background: #e6e6e6;
    display: flex;
    align-items: center;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 6px;margin-bottom: 20px;}
.search_pagenav a {    display: inline-block;
    background: var(--main-color-green);
    padding: 12px;
    border-radius: 6px;
position: relative;margin-left: 0;margin-right: 6px;}
.search_pagenav a:hover {background: var(--main-color-red)}
.search_pagenav a:nth-of-type(2) {margin-left: 6px;margin-right: 0;}
.search_pagenav .search_number {display: inline-block;margin: 0 4px}
.search_pagenav a::before {content: '\f053'; font-family: 'FontAwesome';color: #fff;position: absolute;top: 0px;
    left: 5px;line-height: 24px;}
.search_pagenav a[rel="next"]::before {content: '\f054';left: 8px;font-family: 'FontAwesome';color: #fff;position: absolute;top: 0px;line-height: 24px;}
.search_path a {margin-left: 10px;}









/* ==========================================================================
20. MEDIA-QUERIES
========================================================================== */
@media screen and (max-width: 1360px) {
  h2.title {margin: 50px -5px 20px -10px;}	
  .slick-prev, .slick-next {display: none!important;}
  #teaser .sp-layer {margin-top: -40px;}
}

@media screen and (max-width: 1240px) {
  .grid-container {padding: 0 1rem;}
  #teaser h1 {font-size: 4.2rem;}
  #meta-nav {position: absolute;top: 2px;right: 0px;border-left: 0;}
  #meta-nav ul li {
    list-style-type: none;
    float: left;
    display: inline-block;
    margin: 5px 10px;}
}
@media screen and (max-width: 1180px) {
	#navigation {padding-right: 0;}
	#navigation .cd-primary-nav > li {margin-right: 7px;}
  #navigation .cd-primary-nav > li:nth-child(2) {margin-right: 0;}
	#navigation .button-group .button:last-child {display: none;}
	#navigation .button-group .button:first-child {border-radius: 6px}
  #navigation .cd-primary-nav .nav-animal.giraffe {max-width: 60px;}
	#teaser h1 {max-width: 100%;}
	#teaser .sp-layer {margin-top: -50px;}
}
@media screen and (min-width: 980px) and (max-width: 1024px) {
    .floatmenu.expanded {width: 60%;}
    .nav-content .contact-details {padding: 0 0 0 15px;}
    .cd-primary-nav .cd-secondary-nav .nav-category {width: 100%;}
    .cd-primary-nav .cd-secondary-nav > li {padding: 1.5rem 1rem;}
    .cd-primary-nav .cd-secondary-nav ul {padding-left: 5px;}
    .nav-content .contact-details button:nth-child(1), nav-content .contact-details button:nth-child(2), nav-content .contact-details button:nth-child(3) {display: none;}
    #item-group ul.list > li {width: 33.3333%;}
    #steckbrief .cell.large-8 {margin-left: 0; width: 100%;}
}

@media screen and (max-width: 1023px) {
	.show-mobile {display: block;}

	/* Adjust Navigation */
  	
  	.cd-primary-nav .navTrigger {display: none;}
  	#navigation {max-height: 40px;margin-top: 40px;}
    #navigation .cd-primary-nav > li {margin-right: 0;}
  	#tropen-aq {order: 0}
  	#search {order: 1;display: none;}
  	#search a {padding: 6px 12px;font-size: 26px;}
  	#tropen-aq .button {padding: 12px 1rem;}

    /* Adjust Float Info */
    .floatmenu {top: 85vh;z-index:99;right: 0;padding: 20px 10px 10px;}
    .floatmenu.scroll {top: 5px;}
    .floatmenu.expanded {top: 80px;width: 100%;}
    .floatmenu.expanded.scroll {top: 0;}
    .floatmenu .ape {display: none;}

    .floatmenu .info-accordion {width: 100%;     margin: 25px 30px 20px 0;min-width: 300px;}
    .floatmenu .clock, .floatmenu .folder {display: none;}
    .info-accordion .link {    padding: 8px 15px 8px 42px;}
    .info-accordion li i {top: 12px;}

    .floatmenu table.opening-times tr th:nth-of-type(4), .floatmenu table.opening-times td.t-kombi, .floatmenu table.opening-times tr:nth-of-type(4) {display: none;}
    .floatmenu .toggle .quickinfo {    padding: 5px 12px 5px 12px;    margin-left: -90px;margin-top: 15px;    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;}
	/* Adjust Parallax Positioning*/
  	.parallax {}
}

@media screen and (max-width: 991px) {
	#events .event-img {min-width: 240px;}
	#logo {margin-top: 20px;}
	#logo img {max-width: 260px;}
	#teaser .sp-layer {margin-left: -30px;margin-top: -30px;}
	#teaser h1 {font-size: 3.6rem;}
	.parallax-divider {height: 340px;}
	.parallax-content {top: 10%;}
}

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

	#teaser .sp-thumbnail-description {display: none;}
	
	#events .event-img {min-width: 320px;}
	#events .grid-x .cell:last-child {flex: none; -webkit-flex: none; -ms-flex: none;margin-top: 30px;width: 100%;}
    .bt-menu {display: inline-block;}
    .go-top {bottom: 70px;background: rgba(0,0,0,0.3) ;}
}

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

	#navigation {padding-left: 0;}
	#tropen-aq .button {margin-right: 0;}
	#tropen-aq .button span {display: none;}
	#teaser h1 {font-size: 3rem;}
    .timeline-navigation a.next {right: 20px;}
    .timeline-navigation a.prev {left: 20px;}
}

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

    a {display: inline-block;}  
    main {padding-bottom: 50px;}
    main section {margin: 30px 0;position: relative;width:100%;}
    h1 {line-height: 1;}
    main h1 {font-size: 3rem;margin-top: 10px;}
    h1 + .short-tag {margin-top: 20px;letter-spacing: 1px;}
    h3.sticky {padding: 0.5rem 0!important;}
    h3 small {line-height: 1;top: 5px;}
    h4 {font-size: 1.125rem;}

    .grid-container > .grid-margin-x {margin: 0}

	#teaser .sp-layer {margin-left: 0;margin-right: 0;}

	#veranstaltungen, #section6, #artenschutz {display: none;}
    
    #veranstaltungen + .parallax-divider {display: none;}
    #aktuelles {margin-top: 0;}
    main {display: block;display:flex;flex-direction:column}
    main section:nth-of-type(1) {order: 1}
    main section:nth-of-type(2) {order: 0}
    main section:nth-of-type(3) {order: 2}
    main section:nth-of-type(4) {order: 3}
    main section:nth-of-type(5) {order: 4}
    main section:nth-of-type(6) {order: 5}
    main section:nth-of-type(7) {order: 6}
    main section:nth-of-type(8) {order: 7}
    main section:nth-of-type(9) {order: 8}
    main section:nth-of-type(10) {order: 9}
    main section:nth-of-type(11) {order: 10}
    main section:nth-of-type(12) {order: 11}

    main section.parallax-divider {min-height: 340px;margin-top: 50px;}
    .parallax-divider .papier-unten {bottom: 0;}
    .parallax {height: 150vw}
    .parallax img {
    height: 100%;
    width:  auto;
    margin: 0 auto;
    margin-top: -35vh;
    object-fit: cover;
}
    .parallax iframe, .parallax video {
    width: 180vw;
    height: 100%;
    margin-top: -45vh;
    margin-left: -45vw;
}
	.outercolor {padding: 30px 0;}
    .callout {padding: 2rem 1.75rem;}  
    
    dl {padding-left: 0!important;}
    dt {margin-left: 0;width: 100%;}
    dt::after {display: none;}
    dd {padding-left: 0.5rem;}

    #schnell-infos.lightbrown-bg {background: #fff}
    #schnell-infos.lightbrown-bg .aussenrand {display: none;}
    #schnell-infos.lightbrown-bg .callout.schnellinfo-callout {background: rgb(230,224,214);}
    #schnell-infos.callout.schnellinfo-callout h3 {border-bottom:0}

    #faq {overflow-x:hidden}

    .callout.schnellinfo-callout .schnellinfo-content .cell.medium-6:last-child {
    border-left: 0;
    padding-left: 0;
    margin-top: 20px;
    border-top: 1px solid #e6e0d7;
    padding-top: 20px;}
    .callout.schnellinfo-callout .schnellinfo-content .cell.medium-6:first-child {
    padding-right: 0;}

    .hag_wetter { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;}
  .hag_wetter .grid-x:nth-child(2) {height: auto;margin-top: 0;}
  .hag_wetter .cell {min-width: 100px;background-size: 50%!important;background-position: center!important;    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    border-bottom: 1px solid rgba(0,0,0,0.1);}
  .hag_wetter .wetter-zeit {margin-top: 0;}
  .footer .footer-ta-teaser {border-left: 0}

  .hag-breadcrumb, .hag-multi-steps {background-color: transparent; margin-top: -10px;padding-left: 0.5rem;}

  #preise {overflow: auto}

  .show-mobile {display: block;}
  .mobile-hidden {display: none;}

    /* Daten & Fakten Layout */
  #parallax-onepager .parallax-nojs .facts > div {margin-top: 60%; height: 50%; padding: 30px 20px;}
  #parallax-onepager .parallax-nojs .facts > div p {display: inline-block;margin-left: 10px;}
  .facts .facts--title {font-size: 1.8rem; line-height: 1.2}

  #historie .section {padding-bottom: 0;}

  /* Show Read More Link permanently */
  .card .card-meta {max-height: 1rem}

  .info-accordion li.default .submenu {display: none;}

  .floatmenu.expanded .info-accordion {
    display: flex;
    flex-direction: column;}
    .floatmenu.expanded .info-accordion li:nth-of-type(1) {order:0}
    .floatmenu.expanded .info-accordion li:nth-of-type(2) {order:2}
    .floatmenu.expanded .info-accordion li:nth-of-type(3) {order:3}
    .floatmenu.expanded .info-accordion li:nth-of-type(4) {order:4}
    .floatmenu.expanded .info-accordion li:nth-of-type(5) {order:1}
    .floatmenu.expanded .info-accordion li:nth-of-type(6) {order:5}
    .floatmenu.expanded .info-accordion li:nth-of-type(7) {order:6}

   
.cookie-disclaimer.fixed--bottom {
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 10px;
} 

}

@media screen and (max-width: 540px) { 
	header {height: 100px;}

	#logo {margin-top: 5px;margin-left: 5px;}
	#logo img {max-width: 220px;}

	#teaser h1 {font-size: 2.5rem;}
	#teaser .sp-layer {margin-top: -90px;}
	
	#meta-nav {padding: 0;top: 25px;right: 60px;}
	#meta-nav ul li {float: right;margin: 3px 12px;}
	#meta-nav .mini-dropdown {padding: 8px 7px 9px;}

	#navigation {margin-top: 0;}

	.nav-is-fixed .cd-main-header {right: 0;top: 27px;}
    .nav-is-fixed .cd-header-buttons {right: 0;}
    .nav-is-fixed .nav-is-visible .cd-header-buttons {right: 10px;}

    .js-is-sticky, .js-is-stuck {z-index: 5;position:sticky!important;}

    h2 {    font-size: 2.0rem;
    transition: 0.3s ease all;
    line-height: 1.2;}
    .js-is-sticky .cell, .js-is-stuck .cell {padding: 0;width: 100%;}
    .js-is-sticky h2, .js-is-stuck h2 {font-size: 1.3rem;
    background: #006b32;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.3);
    color: #fff;}
    .headline div:nth-child(2) h3 {color: #333;font-size: 1.225rem;}
    h2.headline {margin-bottom: 10px}
    h2 .heading {width: 85%;}
    h2.title, .outercolor h2.title {    
        line-height: 1.2;
        margin: 0 -1rem 20px -1rem;
        border-radius: 0;
        padding: 1rem 0.5rem;
        background: #1e6b33;
        color: #fff;}
    h3 .heading-icon {margin-right: 6px;}

}


@media screen and (max-width: 480px) { 
	p, article p, article li {font-size: calc(0.75rem + 0.75vw);font-weight: 400;}
      main {padding-bottom: 0;}
	.grid-container {padding: 0 0}
    .grid-container.grid-wide {padding: 0 1rem;}


	#meta-nav ul li {margin: 5px 0px 5px 0;}

	#teaser h1 {font-size: 2rem;padding: 0.5rem 1rem 0;    margin-bottom: 0.75rem;}
	#teaser .sp-layer {margin-top: 0;top: 0!important;}
    #teaser .sp-layer .large-btn {margin-left: 1rem;padding: 0.25rem 0.75rem;font-weight:400;}
	#teaser .sp-thumbnail {padding: 4px 10px;line-height: 1.2;}
	#teaser .sp-thumbnail-title {font-size: 0.9rem;font-weight:600}
    #teaser.sub-teaser {min-height: 260px;}
    #teaser.sub-teaser--schmal {min-height: 200px;}
    .outercolor h2.title {border: 0;background: #1e6934;}

    .slick-dots {bottom: -15px}
    p, article p, article li {font-size: calc(0.75rem + 0.75vw);}
  
    .large-btn {white-space: normal;text-align: center;padding: 0.5rem 1.25rem;}

    .go-top {padding: 1.2rem 1.4rem;border-radius: 30px;right: 190px;bottom: -70px;}
    .go-top i {top: 0;position: relative;}
    .go-top.active {
    left: 10px;
    margin-right: 0;
    bottom: 10px;
    border-radius: 30px;
    right: auto;
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 0;
    line-height: 45px;
    }
    .text-divider .content .answer {font-size: 2rem;}

    .callout.schnellinfo-callout {margin: 0 ;}
    .callout.schnellinfo-callout {min-height: 140px}
    .callout.primary ul {margin-left: 0;}

	svg.curveddivider {margin-top: 10px;height: 20px;}

	.dropdown-pane {z-index: 99;}
    .nav-is-fixed .cd-main-header {right: 0px;}
    .navTrigger.active {width: 50px;height: 40px;margin: auto;padding: 10px 11px;}
    .nav-is-fixed .nav-is-visible .cd-header-buttons {right: 10px;}

    #historie .section {border-bottom: 1px solid rgba(0,0,0,0.5);margin-bottom: 30px;padding-bottom: 60px;}

    .user-profile {    left: 0.9375rem;width: 100%}

    .parallax h1 {font-size: 3rem}

    .horizontal-timeline .timeline {height: 350px}
    .horizontal-timeline .events {width: 350vw!important}

    table.pricing thead {display: none;}
    table.pricing tr {display: block;}
    table.pricing td {display: block;text-align: right;}
    table.pricing td:first-child {text-align: center;}
    table.pricing td::before {content: attr(data-label); float:left}
    table.pricing tbody tr:nth-child(even) {background: none}
    table.pricing td.header-tab {background: #f4eee6}
    table.pricing .header-tab small {display: block;}

    .switch-button-case {font-size:13px}

    .sub-teaser .stoerer {text-align: center;
    bottom: 5%;
    left: 5%;
    width: 120px;
    height: 120px;
    border-radius: 200px;
    overflow: hidden;
    max-width: 100%;
    padding: 20px 15px;
    font-size: 14px;
    line-height: 1.4;}
    .sub-teaser .stoerer .gehege {    margin-left: 0;
    margin-top: 5px;
    font-size: 20px;
    width: 24px;
    height: 24px;
    min-width: 10px;}

      #dl--fuetterung .dl-fuetterung-zeile {padding-left: 3.5rem !important;flex-wrap:wrap}
  #dl--fuetterung .dl-fuetterung-zeile dt {width:3.5rem;    padding-right: 3.5rem;}
  #dl--fuetterung .dl-fuetterung-zeile dd {flex: 1 0 100%}
  #dl--fuetterung .dl-fuetterung-zeile dd:nth-of-type(1) {font-weight:600;color:#333}


}

@media screen and (max-width: 380px) { 
    #logo img {max-width: 200px;}  
      /* Visitenkraten */
  .user-profile  .kontaktdaten > div {padding: 10px 0;text-align: center;}
  .user-profile  .kontaktdaten .icon-lg {    margin: 5px auto 10px auto;
    display: block;}
  .download-button, .button-group a.download-button {    
    max-width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;}  
}

@media screen and (max-width: 360px) { 
    #logo img {max-width: 180px;}  
    h1 {font-size: 2.5rem}
    h1 .gehege {top: -2px;margin-right: 4px;}
}

@media screen and (max-width: 320px) { 
    #teaser h1 {font-size: 1.5rem;}
    h2 {font-size: 2rem;}
  .nav-is-fixed .cd-main-header {right: -8px;}
  .nav-is-fixed .nav-is-visible .cd-header-buttons {right: 0px;}
  .mobile-quick-infos {padding-left: 12px;}

  .tpta-filter {padding: 10px 0;}

}