:root {
    --dark: #222831;
    --grey: #393e46;
    --turquoise: #00adb5;
    --light: #eeeeee;
}
body {
    font-family: fira-sans, sans-serif;
}

#loadingScreen {
    animation: loading-animation 5s cubic-bezier(0.000, 0.000, 0.230, 1);
}
@keyframes loading-animation {
    0% {left: 0;}
    75% {left: 0;}
    100% {left: -100vw;}
}
#loadingText {
    animation: loading-text-animation 1s cubic-bezier(0.000, 0.000, 0.230, 1);
}
@keyframes loading-text-animation {
    0% {opacity: 0; transform: scale(0.8);}
    80% {opacity: 0.8; transform: scale(1.05);}
    100% {opacity: 1; transform: scale(1);}
}

.bg-1 {
    background-image: url(/images/bg_1.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.cursor-none {
    cursor: none;
}
.bg-dark {
    background-color: var(--dark);
}
.bg-grey {
    background-color: var(--grey);
}
.bg-turquoise {
    background-color: var(--turquoise);
}
.bg-light {
    background-color: var(--light);
}
.text-turquoise {
    color: var(--turquoise);
}
.text-grey {
    color: var(--grey);
}
.text-light {
    color: var(--light);
}
.border-turquoise {
    border-color: var(--turquoise);
}
.font-sub {
    font-family: montserrat, sans-serif;
}
.transition-all {
    transition: all 300ms cubic-bezier(0.000, 0.000, 0.230, 1);
}

.bg-blur {
    background-color: var(--light);
    filter: blur(8px);
    -webkit-filter: blur(8px);
}
.cursor {
    position: fixed;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid #eeeeee;
    background-color: transparent;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 999;

    transition: transform 200ms;
}

.swiper-button-prev, .swiper-button-next {
    color: var(--light);
}
.showMenu {
    animation: showMenuAnim 300ms linear forwards;
}
.closeMenu {
    animation: closeMenuAnim 300ms linear forwards;
}

@keyframes showMenuAnim {
    from {right: -50%}
    to {right: 0%};
}
@keyframes closeMenuAnim {
    from {right: 0%;}
    to {right: -50%};
}

button.custom_btn:hover {
    background-color: var(--turquoise);
    color: var(--light);
}
textarea.custom_border, input.custom_border {
    border-color: var(--turquoise);
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
}
  
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.link-animate-off {
    overflow: hidden;
    background-image: linear-gradient(
        to right,
        var(--light),
        var(--light) 50%,
        var(--turquoise) 50%   
    );
    background-size: 200% 100%;
    background-position: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.link-animate-off:hover {
    transition: all 300ms cubic-bezier(0.000, 0.000, 0.230, 1);
    background-position: 0%;
}

.link-animate-on {
    overflow: hidden;
    background-image: linear-gradient(
        to right,
        var(--turquoise),
        var(--turquoise) 50%,
        var(--light) 50%   
    );
    background-size: 200% 100%;
    background-position: 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.link-animate-on:hover {
    transition: all 300ms cubic-bezier(0.000, 0.000, 0.230, 1);
    background-position: 0%;
}

.line-animate {
    animation: line-animation 3s cubic-bezier(0.000, 0.000, 0.230, 1);
}
@keyframes line-animation {
    from { width: 0% }
    to { width: 50%; }
}
.line-animate-full {
    animation: line-animation-full 3s cubic-bezier(0.000, 0.000, 0.230, 1);
}
@keyframes line-animation {
    from { width: 0% }
    to { width: 100%; }
}
.nav-animate {
    transition: all 300ms cubic-bezier(0.000, 0.000, 0.230, 1);
}
.nav-animate:hover {
    opacity: 1;
}

.social-animate {
    transition: all 300ms cubic-bezier(0.000, 0.000, 0.230, 1);
}
.social-animate:hover {
    color: var(--light);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1),0 4px 6px -2px rgba(255, 255, 255, 0.05);
}

.max-h-3 {
    max-height: 75vh;
}