/*=== TESTER ======================================================*/

/* Firefox Workaround - Schlieren vermeiden */
#ucPageSlides {
    -moz-perspective: 800px;
}

.ani-mate-slow {
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

.ani-from-left {
    -moz-transform: translate3d(-250px, 0px, 0);
    -webkit-transform: translate3d(-250px, 0px, 0);
    -o-transform: translate(-250px, 0px);
    -ms-transform: translate(-250px, 0px);
    transform: translate3d(-250px, 0px, 0);
}

.active .ani-from-left {
    -moz-transform: translate3d(0%, 0px, 0);
    -webkit-transform: translate3d(0%, 0px, 0);
    -o-transform: translate(0%, 0px);
    -ms-transform: translate(0%, 0px);
    transform: translate3d(0%, 0px, 0);
}

.ani-from-right {
    -moz-transform: translate3d(250px, 0px, 0);
    -webkit-transform: translate3d(250px, 0px, 0);
    -o-transform: translate(250px, 0px);
    -ms-transform: translate(250px, 0px);
    transform: translate3d(250px, 0px, 0);
}

.active .ani-from-right {
    -moz-transform: translate3d(0%, 0px, 0);
    -webkit-transform: translate3d(0%, 0px, 0);
    -o-transform: translate(0%, 0px);
    -ms-transform: translate(0%, 0px);
    transform: translate3d(0%, 0px, 0);
}

.ani-from-top {
    -moz-transform: translate3d(0px, -200px, 0);
    -webkit-transform: translate3d(0px, -200px, 0);
    -o-transform: translate(0px, -200px);
    -ms-transform: translate(0px, -200px);
    transform: translate3d(0px, -200px, 0);
}

.active .ani-from-top {
    -moz-transform: translate3d(0%, 0px, 0);
    -webkit-transform: translate3d(0%, 0px, 0);
    -o-transform: translate(0%, 0px);
    -ms-transform: translate(0%, 0px);
    transform: translate3d(0%, 0px, 0);
}

.ani-from-bottom {
    -moz-transform: translate3d(0px, 200px, 0);
    -webkit-transform: translate3d(0px, 200px, 0);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200px, 0);
}

.active .ani-from-bottom {
    -moz-transform: translate3d(0%, 0px, 0);
    -webkit-transform: translate3d(0%, 0px, 0);
    -o-transform: translate(0%, 0px);
    -ms-transform: translate(0%, 0px);
    transform: translate3d(0%, 0px, 0);
}

.active .ani-360-left, .active .ani-180-left {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.ani-360-left {
    transform: rotate(0deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.ani-180-left {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

/*=======================================================================================*/

/* endless 360deg animation */
.active .ani-endless-rotation-right {
    -webkit-animation: aniRotation 20s infinite linear;
    -moz-animation: aniRotation 20s infinite linear;
    -o-animation: aniRotation 20s infinite linear;
    animation: aniRotation 20s infinite linear;
}

.active .ani-endless-rotation-left {
    -webkit-animation: aniRotation 20s infinite linear reverse;
    -moz-animation: aniRotation 20s infinite linear reverse;
    -o-animation: aniRotation 20s infinite linear reverse;
    animation: aniRotation 20s infinite linear reverse;
}

/*stop animation in editmode*/
.editbox .ani-endless-rotation-right, .editbox .ani-endless-rotation-left {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

@-webkit-keyframes aniRotation {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes aniRotation {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg)
    }
}

@-o-keyframes aniRotation {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(360deg)
    }
}

@keyframes aniRotation {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

/*=======================================================================================*/

.ani-fade-in {
    -webkit-transition: opacity 600ms linear 0ms;
    -moz-transition: opacity 600ms linear 0ms;
    -o-transition: opacity 600ms linear 0ms;
    transition: opacity 600ms linear 0ms;
    opacity: 0;
}

.active .ani-fade-in {
    opacity: 1;
    -webkit-transition: opacity 8s linear 1.1s;
    -moz-transition: opacity 8s linear 1.1s;
    -o-transition: opacity 8s linear 1.1s;
    transition: opacity 8s linear 1.1s;
}

.ani-fade-out {
    -webkit-transition: opacity 600ms linear 0ms;
    -moz-transition: opacity 600ms linear 0ms;
    -o-transition: opacity 600ms linear 0ms;
    transition: opacity 600ms linear 0ms;
    opacity: 1;
}

.active .ani-fade-out {
    -webkit-transition: opacity 8s linear 1.1s;
    -moz-transition: opacity 8s linear 1.1s;
    -o-transition: opacity 8s linear 1.1s;
    transition: opacity 8s linear 1.1s;
    opacity: 0;
}

/* Databox farbige Animation */
.databox-link.databox-color-fading-yellow {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-yellow 8s infinite;
          animation: databox-color-fading-yellow 8s infinite;
}

@-webkit-keyframes databox-color-fading-yellow {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #e8d590;
    border-color: #e8d590;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #e8d590;
    border-color: #e8d590;
  }
}

@keyframes databox-color-fading-yellow {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #e8d590;
    border-color: #e8d590;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #e8d590;
    border-color: #e8d590;
  }
}
.databox-link.databox-color-fading-white-darkgreen {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-darkgreen 8s infinite;
          animation: databox-color-fading-white-darkgreen 8s infinite;
}

@-webkit-keyframes databox-color-fading-white-darkgreen {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #217525;
    border-color: #217525;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #217525;
    border-color: #217525;
  }
}

@keyframes databox-color-fading-white-darkgreen {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #217525;
    border-color: #217525;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #217525;
    border-color: #217525;
  }
}
.databox-link.databox-color-fading-dark-to-caribbean-green {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-dark-to-caribbean-green 8s infinite;
          animation: databox-color-fading-dark-to-caribbean-green 8s infinite;
}

@-webkit-keyframes databox-color-fading-dark-to-caribbean-green {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #00DA6F;
    border-color: #00DA6F;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #00DA6F;
    border-color: #00DA6F;
  }
}

@keyframes databox-color-fading-dark-to-caribbean-green {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #00DA6F;
    border-color: #00DA6F;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #00DA6F;
    border-color: #00DA6F;
  }
}
.databox-link.databox-color-fading-green {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-green 8s infinite;
          animation: databox-color-fading-green 8s infinite;
}

@-webkit-keyframes databox-color-fading-green {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #95daab;
    border-color: #95daab;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #95daab;
    border-color: #95daab;
  }
}

@keyframes databox-color-fading-green {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #95daab;
    border-color: #95daab;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #95daab;
    border-color: #95daab;
  }
}
.databox-link.databox-color-fading-red {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-red 8s infinite;
          animation: databox-color-fading-red 8s infinite;
}

@-webkit-keyframes databox-color-fading-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #ff625a;
    border-color: #ff625a;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #ff625a;
    border-color: #ff625a;
  }
}

@keyframes databox-color-fading-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #ff625a;
    border-color: #ff625a;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #ff625a;
    border-color: #ff625a;
  }
}
.databox-link.databox-color-fading-dark-to-red {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-dark-to-red 8s infinite;
          animation: databox-color-fading-dark-to-red 8s infinite;
}

@-webkit-keyframes databox-color-fading-dark-to-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #EA0102;
    border-color: #EA0102;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #EA0102;
    border-color: #EA0102;
  }
}

@keyframes databox-color-fading-dark-to-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #EA0102;
    border-color: #EA0102;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #EA0102;
    border-color: #EA0102;
  }
}
.databox-link.databox-color-fading-white {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white 12s infinite;
          animation: databox-color-fading-white 12s infinite;
}

@-webkit-keyframes databox-color-fading-white {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #ffffff;
    border-color: #ffffff;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #ffffff;
    border-color: #ffffff;
  }
}

@keyframes databox-color-fading-white {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #ffffff;
    border-color: #ffffff;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #ffffff;
    border-color: #ffffff;
  }
}
.databox-link.databox-color-fading-grey {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-grey 12s infinite;
          animation: databox-color-fading-grey 12s infinite;
}

@-webkit-keyframes databox-color-fading-grey {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #b7b5ab;
    border-color: #b7b5ab;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #b7b5ab;
    border-color: #b7b5ab;
  }
}

@keyframes databox-color-fading-grey {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #b7b5ab;
    border-color: #b7b5ab;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #b7b5ab;
    border-color: #b7b5ab;
  }
}
.databox-link.databox-color-fading-white-lightgreen {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-lightgreen 12s infinite;
          animation: databox-color-fading-white-lightgreen 12s infinite;
}

@-webkit-keyframes databox-color-fading-white-lightgreen {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #cec114;
    border-color: #cec114;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #cec114;
    border-color: #cec114;
  }
}

@keyframes databox-color-fading-white-lightgreen {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #cec114;
    border-color: #cec114;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #cec114;
    border-color: #cec114;
  }
}
.databox-link.databox-color-fading-black-red {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-black-red 12s infinite;
          animation: databox-color-fading-black-red 12s infinite;
}

@-webkit-keyframes databox-color-fading-black-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #e35143;
    border-color: #e35143;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #e35143;
    border-color: #e35143;
  }
}

@keyframes databox-color-fading-black-red {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #e35143;
    border-color: #e35143;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #e35143;
    border-color: #e35143;
  }
}
.databox-link.databox-color-fading-gulf-blue {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-gulf-blue 12s infinite;
          animation: databox-color-fading-gulf-blue 12s infinite;
}

@-webkit-keyframes databox-color-fading-gulf-blue {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #000556;
    border-color: #000556;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #000556;
    border-color: #000556;
  }
}

@keyframes databox-color-fading-gulf-blue {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #000556;
    border-color: #000556;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #000556;
    border-color: #000556;
  }
}
.databox-link.databox-color-fading-white-to-lightgrey {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-to-lightgrey 12s infinite;
          animation: databox-color-fading-white-to-lightgrey 12s infinite;
}

@-webkit-keyframes databox-color-fading-white-to-lightgrey {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #cbcbcb;
    border-color: #cbcbcb;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #cbcbcb;
    border-color: #cbcbcb;
  }
}

@keyframes databox-color-fading-white-to-lightgrey {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #cbcbcb;
    border-color: #cbcbcb;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #cbcbcb;
    border-color: #cbcbcb;
  }
}
.databox-link.databox-color-fading-dark-to-blue {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-dark-to-blue 12s infinite;
          animation: databox-color-fading-dark-to-blue 12s infinite;
}

@-webkit-keyframes databox-color-fading-dark-to-blue {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #0000da;
    border-color: #0000da;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #0000da;
    border-color: #0000da;
  }
}

@keyframes databox-color-fading-dark-to-blue {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #0000da;
    border-color: #0000da;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #0000da;
    border-color: #0000da;
  }
}
.databox-link.databox-color-fading-dark-to-coffee {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-dark-to-coffee 12s infinite;
          animation: databox-color-fading-dark-to-coffee 12s infinite;
}

@-webkit-keyframes databox-color-fading-dark-to-coffee {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #764b38;
    border-color: #764b38;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #764b38;
    border-color: #764b38;
  }
}

@keyframes databox-color-fading-dark-to-coffee {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #764b38;
    border-color: #764b38;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #764b38;
    border-color: #764b38;
  }
}
.databox-link.databox-color-fading-dark-to-burnt-sienna {
  color: #000;
  border-color: #000;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-dark-to-burnt-sienna 12s infinite;
          animation: databox-color-fading-dark-to-burnt-sienna 12s infinite;
}

@-webkit-keyframes databox-color-fading-dark-to-burnt-sienna {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #E97841;
    border-color: #E97841;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #E97841;
    border-color: #E97841;
  }
}

@keyframes databox-color-fading-dark-to-burnt-sienna {
  0% {
    color: #000;
    border-color: #000;
  }
  25% {
    color: #E97841;
    border-color: #E97841;
  }
  50% {
    color: #000;
    border-color: #000;
  }
  75% {
    color: #E97841;
    border-color: #E97841;
  }
}
.databox-link.databox-color-fading-white-to-red {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-to-red 8s infinite;
          animation: databox-color-fading-white-to-red 8s infinite;
}

@-webkit-keyframes databox-color-fading-white-to-red {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #ff625a;
    border-color: #ff625a;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #ff625a;
    border-color: #ff625a;
  }
}

@keyframes databox-color-fading-white-to-red {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #ff625a;
    border-color: #ff625a;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #ff625a;
    border-color: #ff625a;
  }
}
.databox-link.databox-color-fading-white-to-turkis {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-to-turkis 8s infinite;
          animation: databox-color-fading-white-to-turkis 8s infinite;
}

@-webkit-keyframes databox-color-fading-white-to-turkis {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #96f8e4;
    border-color: #96f8e4;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #96f8e4;
    border-color: #96f8e4;
  }
}

@keyframes databox-color-fading-white-to-turkis {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #96f8e4;
    border-color: #96f8e4;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #96f8e4;
    border-color: #96f8e4;
  }
}
.databox-link.databox-color-fading-white-to-bright-turquoise {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-to-bright-turquoise 8s infinite;
          animation: databox-color-fading-white-to-bright-turquoise 8s infinite;
}

@-webkit-keyframes databox-color-fading-white-to-bright-turquoise {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #05C8F7;
    border-color: #05C8F7;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #05C8F7;
    border-color: #05C8F7;
  }
}

@keyframes databox-color-fading-white-to-bright-turquoise {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #05C8F7;
    border-color: #05C8F7;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #05C8F7;
    border-color: #05C8F7;
  }
}
.databox-link.databox-color-fading-white-to-orange {
  color: #fff;
  border-color: #fff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: databox-color-fading-white-to-orange 8s infinite;
          animation: databox-color-fading-white-to-orange 8s infinite;
}

@-webkit-keyframes databox-color-fading-white-to-orange {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #ff6e3b;
    border-color: #ff6e3b;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #ff6e3b;
    border-color: #ff6e3b;
  }
}

@keyframes databox-color-fading-white-to-orange {
  0% {
    color: #fff;
    border-color: #fff;
  }
  25% {
    color: #ff6e3b;
    border-color: #ff6e3b;
  }
  50% {
    color: #fff;
    border-color: #fff;
  }
  75% {
    color: #ff6e3b;
    border-color: #ff6e3b;
  }
}