@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
.animated {
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;
    -moz-animation-duration: 1.3s;
    -ms-animation-duration: 1.3s;
    -o-animation-duration: 1.3s;
    animation-duration: 1.3s;
     -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.slow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.slower {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.slowest {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.delay-200 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s
}

.delay-300 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s
}

.delay-350 {
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    animation-delay: 0.35s
}

.delay-400 {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s
}

.delay-500 {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s
}

.delay-600 {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s
}

.delay-700 {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    animation-delay: 0.7s
}

.delay-750 {
    -webkit-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    animation-delay: 0.75s
}

.delay-900 {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s
}

.delay-1000 {
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    -o-animation-delay: 1.0s;
    animation-delay: 1.0s
}

.delay-1200 {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.delay-1250 {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.delay-1300 {
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -o-animation-delay: 1.3s;
    animation-delay: 1.3s
}

.delay-1350 {
    -webkit-animation-delay: 1.25s;
    -moz-animation-delay: 1.25s;
    -o-animation-delay: 1.25s;
    animation-delay: 1.25s
}

.delay-1400 {
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    animation-delay: 1.4s
}

.delay-1500 {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.delay-1750 {
    -webkit-animation-delay: 1.75s;
    -moz-animation-delay: 1.75s;
    -o-animation-delay: 1.75s;
    animation-delay: 1.75s
}

.delay-2000 {
    -webkit-animation-delay: 2.0s;
    -moz-animation-delay: 2.0s;
    -o-animation-delay: 2.0s;
    animation-delay: 2.0s
}

.delay-2500 {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.delay-2000 {
    -webkit-animation-delay: 2.0s;
    -moz-animation-delay: 2.0s;
    -o-animation-delay: 2.0s;
    animation-delay: 2.0s
}

.delay-2500 {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.delay-3000 {
    -webkit-animation-delay: 3.0s;
    -moz-animation-delay: 3.0s;
    -o-animation-delay: 3.0s;
    animation-delay: 3.0s
}

.delay-3500 {
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s
}

.delay-4000 {
    -webkit-animation-delay: 4.0s;
    -moz-animation-delay: 4.0s;
    -o-animation-delay: 4.0s;
    animation-delay: 4.0s
}

.delay-4800 {
    -webkit-animation-delay: 4.8s;
    -moz-animation-delay: 4.8s;
    -o-animation-delay: 4.8s;
    animation-delay: 4.8s
}

.delay-5200 {
    -webkit-animation-delay: 5.2s;
    -moz-animation-delay: 5.2s;
    -o-animation-delay: 5.2s;
    animation-delay: 5.2s;
}

.delay-6200 {
    -webkit-animation-delay: 6.2s;
    -moz-animation-delay: 6.2s;
    -o-animation-delay: 6.2s;
    animation-delay: 6.2s;
    animation-delay: 6.2s;
}

.delay-7000 {
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 7s;
    animation-delay: 7s;
    animation-delay: 7s;
}

.delay-8000 {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    animation-delay: 8s;
    animation-delay: 8s;
}

.delay-9000 {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    animation-delay: 9s;
    animation-delay: 9s;
}

.delay-10000 {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    animation-delay: 10s;
    animation-delay: 10s;
}

.delay-11000 {
    -webkit-animation-delay: 10.1s;
    -moz-animation-delay: 10.1s;
    -o-animation-delay: 10.1s;
    animation-delay: 10.1s;
    animation-delay: 10.1s;
}

.delay-12000 {
    -webkit-animation-delay: 10.2s;
    -moz-animation-delay: 10.2s;
    -o-animation-delay: 10.2s;
    animation-delay: 10.2s;
    animation-delay: 10.2s;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom
}

@keyframes flash {

    from,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.flash {
    animation-name: flash
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.pulse {
    animation-name: pulse
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

@keyframes shake {

    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    animation-name: shake
}

@keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.tada {
    animation-name: tada
}

@keyframes wobble {
    from {
        transform: none
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    to {
        transform: none
    }
}

.wobble {
    animation-name: wobble
}

@keyframes jello {

    from,
    11.1%,
    to {
        transform: none
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg)
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
    }
}

.jello {
    animation-name: jello;
    transform-origin: center
}

@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    animation-name: bounceIn
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        transform: translate3d(0, -10px, 0)
    }

    90% {
        transform: translate3d(0, 5px, 0)
    }

    to {
        transform: none
    }
}

.bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        transform: translate3d(5px, 0, 0)
    }

    to {
        transform: none
    }
}

.bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        transform: translate3d(10px, 0, 0)
    }

    90% {
        transform: translate3d(-5px, 0, 0)
    }

    to {
        transform: none
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        transform: translate3d(0, 10px, 0)
    }

    90% {
        transform: translate3d(0, -5px, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.bounceInUp {
    animation-name: bounceInUp
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    animation-name: bounceOut
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    animation-name: bounceOutDown
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    animation-name: bounceOutRight
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    animation-name: bounceOutUp
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn;

}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
    }

    to {
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 5%, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOutDown {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    animation-name: fadeOutDown
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    animation-name: fadeOutDownBig
}

@keyframes fadeOutLeft {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    animation-name: fadeOutRightBig
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    animation-name: fadeOutUpBig
}

@keyframes flip {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px);
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    animation-name: flip
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInX
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInY
}

@keyframes flipOutX {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.flipOutX {
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@keyframes flipOutY {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipOutY
}

@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@keyframes lightSpeedOut {
    from {
        opacity: 1
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        transform-origin: center;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

@keyframes rotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft
}

@keyframes rotateInDownRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes rotateInUpLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft
}

@keyframes rotateInUpRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight
}

@keyframes rotateOut {
    from {
        transform-origin: center;
        opacity: 1
    }

    to {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

.rotateOut {
    animation-name: rotateOut
}

@keyframes rotateOutDownLeft {
    from {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    animation-name: rotateOutDownLeft
}

@keyframes rotateOutDownRight {
    from {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    animation-name: rotateOutDownRight
}

@keyframes rotateOutUpLeft {
    from {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    animation-name: rotateOutUpLeft
}

@keyframes rotateOutUpRight {
    from {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    animation-name: rotateOutUpRight
}

@keyframes hinge {
    0% {
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hinge {
    animation-name: hinge
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        transform: rotate(-10deg)
    }

    70% {
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.jackInTheBox {
    animation-name: jackInTheBox
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rollIn {
    animation-name: rollIn
}

@keyframes rollOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

.rollOut {
    animation-name: rollOut
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    animation-name: zoomInDown
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    animation-name: zoomInLeft
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    animation-name: zoomInRight
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    animation-name: zoomInUp
}

@keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.zoomOut {
    animation-name: zoomOut
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutDown {
    animation-name: zoomOutDown
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

.zoomOutLeft {
    animation-name: zoomOutLeft
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

.zoomOutRight {
    animation-name: zoomOutRight
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutUp {
    animation-name: zoomOutUp
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.slideInDown {
    animation-name: slideInDown
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.slideInRight {
    animation-name: slideInRight
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity:1;
    }
}

.slideInUp {
    animation-name: slideInUp
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    animation-name: slideOutDown
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0)
    }
}

.slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}


.slideOutRight {
    animation-name: slideOutRight
}

@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    animation-name: slideOutUp
}

.slide-up{
    -webkit-animation-name: slide-up;
    animation-name: slide-up;
}


@-webkit-keyframes slide-up {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
opacity: 1;
}
}

@keyframes slide-up {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
opacity: 1;
}
}


/*-- custom animation --*/

/* 
.home-banner-icon {
    position: absolute;
    bottom: -10vh;    
    opacity: 0.2;
}


@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }


    30%{
        opacity: 0;
    }
    
    
    100% {
        transform: translateY(-250vh) rotate(70deg);
        opacity: 0.2;
    }
}

@keyframes floatreverse {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    
   

    30%{
        opacity: 0;
    }
    
    
    100% {
        transform: translateY(-250vh) rotate(70deg);
        opacity: 0.2;
    }
}


.home-banner-icon:nth-child(odd) {
    animation: float 15s linear infinite;
}

.home-banner-icon:nth-child(even) {
    animation: floatreverse 18s linear infinite;
}


.home-banner-icon:nth-child(1) { left: 10%; animation-delay: 0s; }
.home-banner-icon:nth-child(2) { left: 25%; animation-delay: 1s; }
.home-banner-icon:nth-child(3) { left: 40%; animation-delay: 2s; }
.home-banner-icon:nth-child(4) { left: 58%; animation-delay: 3s; }
.home-banner-icon:nth-child(5) { left: 70%; animation-delay: 4s; }
.home-banner-icon:nth-child(6) { left: 85%; animation-delay: 5s; }
.home-banner-icon:nth-child(7) { left: 15%; animation-delay: 6s; }
.home-banner-icon:nth-child(8) { left: 30%; animation-delay: 7s; }
.home-banner-icon:nth-child(9) { left: 45%; animation-delay: 8s; }
.home-banner-icon:nth-child(10) { left: 60%; animation-delay: 9s; }
.home-banner-icon:nth-child(11) { left: 75%; animation-delay: 10s; }
.home-banner-icon:nth-child(12) { left: 90%; animation-delay: 11s; }
.home-banner-icon:nth-child(13) { left: 20%; animation-delay: 12s; }
.home-banner-icon:nth-child(14) { left: 35%; animation-delay: 13s; }
.home-banner-icon:nth-child(15) { left: 48%; animation-delay: 14s; }
.home-banner-icon:nth-child(16) { left: 65%; animation-delay: 15s; }
.home-banner-icon:nth-child(17) { left: 80%; animation-delay: 16s; }
.home-banner-icon:nth-child(18) { left: 95%; animation-delay: 17s; }
.home-banner-icon:nth-child(19) { left: 5%; animation-delay: 18s; }
.home-banner-icon:nth-child(20) { left: 22%; animation-delay: 19s; }
.home-banner-icon:nth-child(21) { left: 37%; animation-delay: 20s; }
.home-banner-icon:nth-child(22) { left: 15%; animation-delay: 21s; }
.home-banner-icon:nth-child(23) { left: 67%; animation-delay: 22s; }
.home-banner-icon:nth-child(24) { left: 82%; animation-delay: 23s; }
.home-banner-icon:nth-child(25) { left: 97%; animation-delay: 24s; }
.home-banner-icon:nth-child(26) { left: 7%; animation-delay: 25s; }
.home-banner-icon:nth-child(27) { left: 27%; animation-delay: 26s; }
.home-banner-icon:nth-child(28) { left: 42%; animation-delay: 27s; } */
/* 
  Enhanced randomization for floating icons:
  - More varied start/end locations (bottom left, right, center, etc. to top left/right/center, etc.)
  - More varied rotation angles and horizontal/vertical drift
  - All still using only nth-child selectors, no extra HTML classes needed
*/

/* Container */
.home-banner-icons-list {
  perspective-origin: 50% 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  right: 0;
}

/* Icon base */
.home-banner-icon {
  position: absolute;
  bottom: -100vh;
  transform-style: preserve-3d;
  opacity: 0.2;
  will-change: transform, opacity;
}

/* Image sizing */
.home-banner-icon img {
  display: block;
  max-width: 100%;
  width: auto;
}
/* --- Randomized Properties via nth-child --- */

/* Sizing */
.home-banner-icon:nth-child(5n+1) { width: 32px; }
.home-banner-icon:nth-child(5n+2) { width: 48px; }
.home-banner-icon:nth-child(5n+3) { width: 64px; }
.home-banner-icon:nth-child(5n+4) { width: 80px; }
.home-banner-icon:nth-child(5n)   { width: 96px; }

/* Blur - DISABLED for now */
.home-banner-icon:nth-child(7n+1),
.home-banner-icon:nth-child(7n+2),
.home-banner-icon:nth-child(7n+3),
.home-banner-icon:nth-child(7n+4),
.home-banner-icon:nth-child(7n+5),
.home-banner-icon:nth-child(7n+6),
.home-banner-icon:nth-child(7n) {
  filter: none;
}

/* Z-index (for depth) */
.home-banner-icon:nth-child(6n+1) { z-index: -2; }
.home-banner-icon:nth-child(6n+2) { z-index: 0; }
.home-banner-icon:nth-child(6n+3) { z-index: 2; }
.home-banner-icon:nth-child(6n+4) { z-index: -1; }
.home-banner-icon:nth-child(6n+5) { z-index: 1; }
.home-banner-icon:nth-child(6n)   { z-index: 3; }

/* Left position (more random, covers edges and center) */
.home-banner-icon:nth-child(12n+1)  { left: 2%; }
.home-banner-icon:nth-child(12n+2)  { left: 10%; }
.home-banner-icon:nth-child(12n+3)  { left: 18%; }
.home-banner-icon:nth-child(12n+4)  { left: 26%; }
.home-banner-icon:nth-child(12n+5)  { left: 34%; }
.home-banner-icon:nth-child(12n+6)  { left: 50%; }
.home-banner-icon:nth-child(12n+7)  { left: 66%; }
.home-banner-icon:nth-child(12n+8)  { left: 82%; }
.home-banner-icon:nth-child(12n+9)  { left: 90%; }
.home-banner-icon:nth-child(12n+10) { left: 5%; }
.home-banner-icon:nth-child(12n+11) { left: 75%; }
.home-banner-icon:nth-child(12n)    { left: 40%; }

/* Animation speed - SLOW DOWN the fastest icons */
.home-banner-icon:nth-child(4n+1) { animation-duration: 32s; }
.home-banner-icon:nth-child(4n+2) { animation-duration: 24s; }
.home-banner-icon:nth-child(4n+3) { animation-duration: 18s; }
.home-banner-icon:nth-child(4n)   { animation-duration: 16s; }

/* Animation delay (for staggering) */
.home-banner-icon:nth-child(10n+1) { animation-delay: 0s; }
.home-banner-icon:nth-child(10n+2) { animation-delay: 2s; }
.home-banner-icon:nth-child(10n+3) { animation-delay: 4s; }
.home-banner-icon:nth-child(10n+4) { animation-delay: 6s; }
.home-banner-icon:nth-child(10n+5) { animation-delay: 8s; }
.home-banner-icon:nth-child(10n+6) { animation-delay: 10s; }
.home-banner-icon:nth-child(10n+7) { animation-delay: 12s; }
.home-banner-icon:nth-child(10n+8) { animation-delay: 14s; }
.home-banner-icon:nth-child(10n+9) { animation-delay: 16s; }
.home-banner-icon:nth-child(10n)   { animation-delay: 18s; }

/* --- Randomized Keyframes via nth-child --- */

/* 
  Each keyframe now starts from a different bottom/left/right/center and ends at a different top/left/right/center,
  with more varied rotation and drift for a more "random" feel.
  (RESTRICTED: less left/right movement, less rotation, no upside down)
*/

/* Bottom left to top right, gentle clockwise spin, less drift */
@keyframes float-up-1 {
  0%   { left: 0%;   bottom: -80px;  transform: rotate(-20deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.18; }
  50%  { transform: rotate(20deg) scale(1.1) translateX(20px); }
  100% { left: 60%;  bottom: 150vh; transform: rotate(40deg) scale(1.15) translateX(40px); opacity: 0.2; }
}
/* Bottom right to top left, gentle counterclockwise spin, less drift */
@keyframes float-up-2 {
  0%   { left: 90%;  bottom: -100px; transform: rotate(20deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.15; }
  50%  { transform: rotate(-20deg) scale(1.05) translateX(-20px); }
  100% { left: 30%;   bottom: 150vh;  transform: rotate(-40deg) scale(1.1) translateX(-40px); opacity: 0.2; }
}
/* Bottom center to top center, wavy left-right drift, less rotation */
@keyframes float-up-3 {
  0%   { left: 50%;  bottom: -120px; transform: rotate(0deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.2; }
  40%  { transform: rotate(10deg) scale(1.1) translateX(-15px); }
  60%  { transform: rotate(-10deg) scale(1.1) translateX(15px); }
  100% { left: 50%;  bottom: 150vh;  transform: rotate(15deg) scale(1.15) translateX(0); opacity: 0.2; }
}
/* Bottom left to top middle, zig-zag drift, less rotation/drift */
@keyframes float-up-4 {
  0%   { left: 10%;  bottom: -60px;  transform: rotate(-10deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.13; }
  30%  { transform: rotate(10deg) scale(1.05) translateX(15px); }
  60%  { transform: rotate(-10deg) scale(1.1) translateX(30px); }
  100% { left: 40%;  bottom: 150vh;  transform: rotate(15deg) scale(1.12) translateX(40px); opacity: 0.2; }
}
/* Bottom right to top middle, zig-zag drift, less rotation/drift */
@keyframes float-up-5 {
  0%   { left: 80%;  bottom: -90px;  transform: rotate(10deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.17; }
  30%  { transform: rotate(-10deg) scale(1.05) translateX(-15px); }
  60%  { transform: rotate(10deg) scale(1.1) translateX(-30px); }
  100% { left: 60%;  bottom: 150vh;  transform: rotate(-15deg) scale(1.12) translateX(-40px); opacity: 0.2; }
}
/* Bottom center to top right, spiral drift, less rotation/drift */
@keyframes float-up-6 {
  0%   { left: 50%;  bottom: -110px; transform: rotate(0deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.15; }
  40%  { transform: rotate(15deg) scale(1.1) translateX(20px); }
  70%  { transform: rotate(20deg) scale(1.12) translateX(40px); }
  100% { left: 70%;  bottom: 150vh;  transform: rotate(25deg) scale(1.15) translateX(60px); opacity: 0.2; }
}
/* Bottom center to top left, spiral drift, less rotation/drift */
@keyframes float-up-7 {
  0%   { left: 50%;  bottom: -110px; transform: rotate(0deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.15; }
  40%  { transform: rotate(-15deg) scale(1.1) translateX(-20px); }
  70%  { transform: rotate(-20deg) scale(1.12) translateX(-40px); }
  100% { left: 30%;   bottom: 150vh;  transform: rotate(-25deg) scale(1.15) translateX(-60px); opacity: 0.2; }
}
/* Bottom left to top left, gentle drift, less rotation/drift */
@keyframes float-up-8 {
  0%   { left: 5%;   bottom: -70px;  transform: rotate(-8deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.13; }
  50%  { transform: rotate(8deg) scale(1.05) translateX(5px); }
  100% { left: 0%;   bottom: 150vh;  transform: rotate(12deg) scale(1.1) translateX(-5px); opacity: 0.2; }
}
/* Bottom right to top right, gentle drift, less rotation/drift */
@keyframes float-up-9 {
  0%   { left: 95%;  bottom: -70px;  transform: rotate(8deg) scale(1) translateX(0); opacity: 0; }
  7%   { opacity: 0; }
  20%  { opacity: 0.13; }
  50%  { transform: rotate(-8deg) scale(1.05) translateX(-5px); }
  100% { left: 100%; bottom: 150vh;  transform: rotate(-12deg) scale(1.1) translateX(5px); opacity: 0.2; }
}

/* Assign keyframes via nth-child (cycle through 9 for more variety) */
.home-banner-icon:nth-child(9n+1)  { animation-name: float-up-1; }
.home-banner-icon:nth-child(9n+2)  { animation-name: float-up-2; }
.home-banner-icon:nth-child(9n+3)  { animation-name: float-up-3; }
.home-banner-icon:nth-child(9n+4)  { animation-name: float-up-4; }
.home-banner-icon:nth-child(9n+5)  { animation-name: float-up-5; }
.home-banner-icon:nth-child(9n+6)  { animation-name: float-up-6; }
.home-banner-icon:nth-child(9n+7)  { animation-name: float-up-7; }
.home-banner-icon:nth-child(9n+8)  { animation-name: float-up-8; }
.home-banner-icon:nth-child(9n)    { animation-name: float-up-9; }

.home-banner-icon {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 
  This setup randomizes the floating icons' size, position, z-index, speed, delay, and animation path
  using only CSS and nth-child selectors, with more "random" and natural movement.
  (Blur is disabled, left/right movement and rotation are restricted for a more subtle effect.)
*/