@media screen and (min-width : 40em) and (max-width:62em)
{
    .slide-header
    {
        /*min-height: 12em;
        height: 12em; */
        /*for menu slide from top: make this equal to .slide-lbody translateY*/
    }
    /*padding-bottom:9em; this equal the height of .slide-header */
    .slide-body
    {
        padding-bottom: 0em; /*equals 30+height of .slide-header, 
        to allow for increase Height command to be shown*/
    }

    .slide-checkbox:checked ~ .slide-body
    {
        /*for top menu: make this equal to the height of top menu
        -webkit-transform: translateY(12em) scale(1); 
        -moz-transform: translateY(12em) scale(1);
        -ms-transform: translateY(12em) scale(1);
        -o-transform: translateY(12em) scale(1);
        transform: translateY(12em) scale(1);
        */
    }

	.lslide-checkbox:checked ~ .slide-lbody{
        max-width:calc(100% - 11.01em) !important;
        left:11.01em;
	}
    .slide-left{
        	/* Keeps the menu hidden off-canvas to the left */
		width: 11em;
        left:-11em; 
    }

}

@media screen and (max-width:39.99em)
{ 
    .slide-header
    {
        /*for menu slide from top: make this equal to .slide-lbody translateY
        min-height: 15em;
        height: 15em; */
        /*font-size:0.8em;        */
        /*
        height: 6em!important;
        max-height: 6em!important;
        top:-6em!important;
            */
    }
        .tslide-checkbox:checked ~ .slide-lbody {
       /* top: 6em;*/
        
    }
     

	.lslide-checkbox:checked ~ .slide-lbody{
        width:calc(100% - 10em) !important;
        left:10em;
        /*
		-webkit-transform: translateX(5em) scale(1);
		-moz-transform: translateX(5em) scale(1);
		-ms-transform: translateX(5em) scale(1);
		-o-transform: translateX(5em) scale(1);
		transform: translateX(15em) scale(1);
        */
	}
    .slide-header ul.menu li{
        height:2em;
        font-size:0.8em;
        color:red;
    }
    .slide-header ul.menu li a{
        text-align:left;
    }

    .slide-.slide-body
    {
        padding-bottom: 0em; /*equals 30+height of .slide-header, 
        to allow for increase Height command to be shown*/
    }

    .slide-checkbox:checked ~ .slide-body
    {
        /*for top menu: make this equal to the height of top menu
        -webkit-transform: translateY(15em) scale(1); 
        -moz-transform: translateY(15em) scale(1);
        -ms-transform: translateY(15em) scale(1);
        -o-transform: translateY(15em) scale(1);
        transform: translateY(15em) scale(1);
            */
    }
    
	.lslide-checkbox:checked ~ .slide-lbody{
        width:calc(100% - 10em) !important;
        left:10em;
        /*
		-webkit-transform: translateX(5em) scale(1);
		-moz-transform: translateX(5em) scale(1);
		-ms-transform: translateX(5em) scale(1);
		-o-transform: translateX(5em) scale(1);
		transform: translateX(15em) scale(1);
        */
	}
        .slide-left{
        	/* Keeps the menu hidden off-canvas to the left */
            width: 10em;
        left:-10em;
		
        /*
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
          */      
        max-height:calc(100vh - 1em);
        overflow:auto;
        font-size:1em;
    }
}