/* Header */

header {
	z-index: 10000;
	position: fixed;
	width: 100%;	
	border-bottom: solid 1px;
	color: #eaeaea;
	-webkit-box-shadow: 0px 3px 4px -2px rgba(0,0,0,0.03);
	-moz-box-shadow: 0px 3px 4px -2px rgba(0,0,0,0.03);
	box-shadow: 0px 3px 4px -2px rgba(0,0,0,0.03);

	nav {
		background-color: #fff;	/*#454545*/

		#nav-container {
			max-width: @max-width;
			margin: 0 auto;	

			ul li {
				display: inline-block;
				padding-top: 15px;
				padding-bottom: 15px;
				border-right: solid 1px;
				color: #eaeaea; /*#EDEDED*/
				padding-right: 2.5%;
				padding-left: 2.5%;

				&#first-nav-item {
					border-left: solid 1px;
				}

				a {
					text-decoration: none;	
					border-bottom: none;
					color: #999;
					font-family: @body-font;
					font-size: 9pt;
					font-weight: 300;
					letter-spacing: 1.5px;

					&:hover {
						color: #000000;
					}

					&.on {
						color: #000;
						font-weight: 700;
					}
				}
			}

			#hamburger {
				display: none;

				#menu-icon {
					display: inline-block;
					border-right: 1px solid #ccc;
					height: 100%;
					width: 35px;
					padding: 11.5px 3.5%;
					cursor: pointer;
					overflow: hidden;

					div {
						background-color: #ccc;
					    height: 5px;
					    width: 35px;
						transition-property: opacity;
						transition-duration: .2s;
					}
				}

				#mobile_title {
					vertical-align: top;
					color: #999;
					font-family: @body-font;
					font-size: 9pt;
					font-weight: 300;
					letter-spacing: 1.5px;
					padding-top: 17px;
					padding-left: 3.5%;
					display: inline-block;
				}
			}
		}
	}

	.dec {
		background-color: @accent-color; /*#FF0066*/
		width: 100%;
		height: 6px;
		display: block;
	}
}

#mobile_nav {
	left: -290px;
	top: 0px;
    position: fixed;
    width: 290px;
    height: 100%;
    background-color: #2B2B2B;

    #icon-close {
		cursor: pointer;
		color: #eaeaea;
		font-family: @body-font;
		font-weight: 700;
		font-size: 16pt;	
		padding-left: 30px;
		padding-bottom: 20px;
		padding-top: 20px;
		transition-property: opacity;
		transition-duration: .2s;

		&:hover {
			opacity: .7;
		}
	}

	.m-nav-item {
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 30px;
		border-top: solid 1px;
		border-top-color: #000;

		.m-nav-link {
			text-decoration: none;
			border-bottom: none;
			color: #eaeaea;
			font-family: @body-font;
			font-weight: 300;
			font-size: 16pt;
			letter-spacing: 2px;
			transition-property: opacity;
			transition-duration: .2s;

			&:hover {
				opacity: .7;
			}
		}

		#m-nav-item-last {
			border-bottom: solid 1px;
			border-bottom-color: #000;	
		}
	}
}

#middle {
	margin-top: 4px;
	margin-bottom: 4px;	
}

#on-mobile {
	color: #EE6363;
}



/* Footer */

footer {
	display: block;
	width: 100%;
	margin-top: 200px;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #fff;
	border-top: solid 1px;
	color: #eaeaea;

	#footer-container {
		max-width: @max-width;
		margin: 0 auto;	
	}

	p {
		text-align: center;
		color: #999;
		font-family: @body-font;
		font-size: 9pt;	
		letter-spacing: 1px;
	}

	a {
		color: #666;
		text-decoration: none;
		border-bottom: dotted 1px;

		&:hover {
			color: @accent-color;				
		}	
	}
}


/* Responsive */

@media screen and (max-width: 868px) {
	#main_nav {
		display: none;	
	}
	
	header nav #nav-container #hamburger {
		display: block;	
	}
	
}