/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Fonts (need to be loaded first)
   ========================================================================== */
@font-face {
    font-family: 'Museo Sans';
    src: url('../fonts/museosans-100.eot');
    src: url('../fonts/museosans-100.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museosans-100.woff2') format('woff2'),
         url('../fonts/museosans-100.woff') format('woff'),
         url('../fonts/museosans-100.ttf') format('truetype'),
         url('../fonts/museosans-100.svg#museo_sans100') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('../fonts/museosans.eot');
    src: url('../fonts/museosans.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museosans.woff2') format('woff2'),
         url('../fonts/museosans.woff') format('woff'),
         url('../fonts/museosans.ttf') format('truetype'),
         url('../fonts/museosans.svg#museo_sans500') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Hero';
    src: url('../fonts/hero_light.eot');
    src: url('../fonts/hero_light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hero_light.woff2') format('woff2'),
         url('../fonts/hero_light.woff') format('woff'),
         url('../fonts/hero_light.ttf') format('truetype'),
         url('../fonts/hero_light.svg#heroregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hero';
    src: url('../fonts/hero.eot');
    src: url('../fonts/hero.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hero.woff2') format('woff2'),
         url('../fonts/hero.woff') format('woff'),
         url('../fonts/hero.ttf') format('truetype'),
         url('../fonts/hero.svg#heroregular') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
	max-width: 100%;
	overflow-x: hidden;
	min-width: 59.0625em; /* 945/16 */
}
   
body {
	background: #fff url(../img/Genesis-Corp-Symbol.jpg) no-repeat top center;
	margin: 1.875em 0;
	font-family: "Museo Sans";
	overflow-x: hidden;
	position: relative;
}

a:link, a:visited {
	color: #9B3006;
}
a:hover, a:active {
	color: #0A3D64;
}

h1 {
    color: #bd4719;
    font: 2.375em "Museo Sans";
    font-size: 2.5em;
    margin: 0.67em 0;
}

h2 {
    color: #bd4719;
    font-family: "Hero";
    font-size: 2.2em;
    font-weight: normal;
    margin: .5em 0;
    letter-spacing: 2px;
}

h3 {
    color: #bd4719;
    font-family: "Hero";
    font-size: 1.75em;
    font-weight: bold;
    margin: .5em 0;
    letter-spacing: 1px;
}

h4 {
    color: #174F7A;
    font-family: "Hero";
    font-size: 1.5em;
    font-weight: bold;
    margin: .5em 0;
    letter-spacing: 2px;
}

h5 {
	font: bold 1.25em "Hero";
    color: #bd4719;
    letter-spacing: 2px;
    margin: 1em 0;
}

h6 {
	font-size: 1em;
	font-weight: bold;
	font-family: "Hero";
	color: #444;
	letter-spacing: 2px;
    margin: 1em 0;
    font-variant: small-caps;
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
	text-decoration: none;
}
h1 a:link, h2 a:link, h3 a:link,
h1 a:visited, h2 a:visited, h3 a:visited {
    color: #bd4719;
}

.content {
	margin: 0 auto;
	padding: 0 3.333333%;
	max-width: 90rem;
}

.content-half { /* used for each column of a 2-column layout, inside a div.content.clearfix */
	float: left;
	width: 50%;
	min-width: 45rem;
}

.content-img {
	display: block;
	padding: .5em;
	border-radius: 3px;
	margin: 1em auto;
	box-shadow: 2px 2px 6px 2px rgba(0,0,0,.25);
	background: #f8f8f8;
	max-width: 100%;
	font-size: .75em;
	font-style: italic;
	text-align: center;
	color: #444;
}

.content-img img {
	max-width: 100%;
	margin: 0 auto .5em;
	display: block;
}

.img-right {
	float: right;
	margin-left: 1em;
	max-width: 35%;
	clear: right;
}

.img-left {
	float: left;
	margin-right: 1em;
	max-width: 35%;
	clear: left;
}

.col3 .column {
	margin: 0 4%;
	width: 28%;
	float: left;
}

.col3 .column:first-child {
	margin-left: 0;
}

.col3 .column:last-child {
	margin-right: 0;
}

/* Styles for form fields */
/* by default, form fields are stacked (block). we don't really need gc-formLayout-vert, but it's provided for completeness */
.gc-formField, .gc-formLayout-vert .gc-formField {
	margin-bottom: .75em;
	display: block;
}

/* if you don't want stacked, this makes form fields horizontal (inline) */
.gc-formLayout-horiz .gc-formField {
	display: inline-block;
	vertical-align: top;
	margin-right: 3em;
}

/* labels and fields are stacked vertiacally by default. labelLike is intended to be used for titles that group radio buttons and checkboxes */
.gc-formField label, .gc-fieldLayout-vert label,
.gc-labelLike, .gc-fieldLayout-vert .gc-labelLike {
	display: block;
	font: bold 1em "Hero";
}

/* this puts labels inline with the fields */
.gc-fieldLayout-horiz .gc-formField label, .gc-fieldLayout-horiz .gc-formField .gc-labelLike {
	width: 12em;
	display: inline-block;
	vertical-align: top;
}

.gc-formField input[type=text], .gc-formField input[type=password], .gc-formField input[type=email], .gc-formField input[type=tel] {
	background: #fff;
	border: 1px solid #ddd;
	padding: .5em .625em;
	color: #707070;
	width: 15em;
}

.gc-formField input[type=text]:focus, .gc-formField input[type=password]:focus, .gc-formField input[type=email]:focus, .gc-formField input[type=tel]:focus {
	border: 1px solid #06a7e2;
	border-left-width: 4px;
	padding-left: .375em;
}

.gc-formField textarea {
	width: 25em;
	max-width: 90%;
	min-height: 8em;
	border: 1px solid #ddd;
	padding: .5em .625em;
	color: #707070;
}

.gc-formField textarea:focus {
	border-color: #06a7e2;
}

.gc-formField input[type=submit] {
	font-size: .874em; /* fix for strange bug in FF and Chrome where border disappears */
	color: #fff;
	text-shadow: -1px -1px 1px #313a37;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.714285em 2.142857em; /* top/bottom: 10px/14px; left/right: 30px/14px */
	border: 0;
	border-left-style: solid;
	border-left-width: 9px;
	border-image: linear-gradient(
		to bottom,
		#f77948,
		#be481a
	);
	background: linear-gradient(
		to bottom,
		#61736c,
		#404845
	);
}
.gc-formField input[type=submit]:hover {
	color: #b0b0b0;
	border-image: linear-gradient(
		to top,
		#f77948,
		#be481a
	);
	background: linear-gradient(
		to bottom,
		#232524,
		#4f695e
	);
}

/* Styles for the header */
#header {
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3.333333%;
	padding-right: 3.333333%;
	max-width: 90rem;
}

#header img {
	float: left;
}

#mainNavPosition {
	margin-top: 1.9375em; /* same as the height of row 1, moves the whole container down: 31/16 */
}

#menuToggle {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ddd;
    color: #000;
    display: none;
    padding: 0.5em;
    cursor: pointer;
    margin-bottom: 0.25em;
}

#mainNav {
	margin-left: 21.875em; /* 320px (width of logo) + 30px (width of margin right of the logo): 350/16 */
	margin-right: -9999999px; /* extend the background all the way past the edge of the screen (requires body to have overflow-x: hidden to prevent scrollbars) */
	background: #424245;
}

#mainNav:after {
    content: "";
    display: block;
    padding-top: 2.375em; /* same as the height of row 2, artifically controls the height of the container: 38/16 */
}

#mainNav table {
	border-collapse: collapse;
	position: absolute;
	margin-top: -1.9375em; /* same as the height of row 1, offsets the table position to match the background: 31/16 */
}

#mainNav td {
	padding: 0;
}

#menu-360-first {
	border-left: 1px solid #afafb3;
}
#menu-360-last {
	border-right: 1px solid #afafb3;
}

#menuGroup {
	text-align: center;
	border: 1px solid #424245;
	border-top-width: 6px;
	border-bottom-width: 0;
	padding: 0.133333em 0 !important; /* 2/15 */
	letter-spacing: 5px;
	color: #fff;
	background: #bd4719;
	font-size: 0.94375em; /* 15.1/16 - OK, strange value here because Chrome wasn't rendering the text in the right size */
}
#menuGroup:hover {
	background: #fff;	
}
#menuGroup:hover a {
	color: #424245 !important;
}

#menuGroup a:link, #menuGroup a:visited {
	color: #fff;
	text-decoration: none;
	display: block;
}
#menuGroup a:hover {
	color: #424245;
	background: transparent;
}

#menus {
	background: #424245;
}

#mainNav ul, #mainNav li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

#mainNav li ul {
	position: absolute;
	left: -9999em;
	display: none;
}

#mainNav li:hover ul {
	left: auto;
	display: block; /* toggling display using :hover triggers iOS to treat the first tap as a hover, which makes the menus usable on touchscreens */
}

#mainNav li {
	float: left;
}

#menus a {
	display: block;
	padding: 0.642857em 2.285714em; /* t/b: 9/14; l/r: 30/14 */
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: .875em; /* 14/16 */
	white-space: nowrap;
}
#menus a:hover {
	background: #bd4719;
}

#mainNav ul ul {
	padding-top: 1px;
	min-width: 11em;
}

#mainNav ul ul li {
	float: none;
}

#mainNav ul ul a {
	background: #c2c2ba;
	color: #424245;
	border-left: 6px solid #424245;
	margin-bottom: 1px;
	padding: 0.642857em 0.714285em;
}
#mainNav ul ul a:hover {
	color: #fff;
	border-left-color: #f68f66;
}

/* Styles for the footer */
#mainFooter {
	background: #c2c2ba;
	color: #666;
	margin-top: 3.5em; /* 42/12 */
	padding: 1.5em 0;
	font-size: .75em; /* 12/16 */
	font-weight: bold;
}

#products {
	margin-bottom: 2em;
}

#products img {
	max-height: 40px;
	margin-right: .75em;
	padding: .25em 0;
}

#social {
	float: right;
}

#social a {
	margin-left: 1em;
}

.app-question {
	color: #174F7A;
	font-family: "Hero";
	font-size: 1.5em;
	font-weight: bold;
	margin: 0 15%;
}

.app-title {
	border-left: 10px solid #ddd;
	padding-left: 6px;
	font-size: 2.25em;
	line-height: 1;
	float: left;
	min-width: 8.25em;
}

.app-title a {
	text-decoration: none;
	color: #222;
}

.app-description {
	margin-left: 19.6em;
}

.contentWithSidebar {
	display: inline-block;
	width: 75.5%;
	vertical-align: top;
}

.sidebar {
	display: inline-block;
	width: 20%;
	margin-left: 4%;
	vertical-align: top;
}

.sidebar img {
	box-shadow: 2px 2px 6px 2px rgba(0,0,0,.25);
	max-width: 100%;
	display: block;
}

.sidebarContent {
	margin-top: 1em;
	border-top: 2px solid #888;
	padding: 1em 0;
}

.sidebarContent h6 {
	margin: 0;
}

.contactButton {
	margin: .25em 0;
	display: block;
	border-left: 12px solid #424245;
	padding: .5em 1em;
	font-size: 1.2em;
	text-decoration: none;
	letter-spacing: 1px;
	color: #fff;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
	background: linear-gradient(to bottom,
		#c34d1b,
		#d96523,
		#a52d10,
		#b23c15);
}
.contactButton:link, .contactButton:hover, .contactButton:visited, .contactButton:active {
	color: #fff;
}

.fancyList {
	font-size: 1.125em;	
}

ul.fancyList {
	list-style: none;
	padding: 0 0 0 .5em;
}

ul.fancyList li {
	margin-left: 40px;
	margin-bottom: .5em;
	line-height: 1.2;
}

ul.fancyList li::before {
	content: "\279f";
	color: #bd4719;
	font-size: 2em;
	vertical-align: middle;
	display: inline-block;
	width: 50px;
	margin-left: -50px;
	line-height: .1;
}

ol.fancyList {
	counter-reset: flCounter;
	list-style: none;
	padding-left: 1.55556em;
}

ol.fancyList li {
	counter-increment: flCounter;
	margin-bottom: .75em;
	margin-left: 1.5em;
}

ol.fancyList li::before {
	content: counter(flCounter);
	display: block;
	position: absolute;
	text-align: center;
	width: 1.5em;
	margin-left: -2em;
	border-radius: 3px;
	background: #bd4719;
	color: #fff;
	font-weight: bold;
}

.sidebarContent .fancyList {
	font-size: .875em;
}

.sidebarContent .fancyList li {
	margin-left: 30px;
}

.sidebarContent ul.fancyList li::before {
	content: "\27a4";
	margin-left: -30px;
	width: 30px;
	font-size: 1em;
}

.sbFancyList {
	font-size: .875em;
	list-style: none;
	padding: 0 0 0 .5em;
}

.sbFancyList li {
	margin-left: 30px;
	margin-bottom: .5em;
	line-height: 1.2;
}

.sbFancyList li::before {
	content: "\27a4";
	color: #bd4719;
	font-size: 1em;
	vertical-align: middle;
	display: inline-block;
	width: 30px;
	margin-left: -30px;
	line-height: .1;
}


/**********************************************************
 * These styles apply only to the home page
 *********************************************************/
#slider {
	background: url(../img/escheresque.png);
	padding: 1.25em 0;
	color: #fff;
}

#bigImg {
	border: 10px solid #c2bfba;
	border-radius: 8px;
	float: left;
	display: block;
	width: 66.428571%;
}

#sliderContent {
	float: right;
	width: 28.839285%;
}

#sliderTitle {
	font-size: 1.875em; /* 30/16 */
	font-weight: bold;
	margin: 1.2em 0 1em 0;
	line-height: 1.2;
}

#sliderByline {
	font-family: "Hero";
	font-weight: bold;
}

#sliderButton {
	display: block;
	overflow: hidden;
	margin-top: 2em; /* 40/20 */
	width: 204px; /* the width + padding should add up to 234px */
	padding-left: 30px;
	border-radius: 3px;
	background: url(../img/cta-big.png) no-repeat top left;
	box-shadow: 3px 3px 5px rgba(0,0,0,.4);
	font-family: "Hero";
	font-weight: bold;
	font-size: 1.25em; /* 20/16 */
	text-shadow: -1px -1px 1px #000;
	text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
	line-height: 55px;
	max-height: 55px;
}

#gen360Content {
	margin-top: 3em;
}

.gen360-column-header {
	color: #bd4719;
	font-size: 1.875em; /* 30/16 */
	font-weight: bold;
	font-family: "Hero";
	margin-bottom: .5em; /* 15/30 */
	vertical-align: baseline;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 799px) {
	html {
		min-width: 0;
	}
	
	body {
		overflow-x: auto;
	}
	
	.col3 .column {
		float: none;
		width: 100%;
		margin: 0;
		margin-top: 2em;
		border-bottom: 1px dashed #ddd;
		padding-bottom: 2em;
	}
	
	.col3 .column:first-child {
		margin-top: 0;
	}
	
	.col3 .column:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	
	.content * {
		max-width: 100%;
	}
	
	.content-half {
		width: 100%;
		min-width: 0px;
		max-width: 100%;
		float: none;
	}
	
	.content-img {
		max-width: 90%; /* since these have padding, they can't go all the way to 100% or they won't be aligned */
		display: block;
	}
	
	.img-right, .img-left {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	
	#header img {
		float: none;
		display: block;
		max-width: 100%;
	}
	
	#mainNavPosition {
		margin-right: 3.333333%;
	}
	
	#menuToggle {
		display: inline-block;
	}
	
	.menuClosed {
		display: none;
	}
	
	#mainNav {
		margin-left: 0;
		margin-right: 0;
	}
	#mainNav::after {
		padding: 0;
	}
	
	#mainNav table {
		display: block;
		position: static;
		margin-top: 0;
	}
	
	#mainNav tbody {
		display: block;
		width: 100%;
	}
	
	#mainNav table tr:first-child {
		display: none;
	}
	
	#mainNav tr, #mainNav td {
		display: block;
	}
	
	#menu-360-first, #menu-360-last {
		border: 0;
	}
	
	#mainNav li {
		float: none;
	}
	
	#mainNav li ul {
		position: static;
		display: block;
	}
	
	#mainNav ul ul {
		width: 100%;
	}
	
	#mainNav a {
		padding: 0.642857em 0.714285em;
	}
	
	#mainNav ul ul a {
		padding: 0.642857em 0.714285em 0.642857em 1.42857em;		
	}
	
	#social {
		float: none;
		margin-bottom: 1em;
	}
	
	.contentWithSidebar {
		width: 100%;
		display: block;
	}
	
	.sidebar {
		display: block;
		width: 100%;
		margin: 0;
	}
	
	.contactButton {
		float: left;
	}
	
	#bigImg {
		width: 98%;
		float: none;
		margin: 0 auto;
	}
	
	#sliderContent {
		float: none;
		width: 100%;
	}
	
	.app-title {
		float: none;
		margin-bottom: 1rem;
	}
	
	.app-description {
		margin: 0;
	}
}

@media only screen and (max-width: 479px) {
	.gc-formField textarea {
		width: 15em;
	}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}