@import "bourbon";

header{
	width: 100%;
	background: rgba(255,255,255,0.9);
	position: static;
	height: 60px;
	z-index: 1000;
	max-width: 1200px;
	margin: 0 auto;
	&.home{
		width: 100%; max-width: 100%;
		.subnav_btn{ display: none;}
	}
	.logo{
		width: 109px;
		height: 37px;
		margin: 0 auto;
		padding-top: 10px;
		a{
			width: 128px;
			height: 40px;
			display: block;
			background: transparent asset_url("lucas_logo_mobile.png") top left no-repeat;
			text-indent: -9999px;
			@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
				background: transparent asset_url("lucas_logo_mobile@2x.png") top left no-repeat;
			  -webkit-background-size: 128px 40px;
			          background-size: 128px 40px;

			}
		}
	}
	#desktop{ display: none; }
	.inner{
		position: relative;
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
		   -moz-backface-visibility: hidden;
		    -ms-backface-visibility: hidden;
		-webkit-transition: -webkit-transform 200ms ease;
		   -moz-transition:    -moz-transform 200ms ease;
		    -ms-transition:     -ms-transform 200ms ease;
		     -o-transition:      -o-transform 200ms ease;
		        transition:         transform 200ms ease;
	}
}

.nav_btn{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	background: transparent asset_url("mobile_nav_btn.png") center center no-repeat;
	border-right: 1px solid #ccc;
	&:hover{
		cursor: pointer;
	}
	@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
		background: transparent asset_url("mobile_nav_btn@2x.png") center center no-repeat;
		-webkit-background-size: 22px 20px;
			      background-size: 22px 20px;
	}
}

.subnav_btn{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	background: transparent asset_url("more_icon.png") center center no-repeat;
	border-left: 1px solid #ccc;
	&:hover{
		cursor: pointer;
	}
	@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
		background: transparent asset_url("more_icon@2x.png") center center no-repeat;
		-webkit-background-size: 60px 60px;
			      background-size: 60px 60px;
	}
}

.nav{
	background-color: #2c2c2c;
	position: fixed;
	width: 240px;
	top: 0;
	height: 100%;
	left: -240px;
	z-index: 8;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 200ms ease;
	   -moz-transition:    -moz-transform 200ms ease;
	    -ms-transition:     -ms-transform 200ms ease;
	     -o-transition:      -o-transform 200ms ease;
	        transition:         transform 200ms ease;
	ul{
		li{
			a{
				color: #fff;
				font-size: 1.125em;
				text-transform: uppercase;
				display: block;
				padding: 20px 12px;
				border-bottom: 1px solid #444;
				background: transparent asset_url("mobile_nav_arrow.png") 216px center no-repeat;
				-webkit-box-sizing: border-box;
			     -moz-box-sizing: border-box;
			          box-sizing: border-box;
			  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
					background: transparent asset_url("mobile_nav_arrow@2x.png") 216px center no-repeat;
					-webkit-background-size: 12px 8px;
			    				background-size: 12px 8px;
				}
				&.active{ color: #3798c0; }
			}
		}
	}
}

#subnav.menu{
	background-color: #2c2c2c;
	position: fixed;
	width: 240px;
	top: 0;
	bottom: 0;
	z-index: 8;
	right: -240px;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 200ms ease;
	   -moz-transition:    -moz-transform 200ms ease;
	    -ms-transition:     -ms-transform 200ms ease;
	     -o-transition:      -o-transform 200ms ease;
	        transition:         transform 200ms ease;
	a{
		display: inline-block;
		text-align: center;
		width: 50%;
		color: #fff;
		-webkit-box-shadow: inset -1px 0px 0px 0px #444;
    box-shadow: inset -1px 0px 0px 0px #444;
    border-bottom: 1px solid #444;
    padding: 28px 0;
		-webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	  img{ width: 76%; }
		&:nth-child(even){
			-webkit-box-shadow: none;
      box-shadow: none;
		}
		&:first-child{ margin-left: 0; }
		&:last-child{ border: none; }
		span{ display: none; }
		&.wide{
			width: 100%;
			color: #fff;
			font-size: 1.5em;
			text-transform: uppercase;
			box-shadow: none;
		}
	}
	&.list a{
		width: 100%;
		font-size: 1.125em;
		padding: 16px 12px;
		text-transform: uppercase;
		display: block;
		-webkit-box-shadow: none;
    box-shadow: none;
    &:last-child{
    	border-bottom: none;
    }
    &.active{
			color: #3798c0;
		}
	}
}

@media screen and (max-width: 899px){
	.nav, #subnav{
		overflow-y: auto;
	}
	.open-right{
		.subnav_btn{
			background: #505050 asset_url("mobile_close_btn.png") center center no-repeat;
			@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
				background: #505050 asset_url("mobile_close_btn@2x.png") center center no-repeat;
				-webkit-background-size: 22px 20px;
				    	  background-size: 22px 20px;
			}
		}
		.menu{
			@include transform(translate(-240px,0));
		}
		.page, header .inner{
			position: fixed;
			overflow: hidden;
			width: 100%;
			top: 0;
			bottom: 0;
			@include transform(translate(-240px,0));
		}
		.page{ top: 60px; }
	}
	.open-left{
		.nav_btn{
			background: #505050 asset_url("mobile_close_btn.png") center center no-repeat;
			@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
				background: #505050 asset_url("mobile_close_btn@2x.png") center center no-repeat;
				-webkit-background-size: 22px 20px;
				    	  background-size: 22px 20px;
			}
		}
		.nav{
			@include transform(translate(240px,0));
		}
		.page, header .inner{
			position: fixed;
			overflow: hidden;
			width: 100%;
			top: 0;
			bottom: 0;
			@include transform(translate(240px,0));
		}
		.page{ top: 60px; }
	}
}

@media screen and (min-width: 900px) {

	header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 84px;
	}
	header .logo{
		width: 138px;
		height: 46px;
		padding: 14px 0 0 0;
		margin: 0;
	}
	header .logo a{
		width: 160px;
		height: 54px;
		display: block;
		background: transparent asset_url("lucas_logo.png") top left no-repeat;
		text-indent: -9999px;
		@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
			background: transparent asset_url("lucas_logo@2x.png") top left no-repeat;
		  -webkit-background-size: 160px 54px;
		          background-size: 160px 54px;

		}
	}
	header .inner{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
		padding: 0 32px;
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	}
	.nav a, #subnav.menu a {
		-webkit-transition: color 0.15s ease;
		-moz-transition: color 0.15s ease;
		transition: color 0.15s ease;
		position: relative;
		letter-spacing: 2px;
	}

	.nav a::after {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #3798c0;
		content: '';
		opacity: 0;
		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
		-moz-transition: opacity 0.3s, -moz-transform 0.3s;
		transition: opacity 0.3s, transform 0.3s;
		@include transform(translateY(-10px));
	}

	.nav a::after{
		bottom: 0;
		@include transform(translateY(12px));
	}

	.nav a:hover,
	.nav .active a,
	#subnav.menu a:hover,
	#subnav.menu.list a:hover {
		color: #3798c0;
	}

	.nav a:hover::after,
	.nav .active a::after {
		opacity: 1;
		@include transform(translateY(0px));
	}

	.nav a:hover::focus,
	.nav .active a::focus{
		opacity: 0;
		@include transform(translateY(-10px));
	}

	.subnav_btn, .nav_btn{ display: none; }
	.nav{
		display: block;
		width: 100%;
		max-width: 1200px;
		margin: -64px auto 0;
		height: auto;
		position: static;
		left: auto;
		background: transparent;
		ul{
			position: absolute;
			right: 32px;
			top: 28px;
			li{
				display: inline-block;
				text-align: right;
				margin-left: 20px;
				font-size: 1.4em;
				padding-bottom: 4px;
				text-transform: uppercase;
				-webkit-box-sizing: border-box;
			     -moz-box-sizing: border-box;
			          box-sizing: border-box;
			  a{
					color: #000;
					border: none;
					padding: 6px 0;
				}
			}
		}
	}

	#subnav.menu{
		position: fixed;
		top: 84px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		height: 40px;
		z-index: 10;
		background-color: rgba(0,0,0,0.8);
		text-align: right;
		padding: 12px 32px 0;
		-webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	  a, &.list a{
			display: inline-block;
			margin-left: 18px;
			font-size: 0.9em;
			color: #fff;
			width: auto;
			padding: 0;
			border: none;
			letter-spacing: 1px;
			text-transform: uppercase;
			-webkit-box-shadow: none;
	     				box-shadow: none;
	    &.wide{
	    	font-size: 0.9em;
	    	display: inline-block;
	    	width: auto;
	    }
			&.active{
				color: #3798c0;
			}
			span{ display: block; }
			img{ display: none; }
		}
	}
}

@media screen and (min-width: 1024px) {
	.nav ul li{ margin-left: 32px; }
	#subnav.menu{
	  a, &.list a{
			margin-left: 22px;
			font-size: 1em;
	    &.wide{
	    	font-size: 1em;
	    }
		}
	}
}