body {
	background-color: #000;
	background-image: url("../images/content/bg.jpg");
	background-repeat: repeat;
	text-rendering: optimizelegibility;
}


.container {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.burger {
	position: absolute;
	float: left;
	padding: 0px;
	top: 15%;
	left: 1%;
	display: none;
}
.burger li {
	width: 30px;
	height: 4px;
	background-color: #7aa114;
	margin: 5px 0;
}
.burger.open li {
	background-color: #7aa114;
}
nav {
	position: relative;
	top: 0;
}
nav li {
	float: left;
	display: inline-block;
}
nav li a {
	padding: 24px 15px;
	display: block;
}

@media only screen and (max-width: 767px) {
		header {
			background: #4c4c4c; /* Old browsers */
			background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 4%, #666666 16%, #474747 32%, #2c2c2c 44%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 4%,#666666 16%,#474747 32%,#2c2c2c 44%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 4%,#666666 16%,#474747 32%,#2c2c2c 44%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
			border-top: 1px solid #5f5f5f;
			border-bottom: 5px solid #7aa114;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 10;
		}

		.burger {
			display: block;
		}
        header{
            border-top: none;
            border-bottom: 3px solid #7aa114;
        }

		nav ul {
			height: 100%;
			overflow-y: auto;
		}
		nav li {
			display: block;
			float: none;
		}
		nav li a {
			padding: 22px 25px;
			letter-spacing: 3px;
			font-size: 14px;
		}
		/* NAVIGATION ANNIMATION */
		nav {
			width: 50%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			margin: 0;
			background-color: #1f1f1f;
			z-index: 9;
			/* starting point */
			opacity: 0;
			-webkit-transform: translate3d(5%,0,0)scale(.100);
			-moz-transform: translate3d(5%,0,0)scale(.100);
			transform: translate3d(5%,0,0)scale(.100);
		}

		/*Nav Expanding Open Effect*/
		nav.open {
			opacity: 1;
			width: 240px;
			-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: .3;
						-webkit-transform: translate3d(-50%,0,0)scale(.97);}
			100%  {opacity: 1;
						-webkit-transform: translate3d(0,0,0)scale(1);}
		}
		@-moz-keyframes slideIn {
			0%      {opacity: .3;
						-moz-transform: translate3d(-50%,0,0)scale(.97);}
			100%  {opacity: 1;
						-moz-transform: translate3d(0,0,0)scale(1);}
		}
		@keyframes slideIn {
			0%      {opacity: .3;
						transform: translate3d(-50%,0,0)scale(.97);}
			100%  {opacity: 1;
						transform: translate3d(0,0,0)scale(1);}
		}

		/*Nav Shrinking Closed Effect*/
		nav.close {
			opacity: 0;
			width: 240px;
			-webkit-transform: translate3d(-100%,0,0)scale(.97);
			-webkit-animation: slideOut .3s ease-in-out;

			-moz-transform: translate3d(-100%,0,0)scale(.97);
			-moz-animation: slideOut .3s ease-in-out;

			transform: translate3d(-100%,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: .3;
						-webkit-transform: translate3d(-100%,0,0)scale(.97);}
		}
		@-moz-keyframes slideOut {
			0%      {opacity: 1;
						-moz-transform: translate3d(0,0,0)scale(1);}
			100%  {opacity: .3;
						-moz-transform: translate3d(-100%,0,0)scale(.97);}
		}
		@keyframes slideOut {
			0%      {opacity: 1;
						transform: translate3d(0,0,0)scale(1);}
			100%  {opacity: .3;
						transform: translate3d(-100%,0,0)scale(.97);}
		}



		/* CONTENT ANNIMATION */
		.content {
			/* starting point */
			-webkit-transform: translate3d(0,0,0);
			-moz-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

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

		/*Content Sliding Closed Effect*/
		header.close,
		.content.close 
		{
			-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;
		}
		@-webkit-keyframes close {
			0%      {-webkit-transform: translate3d(240px,0,0);}
			100%  {-webkit-transform: translate3d(0,0,0);}
		}
		@-moz-keyframes close {
			0%       {-moz-transform: translate3d(240px,0,0);}
			100%  {-moz-transform: translate3d(0,0,0);}
		}
		@keyframes close {
			0%       {transform: translate3d(240px,0,0);}
			100%  {transform: translate3d(0,0,0);}
		}

}