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

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

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
	    font-family: 'berthold_akzidenz_grotesk_bBd';
	    src: url('fonts/akzident_grotek_be_bold-webfont.svg#berthold_akzidenz_grotesk_bBd') format('svg');
	}

	@font-face {
	    font-family: 'berthold_akzidenz_grotesk_bRg';
	    src: url('fonts/akzident_grotek_be_reg-webfont.svg#berthold_akzidenz_grotesk_bRg') format('svg');
	}

	@font-face {
	    font-family: 'berthold_akzidenz_groteskBdIt';
	    src: url('fonts/akzidenz_grotesk_be_bold_italic-webfont.svg#berthold_akzidenz_groteskBdIt') format('svg');
	}
}

/*force these things to be hidden*/
.sub-navigation,
.prev-page,
.next-page {
	display:none;
}

/*offset anchor links to accomodate for fixed header*/
.anchor{
  display: block;
  height: 150px;
  margin-top: -150px;
  visibility: hidden;
}

* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
    font-size: 14px;
    line-height: 19px;
    font-family: 'berthold_akzidenz_grotesk_bRg';
    color: #666666;
	letter-spacing:.8px;
    background: #ffffff;
    min-width: 100%;
    -webkit-text-size-adjust:none;
    position: relative; 
}

.categories ul, 
.categories ul li,
#header,
#navigation ul,
.sub-navigation ul,
.sub-navigation,
.show-on-mobile,
.nav-trigger,
.header-top,
.categories ul li,
.clearfix { *zoom: 1; }

.categories ul:after, 
.categories ul li:after,
#header:after,
#navigation ul:after,
.sub-navigation:after,
.sub-navigation ul:after,
.show-on-mobile:after,
.nav-trigger:after,
.header-top:after,
.categories ul li:after,
.clearfix:after { width: 100%; content: ''; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; display: block; }

a { color: #666666; text-decoration: none; cursor: pointer; transition: color 300ms; -webkit-transition: color 300ms; }
a:hover { text-decoration: none; color: #cc0000;  }
a img { border: 0; }

hr { height:1px; border:0; background-color:#999; color:#999; }

h2 { font-family: 'berthold_akzidenz_grotesk_bBd'; font-weight: normal; font-size: 18px; line-height: 20px; }

input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 1000px; padding: 0 10px 0 10px; margin: 0 auto; overflow: hidden; }
#header { width: inherit; left:0; right:0; margin: 0 auto; padding: 20px 0 0 0; position:fixed; background-color:#ffffff; z-index:9999999999; }

.header-top { padding: 0 0 10px; border-bottom: solid 1px #999; }

xxx#logo { width: 338px; float: left; display: inline; }
xxx#logo a { height: 32px; background: url(images/logo.png); background-size:338px; background-repeat:no-repeat; display:block; }
#logo { float: left; display: inline; font-family: 'berthold_akzidenz_grotesk_bRg'; font-weight: normal; font-size: 19px; line-height: 19px; letter-spacing:1.2px; text-transform:uppercase; padding: 10px 0 0 0; }

#main { padding: 80px 0 30px 0; }
#main.inner { padding: 10px 0 40px; }

#navigation { float: right; display: inline; padding: 10px 0 0 0; }
#navigation ul { list-style-type: none; }
#navigation ul li { float: left; display: inline; padding: 0 0 0 19px; font-size: 14px; white-space: nowrap; }
#navigation ul li a { white-space: nowrap; }
@media only screen and (max-width: 640px) {
	#navigation ul { float: left !important; }
	#navigation ul li { padding: 0 0 0 12px !important; letter-spacing:0.6px !important; }
}
#navigation ul li:first-child { padding: 0 0 0 0 !important; }

.sub-navigation { position: relative; border-top: solid 1px #999; padding: 10px 0 11px; }
.sub-navigation ul { list-style-type: none; float: right; display: inline; }
.sub-navigation ul li { float: left; display: inline; padding: 0 0 0 19px; font-size: 14px; }
#navigation ul li a.current, .sub-navigation ul li a.current { color: #cc0000; }

.show-on-mobile { display:none; font-size: 0; line-height: 0; }

.home-image { padding: 0 0 30px 0; border-bottom: solid 1px #999; }
.home-image img { display: block; max-width: 1000px; }

.details-info { padding: 35px 0 0 0; border-bottom: solid 1px #999; }
.details-infonotext { padding: 35px 0 0; }
.details-infonoimage { padding: 0 0 15px 0; }
.details-info img,
.details-infonotext img { max-width: 1000px; }
.details-workcaption { border-top: solid 1px #999; padding-top:10px; border-bottom: solid 1px #999; padding-bottom:10px; }
.details-workcaption h1 { font-weight: normal; font-family: 'berthold_akzidenz_grotesk_bBd'; font-size: 14px; }
.details-workcaption p:last-of-type { padding-bottom:0px !important; }

.home-image.flexslider { padding-bottom: 50px; position: relative; overflow: hidden; }
.home-image.inner { padding-bottom: 0; }

/*if there is not text for the top image, lets hide the borders*/
.home-imagenotext p { padding-top: 0 !important; padding-bottom: 0 !important; }

.flexslider p, .details-info p, .details-infonoimage p, .home-image p { font-size: 14px; line-height:18px; padding: 10px 0 10px 0; }
.flexslider p.last, .details-info p.last, .details-infonoimage p.last, .home-image p.last { padding: 0; }
.flexslider p strong, .details-info p strong, .details-infonoimage p strong, .home-image p strong { font-weight: normal; font-family: 'berthold_akzidenz_grotesk_bBd'; xdisplay: block; }
.flexslider p em, .details-info p em, .details-infonoimage p em, .home-image p em { font-style: italic; font-family: 'berthold_akzidenz_grotesk_bRg'; }

.page-nav .prev-page,
.page-nav .next-page { background-image: url(images/slider-nav.png); width: 64px; height: 97px; position: fixed; top: 50%; margin-top: -48px; text-indent: -4000px; font-size: 0; line-height: 0; }
.page-nav .prev-page { left: 0; background-position: 0 0; }
.page-nav .next-page { right: 0; background-position: -64px 0; }

.categories { overflow: hidden; }
.categories ul { list-style-type: none; position: relative; margin: 0 -70px 0 0; }
.categories ul li { float: left; display: inline; border-bottom: solid 1px #999; font-size: 0; line-height: 0; padding: 0 0 15px; position: relative; width: 100%; }
.categories ul li .thumb { float: left; display: inline; margin: 0 35px 10px 0; position: relative; }

/* 20150113 - added .categories ul li .thumb img so upload of larger image gets forced to smaller size */
.categories ul li .thumb img { width:310px; }

/* 20191027 - added to override and make landing page images 100% wide at all viewports */
.categories ul { margin: 0; }
.categories ul li .thumb { max-width: 100%; width: auto; width: 100%; margin-right: 0; margin: 0 0 20px 0; display:block; float: none; }
.categories ul li .thumb img { min-width: 100%; }

.categories ul li img, 
.categories ul li div div { display:block; }

.categories ul li img { margin: 0 0 5px; }
.categories ul li .thumb .meta { height: 20px; }
.categories ul li span { font-size: 12px; line-height: 20px; background: #fff; }
.categories ul li span.work { float:left; }
.categories ul li span.workdate { float:right; }

.categories.index-gallery { position: relative; margin: 0 0 -30px 0; }
.categories.index-gallery ul li { border: 0; padding-bottom: 5px; }

/* these 2 lines are what makes the text part overlay the image */

xxx.categories.index-gallery ul li img { margin: 0; }
xxx.categories.index-gallery ul li span { padding: 5px 0 0 0; position: absolute; left: 0; bottom: 0; width: 100%; display: none; }

.text-entry { border-bottom: solid 1px #999; padding: 21px 0 23px; }
.text-entry p { padding: 10px 0 10px 0; }
.text-entry p.last { padding: 0; }
.text-entry p strong { font-weight: normal; font-family: 'berthold_akzidenz_grotesk_bBd'; display: block; }
.text-entry p em { font-style: normal; font-family: 'berthold_akzidenz_groteskBdIt'; }
.text-entry ul { list-style-type: none; }

.gray-box { background: #666666; padding: 25px 30px; }
.gray-box p, .gray-box h2 { color: #fff; }
.gray-box h2 { padding: 0 0 19px; } 

.vimeocontainer { width: 100%; height: auto; }

/* SIZE 2 */

@media only screen and (max-width: 1147px) {
	.categories ul li span { font-size: 10px; }
    .shell { width: 870px; }
    .details-info img,
	.details-infonotext img,
	.home-image img { width: 870px; }
    .thumb, .thumb img { width: 267px; }
	/* 20150113 - added .categories ul li .thumb img so upload of larger image gets forced to smaller size */
	.categories ul li .thumb img { width: 267px; }
    .categories.index-gallery ul li span { display: block; position: static; }
	.categories ul li { border-bottom: 0px; }
}

@media only screen and (max-width: 1016px) {
    xxx.shell { width: 800px; }
    xxx.home-image img { width: 800px; }
    xxx.thumb img { width: 243px; display: block; }
    xxx.thumb,
	xxx.thumb img { width: 243px;  }
    xxx.categories.index-gallery ul li span { display: block; position: static; }
}

@media only screen and (max-width: 954px) {
	.hide-on-phone { display: none; }
    .sub-navigation ul { display:none; }
    .show-on-mobile { display: block; }
	/* 20150113 - added display: block; so that the nav is always shown - overwriting the trigger function */
    .show-on-mobile .dropdown { display: block; float: right; line-height: 0; font-size: 0; }
    .show-on-mobile .dropdown li { float: none; display: block; text-align: right; font-size:14px; line-height: 14px; padding: 2px 0 10px 0; }
    .nav-trigger { float: right; display: inline; font-size: 14px; line-height: 14px; padding: 2px 0 2px 0; color: #cc0000; }
    /* 20150131 - hiding the nav trigger so we can always display the subnav */
	.nav-trigger { display: none; }

    .page-nav .prev-page,
    .page-nav .next-page { background: url(images/mobile-nav.png);  width: 24px; height: 61px; position: fixed; top: 50%; margin-top: -31px; }
    .page-nav .prev-page { background-position: 0 0; }
    .page-nav .next-page { background-position: -24px 0; }

    .shell { padding: 0 10px 0 10px; max-width: 720px; width: auto; }
	#header { width: inherit; max-width: 720px; padding: 20px 10px 0 10px; }
    .details-info img, 
	.details-infonotext img, 
    .home-image img { max-width: 720px; width: auto; width: 100%; }

    .home-image { padding-bottom: 20px; }
    .categories { margin-top: -30px;}
    .categories ul { margin: 0; }
    .categories ul li .thumb { max-width: 720px; width: auto; width: 100%; margin-right: 0; margin: 0 0 40px 0; display:block; float: none; }
    .categories ul li:first-child .thumb {}
    .categories ul li .thumb img { min-width: 100%; }
	.categories ul li span { font-size: 12px; }
    .categories.index-gallery ul li span { display: block; position: static; }
    .thumb img { max-width: 215px; width: auto; width: 100%; }
    #logo { float: none; display: block; margin: 0 auto 14px 0; padding:0; }
    #main { padding-top: 110px; }
    #navigation { float: none; display: block; margin: 0 auto; border-top: solid 1px #999; }
    #navigation ul { float: right; display: inline; }
}
@media only screen and (max-width : 480px) {
    .hide-on-phone { display: none; }
    .categories ul { margin-right: 0; }
    .categories ul li .thumb { max-width: 459px; width: 100%; margin-right: 0; display: block; float: none; }
    .categories ul li .thumb span { position: static; }    
    .thumb img { max-width: 459px; width: 100%; }
    .header-top { padding: 0 0 10px; }
}

@media only screen and (max-width : 321px) {
    .hide-on-phone { display: none; }
    .shell { width: 300px; min-width: 300px; }
    #header { padding-bottom: 0; }
    #navigation ul li { padding: 0 0 0 14px; display: block; overflow: hidden; }
    #navigation { padding-bottom: 0; }
    .categories.index-gallery { margin: 0; }
    .categories { margin: 0; }
    .categories ul { margin: 0; }
    .categories ul li { border-bottom: 0; padding: 0 0 15px; position: relative; width: 100%; }
    x.categories ul li .thumb { display: block; border-bottom: solid 0px #999; max-width: 300px; width: 300px; }
    x.categories ul li .thumb img { width: 300px; max-width: 300px; }
    x.categories ul li img, 
    x.categories ul li span { display: block; max-width: 300px;}
    x.categories ul li img { margin: 0 0 5px; }  
}