/* ---------------------------------------------------------------
	SITE-SPECIFIC THEME STYLES
----------------------------------------------------------------*/

/* COLOR SWATCHES
Yellow: #f6bb07
Blue: #0d2840
Gray: #434b4f
Dark Gray: #121415
*/

/* TYPOGRAPHY 
Font Scale: 1.5
Base Font Size: 16px
Base Line Height: 24px
Baseline: 24px

Line height =  baseline / font-size
Margin bottom = ( base font-size * base line-height ) / current font-size
*/

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: #636363;
    background: #434b4f;
}

body,html { height: 100%; }

/* ---------------------------------------------------------------
PAGE LAYOUT
----------------------------------------------------------------*/
.row {
	max-width: 1024px;
}

.row .row {
	margin-left: -20px;
	margin-right: -20px;
    max-width: 1064px; /* .row max-width + (margin-left + margin-right) */
}

.column {
    padding: 12px 20px;
}

.row .row.gutter-0 {
	margin-left: 0;
	margin-right: 0;
}
.gutter-0 .column {
    padding-right: 0;
    padding-left: 0;
}
.row .row.gutter-5 {
	margin-left: -5px;
	margin-right: -5px;
}
.gutter-5 .column {
    padding-right: 5px;
    padding-left: 5px;
}
.row .row.gutter-10 {
	margin-left: -10px;
	margin-right: -10px;
}
.gutter-10 .column {
    padding-right: 10px;
    padding-left: 10px;
}

/* Page content wrapper */
#wrapper {
	width: 100%;
	position: relative;
    margin: 0 auto;
    background: #fff;
}

/* Main content container */
#main-content {
	padding-top: 120px;
	padding-bottom: 48px;
    overflow: hidden;
}
#home #main-content {
	padding-top: 96px;
}

.float-left {
	margin-right: 24px;
	margin-bottom: 24px;
}
.float-right {
	margin-left: 24px;
	margin-bottom: 24px;
}

.show-sm,
.show-med {
    display: none;
}

/* ---------------------------------------------------------------
TYPOGRAPHY
----------------------------------------------------------------*/
h1,h2,h3,h4,h5,#main-nav,.button {
    font-family: 'Montserrat', sans-serif;
}
p {
	margin-bottom: 1.5em;
}
	p:last-child {
		margin-bottom: 0; /* Remove bottom margin from last paragraph */
	}

ul,
ol {
	padding-left: 0;
	margin-bottom: 1.5em;
	margin-left: 2rem;
}
ol {
	margin-left: 4rem;
}
    ul:last-child,
    ol:last-child {
        margin-bottom: 0;
    }
    ul ul,
    ol ol {
        padding-left: 0;
        margin: 1rem 0 1rem 2rem; /* top and bottom margins equal to li bottom padding */
    }
	ul li,
	ol li {
		margin: 0;
		padding: 0 0 1.5em;
	}
	ul li:last-child,
	ol li:last-child {
		padding-bottom: 0;
	}
	ul li {
		background: url(../images/bullet.png) no-repeat 0 6px;
        padding-left: 2.75rem;
	}
	ol li {
		padding-left: 1rem;
	}
	ul.square,
	ul.circle,
	ul.disc {
		margin-left: 40px;
	}
	ul.square li,
	ul.circle li,
	ul.disc li {
		background-image: none;
		padding-left: 8px;
	}
	li li {
		font-size: inherit;
	}
    ol ol {
        list-style-type: lower-alpha;
    }
    ol ol ol {
        list-style-type: lower-roman;
    }
	
h1,h2,h3,h4,h5,h6 {
	color: #0d2840;
	line-height: 1.125;
    font-weight: 700;
    margin-top: .75em;
    margin-bottom: .25em;
    letter-spacing: -.05em;
}
	h1,
    .h1 {
		font-size: 48px;
        margin-top: 0;
		margin-bottom: 1em;
	}
	h2,
    .h2 {
		font-size: 36px;
	}
	h3,
    h3,
	aside h2 {
		font-size: 30px;
	}
	h4,
    .h4,
	aside h3 {
		font-size: 24px;
	}
	h5,
    .h5,
	aside h4 {
		font-size: 18px;
	}
	h6,
    .h6,
	aside h5 {
		font-size: 16px;
	}	
	
	/* Subtitles */
    .subtitle {
        color: #666;
    }
	h1 + h2.subtitle {
		margin-top: -9px;
	}
	h2 + h3.subtitle {
		margin-top: -4px;
		
	}
	h3 + h4.subtitle {
		margin-top: -4px;
	}
    
    /* Small title text */
    h1 .small,
    .h1 .small,
    h1 small,
    .h1 small,
    h2 .small,
    .h2 .small,
    h2 small,
    .h2 small,
    h3 .small,
    .h3 .small,
    h3 small,
    .h3 small,
    h4 .small,
    .h4 .small,
    h4 small,
    .h4 small {
        font-size: 60%;
        color: #888;
    }
	
	/*aside p,
	aside li {
		font-size: 14px;
	}*/
	
/* Links */
a {
	color: #0d2840;
	text-decoration: none;
    transition: color .3s ease;
}
a:hover {
    color: #f6bb07;
}

/* Abbreviations */
abbr,
acronym {
	border-bottom: 1px dotted #1d335d;
	color: #1d335d;
}

/* Block quote */
blockquote {
	background-color: #ecede7;
	border-left: 5px solid #1d335d;
	margin: 24px;
	padding: 12px;
}
	blockquote cite {
		color: #555;
		display: block;
		font-size: 1em;
		margin-top: -1em;
	}
	blockquote cite:before {
		content: "\2014 \0020";
	}
	blockquote p {
		color: #6f6f6f;
		font-style: italic;
		margin-top: 0;
	}
	
pre {
	background-color: #ecede7;
	border: 1px solid #a1a1a1;
	margin: 1.5em 0;
	padding: 1.5em;
}

	
/* ---------------------------------------------------------------
HEADER
----------------------------------------------------------------*/
header {
	position: fixed;
    top: 0;
    left: 0;
	width: 100%;
    height: 96px;
	z-index: 999;
    background: #fff;
    border-bottom: 4px solid #121415;
}
header .column {
    padding: 0;
}

#logo {
	display: block;
	margin: 0;
	padding: 10px 0;
}

/* ---------------------------------------------------------------
MAIN NAVIGATION MENU - Horizontal
----------------------------------------------------------------*/
#mobile-nav,
#main-nav .mobile-nav-title,
#main-nav > ul li#nav-home {
	display: none;
}
#main-nav {
	margin-top: 36px;
	padding: 0;
	z-index: 30;
    width: 100%;
}

#main-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 10;
    float: right;
}
#main-nav > ul li {
	background-image: none;
	display: inline-block;
	float: left;
    padding: 0;
	margin: 0 1.5em;
    position: relative;
}
#main-nav > ul li a {
	color: #434b4f;
	display: inline-block;
	font-size: 16px;
    font-weight: 700;
    padding: 0 0 .5em;
    margin: 0;
	text-decoration: none;
    text-align: center;
}
#main-nav > ul li a:hover,
#main-nav > ul li:hover > a {
	color: #1d335d;
}

#main-nav > ul li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #f6bb07;
  visibility: hidden;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}
#main-nav > ul li:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

/* Dropdown menu */
#main-nav > ul ul {
    max-height: 0;
    overflow: hidden;
	position: absolute;
    width: 260px;
	top: 100%;
    left: 0;
	margin: 0;
    padding: 0;
	z-index: 99;
    background: #434b4f;
    border-left: 8px solid #121415;
    -webkit-transition: max-height .7s ease-in;
            transition: max-height .7s ease-in;
}
#main-nav > ul li:hover ul {
    max-height: 500px;
}
#main-nav > ul ul li {
    float: none;
	border: none;
    display: block;
    position: relative;
    margin: 0;
}
#main-nav > ul ul li a {
    color: #fff;
	display: block;
    font-size: 14px;
    font-weight: 400;
	padding: .5em .5em .5em 1em;
	text-transform: none;
    text-align: left;
}
#main-nav > ul ul li a:hover {
	color: #f6bb07;
}
#main-nav > ul ul li:after {
  height: 0;
}

	
/* ---------------------------------------------------------------
TABLES
----------------------------------------------------------------*/	
table {
	border: none;
	margin: 1.5em 0 1.5em;
}
.striped tbody tr:nth-child(odd) { 
	background: #eee; 
}
th,td {
	border-bottom: 1px solid #e1e1e1;
	padding: .5em;
	text-align: left;
}
th:first-child,
td:first-child {
    padding-left: 0;
}
.striped th:first-child,
.striped td:first-child {
    padding-left: .5em;
}
th {
	font-weight: bold;
}


/* ---------------------------------------------------------------
FORMS
----------------------------------------------------------------*/
form {
	margin: 0;
}
fieldset {
	border: 1px solid #434b4f;
	margin-bottom: 24px;
	padding: 24px;
}
.row fieldset .row {
    margin-right: 0;
    margin-left: 0;
}
fieldset h2 {
	background-color: #434b4f;
	color: #fff;
	font-size: 24px;
}
fieldset .row:last-of-type .column {
	margin-bottom: 0;
}
.form-group {
    margin-bottom: 1em;
}
fieldset .form-group:last-child {
    margin-bottom: 0;
}
.row .form-group.row {
    margin-right: 0;
    margin-left: 0;
}
label {
	color: #434b4f;
	font-weight: bold;
	margin-bottom: .3333em;
}
label.label-inline {
    padding-top: 7px;
}
label > .small {
    /*font-weight: normal;*/
    display: inline-block;
}
/* Radio/checkbox label */
.label-rcb {
    font-weight: 400;
}
    
/* Inputs */  
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select,
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="url"],
input[type="number"],
input[type="range"] {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #222;
	padding: 6px 10px;
    height: 36px;
    border-radius: 4px;
	box-shadow: none;
}
	input[type="text"]:focus,
	input[type="password"]:focus,
	textarea:focus,
	select:focus,
	input[type="tel"]:focus,
	input[type="email"]:focus,
	input[type="date"]:focus,
	input[type="url"]:focus,
	input[type="number"]:focus,
	input[type="range"]:focus {
		border-color: #999;
		outline: none;
		box-shadow: none;
    }
    /* Prefix/postfix search input focus border color to match non-focused */
    input.prefix-search[type="text"]:focus,
    input.postfix-search[type="text"]:focus {
        border-color: #ccc;
    }    
 
/* Input with button on left */  
input.prefix {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Input with button on right */  
input.postfix {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
  
span.prefix,  
span.postfix {
    display: inline-block;
    height: 36px; /* same as input height */ 
    line-height: 36px;
    vertical-align: top;
	background-color: #fff;
	border: 1px solid #ccc;
    color: #acacac;
}
/* span before input */
span.prefix {
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding-right: 0;
    padding-left: .5em;
}
/* span after input */  
span.postfix {
    border-left: none;
    border-radius: 0 4px 4px 0;
    padding-right: .5em;
    padding-left: 0;
}

/* Checkboxes and radio buttons */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}
input[type="radio"] + span,
input[type="checkbox"] + span {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-top: -12px;
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
    font-family: FontAwesome;
    font-size: 21px;
}
input[type="radio"] + span:before {
    content: '\f1db';
    -webkit-transition: .3s ease;
            transition: .3s ease;
}
input[type="radio"]:checked + span:before {
    content: '\f05d';
    color: #009707;
    -webkit-transition: .3s ease;
            transition: .3s ease;
}
input[type="checkbox"] + span:before {
    content: '\f096';
    -webkit-transition: .3s ease;
            transition: .3s ease;
}
input[type="checkbox"]:checked + span:before {
    content: '\f046';
    color: #009707;
    -webkit-transition: .3s ease;
            transition: .3s ease;
}

label.error {
	font-weight: 700;
    display: inline-block;
}
label label.error {
    margin-left: .5em;
}

.instruction {
    font-size: 75%;
    font-weight: normal;
    color: #888;
}

/* ---------------------------------------------------------------
BUTTONS
----------------------------------------------------------------*/
.button-group,
.button-group-inline {
	margin-top: 1.5em;
}

.button {
	background-color: #f6bb07;
	border: none;
	color: #fff;
	font-size: 18px;
	line-height: 2.5em;
	margin: 0;
	padding: 0 1.5em;
	text-transform: uppercase;
    border-radius: 50px;
    transition: all .3s ease;
}
.button-small {
    font-size: 85%;
}
.button-large {
    font-size: 125%;
}
.button:hover {
    background-color: #d39e00;
    color: #fff;
}
button[disabled],
.button[disabled],
input[disabled],
.button.disabled {
    opacity: .2;
}

/* Same as default button */
button[disabled]:hover,
.button[disabled]:hover,
.button.disabled:hover {
    background-color: #434b4f;
    border: none;
    color: #fff;
}

/* button before input */    
.button.prefix,  
.button.postfix {
    height: 36px; /* same as input height */ 
    line-height: 36px;
    vertical-align: top;
}
.button.prefix {
    border-right: none;
    border-radius: 4px 0 0 4px;
}
/* button after input */  
.button.postfix {
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.button-more-info {
    font-size: 10px;
}

/* ---------------------------------------------------------------
IMAGES
----------------------------------------------------------------*/
img.float-left,
img.float-right {
    margin-bottom: 1.5em;
}

.image-frame {
	background-color: #fff;
	border: 1px solid #434b4f;
	padding: 3px;
}

figure {
	margin-bottom: 1.5em;
}

figure img {
	background-color: #fff;
	border: 1px solid #434b4f;
	padding: 3px;
    margin-bottom: 0;
}

figcaption {
	font-size: .875em;
	font-style: italic;
	padding-top: 6px;
    text-align: center;
}

.thumb {
    display: inline-block;
    height: auto;
    line-height: 1.5em;
}


/* ---------------------------------------------------------------
BREADCRUMB MENU
----------------------------------------------------------------*/
.breadcrumb {
	font-size: 12px;
	font-weight: normal;
	list-style-type: none;
	margin: 0 0 1.5em;
	overflow: hidden;
	padding: 0;
}
	.breadcrumb li {
		background: none;
		float: left;
		line-height: normal;
		margin: 0;
		padding: 0;
	}
	.breadcrumb li:first-child {
		padding-left: 0;
	}
	.breadcrumb li a {
		color: #0d2840;
	}
	.breadcrumb li a:after {
		content: '\f101';
		display: inline-block;
		font-family: FontAwesome;
		padding-left: .5em;
		padding-right: .5em;
	}

.sub-pages {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: table;
}
.row .row.sub-pages {
    margin-right: 0;
    margin-left: 0;
}
.sub-page-title,
.sub-page-blurb {
    display: table-cell;
    vertical-align: middle;
    float: none;
}
.sub-page-title {
    background: url(../images/bg_section.jpg) no-repeat right top;
}
.sub-page-title h3 {
    text-align: right;
    margin-top: .75em;
    margin-bottom: .75em;
}
.sub-page-blurb p {
    margin-bottom: 0;
}
.sub-page-title h3 a:hover {
    color: #f6bb07;
}
.more-link {
    display: inline-block;
    margin-left: .3em;
    color: #f6bb07;
    font-size: 1.25em;
}
.more-link:hover {
    color: #0d2840;
}

.portfolio {
    margin-top: 2rem;
}
.portfolio-description .button {
    display: inline-block;
    margin-top: .5rem;
    font-size: .6875em;
}
.divider {
    border-top: 4px solid #f6bb07;
    margin: 5rem auto;
    height: 0;
    width: 80%;
}

/* ---------------------------------------------------------------
READ MORE/ALL
----------------------------------------------------------------*/
.read-all {
    margin-top: 1.5em;
}
p.read-more {
    margin-top: -1em;
}
.read-more a,
.read-all a {
	font-weight: bold;
	text-decoration: none;
}
.read-more a:after {
	content: '\f061'; /* Right arrow */
	font-family: FontAwesome;
	padding-left: 4px;
    font-weight: normal;
}

/* ---------------------------------------------------------------
PAGINATION
----------------------------------------------------------------*/
.pagination {
	color: #434b4f;
}
.pagination a {
	background-color: #eee;
	border: 1px solid #434b4f;
	color: #434b4f;
	height: 2em;
	line-height: 2em;
	margin: 0 .5em;
	padding: 0;
	width: 2em;
}
.pagination .current-page {
	height: 2em;
	line-height: 2em;
	margin: 0 .5em;
	padding: 0;
	width: 2em;
}
.pagination-count {
	margin-right: 1.5em;
}
.pagination-nav {
	margin-left: 1.5em;
}
.pagination a:hover {
	background-color: #aaa;
	color: #434b4f;
}
.pagination .current-page {
	background-color: #fff;
	border: 1px solid #888;
	color: #888;
}

.prev-next-browsing {
	margin-bottom: 1.5em;
	text-align: center;
}
.prev-page:before {
	content: '\f0a8'; /* Left arrow */
	font-family: FontAwesome;
	padding-right: .3em;
}
.next-page:after {
	content: '\f0a9'; /* Right arrow */
	font-family: FontAwesome;
	padding-left: .3em;
}

/* ---------------------------------------------------------------
VIDEO
----------------------------------------------------------------*/
.video-wrapper {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.float-left .video-wrapper,
.float-right .video-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
LOGO GALLERY
----------------------------------------------------------------*/
.client-logos {
	margin: 3em auto 1em;
	padding: 0;
    list-style: none;
}
	.client-logos li {
        position: relative;
        float: left;
		background-image: none;
		padding: 2em;
		text-align: center;
        overflow: hidden;
        width: 25%;
        height: 240px;
        border-right: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
	}
	.client-logos li:nth-child(-n+4) {
        border-top: 1px solid #eaeaea;
    }
	.client-logos li:nth-child(4n+1) {
        border-left: 1px solid #eaeaea;
    }
	.client-logos img {
        position: relative;
        margin: 0 auto;
		display: block;
        top: 50%;
        transform: translateY(-50%);
	}


/* ---------------------------------------------------------------
GOOGLE MAP
----------------------------------------------------------------*/
#map,
.gmap {
	border: 1px solid #434b4f;
	font-size: 12px;
	height: 360px;
	width: 100%;
	margin-bottom: 1.5em;
}
#map img,
.gmap img {
	background: none;
	border: none;
	max-width: none !important;
	padding: 0;
}
.map-label {
	line-height: 1.2em;
}

/* ---------------------------------------------------------------
HERO DISPLAY
----------------------------------------------------------------*/
.hero-header {
    background: url(../images/hero_main_background.jpg) no-repeat center top;
    background-size: cover;
    height: 470px;
    overflow: hidden;
    position: relative;
}
.hero-header-content {
    width: 50%;
    max-width: 500px;
    position: absolute;
    padding: 0;
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    text-shadow: 0 0 3px #002841;
}
.hero-header-content h1 {
    color: #f6bb07;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: .5em;
}
.hero-header-content p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
}
.hero-header-content a.button {
    font-size: 28px;
    background-color: transparent;
    border: 4px solid #f6bb07;
    color: #f6bb07;
    transition: border-color .4s ease;
}
.hero-header-content a.button:hover {
    border-color: #fff;
    color: #fff;
}

/* ---------------------------------------------------------------
HOME PAGE
----------------------------------------------------------------*/
.home-section {
    position: relative;
    margin-top: 64px;
    margin-bottom: 64px;
    overflow: hidden;
}
.home-section .column {
    margin-bottom: 0;
}
.home-section:nth-child(odd):not(.home-section-black),
.sample-section {
    background: url(../images/bg_section.jpg) no-repeat center top;
    background-size: cover;
    padding-top: 64px;
    padding-bottom: 64px;
}
.sample-section-callout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 64px;
    margin-bottom: 64px;
    padding: 32px 0;    
}
.sample-section-callout .portfolio {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding-right: 64px;
    padding-left: 64px;
}
.home-section .column.float-right + .column {
    float: none;
}
.home-section .button,
.home-section-black .button,
.button-more-info {
    background: #f6bb07;
}
.home-section .button:hover,
.home-section-black .button:hover,
.button-more-info:hover {
    background: #d39e00;
}
.home-section-black {
    background-color: #121415;
    padding-top: 64px;
    padding-bottom: 64px;
}
.home-section-black h2 {
    color: #f6bb07;
}
.home-section-black p,
.home-section-black li {
    color: #fff;
}
.home-questions {
    display: none;
    margin: 3rem auto 0;
    width: 60%;
}
.home-questions li {
    text-align: left;
}
.home-questions a {
    color: #f6bb07;
    font-weight: 700;
}
.home-questions a:hover {
    color: #d39e00;
}
#show-questions:after {
    content: '\f0ab';
    font-family: FontAwesome;
    margin-left: 1em;
}

.logo-carousel {
    margin: 0 0 1.5rem;
    padding: 0;
    width: 100%;
    height: 360px;
    visibility: hidden;
}
.logo-carousel li.logo {
    padding: 24px;
    margin: 0;
    background-image: none;
    background: #eee;
    border: 2px solid #0d2840;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
     -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
                  transform-style: preserve-3d;
}
.logo-carousel li.logo:after {
    content: '';
    display: block;
    position: absolute;
    left: 10%;
    bottom: 0px;
    width: 80%;
    height: 6px;
    background: transparent;
    border-radius: 200px/10px;
    box-shadow: 0 24px 20px rgba(0,0,0,0.3);
}
.logo-carousel li.logo img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.call-out {
    margin: 0 1rem;
    border: 1px solid #0d2840;
}
    .call-out-header {
        background: #0d2840;
        padding: .75rem 1.5em;
        text-align: center;
    }
    .call-out-header h3 {
        margin-top: 0;
    }
    .call-out-header p {
        font-size: .75em;
        color: #fff;
    }
    .call-out-header h3 a {
        color: #f6bb07;
    }
    .call-out-header h3 a:hover {
        color: #d39e00;
    }

/* ---------------------------------------------------------------
ALERTS
----------------------------------------------------------------*/
.alert-box h2,
.alert-box h3 {
	font-size: 24px;
	margin-top: 0;
}

/* ---------------------------------------------------------------
SOCIAL LINKS
----------------------------------------------------------------*/
.social-links {
    text-align: center;
    font-size: 36px;
}
.social-links a {
    color: #f6bb07;
    margin-right: 4px;
    margin-left: 4px;
}
.social-links a:hover {
    color: #fff;
}

/* ---------------------------------------------------------------
FOOTER
----------------------------------------------------------------*/
footer {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 1.5em;
	padding-top: 1.5em;
    background: #434b4f;
    color: #fff;
}
footer a {
    color: #fbbb07;
}
#footer-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#footer-nav li {
	background-image: none;
	font-size: 12px;
	margin-bottom: 0;
	padding: 0 0 1em;
}
footer img {
	background: none;
	border: none;
	padding: 0;
}
footer address {
	font-size: .6667em;
	font-style: normal;
    text-align: center;
}
.copyright {
	font-size: .55556em;
    text-align: center;
}

/* ---------------------------------------------------------------
MEDIA QUERIES
----------------------------------------------------------------*/
@media screen and (max-width: 840px) {
    header {
        height: auto;
    }
    #main-nav {
        margin-top: 24px;
    }
    #main-nav > ul li {
        margin: 0 .75em;
    }
    #main-content {
        padding-top: 100px;
    }
    .hero-header-content {
        width: 100%;
        max-width: none;
        padding: 0 3rem;
        right: 0;
        left: 0;
        text-align: center;
    }
    .sample-section-callout {
        margin-right: -20px;
        margin-left: -20px; 
    }
    .sample-section-callout .portfolio {
        margin-top: 0;
        margin-right: auto;
        margin-left: auto;
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media screen and (max-width: 640px) {
    .hide-med {
        display: none;
    }
    .show-med {
        display: block;
    }
    #logo {
        width: 60%;
        padding: 12px;
    }
    
    /* Navigation - Slide in from right */
    /* Reveal open/close buttons */
    #mobile-nav {
        position: absolute;
        top: 50%;
        right: 2rem;
        display: block;
        width: 48px;
        height: 48px;
        transform: translateY(-50%);
    }
    #mobile-nav a {
        position: relative;
        display: block;
        height: 48px;
        width: 48px;
    }
    .hamburger,
    .hamburger:before,
    .hamburger:after {
        position: absolute;
        display: block;
        height: 5px;
        width: 100%;
        background-color: #121415;
        top: 50%;
        z-index: 99;
        transition: .25s ease;
    }
    .hamburger:before {
        content: '';
        top: -16px;
    }
    .hamburger:after {
        content: '';
        top: 16px;
    }
    .nav-toggle-close .hamburger {
        top: 50%;
        transform: rotate(45deg);
    }
    .nav-toggle-close .hamburger:before {
        top: 50%;
        transform: rotate(90deg);
    }
    .nav-toggle-close .hamburger:after {
        opacity: 0;
    }
    
    /* Move nav off screen, setup transitions */
    #main-nav {
        margin-top: 0;
    }
    #main-nav > ul {
        width: 70%;
        position: absolute;
        right: -70%;
        top: -100px;
        height: 100%;
    }
  
  /* Display nav items vertically */
    #main-nav > ul li {
        float: none;
        width: 100%;
        text-align: left;
        padding: .5em 1em;
        margin: 0;
        box-sizing: border-box;
        border-bottom: 1px solid #f6bb07;
    }
    #main-nav > ul li#nav-home {
        display: block;
    }  
    #main-nav > ul li a {
        font-size: 1.25em;
        padding: 0 1em;
        text-align: left;
        line-height: 2em;
        color: #fff;
    }
    #main-nav > ul li a:hover {
        color: #f6bb07;
    }
    #main-nav > ul li:hover:after {
      visibility: hidden;
    }
    #main-nav > ul li:hover ul {
        max-height: 0;
    }

    .openNav #wrapper {
        transform: translate3d(-70%, 0, 0);
        transition: .5s ease;
    }
    
    /* When the panel is closed, transition the page back to the right */
    #wrapper {
        transform: translate3d(0, 0, 0);
        transition: .5s ease;
    }
    
    .home-section img {
        width: 60%;
    }
    .home-section .float-right {
        margin-left: 0;
    }
    .logo-carousel {
        height: 300px;
    }
    .logo-carousel li.logo {
        width: 180px;
        height: 180px;
    }
    .call-out img {
        width: 100%;
        height: auto;
    }
    .home-questions {
        margin: 3rem auto 0;
        width: 85%;
    }
    .home-questions ol {
        margin-left: 2rem;
    }
    
    .sub-pages {
        margin-top: 2rem;
        padding-bottom: 2rem;
        display: block;
    }
    .sub-page-title,
    .sub-page-blurb {
        display: block;
        vertical-align: auto;
    }
    .sub-page-title h3 {
        text-align: left;
        margin-top: .25em;
        margin-bottom: .25em;
    }
    .more-link {
        display: block;
        margin-left: 0;
        color: #f6bb07;
        font-size: 1em;
    }
    .more-link i {
        display: none;
    }
    .more-link:before {
        content: 'More Info';
        font-weight: 700;
    }
    .client-logos li {
        padding: 1.5rem;
        width: 33%;
        height: 180px;
    }
	.client-logos li:nth-child(-n+3) {
        border-top: 1px solid #eaeaea;
    }
	.client-logos li:nth-child(3n+1) {
        border-left: 1px solid #eaeaea;
    }
    .portfolio .column {
        float: left;
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    h1,
    .h1 {
		font-size: 36px;
        margin-top: 0;
		margin-bottom: 1em;
	}
	h2,
    .h2 {
		font-size: 30px;
	}
	h3,
    h3,
	aside h2 {
		font-size: 24px;
	}
	h4,
    .h4,
	aside h3 {
		font-size: 18px;
	}
	h5,
    .h5,
	aside h4 {
		font-size: 16px;
	}
	h6,
    .h6,
	aside h5 {
		font-size: 14px;
	}
    .hide-sm {
        display: none;
    }
    .show-sm {
        display: block;
    }
    .float-left,
    .float-right {
        float: none;
        margin: 12px auto;
    }
    #mobile-nav {
        width: 36px;
        height: 36px;
    }
    #mobile-nav a {
        width: 36px;
        height: 36px;
    }
    .hamburger,
    .hamburger:before,
    .hamburger:after {
        height: 3px;
    }
    .hamburger:before {
        top: -12px;
    }
    .hamburger:after {
        top: 12px;
    } 
    #main-nav > ul {
        top: -60px;
    }
    #main-nav > ul li {
        padding-left: 0;
        padding-right: 0;
    }
    #main-nav > ul li a {
        font-size: 1em;
        line-height: 1.3em;
        padding-left: 1em;
        padding-right: 1em;
    }
    #main-content {
        padding-top: 76px;
        padding-bottom: 48px;
    }
    #home #main-content {
        padding-top: 63px;
    }
    
    .hero-header-content h1 {
        font-size: 40px;
    }
    .button {
        padding: .5em 1em;
        line-height: 1.25em;
    }
    .logo-carousel {
        height: 248px;
    }
    .logo-carousel li.logo {
        width: 140px;
        height: 140px;
    }
    
    .client-logos li {
        padding: 1rem;
        width: 50%;
        height: 140px;
    }
	.client-logos li:nth-child(-n+2) {
        border-top: 1px solid #eaeaea;
    }
	.client-logos li:nth-child(2n+1) {
        border-left: 1px solid #eaeaea;
    }
    
    .portfolio .column {
        float: none;
        width: 100%;
    }
    .portfolio-image img {
        margin: 0 auto;
    }
}