@import url(/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Cabin:400,600italic);


html { overflow-y: scroll; }
img { vertical-align: middle; max-width: 100%; }

body, html {
	background: #ffffff;
	
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
	letter-spacing: .01rem;
	font-weight: 300;
	font-style: normal;
	font-size: 100%;
	line-height: 1.5;

	color: #555;
	text-rendering: optimizelegibility; 
	word-wrap: break-word;

	margin: 0;
	padding: 0;
}
input, textarea { font-family: 'Droid Sans', Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Cabin', Tahoma, Helvetica, Arial, sans-serif;
	color: #555;
}

#content p,
#footer p { font-size: 1em; }

.wrapper {
	position: relative;
	width: 1020px;
	margin: 0 auto;
}

#content a,
#footer a { color: #777; -webkit-transition: color .5s; -moz-transition: color .5s; -o-transition: color .5s; transition: color .5s; }
#content a:hover,
#footer a:hover { color: #333; }

/**
 * HEADER
 */
#header {  
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	padding: 30px 0;
	text-align: center;
	background: #fff;
}

#logo { display: inline-block; margin: 0; }
#logo h1 { font-size: 2em; margin: 0; padding: 0; }
#logo h2 { font-size: 1.1em; margin: 0; padding: 0; color: #666; }


#nav-toggle { 
	position: absolute;
	right: 0;
	top: 50%;
	display: none;
	vertical-align: middle;
 	font-size: 30px;
 	line-height: 30px;
 	margin: -15px 0 0 0;
 	padding: 0;
 	text-align: right;
 	color: #555;
 	text-decoration: none;
 	-webkit-transition: color .5s;
 	   -moz-transition: color .5s;
 	     -o-transition: color .5s;
 	        transition: color .5s;
}
#nav-toggle:hover { color: #333; }

/**
 * NAVIGATION
 */
#navigation { 
	position: relative;
	display: block;
	font-family: 'Cabin', Tahoma, Helvetica, Arial, sans-serif;
	width: 100%;
	height: auto;
	background: transparent;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	z-index: 100;
	-webkit-transition: background 1s;
	   -moz-transition: background 1s;
	     -o-transition: background 1s;
	        transition: background 1s;
}
.nav-beyond-banner #navigation { background: rgba(50,50,50,1); }  

#navigation #menu {
	display: block;
	text-align: center;
	font-size: 0; /* To avoid unwanted margins */
}
#navigation #menu > ul { 
	display: inline-block; 
	list-style: none inside;
	padding: 0;
	margin: 0;
}
#navigation #menu > ul > li { 
	position: relative;
	display: inline-block; 
	height: auto;
	padding: 0;
	margin: 0;
	font-size: 16px; /* Re-Set */
}
#navigation #menu > ul > li > a { 
	position: relative;
	display: block;
	width: auto;
	height: auto;
	line-height: 65px;
	padding: 0 20px;
	margin: 0;
	color: #ddd;
	font-size: .95em;
	text-transform: uppercase;
	font-weight: normal;
	text-decoration: none;
	-webkit-transition: background .5s;
	   -moz-transition: background .5s;
	     -o-transition: background .5s;
	        transition: background .5s;
}
#navigation #menu > ul > li.active > a,
#navigation #menu > ul > li:hover > a { 
	color: #fff;
	background: rgba(0,0,0,.2);
}
.nav-beyond-banner #navigation #menu > ul > li.active > a,
.nav-beyond-banner #navigation #menu > ul > li:hover > a { background: transparent; }




/* Sub */

#navigation #menu > ul div.sub { 
	position: absolute;
	display: none;
	min-width: 100%;
	background: rgba(0,0,0,.2);
	opacity: 0;
	/*z-index: -1;*/
	-webkit-animation: hideSubnavigation .2s; 
	   -moz-animation: hideSubnavigation .2s; 
	     -o-animation: hideSubnavigation .2s; 
	        animation: hideSubnavigation .2s; 	
	-webkit-transition: background 1s; 	
	   -moz-transition: background 1s; 	
	     -o-transition: background 1s; 	
	        transition: background 1s;
}

.nav-beyond-banner #navigation #menu > ul div.sub { background: rgba(50,50,50,1); }  


#navigation #menu > ul > li div.sub:hover,
#navigation #menu > ul > li:hover div.sub { 
	display: block; 
	opacity: 1; 
	z-index: 150;
	-webkit-animation: showSubnavigation .5s; 
	   -moz-animation: showSubnavigation .5s; 
	     -o-animation: showSubnavigation .5s; 
	        animation: showSubnavigation .5s; 
}

/* Show Subnav */ 
@-webkit-keyframes showSubnavigation {
	from { opacity: 0; z-index: 150; }
    to { opacity: 1; }
} 
@-moz-keyframes showSubnavigation {
	from { opacity: 0; z-index: 150; }
    to { opacity: 1; }
} 
@-o-keyframes showSubnavigation {
	from { opacity: 0; z-index: 150; }
    to { opacity: 1; }
} 
@keyframes showSubnavigation {
	from { opacity: 0; z-index: 150; }
    to { opacity: 1; }
}

/* Hide Subnav */ 
@-webkit-keyframes hideSubnavigation {
	from { opacity: 1; z-index: 150; }
    to { opacity: 0; z-index: -1; }
} 
@-moz-keyframes hideSubnavigation {
	from { opacity: 1; z-index: 150; }
    to { opacity: 0; z-index: -1; }
} 
@-o-keyframes hideSubnavigation {
	from { opacity: 1; z-index: 150; }
    to { opacity: 0; z-index: -1; }
} 
@keyframes hideSubnavigation {
	from { opacity: 1; z-index: 150; }
    to { opacity: 0; z-index: -1; }
}



#navigation #menu > ul div.sub ul { 
	list-style: none inside;
	padding: 0;
	margin: 0;	
}
#navigation #menu > ul div.sub ul li { 
	margin: 0;
	padding: 0;
	text-align: left;
	border-bottom: 0 solid;
}
#navigation #menu > ul div.sub ul li.end { border-bottom: 0 solid; }
#navigation #menu > ul div.sub ul li a {
	display: block;
	white-space: nowrap;
	text-transform: uppercase;
	line-height: 36px;
	padding: 0 10px 0 10px;
	font-size: .875em;
	color: #ddd;
	-webkit-transition: color .2s;
	   -moz-transition: color .2s;
	     -o-transition: color .2s;
	        transition: color .2s;
	text-decoration: none;
} 
#navigation #menu > ul div.sub ul li a.active,
#navigation #menu > ul div.sub ul li a:hover {
	color: #fff;
}

/**
 * BANNER
 */
#banner { display: block; }

#banner .ed-c-control { margin-top: 60px; }

#banner h2 {
	font-family: 'Cabin', Arial, Helvetica, sans-serif;
	display: inline-block;
	background: rgba(0,0,0,.5);
	padding: 5px 10px;
	text-shadow: none;
	font-size: 1.6em;
}
#banner h3 {
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
	display: inline-block;
	font-weight: normal;
	background: rgba(0,0,0,.5);
	padding: 5px 10px;
	text-shadow: none;
	font-size: 1.2em;
}

#banner_content {
	position: absolute;
	width: 1020px;
	top: auto;
	bottom: 5%;
	left: 50%;
	margin-left: -510px;
}

/**
 * CONTENT
 */
#content { display: block; z-index: 50; }


/* Buttons */
.button-no-background {
	border-width: 2px;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
}

.button, a.button {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}


/* Headlines */

#content .ed-headline { text-align: center; } /* if it's left/right this is overridden */
#content .ed-headline h2.center { 
	display: inline-block;
	padding: 5px 5px 8px;
	line-height: 1.3;
	border-bottom: 2px solid #888;
	border-top: 2px solid #888;
}

#content h2 {
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.3;
	color: #333;
}

#content h3 { 
	letter-spacing: 0.02em;
	font-weight: normal; 
	font-style: italic;
	font-size: 1.2em; 
	line-height: 1.3;
	color: #555;
}

/* Selection */
::-moz-selection { background: #bbb; color: #fff; }
::selection { background: #bbb; color: #fff; }
::-moz-selection { background: #bbb; color: #fff; }

/* Forms */
div.ed-form div.element input, 
div.ed-form div.element select, 
div.ed-form div.element textarea {
	border: 1px solid #ddd;
	font-size: .875em;
	line-height: 1.6;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
	padding: 8px;
}
div.ed-form div.element select { height: 34px; background: #fff; }

div.ed-form .ed-form-button div.element input {
	-webkit-appearance: none;
	background: #41403c;
	font-size: .875em;
	line-height: 1.6;
	padding-top: 9px;
	padding-bottom: 9px;
	color: #eee;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
}
div.ed-form .ed-form-button div.element input:hover { background: #61605c; color: #eee; }

div.ed-form div.ed-form-captcha div.captcha-right a:after { content: none !important; }

/**
 * FOOTER
 */
#footer { 
	display: block; 
	background: rgba(0,0,0,.1);
	margin: 0;
	padding: 20px 0;
}
#footer p {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	font-size: .875em;
	color: #999;
}
#footer p a {
	color: #888;
	text-decoration: none;
	font-weight: 400;
}

#footer a.scroll-link {
	display: block;
	position: absolute;
	right: 0px;
	top: -8px;
	width: 36px;
	height: 36px;
	background: #fff;
	text-decoration: none;
	text-align: center;
	color: #aaa;
	line-height: 34px;
	font-size: .8em;
	overflow: hidden;
	-webkit-transition: color .5s, background .5s;
	   -moz-transition: color .5s, background .5s;
	     -o-transition: color .5s, background .5s;
	        transition: color .5s, background .5s;
}
#footer a.scroll-link:hover { color: #fff; background: #aaa; }

#footer a.scroll-link:before {
	font-family: FontAwesome;
	content: "\f077";
}

#footer a:after { background: #999; }




/* Parallax */
#banner_wrapper { position: relative; overflow: hidden; }
#banner { position: relative; z-index: 10; width: 100%; }

#content { position: relative; z-index: 50; padding-top: 65px; }
body.has-banner #content { padding-top: 0; }

body.has-js #navigation { position: absolute; }
body.parallax #navigation { position: fixed; top: 0; }
body.parallax #banner { position: absolute; top: 0; }





/**
 * RESPONSIVENESS 
 */

/* Graded widths */

@media screen and (max-width: 1240px) {
		
	.wrapper { width: 1080px; }
	#banner_content { width: 1080px; margin-left: -540px; }

}

@media screen and (max-width: 1120px) {
		
	.wrapper { width: 960px; }
	#banner_content { width: 960px; margin-left: -480px; }

}



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

	/* Makes sure nav is displayed on size-up */
	#navigation { display: block !important; }

	/* Submenu hint for desktops */
	#navigation #menu > ul > li > a.sub-trigger { padding-right: 40px; }
	#navigation #menu > ul > li > a.sub-trigger:after {
		position: absolute;
		right: 20px;
		top: 50%;
		margin: -4px 0 0 0;
		display: inline-block;
		font-family: FontAwesome;
		content: '\f107';
		line-height: 10px;
		color: #aaa;
	}


}



/* iPad */
@media screen and (max-width: 1023px) {
	
	#header { padding: 20px 0; text-align: left; }
	#header #logo { width: 70%; }

	#header #nav-toggle { display: block; }

	#navigation { 
		width: 960px;
		margin: 0 auto;
		position: relative !important; 
		z-index: -1;
	}
	#navigation.nav-visible { z-index: 150; }

	#navigation #menu > ul { 
		position: absolute;
		display: block;
		opacity: 0; 
		z-index: -1;
		right: 30px;
		top: -30px;
		background: #fff;
		border: 1px solid #ddd;
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
		   -moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
		        box-shadow: 0 0 10px rgba(0,0,0,.5);
		-webkit-animation: hideSubnavigation .2s; 
		   -moz-animation: hideSubnavigation .2s; 
		     -o-animation: hideSubnavigation .2s; 
		        animation: hideSubnavigation .2s; 			
	}
	#navigation #menu > ul > li { 
		position: relative;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,.1);
	}
	#navigation #menu > ul > li.end { border-bottom: 0 solid; }
	#navigation #menu > ul > li > a.active,
	#navigation #menu > ul > li:hover > a,
	#navigation #menu > ul > li > a { 
		line-height: 36px;
		background: transparent;
		color: #555;
		font-size: .875em;
		border-bottom: 0 solid;
		text-align: right;
		text-shadow: none;
		padding-left: 40px;
		padding-right: 10px;
		-webkit-transition: background-color .3s, color .3s;
		   -moz-transition: background-color .3s, color .3s;
		     -o-transition: background-color .3s, color .3s;
		        transition: background-color .3s, color .3s;
		text-decoration: none;
	} 
	#navigation #menu > ul > li > a.active { text-decoration: underline; }
	#navigation #menu > ul > li > a:hover {
		color: #000;
		background: #eee;
	}


	#navigation #menu > ul > li > a.sub-trigger:before { 
		font-family: FontAwesome;
		content: "\f0d9";
		position: absolute;
		left: 10px;
		color: rgba(0,0,0,.1);
	}


	#navigation.nav-visible #menu > ul { 
		display: block; 
		opacity: 1; 
		z-index: 150;
		-webkit-animation: showSubnavigation .5s; 
		   -moz-animation: showSubnavigation .5s; 
		     -o-animation: showSubnavigation .5s; 
		        animation: showSubnavigation .5s; 
	}

	#navigation #menu > ul div.sub {
		background: #fff;
		right: 100%;
		top: 0;
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
		   -moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
		        box-shadow: 0 0 10px rgba(0,0,0,.5);
	}

	#navigation #menu > ul div.sub li.first:after,
	#navigation #menu > ul div.sub li.first:before { 
		position: absolute;
		content: "";
		bottom: auto;
		top: 10px;
		left: 100%;
		border-bottom: 8px solid transparent;
		border-top: 8px solid transparent;
		border-left: 8px solid #fff;
		border-right: 0 solid;
		-webkit-transition: border-left .3s;
		   -moz-transition: border-left .3s;
		     -o-transition: border-left .3s;
		        transition: border-left .3s;
	}
	#navigation #menu > ul div.sub li.first:before {
		border-bottom: 9px solid transparent;
		border-top: 9px solid transparent;
		border-left: 9px solid #ddd;
		margin: -1px 0 0 0;
		border-right: 0 solid;
	}

	#navigation #menu > ul div.sub li.first:hover:after { border-left-color: #eee; border-bottom-color: transparent; }


	/* Optional: Navigation full width */

	#navigation {
		display: none;
		width: 100%;
		background: #fff;
		z-index: 90;
	}

	#navigation #menu > ul {
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		opacity: 1;
		border-left: 0 solid;
		border-right: 0 solid;
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
		        box-shadow: none;
		-webkit-animation: none;
		   -moz-animation: none;
		     -o-animation: none;
		        animation: none;		        
		z-index: 100;
	}

	#navigation #menu > ul > li.menu-sub { border-bottom: 0 solid; }

	.nav-beyond-banner #navigation #menu > ul div.sub { background: transparent; }

	body #navigation #menu > ul > li div.sub:hover,
	body #navigation #menu > ul > li:hover div.sub,
	body #navigation #menu > ul div.sub,
	body #navigation #menu > ul div.sub:hover {
		left: 0;
		right: 0;
		position: relative;
		overflow: hidden;
		max-height: 0;
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
		        box-shadow: none;
		opacity: 1;
		-webkit-animation: none;
		   -moz-animation: none;
		     -o-animation: none;
		        animation: none;
		border-left: 0 solid;
		border-right: 0 solid;
		border-top: 0 solid;		
		-webkit-transition: max-height 1s;		
		   -moz-transition: max-height 1s;		
		     -o-transition: max-height 1s;		
		        transition: max-height 1s;
	}
	body #navigation #menu > ul > li:hover div.sub,
	body #navigation #menu > ul > li.active div.sub,
	body #navigation #menu > ul div.sub:hover { max-height: 1000px; }
	
	#navigation #menu > ul div.sub ul li.first { border-top: 1px solid rgba(0,0,0,.1); }

	#navigation #menu > ul > li > a.active, 
	#navigation #menu > ul > li:hover > a,
	#navigation #menu > ul > li > a {
		text-align: left;
		font-size: .9em;
		line-height: 45px;
	}
	
	#navigation #menu > ul > li > a.active {
		border-left: 5px solid #ccc;
		padding-left: 35px;
		text-decoration: none;
	}

	#navigation #menu > ul div.sub ul li a.active {
		border-left: 10px solid #fff;
		-webkit-box-shadow: inset 5px 0 0 #ccc;
		   -moz-box-shadow: inset 5px 0 0 #ccc;
		        box-shadow: inset 5px 0 0 #ccc;
		padding-left: 40px;
		text-decoration: none;
		color: #555;
	}
	#navigation #menu > ul div.sub ul li a:hover { color: #555; }



	#navigation #menu > ul div.sub ul li a {
		padding-right: 10px;
		padding-left: 50px;
		font-size: .9em;
		color: #777;
		line-height: 40px;
		text-shadow: none;
	}

	#navigation #menu > ul > li > a.sub-trigger:before { left: auto; right: 10px; content: '\f0d7'; }
	#navigation #menu > ul > li:hover > a.sub-trigger:before { left: auto; right: 10px; content: '\f0d8'; }

	#navigation #menu > ul div.sub li.first:before,
	#navigation #menu > ul div.sub li.first:after { content: none; }


	#content { padding-top: 0; }


}


@media screen and (max-width: 1000px) {
		
	.wrapper { width: 768px; }
	#navigation { width: 768px; }

	/* Optional: Navigation full width */
	#navigation { width: 100%; }

	#banner_content { width: 768px; margin-left: -384px; }

}

@media screen and (max-width: 800px) {
		
	.wrapper { width: 94%; }

	#navigation { width: 94%; }
	/* Optional: Navigation full width */
	#navigation { width: 100%; }

	#banner_content { width: 94%; margin-left: 0; left: 3%; }

}

@media screen and (max-width: 768px) {
	
	/* Grid */
	.ed-grid [class*="span"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

}

/* iPhone */
@media screen and (max-width: 568px) {
	
	html, body { font-size: 105%; }

	/* Reduce Banner Heading Size */

	#banner h2 { font-size: 1.5em; }
	#banner h3 { font-size: 1em; }
}



/* Edit Mode Stuff */

body.edit.parallax.headline-not-reached #navigation { position: absolute; top: auto; }
body.edit.parallax.headline-not-reached #banner_wrapper { position: relative; margin-top: 0 !important; }
body.edit.parallax.headline-not-reached.has-banner #content { margin-top: 0 !important; }