.opened .line {
    -webkit-transform: translateX(-30vw);
    -ms-transform: translateX(-30vw);
    transform: translateX(-30vw);
    opacity: 0;
}

.opened .navbar-toggler:before {
    top: 2px;
    width: 100%;
    -webkit-animation: transformFirstLine .5s ease-out forwards;
    animation: transformFirstLine .5s ease-out forwards;
}

.opened .navbar-toggler:after {
    top: -4px;
    width: 100%;
    -webkit-animation: transformLastLine .5s ease-out forwards;
    animation: transformLastLine .5s ease-out forwards;
}

@keyframes transformLastLine {
    0% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
    }

    40%, 60% {
        -webkit-transform: translateX(0px) translateY(-9px);
        transform: translateX(0px) translateY(-9px);
    }

    100% {
        -webkit-transform: rotate(45deg) translateX(-5px) translateY(-8px);
        transform: rotate(45deg) translateX(-5px) translateY(-8px);
    }
}

@keyframes transformFirstLine {
    0% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
    }

    40%, 60% {
        -webkit-transform: translateX(0px) translateY(9px);
        transform: translateX(0px) translateY(9px);
    }

    100% {
        -webkit-transform: rotate(-45deg) translateX(-5px) translateY(7px);
        transform: rotate(-45deg) translateX(-5px) translateY(7px);
    }
}