@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&display=swap');

* {		
	padding:0;
	margin:0;
}

body {
    color: #878787;
    font-family: Roboto,sans-serif;
    font-size: 1em;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	float: left;
	font-family: "Bricolage Grotesque",sans-serif;
	font-weight: 700;
	color: #000;
}

h1, footer h6 {
	font-weight: 900;	
	font-size: 2.25em;
}

h1 a, h1 a:visited {
	color: #000;
	text-decoration: none;
}

h2 {
	font-weight: 900;
	font-size: 4em;
	width:100%;
	margin-bottom: 1em;
}


h2.background-text {
    color: #f6f6f6;
    font-size: 15em;
    /*font-family: "Playfair Display",serif;*/
    font-weight: 900;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    white-space: nowrap;
}

h2.background-text.deg270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
}

h2.background-text#intro {
	font-size: 15em;
  	top: -11%;
	left: -23%;	
/*
	top: -90px;
	left: -290px;
*/
}

h2.background-text#portfolio {
    top: 45%;
	left: 100px;	
}

h2.background-text#more {
	font-size: 20em;
	top: -20%;
	left: 38%;
}

h4 {
	font-weight: 700;
	font-size: 1.5em;
	padding: 5px 0;
	line-height: 1.3em;
	letter-spacing: .01em;	
	width: 100%;	
}

p {
	padding-bottom: 20px;
	line-height: 1.5em;	
}

p a, p a:visited {
	color: #878787;
	text-decoration: none;
}

p a:hover {	
	color: #000;
	text-decoration: underline;
	transition: color .2s ease-out;
}

video {
	margin: 0 0 1.5em 0;
}

header, footer {
	width: 100%;
	overflow: hidden;
	background: #FFF;
}
/*
header {
	margin: 0 0 5% 0;
	border-bottom: 1px solid #dedede;	
	position: fixed;
	top: 0;	
	z-index: 100;	
}
*/

header {
	position: fixed;
	top:0;
	width: 100%;
	margin: 0 0 5% 0;
	border-bottom: 1px solid #dedede;	
	display: block;
	transition: top 0.6s;
	z-index: 100;
}
/*
header.header-appear {
	top: 0;
}
*/
header h1 {
	margin: 12px 0 0 70px;
}

header.no-margin {
	margin: 0;
}

footer {
	padding: 3em 0;
	margin-top: 6%;	
	text-align: center;
	border-top: 1px solid #dedede;
}

footer h6 {
	color: #8d8d8d;
	margin: auto;
	width: 100%;	
}

footer ul {
	clear: both;
	width: 355px;
	margin: auto;
}

nav {
	float: right;
	margin-right: 40px;
}

nav ul li, footer ul li {
	display: block;
	float: left;
	height: 100%;
	padding: 1.7em 0;
}

nav ul li a, footer a {	
	font-size: 15px;
	font-style: normal;
	line-height: 23px;
	color: #000;	
	padding: 0 2em;
	text-decoration: none;
}

nav ul li a:hover, footer a:hover {	
	color: #878787;
	text-decoration: underline;
	transition: color .2s ease-out;
}

footer p, footer p a {
	font-style: italic;
}

footer a {
	color: #8d8d8d;
}

footer a:hover {
	color: #000;	
}

ul {
	list-style-type: none;
	overflow: hidden;
}

#main {
	position: relative;
	width: 90%;
	margin: 150px auto 0;
	overflow: hidden;
}

div.grid-col-4, div.grid-col-8 {
	min-height: 1px;
	padding: 0 1.5em;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}

div.grid-col-4 {
	float: left;
	width: 33.3%;
}

div.grid-col-6 {
	float: left;
	width: 50%;
}

div.grid-col-8 {
	float: left;
	width: 66.6%;
}

div.grid-col-8 img {
	width: 100%;
	margin: 0 0 1.5em 0;
}

div.grid-col-12 {
	/*position: relative;*/
	width: 1304px;
	margin:auto;
	overflow:hidden
}

div#intro {
	position: relative;
	margin: auto;
	width: 720px;
}

div#intro p {
	font-size: 27px;
	color: #8d8d8d;
	padding: 4em 0 5em 0;
}

div#intro h2 {
	margin-bottom: 0.1em;
}

article {
	width: 650px;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 0 0 2em 0;
}

article .imageholder {
	transition-property: width height;
	box-sizing: border-box;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	-webkit-transition: 1s cubic-bezier(.075,.82,.165,1);
	-moz-transition: 1s cubic-bezier(.075,.82,.165,1);
	transition: 1s cubic-bezier(.075,.82,.165,1);
}

article p {
	font-family: Roboto,sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	letter-spacing: .05em;
	display: inline-block;
	line-height: 20px;
	margin: 0 3px 0 0;
	padding: 0 6px 0 0;
	vertical-align: middle;
	position: relative;
	color: #878787;	
}

article a {
	text-decoration:none;
}

article.landscape {
	padding: 5% 0;
}

article.portrait {
	padding: 0 90px;
}

article .imageholder:hover {
	-webkit-clip-path: inset(5% 5% 5% 5%);
	clip-path: inset(5% 5% 5% 5%);
}

article .image {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

button {
	margin: 3em 0;
	padding: 1.5em 4em;	
	background: #000;
	border-radius: 30px;
	border: 0;
}

button a, button a:visited {
	color: #FFF;
	font-weight: bold;
	font-size: 110%;
	text-decoration: none;
}

div#client-overview {
	position: relative;
	margin-top: 5%;
	padding-top: 2%;	
}

div#client-overview h4 {
	padding-bottom: 20px;
}

div#client-overview ul{
	border: 0 solid #dedede;
	border-width: 0 0 1px 1px;
}

div#client-overview ul li {
	float: left;
	width: 24.85%;
	border: 0 solid #dedede;
	border-width: 1px 1px 0 0;
	overflow: hidden;
}

div#client-overview ul li.end-row {
	margin-right: 50%;
}

div#client-overview ul li span {
	display: none;
}

div#client-overview ul li .logo {
	width: 165px;
	overflow: hidden;
	margin: 1em auto;
}

div#client-overview ul li .logo img {
	width: 165px;
	height: 115px;
}

div#case ul {
	margin: 0 1em;
	line-height: 1.5em;
	list-style-type: disc;
	overflow: visible;
}

div.case-facts {
	margin: 1.75em 0;	
}

div.case-facts .case-fact-item {
	margin: .25em 0;	
}

div.case-facts .case-fact-item h4.title {
	width: 130px;
}

div.case-facts .case-fact-item p {
	padding-top: 12px;
}

/*
div#case {
	position: fixed;
	top: 150px;
	right: 0;
	z-index: 100;
	transform: translateX(-5.25%);
}
*/