html,body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 300;
	color: #000;
	font-size: 1em;
}

.wrap{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.main{
	width: 90%;
	margin: 70px auto 70px;
	border-left: 1px solid black;
	text-align: left;
	padding-left: 20px;
	padding-bottom: 45px;
}

.header{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

h1{
	font-size: 20px;
}

h1{
	margin: 0 0 30px;
}

ul.nav{
	text-indent: 0;
	margin: 0;
	padding: 0;
}

ul.nav li{
	display: inline;
	padding-right: 10px;
}

ul.nav li:last-child{
	padding-right: 0;
}

.nav-main{
	text-align: right
}

ul.nav.nav-sub a:link, ul.nav.nav-sub a:visited{
	color: #3753CC;
}

.intro{
	margin: 2em 0 4em;
	width: 100%;
}

.intro p{
	line-height: 1.5em;
	margin: 0;
	color: #747474;
	font-size: 1.25em;
}

h1, h2, h3, h4{
	font-family: "Source Sans Pro", Courier, serif;
	font-weight: 300;
	margin: 0;
}

h2, h3{
	font-size: 3em;
	margin: 1.5em 0;
}

.single h3{
	margin-bottom: 0.25em;
}

.single h4{
	font-size: 2em;
	margin: 2em 0 .5em;
}

h1 .highlight{
	box-shadow: 2px 0 0 #FFF75E, -2px 0 0 #FFF75E;
}

.highlight, .selected{
	background-color: #FFF75E;
    /* padding: 0 5px; */
    display: inline;
    box-shadow: 5px 0 0 #FFF75E, -5px 0 0 #FFF75E;
}

.work-block{
	margin: 20px 0 100px;
}

h2{
	background-color: #eaeaea;
    padding: 15px 20px;
    margin-left: -20px;
}

.single h2{
	margin-bottom: 2em;
    margin-top: 3em;
}

h2 a:link, h2 a:visited, h1 a:link, h1 a:visited, h3 a:link, h3 a:visited{
	color: inherit;
	font-weight: inherit;
	text-decoration: inherit;
}

h3 a:hover{
	color: #3753CC;
}

.work-block .hero{
	width: 100%;
}

.work-block .hero .sub.press{
	margin-bottom: 50px;
}

.front .work-block .hero{
	margin-bottom: 8em;
}

.work-title{
	font-size: 3em;
    font-weight: 300;
}

a.highlight:hover{
	background-color: #3753cc;
	color: #fff;
	box-shadow: 5px 0 0 #3753cc, -5px 0 0 #3753cc;
}

.work-title a.highlight:hover{
	color: #fff;
}

.work-title a:link, .work-title a:visited{
	color: inherit;
    text-decoration: none;
    font-weight: 300;
}
/*
.work-title a:hover{
	text-decoration: underline;
}*/

.single .work-title{
	margin: 0;
}

.single img{
	max-width: 100%;
}

.single .video{
	position:relative;height:0;padding-bottom:56.25%
}

.description{
	font-size: 1.5em;
	font-weight: 300;
	margin: 0 0 1.5em;
}

.description, .sub{
	color: #747474;
}

a:link{
	font-weight: 300;
    color: #3753CC;
}

.intro a:link{
	text-decoration: none;
}

.intro a:visited{
	color: #3753CC;
}

.intro a:hover{
	text-decoration: underline;
}

.sub{
	
    font-weight: 300;
    margin: 10px 0;
    font-size: 1.25em;
}	

.sub.press{
	color: #bfbfbf;
	margin-bottom: 50px;
}

.work-bodytext .sub.press{
	margin-bottom: 1em;
}

.sub.press a:link, .sub.press a:visited{
	color: inherit;
	text-decoration: none;
}

.sub.press a:hover{
	text-decoration: underline;
}

.sub.press span:not(:last-child):after{
	content: ",";
}

.thumb{
	width: 100%;
}

.subwork{
	width: 42%;
	float: left;
}

.subwork .work-title{
	font-size: 2em;
}

.subwork .sub{
	font-size: 1em;
}

.subwork .thumb{
	width: 100%;
}

.subwork.first{
	margin-right:6%;
}

.subwork .press{
	display: none;
}

.single .row{
	display: flex;
	margin-bottom: 30px;
}

.single .subwork.first{
	margin-right: 0;
	margin-bottom: 2em;
}

.single .subwork{
	float: none;
	width: 46%;
	margin-bottom: 2em;
}

.front .more{
	padding-top: 70px;
}

.more{
	clear: both;
	padding-top: 50px;
}

.more a:link, .more a:visited{
	color: #fff;
	background-color:#3753cc;
	padding:11px 22px;
	text-decoration: none;	
	font-size: 24px;
}

.more a:after{
	content:" \00BB"
}

.more a:hover{
	text-decoration: underline;
}

.single .more{
	padding-top: 0px;
	margin: 3em 0;
}

.single .more a:link, .single .more a:visited{
	font-size: 18px;
	background-color: #7FCC37;
}

.single .more.singleend{
	padding: 50px 0;
}

.single .more.singleend a:link, .single .more.singleend a:visited{
	background-color: #3753cc;
}

.single .related{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



sup{
	font-size: 28px;
	color: #898989;
}

.portrait{
	width: 25%;
    float: left;
    margin-right: 50px;
}

.portrait img{
	width: 100%;
}

.ending h2{
	margin-bottom: 60px;
}

.about{
	margin: 1em 0;
}

.front .work-block.solo .hero{
	margin-bottom: 0px;
}

.work-block.ending{
	margin-bottom: 0px;
}

.lastline{
	font-size: 25px;
	margin: 100px 0 0;
}

.work-bodytext{
	font-size: 1.25em;
	margin: 1em 0;
	line-height: 1.5em;
}

.work-bodytext h4{
	font-size: 1.75em;
	line-height: 1.25em;
}

.work-bodytext .sub{
	font-size: 1em;
}

.embed video{
	width: 100%;
}


.role {
	font-size: 1em;
	color: #898989;
	border-top: 1px solid #bfbfbf;
	margin: 2em 0 0;
}

.role h5{
	
	font-weight: inherit;
	margin: 0;
	font-size: inherit;
}

.role p{
	margin: 0;
}

.role ul{
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.role li{
	display: inline;
}

.role li:before{
	content: "•";
}

.about h3{
	margin-bottom: .5em;
	margin-top: 0;
}

@media only screen and (max-width: 600px){
	h1, h2, h3, h4{
		font-size: 2em;
	}

	h1{
		font-size: 1.25em;
		margin-bottom: .5em;
	}

	.header{
		display: block;
	}

	.intro{
		width: 100%;
	}

	.main{
		margin-top: 35px;
		width: 92%;
		border-left: none;
		padding-left: 0;
	}

	ul.nav.nav-sub {
	    margin-bottom: 50px;
	}

	sup {
    	font-size: 20px;
	}

	.work-block{
		margin-bottom: 90px;
	}

	.work-title{
		font-size: 2em;
	}

	.sub{
		font-size: 1.25em;
	}

	.work-block .hero .sub.press {
	    margin-bottom: 30px;
	}

	.front .work-block .hero{
		margin-bottom: 5em;
	}

	.subwork {
	    width: auto;
    	float: none;
	}

	.single .row {
	    display: block;
	}

	.more a:link, .more a:visited{
		font-size: 18px;
	}

	.more.long a:link, .more.long a:visited{
		font-size: 13px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.front .work-block.solo .more{
		padding-top: 50px;
	}

	.lastline{
		font-size: 20px;
	}

	.single .subwork {
		width: 100%;
	}

	.single .subwork .press{
		margin-bottom: 40px;
	}

	.portrait{
		margin-right: 20px;
		width: 40%;
	}

	.role {
		width: 100%;
		font-size: 1em;
		color: #898989;
		border-top: 1px solid #bfbfbf;
		margin: 2em 0 0;
	}

	.about h3{
		border-top: none;
	}
}

@media only screen and (max-width: 350px){
	h1, h2, h3{
		font-size: 26px;
	}

}