#ctrl_slide {
	    display:none;
	   }
	   
	   .btn_open {
		display:none;	
	   }

		.btn_open::after {
			content: url("../images/open.png");
			display: block;
			transform: scale(.5) translateY(-60%);
		}
	   
	   .btn_close , .btn_open
	   {
		 position:absolute;
		 right:0;
		 top:0;
		 z-index:1;
		 cursor: pointer; 
		 transform:translateY(-30%);
		 color:rgb(255,255,255,0);
	   }

		.btn_close:hover, .btn_open:hover {
			color: rgb(255,255,255,0);
		}
		/* slide-in */
		#leftmenu {
			position: relative;
			/*transform: translateX(-100%);*/
			animation: slide-in 0.5s forwards;
		}
	   
	  
	   .submenu {
			/*transform: translateX(-100%);*/
			animation: slide-in 1s forwards;
	   }	   
	   
		@keyframes slide-in {
			100% { transform: translateX(0%); }
		}		   
		
	   .btn_close::after {
           content: url("../images/close.png");
		   display: block;
		   transform: scale(.5);
		   color:rgb(255,255,255,0);
       }

		
	   /* slide-out */

	   #ctrl_slide:checked+label {
			animation: slide-out 1s forwards;
			transform: translateX(-100%);	
       }

		@keyframes slide-out {
		   0% { transform: translatex(0%); } 
		  100% { transform: translatex(-100%); width:0;} 
		}	 

		#ctrl_slide:checked+label> .submenu {
			animation: slide-out_1 0.3s forwards;
			transform: translateX(-100%);	 
			visibility:hidden;
        }
 

		@keyframes slide-out_1 {
			0% { transform: translateX(0%); } 
		   100% { transform: translateX(-100%);  } 
		}
		
		/* control button */
		
	   #ctrl_slide:checked+label> .btn_close {
              display:none;
       }
		
	   #ctrl_slide:checked+label> .btn_open {
           display:block;
			  
       }