:root {
--animate-duration: 0.8s;
--animate-delay: 1s;
--animate-repeat: 1;
--animate-distance: 6.25rem;
}
.animate__animated {
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-play-state: paused;
animation-play-state: paused;
&.run-animation {
-webkit-animation-play-state: running;
animation-play-state: running;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate__fadeIn {
--animate-duration: 2s;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, calc(var(--animate-distance) * -1), 0);
transform: translate3d(0, calc(var(--animate-distance) * -1), 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, calc(var(--animate-distance) * -1), 0);
transform: translate3d(0, calc(var(--animate-distance) * -1), 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(calc(var(--animate-distance) * -1), 0, 0);
transform: translate3d(calc(var(--animate-distance) * -1), 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(calc(var(--animate-distance) * -1), 0, 0);
transform: translate3d(calc(var(--animate-distance) * -1), 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(var(--animate-distance), 0, 0);
transform: translate3d(var(--animate-distance), 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(var(--animate-distance), 0, 0);
transform: translate3d(var(--animate-distance), 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, var(--animate-distance), 0);
transform: translate3d(0, var(--animate-distance), 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, var(--animate-distance), 0);
transform: translate3d(0, var(--animate-distance), 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.animate__revealRight,
.animate__revealLeft,
.animate__revealUp,
.animate__revealDown {
animation-timing-function: cubic-bezier(.7, 0, .3, 1);
animation-duration: 1s;
animation-fill-mode: both;
animation-play-state: paused;
-webkit-animation-timing-function: cubic-bezier(.7, 0, .3, 1);
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-play-state: paused;
}
.animate__revealRight.run-animation,
.animate__revealLeft.run-animation,
.animate__revealUp.run-animation,
.animate__revealDown.run-animation {
animation-play-state: running;
-webkit-animation-play-state: running;
}
@keyframes revealLeft {
from {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@-webkit-keyframes revealLeft {
from {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.animate__revealLeft {
animation-name: revealLeft;
}
@keyframes revealRight {
from {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@-webkit-keyframes revealRight {
from {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.animate__revealRight {
animation-name: revealRight;
}
@keyframes revealUp {
from {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@-webkit-keyframes revealUp {
from {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.animate__revealUp {
animation-name: revealUp;
}
@keyframes revealDown {
from {
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@-webkit-keyframes revealDown {
from {
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.animate__revealDown {
animation-name: revealDown;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-400 {
animation-delay: 0.4s;
}
.delay-600 {
animation-delay: 0.6s;
}
.delay-800 {
animation-delay: 0.8s;
}
.delay-1000 {
animation-delay: 1s;
}
.delay-1500 {
animation-delay: 1.5s;
}
.delay-2000 {
animation-delay: 2s;
}
.delay-2500 {
animation-delay: 2.5s;
}
.delay-3000 {
animation-delay: 3s;
}
.delay-cols-2 {
.animate__animated:nth-child(2n + 2) {
animation-delay: 0.2s;
}
}
.delay-cols-3 {
.animate__animated:nth-child(3n + 2) {
animation-delay: 0.2s;
}
.animate__animated:nth-child(3n + 3) {
animation-delay: 0.4s;
}
}
.delay-cols-4 {
.animate__animated:nth-child(4n + 2) {
animation-delay: 0.2s;
}
.animate__animated:nth-child(4n + 3) {
animation-delay: 0.4s;
}
.animate__animated:nth-child(4n + 4) {
animation-delay: 0.6s;
}
}
.count-up {
opacity: 0;
transition: 0.5s;
&.run-animation {
opacity: 1;
}
.lettering {
opacity: 0;
}
}
.lettering.run-animation {
opacity: 1;
}
#horizontal-scroll-container {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
height: 100vh;
}
#horizontal-scroll-container .horizontal-scroll-section {
width: 100%;
height: 100%;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
max-width: none !important;
}