/*
* Alfred Studio CSS Animation Export
* ----------------------------------
* Project name: Alfred Studio Landing page
* Project URL: local/alfred
* Author: Gyorfi Sandor
* Exported on: 2019-08-06
* CSS generated with Alfred Studio (https://alfredstudio.app)
*/


/*
================================================
#State: First state
================================================
State description: This is the first state in my project.
*/



/*
================================================
#State: hero background
================================================
State description: 
*/

@keyframes Keyframe-83-anim2 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-84-anim3 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-111-anim4 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-115-anim5 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-114-anim6 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-117-anim7 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-58-anim8 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-57-anim9 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-59-anim10 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-88-anim11 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-60-anim12 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-61-anim13 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-90-anim14 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-89-anim15 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-92-anim16 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-91-anim17 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-100-anim18 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-97-anim19 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-98-anim20 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-67-anim21 {
    0% {
        
    }
    45% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-66-anim22 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-68-anim23 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-64-anim24 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-56-anim25 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-25-anim26 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-24-anim27 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}

.keyframe-83 {
    
    animation-name: Keyframe-83-anim2;
    animation-duration: 1839ms;
    animation-delay: 1282ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-84 {
    
    animation-name: Keyframe-84-anim3;
    animation-duration: 1839ms;
    animation-delay: 610ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-111 {
    
    animation-name: Keyframe-111-anim4;
    animation-duration: 1839ms;
    animation-delay: 1455ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-115 {
    
    animation-name: Keyframe-115-anim5;
    animation-duration: 1839ms;
    animation-delay: 2318ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-114 {
    
    animation-name: Keyframe-114-anim6;
    animation-duration: 1839ms;
    animation-delay: 3196ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-117 {
    
    animation-name: Keyframe-117-anim7;
    animation-duration: 1839ms;
    animation-delay: 4040ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-58 {
    
    animation-name: Keyframe-58-anim8;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-57 {
    
    animation-name: Keyframe-57-anim9;
    animation-duration: 1839ms;
    animation-delay: 868ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-59 {
    
    animation-name: Keyframe-59-anim10;
    animation-duration: 1839ms;
    animation-delay: 1771ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-88 {
    
    animation-name: Keyframe-88-anim11;
    animation-duration: 1839ms;
    animation-delay: 2601ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-60 {
    
    animation-name: Keyframe-60-anim12;
    animation-duration: 1839ms;
    animation-delay: 2601ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-61 {
    
    animation-name: Keyframe-61-anim13;
    animation-duration: 1839ms;
    animation-delay: 3432ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-90 {
    
    animation-name: Keyframe-90-anim14;
    animation-duration: 1839ms;
    animation-delay: 2584ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-89 {
    
    animation-name: Keyframe-89-anim15;
    animation-duration: 1839ms;
    animation-delay: 3400ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-92 {
    
    animation-name: Keyframe-92-anim16;
    animation-duration: 1839ms;
    animation-delay: 4305ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-91 {
    
    animation-name: Keyframe-91-anim17;
    animation-duration: 1839ms;
    animation-delay: 5139ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-100 {
    
    animation-name: Keyframe-100-anim18;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-97 {
    
    animation-name: Keyframe-97-anim19;
    animation-duration: 1839ms;
    animation-delay: 825ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-98 {
    
    animation-name: Keyframe-98-anim20;
    animation-duration: 1839ms;
    animation-delay: 1659ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-67 {
    
    animation-name: Keyframe-67-anim21;
    animation-duration: 1839ms;
    animation-delay: 2500ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-66 {
    
    animation-name: Keyframe-66-anim22;
    animation-duration: 1839ms;
    animation-delay: 3394ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-68 {
    
    animation-name: Keyframe-68-anim23;
    animation-duration: 1839ms;
    animation-delay: 4237ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-64 {
    
    animation-name: Keyframe-64-anim24;
    animation-duration: 1839ms;
    animation-delay: 3380ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-56 {
    
    animation-name: Keyframe-56-anim25;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-25 {
    
    animation-name: Keyframe-25-anim26;
    animation-duration: 1839ms;
    animation-delay: 937ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-24 {
    
    animation-name: Keyframe-24-anim27;
    animation-duration: 1839ms;
    animation-delay: 1752ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}

/*
================================================
#State: pipeline hover micro interaction
================================================
State description: 
*/

@keyframes Timeline__flowpathbase-anim4 {
    0% {
        
    }
}
@keyframes Timeline__flowpathinteractive-anim5 {
    0% {
        
    }
}
@keyframes Timeline__flow--futureflow__item-hoverpathinteractive-anim8 {
    0% {
        stroke-dashoffset: -200;
    }
    50% {
        stroke-dashoffset: -100;
        stroke: rgba(255, 255, 255, 1);
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes Flow__item-hoverpathinteractive-anim2 {
    0% {
        stroke-dashoffset: 600;
    }
    50% {
        stroke-dashoffset: 400;
        stroke: rgba(255, 255, 255, 1);
    }
    100% {
        stroke-dashoffset: 200;
    }
}
@keyframes Flow__item-hoverpathbase-anim6 {
    0% {
        
    }
    50% {
        stroke: rgba(27, 56, 111, 0.8);
    }
    100% {
        
    }
}
@keyframes Flow__item-hoversvg-cont-after-anim7 {
    0% {
        
    }
    50.45% {
        
    }
    100% {
        
    }
}

.timeline__flow path.base {
    stroke: #1b386f;
    stroke-width: 1px;
    animation-name: Timeline__flowpathbase-anim4;
    animation-duration: 0ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.timeline__flow path.interactive {
    stroke-width: 2px;
    stroke-linecap: round;
    stroke: rgba(255, 255, 255, 0);
    animation-name: Timeline__flowpathinteractive-anim5;
    animation-duration: 0ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
}
.timeline__flow--future .flow__item:hover path.interactive {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-dasharray: 1, 15;
    stroke-linecap: round;
    stroke-width: 4;
    animation-name: Timeline__flow--futureflow__item-hoverpathinteractive-anim8;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.flow__item:hover path.interactive {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-dasharray: 1, 15;
    stroke-linecap: round;
    stroke-width: 4;
    animation-name: Flow__item-hoverpathinteractive-anim2;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.flow__item:hover path.base {
    stroke: rgba(27, 56, 111, 1);
    animation-name: Flow__item-hoverpathbase-anim6;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.flow__item:hover .svg-cont:after {
    transform-origin: center center;
    animation-name: Flow__item-hoversvg-cont-after-anim7;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
}

/*
================================================
#State: live connection image animation
================================================
State description: 
*/

@keyframes Connection_dot_01-anim2 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_02-anim3 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_03-anim4 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_04-anim5 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_05-anim6 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_06-anim7 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Connection_dot_07-anim8 {
    0% {
        
    }
    19.933% {
        fill-opacity: 1;
    }
    39.867% {
        
    }
    100% {
        
    }
}
@keyframes Transform-origin-help-anim9 {
    0% {
        
    }
    50.034% {
        transform: scale(1.2);
        opacity: 0.2;
    }
    100% {
        
    }
}
@keyframes Emojishadow-anim11 {
    0% {
        transform: scale(1);
    }
    40.667% {
        transform: scale(0.3);
    }
    61.389% {
        transform: scale(1.1, 1);
    }
    100% {
        
    }
}
@keyframes Emojihead-anim10 {
    0% {
        
    }
    41% {
        transform: translateY(-20px) scale(0.95, 1.1);
    }
    60.944% {
        transform: translateY(0) scale(1);
    }
    67.944% {
        transform: translateY(0) scale(1.1, 0.8);
    }
    78.944% {
        transform: scale(1);
    }
    100% {
        
    }
}
@keyframes Emojimouth_2-anim12 {
    0% {
        
    }
    39.869% {
        transform: translateY(-2px) scale(1.1);
    }
    63.536% {
        transform: scale(1.3, 1.1);
    }
    83.369% {
        transform: translateY(0px) scale(1);
    }
    100% {
        
    }
}
@keyframes Emojieye_ball-anim15 {
    0% {
        transform: translateY(0);
    }
    10.667% {
        transform: translateY(0);
    }
    40.944% {
        transform: translateY(-3px);
    }
    67.333% {
        transform: translateY(3px);
    }
    76.5% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes Emojieye_base-anim16 {
    0% {
        transform: translateY(0);
    }
    10.667% {
        transform: translateY(0);
    }
    40.944% {
        transform: translateY(1px);
    }
    67.667% {
        transform: translateY(-1px);
    }
    85.5% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(0);
    }
}

#connection_dot_01 {
    
    animation-name: Connection_dot_01-anim2;
    animation-duration: 2006.6774193548ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_02 {
    
    animation-name: Connection_dot_02-anim3;
    animation-duration: 2006.6774193548ms;
    animation-delay: 205ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_03 {
    
    animation-name: Connection_dot_03-anim4;
    animation-duration: 2006.6774193548ms;
    animation-delay: 398ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_04 {
    
    animation-name: Connection_dot_04-anim5;
    animation-duration: 2006.6774193548ms;
    animation-delay: 605ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_05 {
    
    animation-name: Connection_dot_05-anim6;
    animation-duration: 2006.6774193548ms;
    animation-delay: 805ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_06 {
    
    animation-name: Connection_dot_06-anim7;
    animation-duration: 2006.6774193548ms;
    animation-delay: 1030ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#connection_dot_07 {
    
    animation-name: Connection_dot_07-anim8;
    animation-duration: 2006.6774193548ms;
    animation-delay: 1191ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#transform-origin-help {
    transform-origin: 115px 112px;
    fill-opacity: 0.0;
    animation-name: Transform-origin-help-anim9;
    animation-duration: 1479ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
#emoji #shadow {
    transform-origin: 115px 112px;
    animation-name: Emojishadow-anim11;
    animation-duration: 1800ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.49, 0.00, 0.51, 0.51);
    animation-iteration-count: infinite;
}
#emoji #head {
    transform-origin: 115px 112px;
    animation-name: Emojihead-anim10;
    animation-duration: 1800ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.49, 0.00, 0.51, 0.51);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
#emoji path#mouth_2 {
    transform-origin: 115px 112px;
    animation-name: Emojimouth_2-anim12;
    animation-duration: 1800ms;
    animation-delay: 3ms;
    animation-timing-function: cubic-bezier(0.49, 0.00, 0.51, 0.51);
    animation-iteration-count: infinite;
}
#emoji .eye_ball {
    transform-origin: 115px 112px;
    animation-name: Emojieye_ball-anim15;
    animation-duration: 1800ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.49, 0.00, 0.51, 0.51);
    animation-iteration-count: infinite;
}
#emoji .eye_base {
    transform-origin: 115px 112px;
    animation-name: Emojieye_base-anim16;
    animation-duration: 1800ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.49, 0.00, 0.51, 0.51);
    animation-iteration-count: infinite;
}

/*
================================================
#State: export image animation
================================================
State description: 
*/

@keyframes Export--img-containerstroke-dash-anim2 {
    0% {
        stroke-dasharray: 250;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 250;
        stroke-dashoffset: 500;
    }
    100% {
        stroke-dasharray: 250;
        stroke-dashoffset: 1000;
    }
}
@keyframes File_03-anim14 {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1.2);
    }
    5% {
        opacity: 0;
    }
    25% {
        transform: translateX(66px) scale(1);
        opacity: 1;
    }
    50.55% {
        transform: translateX(137px) scale(0.85);
        opacity: 1;
    }
    75% {
        transform: translateX(198px) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translateX(198px) scale(0.5);
        opacity: 0;
    }
}
@keyframes File_03pathbase-anim25 {
    0% {
        fill: #2f7df6;
    }
    5% {
        fill: #2f7df6;
    }
    25% {
        fill: #2f7df6;
    }
    50% {
        fill: #B9B9B9;
    }
    75% {
        fill: #B9B9B9;
    }
    100% {
        fill: #B9B9B9;
    }
}
@keyframes File_02-anim13 {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1.2);
    }
    5% {
        opacity: 0;
    }
    25% {
        transform: translateX(66px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(137px) scale(0.85);
        opacity: 1;
    }
    75% {
        transform: translateX(198px) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translateX(198px) scale(0.5);
        opacity: 0;
    }
}
@keyframes File_02pathbase-anim24 {
    0% {
        fill: #2f7df6;
    }
    5% {
        fill: #2f7df6;
    }
    25% {
        fill: #2f7df6;
    }
    50% {
        fill: #B9B9B9;
    }
    75% {
        fill: #B9B9B9;
    }
    100% {
        fill: #B9B9B9;
    }
}
@keyframes File_01-anim12 {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1.2);
    }
    5% {
        opacity: 0;
    }
    25% {
        transform: translateX(66px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(137px) scale(0.85);
        opacity: 1;
    }
    75% {
        transform: translateX(198px) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translateX(198px) scale(0.5);
        opacity: 0;
    }
}
@keyframes File_01pathbase-anim23 {
    0% {
        fill: #2f7df6;
    }
    5% {
        fill: #2f7df6;
    }
    25% {
        fill: #2f7df6;
    }
    50% {
        fill: #B9B9B9;
    }
    75% {
        fill: #B9B9B9;
    }
    100% {
        fill: #B9B9B9;
    }
}
@keyframes File_00-anim11 {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1.2);
    }
    5% {
        opacity: 0;
    }
    25% {
        transform: translateX(66px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(137px) scale(0.85);
        opacity: 1;
    }
    75% {
        transform: translateX(198px) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translateX(198px) scale(0.5);
        opacity: 0;
    }
}
@keyframes File_00pathbase-anim22 {
    0% {
        fill: #2f7df6;
    }
    5% {
        fill: #2f7df6;
    }
    25% {
        fill: #2f7df6;
    }
    50% {
        fill: #B9B9B9;
    }
    75% {
        fill: #B9B9B9;
    }
    100% {
        fill: #B9B9B9;
    }
}
@keyframes Export--img-containerdot_07-anim6 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_06-anim16 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_05-anim17 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_04-anim18 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_03-anim19 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_02-anim20 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}
@keyframes Export--img-containerdot_01-anim21 {
    0% {
        
    }
    15% {
        fill-opacity: 1;
    }
    100% {
        
    }
}

.export--img-container #stroke-dash {
    
    animation-name: Export--img-containerstroke-dash-anim2;
    animation-duration: 4800ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
#file_03 {
    transform-origin: 215px 50px;
    opacity: 0;
    animation-name: File_03-anim14;
    animation-duration: 6000ms;
    animation-delay: 4900ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.00);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_03 path.base {
    
    animation-name: File_03pathbase-anim25;
    animation-duration: 6000ms;
    animation-delay: 4900ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.01);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_02 {
    transform-origin: 215px 50px;
    opacity: 0;
    animation-name: File_02-anim13;
    animation-duration: 6000ms;
    animation-delay: 3400ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.00);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_02 path.base {
    
    animation-name: File_02pathbase-anim24;
    animation-duration: 6000ms;
    animation-delay: 3400ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.01);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_01 {
    transform-origin: 215px 50px;
    opacity: 0;
    animation-name: File_01-anim12;
    animation-duration: 6000ms;
    animation-delay: 1900ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.00);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_01 path.base {
    
    animation-name: File_01pathbase-anim23;
    animation-duration: 6000ms;
    animation-delay: 1900ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.01);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_00 {
    transform-origin: 215px 50px;
    opacity: 0;
    animation-name: File_00-anim11;
    animation-duration: 6000ms;
    animation-delay: 400ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.00);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#file_00 path.base {
    
    animation-name: File_00pathbase-anim22;
    animation-duration: 6000ms;
    animation-delay: 400ms;
    animation-timing-function: cubic-bezier(0.52, 0.05, 0.20, 1.01);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.export--img-container .dot_07 {
    
    animation-name: Export--img-containerdot_07-anim6;
    animation-duration: 1500ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_06 {
    
    animation-name: Export--img-containerdot_06-anim16;
    animation-duration: 1500ms;
    animation-delay: 150ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_05 {
    
    animation-name: Export--img-containerdot_05-anim17;
    animation-duration: 1500ms;
    animation-delay: 300ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_04 {
    
    animation-name: Export--img-containerdot_04-anim18;
    animation-duration: 1500ms;
    animation-delay: 450ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_03 {
    
    animation-name: Export--img-containerdot_03-anim19;
    animation-duration: 1500ms;
    animation-delay: 600ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_02 {
    
    animation-name: Export--img-containerdot_02-anim20;
    animation-duration: 1500ms;
    animation-delay: 750ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.export--img-container .dot_01 {
    
    animation-name: Export--img-containerdot_01-anim21;
    animation-duration: 1500ms;
    animation-delay: 900ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

/*
================================================
#State: social content
================================================
State description: 
*/

@keyframes Social__link-hoverimg-container-anim2 {
    0% {
        
    }
    61.25% {
        transform: scale(1.25);
    }
    100% {
        
    }
}
@keyframes Social__link-hoverimg-anim3 {
    0% {
        
    }
    55% {
        transform: scale(1.15)
    }
    100% {
        
    }
}
@keyframes Social__link-hovertext-container-anim4 {
    0% {
        
    }
    61.412% {
        transform: scale(1.1) translateY(2px);
        letter-spacing: 0.05em;
    }
    82.247% {
        transform: scale(1);
        letter-spacing: 0.02em;
    }
    100% {
        
    }
}

.social__link:hover .img-container {
    transform-origin: bottom center;
    animation-name: Social__link-hoverimg-container-anim2;
    animation-duration: 1200ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.47, 0.07, 0.50, 0.89);
    animation-iteration-count: infinite;
}
.social__link:hover img {
    
    animation-name: Social__link-hoverimg-anim3;
    animation-duration: 1200ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.47, 0.07, 0.50, 0.89);
    animation-iteration-count: infinite;
}
.social__link:hover .text-container {
    transform-origin: top center;
    animation-name: Social__link-hovertext-container-anim4;
    animation-duration: 1177.2962962963ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.95);
    animation-fill-mode: forwards;
}

/*
================================================
#State: let's start particle fusion animation
================================================
State description: 
*/

@keyframes Section--startparticlenegative-anim2 {
    0% {
        transform: translateX(-4000%);
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translateX(0%);
        opacity: 1;
    }
    51% {
        transform: translateX(0%) scale(0);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes Particlepositive--after-anim7 {
    0% {
        
    }
    32.005% {
        transform: scale(1.2, 1);
    }
    67.057% {
        
    }
    100% {
        
    }
}
@keyframes Section--startparticlepositive-anim3 {
    0% {
        transform: translateX(4000%);
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translateX(0%);
        opacity: 1;
    }
    51% {
        transform: translateX(0%) scale(0);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes Section--startbooom-anim4 {
    0% {
        transform: scale(0);
        background-color: #fff;
        opacity: 0;
    }
    50% {
        transform: scale(0);
        background-color: #fff;
        opacity: 0;
        animation-timing-function: cubic-bezier(0.09, 0.70, 0.68, 0.67);
    }
    54.75% {
        opacity: 1;
        animation-timing-function: cubic-bezier(0.25, 0.25, 0.35, 0.93)
    }
    96.5% {
        transform: scale(1.5);
        background-color: rgba(255, 255, 255, 0.6588235294117647);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes Section--startsection__title-anim5 {
    0% {
        
    }
    50% {
        transform: scale(1);
    }
    54.625% {
        transform: scale(1.3);
    }
    68.15% {
        transform: scale(1);
    }
    100% {
        
    }
}
@keyframes Section--startdiamond-anim6 {
    0% {
        transform: scale(0) rotate(45deg);
        background-color: #fff;
        opacity: 0;
    }
    50% {
        opacity: 0;
        transform: translateY(0%) scale(0) rotate(45deg);
    }
    51% {
        transform: translateY(0%) scale(1.3) rotate(45deg);
        background-color: #fff;
        opacity: 1;
    }
    81.75% {
        transform: translateY(400px) scale(1) rotate(45deg);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(400px) scale(1) rotate(45deg);
    }
}

.section--start .particle.negative {
    
    animation-name: Section--startparticlenegative-anim2;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(1.00, 0.03, 1.00, 0.63);
    animation-iteration-count: infinite;
}
.particle.positive::after {
    
    animation-name: Particlepositive--after-anim7;
    animation-duration: 853ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.section--start .particle.positive {
    
    animation-name: Section--startparticlepositive-anim3;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(1.00, 0.03, 1.00, 0.63);
    animation-iteration-count: infinite;
}
.section--start .booom {
    
    animation-name: Section--startbooom-anim4;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
}
.section--start .section__title {
    position: relative;
    display: block;
    animation-name: Section--startsection__title-anim5;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.36, 0.07, 0.21, 0.97);
    animation-iteration-count: infinite;
}
.section--start .diamond {
    display: block;
    opacity: 0;
    width: 14px;
    height: 14px;
    left: calc(50% - 14px);
    top: calc(50% - 14px);
    position: absolute;
    background-color: white;
    animation-name: Section--startdiamond-anim6;
    animation-duration: 4000ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.01, 0.43, 0.68, 1.00);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

/*
================================================
#State: hero cta button
================================================
State description: 
*/

@keyframes Hero__cta--btn-anim2 {
    0% {
        
    }
    32.99% {
        /* transform: translateY(-2px);*/
        transform: scale(1.02);
    }
    65.98% {
        transform: translateY(2px);
    }
    100% {
        
    }
}
@keyframes Section--herobtn-container-anim3 {
    0% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes Hero__cta--btn-anim2-4 {
    0% {
        
    }
    46.997% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.hero__cta--btn___translate {
    
    animation-name: Hero__cta--btn-anim2;
    animation-duration: 1791.4545454545ms;
    animation-delay: 1464ms;
    animation-timing-function: cubic-bezier(0.42, 0.19, 0.47, 0.74);
    animation-iteration-count: infinite;
}
.section--hero .btn-container {
    opacity: 0;
    animation-name: Section--herobtn-container-anim3;
    animation-duration: 872.45454545455ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.hero__cta--btn {
    
    animation-name: Hero__cta--btn-anim2-4;
    animation-duration: 2678.8888888889ms;
    animation-delay: 1453ms;
    animation-timing-function: cubic-bezier(0.39, 0.01, 0.54, 1.00);
    animation-iteration-count: infinite;
}

/*
================================================
#State: hero background-copy
================================================
State description: 
*/

@keyframes Keyframe-83-anim2 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-84-anim3 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-111-anim4 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-115-anim5 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-114-anim6 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-117-anim7 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-58-anim8 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-57-anim9 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-59-anim10 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-88-anim11 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-60-anim12 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-61-anim13 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-90-anim14 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-89-anim15 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-92-anim16 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-91-anim17 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-100-anim18 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-97-anim19 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-98-anim20 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-67-anim21 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-66-anim22 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-68-anim23 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-64-anim24 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-56-anim25 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-25-anim26 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}
@keyframes Keyframe-24-anim27 {
    0% {
        
    }
    45.024% {
        fill-opacity: 0.09;
    }
    100% {
        
    }
}

.keyframe-83 {
    
    animation-name: Keyframe-83-anim2;
    animation-duration: 1839ms;
    animation-delay: 1282ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-84 {
    
    animation-name: Keyframe-84-anim3;
    animation-duration: 1839ms;
    animation-delay: 610ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-111 {
    
    animation-name: Keyframe-111-anim4;
    animation-duration: 1839ms;
    animation-delay: 1455ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-115 {
    
    animation-name: Keyframe-115-anim5;
    animation-duration: 1839ms;
    animation-delay: 2318ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-114 {
    
    animation-name: Keyframe-114-anim6;
    animation-duration: 1839ms;
    animation-delay: 3196ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-117 {
    
    animation-name: Keyframe-117-anim7;
    animation-duration: 1839ms;
    animation-delay: 4040ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-58 {
    
    animation-name: Keyframe-58-anim8;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-57 {
    
    animation-name: Keyframe-57-anim9;
    animation-duration: 1839ms;
    animation-delay: 868ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-59 {
    
    animation-name: Keyframe-59-anim10;
    animation-duration: 1839ms;
    animation-delay: 1771ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-88 {
    
    animation-name: Keyframe-88-anim11;
    animation-duration: 1839ms;
    animation-delay: 2601ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-60 {
    
    animation-name: Keyframe-60-anim12;
    animation-duration: 1839ms;
    animation-delay: 2601ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-61 {
    
    animation-name: Keyframe-61-anim13;
    animation-duration: 1839ms;
    animation-delay: 3432ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-90 {
    
    animation-name: Keyframe-90-anim14;
    animation-duration: 1839ms;
    animation-delay: 2584ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-89 {
    
    animation-name: Keyframe-89-anim15;
    animation-duration: 1839ms;
    animation-delay: 3400ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-92 {
    
    animation-name: Keyframe-92-anim16;
    animation-duration: 1839ms;
    animation-delay: 4305ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-91 {
    
    animation-name: Keyframe-91-anim17;
    animation-duration: 1839ms;
    animation-delay: 5139ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-100 {
    
    animation-name: Keyframe-100-anim18;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-97 {
    
    animation-name: Keyframe-97-anim19;
    animation-duration: 1839ms;
    animation-delay: 996ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-98 {
    
    animation-name: Keyframe-98-anim20;
    animation-duration: 1839ms;
    animation-delay: 1738ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-67 {
    
    animation-name: Keyframe-67-anim21;
    animation-duration: 1839ms;
    animation-delay: 2540ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-66 {
    
    animation-name: Keyframe-66-anim22;
    animation-duration: 1839ms;
    animation-delay: 3394ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-68 {
    
    animation-name: Keyframe-68-anim23;
    animation-duration: 1839ms;
    animation-delay: 4237ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-64 {
    
    animation-name: Keyframe-64-anim24;
    animation-duration: 1839ms;
    animation-delay: 3380ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-56 {
    
    animation-name: Keyframe-56-anim25;
    animation-duration: 1839ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-25 {
    
    animation-name: Keyframe-25-anim26;
    animation-duration: 1839ms;
    animation-delay: 937ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}
.keyframe-24 {
    
    animation-name: Keyframe-24-anim27;
    animation-duration: 1839ms;
    animation-delay: 1752ms;
    animation-timing-function: cubic-bezier(0.21, 0.40, 0.80, 0.60);
    animation-iteration-count: infinite;
}

/*
================================================
#State: social content-copy
================================================
State description: 
*/

@keyframes Social__link-hoverimg-container-anim2 {
    0% {
        
    }
    61.25% {
        transform: scale(1.25);
    }
    100% {
        
    }
}
@keyframes Social__link-hoverimg-anim3 {
    0% {
        
    }
    55% {
        transform: scale(1.15)
    }
    100% {
        
    }
}
@keyframes Social__link-hovertext-container-anim4 {
    0% {
        
    }
    100% {
        
    }
}

.social__link:hover .img-container {
    transform-origin: bottom center;
    animation-name: Social__link-hoverimg-container-anim2;
    animation-duration: 1200ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.47, 0.07, 0.50, 0.89);
    animation-iteration-count: infinite;
}
.social__link:hover img {
    
    animation-name: Social__link-hoverimg-anim3;
    animation-duration: 1200ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.47, 0.07, 0.50, 0.89);
    animation-iteration-count: infinite;
}
.social__link:hover span.text-container {
    transform-origin: top center;
    animation-name: Social__link-hovertext-container-anim4;
    animation-duration: 1177.2962962963ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.47, 0.07, 0.50, 0.89);
    animation-fill-mode: forwards;
}

/*
================================================
#State: open hero laptop
================================================
State description: 
*/

@keyframes Laptop__wrapper-anim2 {
    0% {
        
    }
}
@keyframes Laptop__monitor-anim3 {
    0% {
        transform: rotateX(-85deg);
    }
    9.585% {
        transform: rotateX(-85deg);
    }
    68.44% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
@keyframes Time_calc_browser-anim4 {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    34% {
        transform: translateY(30px);
        opacity: 0;
    }
    86% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.laptop__wrapper {
    perspective: 2000px;
    perspective-origin: 50% 100%;
    animation-name: Laptop__wrapper-anim2;
    animation-duration: 0ms;
    animation-delay: 0ms;
    animation-timing-function: ease;
}
.laptop__monitor {
    transform-origin: bottom center;
    transform: rotateX(-85deg);
    animation-name: Laptop__monitor-anim3;
    animation-duration: 2500ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.83, -0.03, 0.61, 0.99);
    animation-fill-mode: forwards;
}
#time_calc_browser {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    animation-name: Time_calc_browser-anim4;
    animation-duration: 2500ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.21, 0.21, 0.45, 1.00);
    animation-fill-mode: forwards;
}

/*
================================================
#State: cookies popup
================================================
State description: 
*/

@keyframes Privacy-anim2 {
    0% {
        background-position: -100% 50%;
    }
    48% {
        background-position: -50% 50%;
    }
    100% {
        background-position: -100% 50%;
    }
}

.privacy {
    background-size: 500% 500%;
    animation-name: Privacy-anim2;
    animation-duration: 15827ms;
    animation-delay: 0ms;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    animation-iteration-count: infinite;
}