.burger {
	position: absolute;
	float: left;
	padding: 10px;
	top: 4px;
	left: 10px;
	display: none; margin-top:120px;
}
.burger li {
	width: 30px; list-style-type:none;
	height: 4px;
	background-color: #fff;
	border-radius: 3px;
	margin: 5px 0;
}
.burger.open li {background-color: #d9dde1;}

@media only screen and (max-width: 600px) {
#side_menu{position:relative;}

.burger {display:block;}	
#side_menu .nav-list li {display: block; float: none;}
#content{}


.nav-pro {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	/*top: 0;*/
	margin: 0;
	background-color: #1d2d35;

	/* starting point */
	opacity: 0;
	-webkit-transform: translate3d(5%,0,0)scale(.97);
	-moz-transform: translate3d(5%,0,0)scale(.97);
	transform: translate3d(5%,0,0)scale(.97);
}


.open {
	opacity: 1;

	-webkit-transform: translate3d(0,0,0)scale(1);
	-webkit-animation: slideIn .35s ease-in-out;
	
	-moz-transform: translate3d(0,0,0)scale(1);
	-moz-animation: slideIn .35s ease-in-out;
	
	transform: translate3d(0,0,0)scale(1);
	animation: slideIn .35s ease-in-out;
}


/*Nav Expanding Open Effect*/
.open {
	opacity: 1;

	-webkit-transform: translate3d(0,0,0)scale(1);
	-webkit-animation: slideIn .35s ease-in-out;
	
	-moz-transform: translate3d(0,0,0)scale(1);
	-moz-animation: slideIn .35s ease-in-out;
	
	transform: translate3d(0,0,0)scale(1);
	animation: slideIn .35s ease-in-out;
}
@-webkit-keyframes slideIn {
	0%       {opacity: 0;
				-webkit-transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				-webkit-transform: translate3d(0,0,0)scale(1);}
}
@-moz-keyframes slideIn {
	0%      {opacity: 0;
				-moz-transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				-moz-transform: translate3d(0,0,0)scale(1);}
}
@keyframes slideIn {
	0%      {opacity: 0;
				transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				transform: translate3d(0,0,0)scale(1);}
}

/*Nav Shrinking Closed Effect*/
.closet {
	opacity: 0;
	
	-webkit-transform: translate3d(5%,0,0)scale(.97);
	-webkit-animation: slideOut .3s ease-in-out;
	
	-moz-transform: translate3d(5%,0,0)scale(.97);
	-moz-animation: slideOut .3s ease-in-out;
	
	transform: translate3d(5%,0,0)scale(.97);
	animation: slideOut .3s ease-in-out;
}
@-webkit-keyframes slideOut {
	0%      {opacity: 1;
				-webkit-transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: 0;
				-webkit-transform: translate3d(5%,0,0)scale(.97);}
}
@-moz-keyframes slideOut {
	0%      {opacity: 1;
				-moz-transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: 0;
				-moz-transform: translate3d(5%,0,0)scale(.97);}
}
@keyframes slideOut {
	0%      {opacity: 1;
				transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: 0;
				transform: translate3d(5%,0,0)scale(.97);}
}


.burger{opacity: 1;}
.content-pro {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	z-index: 1;
	opacity: 1;
}
.content-pro.open 
{   
	-webkit-transform: translate3d(240px,0,0);
	-webkit-animation: open .5s ease-in-out;
	
	-moz-transform: translate3d(240px,0,0);
	-moz-animation: open .5s ease-in-out;
	
	transform: translate3d(240px,0,0);
	animation: open .5s ease-in-out;
}
/*Content Sliding Closed Effect*/
.content-pro.closet
{
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: close .3s ease-in-out;
	
	-moz-transform: translate3d(0,0,0);
	-moz-animation: close .3s ease-in-out;
	
	transform: translate3d(0,0,0);
	animation: close .3s ease-in-out;
}

}