.reveal {
    opacity: 0;
}

.reveal.active-animation {
    opacity: 1;
}
.forwards:hover {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}
.forwards .btn-pulse::before, .backwards .btn-pulse::before    {
    content: "";
    position: absolute;
    pointer-events: none;
    background: var(--blue);
    border-radius: 5rem;
    z-index: -1;
    animation-fill-mode: forwards;
}
.forwards .btn-pulse::before   {
    animation-direction: normal;
}

.backwards .btn-pulse::before   {
    animation-direction: reverse !important;
}


.btn-pulse-1::before {
    animation: pulse-1 .5s 1;
}
.btn-pulse-2::before {
    animation: pulse-2 .5s 1;
}
.btn-pulse-3::before {
    animation: pulse-3 .6s 1;
}
.btn-pulse-4::before {
    animation: pulse-4 .7s 1;
}

.active-animation.text-blur-in {
    -webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
    animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

.active-animation.slide-in {
    -webkit-animation: slide-in 1s ease-in-out .25s both;
    animation: slide-in 1s ease-in-out .25s both;
}

.active-animation.appear-in-center {
    -webkit-animation: appear-in-center 0.8s cubic-bezier(0.470, 0.000, 0.745, 0.715) .3s both;
    animation: appear-in-center 0.8s cubic-bezier(0.470, 0.000, 0.745, 0.715) .3s both;
}

.delay-1 {
    animation-delay: .5s !important;
    -webkit-animation-delay: .5s !important;
}
.delay-2 {
    animation-delay: .75s !important;
    -webkit-animation-delay: .75s !important;
}
.delay-3 {
    animation-delay: 1s !important;
    -webkit-animation-delay: 1s !important;
}
.delay-4 {
    animation-delay: 1.25s !important;
    -webkit-animation-delay: 1.25s !important;
}
.duration-1 {
    animation-duration: .5s !important;
    -webkit-animation-duration: .5s !important;
}
.duration-2 {
    animation-duration: .75s !important;
    -webkit-animation-duration: .75s !important;
}
.duration-3 {
    animation-duration: 1s !important;
    -webkit-animation-duration: 1s !important;
}

.parallax {
    height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    perspective: 5px;
}

.parallax-layer {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    transition: opacity .5s ease-out;
}

.parallax-1 {
    transform: translateZ(0px);
}
.parallax-2 {
    transform: translateZ(-1px);
    scale: 1.2;
}
.parallax-3 {
    transform: translateZ(-2px);
    scale: 1.4;
}
.parallax-4 {
    transform: translateZ(-3px);
    scale: 1.6;
}
.parallax-5 {
    transform: translateZ(-4px);
    scale: 1.8;
}

@keyframes pulse-1 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .6;
    }
    100% {
        width: calc(100% + 1rem);
        height: calc(100% + 1rem);
        top: -.5rem;
        left: -.5rem;
        opacity: .8;
    }
}
@-webkit-keyframes pulse-1 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .6;
    }
    100% {
        width: calc(100% + 1rem);
        height: calc(100% + 1rem);
        top: -.5rem;
        left: -.5rem;
        opacity: .8;
    }
}
@keyframes pulse-2 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .4;
    }
    100% {
        width: calc(100% + 2rem);
        height: calc(100% + 2rem);
        top: -1rem;
        left: -1rem;
        opacity: .6;
    }
}
@-webkit-keyframes pulse-2 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .4;
    }
    100% {
        width: calc(100% + 2rem);
        height: calc(100% + 2rem);
        top: -1rem;
        left: -1rem;
        opacity: .6;
    }
}
@keyframes pulse-3 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .2;
    }
    100% {
        width: calc(100% + 3rem);
        height: calc(100% + 3rem);
        top: -1.5rem;
        left: -1.5rem;
        opacity: .4;
    }
}
@-webkit-keyframes pulse-3 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .2;
    }
    100% {
        width: calc(100% + 3rem);
        height: calc(100% + 3rem);
        top: -1.5rem;
        left: -1.5rem;
        opacity: .4;
    }
}
@-webkit-keyframes pulse-4 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
    }
    100% {
        width: calc(100% + 4rem);
        height: calc(100% + 4rem);
        top: -2rem;
        left: -2rem;
        opacity: .2;
    }
}
@keyframes pulse-4 {
    0% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
    }
    100% {
        width: calc(100% + 4rem);
        height: calc(100% + 4rem);
        top: -2rem;
        left: -2rem;
        opacity: .2;
    }
}

@-webkit-keyframes text-blur-out {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
    }
    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}
@keyframes text-blur-out {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
    }
    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}
@-webkit-keyframes slide-in {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes appear-in-center {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: blur(2px);
        filter: blur(2px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes appear-in-center {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: blur(2px);
        filter: blur(2px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}