@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap");

:root {
    --artopia-bg: #090909;
    --artopia-text: #ffffff;
    --artopia-muted: rgba(255, 255, 255, .68);
    --artopia-accent: #ffcc00;
}

body,
body button,
body input,
body select,
body textarea,
body a,
body p,
body span,
body label,
body li {
    font-family: "Archivo", sans-serif !important;
    font-weight: 400 !important;
    font-stretch: 110% !important;
    font-variation-settings: "wdth" 110, "wght" 400 !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body h1 *,
body h2 *,
body h3 *,
body h4 *,
body h5 *,
body h6 * {
    font-family: "Archivo", sans-serif !important;
    font-weight: 300 !important;
    font-stretch: 65% !important;
    font-variation-settings: "wdth" 65, "wght" 300 !important;
}

#ajaxApp,
#ajaxApp button,
#ajaxApp input,
#ajaxApp select,
#ajaxApp textarea,
#ajaxApp a,
#ajaxApp p,
#ajaxApp span,
#ajaxApp label,
#ajaxApp li,
#navbar .search-content,
#navbar input[type="search"] {
    font-family: "Archivo", sans-serif !important;
    font-weight: 400 !important;
    font-stretch: 110% !important;
    font-variation-settings: "wdth" 110, "wght" 400 !important;
}

#ajaxApp h1,
#ajaxApp h2,
#ajaxApp h3,
#ajaxApp h4,
#ajaxApp h5,
#ajaxApp h6,
#ajaxApp h1 *,
#ajaxApp h2 *,
#ajaxApp h3 *,
#ajaxApp h4 *,
#ajaxApp h5 *,
#ajaxApp h6 * {
    font-family: "Archivo", sans-serif !important;
    font-weight: 300 !important;
    font-stretch: 65% !important;
    font-variation-settings: "wdth" 65, "wght" 300 !important;
}

#navbar,
#navbar .header,
#navbar .navbar,
#footer,
#footer .footer-section,
#footer .gen-copyright-footer {
    border: 0 !important;
    background: var(--artopia-bg) !important;
}

#navbar {
    position: fixed !important;
    z-index: 1100 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    min-height: 80px !important;
}

#navbar > div,
#navbar vd-component,
#navbar .header,
#navbar .navbar-brand,
#navbar .navbar-brand img {
    visibility: visible !important;
    opacity: 1 !important;
}

#navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
}

.body-pt-90 {
    display: block !important;
    height: 80px !important;
    min-height: 80px !important;
}

#navbar .container-fluid,
#footer .plr-30,
#footer .container-fluid {
    width: 100% !important;
    max-width: 1600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 5vw !important;
    padding-left: 5vw !important;
}

#navbar .navbar-brand img,
#footer .gen-footer-logo {
    width: auto !important;
    max-width: 180px !important;
    height: 40px !important;
    object-fit: contain !important;
}

#navbar .nav-link,
#navbar .more-btn {
    color: #fff !important;
    font-stretch: 75% !important;
    font-variation-settings: "wdth" 75, "wght" 400 !important;
}

#navbar .nav-link:hover,
#navbar .nav-link.activeClass,
#navbar .more-btn:hover,
#footer a:hover {
    color: var(--artopia-accent) !important;
}

#footer .footer-coll-top {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

/* Keep the app column visible, but hold the store links until launch. */
#footer .footer-coll-top .container-fluid > .row > [class*="col-"]:nth-child(4) {
    display: block !important;
}

#footer .footer-coll-top .container-fluid > .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

@media (max-width: 767px) {
    #footer .footer-coll-top .container-fluid > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

#footer,
#footer a,
#footer p,
#footer li {
    color: var(--artopia-muted) !important;
}

#footer .footer-title {
    margin: 0 0 16px !important;
    color: var(--artopia-text) !important;
    font-size: 22px !important;
}

#footer ul,
#footer .menu,
#footer .social-link {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Artopia currently publishes only Facebook and Instagram. */
#footer .social-link a[vd-name="twitter"],
#footer .social-link a[vd-name="youtube"] {
    display: none !important;
}

#footer .social-link li:has(a[vd-name="twitter"]),
#footer .social-link li:has(a[vd-name="youtube"]) {
    display: none !important;
}

#footer li,
#footer .menu-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

#footer li::marker,
#footer .menu-item::marker {
    content: "" !important;
    font-size: 0 !important;
}

#footer .menu li::before,
#footer .social-link li::before {
    display: none !important;
    content: none !important;
}

#footer .footer-coll .widget ul.menu {
    display: block !important;
    width: 100% !important;
}

#footer .footer-coll .widget ul.menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

#footer .footer-coll .widget ul.menu li a {
    display: block !important;
    width: 100% !important;
    padding: 5px 0 !important;
}

#footer .footer-coll .widget ul.menu li a::before {
    display: none !important;
    content: none !important;
}

#footer .widget p {
    visibility: visible !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

#footer .footer-coll-top .row > [class*="col-"]:nth-child(4) .widget > .row .col-sm-12 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

#footer .footer-coll-top .row > [class*="col-"]:nth-child(4) .widget p {
    display: block !important;
    margin: 0 !important;
    color: var(--artopia-muted) !important;
    font-size: 0 !important;
}

#footer .footer-coll-top .row > [class*="col-"]:nth-child(4) .widget p::after {
    content: "Coming soon";
    font-size: 16px !important;
}

#footer .social-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

#footer .social-link li {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#footer .social-link a {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

#footer .social-link a i,
#footer .social-link a i::before {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#footer vd-component-param[type="label27"],
#footer vd-component-param[type="label28"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
}

#footer .gen-playstore-logo,
#footer .gen-appstore-logo {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 133px !important;
    height: 40px !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: top !important;
}