#mynav{
height: 100%;
width: 45px;
position: fixed;
background-color: #25364a;
right:0; top: 0;
text-align: left;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
transition: width 0.5s;
overflow-x: hidden;
border-left: 1px solid #374659;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
z-index: 1000;
}
#mynav a{overflow-x: hidden; display: block; width: 150px; right: 0; color: #fff; padding: 10px 0; font-size: 12px; text-transform: uppercase; }
#mynav > #menu{
background-color: transparent;
border: none;
color: #fff;
padding: 10px 5px;
transform:			rotate(90deg);
-ms-transform: 		rotate(90deg); /* IE 9 */
-webkit-transform: 	rotate(90deg); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(90deg);
-o-transform:      	rotate(90deg);
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
transition: width 0.5s;
width: 30px;
margin-left: 5px;
}

#mynav.active > #menu{
transform:			rotate(0);
-ms-transform: 		rotate(0); /* IE 9 */
-webkit-transform: 	rotate(0); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(0);
-o-transform:      	rotate(0);
}

#mynav  i{font-size: 25px; margin-right: 15px;}

#mynav > a > i{color: #fe8e22; padding: 0 10px;}
#mynav > a:hover{background-color: #141e2a}

#mynav.active{
	width: 150px;

}