		$header-bg: #040430;

#home-header{
//	margin-top: ms(1);
		background: $header-bg;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 3;
		transition: opacity 0.5s;
		
	img{
		width: ms(3);
		padding: ms(1);
		padding-right: 0;
		//display:none;
	}
	#site-title{
		font-size: ms(1);
		padding: ms(2) ms(4) ms(2) ms(1);
		max-width: 65%;
		//text-transform: uppercase;
		//letter-spacing: ms(1);
		@media screen and (min-width: 600px){
			text-transform: uppercase;
			letter-spacing: ms(1);
		}
		color: white;
		font-family: 'Open Sans', sans-serif;

		font-weight: 300;
		margin-right: 110px;
		//radial-gradient(farthest-corner at bottom right,rgba(217,217,217,0),rgba(217,217,217,.15)),linear-gradient(175deg,#040430,#020218)
		&.active{
		}
	}
	#page-menu-button{
		position: absolute;
		right: 0;
		top: 50%;
		font-family: 'Open Sans', sans-serif;

		font-size: 1rem;
		transform: translateY(-50%);
		background-color: rgba(0,0,0,0);
		border: 1px solid white;
		color: white;
		text-transform: uppercase;
		letter-spacing: ms(1)/5;
		text-align: center;
		margin-right: ms(1);
		padding: ms(1);
		padding-left: ms(1) + ms(1)/5;
		transition: color 0.5s, background-color 0.5s;
		
		@media screen and (min-width: 600px){
			display: none;
		}
		
		&:hover{
			cursor: hand;
			color: #040430;
			background-color: white;
		}
		&.active{
			color: #040430;
			background-color: white;
		}

	}

	.menu-container {
		padding: 0;
		top: 75px;
		left: 0;
		right: 0;
		float: left;
		display: block;
		position: absolute;
		background: #4E5052;
    	overflow: hidden;
    	transform: scaleY(0);
    	transform-origin: top;
		
		@media screen and (min-width: 600px){
			display: inline-block;
			position: relative;
			background: none;
			top: initial;
			left: initial;
			bottom: 0;
			transform: scaleY(1) !important;
			opacity: 1 !important;
	    	overflow: initial;
		}
		
		ul.menu {
			li {
				position: relative;
				float: none;
				margin: 0;
				cursor: pointer;
				overflow: hidden;
				border-bottom: 1px solid #3D3F41;
				border-top: 1px solid #5E5F61;
				margin: 0 auto;
				max-width: 380px;
				
				@media screen and (min-width: 600px){
					float: left;
					overflow: initial;
					border: none;
					margin: 0;
					max-width: initial;
				}
				
				a {
					font-size: 16px;
					font-weight: 400;
					color: #CCCCCC;
					padding: 10px 5px;
					display: block;
					text-transform: none;
					
					@media screen and (min-width: 600px){
						float: left;
						padding: 0 18px 0;
						line-height: 100px;
						color: #FFFFFF;
					}
				}
				&:hover{
					a {
						color:#bbbbbb;
					}
					ul.sub-menu {
						top: 96px;
						border-top: 4px solid #dc4637;
						-moz-background-clip: padding-box;
						-webkit-background-clip: padding-box;
						background-clip: padding-box;
					}
				}
			}
			li:first-child {
				border-top: none;
			}	
		}
	}
}

nav{
	width: ms(6);
	max-width: 100%;
	position: absolute;
	right: 0;
	background-color: lighten($header-bg, 5%);
	background-color: $header-bg;
	transform: translateY(-100%);
	z-index: 2;
	transition: transform 0.5s;
	.page-item{
		color: white;
    	 font-family: 'Open Sans', sans-serif;

		//text-align: center;
		font-size: ms(1)/1.5;
		padding: ms(1);
		background-color: rgba(white, 0.1);

		transition: background-color 0.5s;
		//color: white;
		display: block;
		//border-radius: 5px;
		border-bottom: 1px solid white;
		text-transform: uppercase;

		&:first-of-type{
			border-bottom: none;
			border-top: 5px solid transparent;
			padding-top: ms(1)*.85;
			//border: 10px solid transparent;
			//border-image: linear-gradient(rgba($header-bg, 0.50), rgba($header-bg, 1));
			border-image: linear-gradient(rgba(black, 0.25), rgba(black, 0) 10%);
			border-image-slice: 8;
					
		}

		&:last-of-type{
			border: none;
		}
		&:nth-of-type(2){
			border-top: 1px solid white;
		}
		
		&:hover{
			background-color: rgba(white, 0.25);
		}
		
	}
	&.active{
			transform: translateY(0);
		}
}