/* GLOBALS */
	* {transition: all 150ms ease-in-out;}
	body {height:100%;background-color: rgb(255, 255, 255);  font: 400 0.875em/1.14 "averta-std", "neuzeit-grotesk", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";  color: rgb(0, 0, 0);}
	html {height:100%;opacity: 0}
	html.wf-active {opacity: 1}
	html.wf-inactive {opacity: 1}
        .image {opacity:0;}
	a {color:#32A68C}
	a:hover {color:#B5B5B5}
/* HEADER */
	.grand {position: relative; float: left; width: 100%; height:auto;  margin-top: 30px;}
	.grand .image {opacity:1;position: absolute; top: 26px;  left: inherit; z-index: 23; width: 228px;}
/* LAYOUT */
	.wrapper {z-index: 25; width: 1016px; margin: 0 auto;}
	.main {position: relative;float: left;clear: both;width: 100%; margin-top: 29px;}
	.left-cols, .right-cols {position: relative; float: left; height: auto;}
	.left-cols {width: 40%;}
	.right-cols {width: 60%;}
	.right-cols .image {float: left; width: 100%;}
	.right-cols figure:first-of-type .image {margin-top: 0px}
	.right-cols .image {margin-top: 18px; float:none;}
	.image {display: block; height: auto;overflow: hidden;}
	figure.video {margin-top:18px;}
	hr.rule {display:none!important;width: 35px;float: left;border: 1.25px solid #000;color:#000; margin-top: 18px;margin-bottom: 10px;}
		/*.left-cols .title, .left-cols .subtitle .left-cols .rule .left-cols .desc {}*/
	.left-cols .icon {width: 55px;height: 55px;}
/* NAVIGATION */
	.navigation {position: relative; float: right; width: 23.125%; margin: 36px 0 0 67.4797%;}/*height: 121px;*/
	.navlist {position: relative;  float: left;  z-index: 20; width: 100%;  height: 86px; /*121*/}
	.navlist a:hover, .navlistitemmobile a:hover {color:#32A68C}
	.navlistitem, .navlistitemmobile { position: relative; float: left; width: 100%; height: 22px;}
	.navlistitem a, .navlistitemmobile a {font-weight:600; display: block; min-height: 21px; font-size: 1em; line-height: 1.38; text-align: left; color: #000;}
	.navlistitem a {text-align: right;}
	.navmobile {display: none; position: absolute; top: 0px; left: 0; right: 0; z-index: 15; width: 90%;  height: 228px;  margin: 0 auto;}
	.navmobilebutton {display: none; position: absolute; top: 0px; left: -0.006650705%; z-index: 99; width: 99.9135408353%; min-height: 21px; font: normal 1.071em/1.38 FontAwesome; text-align: right; color: #000;}
	.navmobile {visibility: none;}
	.navmobilebuttonclose {display:none;}
	.wrapper .navmobile {visibility: hidden;}
/* CONTACT */
	#contactform .title {margin-left:0px;margin-bottom:10px;}
	#contactform label{display:inline-block;margin-bottom:3px;font-family: "averta-std";font-weight: 600;font-size: 0.9em}
	#contactform input, #contactform textarea, #contactform button {font-weight:300;background: rgb(243, 243, 243); width: 50%;padding:4px;margin-bottom: 6px}
	#contactform button {background:#32A68C;color:#FFF;}
	#contactform button:hover {-webkit-box-shadow:inset 0px 0px 0px 1px #32A68C;-moz-box-shadow:inset 0px 0px 0px 1px #32A68C; box-shadow:inset 0px 0px 0px 1px #32A68C; color:#32A68C;background:#FFF;}
        .social {margin-top: 1.5em;display: block;}
/* TYPOGRAPHY */
	svg path {fill:#1f3b48!important}
	.title, .subtitle {color:#000;font-size: 2em;font-weight: 800;line-height: 1;letter-spacing: 0.05em;}
	
	.title {font-weight: 600; letter-spacing: 0em; font-size: 1.75em;}

	/*.subtitle {color:#8FB0A8;font-size: 1em;font-weight:700;line-height: 1.25em;display: block;margin-top: 3%;}*/
	.subtitle {display:none!important;color: #ADB4B2; font-size: 1em; font-weight: 600; line-height: 1.2em; display: block; margin-top: 3%;}
        .desc {display: block;float: left; clear: both;  width: 72%;  margin: 10px 0 0 0; font-size: 1em; line-height: 1.15; font-weight: 400;  color: #000;  letter-spacing: 0.015em;}
	/* .project .icon {margin-right:5%;float:left;} */
	#contactform p, .desc  {font-family: "neuzeit-grotesk", "averta-std", "Helvetica Neue", sans-serif;}
	@media  (min-width: 62em)  {
	header.typography.singlelinetitle .subtitle {margin-top: 0;}
	header.typography.singlelinetitle .title{line-height:2}
	}
/* UTILITY */
	.blur {-webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px);  -ms-filter: blur(0px); filter: blur(0px);}
	.blind {opacity:0;}
	.uniform__potty {position: absolute;top: -9999px;left: -9999px;}
	.bees::before {content: "\0040";}
        .project.zoomed .right-cols {width: 100%;margin-top:2.5em;}
        img {color: transparent;}
/* LRG ONLY */
	.navmobile {visibility: none;opacity: 0}
	.navmobilebuttonclose {display:none;}
/* FOOTER */
	footer {position: relative;float: left; clear: both; width: 100%; height: 48px; margin-top: 30px;margin-bottom:30px}
	.copyright {float: right;text-align: right;width: 100%;color: #B5B5B5;font-size: 0.85em;line-height: 1.25em;display: block;margin-top: 3%;font-weight: 400;}
	.copyright .controls {margin-right:1%;}
	.copyright .controls a {margin-right: 0.5%;}
/* THE GRID */
	.works li img {width: 32.18%; float: left; margin-left: 1.7%; margin-bottom: 1.7%}
        .works li a .image:hover[style] {opacity:0.65!important;}
/* XL - NO COLOUR - Largest devices (desktops, 75em and up) */
@media (min-width: 75em) {
	.works li:nth-child(3n+1) img, .works li:first-of-type img {margin-left:0px;}
	/*.project .subtitle, .project .desc {margin-left: 19%; }*/
}
/* L - GREEN - Large devices (desktops, 62em and up) */
@media (min-width: 62em) and  (max-width: 74.9em)  {
	/*.title {color:green;}*/
	.project .desc br {display:none;}	
	.wrapper {width: 920px;}
	/*.project .subtitle, .project .desc {margin-left: 20%; }*/
	.works li:nth-child(3n+1) img, .works li:first-of-type img {margin-left:0px;}
}

/* M - BLUE - Medium devices (tablets, 48em and up) */
@media (min-width: 48em) and (max-width: 61.9em) {
	/*.title {color:blue;}*/
	.project .desc br {display:none;}
	.wrapper {width:84%;}
        #contactform input, #contactform textarea, #contactform button {width:100%;}

	/*.project .subtitle, .desc {margin-left:0%; }*/
	/*.project .icon {float:none;}*/
	.works li:nth-child(3n+1) img, .works li:first-of-type img {margin-left:0px;}
}

/* S - YELLOW -Small devices (landscape phones, 34em and up) */
@media (min-width: 34em) and (max-width: 47.9em) { 
	/*.title {color:yellow;}*/
	.project .desc br {display:none;}
	.desc {width:60%;}
	.wrapper {width:86%;}
	.left-cols {width: 100%;margin-bottom: 7%}
	.right-cols {width: 100%;}
	.navlist .navlistitem {display: none;}
	.navlistitem a {display: none;}
	.navigationmobile {position: absolute;  top: 53px;  left: 8.9494163424%;  z-index: 14;  width: 22.8538424124%;}
	.navigation .navmobilebutton {display: block;width: 100%;}
	.navigationmobile .navlistmobile {width: 90%;	margin-top: 170px;}
 	.navlistmobile .navlistitemmobile {position: relative;}
	.navmobile .navigationmobile {top: 0; bottom: 0; left: 0; right: 0; width: 95.14%; margin: auto;}
        #contactform input, #contactform textarea, #contactform button {width:100%;}
	.visible, .wrapper .navmobile.visible {visibility: visible ; display:inline-block ; opacity:0.9 ;transition: opacity 150ms ease-in-out;z-index: 10 ;}
	.invisible, .wrapper .navmobile.invisible {visibility: none ; display:none ; opacity:0 ;transition: opacity 150ms ease-in-out;z-index: -9999;}
	.blur {-webkit-filter: blur(12px); -moz-filter: blur(12px); -o-filter: blur(12px);  -ms-filter: blur(12px); filter: blur(12px);opacity: 0.1}

        header.typography.linebreakerone .title .word1::after , header.typography.linebreakertwo .title .word2::after, header.typography.linebreakerthree .title .word3::after,  header.typography.linebreakerfour .title .word4::after {content:"\a"; white-space: pre;}
         
         .subtitle {margin-top: 2%}

	.project  .subtitle, .desc {margin-left:0%; }
	.project  .icon {float:none;}

  	.works li:nth-child(2n+1) img, .works li:first-of-type img {margin-left:0px!important;}
  	.works li img {width: 48.6%; float: left; margin-left: 2.7%; margin-bottom: 2.7%;}
}

/* XS - PURPLE - Smallest devices (portrait phones, 33em and down) */
@media (max-width: 33.9em) {	
	/*.title {color:purple;}*/
	.project .desc br {display:none;}

        .desc {width: 100%}
	.wrapper {width:80%;}
	.left-cols {width: 100%;margin-bottom: 10%}
	.right-cols {width: 100%;}	
        .subtitle {margin-top: 3.5%}

	.navlist .navlistitem {display: none;}
	.navlistitem a {display: none;}
	.navigationmobile {position: absolute;  top: 53px;  left: 8.9494163424%;  z-index: 14;  width: 22.8538424124%;}
	.navigation .navmobilebutton {display: block;width: 100%;}
	.navigationmobile .navlistmobile {width: 90%;	margin-top: 170px;}
 	.navlistmobile .navlistitemmobile {position: relative;}
	.navmobile .navigationmobile {top: 0; bottom: 0; left: 0; right: 0; width: 90%; margin: auto;}
        #contactform input, #contactform textarea, #contactform button {width:100%;}
	.visible, .wrapper .navmobile.visible {visibility: visible ; display:inline-block ; opacity:0.9 ;transition: opacity 150ms ease-in-out;z-index: 10 ;}
	.invisible, .wrapper .navmobile.invisible {visibility: none ; display:none ; opacity:0 ;transition: opacity 150ms ease-in-out;z-index: -9999;}
	.blur {-webkit-filter: blur(12px); -moz-filter: blur(12px); -o-filter: blur(12px);  -ms-filter: blur(12px); filter: blur(12px); opacity: 0.1}

        /*header.typography.linebreakerone .title .word1::after , header.typography.linebreakertwo .title .word2::after, header.typography.linebreakerthree .title .word3::after,  header.typography.linebreakerfour .title .word4::after {content:"\a"; white-space: pre;}*/

	.project .subtitle, .desc {margin-left:0%; }
	.project .icon {float:none;}

	.works li img {width: 100%; margin-bottom: 4.7%; margin-left: 0%;}

	.copyright {width:100%;}