/*
* Prefixed by:
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@media screen {

  a {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

  .calltoaction .block {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
  }

  .calltoaction:not(.open) .block:hover {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
  }

  .animation {
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }

  .animation[data-vp="true"] {
    opacity: 1;
  }

  .animation[data-y="down"][data-vp="true"] {
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
  }

  .animation[data-y="up"][data-vp="true"] {
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
  }

  /* Animationen pro Element */

  .animation[data-vp="true"] {
    -webkit-animation-name: fade-in-key;
            animation-name: fade-in-key;
  }

  .service-subpages-tile.animation[data-vp="true"][data-p="center"],
  .service-tile.animation[data-vp="true"][data-p="center"] {
    -webkit-animation-name: from-bottom;
            animation-name: from-bottom;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-delay: .25s;
            animation-delay: .25s;
    opacity: 0;
  }

  .service-subpages-tile.animation[data-vp="true"][data-y="up"][data-p="center"],
  .service-tile.animation[data-vp="true"][data-y="up"][data-p="center"] {
    -webkit-animation-name: from-top;
            animation-name: from-top;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }

  .service-subpages-tile.animation[data-p="left"][data-vp="true"],
  .service-tile.animation[data-p="left"][data-vp="true"] {
    -webkit-animation-name: from-left;
            animation-name: from-left;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }

  .service-subpages-tile.animation[data-p="right"][data-vp="true"],
  .service-tile.animation[data-p="right"][data-vp="true"] {
    -webkit-animation-name: from-right;
            animation-name: from-right;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }

  .splide__slide.animation[data-vp="true"] {
    -webkit-animation-name: from-bottom;
            animation-name: from-bottom;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
  }

  .splide__slide.animation:nth-child(3n + 2) {
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
    opacity: 0;
  }

  .splide__slide.animation:nth-child(3n + 3) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    opacity: 0;
  }

  h1.animation[data-vp="true"],
  h2.animation[data-vp="true"],
  h3.animation[data-vp="true"] {
    /* animation-name: from-left; */
  }
}

/*
 *** ANIMATIONS ***
*/


@-webkit-keyframes fade-in-key {
   0%   { opacity: 0;}
  100% { opacity: 1;}
}


@keyframes fade-in-key {
   0%   { opacity: 0;}
  100% { opacity: 1;}
}

@-webkit-keyframes from-left {
   0%   {
     opacity: 0;
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes from-left {
   0%   {
     opacity: 0;
     -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes from-right {
   0%   {
     opacity: 0;
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes from-right {
   0%   {
     opacity: 0;
     -webkit-transform: translateX(100%);
             transform: translateX(100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes from-top {
   0%   {
     opacity: 0;
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes from-top {
   0%   {
     opacity: 0;
     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes from-bottom {
   0%   {
     opacity: 0;
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes from-bottom {
   0%   {
     opacity: 0;
     -webkit-transform: translateY(100%);
             transform: translateY(100%);
   }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}