/* Temporary (Beta) Styles */













/* ==========================================================================
	 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) }
}