@import 'variables.css';
@import 'fonts.css';

@media (min-width: 1001px) {
    .hamburger-menu {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    main .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 90;
    }

    main .overlay.active {
        opacity: 1;
        visibility: visible;
    }

    header .container .menu-wrapper {
        position: fixed;
        top: 85px;
        right: -100vw;
        width: 100%;
        height: calc(100vh - 77px);
        background-color: #fff;
        transition: right .3s ease;
        border-top: 1px solid #eee;
        z-index: 999;
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        margin: 0;
        list-style: none;
    }

    header .container .menu-wrapper.active {
        right: 0;
    }

    header .container .menu-wrapper li {
        width: 100%;
        margin-bottom: 10px;
    }

    header .container .menu-wrapper li a {
        display: block;
        padding: 0 !important;
        color: #333;
        font-weight: 500;
        text-decoration: none;
        transition: background .2s ease, color .2s ease;
    }
}

.hamburger-menu {
    display: block;
    border: 0;
    color: transparent;
    background: transparent url(../images/icons/hamburger-menu.svg) no-repeat center center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    cursor: pointer;
    background-size: 44px;
    padding: 0;
}

.hamburger-menu.active {
    background: transparent url(../images/icons/exit.svg) no-repeat center right;
    background-size: 35px;
}