.menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background-color: rgba(#03090F, .6);
    opacity: 0;
    visibility: hidden;
    transition: .4s;

    &.active {
        opacity: 1;
        visibility: visible;

        .menu__wrap {
            transform: translate(0);

        }
    }

    &__wrap {
        position: relative;
        max-width: 280px;
        width: 100%;
        padding: 111px 0 0 0px;
        background-color: #4B4E53;
        transform: translate(100%);
        transition: .4s;

        @media (min-width: 1200px) {
            max-width: 530px;
            padding: 126px 0 0 60px;
        }
    }

    &__close {
        position: absolute;
        top: 44px;
        right: 20px;
        padding: 0 32px 0 0;
        color: $white;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        fill: $white;
        transition: .3s;

        @media (min-width: 1200px) {
            left: 100px;
            right: auto;
            padding: 0 0 0 32px;
        }

        svg {
            position: absolute;
            top: 1px;
            right: 0;
            transition: .3s;

            @media (min-width: 1200px) {
                left: 0;
                right: auto;
            }
        }

        &:hover {
            @media (min-width: 1200px) {
                color: $blue;
            }

            svg {
                @media (min-width: 1200px) {
                    fill: $blue;
                }
            }
        }
    }

    &__inner {
        overflow-y: auto;
        height: 100%;
        padding-bottom: 20px;
    }

    &__nav {
        margin-bottom: 80px;
    }

    &__list {
        padding-left: 40px;

        @media (min-width: 1200px) {
            padding-left: 0;
        }
    }

    &__item {
        padding: 20px 20px 20px 40px;
        border-bottom: 1px solid #A0A2A4;
    }

    &__link {
        color: $white;
        font-size: 24px;
        line-height: 33px;
        font-weight: 600;
        transition: .3s;

        &:hover {
            @media (min-width: 1200px) {
                color: $blue;
            }
        }
    }

    &__link-favorites {
        position: relative;

        span {
            position: absolute;
            top: 50%;
            left: -80px;
            transform: translateY(-50%);
            min-width: 30px;
            height: 40px;
            padding: 9px 5px;
            border-radius: 0px 10px 10px 0px;
            font-size: 16px;
            line-height: 22px;
            font-weight: 600;
            text-align: center;
            color: $white;
            background-color: $blue;
            background-color: $blue;

            @media (min-width: 1200px) {
                display: none;
            }
        }
    }

    &__contacts {
        margin-bottom: 40px;
        padding-left: 40px;

        @media (min-width: 1200px) {
            padding-left: 0;
        }
    }

    &__contact {
        display: block;
        width: fit-content;
        color: $white;
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;

        &:not(:last-child) {
            margin-bottom: 20px;
        }

        span {
            display: block;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            transition: .3s;
        }

        &:hover {
            span {
                @media (min-width: 1200px) {
                    color: $blue;
                }
            }
        }
    }

    &__social {
        padding-left: 40px;

        @media (min-width: 1200px) {
            padding-left: 0;
        }
    }
}