:root {
    --primary: #103050;
    --secondary: #2f6caa;
    --secondary-transparent: #2f6caa90;
    --accent: #94c5e3;
    --neutral1: #8397a6;
    --neutral2: #47627a;
    --neutral3: #c1cad2;
    --title-font: "Space Grotesk", Arial, sans-serif;
    --text-font: "Nunito Sans", Arial, sans-serif;
}

.text-primary {
    color: var(--primary);
}

.bg-primary {
    background-color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-secondary-transparent {
    background-color: var(--secondary-transparent);
}

.text-accent {
    color: var(--accent);
}

.bg-accent {
    background-color: var(--accent);
}

.nunito-sans-base {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
}

.space-grotesk-title {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.logo {
    height: 60px;
    width: 100%;
}

.message {
    z-index: 1;
}

.carousel-viewport {
    overflow: hidden;
}

.carousel {
    list-style: none;
    white-space: nowrap;
    font-size: 0;
    opacity: 100%;
    width: auto;
    overflow: visible;
    animation: scroll 60s ease-in-out infinite;
}

.carousel-slide {
    list-style: none;
    position: relative;
    display: inline-block;
    background: center center no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;    
}

/*Animation*/
@keyframes scroll {
	0% { transform: translateX(0); }
    5% { transform: translateX(calc(100vw * -1)); }
    10% { transform: translateX(calc(100vw * -1)); }
    15% { transform: translateX(calc(100vw * -2)); }
    20% { transform: translateX(calc(100vw * -2)); }
    25% { transform: translateX(calc(100vw * -3)); }
    30% { transform: translateX(calc(100vw * -3)); }
    35% { transform: translateX(calc(100vw * -4)); }
    40% { transform: translateX(calc(100vw * -4)); }
    45% { transform: translateX(calc(100vw * -5)); }
    50% { transform: translateX(calc(100vw * -5)); }
    55% { transform: translateX(calc(100vw * -6)); }
    60% { transform: translateX(calc(100vw * -6)); }
    65% { transform: translateX(calc(100vw * -7)); }
    70% { transform: translateX(calc(100vw * -7)); }
    75% { transform: translateX(calc(100vw * -8)); }
    80% { transform: translateX(calc(100vw * -8)); }
    85% { transform: translateX(calc(100vw * -9)); }
    90% { transform: translateX(calc(100vw * -9)); }
    95% { transform: translateX(0) }
}