/** Building blocks **/


html{
	height: 100%}

body{
	min-height: 100%;
	display: flex;
	flex-direction: column;
	transition: background 1s ease;
	background: #fff;}

	@media screen and (prefers-color-scheme: dark) {
	  body {
		background: #222;
		color: #eee;
	  }
	
	  h1, .lead, strong {
		color: #fff;
	  }
	}

.container{
	margin:0 auto 0}

.content{
	flex:1}



body {

    animation: fadein .5s;
    -moz-animation: fadein .5s; /* Firefox */
    -webkit-animation: fadein .5s; /* Safari and Chrome */
    -o-animation: fadein .5s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}



a{
	text-decoration: none;
	color: #ed4b37;
    border-bottom: 1px solid;
    border-bottom-color: #ed4b37;
    background:none;
    padding:0;
}


a:hover {
      border-bottom-color: transparent;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Squiggle-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-50%);}}%3C/style%3E%3Cpath fill='none' stroke='#ed4b37' stroke-width='1.5' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0 1.2em;
    background-size: auto 3px;
    background-repeat:repeat-x;
    padding-bottom:3px;
    text-decoration: none;
}



/** Header & nav **/


header{
	
	margin:40px 0 96px;
	padding:0px 0 0 0;
}

	header svg{
		max-width:60%}

	header a{
		box-shadow: none;
		text-decoration: none;
		display: inline-block;
		border:0;
		background:none}

	header a:hover{
		box-shadow: none;
		background:none;
		padding:0}

	header a:hover g{
		fill:#000;
		box-shadow: none}

	header a:active g{
		fill:dodgerblue}



nav{
	float: right;
}

	nav a{
		transition: background 0.25s ease;
		float: left;
		display: block;
		margin:0 0 0 100px;
		text-align:right;
		text-decoration: none;
		color: #444;
		display: inline;
		font-size:1.15rem;
		font-family:"CalibreRegular";
	}


	nav a:hover{
		background-color: #333;
		padding:8px;
		margin:-8px;
		margin-left:92px;
		color:#fff;
	}




.hero{
	margin-bottom: 152px;
}



/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

		.container{
		  width:90%;
		}

	html {
	}
		
		

    }

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

		.container{
		  width:90%;
		}


    }

/* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

		.container{
		  max-width:90%;
		}

    }

/* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

		.container{
		max-width:960px;
		}

	html {
	}

    }

/* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

		.container{
			max-width:1060px;
		}

	html {
	}
		


    }









ul {
	list-style-type: none;
	padding:0;
}



.tags{
	color:#ccc;
	font-size:10px;
	line-height: 16px;
	font-weight: 400;
	list-style:none;
	margin:0 0 60px 0;
	padding:0;
	font-family: "Roboto Mono";
}

.tags li{
	float:left;
	margin:0 20px 0 0;
	text-transform: uppercase;
	
}



/** Work **/

.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 100%;
	vertical-align: top;
	margin:3rem 0 0 0;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #222;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

/* Nao */
.input--nao {
	overflow: hidden;
	padding-top: 1rem;
}

.input__field--nao {
	padding: 1em 0em 0;
	width: 100%;
	background: transparent;
	color: #000;
	font-size: 2rem;
	line-height:2rem;
	letter-spacing:-0.025rem;
	font-family: "CalibreSemibold";
}

.input__label--nao {
	position: absolute;
	top: 0.2em;
	left: 0;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0em;
	pointer-events: none;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
	transition: transform 0.2s 0.15s, color 1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.graphic--nao {
	stroke: #ddd;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
	transition: transform 0.7s, stroke 0.7s;
	-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
} 

.input__field--nao:focus + .input__label--nao,
.input--filled .input__label--nao {
	color: #ed4b37;
	-webkit-transform: translate3d(0, -0.25rem, 0) scale3d(0.75, 0.75, 1);
	transform: translate3d(0, -0.25rem, 0) scale3d(0.75, 0.75, 1);
}

.input__field--nao:focus ~ .graphic--nao,
.input--filled .graphic--nao {
	stroke: #c00;
	-webkit-transform: translate3d(-66.6%, 0, 0);
	transform: translate3d(-66.6%, 0, 0);
}



.featuredcase{
	border-bottom:1px solid #e1e1e1;
}

	.featuredcase h3{
		font-size: 1.588rem;
		line-height: 1.765rem;
	}

	.featuredcase p{
		font-size: 1.118rem;
		line-height: 1.529rem;
	}
	
	.featuredcase a.coming{
		padding:8px 20px;
		font-size: 0.941rem;
		text-decoration:none;
		border:1px solid #ddd;
		display: inline-block;
		color:#999;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
		box-shadow: none;
		text-align:center;
		cursor:no-drop;
		margin:20px 0 0 0;

	}

	hr.separator{
		    border: 0;
		    height: 0;
		    border-top: 1px solid #fff;
		    border-bottom: 1px solid #fff;
		    margin:50px 0;
		    
	}

/** Resume **/


.comingsoon{
	background:#F6F8DE;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: "Roboto Mono", monospace;
	font-weight: 400;
	font-size:9px;
	color:#A8AF05;
	letter-spacing:0.015rem;
	text-transform: uppercase;
	padding:2px 8px;
	margin-left:5px;
	vertical-align: text-bottom;
}

.projectinfo{
	margin-top: 1.8rem;
	letter-spacing:normal;
}


.projectinfo li{
	font-family: "Roboto Mono";
	font-size:11px;
	line-height:16px;
	margin-bottom:8px;
	color:#bbb;
	font-weight:lighter;
	color:#888;

}


.projectinfo li strong{
	font-family: "Roboto Mono";
	color:#bbb;
	font-weight:lighter;
}





@keyframes squigglevision {
  0% {
    filter: url("#turbulence-1");
  }
  25% {
    filter: url("#turbulence-2");
  }
  50% {
    filter: url("#turbulence-3");
  }
  75% {
    filter: url("#turbulence-4");
  }
  100% {
    filter: url("#turbulence-5");
  }
}

.squiggle {
  animation: squigglevision 0.4s infinite alternate;
}



/** Home **/

#mentor{
	margin-top:208px;
}




/** Footer **/


footer {
    margin:120px 0 0;
	padding:3rem 0 2rem;
	font-family: 'CalibreRegular';
	font-size: 18px;
	line-height: 28px;
	color:#999;
}
	
	footer p{
		margin-top:0;
	}

	
	ul{
		margin:0;
	}


	footer a{
		color:#000;
		text-decoration: none;
		border:0;
	}
	
	footer a:hover{
		color: #999;
		border:0;
		background:none;
	}
	

/** About **/

.gallery{
	margin:5rem auto;
	max-width: 90%}
	

	.gallery img{
		margin:0 0 1.5560rem 0;
		width:100%;
	}
	
	
	

/** Fixed scroll portfolio **/


.parentContainer {
	width: 100%;
	padding: 7% 70px;
	max-width: 1430px;
	margin: 0 auto; /* horizontally center parentContainer */
	box-sizing: border-box;
	
	display: flex; /* put stickyContainer and imageContainer side by side */
	align-items: flex-start; /* prevent stickyContainer from spanning the entire height of parentContainer */
	justify-content: space-between; /* align stickyContainer and img to their respective left/right edges of the parentContainer */
}

.stickyContainer {
  position: -webkit-sticky; /* http://caniuse.com/#feat=css-sticky */
	position: sticky;
	top: 10%; /* tell this element where to stick */
}

img{
	max-width:100%;
}


.b-lazy {
        -webkit-transition: opacity 300ms ease-in-out;
           -moz-transition: opacity 300ms ease-in-out;
             -o-transition: opacity 300ms ease-in-out;
                transition: opacity 300ms ease-in-out;
                 max-width: 100%;
                   opacity: 0;
                   background-color: #eee;
    }
    .b-lazy.b-loaded {
                   opacity: 1;
                   background-color: #fff;
    }
    
    
    
    
ul.sidelist li{
	color: #000;
	font-size: 19px;
	line-height: 24px;
}

.sidelist .data{
	border-bottom: 1px solid #979797;
	padding-bottom:6px;
	margin-bottom:8px;
}

.sidelist .data:last-of-type{
	border-bottom: 0;
	padding-bottom:6px;
	margin-bottom:8px;
}

.sidelist strong{
	color: #000;
	font-family: "CalibreMedium";
	letter-spacing:0.1px;
}


.worksample .cover{
	padding-bottom:0;
	margin-bottom:88px;
}

.worksample h3{
	font-size: 76px;
	line-height: 80px;
	margin:0 0 96px 0;
	font-family: "CalibreSemibold";
	letter-spacing: -3px;
	text-transform: lowercase;
}


.worksample h4{
	color: #aaa;
	font-family: "CalibreRegular";
	font-size: 52px;
	line-height: 64px;
	margin:0 0 0 0;
	letter-spacing: -1.5px;
	text-transform: lowercase;
	}
	
.space{
	margin-top:72px;
}


.case{
	list-style:none;
	background:#fbfbfb;
	padding:32px 30px 16px;
	margin:32px -30px;
	}

	.case li{
		margin-bottom:8px;
		margin-left:20px;
		position: relative;

	}
	
	.case li:before{
		    position: absolute;
    display: block;
    content: '\2022'; /* bullet point, for screen readers */
    text-indent: -999999px; /* move the bullet point out of sight */
    left: -.9em;
    width: .5em; /* desired width of the image */
    height: 1.2em;
    background-repeat: no-repeat;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IlVudGl0bGVkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjM4ODk2NTEyLDcuMDYyOTE4MjYgTDAuMTcxODc5ODg5LDEuNjk0ODk3NjEgQy0wLjI5ODQ3NDkyOSwxLjIwOTM3MDA1IC0wLjI4NTQ1MDgwMywwLjQzNjI1NzkxIDAuMTk5NzI0OTU3LC0wLjAzODcyMjE3NyBDMC42ODY4OTAzNywtMC41MDkwMzA2NTUgMS40NTk0NzQ0NiwtMC40OTcwNDg1NjkgMS45MzE2MzE0OCwtMC4wMTE0MDEyOTA0IEw3Ljk4ODU1MzM5LDYuMjIzNDQ2NjEgQzguMTA3NzMyMyw2LjM0MjYyNTUyIDguMTk1MjQwNzEsNi40NzkzODI4NCA4LjI2NDA5MzYyLDYuNjQzNDU3MzEgQzguNDQyODI1NDEsNy4wOTYzNjAxNyA4LjMzNTg0OTIzLDcuNjE4ODI0MTcgNy45ODEyMTgyLDcuOTY2ODU3NDEgQzcuOTM4ODgzNDcsOC4wMTM5MTgwMyA3LjkyMzcwNzU2LDguMDI3MjA1MzkgNy44ODE2NzkzNCw4LjA2NDAwMzQ2IEM3Ljc2NzQzMTg0LDguMTc1MTYwMjkgNy43Njc0MzE4NCw4LjE3NTE2MDI5IDcuNTg4MjQ5ODksOC4zNDkzNDgxNyBDNy4zMjc3MDEwMSw4LjYwMjYwNDAxIDYuOTM3MDgyMjYsOC45ODIxMTc1OSA2LjQxNjM3ODUsOS40ODc5MDM2MyBDNS4zNzUwMjA2OCwxMC40OTk0Mjc0IDMuODEzMzM2MjgsMTIuMDE2MDI4IDEuNzM0MDU0ODcsMTQuMDM1MDM0NCBDMS40OTgxMTgxMywxNC4yNjc2NzEzIDEuMTgxMTM2MTUsMTQuMzkwOTQyMSAwLjg1Mjk2NTQ3MSwxNC4zODM3NDI4IEMwLjUzMTkzMTU2LDE0LjM3MzQ0MjMgMC4yMjYxNjA0OTQsMTQuMjQ0NzE5NyAwLjAwMTM1MzU4Mjc1LDE0LjAxMzQzMzEgQy0wLjQ3NDM2MDU4OSwxMy41MjkyODQyIC0wLjQ2NDQzNjkxNiwxMi43NTUyMzc4IDAuMDIxNTIzNDAzMiwxMi4yNzk0NDE3IEw1LjM4ODk2NTEyLDcuMDYyOTE4MjYgWiIgaWQ9IlNoYXBlIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=');
    background-size: .3em .5em;
    background-position: 0 .5em;
	}
	

.findings:before{
    content: "";
    display: block;
    background: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMSA2LjI4NWwtMTEuMTYgMTIuNzMzLTYuODQtNi4wMTggMS4zMTktMS40OSA1LjM0MSA0LjY4NiA5Ljg2NS0xMS4xOTYgMS40NzUgMS4yODV6Ii8+PC9zdmc+);

    width: 20px;
    height: 20px;
    float: left;
    margin: 7px 0 0 -30px;
    background-size: .8em .8em;
    background-position: 0 1px;
    
	
}


	
.linkedimg{
	border:0;
}

.linkedimg:hover{
      border: none;
      background: none;
	  padding-bottom:0;
	  text-decoration: none;
}

.linkedimg img{
	margin: 0 0 1rem 0;
}

.researchquote{
	background:#fff;
	margin-bottom:1em;
	padding:40px 40px 20px;
	text-align:center;
}

.researchquote:nth-child(3n+0){
	background:#ffffec;
}


.painpoint{
	background:#ff6eb0;
	margin-bottom:1em;
	padding:40px 40px 20px;
	text-align:center;
	border-radius: 0 0 20px 0;
}

.painpoint:nth-child(2n+0){
	background:#ff8cc0;
	border-radius: 0 0 0 20px;

}

.opportunity{
	background:#FFB764;
	margin-bottom:1em;
	padding:40px 40px 20px;
	text-align:center;
	border-radius: 0 0 20px 0;
}

.opportunity:nth-child(2n+0){
	background:#fb931b;
	border-radius: 0 0 0 20px;

}