/*
Theme Name: Hasenstab Architects 2018
Theme URI: http://dancollinsdesign.com
Description: The 2018 Hasenstab Architects Website
Author: Nicholas Rhodes | Daniel Collins Design
Version: 1
*/


/*CSS Reset*/
html, body, div, span, applet, object, iframe,
p, pre, abbr, acronym, address, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
tt, var, 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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3{margin: 0; padding: 0; font-weight: normal;}

img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

a{color: #9ccb3c; text-decoration: none}
a:hover {color: #000; text-decoration: none;}
a:hover, input#searchsubmit:hover{cursor: pointer;}


p{
margin: 0 0 20px 0;
}

.imageright {
text-align: right;
}

img{max-width: 100%; height: auto}

.clear{clear: both}

/*End of Reset*/
html, body{padding: 0; margin: 0;}
body{font-size: 16px; line-height: 1.4em; background-color: #fff; overflow-x: hidden; font-family: 'proxima-nova', sans-serif; font-weight: 300;}
.wrap, #latest-news{width: 92%; max-width: 1152px; margin: 0 auto; padding: 0 4%; position: relative; clear: both;}
.news-wrap{max-width: 770px}

#hero{position: absolute; top: 0; z-index: 10; width: 100%; background: transparent url('images/nav-shadow.png') top left repeat-x; min-height: 159px;}
#hero nav{padding-top: 40px; height: 85px;}
#hero .logo{width: 100px; height: 85px; float: left;}
#hero .wrap{position: static;}
.menu-logo{display: none; position: relative; z-index: 100}

#primary-nav{display: none; list-style-type: none; margin: 0; padding: 145px 0 0 0; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,.9); width: 100%; height: 100vw;}
#primary-nav a{display: block; border-bottom: 1px solid #e1e1e1; max-width: 765px; margin: 0 auto; color: #9ccb3c; font-size: 3.75em; padding: 15px 0; font-weight: 300; line-height: 1em; transition: all .5s}
#primary-nav a:hover{color: #546270}
#primary-nav li{display: block; text-align: center;}

#mobile{position: relative; display: block; z-index: 15; width: 44px; height: 44px; background: transparent url('images/nav-icons.png') 0 15px no-repeat; float: right; margin-left: 10px; margin-top: 12px;}
#mobile.active{background-position: 0 -60px}

.screen-reader{display: none}

#search-form{float: right; z-index: 12; display: block; width: 83%;}
#search-form .form{display: none}
#search-form.active{background-color: rgba(0,0,0, .3); overflow: hidden;}
#search-form label .screen-reader-text{display: none}
#search-form input[type='submit']{display: none}
#search-form input[type='search']{display: block; height: 70px; width: 80%; margin-left: 2%; background-color: transparent; border: 0; float: left; font-size: 2em; color: #fff}
#search-form #search-toggle{float: right; display: block; font-size: 1.125em; color: #fff; padding: 27px 2%}
#search-form input[type='search']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 1em;
	color: #fff;
	opacity: 1;
}
#search-form input[type='search']::-moz-placeholder { /* Firefox 19+ */
  font-size: 1em;
	color: #fff;
	opacity: 1;
	font-family: 'Proxima Nova', sans-serif;
}
#search-form input[type='search']:-ms-input-placeholder { /* IE 10+ */
  font-size: 1em;
	color: #fff;
	opacity: 1;
}
#search-form input[type='search']:-moz-placeholder { /* Firefox 18- */
  font-size: 1em;
	color: #fff;
	opacity: 1;
}

#project-news-hero{position: relative; line-height: 0; margin-bottom: 115px;}
#hero-image{position: relative; z-index: 1; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center}
#hero-image img{display: block; margin: 0 auto;}
#project-news-hero #hero-image img{visibility: hidden;}
#project-news-hero .wrap{position: static;}
#project-tag{position: absolute; bottom: 0; z-index: 3; background-color: #acd03a; line-height: 1.3em;}
#project-tag h2{font-size: 1em; font-weight: bold}
#project-tag a{display: block; transition: all .5s; color: #546270; width: 230px; display: block; padding: 22px 20px}
#project-tag a:hover{color: #fff}
#project-tag span.fa{font-size: 1.125em; display: block; float: right; position: relative; top: 1px;}

#general-hero, #news-hero, #search-hero, #expertise-hero{position: relative; background-repeat: no-repeat; background-size: cover; background-position: top center; line-height: 0; margin-bottom: 0; height: 160px; max-width: 100%; overflow: hidden}
#general-hero #hero-image img{height: 160px; width: auto; max-width: inherit}
#news-hero, #search-hero{background-color: #98a1a9}
.single-post #hero{background-image: none}
#expertise-hero{height: auto}
#general-hero img{visibility: hidden}
#expertise-hero img{visibility: hidden; min-height: 200px;}

#latest-news{position: absolute; bottom: 0; padding: 0;  z-index: 2;}
#latest-news .news-wrap{display: block; float: right; width: 38%; padding: 30px 4.2%; background-color: rgba(172,208,58,.85)}
#latest-news h3{font-size: 1em}
#latest-news h3 a{display: block; font-size: 1.375em; margin-bottom: 10px; font-weight: bold; color: #fff; line-height: 1.3em; text-transform: uppercase; transition: all .5s;}
#latest-news ul{padding: 0; margin: 0; list-style-type: none}
#latest-news h4{margin: 0}
#latest-news ul li{display: block;}
#latest-news ul li a{color: #fff; display: block; font-size: 1.125em; border-top: 1px solid #fff; padding: 15px 0; font-weight: 400; line-height: 1em; transition: all .5s;}
#latest-news ul li a:hover, #latest-news h3 a:hover{color: #546270}
#latest-news span.fa{font-size: 1.111em; margin-right: 10px; line-height: .3em; position: relative; top: 1px;}

#latest-news h4 a{display: block}
#latest-news h4 a span{display: table-cell}
#latest-news h4 a span.fa{width: 15px;}


#content-links .wrap{display: table; margin-bottom: 115px;}
#our-work, #our-expertise{display: table-cell; width: 48%; vertical-align: top; padding: 42px 3%; position: relative;}
#our-work, #our-expertise{padding: 0}
#our-work .innerWrapper, #our-expertise .innerWrapper{padding: 42px 10%;}
#content-links .spacer{display: table-cell; width: 4%;}
#content-links h2{font-size: 1em}
#content-links h2 a{position: relative; z-index: 2; color: #fff; font-size: 2em; font-weight: bold; text-transform: uppercase; line-height: 1.3em; padding-bottom: 20px;}
#content-links ul{position: relative; z-index: 2; margin: 0; padding: 0; list-style-type: none}
#content-links ul li{border-top: 1px solid #94999e}
#content-links ul li:last-child{border-bottom: 1px solid #94999e}
#content-links a{display: table; color: #fff; font-size: 1.375em; padding: 13px 0; transition: all .5s;}
#content-links a:hover{color: #9ccb3c}
#our-work ul{max-width: 240px;}
#our-expertise ul{max-width: 325px;}
#content-links span.fa{display: table-cell; width: 20px; font-size: 1.091em; position: relative; top: 1px;}
.overlay{position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;}

#ctas{clear: both}
#ctas .cta{overflow: hidden; height: 400px; margin-bottom: 30px; position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover;}
#ctas .cta a{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all .5s;}
#ctas .cta h3{width: 92%; max-width: 1152px; margin: 0 auto; padding: 230px 4% 0 4%; color: #fff; line-height: .5em; text-transform: uppercase; font-size: 3.875em; font-weight: bold; transition: all .5s;}
#ctas .cta .text{display: block; float: left;}
#ctas .cta-Right .text{float: right;}
#ctas .cta a:hover{background-color: rgba(255,255,255,.6);}
#ctas .cta a:hover h3{color: #546270}
#ctas .cta span.fa{display: inline-block; margin-left: 25px; font-size: 1.177em; position: relative; top: 5px;}
#ctas .background-image{width: 100%; height: 100%; transition: all .5s; background-size: cover;}
#ctas .cta:hover .background-image, #ctas .cta:focus .background-image{transform: scale(1.02)}

#ctas.general-cta .cta{margin: 0;}

footer{background: #546270 url('images/ha-footer.png') top left no-repeat; padding: 70px 0 50px 0; overflow: hidden;}
footer .nav{margin-left: 0%; float: left; width: 17%}
#footer-nav{list-style-type: none; margin: 0; padding: 0}
#footer-nav li a{color: #9ccb3c; font-weight: bold; font-size: 1.125em; text-transform: uppercase; transition: all .5s;}
#footer-nav li a:hover{color: #fff}
.contact-info{float: left; width: 50%; color: #fff;}
.contact-info h4{color: #fff; line-height: 1.3em; font-size: 1em; margin: 0; font-weight: bold}
.contact-info .address:nth-child(1){width: 35%; float: left;}
.contact-info .address:nth-child(2){width: 37%; float: left;}
.contact-info .address a{color: #9ccb3c}
.contact-info .address span.fa{margin: 10px 10px 0 0}
footer .social{clear: both; padding-top: 30px;}
footer .social ul{margin: 0; padding: 0; list-style-type: none; padding-top: 30px; border-top: 1px solid #858c92; width: 100%; }
footer .social ul li{display: inline-block; line-height: 1.3em; margin-right: 20px;}
footer .social ul li a{font-size: 1.438em; color: #9ccb3c; transition: all .5s;}
footer .social ul li a:hover{color: #fff}
.awards{width: 23%; float: right;}

#work-main{position: relative;}
#work-main .wrap{display: table}
#work-main .work-links{display: table-cell; width: 30%; padding: 55px 0; background-color: #9ccb3c}
#work-main .work-info{display: table-cell; vertical-align: middle; width: 70%; padding: 30px 0px 0px 18%; background-color: #fff; font-size: 1.375em; color: #546270; position: relative; z-index: 1; line-height: 1.3em;}
#work-main .work-info-sub{font-size: 1em;}
#work-main .work-info-sub h2{font-size: 1.375em; line-height: 1.3em; margin-bottom: 20px;}
#work-main .work-info-sub p{font-size: 1.1em; line-height: 1.5em;}

.work-links h1{position: relative; margin-bottom: 20px; z-index: 2; color: #fff; font-size: 2em; font-weight: bold; text-transform: uppercase; line-height: 1.3em}
.work-links ul{position: relative; z-index: 2; margin: 0; padding: 0; list-style-type: none; margin-right: 20%}
.work-links ul li{border-top: 1px solid #d0ec96}
.work-links ul li:last-child{border-bottom: 1px solid #d0ec96}
.work-links a{display: block; color: #fff; font-size: 1.375em; padding: 13px 0; transition: all .5s;}
.work-links a span{font-size: 1.091em; position: relative; top: 2px; margin-right: 10px;}
.work-links a:hover, .work-links a.active{color: #546270}
.overlay-work{width: 50%; background-color: #9ccb3c; position: absolute; top: 0; bottom: 0;}


#work-feature{position: relative; line-height: 0; background-size: cover; background-repeat: no-repeat; background-position: top center}
#work-feature .hero-image{position: relative; z-index: 1; width: 100%;}
#work-feature .hero-image img{visibility: hidden}
#work-feature .wrap{position: static;}
#work-feature .project-tag{position: absolute; bottom: 0; z-index: 3; line-height: 1.3em}
#work-feature .project-tag h2{color: #fff; font-weight: bold; font-size: 2em; width: 80%; display: block; padding: 0; line-height: 1.3em; transition: all .5s;}
#work-feature .project-tag .category{font-size: .875em; color: #9ccb3c; text-transform: uppercase; font-weight: bold; display: block; margin-bottom: 20px;}
#work-feature .project-tag a:hover h2{color: #9ccb3c}
.overlay-feature{background-color: rgba(84, 98, 112, .8); position: absolute; bottom: 0; height: 150px; width: 49%; z-index: 2;}



#project-hero{position: relative; line-height: 0; margin-bottom: 115px; background-size: cover; background-position: top center; background-repeat: no-repeat;}
#project-hero .hero-image{position: relative; z-index: 1; width: 100%;}
#project-hero .hero-image img{display: block; margin: 0 auto; visibility: hidden}
#project-hero .project-tag{position: absolute; bottom: 30px; z-index: 3; line-height: 1.3em; max-width: 46%;}
#project-hero .project-tag h3{color: #9ccb3c; font-size: 1.125em; text-transform: uppercase; font-weight: bold}
#project-hero .project-tag h2{color: #fff; font-weight: bold; font-size: 3.125em; width: 90%; display: block; padding: 0; line-height: 1.1em}
#project-hero .overlay-feature{background-color: rgba(84, 98, 112, .8); position: absolute; bottom: -50px; height: 290px; width: 49%; z-index: 2;}

#news-featured-hero{position: relative; line-height: 0; margin-bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: top center;}
#news-featured-hero .hero-image{position: relative; z-index: 1; width: 100%; min-height: 310px;}
#news-featured-hero .hero-image img{visibility: hidden}
#news-featured-hero .wrap{position: static;}
#news-featured-hero .project-tag{position: absolute; bottom: 30px; z-index: 3; line-height: 1em; max-width: 50%}
#news-featured-hero .project-tag h2{color: #fff; font-weight: bold; font-size: 2em; width: 90%; display: block; padding: 0; line-height: 1em}
#news-featured-hero .overlay-feature{background-color: rgba(84, 98, 112, .8); position: absolute; bottom: 0px; height: 150px; width: 49%; z-index: 2;}
#news-featured-hero .date, #news-featured-hero .categories h4{color: #abd35e; float: left; font-size: 1.125em;}
#news-featured-hero .categories{list-style-type: none; margin: 5px 0 0 0; padding: 0;}
#news-featured-hero .categories li{display: inline-block; color: #abd35e;  margin-right: 10px; font-size: 1.125em;}
#news-featured-hero h3{display: inline-block; color: #abd35e; font-size: 1.125em; float: left; margin-right: 5px; font-weight: 300}
#news-featured-hero span.divider{display: inline-block; float: left; color: #abd35e; font-size: 1.125em; margin: 0 10px; }

#expertise-icons{clear: both; margin-top: 70px;}
#expertise-icons ul{list-style-type: none; margin: 0 auto; display: block; padding: 0; text-align: center; overflow: hidden;}

#expertise-icons ul li{display: inline-block;
margin: 0;
text-align: center;
width: 33%;
max-width: 130px;
float: none;
vertical-align: top;
max-height: 145px;
padding-bottom: 30px;
line-height: 14px;}

#expertise-icons a{font-size: .75em; color: #546270; text-transform: uppercase; transition: all .5s; line-height: .5em;}
#expertise-icons img{width: 60px; height: 60px; display: block; margin: 0 auto; padding-bottom: 15px;}
#expertise-icons img:nth-child(2){display: none}
#expertise-icons a:hover, #expertise-icons li.active a{color: #9ccb3c}
#expertise-icons li.active img:nth-child(2),#expertise-icons a:hover img:nth-child(2){display: block}
#expertise-icons li.active img:nth-child(1), #expertise-icons a:hover img:nth-child(1){display: none}
#expertise-icons .green-bar{width: 170px; height: 12px; background-color: #9ccb3c; margin: 0 auto;}



#project-info{font-size: 1.125em; color: #546270; line-height: 1.3em; margin: 40px 0 80px 0; overflow: hidden}
#project-info .info-left{width: 40%; float: left; margin-left: 8%;}
#project-info .info-right{width: 40%; float: right; margin-right: 8%;}


.project-images-slide img{width: 100%;}
.project-images{overflow: hidden; margin: 70px 0; line-height: 0}
.project-images img{position: relative; z-index: 10}

.project-images.image-ct-1 .wrap, .project-images.image-ct-3 .wrap{padding: 0; max-width: 100%; width: 100%;}
.project-images.image-ct-1 img{margin: 0 auto; display: block; max-width: 1152px;}

.project-images.image-ct-2{position: relative;}
.project-images.image-ct-2 .wrap{position: static}
.project-images.image-ct-2 .image{width: 48%; float: left}
.project-images.image-ct-2 .image:nth-child(2){width: 48%; float: right}
.project-images.image-ct-2 .image-1 .overlay{right: 50%}
.project-images.image-ct-2 .image-2 .overlay{left: 50%; right: 0}

.image-ct-3 .image{float: left; width: 32.65%; margin: 0; padding: 0 0 0 0; position: relative;}
.image-ct-3 .image:nth-child(3n+1){padding-left: .5%; clear: both;}
.image-ct-3 .image:nth-child(3n+2){padding: 0 .5%;}
.image-ct-3 .image:nth-child(3n+3){float: right; padding: 0 .5% 0 0}



#project-details{background-color: #f2f2f2; position: relative; padding: 100px 0; overflow: hidden; line-height: 1.3em}
#project-details .project-left{margin-left: 8%; float: left; width: 40%; position: relative; z-index: 2}
#project-details .project-right{margin-right: 8%; float: right; width: 32%; position: relative; z-index: 2}
#project-details .overlay{width: 50%; position: absolute; left: 50%; top: 0; bottom: 0; background: #e9e9e9;}
#project-details h2{font-size: 2em; font-weight: bold; color: #546270; margin-bottom: 30px; line-height: 1em}
.detail{overflow: hidden; clear: both}
.detail h3{font-size: .875em; color: #9ccb3c; font-weight: bold; text-transform: uppercase; float: left; width: 25%;padding-bottom: 20px;}
.detail div{color: #546270; font-size: 1.125em; width: 75%; float: right; }
.detail a{color: #546270; display: inline-block; border-bottom: 1px solid #9ccb3c}

.key-members{list-style-type: none; margin: 0; padding: 0; color: #546270; font-size: 1.125em;}
.key-members img{display: block; margin-bottom: 10px;}
.key-members li{display: block; float: left; width: 46%; margin: 0 8% 28px 0; }
.key-members li:nth-child(2n+2){float: right; margin-right: 0}


#next-project{position: relative; line-height: 1.3em; background-size: cover; background-repeat: no-repeat;}
#next-project a{display: block; width: 100%; height: 400px; position: relative; z-index: 2}
#next-project .next{display: inline-block; color: #fff; text-transform: uppercase; font-size: .875em; font-weight: bold; padding: 20px; background-color: #546270; z-index: 2}
#next-project .next span{display: inline-block; margin-left: 23px; font-size: 1.429em}
#next-project h4{font-size: 1.125em; color: #fff; font-weight: bold; text-transform: uppercase; }
#next-project h3{font-size: 3.125em; color: #fff; font-weight: bold; max-width: 300px; line-height: 1em}


#intro{font-size: 1.375em; color: #546270; margin: 115px 0; line-height: 1.4em;}
.parent-pageid-12 #intro{margin-top: 45px}
#intro .wrap{max-width: 770px;}
#intro h1{font-size: 1.455em; text-transform: uppercase; line-height: 1em; margin-bottom: 30px; font-weight: 700}
#intro h2{font-size: 1.455em; line-height: 1em; margin-bottom: 30px; font-weight: 700}
#intro hr{background-color: #dadada; border: 0; display: block; height: 1px; margin: 60px 0}

.one-column-text{font-size: 1.375em; color: #546270; margin: 115px 0; line-height: 1.4em;}
.one-column-text .wrap{max-width: 770px;}

.two-column-section{font-size: 1.125em; color: #546270; line-height: 1.3em; margin: 80px 0 70px 0; overflow: hidden}
.two-column-section .left{width: 40%; float: left; margin-left: 8%;}
.two-column-section .right{width: 40%; float: right; margin-right: 8%;}

.one-column-text h2, .two-column-section h2{font-size: 1.455em; text-transform: uppercase; line-height: 1em; margin-bottom: 30px; font-weight: 700}


#expertise-grid{overflow: hidden; padding-bottom: 90px;}
#expertise-grid ul{list-style-type: none; margin: 0; padding: 0}
#expertise-grid li{width: 49%; float: left; position: relative; margin-bottom: 2%;}
#expertise-grid li:nth-child(2n+2){float: right;}
#expertise-grid a img{max-width: 60px; z-index: 2; position: relative;}
#expertise-grid a{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#expertise-grid a h2{font-size: 3.125em; font-weight: bold; color: #fff; line-height: 1em;}
#expertise-grid a div.contents{display: table; height: 100%; width: 100%; position: relative; z-index: 2}
#expertise-grid a div.contents .valign{display: table-cell; vertical-align: middle; text-align: center;}

.about-block, .image-block{background-color: #f2f2f2; overflow: hidden; display: table; width: 100%;}
.about-block .content-wrap, .image-block .content-wrap{max-width: 450px; width: 81%; margin-left: 15%; margin-right: 4%;}
.about-block h2 a{font-size: 2.583em; color: #9ccb3c; font-weight: bold; line-height: .5em; text-transform: uppercase; display: block; margin-bottom: 30px;}
.about-block h2 a span{font-size: 1.177em; margin-left: 30px; position: relative; top: 7px; }
.about-block .text{font-size: 1.125em; color: #546270; line-height: 1.4em}
.about-block .read-more{display: block; border: 1px solid #9ccb3c; padding: 15px 0; text-align: center; width: 170px; color: #9ccb3c; font-size: .875em; text-transform: uppercase; font-weight: bold}
.about-block .image, .image-block .image{width: 50%; display: table-cell; line-height: 0}
.about-block .image img, .image-block .image img{width: 100%;}
.about-block .content, .image-block .content{display: table-cell; width: 50%; vertical-align: middle;}
.about-block .image:nth-child(2), .about-block-right .image:nth-child(1), .image-block .image:nth-child(2), .image-block-Right .image:nth-child(1){display: none}
.about-block-right .image:nth-child(3), .image-block-Right .image:nth-child(3){display: table-cell}
.about-block:nth-child(2n+2) .content-wrap, .image-block-Right .content-wrap{float: right; margin: 0 15% 0 4%}

.image-block h2{font-size: 2em; color: #546270; font-weight: bold}
.image-block p, .image-block ul{font-size: 1.375em; color: #546270; line-height: 1.4em;}
.image-block ul{padding: 0 0 0 15px}

#owners{margin-bottom: 115px; overflow: hidden;}
#owners .owner{float: left; width: 32.65%; margin: 0 0 .5% 0; position: relative}
#owners .owner:nth-child(3n+1){margin-left: .5%; clear: both;}
#owners .owner:nth-child(3n+2){margin: 0 .5%;}
#owners .owner:nth-child(3n+3){float: right; margin: 0 .5% 0 0}
#owners .owner .image{line-height: 0}
#owners .owner .image img{width: 100%;}
#owners .filler-photo{float: right; width: 65.75%; margin-right: .5%}
#owners .filler-photo img{width: 100%}
#owners .details{display: none;}
#owners .hover-details{display: block; opacity: 0; line-height: 1.3em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(255,255,255,.9); padding: 40px 50px; transition: all .5s}
#owners .hover-details h2, #owner-modal h2{font-size: 2em; font-weight: bold; color: #546270; margin-bottom: 10px; line-height: 1em}
#owners .hover-details span, #owner-modal span.accreditation{display: block; font-size: 1.125em; color: #546270; margin: 5px 0}
#owners .owner:hover .hover-details{opacity: 1; cursor: pointer;}
#owner-modal .email{font-size: 1.125em; color: #acd03a; margin: 5px 0; display: inline-block; transition: all .5s;}
#owner-modal .email:hover{color: #546270}
#owner-modal .bio{margin: 5px 0; color: #546270; font-size: 1.125em; line-height: 1.3em}
#owner-modal img{margin-bottom: 40px;}
#owner-modal-wrapper {display: none;}
#owner-modal-background {
    display: none;
    background-color: rgba(84,98,112,.9);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9998;
}

#owner-modal-wrapper {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow-y: scroll;
    z-index: 10000;
}

#owner-modal {
    position: relative;
    top: 100px;
    z-index: 9999;
}

#owner-modal .owner-modal-inner {
        position: relative;
        width: 100%;
        max-width: 630px;
        padding: 70px 70px 55px 70px;
        background-color: #fff;
        margin: 0 auto;
    }

    #owner-modal .close {
        position: absolute;
        top: 15px;
        right: 20px;
        width: 44px;
        height: 44px;
        cursor: pointer;
        background: transparent url('images/nav-icons.png') 0 -60px no-repeat;
    }
#staff .staff{float: left; width: 23%; margin-bottom: 2.6%; position: relative}
#staff .staff .image{line-height: 0;}
#staff .staff .image img{width: 100%;}
#staff .staff:nth-child(4n+2){margin: 0 2.6%}
#staff .staff:nth-child(4n+4){float: right}
#staff .details{display: block; background-color: rgba(84,98,112,.9); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 25px; transition: all .5s; opacity: 0}
#staff .staff:hover .details{opacity: 1}
#staff .details h2{color: #fff; font-size: 1.375em; font-weight: 700; margin-bottom: 5px;}
#staff .details .email{color: #acd03a; font-size: 1.125em;}
#staff .details .email span{display: inline-block; margin-right: 10px;}
#staff .details .email:hover{color: #fff}


.project-grid{overflow: hidden; margin-top: .5%}
.project-grid .project{float: left; overflow: hidden; width: 32.65%; margin: 0 0 .5% 0; position: relative;}
.project-grid .project:nth-child(3n+1){margin-left: .5%; clear: both;}
.project-grid .project:nth-child(3n+2){margin: 0 .5%;}
.project-grid .project:nth-child(3n+3){float: right; margin: 0 .5% 0 0}
.project-grid .project .image{line-height: 0}
.project-grid .project .image img{width: 100%;}
.project-grid .project .hover-details{transition: all .5s;}
.project-grid .hover-details{display: block; line-height: 1.3em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(255,255,255,.9); opacity: 0}
.project-grid .project:hover .hover-details{opacity: 1}
.project-grid .hover-details a{position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 40px 50px}
.project-grid .hover-details h2{line-height: 1em; font-size: 2em; font-weight: bold; color: #546270; margin-bottom: 10px;}
.project-grid .hover-details span.category{display: block; font-size: .875em; color: #9ccb3c; font-weight: bold; text-transform: uppercase; margin: 5px 0}
#main-project-grid .project:last-child{margin-bottom: 60px;}
#projects-load-more, #news-load-more{display: block; border: 1px solid #9ccb3c; color: #9ccb3c; width: 170px; margin: 0 auto; margin-top: 65px; margin-bottom: 65px; text-align: center; font-size: .875em; font-weight: bold; text-transform: uppercase; padding: 15px 0; clear: both; line-height: 1em; transition: all .5s;}
#projects-load-more:hover, #news-load-more:hover{color: #546270; border-color: #546270; cursor: pointer;}
.no-more-projects{line-height: 1em; color: #9ccb3c; text-transform: uppercase; font-weight: bold; font-size: 2em; clear: both; text-align: center; padding: 30px 0}

.project-grid img{visibility: hidden}
.project-grid .background-image{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all .5s; background-size: cover;}
.project-grid .project:focus .background-image,
.project-grid .project:hover .background-image{transform: scale(1.02);}

#category-list{padding: 50px 0; overflow: hidden;}
#category-list h3{float: left; padding-top: 2px; font-size: .875em; font-weight: bold; margin-right: 2%; color: #9ccb3c; text-transform: uppercase;}
#category-list ul{list-style-type: none; margin: 0; padding: 0; }
#category-list ul li{display: inline-block; margin: 0 1%}
#category-list ul li a{color: #546270; font-size: 1.125em; transition: all .5s;}
#category-list ul li a:hover, #category-list ul li.active a{border-bottom: 1px solid #9ccb3c}

.single-post article h1{font-size: 3.125em; font-weight: bold; color: #546270; line-height: 1em;}
.single-post article header img{margin-bottom: 30px; width: 100%;}
.single-post article .meta{overflow: hidden; padding: 30px 0 40px 0; border-bottom: 1px solid #dadada}
.single-post article .date, .single-post .categories h4{float: left; font-size: 1.125em; color: #546270; margin-right: 10px;}
.single-post article .categories{list-style-type: none; margin: 0; padding: 0;}
.single-post article .categories li{display: inline-block; margin-right: 10px; font-size: 1.125em;}
.single-post span.divider{display: inline-block; float: left; color: #abd35e; font-size: 1.125em; margin: 0 10px; }

.single-post article a{color: #abd35e; border-bottom: 1px solid #abd35e; transition: all .5s;}
.single-post article a:hover{color: #546270; border-color: #546270;}
.single-post article .content{font-size: 1.125em; color: #546270; line-height: 1.3em; margin: 40px 0 115px 0;}
.post-navigation{background-color: #f2f2f2; padding: 55px 0; overflow: hidden}
.post-navigation a{font-size: 3.438em; color: #abd35e; transition: all .5s;}
.post-navigation a:hover{color: #546270}
.post-navigation .previous{float: left}
.post-navigation .next{float: right}


#main-news-list h2{font-size: 2em; font-weight: bold; color: #9ccb3c; line-height: 1em; max-width: 650px;}
#main-news-list .meta{overflow: hidden; padding: 10px 0 0 0;}
#main-news-list article{margin-bottom: 30px;}
#main-news-list .date, #main-news-list h3{float: left; font-size: 1.125em; color: #546270; margin-right: 10px; font-weight: 300}
#main-news-list .categories{list-style-type: none; margin: 0; padding: 0;}
#main-news-list .categories li{display: inline-block; margin-right: 10px; font-size: 1.125em;}
#main-news-list .categories li{color: #546270}
#main-news-list span.divider{display: inline-block; float: left; color: #546270; font-size: 1.125em; margin: 0 10px; }
#main-news-list article a{display: table; table-layout: fixed; width: 100%; background-color: #fff;}
#main-news-list article a:hover{background-color: #f9f9f9; transition: all .3s}
#main-news-list .image{display: table-cell; background-size: cover; position: relative; overflow: hidden; width: 30%; height: 200px; line-height: 0}
#main-news-list .image .placeholder{width: 100%; height: 100px;}
#main-news-list .image img{display: none}
#main-news-list .details{display: table-cell; width: 66%; vertical-align: middle; padding-left: 70px;}
#main-news-list .fa-caret-right{display: table-cell; width: 11%; vertical-align: middle; font-size: 4.563em; color: #abd25e}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}


.search-results h2{padding: 50px 0}

.full-news-wrap{background-color: #f2f2f2; padding-bottom: 60px;}
.search-results .full-news-wrap{padding-top: 50px;}



.related-news-grid{overflow: hidden; margin-top: .5%}
.related-news-grid .news{float: left; overflow: hidden; width: 32.5%; margin: 0 0 .5% 0; position: relative;}
.related-news-grid .news:nth-child(3n+1){margin-left: .5%; clear: both;}
.related-news-grid .news:nth-child(3n+2){margin: 0 .75%;}
.related-news-grid .news:nth-child(3n+3){float: right; margin: 0 .5% 0 0}
.related-news-grid .newst .image{line-height: 0}
.related-news-grid .news .image img{width: 100%;}
.related-news-grid .news .hover-details{transition: all .5s;}
.related-news-grid .news:hover .hover-details{opacity: 1}
.related-news-grid .news .hover-details{display: block; opacity: 0; line-height: 1.3em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(255,255,255,.9);}
.related-news-grid .news .hover-details a{position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 40px 50px; transition: all .5s;}
.related-news-grid .news .hover-details h2{line-height: 1em; font-size: 2em; font-weight: bold; color: #546270; margin-bottom: 10px;}
.related-news-grid .news .hover-details span.category{display: block; font-size: .875em; color: #9ccb3c; font-weight: bold; text-transform: uppercase; margin: 5px 0}
.related-news-grid img{visibility: hidden}
.related-news-grid .background-image{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all .5s; background-size: cover;}
.related-news-grid .news:focus .background-image,
.related-news-grid .news:hover .background-image{transform: scale(1.02);}

.ie-container{
    height:100%;
    width:100%;
    position:relative;
}


@media only screen and (max-width: 1120px){
    
    
    #search-form{width: 80%;}
    
    
    footer .nav{margin-left: 15%;  width: 17%}
    .contact-info{width: 38%;}
    .awards{width: 23%; float: right;}
    #project-hero .project-tag h2{font-size: 2.3em;}
	
.project-images.image-ct-1 img{max-width: 100%;}
	

}

@media only screen and (max-width: 920px){
    
    footer .nav{margin-left: 4%;  width: 17%}
    .contact-info{width: 50%;}
    
    
    #work-main .work-links{width: 40%;}
    #work-main .work-info{width: 60%; padding: 30px 0 30px 10%;}


    
    #work-feature .project-tag{width: 50%;}
    
    
    .project-grid .hover-details h2, .related-news-grid .news .hover-details h2{font-size: 1.5em;}
    
		
	.one-column-text .wrap{max-width: 100%;}
	.two-column-section .left{width: 48%; float: left; margin-left:0;}
	.two-column-section .right{width: 48%; float: right; margin-right: 0;}

	.one-column-text h2, .two-column-section h2{font-size: 1.455em; text-transform: uppercase; line-height: 1em; margin-bottom: 30px; font-weight: 700}

    
	#project-details{background-color: transparent; margin: 0; padding: 0;}
	#project-details .wrap{padding: 0; width: 100%;}
	#project-details .project-left{margin: 0; padding: 60px 4%; float: none; width: 92%; background-color: #f2f2f2}
	#project-details .project-right{padding: 0 4%; float: none; overflow: hidden; width: 92%; background-color: #e9e9e9; padding-top: 60px;}
	#project-details .overlay{display: none;}
	#project-details h2{font-size: 2em; font-weight: bold; color: #546270; margin-bottom: 30px;}
	.detail{overflow: hidden; clear: both}
	.detail h3{width: 15%;}
	.detail div{width: 75%; float: left;}

	.key-members{list-style-type: none; margin: 0; padding: 0; color: #546270; font-size: 1.125em;}
	.key-members img{display: block; margin-bottom: 10px;}
	.key-members li{display: block; float: left; width: 31%; margin: 0 2% 28px 0; }
	.key-members li:nth-child(2n+2){float: left;}

		
	.about-block h2 a{font-size: 2em; margin-bottom: 20px;}
	.about-block .text{font-size: 1em; color: #546270; line-height: 1.4em}

}

@media only screen and (max-width: 860px){
    
    #search-form{width: 75%;}
    
	.detail h3{width: 20%;}
	.detail div{width: 75%; float: left;}
		
	#expertise-grid a h2{font-size: 2.125em;}
		
	.about-block h2 a{font-size: 1.8em; margin-bottom: 0;}
	.about-block h2 span.fa{margin-left: 10px; top: 3px;}
	.about-block .text{font-size: 1em; color: #546270; line-height: 1.4em}
	.about-block .content-wrap, .image-block .content-wrap{max-width: 450px; width: 86%; margin-left: 10%; margin-right: 4%;}
	.about-block:nth-child(2n+2) .content-wrap, .image-block-Right .content-wrap{float: none; margin: 0 10% 0 4%}

		
		
	#staff .staff{width: 31%;}
	#staff .staff:nth-child(4n+2){margin-right: 0; margin-left: 0}
	#staff .staff:nth-child(4n+4){float: left}
	#staff .staff:nth-child(3n+2){margin-right: 3%; margin-left: 3%}
	#staff .staff:nth-child(3n+4){clear: both}
		
    #news-featured-hero .project-tag{width: 70%; max-width: inherit;}
    #news-featured-hero .overlay-feature{width: 70%}
    #news-featured-hero .project-tag h2{font-size: 1.7em}
    
    
    #owner-modal .owner-modal-inner{
        width: 85%;
        padding: 10% 5%;
    }
}

@media only screen and (max-width: 760px){
    #content-links{font-size: .875em}

    footer .nav{margin-left: 0%;  width: 17%}
    .contact-info{width: 70%; float: right;}
    .awards{width: 70%; padding-top: 50px; clear: both; float: right;}
    
    
	.project-grid .project, .related-news-grid .news, #owners .owner {width: 49%;}
	.project-grid .project:nth-child(3n+1), .related-news-grid .news:nth-child(3n+1), #owners .owner:nth-child(3n+1) {margin: .5%; clear: none;}
	.project-grid .project:nth-child(3n+2), .related-news-grid .news:nth-child(3n+2), #owners .owner:nth-child(3n+2) {margin: .5%;}
	.project-grid .project:nth-child(3n+3), .related-news-grid .news:nth-child(3n+3), #owners .owner:nth-child(3n+3) {float: left; margin: .5%}
	.project-grid .project:nth-child(2n+1), .related-news-grid .news:nth-child(2n+1), #owners .owner:nth-child(2n+1) {margin: .25% .25% .75% .5%; clear: both;}
	.project-grid .project:nth-child(2n+2), .related-news-grid .news:nth-child(2n+2), #owners .owner:nth-child(2n+2) {margin: .25% .5% .75% .5%; float: right;}
		
	.about-block .image, .image-block .image{width: 33%; display: table-cell; line-height: 0; background-position: top center; background-size: cover; background-repeat: no-repeat;}
	.about-block .image img, .image-block .image img{visibility: hidden}
	.about-block .content, .image-block .content{width: 67%; padding-top: 40px; padding-bottom: 40px}
	
#owners .filler-photo {
    display: none;
}
	
#main-project-grid .project:last-child{margin-bottom: 60px;}
    
}

@media only screen and (max-width: 720px){
    
    #latest-news{position: relative; margin: 30px 0 0 0;}
    #latest-news .news-wrap{float: none; width: 100%;}
    #project-tag{position: absolute; bottom: inherit; margin-top: -94px;}
    
    
    #search-form{width: 60%;}
    #search-form input[type='search']{margin-left: 4%; font-size: 1.5em;}
    #search-form #search-toggle{float: right; padding: 27px 4%}

    #primary-nav{height: auto; padding-bottom: 100px;}
    #primary-nav a{font-size: 2.75em; padding: 15px 0; max-width: 80%; margin: 0 auto;}
    
    
	#work-main .work-links{width: 40%;}
	#work-main .work-info{width: 60%; padding: 30px 0 30px 10%;}
	.work-links h1{font-size: 1.5em;}
	.work-links a{font-size: 1.275em; padding: 13px 0}
	.work-links a span{font-size: 1.091em; top: 0px; margin-right: 10px;}
		
	#work-feature .project-tag{width: 70%;}
	.overlay-feature{width: 67%;}

    #project-hero .project-tag{max-width: 80%;}
    #project-hero .overlay-feature{bottom: -35px; height: 230px; width: 80%; z-index: 2;}

	.detail h3{width: 25%;}
	.detail div{width: 75%;}
		
	#expertise-grid a h2{font-size: 1.9em;}

    
    #owner-modal .close {
        top: 0px;
        right: 0px;
    }
}

@media only screen and (max-width: 640px){
    
    #content-links .wrap{display: block;}
    #our-work, #our-expertise{display: block; width: 100%;}
    #our-work{margin-bottom: 30px}
    
    #ctas .cta{height: 200px;}

    #ctas .cta h3{line-height: .5em; font-size: 3em; padding-top: 70px;}
    
    
    #project-news-hero{ margin-bottom: 30px;}
    #project-news-hero #hero-image{min-height: 320px;}
    
    
    footer .nav{ width: 100%; padding-bottom: 30px;}
    .contact-info{width: 100%; float: none; border-top: 1px solid #858c92; clear: both; padding-top: 30px; }
    .awards{float: none; width: 100%; padding-top: 50px;}

    #work-main .wrap{display: block; padding: 0; width: 100%;}
    #work-main .work-links{width: 96%; display: block; margin: 0 4%;}
    #work-main .work-info{display: block; width: 92%; padding: 55px 4%;}
    #work-main .work-links ul{max-width: 92%; width: 100%;}
    
    
	.one-column-text .wrap{max-width: 100%;}
	.two-column-section .left,
	.two-column-section .right{width: 100%; float: none; margin: 0;}

	.detail h3{width: 30%;}
	.detail div{width: 70%;}
		
		
	.key-members li{width: 46%;}
		
		
	#staff .staff{width: 48%;}
	#staff .staff:nth-child(4n+2){margin-right: 0; margin-left: 0}
	#staff .staff:nth-child(4n+4){float: left}
	#staff .staff:nth-child(3n+2){margin-right: 0; margin-left: 0}
	#staff .staff:nth-child(2n+2){margin-left: 4%}
	#staff .staff:nth-child(3n+4){clear: none}
	#staff .staff:nth-child(2n+3){clear: both}
		
		

	#main-news-list h2{font-size: 1.5em; }
	#main-news-list .image{display: table-cell; width: 40%; }
	#main-news-list .details{display: table-cell; width: 50%; padding-left: 40px;}
	#main-news-list .fa-caret-right{display: table-cell; width: 10%; font-size: 3em}
		
	#content-links .wrap {
		margin-bottom: 30px;
	}	

    #owner-modal .owner-modal-inner{padding-bottom: 20px; padding-top: 50px;}
    #owner-modal img{margin-bottom: 5px;}
    #owner-modal h2{font-size: 1.5em}
    #owner-modal span.accreditation,  #owner-modal .email, #owner-modal .bio{font-size: 1em}

    
    .image-ct-3 .image{float: none; width: 100%;}
    .image-ct-3 .image:nth-child(3n+1){padding: .5% 0;}
    .image-ct-3 .image:nth-child(3n+2){padding: .5% 0;}
    .image-ct-3 .image:nth-child(3n+3){float: none; padding: .5% 0}
	
.single-post article h1{font-size: 2.3em;}
#category-list h3 {
    float: none;
}	
#intro {
    margin: 50px 0;
}

.one-column-text {
    margin: 50px 0;
}
#owners {
    margin-bottom: 50px;
}	
	
}
@media only screen and (max-width: 520px){
    
    #work-feature .wrap, #project-hero .wrap, #news-featured-hero .wrap{background-color: rgba(84, 98, 112, .8);}
    #work-feature .project-tag, #project-hero .project-tag, #news-featured-hero .project-tag{position: relative; width: 100%; padding: 30px 0; top: 0}
    #work-feature .project-tag h2{font-size: 1.5em}
    .overlay-feature{display: none}
    
    #project-hero .hero-image{min-height: 380px;}
    #project-hero .project-tag{max-width: 100%; position: relative; top: 0;}

    
	.project-grid .project, .related-news-grid .news{width: 49%;}
	.project-grid .project:nth-child(3n+1), .related-news-grid .news:nth-child(3n+1){margin: .5%; clear: none;}
	.project-grid .project:nth-child(3n+2), .related-news-grid .news:nth-child(3n+2){margin: .5%;}
	.project-grid .project:nth-child(3n+3), .related-news-grid .news:nth-child(3n+3){float: left; margin: 1%}
	.project-grid .project:nth-child(2n+1), .related-news-grid .news:nth-child(2n+1){margin: .5% 0.25% .5% .75%;; clear: both;}
	.project-grid .project:nth-child(2n+2), .related-news-grid .news:nth-child(2n+2){margin: .5%; float: right;}
	.project-grid .hover-details h2, .related-news-grid .news .hover-details h2{font-size: 1.5em;}
    .related-news-grid .news .hover-details a{padding: 10px}
	
    .project-images.image-ct-2 .image{position: relative;}
    .project-images.image-ct-2 .wrap{width: 100%; max-width: 100%; padding: 0}
    .project-images.image-ct-2 .image-1 .overlay, .project-images.image-ct-2 .image-2 .overlay{left: 0; right: 0;}
	.project-images.image-ct-2 .image{width: 92%; float: none; padding: 4%}
	.project-images.image-ct-2 .image:nth-child(2){width: 92%; float: none}
		
		
	.detail h3{width: 100%;}
	.detail div{width: 100%;}
    
    
    #expertise-grid li{width: 100%; float: none;}
    #expertise-grid li:nth-child(2n+2){float: none;}
    #expertise-grid a h2{font-size: 3.125em;}
    #expertise-grid li:nth-child(2n+1) div.overlay{background-color: #9ccb3c !important; opacity: 0.8 !important}
    #expertise-grid li:nth-child(2n+2) div.overlay{background-color: #546270 !important; opacity: 0.8 !important}
    
    #ctas .cta h3{font-size: 2em; padding-top: 80px;}
    
    .about-block, .image-block{display: block}    
	.about-block .image, .image-block .image{ display: block; width: 100%; margin: 0;}
	.about-block .image img, .image-block .image img{visibility: visible; display: block; width: 100%;}
	.about-block .content, .image-block .content{width: 100%; margin: 0}
	.about-block .content-wrap, .about-block:nth-child(2n+2) .content-wrap, .image-block-Right .content-wrap{float: none; margin: 0 4%}
	.about-block .image:nth-child(1), .image-block .image:nth-child(1){display: block}
	.about-block .image:nth-child(3), .image-block .image:nth-child(3){display: none}
		
		
	#main-news-list{display: block}
	#main-news-list .image{display: block; width: 100%; }
	#main-news-list:not(.search-results) .details{display: block; width: 80%; padding: 10% 4%; float: left;}
	#main-news-list:not(.search-results) .fa-caret-right{display: block; width: 10%; padding: 15% 0; font-size: 3em; float: left;}


	#hero nav {
		padding-top: 15px;
	}
	#hero .logo{width: 70px; height: 85px; float: left;margin-top: 10px;}
		#primary-nav a {
		font-size: 2em;
	}	
	#general-hero, #news-hero, #search-hero, #expertise-hero {
		height: 105px;
	}	
	
#expertise-grid{padding-bottom: 40px;}
    

	
}

@media only screen and (max-width: 420px){
    
    
    .key-members li{width: 96%;}
    
    #search-form.active{width: 100%; margin-top: 0px;}
    .contact-info .address:nth-child(1){width: 100%; float: none; margin-bottom: 30px}
    .contact-info .address:nth-child(2){width: 100%; float: none; margin-bottom: 30px;}
    
    #expertise-grid a h2{font-size: 2.125em;}
    
    #staff .details, #owners .hover-details{font-size: .875em; padding: 5%}
    #owners .hover-details h2{font-size: 1.5em}
	
.project-grid .hover-details h2 {
    font-size: 1.5em;
}
.project-grid .hover-details a {
    padding: 5%;
}	
}