/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100%; font: inherit; vertical-align: baseline; }
#admin { position: fixed; bottom: 0; width: 98%; padding: 1%; background: rgba(0,0,0,0.5); font-size: 13px; color: #FFF; text-align: center; clear: both; }
body { -webkit-text-size-adjust: 100%; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; border: 0; }

/* GENERAL */
body { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 100%; color: #525B52; line-height: 1.5; background: #FFF; margin: 0; }
h1, h2, h3  { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; margin: 0; }
h1 { font-size: 1.8em; margin: 0 0 0.5em 0; }
h2 { font-size: 1.5em; margin: 0 0 0.83em 0; }
h3 { font-size: 1.125em; margin: 0 0 0.5em 0; }
table {width: 100%; border-collapse: collapse; margin: 0 0 0.5em 0; }
th { color: #FFF; text-align: left; padding: 0.5em 1em; background: #B22222; }	
td { vertical-align: top; padding: 1em; border-bottom: 1px dashed #000; }
p { margin: 0 0 0.5em 0; }
ul { list-style: disc; margin: 0 0 0.5em 1.5em; }
ul li { margin: 0 0 0.25em 0; }
ol { list-style: decimal; margin: 0 0 0.5em 1.5em; }
ol li { margin: 0 0 0.25em 0; }
blockquote { color: #757575; padding: 0; margin: 0 0 0.5em 0; }
blockquote p { margin: 0 0 0.5em 0; }
blockquote cite { font-style: normal; }
figure { text-align: center; margin: 0 0 0.5em 0; }
figcaption { font-size: 0.875em; font-style: italic; color: #666; }
hr { border: 0; border-bottom: 1px solid #4c5a52; margin: 1.5em 0 1.5em 0; }
.nobullet { list-style: none; margin: 0 0 1em 0; }
a { color: #9E0622; text-decoration: none; }
b,strong { font-weight: bold; }
em,i { font-style: italic; }
small { font-size: 0.8em; }

/* GLOBAL HEADER */
.Xtop { background: #FFF; overflow: hidden; clear: both; }
.Xtop-header { max-width: 1280px; padding: 1em; margin: 0 auto; overflow: hidden; clear: both; }

.logo { float: left; width: 60px; height: 60px; margin-right: 5%; }
.logo img { display: block; width: 60px; height: 60px; }


.hello-links { font-size: 0.875em; list-style: none; line-height: 1.5; margin: 0 0 1.25rem 0; }
.hello-links li { display: inline-block; padding-right: 1em; border-right: 1px solid #CCC; margin: 0 1em 0 0; }
.hello-links li:last-child { border: 0; }
.hello-links a { color: #495F53; text-decoration: none; }

.menu-toggle { display: none; }
.menu { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: 700; list-style: none; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.menu li { display: inline-block; padding-right: 1em; border-right: 1px solid #CCC; margin: 0 1em 0 0; }
.menu li:last-child { border: 0; }
.menu li a { color: #000; text-decoration: none; }
.menu li a:hover, .menu li a.current { color: #495F53; }

/* CONTENT LAYOUT */

/* old styles */
.Xrow { background-color: #FFF; clear: both; }
.Xrow-black { background-color: #000; }
.Xrow-light { background-color: #DEDDD9; }
.Xrow-dark { background-color: #BDBAB5; }
.Xrow-instagram { background-color: #f2f1ef; }
.Xrow-clear { overflow: hidden; }
.Xcontent { max-width: 1280px; margin: 0 auto; }
.Xcontent-pad { padding: 2em 1.5em;  }
.Xcontent-pad-fix { padding: 0 1.5em 2em 1.5em; }
	.content-light { background-color: #FFF; }
	.content-lighter { background: #F2F1EF; }
	.content-medium { background-color: #BDBAB5; }
	.content-darkish { background-color: #CECBC6; }
	.content-dark { background-color: #000; }
	.content-instagram { background-color: #f2f1ef; }
	.content-inner { width: 70%; margin: 0 auto; }
	.content-map { position: relative; }
	.content-map img { display: block; width: 100%; height: 100%;}
	.content-map-box { position: absolute; left: 1rem; top: 0; width: 270px; min-height: 270px; color: #000; background: #FFF; background: rgba(255,255,255,0.9); padding: 1em; }
	.content-map-box a { color: #000; }
	.content-map-box a.map-link:after { content: " >"; color: #9E0622;  }
	.content-ticker { background: #AA0015; }

/* new styles */
.row { background-color: #FFF; clear: both; }
.row-black { background-color: #000; }
.row-dark { background-color: #d5d3cf; }
.row-light { background-color: #DEDDD9; }
.row-lighter { background: #F2F1EF; }
.row-medium { background-color: #BDBAB5; }
.row-darkish { background-color: #CECBC6; }
.row-nav { background: #FFF; }
.row-footer { background-color: #FFF; }

.nav, .header, .section, .footer { max-width: 1280px; padding: 1rem; margin: 0 auto; }
.nav { overflow: hidden; clear: both; }
.header {}
.section {  }
.section.page-top { padding: 0; } 
.section-pad { padding: 1em 0; }
.section-narrow {}

.footer {}

/* GRIDS */
.grid { margin-left: -2%; margin-bottom: 2rem; overflow: hidden; clear: both; }
.grid-pad { padding: 1em; background: #FFF; }
.grid-link { left:0;top:0;right:0;bottom:0;display: block; width: 100%; height: 100%;  }
.grid-heading a { color: #000; }
.grid-heading::after { content: " >"; color: #9E0622;  }
.grid img { display: block; width: 100%; }
.grid-title { position: absolute; left: 0; bottom: 1em; max-width: 300px; display: inline-block; line-height: 24px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; background: #FFF; background: rgba(255,255,255,0.8); padding: 0.5em 1em; margin-right: 1em; }
.grid-title span { font-size: 1.5em; color: #000; }
.grid-title span::after { content: ">"; color: #9E0622;  }
.grid-title-normal { color: #000; padding: 1em; background: #FFF; }
.grid-title-date { color: #000; }
.grid-title-date::after { content: " >"; color: #9E0622; }
.grid2 { position: relative; float: left; width: 48%; background: #FFF; margin-bottom: 1.5em; margin-left: 2%; }
.Xgrid2-1 { margin-right: 2%; }
.grid2-trans { background: transparent; }
.grid2desc { padding: 0.5rem 0 0 0; background: transparent; }
.grid2desc h2 { font-size: 1.125em; color: #000; margin: 0; }
.grid2desc p { margin: 0; }
.grid4 { position: relative; float: left; width: 23%; margin-bottom: 1em; margin-left: 2%;  }

.grid-people { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr; margin: 0 0 2rem 0; }
.grid-people-thumb {}
.grid-people-desc {}
.grid-people-desc h2 { font-size: 1.125em; color: #000; margin: 0; }
.grid-people-desc p { margin: 0; }

/* masonry for latest landing page */
.m { position: relative; margin: 0 0 0 -2%; }
.m-sizer { width: 25%; }
.m-item a.m-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.m-item img { display: block; width: 100%; }

.m-item1 { width: 23%; height: 0; padding-bottom: 23%; background: #FFF; margin: 0 0 2% 2%; }
.m-item2 { width: 48%; height: 0; padding-bottom: 48%; margin: 0 0 2% 2%; }
.m-item-news { background: #333; }
.m-item-news:hover { background: #555; }
.m-item-work { background: #666; }
.m-item-work:hover { background: #777; }

/* masonry for work detail page */
.w { position: relative; margin: 0 0 0 -2%; }
.w-sizer { width: 50%; }
.w-item img { display: block; }
.w-item figure { margin: 0; }
.w-item { float: left; width: 48%; margin: 0 0 2% 2%; }
.w-item-alt { background: rgba(255,255,255,0.8); margin-bottom: 0; }
.w-first { margin-top: -2em; }

/* PAGE HEADER */
.page-top { position: relative; min-height:32vh;max-height:60vh; overflow:hidden; background-position: center; background-repeat: no-repeat; background-size: cover; clear: both; }
.page-top img { display: block; }
.page-top-no-image { position: relative; min-height:15vh;max-height:25vh; clear: both; }
.page-header {  position: relative; padding: 1em 1.5em; background: #000; background: rgba(0,0,0,0.8); }
	.page-header-heading { font-size: 1.5em; color: #FFF; line-height: 1; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
	.page-header-heading a { color: #FFF; text-decoration: none; }
	.page-header-subheading { display: block; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; color: #FFF; letter-spacing: normal; line-height: 1.2; text-transform: none; margin: 1em 0 0 0; }
	time.page-header-date { display: block; color: #FFF; text-transform: uppercase; margin-top: 0.75em; }

.page-summary-container { position:absolute; right:0; bottom:0; left:0; margin-top: 0;}
.page-header-summary-alt { margin: 0; }
.page-header-summary-alt p { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 1.5em; color: #000; padding: 0.75em; margin: 0; }
.page-header-summary-alt.page-header-summary-short { margin-top: 1em; margin-left:0; }

.page-intro { color: #FFF; }
.page-intro p { margin: 1rem 0 1rem 0; }
.page-intro p:first-child { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 1.5em; }

/* DIFFERENT HEADING STYLES */
.heading-light { font-weight: 400; color: #FFF; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 1.5em 0; }
.heading-light a { color: #FFF; }
.heading-black { color: #000; text-transform: uppercase; letter-spacing: 1px; }
.heading-dark { font-weight: 400; color: #AA000A; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 1.5em 0; }
.heading-dark a { color: #AA000A; }
.heading-light span:after, .heading-dark span:after { content: " >"; color: #9E0622; }
.heading-center { text-align: center; }
.heading-small { font-size: 1em; color: #000; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 1rem 0; }
.heading-also { color:#FFF; text-align:center; text-transform: uppercase; letter-spacing: 1px; background:#000; padding: 1em; margin:0; }
.heading-related { color:#FFF; text-align:center; text-transform: uppercase; letter-spacing: 1px; background:#000; margin:0 0 1.5em 0; }
.heading-w { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1.063em; font-weight: bold; color: #525B52; margin: 0;}

.home-header {  padding: 1rem 0 2rem 0; }
.home-heading { color: #FFF; text-align: center; line-height: 1.2; margin: 1rem 0; }
.home-heading a { color: #FFF; text-decoration: none; }
.home-heading span { display: block; }
.home-heading span:after { content: " >"; color: #9E0622; }
.home-message { list-style: none; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; color: #FFF; text-align: center; padding: 1em 0; margin: 0 0 0 1em; }
.home-message a { color: #FFF; text-decoration: none; }


/* WORK-NEWS FILTER and SEARCH */

.search { position: relative; float: right; width: 32px; text-align: right; margin-top: -0.25em; margin-right: 5px; }
.search-toggle { display: inline-block; width: 32px; height: 32px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 0.813em; line-height: 32px; color: #FFF; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; text-align: right; background: #666;  }
.search-toggle img { display: inline; width: 32px; height: 32px; }
#search_show { display: none; z-index: 999999; }
.search-stuff { position: absolute; top: 32px; right: 0; width: 292px; }
input[type=search].keywords { font-size: 16px; width: 100%; height: 32px; border: 0; border-radius: 0; -webkit-appearance: none; }
::-webkit-input-placeholder { font-style: italic; }
:-moz-placeholder { font-style: italic; }

.filter { position: relative; float: right; width: 100px; text-align: right; margin-top: -0.25em; }
.filter-toggle { display: block; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 0.813em; line-height: 32px; color: #FFF; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; text-align: right; padding: 0 1em; background: #666; }
.filter-toggle:after { content: " >"; }
#filter_show { display: none; z-index: 999999; }
.filter-stuff { position: absolute; top: 32px; right: 0; width: 288px; }
.filter-list { text-align: left; padding: 10px; line-height: 2; background: #FFF; margin: 0; }
.filter-list dt { float: left; width: 120px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; color: #425968; text-transform: uppercase; letter-spacing: 1px; clear: left; }
.filter-list dt:after { content: " >"; }
.filter-list dd { margin-left: 120px; overflow: hidden; }
.filter-list a { color: #000; }


/* GENERAL CONTENT BITS */
.divider { width: 23.5%; margin: 3em 0 1rem 0; }
.dfirst { margin: 0 1em 2em 0}
.d1 { border-bottom: 10px solid #339680; margin-bottom: 1em; }
.d2 { border-bottom: 10px solid #FBB034; margin-top: 0; margin-left: 25.5%; }
.d3 { border-bottom: 10px solid #9B0058; margin-left: 51.0%; }
.d4 { border-bottom: 10px solid #425968; margin-left: 76.5%; }
.content-intro { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 1.125em; }

.about-intro { font-size: 1.25em; color: #000; }
.about-intro p { margin: 0 0 0.75em 0; }
.news-story { max-width: 600px; } 
.quotes { margin: 0 0 1em 0; overflow: hidden; clear: both; }
.quotes-image { float: left; width: 25%; margin-right: 1em; }
.quotes-description { overflow: hidden; }

.clients-list { list-style: none; margin: 0 0 1em 0; }
.clients-list a { color: #000; }
.clients-list a:after { content: " >"; color: #9E0622; }
.toggleMore { display: inline-block; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 0.813em; color: #000; text-transform: uppercase; letter-spacing: 1px; padding: 0.5em 1em; background: #FFF; }
.toggleMore:after { content: " >"; color: #9E0622; }
.toggleContent {  }
.cta-right { text-align: right; }

.clearfix { display:block; width:100%; clear: both; }

/* PAGINATION */
.pagination { width: 100%; list-style: none; text-align: right; margin: 0 0 2em 0; overflow: hidden; clear: both; }
.pagination li { display: inline-block; margin: 0 0.15em; }
.pagination a { display: inline-block; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-size: 0.8em; line-height: 32px; color: #FFF; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; text-align: right; padding: 0 1em; background: #666; }
.prev:before { content: "< "; }
.next:after { content: " >"; }


/* FOOTER */
.footer-social { float: right; text-align: right; list-style: none; margin: 0; }
.footer-social li { display: inline-block; width: 24px; margin: 0 0 0.25em 0.5rem; }
.footer-social a { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; text-decoration: none; color: #FFF; background: #000; }
.footer-social img { display: block; width: 24px; height: 24px; } 
.footer-logo { float: left; margin-right: 1em; }
.footer-logo img { width: 60px; height: 60px; }
.footer-links { font-size: 0.8em; list-style: none; margin: 0; clear: both; }
.footer-links li { display: inline-block; margin: 20px 1em 0 0; }
.legal { font-size: 0.8em; margin: 0; }
.legal a { color: #525B52; }

/* BITS */
#to_the_top { display: none; position: fixed; cursor: pointer; background: #000; width: 60px; height: 60px; line-height: 60px; text-align: center; bottom: 10px; right: 10px; color: #FFF; z-index: 9999; }
.slides { margin: 0 -1.5em 1em -1.5em; }
.slide { position: relative; }
.slide img { width: 100%; }
.slide-title { position: absolute; left:0; bottom: 1em; max-width: 240px; display: inline-block; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; color: #000; padding: 10px; background: #FFF; background: rgba(255,255,255,0.8); }
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 0;  }
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.offscreen { position: absolute; left: -999em; }

/* MEDIA QUERIES */
@media screen and (max-width: 1024px) {
.page-header-summary-alt { margin: 10em 0em 0 0em; }
.page-header-summary-alt p { font-size: 1.25em; }
.grid-title span { font-size: 1.25em; }
.page-intro p:first-child { font-size: 1.25em; }
}

@media screen and (max-width: 900px) {
.contact-text { font-size: 0.8em; }		
}

@media screen and (max-width: 800px) {

.content-pad { padding: 2em 1em; }
.content-pad-fix { padding: 0 1em 2em 1em; }
.page-header { padding: 1em 1em; }

.slides { margin: 0 -1em 1em -1em; }
.content-map-box { left: 1em; width: 256px; }
.page-header-summary { margin: 19em 0em 0 0em; }
.page-header-summary-alt { margin: 10em 0em 0 0em; }
.page-header-summary-short { margin-top: 4em; }
.grid4.latest .grid-title { line-height: 20px; }
.grid4.latest .grid-title span { font-size: 1em; }
.footer-links { float: none; clear: both; }
}		

@media screen and (max-width: 767px) {
.section-pad { padding: 1em 0; }
.page-top { background-size: auto 384px; }
.page-header-summary-alt { width: auto;  }
.page-header-summary-alt p { font-size: 1.063em;  }
.page-header-summary { width: auto;  }
.heading-w { font-size: 0.875em; }
.content-inner { width: 100%; }
.grid4 { width: 48%; }
.grid4:nth-of-type(odd) { clear: left; }
.grid4-1 { clear: left; }
.grid4-3 { clear: left; }
.grid4.insta-item { width: 23%; }
.grid4.insta-item:nth-of-type(odd) { clear: none; }
.grid4.latest img { width: 50%; }
.grid4.latest .grid-title { left: 50%; line-height: 18px; }
.grid4.latest .grid-title-noimage { left: 0; }

.grid4.services img { display: none; }
.grid4.services .grid-title { position: relative; bottom: 0; min-width: 75%; max-width: 100%; background: transparent; margin: 0.25em 0; }
.grid4.services .grid-title span { font-size: 1.2em; color: #FFF; }
.grid4.services .grid-title span::after { content: " >"; color: #FFF;  }

.m-sizer { width: 50%; }
.m-item1 { width: 48%; height: 0; padding-bottom: 48%; }
.m-item2 { width: 48%; height: 0; padding-bottom: 48%; }

.quotes-image { float: none; width: 160px; margin-bottom: 0.5em; }

.grid-people { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; margin: 0 0 2rem 0; }
.grid-people-thumb { float: left; width: 40%; margin-right: 1rem; }
.grid-people-desc { overflow: hidden; }

}


@media screen and (max-width: 595px) {
body { font-size: 90%; }
.hello-links { line-height: 22px; margin: 0; }
.hello-links li { display: block; border: 0; }
.menu-toggle { display: block; float: right; width: 30px; height: 30px; margin-top: 30px; }
.menu-toggle img { display: block; width: 30px; height: 30px; }
#menu { display: none; }
.menu { padding: 0 1em; background: #000; border-top: 10px solid #FFF; margin: 0 -1rem 0 -1rem; overflow: hidden; clear: both; }
.menu li { display: block; ; padding: 0; margin: 0; border: 0; border-bottom: 1px solid #FFF; }
.menu li:last-chile { border: 0; }
.menu li a { display: block; color: #FFF; padding: 1em 0; text-decoration: none; background: #000; }
.menu li a:hover { color: #495F53; }
.grid2 { width: 98%; }
.w-sizer { width: 100%; }
.w-item { float: left; width: 98%; }
#to_the_top { bottom: 40px; width: 30px; height: 30px; background: transparent; }
}		

@media screen and (max-width: 480px) {

.page-header-subheading { font-size: 16px; }
.home-header {  padding: 2em 0; }
.home-heading { font-size: 1.8em; }
.heading-light { margin: -0.5em 0 1em 0; }
.heading-dark { margin: -0.5em 0 1em 0; }
.grid4 { width: 98%; }
.grid4.insta-item { width: 48%; }
.m-sizer { width: 100%; }
.m-item1 { width: 98%; height: 0; padding-bottom: 98%; clear: both; }
.m-item2 { width: 98%; height: 0; padding-bottom: 98%; }

.m-item.latest img { width: 50%; }
.m-item.latest .grid-title { left: 50%; line-height: 18px; top: 1em; bottom: auto;  }
.m-item.latest .grid-title span { font-size: 1em; }
.m-item.latest .grid-title-noimage { left: 0; }
.m-item1.latest { width: 98%; height: 0; padding-bottom: 49%; }
.m-item2.latest { width: 98%; height: 0; padding-bottom: 49%; }

.grid4.blog { position: relative; background: #FFF; }
.grid4.blog img { width: 50%; }
.grid4.blog .grid-title-normal { position: absolute; left: 50%; line-height: 18px; top: 1em; bottom: auto;  }



.search-stuff { position: absolute; top: 32px; right: 0; width: 187px; }
.grid-title span { font-size: 1em; }
.contact-text { font-size: 1em; }
}

@media screen and (max-width: 479px) {
.grid4.insta-item { width: 48%; }
.footer-social { max-width: 120px; }
}