#container3 {
   display: flex;
   min-height: 100%;
}
input[type=checkbox] {
   position: absolute;
   opacity: 0;
}
label#l1 {
   position: absolute;
   top: 10px;
   left: 40px;
   z-index: 1;
   display: block;
   font-size:3em;
   color: #fff;
   cursor: pointer;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
input[type=checkbox]:checked ~ label#l1 {
   transform: translate3d(180px, 0, 0) rotate(90deg);
}
.content {
   /*background-image:url(images/z06.png);*/
   width:100%;
   padding: 40px;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
input[type=checkbox]:checked ~ .content {
   transform: translate3d(180px, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu {
   transform: translate3d(0, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu .menu li {
   width: 100%;
}
.slide-menu {
   transform: translate3d(-180px, 0, 0);
   position: absolute;
   width: 180px;
   /*background: url(images/ap_bg.gif);*/
   color: #ddd;
   left: 0;
   height: 100%;
   transition: all .4s;
}
.slide-menu h1 {
   color: #fff;
   margin: 10px;
   text-shadow: 1px 1px 1px #000;
}
.menu {
   list-style: none;
   padding: 0;
   margin: 0;
}
.menu a {
   display: block;
   text-decoration: none;
   color: black;
   font-size: 1.1em;
   padding: 15px;
   background: url(images/d_blue.gif);
   border-bottom: 1px solid #1e222b;
   box-shadow: inset 0px 1px 1px #8b9db3;
}
.menu a:hover {
   background: url(images/d_blue_hv.gif);
   box-shadow: inset 0px 1px 1px #475059;
}