/* Nav */
.header {
    background-color: var(--sos-blue);
    position: relative;
    width: 100%;
    height: 4rem;
    box-shadow: 1px 3px 5px 2px rgba(0,0,0,0.5);
    z-index: 99;
}
  
    .header ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: var(--sos-blue);
    }
  
    .header li a {
        display: block;
        color: var(--sos-blue);
        font-weight: 500;
        /* padding: 20px 20px 4px 20px; */
        text-decoration: none;
        padding: 0.5rem;
    }
    
    .header li a:hover,
    .header .menu-btn:hover {
        background-color: var(--sos-blue);
        color: var(--sos-yellow);
    }
    
    .header .brand {
        display: flex;
        float: left;
        text-align: center;
        padding: 1rem;
        color: var(--sos-gray-10);
        text-decoration: none;
        font-weight: 500;
        font-size: 2rem;
        align-content: center;
        align-items: center;
    }
    
    /* menu */
    
    .header .menu {
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;
        background-color: var(--sos-gray-30);
    }

    .header .menu.social-icons {
        display: flex;
    }
    
    /* menu icon */
    
    .header .menu-icon {
        cursor: pointer;
        float: right;
        padding-right: 0.5rem;
        top: 50%;
        transform: translate(-50%, -50%);
        position: relative;
        user-select: none;
    }
    
    .header .menu-icon .navicon {
        background: var(--sos-gray-10);
        display: block;
        height: 2px;
        position: relative;
        transition: background .2s ease-out;
        width: 1.25rem;
    }
    
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
        background: var(--sos-gray-10);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    
    .header .menu-icon .navicon:before {
        top: 0.5rem;
    }
    
    .header .menu-icon .navicon:after {
        top: -0.5rem;
    }
    
    /* menu btn */
    
    .header .menu-btn {
        display: none;
    }
    
    .header .menu-btn:checked ~ .menu {
        max-height: 240px;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
        top: 0;
    }

    /* - link under - */

    .link-arrow:after {
        content: '';
        background-size: 100% 100%;
        width: 16px;
        height: 12px;
        position: absolute;
        top: 5px;
        right: -28px;
        -webkit-transition: all .4s cubic-bezier(.35, 1, .33, 1);
        transition: all .4s cubic-bezier(.35, 1, .33, 1)
    }
    
    .link-arrow:hover:after {
        right: -35px
    }
    
    .link-arrow.link-arrow-white:after {
        background-size: 100% 100%
    }
    
    .link-arrow-hover:after {
        right: -35px
    }
    
    .link {
        display: inline-block;
        position: relative;
        border: none;
        padding-bottom: 4px;
        text-transform: uppercase;
        font-family: Montserrat, helvetica, arial, sans-serif;
        font-weight: 700
    }
    
    .link:active,
    .link:focus,
    .link:hover {
        outline: 0
    }
    
    .link:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #000;
        width: 0;
        height: 2px;
        -webkit-transition: all .4s cubic-bezier(.35, 1, .33, 1);
        transition: all .4s cubic-bezier(.35, 1, .33, 1)
    }
    
    .link:hover {
        color: #000
    }
    
    .link:hover:before {
        width: 100%
    }
    
    .link-theme:before {
        background: #ffd300
    }
  
    @media (min-width: 875px) {
        .header {
            display: flex;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }
        .header li {
            float: left;
        }
        .header li a {
            /* float: left; */
            text-align: center;
            padding: 1.5rem;
            background-color: var(--sos-blue);
            color: var(--sos-gray-10);
            text-decoration: none;
            font-weight: 500;
            height: 4rem;
        }
        .header .menu {
            clear: none;
            float: right;
            max-height: none;
        }
        .header .menu-icon {
            display: none;
        }
    }

    @media screen and (max-width: 500px) {
        .header .brand {
            font-weight: 500;
            font-size: 1rem;
        }
    }