/*** HEADER BUTTON ***/
header .menu-mobile {
    display: none;
    width: 50px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid var(--color-4);
    background-color: transparent;
    box-sizing: content-box;
    cursor: pointer;
    transition: border-color 125ms linear;
}

header .menu-mobile.clicked {
    animation: menu-mobile-clicked-border 250ms linear;
}

header .menu-mobile.clicked .line {
    animation: menu-mobile-clicked-line-bk 250ms linear;
}

@keyframes menu-mobile-clicked-border {
    0% {
        border-color: var(--color-4);
    } 50% {
        border-color: var(--color-2);
    } 100% {
        border-color: var(--color-4);
    }
}

@keyframes menu-mobile-clicked-line-bk {
    0% {
        background-color: var(--color-4);
    } 50% {
        background-color: var(--color-2);
    } 100% {
        background-color: var(--color-4);
    }
}

header .menu-mobile > div {
    width: 100%;
    height: 100%;
    position: relative;
}

header .line {
    width: 75%;
    height: 2px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    background-color: var(--color-4);
    transition: width 200ms linear, top 200ms linear, transform 200ms linear, background-color 125ms linear;
}

header .line-1 {
    top: 20%;
}

header .line-2 {
    top: 50%;
}

header .line-3 {
    top: 80%;
}

/*** CLOSE ***/
header .line-1.close {
    top: 20%;
    transform: translate(-50%, -50%);
}

header .line-2.close {
    width: 75%;
}

header .line-3.close {
    top: 80%;
    transform: translate(-50%, -50%);
}


/*** OPEN ***/
header .line-1.open {
    height: 3px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

header .line-2.open {
    width: 0;
}

header .line-3.open {
    height: 3px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*** MEDIA 800px ***/
@media screen and (max-width: 800px) {
    header .menu-mobile {
        display: block;
    }
    header nav {
        display: none;
    }
}