/*==== hamgurger-btn ====*/

.css_prefix-hamgurger-btn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 20px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.css_prefix-hamgurger-btn .line{
    height: 2px;
    width: 100%;
    background-size: 100% 2px;
    background-image: linear-gradient( 293deg,var(--text-gradient-one) -15.38%,var(--text-gradient-two) 57.43%,var(--text-gradient-three) 94.88%);
}

.css_prefix-hamgurger-btn .line.line-2{
    width: 75%;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.css_prefix-hamgurger-btn .line.line-3{
    width: 50%;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.css_prefix-hamgurger-btn:hover .line.line-1{
    -webkit-animation: burger-hover 1s infinite ease-in-out alternate;
    animation: burger-hover 1s infinite ease-in-out alternate;
}

.css_prefix-hamgurger-btn:hover .line.line-2{
    -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
    animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}

.css_prefix-hamgurger-btn:hover .line.line-3{
    -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
    animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}

@keyframes burger-hover{
    0%{
        width: 100%  
    }

    50%{
        width: 50% 
    }

    100%{
        width: 100%;
    }
}

@-webkit-keyframes burger-hover{
    0%{
        width: 100%  
    }

    50%{
        width: 50% 
    }

    100%{
        width: 100%;
    }
}