#moblie_nav {
	position: relative;
}

.burger {
	position: absolute;
	float: left;
	padding: 10px;
    top: 27px;
    left: 200px;
    opacity: 1;
	border-radius: 50%;
}
.burger li {
	width: 30px;
	height: 4px;
	background-color: #ccc;
	margin: 5px 0;
	list-style: none;
	opacity: 0;
}
.burger.open {
	opacity: 0.1;
	left: 5px!important;
}

.burger.open li {
	background-color: #d9dde1;
}
.burger img{
	transition: .3s ease-in-out;
	opacity: 1;
}
.burger.close img{
	transition: .5s ease-in-out;
	opacity: 1;
}
.burger.open img{
	opacity: 0;
}




/*  Removable CSS  */

.header-section,
.body-section,
.footer-section 
{padding: 20px;}

.header-section {background-color: #ffffff;}
.body-section {background-color: #f4f5f6;}
.footer-section {background-color: #dadee1;}
.placefiller {
	text-align: center;
	font-size: 20px;
	border: 1px dashed rgba(190, 196, 202, 0.5);
}
.header-section .placefiller {line-height: 300px;}
.body-section .placefiller {line-height: 900px;}
.footer-section .placefiller {
	line-height: 200px;
	border: 1px dashed rgba(190, 196, 202, 0.9);
}


@media only screen and (min-width: 1024px) {
	nav.slide{
		display: none;
	}
}


@media only screen and (max-width: 1024px) {
	nav li{
		width: 250px;
	}
	nav li a {
		padding: 20px 25px!important;
	}
}

@media only screen and (max-width: 1024px) {


	.navToggle{position: absolute;left: 228px;top: 0;width: 60px;height: 60px;z-index: 99999;background-image: url(../images/menu-open.svg);}


	#moblie_nav {
		height: 60px;
		z-index: 9999;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	/*  Nav Drawer Layout  */
	nav {
		position: relative;
	}

	nav ul {
		height: 100%;
		color: #9aa6af;
		/*background-image: url(../images/homepage/menu-bg.svg);*/
		background-color: #FAFAFA;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top right;
	}
	nav li {
		display: block;
		float: none;
		width: 250px;
		background: #FAFAFA;
	}
	nav li a {
		padding: 16px 25px;
		font-size: 14px;
		display: block;
		color: #000;
		transition: .5s ease-in-out;
		border-bottom:1px solid #eee;
	}
	nav li a.logo {
		display: none;
	}
	nav li a.active {
		color: #9aa6af;
		background-color: #FAFAFA;
	}
	nav li a:hover {
		color: #9aa6af;
		background-color: #FAFAFA;
	}

	.header-section {margin-top: 60px;}

	/* NAVIGATION ANNIMATION */
	nav {
		width: 250px;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		z-index: 999;
		/* starting point */
		opacity: 0;
		-webkit-transform: translate3d(-240px,0,0);
		-moz-transform: translate3d(-240px,0,0);
		transform: translate3d(-240px,0,0);
		transition: .5s ease-in-out;
		display: none !important;
		font-family: 'Noto Sans TC'
	}

	/*Nav Expanding Open Effect*/
	nav.open {
		opacity: 1;
		display: block !important;

		-webkit-transform: translate3d(0,0,0);
		
		-moz-transform: translate3d(0,0,0);
		
		transform: translate3d(0,0,0);
	}
	@-webkit-keyframes slideIn {
		0%       {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
	}
	@-moz-keyframes slideIn {
		0%      {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
	}
	@keyframes slideIn {
		0%      {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
	}

	/*Nav Shrinking Closed Effect*/
	nav.close {
		opacity: 0;
		
		-webkit-transform: translate3d(-300px,0,0);
		-moz-transform: translate3d(-300px,0,0);
		transform: translate3d(-300px,0,0);
	}
	/* CONTENT ANNIMATION */
	.content {
		/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		transition: .5s ease-in-out;
		z-index: 1;
	}

	/*Content Sliding Open Effect*/
	#moblie_nav.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.open 
	{   
		-webkit-transform: translate3d(245px,0,0);		
		-moz-transform: translate3d(245px,0,0);		
		transform: translate3d(245px,0,0);
	}
	@-webkit-keyframes open {
		0%      {-webkit-transform: translate3d(0,0,0);}
		100%  {-webkit-transform: translate3d(240px,0,0);}
	}
	@-moz-keyframes open {
		0%      {-moz-transform: translate3d(0,0,0);}
		100%  {-moz-transform: translate3d(240px,0,0);}
	}
	@keyframes open {
		0%      {transform: translate3d(0,0,0);}
		100%  {transform: translate3d(240px,0,0);}
	}

	/*Content Sliding Closed Effect*/
	#moblie_nav.close,
	.content.close 
	{
		-webkit-transform: translate3d(0,0,0);
		
		-moz-transform: translate3d(0,0,0);
		
		transform: translate3d(0,0,0);
	}
}