/* ------------- Menu Mobile sin JS ---------------- */
/* input hidden */

#navbar-toggle-cbox {
    display: none;
}

.nav__toggle {
    position: absolute;
    cursor: pointer;
    margin: 0 1rem;
    right: 0;
}

.nav__toggle svg {
    width: 1rem;
    fill: white;
}

.nav__toggle .close {
    display: none;
}

.nav__toggle .close,
.nav__toggle .menu {
    margin: 1rem auto;
}

label[for=navbar-toggle-cbox] {
    cursor: pointer;
}

#navbar-toggle-cbox:checked ~ .navbar-menu {
    display: block;
}

#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.close {
    display: block;
}

#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.menu {
    display: none;
}

/*- ----------- End Menu Mobile sin JS ------------- */
/* navigation */

.navbar {
    background-color: $footerheader;
    a {
        color: whitesmoke;
    }
    &.is-social-center {
        align-items: stretch;
        background-color: transparent;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        -webkit-box-align: stretch;
        -webkit-box-pack: center;
        -webkit-box-flex: 0;
        -ms-flex-pack: center;
        -ms-flex-align: stretch;
        -ms-flex-negative: 0;
        -ms-flex-positive: 0;
        > a.navbar-item {
            color: #4a4a4a;
            background-color: transparent;
            &:hover {
                color: $slinks;
            }
        }
    }
}

/* main-header */

.main-header {
    .title {
        color: whitesmoke;
    }
    .subtitle {
        color: $subtitle;
    }
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
    .hero {
        background-color: $card;
    }
}