.icon-menu-efeitos {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    float: right;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 200px;
    border: 2px solid #ffcc00;
}

.stick {
    width: 30px;
    height: 2px;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-top: 2px;
    background-color: #ffcc00;
    display: inline-block;
}

.stick:last-child {
    margin-bottom: 0px;
}

.stick-1.open {
    -webkit-animation: stick-1-open .6s ease-out forwards;
    animation: stick-1-open .6s ease-out forwards;
}

.stick-2.open {
    -webkit-animation: stick-2-open .6s linear forwards;
    animation: stick-2-open .6s linear forwards;
}

.stick-3.open {
    -webkit-animation: stick-3-open .6s linear forwards;
    animation: stick-3-open .6s linear forwards;
}

@-webkit-keyframes stick-1-open {
    0% {
        width: 40px;
    }
    40% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(40px, 0px);
        transform: translate(40px, 0px);
    }
    75%, 80% {
        width: 8px;
        -webkit-transform: translate(40px, -50px);
        transform: translate(40px, -50px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    100% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(35px, 46px);
        transform: translate(35px, 46px);
    }
}

@keyframes stick-1-open {
    0% {
        width: 40px;
    }
    40% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(40px, 0px);
        transform: translate(24px, 0px);
    }
    75%, 80% {
        width: 8px;
        -webkit-transform: translate(40px, -50px);
        transform: translate(40px, -50px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    100% {
        background-color: #ffcc00;
        width: 0px;
        -webkit-transform: translate(35px, 46px);
        transform: translate(25px, 28px);
    }
}

@-webkit-keyframes stick-2-open {
    80% {
        background-color: #ffcc00;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        background-color: #ffcc00;
        -webkit-transform: translate(8px, 0px) rotate(40deg);
        transform: translate(8px, 0px) rotate(40deg);
    }
}

@keyframes stick-2-open {
    80% {
        background-color: #ffcc00;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        background-color: #ffcc00;
        -webkit-transform: translate(8px, 0px) rotate(40deg);
        transform: translate(0px, 0px) rotate(40deg);
    }
}

@-webkit-keyframes stick-3-open {
    80% {
        background-color: #ffcc00;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        background-color: #ffcc00;
        -webkit-transform: translate(8px, -23px) rotate(-40deg);
        transform: translate(8px, -23px) rotate(-40deg);
    }
}

@keyframes stick-3-open {
    80% {
        background-color: #ffcc00;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        background-color: #ffcc00;
        -webkit-transform: translate(8px, -23px) rotate(-40deg);
        transform: translate(0px, -9px) rotate(-40deg);
    }
}

.stick-1.closs {
    width: 8px;
    -webkit-transform: translate(27px, 26px);
    transform: translate(27px, 26px);
    -webkit-animation: stick-1-closs .6s ease-out forwards;
    animation: stick-1-closs .6s ease-out forwards;
}

.stick-2.closs {
    -webkit-transform: translate(0px, 0px) rotate(40deg);
    transform: translate(0px, 0px) rotate(40deg);
    -webkit-animation: stick-2-closs .6s ease-out forwards;
    animation: stick-2-closs .6s ease-out forwards;
}

.stick-3.closs {
    -webkit-transform: translate(0px, -23px) rotate(-40deg);
    transform: translate(0px, -23px) rotate(-40deg);
    -webkit-animation: stick-3-closs .6s ease-out forwards;
    animation: stick-3-closs .6s ease-out forwards;
}

@-webkit-keyframes stick-1-closs {
    0%, 70% {
        width: 0px;
    }
    100% {
        width: 40px;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes stick-1-closs {
    0%, 70% {
        width: 0px;
    }
    100% {
        width: 25px;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes stick-2-closs {
    0% {
        background-color: #ffcc00;
        width: 40px;
    }
    20% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(0, 0px) rotate(40deg);
        transform: translate(0, 0px) rotate(40deg);
    }
    40% {
        background-color: #ffcc00;
        width: 0px;
    }
    65% {
        -webkit-transform: translate(0, -70px);
        transform: translate(0, -70px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    80% {
        width: 0px;
    }
    100% {
        width: 40px;
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
}

@keyframes stick-2-closs {
    0% {
        background-color: #ffcc00;
        width: 40px;
    }
    20% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(0, 0px) rotate(40deg);
        transform: translate(0, 0px) rotate(40deg);
    }
    40% {
        background-color: #ffcc00;
        width: 0px;
    }
    65% {
        -webkit-transform: translate(0, -70px);
        transform: translate(0, -70px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    80% {
        width: 0px;
    }
    100% {
        width: 25px;
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
}

@-webkit-keyframes stick-3-closs {
    0% {
        background-color: #ffcc00;
        width: 40px;
    }
    20% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(0, -23px) rotate(-40deg);
        transform: translate(0, -23px) rotate(-40deg);
    }
    40% {
        background-color: #ffcc00;
    }
    65% {
        -webkit-transform: translate(0, -93px);
        transform: translate(0, -93px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    90% {
        width: 8px;
    }
    100% {
        width: 40px;
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
}

@keyframes stick-3-closs {
    0% {
        background-color: #ffcc00;
        width: 40px;
    }
    20% {
        background-color: #ffcc00;
        width: 8px;
        -webkit-transform: translate(0, -23px) rotate(-40deg);
        transform: translate(0, -23px) rotate(-40deg);
    }
    40% {
        background-color: #ffcc00;
    }
    65% {
        -webkit-transform: translate(0, -93px);
        transform: translate(0, -93px);
        -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
        animation-timing-function: cubic-bezier(0, 1, 1, 1);
    }
    90% {
        width: 8px;
    }
    100% {
        width: 25px;
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
}