@media screen and (max-width: 640px) {

    .closeBtn {
        display: none;
    }

    .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }

    .menu-trigger {
        position: relative;
        width: 35px;
        height: 28px;
    }

    header.is-fixed .menu-trigger {
        position: relative;
        width: 30px;
        height: 25px;
    }

    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
        border-radius: 4px;
    }

    header.is-fixed #header .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
        border-radius: 4px;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 12px;
    }

    header.is-fixed .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }

    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(12px) rotate(-45deg);
        transform: translateY(12px) rotate(-45deg);
        background-color: #fff;
    }

    header.is-fixed .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(11px) rotate(-45deg);
        transform: translateY(11px) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-12px) rotate(45deg);
        transform: translateY(-12px) rotate(45deg);
        background-color: #fff;
    }

    header.is-fixed .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-10px) rotate(45deg);
        transform: translateY(-10px) rotate(45deg);
    }


    .st-content {
        overflow-y: scroll;
        background: #f3efe0;
    }

    .st-content,
    .st-content-inner {
        position: relative;
    }

    .st-container {
        position: relative;
        overflow: auto;
        display: block;

    }

    .st-pusher {
        position: relative;
        left: 0;
        z-index: 99;
        height: 0;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .st-pusher::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        background: rgba(0, 0, 0, 0.2);
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
        transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

    .st-menu-open .st-pusher::after {
        width: 100%;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;

    }

    .st-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9997;
        visibility: hidden;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        padding: 10px;
        box-sizing: border-box;
    }

    .st-menu::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        content: '';
        opacity: 1;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }

    .st-menu-open .st-menu::after {
        width: 0;
        height: 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
        transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

    /* Effect 1: Slide in on top */
    .st-effect-1.st-menu {
        visibility: visible;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .st-effect-1.st-menu-open .st-effect-1.st-menu {
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .st-effect-1.st-menu::after {
        display: none;
    }

    /* Effect 2: Reveal */
    .st-effect-2.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-2.st-menu {
        z-index: 1;
    }

    .st-effect-2.st-menu-open .st-effect-2.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .st-effect-2.st-menu::after {
        display: none;
    }

    /* Effect 3: Push*/
    .st-effect-3.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-3.st-menu {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .st-effect-3.st-menu-open .st-effect-3.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .st-effect-3.st-menu::after {
        display: none;
    }

    /* Effect 4: Slide along */
    .st-effect-4.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-4.st-menu {
        z-index: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    .st-effect-4.st-menu-open .st-effect-4.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .st-effect-4.st-menu::after {
        display: none;
    }

    /* Effect 5: Reverse slide out */
    .st-effect-5.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-5.st-menu {
        z-index: 1;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    .st-effect-5.st-menu-open .st-effect-5.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* Effect 6: Rotate pusher */

    .st-effect-6.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
    }

    .st-effect-6 .st-pusher {
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-6.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0) rotateY(-15deg);
        transform: translate3d(300px, 0, 0) rotateY(-15deg);
    }

    .st-effect-6.st-menu {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-6.st-menu-open .st-effect-6.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(15deg);
        transform: translate3d(-100%, 0, 0) rotateY(15deg);
    }

    .st-effect-6.st-menu::after {
        display: none;
    }

    /* Effect 7: 3D rotate in */

    .st-effect-7.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
        -webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
    }

    .st-effect-7 .st-pusher {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-7.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-7.st-menu {
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
        transform: translate3d(-100%, 0, 0) rotateY(-90deg);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-7.st-menu-open .st-effect-7.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
        transform: translate3d(-100%, 0, 0) rotateY(0deg);
    }

    /* Effect 8: 3D rotate out */

    .st-effect-8.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
        -webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
    }

    .st-effect-8 .st-pusher {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-8.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-8.st-menu {
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
        transform: translate3d(-100%, 0, 0) rotateY(90deg);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-8.st-menu-open .st-effect-8.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
        transform: translate3d(-100%, 0, 0) rotateY(0deg);
    }

    .st-effect-8.st-menu::after {
        display: none;
    }

    /* Effect 9: Scale down pusher */

    .st-effect-9.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
    }

    .st-effect-9 .st-pusher {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-9.st-menu-open .st-pusher {
        -webkit-transform: translate3d(0, 0, -300px);
        transform: translate3d(0, 0, -300px);
    }

    .st-effect-9.st-menu {
        opacity: 1;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .st-effect-9.st-menu-open .st-effect-9.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .st-effect-9.st-menu::after {
        display: none;
    }

    /* Effect 10: Scale up */

    .st-effect-10.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
        -webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
    }

    .st-effect-10.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-10.st-menu {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translate3d(0, 0, -300px);
        transform: translate3d(0, 0, -300px);
    }

    .st-effect-10.st-menu-open .st-effect-10.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* Effect 11: Scale and rotate pusher */

    .st-effect-11.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
    }

    .st-effect-11 .st-pusher {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-11.st-menu-open .st-pusher {
        -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
        transform: translate3d(100px, 0, -600px) rotateY(-20deg);
    }

    .st-effect-11.st-menu {
        opacity: 1;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .st-effect-11.st-menu-open .st-effect-11.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .st-effect-11.st-menu::after {
        display: none;
    }

    /* Effect 12: Open door */

    .st-effect-12.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
    }

    .st-effect-12 .st-pusher {
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-12.st-menu-open .st-pusher {
        -webkit-transform: rotateY(-10deg);
        transform: rotateY(-10deg);
    }

    .st-effect-12.st-menu {
        opacity: 1;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .st-effect-12.st-menu-open .st-effect-12.st-menu {
        visibility: visible;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .st-effect-12.st-menu::after {
        display: none;
    }

    /* Effect 13: Fall down */

    .st-effect-13.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
        -webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
    }

    .st-effect-13.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-13.st-menu {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    .st-effect-13.st-menu-open .st-effect-13.st-menu {
        visibility: visible;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-speed: 0.2s;
        transition-speed: 0.2s;
    }

    /* Effect 14: Delayed 3D rotate */

    .st-effect-14.st-container {
        -webkit-perspective: 1500px;
        perspective: 1500px;
        -webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
    }

    .st-effect-14 .st-pusher {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-14.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .st-effect-14.st-menu {
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
        transform: translate3d(-100%, 0, 0) rotateY(90deg);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .st-effect-14.st-menu-open .st-effect-14.st-menu {
        visibility: visible;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
        -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
        transform: translate3d(-100%, 0, 0) rotateY(0deg);
    }

    /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
    .no-csstransforms3d .st-pusher,
    .no-js .st-pusher {
        padding-left: 300px;
    }

    #st-trigger-effects {
        position: absolute;
        top: 12px;
        left: 20px;
        z-index: 99999;
        /* border:1px solid #000 */
        ;
    }


}