
/* ==================================================================================
   PAGE CONTAINER(s)
   ================================================================================== */
    
/* ---- psd page width = 1400px 87.5em ---- */
/* ---- grid width = 1185px 74.063em 84.642857142857% (1185px / 1400px) ---- */
/* ---- gutter width = 45px 2.8125em ---- */
/* ---- row height full = 90px 5.625em ---- */
/* ---- row height half = 45px 2.8125em ---- */
/* ---- row height quarter = 22.5px 1.40625em ---- */

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
html, body {height: 100%;}
html {
    background-color: transparent !important;
}
#page {
   	min-height: 100%;
	position: relative;
	width: 100%;
	font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
    font-weight: 500;
}
#to-top {
    z-index: 99;
    position: fixed;
    bottom: 13em;
    right: 1em;
    display: none;
    width: 2.25em;
    height: 2.25em;
    background: transparent url(../img/global/to-top.png) center center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/to-top.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/to-top.svg);
}
@media screen and (min-width: 30em){ /* 480px */
#to-top {bottom: 11em;right: 1em;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
#to-top {bottom: 12em;right: 1.25em;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
#to-top {bottom: 10em;right: 1.25em;}
}


/* ==================================================================================
   GRID - .grid-wrapper determines relative column (c+) and spacing (s+) widths
   ================================================================================== */
   
/* ---- base (all) ---- */
.grid-wrapper {text-align: left;width: 100%;max-width: 74.063em !important; /* 1185px (1140px + 22.5px left & right column gutter padding) */margin: 0 auto;padding: 0 1.40625em;}
.row {width: 100%; margin: 0 auto;}
.row .row {width: auto; margin: 0 auto;}
.row:before,.row:after,.clearfix:before,.clearfix:after {content:'';display:table;}
.row:after,.clearfix:after {clear:both;}
.row,.clearfix {zoom:1;}
.center {text-align: center;}
.left {text-align: left;}
.full-top {margin-top: 2.8125em; /* 45px */}
.full-btm {margin-bottom: 2.8125em; /* 45px */}
.half-top {margin-top: 1.40625em /* 22.5px */}
.half-btm {margin-bottom: 1.40625em /* 22.5px */}
.quarter-top {margin-top: 0.703125em /* 11.25px */}
.quarter-btm {margin-bottom: 0.703125em /* 11p.25px */}
.no-top {margin-top: 0em;}
.no-btm {margin-bottom: 0em;}
.neg-top {margin-top: -2em;}
.neg-btm {margin-bottom: -2.5em;}
img {width: 100%; height: auto; display: block; margin: 0 auto;}
.c1,.c2,.c3,.c3-thumbs,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.ls1,.ls2,.ls3,.ls4,.ls5,.ls6,.ls7,.ls8,.ls9,.ls10,.ls11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.rs1,.rs2,.rs3,.rs4,.rs5,.rs6,.rs7,.rs8,.rs9,.rs10,.rs11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.end {float:right;} /* Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row */
/* ---- 320 ( + ) smartphones ---- */
@media screen and (min-width: 20em){ /* 320px */
.c3-thumbs {width: 50%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */
.mobile-hide {display: none;}
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.mobile-hide {display: inline;}
}
/* ---- 481 ( + ) ---- */ 
@media screen and (min-width: 30.0625em){ /* 481px */ 
.half-width {width:50%; float: left;padding: 1.40625em/*0.703125em; /* 11.25px (quarter gutter) */;position: relative; margin: 0 auto; }
.row .row .half-width {width: 100%; margin-bottom: 0.703125em;}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px */
.c3-thumbs {width: 50%; margin: 0 auto; float: left; position: relative;} /* for thumbnails */
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.grid-wrapper {text-align: left;padding: 0 2.8125em;}
.c3-thumbs {width: 25%; padding-bottom: 2.8125em !important;} /* for thumbnails */
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.grid-wrapper {text-align: left;padding: 0 2.8125em;}
.row .row {width: auto; margin: 0 -1.40625em /* -22.5px */;}
.full-top {margin-top: 5.625em; /* 90px */}
.full-btm {margin-bottom: 5.625em; /* 90px */}
.half-top {margin-top: 2.8125em; /* 45px */}
.half-btm {margin-bottom: 2.8125em; /* 45px */}
.quarter-top {margin-top: 1.40625em /* 22.5px */}
.quarter-btm {margin-bottom: 1.40625em /* 22.5px */}
.no-top {margin-top: 0;}
.neg-btm {margin-bottom: 5em;}
.c1 {width:8.33%}
.c2 {width:16.66%}
.c3 {width:25%}
.c3-thumbs {width: 25%;}
.c4 {width:33.33%}
.c5 {width:41.66%}
.c6 {width:50%}
.c7 {width:58.33%}
.c8 {width:66.66%}
.c9 {width:75%}
.c10 {width:83.33%}
.c11 {width:91.66%}
.c12 {width:100%}
.c1,.c2,.c3,.c3-thumbs,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 {float: left;padding: 0 1.40625em; /* 22.5px (half gutter) */;position: relative; margin: 0 auto; }
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c3-thumbs,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12 {width: 100%; margin-bottom: 2.8125em;}
.row .row > div:last-child{margin-bottom:0 !important}
.ls1 {margin-left:8.33%}
.ls2 {margin-left:16.66%}
.ls3 {margin-left:25%}
.ls4 {margin-left:33.33%}
.ls5 {margin-left:41.66%}
.ls6 {margin-left:50%}
.ls7 {margin-left:58.33%}
.ls8 {margin-left:66.66%}
.ls9 {margin-left:75%}
.ls10 {margin-left:83.33%}
.ls11 {margin-left:91.66%}
.rs1 {margin-right:8.33%}
.rs2 {margin-right:16.66%}
.rs3 {margin-right:25%}
.rs4 {margin-right:33.33%}
.rs5 {margin-right:41.66%}
.rs6 {margin-right:50%}
.rs7 {margin-right:58.33%}
.rs8 {margin-right:66.66%}
.rs9 {margin-right:75%}
.rs10 {margin-right:83.33%}
.rs11 {margin-right:91.66%}
}


/* ==================================================================================
   PERCENTAGES
   ================================================================================== */
   
.zero {width: 0;}
.ten {width: 10%;}
.twenty {width: 20%;}
.thirty {width: 30%;}
.forty {width: 40%;}
.fifty {width: 50%;}
.sixty {width: 60%;}
.seventy {width: 70%;}
.eighty {width: 80%;}
.ninety {width: 90%;}
.hundred {width: 100%;}


/* ==================================================================================
   TYPE
   ================================================================================== */
/*
 * Fonts Used:
 * Brandon Grotesque
 * Meta Serif Web Pro
*/

/* ---- base (all) ---- */
.white {color: #ffffff;}
.canvas {color: #f4efe6;}
.maroon {color: #683926;}
.silver {color: #aaaaaa;}
.gold {color: #dd971a;}
.slate {color: #222222;}
#fit1spacing {margin-top: 8%;} /* for large fittext1 with no paragraph text on large billboard CAROUSEL */
#fit2spacing {margin-top: 0;} /* for all fittext2 usage */
h1, h3 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 4px;
	display: block;
	line-height: 1.4;
}
h1 {text-align: center;}
h3 {margin-bottom: -.15em; text-align: center;}
h2 {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
    font-weight: 500;
    font-size: 1em;
    color: #dd971a;
    line-height: 1.6;
    text-align: center;
}
h2 a {text-decoration: none; color: #dd971a }
h4 {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.5em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 2;
	text-align: left;
}
h4.modal {text-align: center; line-height: 1em;}
span.italic {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
	font-size: 0.875em;
	text-transform: none;
	letter-spacing: 3px;
	text-align: center;
}
p {text-align: center;}
p a {
    font-weight: bold; 
    font-style: italic; 
    color: #222222;
    text-decoration: none;
    border-bottom: 1px solid  #222222;
    padding: 0 0 .085em 0; /* for underline */
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
p a:hover {color: #dd971a; border-bottom: 1px solid #dd971a;}
p a.no-underline {border-bottom: none;}
@font-face {
    font-family: 'veneerregular';
    src: url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.eot');
    src: url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.woff') format('woff'),
         url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.ttf') format('truetype'),
         url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.svg#veneerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
h1 {font-size: 1.25em /* 20px */;letter-spacing: 5px; text-align: left;}
h2 {font-size: 1.0625em; text-align: left;}
span.italic {font-size: 1em /* 18px */;}
p {text-align: left;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
h1, h2, h3 {text-align: center;}
h3 {margin-bottom: .5em;}
.text-left {text-align: left;}
}


/* ==================================================================================
   ICONS
   ================================================================================== */
   
/*icomoon*/
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff') format('woff'),
		url('../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* GLYPH */
/* Use the following CSS code if you want to use data attributes for inserting your icons */
.glyph {margin-bottom: -1.2em;}
[data-icon]:before {
    color: #dd971a;
	font-family: 'icomoon';
	font-size: 1.75em;
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* icomoon data-icon key */
/*
mail - &#xe00e;
location - &#xe001;
stack - &#xe000;
map open - &#xe002;
map - &#xe003;
map2 - &#xe003;
phone - &#xe004;
signup - &#xe009;
file - &#xe00d;
newspaper - &#xe010;
link - &#xe00a;
search - &#xe007;
paperclip - &#xe00c;
*/

/* ICON */
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-stack, .icon-location, .icon-map, .icon-map-2, .icon-phone, .icon-tag, .icon-download, .icon-search, .icon-zoom-in, .icon-signup, .icon-link, .icon-flag, .icon-attachment, .icon-file, .icon-envelope, .icon-location-2, .icon-newspaper, .icon-arrow-up-right, .icon-arrow-up-left {
	font-family: 'icomoon';
	font-size: 1.25em;
	text-decoration: none;
	border-bottom: none;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
a.icon-envelope, a.icon-map-2, a.icon-file {padding: 0 .5em 0 .5em;font-size: 1.2em;text-deocration: none;color: #000000;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
a:hover.icon-envelope, a:hover.icon-map-2, a:hover.icon-file {color: /*#aaaaaa;*/#dd971a;}

.icon-stack:before {content: "\e000";}
.icon-location:before {content: "\e001";}
.icon-map:before {content: "\e002";}
.icon-map-2:before {content: "\e003";}
.icon-phone:before {content: "\e004";}
.icon-tag:before {content: "\e005";}
.icon-download:before {content: "\e006";}
.icon-search:before {content: "\e007";}
.icon-zoom-in:before {content: "\e008";}
.icon-signup:before {content: "\e009";}
.icon-link:before {content: "\e00a";}
.icon-flag:before {content: "\e00b";}
.icon-attachment:before {content: "\e00c";}
.icon-file:before {content: "\e00d";}
.icon-envelope:before {content: "\e00e";}
.icon-location-2:before {content: "\e00f";}
.icon-newspaper:before {content: "\e010";}
.icon-arrow-up-right:before {content: "\e011";}
.icon-arrow-up-left:before {content: "\e012";}


/* ==================================================================================
   BUTTON(s)
   ================================================================================== */
/* ---- base (all) ---- */ 
.btn {
	border: none;
	font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.68em;
    text-transform: uppercase;
	letter-spacing: 1px;
	color: inherit;
	background: none;
	padding: 0.625em 2.8125em;
	margin: 1em;
	display: inline-block;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
	-webkit-border-radius: 12px;-moz-border-radius: 12px;-ms-border-radius: 12px;-o-border-radius: 12px;border-radius: 12px;
}
.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.btn {
    font-size: 1em;
    padding: 0.625em 2.1875em;
	margin: 2em 2em;
}
}
/* BUTTON 1 (carousel CTA)
   ======================== */ 
.btn-1 {
    color: #ffffff;
	background: #683926;
	border: 1px solid #683926;
	text-decoration: none;
	-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.btn-1:hover {
	border: 1px solid #fff;
	color: #fff;
	background: none;
}
.btn-1-alt {
    border: 1px solid #fff;
	color: #fff;
	background: none;
	text-decoration: none;
	-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.btn-1-alt:hover {
	border: 1px solid #683926;
	color: #ffffff;
	background: #683926;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.btn-1, .btn-1-alt {-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-delay: 1.5s;}
}
/* BUTTON 2 & (3 - paris)
   ======================== */ 
.btn-2, .btn-3 {
    border: 1px solid #fff;
	color: #fff;
	background: none;
	text-decoration: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 0s;-moz-animation-delay: 0s;-ms-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;
}
.btn-2:hover {
    border: 1px solid #683926;
	color: #ffffff;
	background: #683926;
}
.btn-3:hover {
    border: 1px solid #222222;
	color: #ffffff;
	background: #222222;
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.btn-2, .btn-3 {-webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;}
}
/* BUTTON 4
   ======================== */ 
.btn-4 {
    color: #ffffff;
	background: #683926;
	border: 1px solid #683926;
	text-decoration: none;
	margin: 0;
	margin-top: 1em;
}
.btn-4:hover {
	border: 1px solid #22222;
	color: #fff;
	background: #222222;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
}


/* ================================================================================
   HEADER
   ================================================================================ */

/* ---- base (all) ---- */   
.header {background: #222222;margin: 0 auto;}

/* LOGO
   ======================== */
/* ---- base (all) ---- */  
.logo {
    background-size: 100% 100%;
    width: 10em; /* 160px */
    height: 2.375em; /* 38px */
    display: block;
    position: relative;
    float: right;
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.logo {width: 10.625em; /* 170px */height: 2.5em; /* 40px */float: none;}
}
/* ---- 1024 ( + ) ---- */ 
@media screen and (min-width: 64em){ /* 1024px */ 
.logo {width: 13.125em; /* 210px */height: 2.875em; /* 50px */}
}

/* NAVIGATION
   ======================== */
/* ---- base (mobile only) ---- */
#outer-wrap {position:relative;overflow:hidden;width:100%;}
#inner-wrap {position:relative;width:100%;}
.nav-btm {margin-bottom: 0em;}
.nav-btn {
    display: block;
    position: relative;
    float: left;
    width: 2.375em; /* 38px */
    height: 2em; /* 32px */
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.75;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-btn:hover, .nav-btn:focus {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;
}
#nav {
	z-index:200;
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: left;
	margin-top: 0 !important; /* disables .half-top class on mobile screens */
}
#nav .close-btn {display:none;}
#nav .block {
	z-index: 2;
	position: relative;
	padding: 0.75em 1.25em;
}
#nav ul {
	*zoom:1;
	display:block;
	margin:0 !important; /* enables nav to flush left and top on mobile*/
	padding:0 !important; /* enables nav to flush left and top on mobile*/
}
#nav ul:before,#nav ul:after {content:"";display:table;}
#nav ul:after {clear:both;}
#nav li {
	display: block;
	font-family: "brandon-grotesque",sans-serif;
}
#nav li a {
	display: block;
	color: #dd971a; /* yellow */
    font-style: normal;
    font-weight: 500;
	font-size: 0.85em;
	line-height: 1.35em;
	text-transform: uppercase;
	letter-spacing: 3px;
	outline: none;
	text-decoration: none;
}
#nav li a:hover {
	color: #f4efe6; /* canvas */
	text-decoration: none;
}
/* ---- 720 ( - ) javascript ---- */
@media screen and (max-width: 45em ) { /* MAX-WIDTH 720px */
#nav {position: absolute;top: 0;}
#nav:not(:target) {z-index: 1;height: 0;}
#nav:target .close-btn {display: block;}
#nav .block {position: relative;padding: 0;}
#nav li {position: relative;border-top: 1px solid rgba(255, 255, 255, 0.1);}
#nav li:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}
#nav li a {
    padding: 1.55714em 1.84286em;
    -webkit-transition: all 0.25s ease-in-out 0s;
    -moz-transition: all 0.25s ease-in-out 0s;
    -ms-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.js-ready #nav {
    height: 100%;
    width: 75%;
    background: #222222; /*rgb(62,57,53);*/
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}
.js-ready #nav .block {background:transparent;}
.js-ready #nav .close-btn {display:block;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;}
.js-ready #nav .close-btn:focus,.js-ready #nav .close-btn:hover {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;}
.js-ready #nav {left:-75%;}
.js-ready #inner-wrap {left:0;}
.js-nav #inner-wrap {left:75%;}
.csstransforms3d.csstransitions.js-ready #nav {left:0;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.csstransforms3d.csstransitions.js-ready #inner-wrap {left:0!important;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 500ms ease;-moz-transition:-moz-transform 500ms ease;-o-transition:-o-transform 500ms ease;transition:transform 500ms ease;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.csstransforms3d.csstransitions.js-nav #inner-wrap {-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(75%,0,0) scale3d(1,1,1);-moz-transform:translate3d(75%,0,0) scale3d(1,1,1);-ms-transform:translate3d(75%,0,0) scale3d(1,1,1);-o-transform:translate3d(75%,0,0) scale3d(1,1,1);transform:translate3d(75%,0,0) scale3d(1,1,1);}
.csstransforms3d.csstransitions.js-ready #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition:opacity 300ms 100ms,-webkit-transform 500ms ease;-webkit-transition-delay:ease,0;-moz-transition:opacity 300ms 100ms ease,-moz-transform 500ms ease;-o-transition:opacity 300ms 100ms ease,-o-transform 500ms ease;transition:opacity 300ms 100ms ease,transform 500ms ease;-webkit-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-moz-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-ms-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-o-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;}
.csstransforms3d.csstransitions.js-nav #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.nav-btm {margin-bottom: 1.40625em /* 22.5px */}
.nav-btn {display: none;}
#nav {display: block;text-align: center;}
#nav .block {padding: 0;}
#nav ul {text-align: center;white-space: nowrap;}
#nav li {
    display: inline-block;
    color: #f4efe6; /* canvas */
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#nav li:last-child {border-right: none;}
#nav li a {
    color: #f4efe6; /* canvas */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.125em; /* 2px */
    font-size: 0.8125em;
    border-bottom: 2px solid rgb(34,34,34);
    padding: 0.42857em 0.15714em 0.22857em 0.15714em;
    margin: 0 0.6em;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#nav li a:hover {border-bottom: 1px solid  #dd971a; color: #dd971a; /* canvas */}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
#nav {display: inline-block;float: right;position: relative;}
#nav ul {text-align: right;white-space: nowrap;}
#nav li {
    font-weight: 700;
    padding: 1em; /* for spacing */
    border-right: none;
}
#nav li a {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09375em; /* 1.5px */
    font-size: 0.8125em;
    padding: 0 0 .3em 0; /* for underline */
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
#nav li.is-active a {color: #fff;}
}


/* ================================================================================
   BILLBOARD
   ================================================================================ */

/* ---- base (all) ---- */ 
.billboard {background: #ffffff; color: #222222; margin: 0 auto;}
.bill-img {
    display: inline-block;
    width: 100%;
    width: auto \9; /* IE8 and below */ 
    height: auto;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 746px;
	max-height: 46.625rem;
	/*background-attachment: fixed;
	background-size: cover;*/
}
.bill-img-sm {
    position: absolute;
    top: 0;
    width: 100%;
}
.bill-arrow { /* TEST for animated gif */
    background-size: 100% 100%;
    width: 2.1875em; /* 35px */
    height: 2.625em; /* 42px */
    display: block;
}
.down-arrows {display: none;}
/* ---- 1200 ( + ) large desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.down-arrows {
    display: block;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 2s;-moz-animation-delay: 2s;-ms-animation-delay: 2s;-o-animation-delay: 2s;animation-delay: 2s;
}
.down-arrows a {
	display: block;
	margin: 0 auto;
	width: 2.1875em; /* 35px */
}
.down-arrows img {
    background-size: 100% 100%;
    width: 2.1875em; /* 35px */
    height: 0.8125em; /* 13px */
    display: block;
}
}

/* BILL SLIDE
   ======================== */
/* ---- base (all) ---- */  
.bill-slide {padding-top: 5%;}
.bill-half-slide,
.bill-full-slide {
    overflow: hidden;
    position: relative;
    padding-bottom: 6%;
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-slide {padding-top: 0;}
}
/* ---- 1100 ( + ) large desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
.bill-slide {padding-top: 5%;}
}

/* HEADLINE
   ======================== */
/* ---- base (all) ---- */  
.bill-head {
    color: #f4efe6; /* canvas */
    font-family: 'veneerregular', sans-serif;
    font-size: 7.5em; /* 120px */
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-top: .5em;
    margin-bottom: -.5em;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}

/* SUB-HEADLINE
   ======================== */
/* ---- base (all) ---- */  
.bill-sub {
    font-family: "brandon-grotesque",sans-serif;
    font-size: 1.1em;
    letter-spacing: 1px;
    font-style: italic;
    font-weight: 500;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
.bill-sub-sm {
    font-family: "brandon-grotesque",sans-serif;
    font-size: .8em;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 500;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.bill-sub {font-size: 1.5em /* 24px */;letter-spacing: 2px;font-weight: 400;}
.bill-sub-sm {font-size: 1em /* 24px */;letter-spacing: 1px;font-weight: 400;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-sub {font-size: 2em /* 32px */;letter-spacing: 3px;font-weight: 300;}
.bill-sub-sm {font-size: 1.5em /* 32px */;letter-spacing: 2px;font-weight: 300;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-sub {font-size: 2.75em /* 44px */;letter-spacing: 4px;font-weight: 300;}
.bill-sub-sm {font-size: 2em /* 32px */;letter-spacing: 2px;font-weight: 300;}
}

/* SEPARATOR
   ======================== */
/* ---- base (all) ---- */  
.bill-sep {
    border-bottom: 1px solid;
    height: 1px; /* 22px */
    width: 9.0625em /* 145px */;
    margin: .5em auto 1em;
    display: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-sep {width: 12.1875em /* 195px */;margin: 1em auto 1.5em;display: none;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-sep {width: 15.3125em /* 245px */;margin: 1em auto 1.5em;display: inherit;}
}

/* TEXT
   ======================== */
/* ---- base (all) ---- */  
.bill-text {
    font-family: "brandon-grotesque",sans-serif;
    font-size: 1em;
    line-height: 1.1;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto;
    display: none;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.bill-text {font-size: 1.5em /* 24px */;font-weight: 300;display: none;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.bill-text {font-size: 1.625em /* 26px */;font-weight: 300;display: inherit;}
}

/* LOGO GRAPHIC HEADLINE(s)
   ======================== */
/* ---- base (all) ---- */
.logo-left {
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 129px;
    z-index: 1;
    position: relative;
    float: left;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}
.logo-center {
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 129px;
    z-index: 1;
    margin-bottom: 5em;
    -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;
}

/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.logo-left {max-width: 185px; max-height: 218px; padding-left: 5%;}
.logo-center {margin-top: 10%;}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.logo-left {max-width: 217px; max-height: 255px;}
.logo-center {max-width: 460px; max-height: 202px; margin-top: 6%;} 
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.logo-left {max-width: 285px; max-height: 335px;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.logo-left {max-width: 350px; max-height: 412px; padding-top: 5% !important;} /* countering .bill-slide queries */
.logo-center {max-width: 560px; max-height: 246px; margin-top: 12%;} /* countering .bill-slide queries */
}
/* ---- 1100 ( + ) large desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
}
/* ---- 1200 ( + ) large desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.logo-left {max-width: 435px; max-height: 512px;}
.logo-center {max-width: 660px; max-height: 290px; margin-top: 13%;} /* countering .bill-slide queries */
}


/* ================================================================================
   CONTENT
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.content {background: #ffffff; color: #222222; margin: 0 auto;}
.quote {
    padding-top: 7%;
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: italic;
    font-weight: 500;
    font-size: 1.1875em;
    line-height: 1.65;
    text-align: center;
}
#bottomLeftNav {margin-top: 3em; margin-bottom: 4em;}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.quote {text-align: left;}
#bottomLeftNav {margin-top: 0; margin-bottom: 0;}
}

/* MICRO-LOGOS
   ======================== */
/* ---- base (all) ---- */ 
.micro-logo {background-size: 100% 100%;display: block;}
.micro-logo {width: 160px; height: 143px;margin-top: 0;}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.micro-logo {width: 205px; height: 183px;margin-top: 4%;}
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
.micro-logo {width: 350px; height: 312px;margin-top: 0;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.micro-logo {width: 390px; height: 348px;margin-top: 7%;}
}
/* ---- 1100 ( + ) xlarge desktop ---- */
@media screen and (min-width: 68.75em){ /* 1100px */
.micro-logo {width: 415px; height: 370px;margin-top: 5%;}
.micro-logo {margin-bottom: 4em;}
}
/* ---- 1200 ( + ) xxlarge desktop ---- */
@media screen and (min-width: 75em){ /* 1200px */
.micro-logo {margin-top: 6%;}
}
/* ---- 1400 ( + ) xxxlarge desktop ---- */
@media screen and (min-width: 87.5em){ /* 1400px */
.micro-logo {width: 449px; height: 400px;margin-top: 10%;}
}

/* SECONDARY NAV
   ======================== */
/* ---- base (all) ---- */ 
ul.secnav {
    list-style: none;
    font-family: "brandon-grotesque", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.75em;
    text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	padding-left: 0;
}
.secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.secnav li {text-align: center;position: relative;border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0.1)*/;}
.secnav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;margin-bottom: -13px;}
.secnav li a {
    display: block;
    padding: 1em 1.5em;
    color: #222222;
    text-decoration: none;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
.secnav li a:hover {color: #dd971a; /* yellow */}
.secnav li a.current {color: #dd971a; /* yellow */}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.secnav li {text-align: left;}
.secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0)/*rgba(255, 255, 255, 0)*/;}
.secnav li a:hover {
    /*color: #f4efe6; /* canvas */
    color: #dd971a; /* yellow */
    /*background: #222222;*/
    background: transparent url(../img/global/arrow-hover.png) right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/arrow-hover.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/arrow-hover.svg);
}
.secnav li a.current {
    color: #dd971a; /* yellow */
    background: transparent url(../img/global/arrow-hover.png) right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/arrow-hover.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/arrow-hover.svg);
}
}

/* TERTIARY NAV
   ======================== */
/* ---- base (all) ---- */ 
.ternav {
    list-style: none;
    background: #f4f3f3;
    padding: 0;
    text-transform: none;
}
.ternav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;}
.ternav li a {}
.ternav li a:hover {color: #f4efe6;background: #222222;}


/* ================================================================================
   THUMBS
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.thumbs {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;}
.thumbnail {
    border: 1px solid #c8c8c8;
    max-width: 250px;
    max-height: 250px;
}


/* ================================================================================
   MASONRY
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.masonry-bgd {background: #f4f4f4; color: #222222; margin: 0 auto; padding-bottom: 2.3em;}
#masonry {background: #f4f4f4; color: #222222; width: auto; margin: 0 auto;}
a.load-more {
    /*width: 95%;
    margin: 0 auto;*/
    border-top: solid 1px #c8c8c8; border-bottom: solid 1px #c8c8c8;
    text-align: center;
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 1.4;
	padding: 1em;
	text-decoration: none;
	color: #222222;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
a.load-more:hover {background: #222222;color: #f4efe6;}
.item {
    background: #ffffff;
	display: block;
	float: left;
	/*width: 33.33%;*/
	width: 17.1875em;
	/*width: 350px;*/
	margin: 0 1.40625em 2.8125em 1.40625em;
	border: solid 1px #bfbfbf;
	-webkit-box-shadow: 0 0 5px #bfbfbf;
	-moz-box-shadow: 0 0 5px #bfbfbf;
	box-shadow: 0 0 5px #bfbfbf;
}
.item img {
    width: 100%;
	height: auto;
}
.item-title {
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125em;
    text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	line-height: 1.4;
	text-align: center;
	padding: 2.4em 2em 0 2em;
}
.item-title a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
.item-title a:hover {color: #dd971a;}
.item-subtitle {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
    font-weight: 700;
    font-size: 1em;
    color: #683926;
	display: block;
	line-height: 1.4;
	text-align: center;
	padding: 0 0 .2em 0;
}
.item p {
    text-align: center;
    padding: 0 2em 2em 2em;
}
.item p a {border-bottom: none; font-style: normal; font-weight: normal;}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.item {width: 12.5em;}
.item-title {font-size: 1em; padding: 2.4em 1em 0 1em;}
.item p {font-size: 0.875em}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.item {width: 17.1875em;}
.item-title {font-size: 1.125em; padding: 2.4em 1em 0 1em;}
.item p {font-size: 1em}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.item-title {font-size: 1em; padding: 2.4em 1em 0 1em;}
}
/* ---- 1180 ( + ) xlarge desktop ---- */
@media screen and (min-width: 73.75em){ /* 1180px */
.item {width: 21.875em;}
.item-title {padding: 2.4em 2em 0 2em;}
}


/* ================================================================================
   EMAIL, LOCATIONS & CONTACT
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.action {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;}
.action button {
    border: 0;
    width: 8px;
    height: 15px;
    padding: 15px 0 0 20px;
    background: transparent url(../img/global/arrow-input-gray.png) right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/arrow-input-gray.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/arrow-input-gray.svg);
}
.action input.name, 
.action input.signup,
.contact input.name,
.contact input.signup,
.contact textarea.comments {
    background-color: rgb(255,255,255);
    border: 1px solid #999999;
    padding: 0.8em 1em 0.6em 1em;
    margin: 1em 0 1em 0;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.0625em; /* 1px */
    font-size: 1em;
    color: rgb(34,34,34); /* gray */
}
.contact input.name,
.contact input.signup,
.contact textarea.comments {text-transform: none !important;}
.action input.name {margin-left: 0em; margin-right: 0; width: 100%;}
.action input.signup {width: 91%; float:left;}
.contact input.name,
.contact input.signup,
.contact textarea.comments {width: 100%; float: left;}
#formMessages {
    color: #666666;
    margin: 1em auto 0;
}
hr.dashed {
    display: inline-block;
    border: 0;
    border-top: 1px dashed #c8c8c8;
    margin: 0 0 .25em 0;
    padding: 0;
    width: 70%;
}
.company {
    font-family: "ff-meta-serif-web-pro", serif;
    font-weight: 700;
    text-transform: none;
	font-size: 1.125em;
    text-align: center;
}
.phone, .phone a, .address {
    font-family: "ff-meta-serif-web-pro", serif;
	font-style: normal;
	font-weight: 500;
	font-size: 1.125em;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.website a {
    color: #dd971a;
    font-family: "brandon-grotesque",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
	letter-spacing: 3px;
	display: block;
	text-align: center;
	text-decoration: none;
	-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
}
.website a:hover {color: #222222;}
/* PLACEHOLDER */
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;    }
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.action input.name, 
.action input.signup {width: 30%;}
.action input.name {margin-left: 2.5em; margin-right: .75em;}
.action input.signup {float:none;}
.contact input.name,
.contact input.signup {width: 48%;}
.contact input.name {margin-right: 4%;}
hr.dashed {width: 45%; margin: 0 0 .5em 0;}
.website {font-size: 1.25em}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px */
hr.dashed {width: 30%;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.action input.name, 
.action input.signup {width: 25%;}
hr.dashed {width: 32%;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.action input.name, 
.action input.signup {width: 20%; margin: 0 0 0 0;}
.action input.name {margin-left: 2.3em; margin-right: .75em}
hr.dashed {width: 25%;margin: 0 0 1.5em 0;}
.website {font-size: 1.3em}
}


/* ================================================================================
   COLLAGE
   ================================================================================ */
 
 /* ---- base (all) ---- */  
.collage {
    background: transparent; 
    height: 16.75em /* 268px */;
    margin: 0 auto;
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.collage {height: 25.1875em /* 403px */;}
}
/* ---- 600 ( + ) ---- */
@media screen and (min-width: 37.5em){ /* 600px */
.collage {height: 31.4375em /* 503px */;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.collage {height: 40.25em /* 644px */;}
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.collage {height: 50.3125em /* 805px */;}
}


/* ================================================================================
   FOOTER
   ================================================================================ */

/* ---- base (all) ---- */   
.footer {background: #222222;margin: 0 auto;color: rgb(138,134,128); /* gray */}

/* FOOTER TEXT
   ======================== */
/* ---- base (all) ---- */ 
.footer p {
    font-weight: 500;
    font-style: normal;
    font-size: 0.875em; /* 14px */
    text-align: center;
}
.footer p a {
    font-weight: 500;
    font-style: italic;
    color: rgb(138,134,128); /* gray */
    text-decoration: none;
    padding: 0 0 .1em 0; /* for underline */
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.footer p a:hover {border-bottom: 1px solid #8a8680;}
.facebook {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent url(../img/global/icon-facebook.png) center center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/icon-facebook.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/icon-facebook.svg);
}
.footer p a .social-link {
    text-decoration: none;
    padding: 0;
    opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}
.footer p a.social-link:hover {
    opacity: .5;
    border-bottom: 1px solid #222222;;
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
.footer p {text-align: left;}
}

/* FOOTER EMAIL SIGNUP
   ======================== */
/* ---- base (all) ---- */ 
.footer button {
    border: 0;
    width: 26px;
    height: 27px;
    background: transparent url(../img/global/arrow-input.png) right center no-repeat;		
    background-image: -webkit-linear-gradient(transparent, transparent), url(../img/global/arrow-input.svg);
    background-image: linear-gradient(transparent, transparent), url(../img/global/arrow-input.svg);
}
input.signup {
    background-color: rgb(34,34,34);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.8em 1em 0.6em 1em;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625em; /* 1px */
    font-size: 0.8125em;
    color: rgb(138,134,128); /* gray */
    width: 85%;
    width: 75%\9; /* IE8 and below */  
}
/* PLACEHOLDER */
/*input:focus::-webkit-input-placeholder {color: transparent;}*/
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.2s 0.2s ease; 
  opacity: 0;
}
/* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */
::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;}
:-ms-input-placeholder {  color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;    }


/* ================================================================================
   NOTES
   ================================================================================ */

/* SVG FIXES
   ======================== */  
/* 
HTML option
Swap out the element source with JavaScript if there's an error:
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">
 
CSS option 1 (EASIEST)
"Invisible Gradient" technique to support SVG with PNG fallback. It is CSS-only, does not require javascript and it works cross-browser. 
http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique  
http://pauginer.github.io/invisible-gradient-technique/    

CSS option 2
.no-inlinesvg and .inlinesvg (used with Modernizer from Boilerplate) before the selector with your background image to fix .png / .svg issues. 
http://www.gsdesign.com/blog/practical-svg-usage
*/

/* IE FIXES
   ======================== */  
/* 
APPEND \9; to the end of your style. For example ... \9; /* IE8 and below */