html {
  box-sizing: border-box;
  max-width: 100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body{
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	text-align:center;
	background: #2D2D2A;
	color:#fff;
    max-width: 100vw;
}
h6{
	font-size: 1.3rem;
	margin:.5em 0;
	font-weight: 300;
}
h3#portfolioTitle{
	font-size:3em;
}
a#version{
	color:#fff;
	position: absolute;
	top:33px;
	font-size: 11px;
	cursor: pointer;
	opacity:.5;
}
.headscrolled a#version{
	display: none;
}
.content{
	position: relative;
	text-align: center;
	max-width: none;
}
.heavier{
	font-weight:600;
}
.bottompad{
	padding-bottom:1em;
}
.footerlink{
	background: #222;
	padding:20px;
	border-radius:4px;
	margin: 1em 1em 0 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	line-height: 1.5rem; 
	display: block;
	float:left;width:100%;
}
.footerlink:hover{
	background: #000;
}
.footerlink .fa{
	color:rgba(256,256,256,0.5);
	font-size:3rem;
	padding-right:1rem;
	float:left;
}
.footerlink:hover .fa{
	color:rgba(256,256,256,1);	
}

.connectHeader{
	margin-top: 2em;
}
section,
article,
header,
main{
	width:100%;
	text-align: left;
}

p{
	line-height: 1.5;
	font-family:'Montserrat', sans-serif;
	font-weight:300;
	}
.row{
	max-width: 1140px;
	margin:0 auto;
}
#philosophy{
	padding:80px 0 40px;
}
#experience{
	padding:40px 0;
	background:#222;
}
#portfolio{
	border-top: 22px rgba(74,181,255,.9) solid;
	padding:40px 0;
	box-shadow: 0 0 10px rgba(74,181,255,.5);
	background: #fff;
	color:#222;
}
#portfolio article{
	background:#f8f8f8;
	color:#222;
	padding:20px 0;
	border-radius: 12px;
	box-shadow: 0 0 8px rgba(74,74,74,.2);
	margin-top: 40px;
}
#portfolio article section{
	padding:0 20px;
}
.row > div[class$="col"]{
	height:100%;
	padding:1em;
}
.right{text-align:right;}
.center{text-align:center;}
.nix{text-decoration:line-through;color:#aaa;}
#mainMenu{
	position:fixed;
	top:0;
	right:calc((100vw - 1140px) / 2);
}
#mainMenu a{
	display:block;
	line-height:30px;
	padding: 25px 15px;
	font-size: 16px;
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	float: left;
	transition:background-color .3s linear;
	text-decoration: none;
}
#mainMenu a:hover{
	background:rgba(0,0,0,0.3);
}
.headscrolled #mainMenu{
	position: absolute;
	bottom:0;
	top:auto;
	z-index: 2;
}
h1,h2,h3,h4 {font-weight:300;}
#portfolio article h1,
#portfolio article h2,
#portfolio article h3,
#portfolio article h4{
	color: #2D2D2A;
}
.content.notoppad{padding-top:0;}
.boldtext{font-weight:700;}

.saveprint{margin:15px auto;text-align:left;max-width:1140px;}
li{list-style:none;margin:.5em 0;}
li ul{margin-left:1em;clear:both;}
li ul li{margin:.2em 0;font-size:.8em;}
.contactinfo{display:block;clear:both;float:right;margin-top:5px;}
.titles{margin-bottom: 1em;}
a, a:visited, a:hover, a:active{color:rgba(74,181,255,1) ;text-decoration:none;}
.hrule{border-bottom:1px solid #eee;width:100%;padding:10px 0;}
.left{text-align:left;}
.toplink{padding:0 0 8px;
text-align:right;
font-size:14px;}  
.nowrap{white-space:nowrap;}
.right{text-align: right;}
.desc{
	font-family:'Montserrat', sans-serif;
	font-size:1em;
	line-height:1.5;
}
.headerrow.full{
	max-width: none;
}



.project{
	padding:0;
	margin:0 auto;
	font-weight: 100;
	position: relative;
	flex-direction:column;
}

.projectdescription{
	flex-direction:row;
}
#welcome{width:auto;
display: inline-block;}
.row{
	max-width:1140px;
	width: 100%;
	height:100%;
}

header#header{
	max-width:none;;
	background-color: #222;
	background: radial-gradient(circle closest-side,  rgba(74,255,172,.2) 10%, rgba(74,181,255,.2) 30%,  rgba(74,104,255,.2) 50%, rgba(0,0,0,.2) 100%);
	background-size:200vw 200vh;
	background-attachment: fixed;
	background-position:150vw 150vh;
	height: calc(var(--actualVh, 1vh) * 100);
	margin-bottom: 0;
}
.row.portfolioheader{
	width:100%;
	max-width:none;
	background:#fff;
	color:#2D2D2A;
	border-top:8px solid rgba(74,255,172,.6);
}
.row.portfolioheader h4{
	color:#2D2D2A;
}
.row#header .col.twelvecol{
	max-width:1140px;
	margin:0 auto;
	position:relative;
	height:100%;
	padding-top:0 !important;
}


.row.projectheader{
	padding:0; 
}
.row.projectdescription + .row:not(.projectdescription) > div{
	padding-top:1.5em;
}
.row.project{
	margin-top:2em;

}
.row.project{
	margin-top:0;

}
.row.projectdescription + .row.projectdescription > div{
	border-top:1px dotted #747578;
}

.projectheader h2{
	font-size:2.8em;
	margin:0;
	font-family: 'Ovo', serif;
}

.project.pinned .projectheader h2{
	font-size: 1em;
}
#homeLink{
	position: relative;
	top:100px;left:0;
	transition: left .2s linear, top .2s linear;
}
#homeLink img{
	width:100px;
	transition:width .2s linear;
}
.headscrolled #homeLink{
	top:56px; left:20px;
}
.small #homeLink{
	position: absolute;
	top:28px;
	width:60px;
	left:20px;
}
.small.headscrolled #homeLink{top:8px;}
.headscrolled #homeLink img{width:56px;}
#header{
	margin-bottom:3em;
}
.headscrolled #header > div{	
	padding:5px 0 2px;
}
#header h1{
	font-size:2.8em;
}
#header h1,#header h2, #header h4{
    transition:font-size .2s ease-in;
    margin:0 0 5px;
    cursor: default;
}
#header h1,
#header h4{
	padding-left: 0;
}
#header h4{
font-family: 'Ovo', serif;
font-size: 1.4em;
}
.headscrolled #header{
	position: fixed;
	top:0;
	height:80px;
	left:0;
	width: 100%;
	z-index: 400;
	padding:0 calc((100% - 1140px)/2);
	box-shadow:0 3px 4px rgba(0,0,0,.2);
	background-position:50% 50%;
	transition:background-position 2s linear;
}
.headscrolled #header,
.small.headscrolled #header{
	top:0;
}
.headscrolled #header{
	background-color: #222;
}


#myName{
	padding:5px 0 0;
	font-family: 'Montserrat', sans-serif;
}
#myTitle{
	padding:0 0 5px;
	font-family: 'Montserrat', sans-serif;
}
.nametransformed #header h1#myName{
	font-size:30px;
	margin:0;
	padding-left:0;
	letter-spacing: .2px;
}
.nametransformed #header h4{
	font-size:14px;
	margin:0 0 10px 0;
	display: none;
}
#header h4{
	font-size: 64px;
	margin-top: calc(50vh - 80px);
}
#myName,
#myTitle,
#myOtherTitle{
	position: sticky;
	align-self: flex-start;
	float:left;
	top:45px;
	display: inline-block;
	clear: none;
}
#myOtherTitle{
	top:100px;
}
#myName{
	top:8px;
}

.readme{
	background:#222;
	border-radius:1em;
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	color:#fff;
	padding:1em 2em;
	text-align: left;
	font-family:'Montserrat', sans-serif;
	transition:background-color .5s linear;
}
.readme{
	max-width:none;
	width:100%;
	border-radius: 0;
}
.readme > .row{
	margin: 0 auto;
}
mark.highlight{
	background-color:rgba(256,256,60,0.15);
	padding:2px 5px;
	color:#fff;
}
#counter{
	position:fixed;
	bottom: 0;
	left:0;
}
.row.topline{
	border-top:1px dotted #747578;
}
.headscrolled .content{
	margin-top:calc(var(--actualVh, 1vh) * 100);
}
.companyheader,.agencyheader,.roles{
	font-size:1.2em;
	margin:5px 0 20px;
	padding-top:1em;
	font-family: 'Ovo', serif;
}

.problemheader{
	font-family: 'Ovo', serif;
	padding-top:.2em;
	font-size: 1.6em;
}
.companyheader:before,
.agencyheader:before,
.roles:before{
	font-family:'Montserrat', sans-serif;
	text-transform:uppercase;
	font-size:.8rem;
	display:block;
	color: #2D2D2A;
	position: relative;
	top:-.5em;
}

.agencyheader:before{
	content:"Agency";
}

.companyheader:before{
	content:"Client";
}
.roles:before{
	content:"Roles";
}
.roles li{
	line-height:1em;
	padding-top:0;
	margin-top:0;
}
.roles li:first-child{
	margin-top:.5em;
}
.roles ul li{
	margin:0 0 0 1em;
	font-size: .8em;
	border-left:1px solid #666;
	padding:.2em 1em;
	font-family:'Montserrat', sans-serif;
}
.imagecaption.rightside{
	padding:0 0 0 40px;
}
.imagecaption .imagecaptionheader{
	margin:0 0 1em;
	font-size:1.3em;
	font-family: 'Ovo', serif;
}
.imagecaption .imagecaptionheader.big{
	font-size:44px;
}
.active{
	z-index: 300;
}

.imagecaption{
	position: sticky;
	align-self: flex-start;
	height: auto;
	width:100%;
	top:0;
	font-size:1rem;
	margin-top:1em;
	display: block;
	font-family:'Montserrat', sans-serif;;
	opacity:.1;
	transition: opacity .2s linear;
}
.tip{
	font-family: 'Montserrat', sans-serif;
	background:#eee;
	width:100%;
	padding:10px;
}
.active .imagecaption{
	opacity:1;
	filter:none;
}
.projectsection > div {
  position: sticky;
  align-self:flex-start;
  top:100px;
}

.middle{
	position: relative;
	align-self:center;
	top: 50%;
}
.projectdescription .fourcol{
	padding-top:20px;
}
.projectsection.active .projectImg{
	cursor:crosshair;
	position: relative;
}

.imgZoomWrap{
	position: relative;
    border: 2px solid rgba(256,256,256,.8);
	box-shadow: 0 0 4px rgba(0,0,0,.05);
	margin-bottom: 1em;
	transition:box-shadow .5s ease-in-out;
}
.active .imgZoomWrap{
	z-index: 300;
	box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.projectImg{
	z-index: 1;
}
.imgZoomWrap.active .imgZoomer.active{
	opacity: 1;
}
.active .imgZoomWrap.active{
	z-index: 500;
}
ul.imagecaptiondetail li{
	list-style-type: disc;
	margin-left:20px;
	font-size: .8em;
}
.imgZoomer{
  display:none;
  background-color:rgba(0,0,0,.8);
  position:absolute;
  top:0;
  left:0;
  border:2px solid #fff;
  box-shadow: 2px 2px 10px rgba(0,0,0,.3);
  border-radius: 50%;
  width:0;
  height:0;
  opacity: 0;
  display:none;
  cursor:crosshair;
  pointer-events:none;
  z-index: 200;
  padding:0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
  transform: translate(-50%, -50%);
  transition: height .3s linear, width .3s linear;
 }
 .projectsection.active .imgZoomer{
 	display: block;
 }
 .projectsection.zoomed{
 	z-index:399;
 }
 .imgZoomer.active{
  width:50vh;
  height:50vh;
}
 #vennBox{
  margin: 50px auto;
  height:50vh;
  width:50vh;
  position: relative;
  transition:all .5s ease-out;
}
 .portrait #vennBox{
  height:50vw;
  width:50vw;
}

 #header h1#myName, 
 #header h2#myTitle,
  #header h3#myOtherTitle
 {
 	font-size:24px;
 	transition:font-size .5s linear, font-size .5s linear;
 }
 #header h1#myName a, 
 #header h2#myTitle a,
  #header h3#myOtherTitle a{
  	color:#fff;
  	text-decoration: underline;
  }


 #myName:before,
 #myName:after,
 #myTitle:before,
 #myTitle:after{
 	display:inline;
 	transition: opacity .2s linear, font-size .2s linear;
 	transition-delay:0;
 }
 #myName:before{
 	content:"My name is ";
 }
 #myName:after{
 	content:". ";
 }
 #myTitle:before{
 	content:"I am a ";
 }
 #myTitle:after{
 	content:".";
 }
 .nametransformed #myName:before,
 .nametransformed #myName:after,
 .nametransformed #myTitle:before,
 .nametransformed #myTitle:after{
 	opacity: 0;
 	font-size:0;
 }
 .headscrolled #myName,
 .headscrolled #myTitle,
 .headscrolled #myOtherTitle{
 	position: absolute;
 	top:auto;
 	bottom:30px;
 }
  .headscrolled #myName{
	font-size: 22px;
  }
 .nametransformed  #header h2#myTitle{
 	font-size: 14px;
 	padding-bottom: 0;
 	font-family:'Montserrat', sans-serif;
 	bottom: 17px;
 	margin:0;
 	margin-left:1px;
 	letter-spacing: -.01em;
 }
  .nametransformed  #header h3#myOtherTitle{
  	opacity: 0;
  }
 #header h3#myOtherTitle{
 	transition:opacity 1s ease-out;
 }
 .nametransformed  #header h2#myTitle{;
 	letter-spacing: -.01em;
 }
 .content{
 	padding-top:0;
 }

 #vennBox{
   transform: rotate3d(0,1,0,90deg);
 }
 .active #vennBox{
   transform: rotate3d(0,1,0,0);
 }
.circle{
   height:60%;
   width:60%;
   border-radius:50%;
   position:absolute; 
   padding-top:30%;
   border: 1px dotted #222;
   transition: transform 1.5s ease-out, filter .5s ease-out, background-color .5s linear;
   transform: rotate3d(1,1,1,120deg);
}
#vennBox:hover .circle{
   filter:blur(2px);
}
#vennBox:hover .circle:hover{
   filter:blur(0);
}
.active .circle{
   transform: rotate3d(1,1,1,0);
}
#helper{
	visibility: hidden;
	opacity:0;
	position: absolute;
	bottom:30px;
	left:calc(50vw - 30px);
	margin:0;
	padding:20px;
	width:60px;
	font-size:30px;
	font-family:'Montserrat', sans-serif;
	z-index: 1;
	animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-name: bouncer;
    cursor: default;
    }
@keyframes bouncer{
        0%   {transform: rotate(90deg)  translateX(0) 		rotate3d(0,0,0,0deg); 	opacity:1;}
        50%  {transform: rotate(90deg)  translateX(-10px) 	rotate3d(0,1,0,20deg); 	opacity:.2;}
        100% {transform: rotate(90deg) 	translateX(0) 		rotate3d(0,0,0,0deg); 	opacity:1;}
}
.projectVid{
	position: relative;
	width:100%;
	height:auto;
}
.circle p{
  opacity: 0;
  text-align: center;
  font-weight: 100;
  width:100%;
  font-size:22px;
  transition: all 1s ease-in-out;
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translateX(-50%);
}
.circle h2, .circle p{
	-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
.unflex{
	display: block;
}
.circle h2{
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  margin:-.5em 0 0 0;
  font-weight:800;
  color: #fff;
  font-size:18px;
  transition: all 1s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.circle:hover h2,
.circle:hover p{
	transform: translateY(-30px) translateX(-50%);
}
.active .circle h2{
	opacity: 1;
}
.imagecaption .imagecaptiondetail.empathy,
.imagecaption .imagecaptiondetail.curiosity,
.imagecaption .imagecaptiondetail.focus{
	padding-left: 15px;
}
.imagecaption .imagecaptiondetail.empathy{
	border-left:1px solid rgba(74,181,255,.6);
	padding-left: 15px;
}
.imagecaption .imagecaptiondetail.curiosity{
	border-left:1px solid rgba(74,255,172,.6);
}
.imagecaption .imagecaptiondetail.focus{
	border-left:1px solid rgba(74,104,255,.6);
}
#circleOne{
  top:0;
  left:0;
  background:rgba(74,181,255,.2);
  border-color:rgba(74,181,255,.6);
  z-index: 3;
}
#circleTwo{
  top:0;
  right:0;
  background:rgba(74,255,172,.2);
  border-color:rgba(74,255,172,.6);
}
#circleThree{
  top:35%;
  right:20%;
  background:rgba(74,104,255,.2);
  border-color:rgba(74,104,255,.6);
}

.hasJS .dynamic{
	opacity: 1;
	margin:0 auto;
	min-height: 25vh;
	padding: 0;
}
.hasJS .dynamic .projectImg,
.hasJS .dynamic .projectVid{
	transition:opacity 1s linear;
	opacity:.1;
}
.hasJS .dynamic.active .projectVid,
.hasJS .dynamic.active .projectImg{
	opacity:1;
}
.dynamic.active{
	opacity: 1;
}
  .active .circle:hover p{
  opacity: 1;
  }
  .active .circle:hover h2{
  opacity: .5;
  }

	.active .circle:hover{
   z-index: 10;
   padding-top:23%;
   cursor:default;
   background-color:rgba(0,0,0,0.8) !important;
  }


#retirementVis{
	width:100%;
	height:980px;
}
a .linkdescriber{
	color:#fff;
	font-size: 14px;
	float:left;
}
a .linkname{
	padding-top:15px;
	float:right;
}
a .linkdescriber em{
	font-style: normal;
	display: block;
	clear:both;
	color: #999;
}
#portfolio article section.row.problem {
	background:#222;
	color:#fff;
	padding:40px 60px 80px;
}
.bigger{
	font-size:1.5em;
}
@media handheld, only screen and (max-width: 920px) {
#retirementVis{
	height:1680px;
}
.linkdescriber{
	display:none; 
}
#mainMenu{
		position: fixed;
		top:0;
		right:0;
		height:80px;
		width:100vw;
	}

	.headscrolled #mainMenu{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:auto;
	}
	#mainMenu.opened{
		height:auto;
		width:100%;
		background: rgba(0,0,0,0.8);
		padding-top:80px;
		z-index: 1;
	}
	.hasJS .dynamic{
		padding:0;
	}

	#mainMenu a{
		width:100%;
		height:0;
		padding:0;
		overflow: hidden;
		text-decoration: none;
	}
	#mainMenu.opened a{
		width:100%;
		height:66px;
		padding:20px;
		overflow: hidden;
	}
	#mainMenu #menuToggler{
		position: absolute;
		top:0;
		left:calc(100vw - 60px);
	}
	
	#mainMenu #menuToggler:before{
		content: "\2261";
		font-size: 54px;
		line-height: 72px;
	}
	#mainMenu.opened #menuToggler:before{
		content: "\00D7";
	}
	#portfolio article{
		padding:0 .5rem;
	}
}
@media handheld, only screen and (max-width: 639px) {
	.dynamic .row > div{
		padding: 0;
	}
	.dynamic .row > div.tinypad{
		padding:1.5em;
	}
	#portfolio article{
		padding:0;
	}
	.headscrolled.nametransformed #header h1#myName,
	.headscrolled.nametransformed #header h2#myTitle,
	.headscrolled.nametransformed #header h2#myOtherTitle {
    margin-left:0;
	}
	
	h3#portfolioTitle{
		font-size: 2.2em;
	}
	.imgZoomer{
		transition: all .2s linear;
	}
	.imgZoomWrap{
		position: relative;
		width:cal(100vw - 80px);
		box-shadow: none;
	}
	.row .imgZoomWrap{
		border-color:#222;
		padding:0 80px 0 0;
		box-shadow: none;
		transition:padding .2s ease-in-out;
		border:0;
	}
	.row .imgZoomWrap:before,.row .imgZoomWrap:after{
		content:"";
		text-align:center;
		text-transform: uppercase;
		font-size:.8em;
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
		padding:10px;
		position: absolute;
		top:0;
		right:10px;
		bottom:0;
		width:60px;
		background-image: linear-gradient(0deg, #dddddd 8.33%, #ffffff 8.33%, #ffffff 16.67%, #f8f8f8 16.67%, #f8f8f8 33.33%, #f8f8f8 33.33%, #f8f8f8 50%, #dddddd 50%, #dddddd 58.33%, #ffffff 58.33%, #ffffff 66.67%, #f8f8f8 66.67%, #f8f8f8 83.33%, #f8f8f8 83.33%, #f8f8f8 100%);
		background-size: 12.00px 12.00px;
	}
	.dynamic.active .imgZoomWrap{
		border: 0;
		box-shadow: none;
	}
	.dynamic.active .imgZoomWrap.active{
		padding-right:0;
	}

	#header h4{
		font-size: 38px;
	}
	.dynamic > div,
	.imagecaption{
	position: relative;
	align-self:auto;
	margin: 0;
	padding-right: 0;
}
	.hasJS .dynamic{
	padding: 0;
	}
	#vennBox{
		position: relative;
		left: 10px;
		margin-bottom:0;
	}
	.imagecaption.rightside{
		padding-left:0;
	}
	
	.dynamic.projectdescription {
		padding:0 1.5em;
	}
	
	  .project > div.projectsection {
	  	position: relative;
	  	top:0;
	  	padding:0;
	  }

	  .projectsection div{
	  	top:0;
	  	padding:0;
	  }
	  #myName{
	top:16px;
}

	 .row > div[class$="col"]{
	  	padding:1rem 1.5rem;
	  }
	  .row > div.imgcol{
	  	padding:0;
	  }
	  .portrait #vennBox{
	  	width:80vw;
	  	height:80vw;
	  }
	 .headscrolled header#header{
	  	height: 80px;
	  	top:0;
	  	position:fixed;
	  }
	
	  #header h1{
	font-size:28px;
	}
	#header h1#myName,
	#header h2#myTitle{
		font-size:16px;
		    display: block;
    width: 100%;
	}
#header h4{   display: block;
    width: 100%;
}
	.imgZoomWrap{
		margin-bottom:0;
	}

	.projectheader h2{
		font-size:2em;
	}

	.nametransformed #header h1#myName,
	.nametransformed #header h2#myTitle,
	.nametransformed  #header h3#myOtherTitle {
    font-size:26px;
    top:10px;
	}
	.nametransformed #header h2#myTitle {
    font-size:12px;
    top:45px;
	}
	.nametransformed  #header h3#myOtherTitle {
    top:70px;
	}

	  .nametransformed  #header h3#myOtherTitle
	{
		display: none;
	}

}