.wrapperMenu {
    cursor: pointer;
    min-height: 40px;
}

.row2Header,
.rowXHeader {
    width: 32px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    transition: all 0.4s ease;
}

.row2Header,
.rowXOne,
.rowXTwo {
    background: white;
    animation-delay: 3s;
}

.rowXOne,
.rowXTwo {
    height: 2px;
    width: 100%;
    position: absolute;
}

.rowXOne {
    transform-origin: 100% 0%;
}

.rowXTwo {
    transform-origin: 0% 100%;
}


.wrapperMenu.open .row2Header,
.wrapperMenu.open .rowXHeader {
    width: 40px;
}

.wrapperMenu.open .row2Header {
    animation: 0.4s ease 0.25s forwards second-row-logo-open;
}

.wrapperMenu.open .rowXHeader {
    animation: 0.4s ease 0.25s forwards thrid-row-logo-open;
}

.wrapperMenu.open .rowXHeader .rowXOne {
    animation: 0.4s ease 0.25s forwards row-x-one-open;
}

.wrapperMenu.open .rowXHeader .rowXTwo {
    animation: 0.4s ease 0.25s forwards row-x-two-open;
}

/* closing */

@media (max-width: 768px) {
    .wrapperMenu {
        top: 1.5em;
        right: 1.5em;
    }

}

@keyframes first-row-logo-open {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: translate(0, 10px);
        opacity: 0;
    }
}

@keyframes second-row-logo-open {
    0% {
        transform: rotate(0deg), translate(0, 0);
        height: 2px;
        clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
    }

    100% {
        transform: rotate(-45deg) translate(-5px, 5px);
        height: 3px;
        clip-path: polygon(0 0%, 91% 0, 100% 100%, 9% 100%);
    }
}

@keyframes thrid-row-logo-open {
    0% {
        transform: rotate(0deg);
        height: 2px;
    }

    100% {
        transform: rotate(45deg);
        height: 3px;
    }
}

@keyframes row-x-one-open {
    0% {
        transform: scale(1);
        height: 2px;
        clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
    }

    100% {
        transform: scaleX(0.5);
        height: 3px;
        clip-path: polygon(0 0%, 100% 0, 80% 100%, 0 100%);
    }
}

@keyframes row-x-two-open {
    0% {
        transform: scale(1);
        height: 2px;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    }

    100% {
        transform: scaleX(0.32);
        height: 3px;
        clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0 100%);
    }
}

/* closes */
@keyframes first-row-logo-close {
    0% {

        transform: translate(0, 10px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes second-row-logo-close {
    0% {
        transform: rotate(-45deg) translate(-5px, 5px);
        height: 3px;
        clip-path: polygon(0 0%, 91% 0, 100% 100%, 9% 100%);
    }

    100% {
        transform: rotate(0deg), translate(0, 0);
        height: 2px;
        clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes thrid-row-logo-close {
    0% {
        transform: rotate(45deg);
        height: 3px;
    }

    100% {
        transform: rotate(0deg);
        height: 2px;
    }
}

@keyframes row-x-one-close {
    0% {

        transform: scaleX(0.5);
        height: 3px;
        clip-path: polygon(0 0%, 100% 0, 80% 100%, 0 100%);
    }

    100% {
        transform: scale(1);
        height: 2px;
        clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes row-x-two-close {
    0% {

        transform: scaleX(0.32);
        height: 3px;
        clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0 100%);
    }

    100% {
        transform: scale(1);
        height: 2px;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    }
}

.wrapperMenu.close .row2Header {
    animation: 0.4s ease 0.1s forwards second-row-logo-close;
}

.wrapperMenu.close .rowXHeader {
    animation: 0.4s ease 0.1s forwards thrid-row-logo-close;
}

.wrapperMenu.close .rowXHeader .rowXOne {
    animation: 0.4s ease 0.1s forwards row-x-one-close;
}

.wrapperMenu.close .rowXHeader .rowXTwo {
    animation: 0.4s ease 0.1s forwards row-x-two-close;
}