﻿.overflow-hidden {
    overflow: hidden;
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.4rem;
    z-index: 3;
    transition: all .5s ease-out;
    background-color: #fff;
}

.header + .header--spacer {
    padding-top: 80px;
}

.logo {
    position: relative;
    max-width: 200px;
    cursor: pointer;
    z-index: 2;
}


@media only screen and (min-width: 992px) {
    .logo {
        max-width: 145px;
    }
}

@media only screen and (min-width: 1192px) {
    .logo {
        max-width: 200px;
    }
}
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 0;
        padding: 0 3.2rem;
        margin: 0;
        background-color: #273f83;
        
    }

        .navbar.navbar_is-open {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            overflow: auto;
        }

            .navbar.navbar_is-open .navbar__nav {
                max-height: 50vh;
                overflow: auto;
                margin: 6rem 2.4rem 1.5rem
            }

    .navbar__nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 6rem 2.4rem 0;
    }

    .navbar__actions {
        display: flex;
        flex-direction: column;
        padding: 0 2.4rem;
    }

    /*** HAMBURGER SECTION ***/
    .hamburger {
        position: relative;
        max-width: 50px;
        padding: 20px;
        border: none;
        cursor: pointer;
        z-index: 2;
    }

    .hamburger__icon {
        position: relative;
        width: 10px;
        height: 4px;
        background: #fff;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
    }

        .hamburger__icon::before,
        .hamburger__icon::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 4px;
            background: #fff;
            border-radius: 5px;
        }

        .hamburger__icon::before {
            transform: translateY(-10px);
        }

        .hamburger__icon::after {
            transform: translateY(10px);
        }

    .hamburger__open .hamburger__icon {
        background: transparent;
        box-shadow: none;
    }

    .header-sticky {
        background: #273f83;
    }

    @media only screen and (min-width: 62.0625em) {
        .navbar__nav {
            flex-direction: row;
            flex-grow: 1;
            margin: 0 auto;
            gap: 0;
        }

        .navbar__item .action-btn {
            margin: 0 .8rem
        }

        .navbar__actions .action-btn {
            padding: .6rem 3rem;
        }

        .navbar li.navbar__item {
            line-height: 2;
        }
        
    }

    @media only screen and (min-width: 68.0625em) {
        .navbar__nav {
            gap: 2.5rem;
        }

        .navbar__item .action-btn {
            margin: 0 .5rem;
        }

        .navbar__actions .action-btn {
            padding: .75rem 3.8rem;
        }
    }

    @media only screen and (min-width: 62.0625em) {
        .header {
            padding: 2rem 6.4rem;
        }

        .navbar {
            position: unset;
            display: flex;
            height: auto;
            padding: 0;
            background: transparent;
        }

        .navbar__actions {
            flex-direction: row;
            flex-grow: 1;
            max-width: 55rem;
            padding: 0;
        }

        .hamburger {
            display: none;
        }
    }

    @media only screen and (max-width: 82em) {
        .header {
            padding: 2rem 3.2rem;
        }
    }