
.menu-button label {
    cursor: pointer;
}

.show-menu {
    
    display: none;
    
    &:checked ~ {
        .nav {
            opacity: 1;
            -webkit-transition: -webkit-transform 0.3s ease, opacity 0s ease 0s;
            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
            transition: transform 0.3s ease, opacity 0s ease 0s;
            -webkit-transform: translate3D(0, 0, 0);
            -ms-transform: translate3D(0, 0, 0);
            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
            transform: translate3D(0, 0, 0);
        }
        .site-wrapper
        {
            overflow-x: hidden;
            -webkit-transform: translate3D(-240px, 0, 0);
            -ms-transform: translate3D(-240px, 0, 0);
            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
            transform: translate3D(-240px, 0, 0);
            -webkit-transition: -webkit-transform 0.3s ease;
            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
            transition: transform 0.3s ease;
        }
        .nav-cover {
            top: 0;
            left: 0;
            right: 240px;
            bottom: 0;
            z-index: 200;
        }
    }
}
