/** If motion reduction is not set to reduce, then animate the elements */
@media (prefers-reduced-motion: no-preference) {
    :hover,
    img {
        -webkit-transition: all 0.25s ease-in-out!important;
        -moz-transition:    all 0.25s ease-in-out!important;
        -ms-transition:     all 0.25s ease-in-out!important;
        -o-transition:      all 0.25s ease-in-out!important;
        transition:         all 0.25s ease-in-out!important;
    }

    @keyframes fadeIn {
        0%    {opacity: 0;}
        25%   {opacity: 0;}
        100%  {opacity: 1;}
    }

    @keyframes fadeUp {
        0%    {opacity: 0; bottom: -500px;}
        50%   {opacity: 0;}
        100%  {opacity: 1; bottom: 0;}
    }

    @keyframes slideRight {
        0%    {opacity: 0; transform: translateX(-400px);}
        50%   {opacity: 0;}
        100%  {opacity: 1; transform: translateX(0);}
    }

    @keyframes slideLeft {
        0%    {opacity: 0; transform: translateX(400px);}
        50%   {opacity: 0;}
        100%  {opacity: 1; transform: translateX(0);}
    }

    @keyframes slideDown {
        0%    {opacity: 0; transform: translateY(-300px);}
        70%   {opacity: 0;}
        100%  {opacity: 1; transform: translateY(0);}
    }

    @keyframes slideUp {
        0%    {opacity: 0; transform: translateY(300px);}
        70%   {opacity: 0;}
        100%  {opacity: 1; transform: translateY(0);}
    }

    @keyframes growIn {
        0%    {opacity: 0; transform: scale(0);}
        50%   {opacity: 0;}
        100%  {opacity: 1; transform: scale(1);}
    }

    /* Keyframe to continuously slide the element on the X axis */
    @keyframes slideLoop {
        0%    {left: 0}
        100%  {left: -200%;}
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-20px);}
        60% {transform: translateY(-10px);}
    }

    @keyframes pulse {
        from { transform: scale(0.85); }
        to { transform: scale(1.25); }
    }


    .hero-content img,
    .animate .hero-content img {
        animation-name: fadeIn;
        animation-duration: 1.75s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .hero-content h1,
    .animate .hero-content h1 {
        animation-name: fadeUp;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .hero-scroll img,
    .animate .hero-scroll img {
        animation: pulse 1s infinite ease-in-out alternate;
    }

    .animate .gallery-floatingImages__left img:first-of-type {
        animation-name: slideRight;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__left img:nth-of-type(2) {
        animation-name: slideDown;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__left img:nth-of-type(3) {
        animation-name: growIn;
        animation-delay: -0.5s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__left img:nth-of-type(4) {
        animation-name: slideDown;
        animation-delay: -1s;
        animation-duration: 2.5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__right img:first-of-type {
        animation-name: growIn;
        animation-delay: -0.5s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__right img:nth-of-type(2) {
        animation-name: slideDown;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__right img:nth-of-type(3) {
        animation-name: slideLeft;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__right img:nth-of-type(4) {
        animation-name: slideUp;
        animation-delay: -1s;
        animation-duration: 2.5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .gallery-floatingImages__right img:nth-of-type(5) {
        animation-name: slideDown;
        animation-delay: -1s;
        animation-duration: 2.5s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate buttongroup {
        animation-name: growIn;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .applied-options > div.active {
        animation-name: slideDown;
        animation-delay: -0.25s;
        animation-duration: 0.6s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .animate .views-slider__navigation {
        animation-name: slideUp;
        animation-delay: -1s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    .support-animatedText {
        animation-name: slideLoop;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    #landing-perspective.animate span:first-of-type {
        animation-name: slideLeft;
        animation-delay: -0.5s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

    #landing-perspective.animate span:last-of-type {
        animation-name: slideRight;
        animation-delay: 0s;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }

}