/*-------------------| Welcome page |-------------------*/
@keyframes welcome-arrow-move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
}


/*-------------------| Scroll |-------------------*/
.scrolled {
    animation-duration: 0.8s;
}

.unScrolled {
    animation-direction: reverse;
    animation-duration: 0.4s;
}


/*---------|Slidetop|---------*/
.scrolled.slide-top, .unScrolled.slide-top {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-name: slide-top;
}

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


/*---------|Fade|---------*/
.scrolled.fade, .unScrolled.fade {
    animation-name: fade;
}

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

/*---------|Scale center|---------*/
.scrolled.scale-center, .unScrolled.scale-center {
    animation-name: scale-center;
}

@keyframes scale-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*---------|Slide left|---------*/
.scrolled.slide-left, .unScrolled.slide-left {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: slide-left;
}

@keyframes slide-left {
    0% {
        transform: translateZ(-1400px) translateX(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}

/*---------|Slide right|---------*/
.scrolled.slide-right, .unScrolled.slide-right {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: slide-right;
    position: relative;
}

@keyframes slide-right {
    0% {
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }
    100% {
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}

/*---------|Slide blurred left|---------*/
.scrolled.slide-blurred-left, .unScrolled.slide-blurred-left {
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-name: slide-blurred-left;
}

@keyframes slide-blurred-left {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

/*---------|Slide blurred right|---------*/
.scrolled.slide-blurred-right, .unScrolled.slide-blurred-right {
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-name: slide-blurred-right;
    position: relative;
}

@keyframes slide-blurred-right {
    0% {
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 0 50%;
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

/*---------|Bounce left|---------*/
.scrolled.bounce-left {
    animation-name: bounce-left;
}

.unScrolled.bounce-left {
    animation-name: fade;
}

@keyframes bounce-left {
    0% {
        transform: translateX(-600px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(-68px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(-28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(-8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
}

/*---------|Bounce right|---------*/
.scrolled.bounce-right {
    animation-name: bounce-right;
}

.unScrolled.bounce-right {
    animation-name: fade;
}

@keyframes bounce-right {
    0% {
        transform: translateX(600px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(68px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(32px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
}

/*---------|Roll left|---------*/
.scrolled.roll-left, .unScrolled.roll-left {
    animation-timing-function: ease-out;
    animation-name: roll-left;
}

@keyframes roll-left {
    0% {
        transform: translateX(-800px) rotate(-540deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/*---------|Roll right|---------*/
.scrolled.roll-right, .unScrolled.roll-right {
    animation-timing-function: ease-out;
    animation-name: roll-right;
}

@keyframes roll-right {
    0% {
        transform: translateX(800px) rotate(540deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/*---------|Tilt bl|---------*/
.scrolled.tilt-bl, .unScrolled.tilt-bl {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: tilt-bl;
}

@keyframes tilt-bl {
    0% {
        transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}

/*---------|Tilt br|---------*/
.scrolled.tilt-br, .unScrolled.tilt-br {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: tilt-br;
}

@keyframes tilt-br {
    0% {
        transform: rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}

/*---------|Slit left|---------*/
.scrolled.slit-left, .unScrolled.slit-left {
    animation-duration: 0.45s;
    animation-timing-function: ease-out;
    animation-name: slit-left;
}

@keyframes slit-left {
    0% {
        transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    54% {
        transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotate3d(-1, 1, 0, 0);
        animation-timing-function: ease-out;
    }
}

/*---------|Slit right|---------*/
.scrolled.slit-right, .unScrolled.slit-right {
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-name: slit-right;
}

@keyframes slit-right {
    0% {
        transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    54% {
        transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    100% {
        transform: translateZ(0) rotate3d(1, 1, 0, 0);
        animation-timing-function: ease-out;
    }
}

/*---------|Slide elliptic left|---------*/
.scrolled.slide-elliptic-left, .unScrolled.slide-elliptic-left {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: slide-elliptic-left;
}

@keyframes slide-elliptic-left {
    0% {
        transform: translateX(800px) rotateY(-30deg) scale(0);
        transform-origin: -100% 50%;
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0) scale(1);
        transform-origin: -1800px 50%;
        opacity: 1;
    }
}

/*---------|Slide elliptic right|---------*/
.scrolled.slide-elliptic-right, .unScrolled.slide-elliptic-right {
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-name: slide-elliptic-right;
}

@keyframes slide-elliptic-right {
    0% {
        transform: translateX(-800px) rotateY(30deg) scale(0);
        transform-origin: -100% 50%;
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0) scale(1);
        transform-origin: 1800px 50%;
        opacity: 1;
    }
}


/*-------------------| Header |-------------------*/
#header-title {
    margin-top: -5px;
}

@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 353.6767272949219px;
        stroke-dasharray: 353.6767272949219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 353.6767272949219px;
    }
}

@keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-1 {
    animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
    animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 298.58953857421875px;
        stroke-dasharray: 298.58953857421875px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 298.58953857421875px;
    }
}

@keyframes animate-svg-fill-2 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-2 {
    animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
    animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@keyframes animate-svg-stroke-3 {
    0% {
        stroke-dashoffset: 164.60000610351562px;
        stroke-dasharray: 164.60000610351562px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 164.60000610351562px;
    }
}

@keyframes animate-svg-fill-3 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-3 {
    animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
    animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@keyframes animate-svg-stroke-4 {
    0% {
        stroke-dashoffset: 335.57830810546875px;
        stroke-dasharray: 335.57830810546875px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 335.57830810546875px;
    }
}

@keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-4 {
    animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
    animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@keyframes animate-svg-stroke-5 {
    0% {
        stroke-dashoffset: 167.81039428710938px;
        stroke-dasharray: 167.81039428710938px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 167.81039428710938px;
    }
}

@keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-5 {
    animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
    animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@keyframes animate-svg-stroke-6 {
    0% {
        stroke-dashoffset: 280.7721252441406px;
        stroke-dasharray: 280.7721252441406px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 280.7721252441406px;
    }
}

@keyframes animate-svg-fill-6 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-6 {
    animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
    animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@keyframes animate-svg-stroke-7 {
    0% {
        stroke-dashoffset: 345.7666931152344px;
        stroke-dasharray: 345.7666931152344px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 345.7666931152344px;
    }
}

@keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-7 {
    animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
    animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@keyframes animate-svg-stroke-8 {
    0% {
        stroke-dashoffset: 164.60000610351562px;
        stroke-dasharray: 164.60000610351562px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 164.60000610351562px;
    }
}

@keyframes animate-svg-fill-8 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-8 {
    animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
    animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@keyframes animate-svg-stroke-9 {
    0% {
        stroke-dashoffset: 164.60000610351562px;
        stroke-dasharray: 164.60000610351562px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 164.60000610351562px;
    }
}

@keyframes animate-svg-fill-9 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-9 {
    animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
    animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@keyframes animate-svg-stroke-10 {
    0% {
        stroke-dashoffset: 345.76654052734375px;
        stroke-dasharray: 345.76654052734375px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 345.76654052734375px;
    }
}

@keyframes animate-svg-fill-10 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-10 {
    animation: animate-svg-stroke-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
    animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}

@keyframes animate-svg-stroke-11 {
    0% {
        stroke-dashoffset: 288.4043884277344px;
        stroke-dasharray: 288.4043884277344px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 288.4043884277344px;
    }
}

@keyframes animate-svg-fill-11 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #3E3E3E;
    }
}

.header-title-11 {
    animation: animate-svg-stroke-11 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both,
    animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}