@media (max-width:767px) {
    #leftpanel {
        position: absolute;
        left: -59%;
    }
    #allcontents {
        -webkit-transition: 300ms ease;
        transition: 300ms ease;
    }
    .allcontentsslider {
        -webkit-transform: translateX(59%);
        -ms-transform: translateX(59%);
        transform: translateX(59%);
    }
}
@media (min-width:768px) {
    #allcontents {
        position: relative;
    }
    #allcontents.overflowhidden {   /* overflow-y makes the scrolling slower */
        position: relative;
        overflow: hidden;
    }
    #leftpanel {
        position: relative;
        visibility: visible;
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transition: 300ms ease;
        transition: 300ms ease;
    }
    #leftpanel.hide {
        position: absolute;
        visibility: hidden; /* not clickable */
        /*display: none;    // if uncommented, comment all other properties*/
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}