.hidden {
    visibility: hidden;
}

/* Logo default styles */
.logo-top-spacing {
    margin: auto;
    margin-top: 70px;
    min-height: 45px;
    margin-bottom: 0;
}

.logo-xs {
    width: 90px;
}

.logo-min-xs {
    width: 8px;
}

.logo-sm {
    width: 110px;
}

.logo-min-sm {
    width: 15px;
}

.logo-md {
    width: 130px;
}

.logo-min-md {
    width: 25px;
}

.logo-lg {
    width: 150px;
}

.logo-min-lg {
    width: 45px;
}

.logo-xl {
    width: 170px;
}

.logo-min-xl {
    width: 65px;
}

.logo-flexible {
    width: inherit;
}

/* Ensures the logo images take the right amount of space ratio-wise even if not already loaded */
.fl-studio-logo {
    aspect-ratio: 131 / 40;
}

.logo-container {
    width: 450px;
    position: relative;
    padding: 0 50px;
    text-align: center;
}

.fl-studio-web-light {
    aspect-ratio: inherit;
    width: 100%;
    margin: 0;
    height: 45px;
}

.frutty-logo {
    aspect-ratio: 23 / 35;
}

/* Mobile-specific (medium) styles here */
@media (max-width: 768px) {
    .logo-top-spacing {
        margin-top: 30px;
    }
}