/* Layout */
.s-layout {
   /* display: flex; */
   width: 100%;
   min-height: 100vh;
   position: relative;
}

.s-layout__content {
  padding:5px;
}

/* Sidebar */
.s-sidebar__trigger {
   z-index: 2;
   position: absolute;
   margin-top: 30px;
   left: 0;
   width: 100%;
   height: 4em;
}

.s-sidebar__trigger > i {
   display: inline-block;
   margin: 1.5em 0 0 1.5em;
   color: #fff;
}

.s-sidebar__nav {
   position: absolute;
   left: -21em;
   transition: all .3s ease-in;
   width: 21em;
   min-height: 100%;
   background: #000407;
   background-image:url(../img/sidemenu/ms_bg.png);
 	 background-repeat:repeat-y;
   color: #fff;
   z-index:99999;
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
   left: 0;
}

/* Mobile First */
@media(min-width:1em){
  .s-sidebar__trigger {
     width: 4em;
     background-color:#000;
  }
}
@media (min-width: 42em) {
  .s-layout__content {
     margin-left: 0em;
  }

   .s-sidebar__nav:hover,
   .s-sidebar__nav:focus,
   .s-sidebar__trigger:hover + .s-sidebar__nav,
   .s-sidebar__trigger:focus + .s-sidebar__nav {
      width: 21em;
   }
}

@media (min-width: 68em) {
   .s-layout__content {
      margin-left: 21em;
   }

   /* Sidebar */
   .s-sidebar__trigger {
      display: none
   }

   .s-sidebar__nav {
      left:0;
   }

   .s-sidebar__nav ul {
      top: 3em;
   }
}

@media screen and (max-width: 479px) {
	.menu_side{
		padding-top:60px;
	}
}