#checkmenu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#icon-menu {
    cursor: pointer;
    margin-top: 15px;
    float: left;
}

#Rectangle-4,
#Rectangle-4-Copy,
#Rectangle-4-Copy-2 {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-origin: left;
    -moz-transform-origin: left;
    -webkit-transform-origin: left;
}

#checkmenu:checked ~ #icon-menu #Rectangle-4 {
    transform: rotate(-40deg) translate(-6.5px, 6.5px);
    -webkit-transform: rotate(-40deg) translate(6.5px, 11.5px);
    -moz-transform: rotate(-40deg) translate(7.5px, 11.5px);
    width: 15px;
    float: left;
}

#checkmenu:checked ~ #icon-menu #Rectangle-4-Copy {
    width: 25.6px;
}

#checkmenu:checked ~ #icon-menu #Rectangle-4-Copy-2 {
    width: 15px;
    transform: rotate(40deg) translate(-6.5px, -6.5px);
    -webkit-transform: rotate(40deg) translate(-6.5px, -6.5px);
    -moz-transform: rotate(40deg) translate(-6.5px, -6.5px);
}

.hbar {
    position: absolute;
    width: 0%;
    height: 8px;
    background: #ff3b1b;
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.vbar {
    position: absolute;
    width: 8px;
    height: 0;
    background: #ff3b1b;
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.hbar.delay-1,
.vbar.delay-1 {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
}

.hbar.delay-2,
.vbar.delay-2 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
}

.hbar.delay-3,
.vbar.delay-3 {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.top {
    top: 0;
    left: 0;
}

.right {
    top: 0;
    right: 0;
}

.bottom {
    bottom: 0;
    right: 0;
}

.left {
    bottom: 0;
    left: 0;
}

@-webkit-keyframes h-move {
    0% {
        //left: -5px;
        width: 0;
    }
    100% {
        //left: 200px;
        width: 100%;
    }
}

@keyframes h-move {
    0% {
        //left: -5px;
        width: 0;
    }
    100% {
        //left: 200px;
        width: 100%;
    }
}

.top,
.bottom {
    -webkit-animation-name: h-move;
    animation-name: h-move;
}

@-webkit-keyframes v-move {
    0% {
        //top: -5px;
        height: 0;
    }
    100% {
        //top:228px;
        height: 100%;
    }
}

@keyframes v-move {
    0% {
        //top: -5px;
        height: 0;
    }
    100% {
        //top:228px;
        height: 100%;
    }
}

.right,
.left {
    -webkit-animation-name: v-move;
    animation-name: v-move;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}