/*==== hamgurger-btn ====*/
.kidsjoy_style-button-hamgurger{
    display: inline-block;
}

.kidsjoy_style-button-hamgurger:hover .circle-1{
    margin: 0;
}

.kidsjoy_style-hamgurger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.3125em;
    height: 1em;
    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;
    align-items: flex-end;
    align-content: center;
}

.kidsjoy_style-hamgurger-btn .line {
    height: 2px;
    width: 100%;
}
.kidsjoy_style-hamgurger-btn .line.line-1 {
    background: var(--global-font-color);
} 
.kidsjoy_style-hamgurger-btn .line.line-2 {
    width: 75%;
    background: var(--color-theme-primary);
    -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;
}

.kidsjoy_style-hamgurger-btn .line.line-3 {
    width: 50%;
    background: var(--global-font-color);
    -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;
}

.kidsjoy_style-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;
}

.kidsjoy_style-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;
}

.kidsjoy_style-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;
}

.kidsjoy_style-button-hamgurger .circle-animated {
    width: 3.125em;
    height: 3.125em;
}

@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%;
    }
}

@media (max-width: 1199px){
    .kidsjoy_style-button-hamgurger .circle-animated{
        height: 2.8125em;
        width: 2.8125em;
    }
}