body { background-color: var(--sl-dark); color: var(--sl-light); }

.navbar .dropdown > .dropdown-menu { width: max-content; top: calc(100% + 10px); }
.navbar .dropdown .nav-title { text-transform: uppercase; font-size: .7rem; color: var(--sl-muted); padding: 0 .5rem; }

.nav-footer img { border-radius: 0 !important; }

header .navbar-nav .nav-item .nav-link.active, header .navbar-nav .nav-item .nav-link:hover { color: var(--sl-primary) !important; }
header .navbar-nav .dropdown-menu { background-color: var(--sl-dark); }


.sl-hr-title { height: .375rem; background-color: #e2c285; border: 0; width: 7rem; border-radius: 5rem; opacity: 1; margin: 3rem auto; }
.sl-hr-subtitle { height: .5rem; background-color: #e2c285; border: 0; width: .5rem; border-radius: 5rem; opacity: 1; margin: 2rem auto; position: relative; overflow: visible; }
.sl-hr-subtitle:before { content: ''; height: .5rem; background-color: #e2c285; width: .5rem; border-radius: 5rem; position: absolute; top: 0; left: -.75rem; }
.sl-hr-subtitle:after { content: ''; height: .5rem; background-color: #e2c285; width: .5rem; border-radius: 5rem; position: absolute; top: 0; right: -.75rem; }

/* RESPONSIVE */

@media (max-width: 1399px) {
    header .navbar-nav .nav-item { padding: 0 .5rem !important; }
}

@media (max-width: 991px) {
    header .navbar-container-logo img { height: 3rem !important; padding: 0 1rem; }
    header .navbar-container-menu::before { transform: none !important; }
    header .navbar-container-logo + div { position: absolute; top: 0; left: 0; width: 100%; }
    header .navbar { width: 100% !important; }
    header .navbar .navbar-toggler { margin-left: auto; z-index: 990; color: var(--sl-primary); border: 0; box-shadow: none; font-size: 2rem; padding: 0; }
    header .navbar-collapse { position: absolute; top: 0px; left: 0px; background-color: var(--sl-secondary); width: 100%; z-index: 900; border-radius: .5rem; }
    header .navbar-collapse .navbar-nav { padding-top: 6rem; }
}

header .navbar-container-socials { position: absolute; z-index: -10; top: 100%; right: 3rem; background: var(--sl-light); padding: .075rem 1rem; border-radius: 0 0 .5rem .5rem; font-size: 1.4rem; transition: transform 1s 1.5s ease; transform: translateY(-5rem); }
header .navbar-container-socials a { color: var(--sl-secondary); }
.sl-page-loaded header .navbar-container-socials { transform: translateY(0); }