@charset "UTF-8";
/* CSS Document */

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-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;
}
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;
}

html{
	background: #ffffff;
	scroll-behavior: smooth;
}

body{
	/*
	margin-left: 80px;
	margin-right: 80px;
	*/
}

.column-12{
	width: 100%;
}

.column-10{
	width: 83.333%;
}

.column-8{
	width: 66.666%;
	float: left;
}

.column-7{
	width: 58.333%;
	float: left;
}

.column-6{
	width: 50%;
	float: left;
}

.column-5{
	width: 41.666%;
	float: left;
}

.column-4{
	width: calc(33.333% - 24px);
	float: left;
}

.column-3{
	width: calc(25% - 24px);
	float: left;
}

.column-2{
	width: 16.666%;
}

h1{
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 56px;
	font-weight: 800;
	color: #000000;
	line-height: 80px;
}

p{
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 24px;
	font-weight: 400;
	color: #000000;
	line-height: 32px;
}

header{
	display: block;
	padding-top: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #000000;
	position: fixed;
	width: calc(100% - 160px);
	margin-right: 80px;
	margin-left: 80px;
}


input, textarea{
	width: calc(100% - 34px);
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	line-height: 24px;
	padding: 16px;
	border: 1px solid #000000;
}

textarea{
	height: 150px;
}

.hide{
	display: none;
}

.contact .button{
	width: auto !important;
	margin-top: 72px;
}

.mobile-nav{
	display: none;
}

.clear{
	clear: both;
}

.navigation a{
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 16px;
	font-weight: 800;
	color: #000000;
	line-height: 24px;
	text-decoration: none;
	margin-right: 40px;
}

.logo{
	float: left;
}

.links{
	float: right;
}

.links a{
	float: left;
	margin-left: 24px;
}

.navigation{
	float: right;
	margin-right: 16px;
}

.right-nav{
	float: right;
	padding-top: 16px;
}

.intro-section, .work-section{
	padding-top: 160px;
	padding-left: 80px;
    padding-right: 80px;
    height: calc(100vh - 160px);
    width: calc(100% - 160px);
}

.clear{
	float:both;
}

.project .work-section{
	height: auto;
}

.project .work-image, .contact .work-image{
	box-shadow: none;
}

.project .intro-section{

    margin-left:  80px;
    margin-right:  80px;
    padding-left:  0px;
    padding-right:  0px;

}

.about .intro-section{
	height: auto;
}

.about .column-8{
	float: none;
}

.about p{
	margin-bottom: 72px;
}

.about .intro-section{
	margin-bottom: 160px;
}

.contact .intro-section{
	margin-bottom: 160px;

}

.intro{
	width: 83.333%;
	margin-bottom: 48px;
}

.button{
	padding: 16px 32px;
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 16px;
	font-weight: 800;
	color: #ffffff;
	line-height: 24px;
	text-decoration: none;
	background: #000000;
	border-radius: 28px;
	display: inline-block;
}

.white-bg a{
	color: #000000;
}

.eyebrow{
	font-family: "Raleway", helvetica, arial, san-serif;
	font-size: 16px;
	font-weight: 800;
	color: #000000;
	line-height: 24px;
	margin-bottom: 24px;
}

.work-text p{
	margin-top: 24px;
	margin-bottom: 72px;
	padding-right: 96px;
}

.work-section img{
	width: 100%;
	
}

.work-image{
	overflow: hidden;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.work-text h1{
	padding-right: 96px;
}

.quala{
	background: url('../images/quala-hero.png') no-repeat 0px 132px;
	background-size: 100%;
}

.blackrock{
	background: url('../images/blackrock-hero.png') no-repeat 0px 132px;
	background-size: 100%;
}

.iheart{
	background: url('../images/iheart-hero.png') no-repeat 0px 132px;
	background-size: 100%;
}

.schwab{
	background: url('../images/schwab-hero.png') no-repeat 0px 132px;
}

.hu{
	background: url('../images/hu-hero.png') no-repeat 0px 132px;
	background-size: 100%;
}

.hz{
	background: url('../images/hz-hero.png') no-repeat 0px 132px;
	background-size: 100%;
}

.fairtrade{
	background: url('../images/ft-hero.png') no-repeat 0px 132px;
}

.contact .eyebrow{
	margin-bottom: 8px;
	margin-top: 24px;
}

.next-project{
	background: #000000;
	margin-top: 112px;
	height: calc(100vh - 250px);
	margin-bottom: 80px;
	padding-top: 64px;
}

.next-project .button{
	text-align: center;
	padding-right: 32px !important;
	color: #000000 !important;
	display: block !important;
	width: 104px;
    margin-top: 72px;

}

.white{
	color: #ffffff;
}

.white-bg{
	background: #ffffff;
}

.centered{
	text-align: center;
	margin: 0 auto;
	padding-right: 0px !important;
	float: none !important;
}

.hero-space{
	margin-top: 112px;
}

.intro-section p{
	padding-top: 24px;
}

.gutter{
	width: 32px;
	height: 32px;
	float: left;
}

.spacer{
	width: 100%;
	height: 32px;
	clear: both;
}

#quala{
	background: linear-gradient(60deg, #F5F5F7 60%, #016938 60%);
}

#blackrock{
	background: linear-gradient(-60deg, #655EBC 40%, #000000 40%);
}

#blackrock .eyebrow, #blackrock h1, #blackrock p, #iheart .eyebrow, #iheart h1, #iheart p{
	color: #ffffff;
}

#blackrock a, #iheart a{
	background: #ffffff;
	color: #000000;
}

#iheart{
	background: linear-gradient(-60deg, #0B0F19 40%, #631C89 40%);
}

#schwab{
	background: linear-gradient(-60deg, #00A0DF 40%, #ffffff 40%);
}

#fairtrade{
	background: linear-gradient(60deg, #93D73B 60%, #ffffff 60%);
}

#hu{
	background: linear-gradient(-60deg, #62B25E 40%, #FFD34E 40%);
}

#hz{
	background: linear-gradient(60deg, #ffffff 60%, #105F9A 60%);
}

.white-nav{
	color: #ffffff !important;
}

.invert{
	filter: invert(1);
}

@media (max-width: 1024px) {

	body{
		/*
		margin-left: 24px;
		margin-right: 24px;
		*/
	}

	h1{
		font-size: 40px;
		line-height: 56px;
	}

	p{
		font-size: 16px;
		line-height: 24px;
	}

	header{
		width: calc(100% - 48px);
		margin-left: 24px;
		margin-right: 24px;
	}

	.intro-section, .work-section{
		padding-left: 24px;
		padding-right: 24px;
		width: calc(100% - 48px) !important;
		height: auto;
		padding-bottom: 80px;
	}

	.intro-section{
		height: 100vh;
	}

	.work-text{
		margin-top:112px;
	}


	.intro{
		width: 100%;
	}

	.button{
		margin-bottom: 40px;
	}

	.gutter{
		width: 24px;
	}
   
	.column-12{
		width: 100%;
	}



	.column-8{
		width: 90%;
		float: left;
	}

	.column-7{
		width: 100%;
		float: left;
	}

	.column-6{
		width: 100%;
		float: left;
	}

	.column-5{
		width: 100%;
		float: left;
	}

	.column-3{
		width: calc(50% - 24px);
		margin-top: 32px;
		float: left;
	}

	.contact .work-text{
		margin-top: 0px;
	}



}

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

	.column-10{
		width: 50%;
	}

	.column-2{
		width: 50%;
	}

	.mobile-nav{
		display: block;
		float: right;
		padding-top: 16px;
	}

	.navigation a{
		margin-right: 0px;
		display: block;
		text-align: center;
		margin: 0 auto;
		
	}

	.menu-wrapper a{
		font-size: 40px;
		line-height: 80px;
	}

	.navigation{
		
	    width: 100%;
	    float: none;
	}

	.links{
		float: none;
	    width: 146px;
	    height: 80px;
	    margin: 0 auto;
	}


	.right-nav{
		display: none;
	}

	.hero-space{
		margin-top: 40px;
	}

	.next-project{
		padding-bottom: 64px;
	}

	.column-3{
		width: 100%;
		margin-top: 32px;
		float: left;
	}

	.work-text p, .worktext h1{
		padding-right: 0px;
	}

	.menu-wrapper{
		height: 370px;
		padding-top: 160px;
	}

	.intro-section, .work-section{
		padding-left: 24px !important;
		padding-right: 24px !important;
		width: calc(100% - 48px) !important;
		height: auto;
		padding-bottom: 80px;
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

}