/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   
   UNIVERSAL
   TYPOGRAPHY
   SECTIONS
   LETTERS
   HOME - SECTION 0
   ABOUT - SECTION 1
   WEB - SECTION 2
   LOGO - SECTION 3
   PRINT - SECTION 4
   CONTACT - SECTION 5
   MEDIA QUERIES
   
   ========================================================================== */
	   
body {
   height: 100%;
   width: 100%;
   max-width: 100%;
   font-family: "Sofia Pro", "sofia-pro", "Gotham", "Arial";
   color: #222222;
}

.height-checker { height: 100vh; display: none; }
 
/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

p {
	font-size: 2em;
	text-align: left;
	line-height: 2em;
	color: white;
	font-weight: 200;
}

p.description {
	font-size: 1em;
	line-height: 1.5em;
	color: #000000;
	margin-top: -0.2em;
}

h1 {
	font-size: 2.5em;
	text-align: center;
}

h2 {
	font-size: 2.25em;
	color: #ffffff;
	text-align: left;
	line-height: 1em;
	font-weight: 400;
}

h3 {
	font-weight: 200;
	font-size: 2em;
	letter-spacing: 1px;
	text-align: center;
	text-transform: none;
}

h4 {
	font-size: 2.25em;
	color: #39f;
	text-align: left;
	line-height: 1em;
	font-weight: 400;
}

span.avoidwrap { display:inline-block; }

a:link {
	color: #39f;
	text-decoration: none;
	opacity: 1;
}

a span {
	border-bottom: 4px solid transparent;
	transition: border-bottom 500ms ease;
}

a span:hover {
	border-bottom: 4px solid #39f;
	transition: border-bottom 500ms ease;
}

.fullproject {
	font-weight: 200;
	text-transform: none;
}

.work-type {
	position: absolute;
	bottom: -15px;
	opacity: 0.3;
	width: 100%;
	text-align: center;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.outer {
	position: relative;
	display: flex;
	z-index: auto;
	width: 100%;
	height: 110vh;
	max-height: 110%;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: transform 300ms ease;
	-webkit-transition: transform 300ms ease;
}

.outer.work { max-height: 110vw; }

.top-container {
	position: absolute;
	z-index: 1;
	width: 100%; height: 100%;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
	clip: rect(0,auto,auto,0);
	-webkit-clip: rect(0,auto,auto,0);
	-moz-clip: rect(0,auto,auto,0);
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
}	

.liu {
	position: fixed;
	top: 50vh;
	left: 50vw;
	opacity: 1;
	z-index: -100;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transition: opacity 0ms ease;
	-webkit-transition: opacity 0ms ease;
}

.liu.open {
	opacity: 0;
	transition: opacity 0ms ease;
	-webkit-transition: opacity 0ms ease;
}

.top-container.open {
	opacity: 0;
	transition: opacity 0ms ease;
	-webkit-transition: opacity 0ms ease;
}

.letter {
	height: auto;
	width: 65vw;
	max-height: 40vh;
	transition: 300ms ease;
}

.title { letter-spacing: .05em; }

.overlay {
	visibility: hidden;
	opacity: 0;
	background: #ffffff;
	position: fixed;
	width: 100%; height: 100%;
	top: 0; left: 0;
    transition-property: visibility, opacity;
    transition-duration: 0s, 400ms;
    transition-timing-function: linear, ease;
    /* transition-delay: 450ms, 0s; */
    z-index: 10000
}

.overlay.open {
	visibility: visible;
	opacity: 1;
	transition: opacity 400ms ease;
	-webkit-transition: opacity 400ms ease;
	transition-delay: 0s;
}

.overlay.hide {
	visibility: visible;
	opacity: 0;
	transition: opacity 400ms ease;
	-webkit-transition: opacity 400ms ease;
	transition-delay: 0s;
}

.mask {
	position: fixed;
	background: #ffffff;
	height: 100%; width: 100%;
	top: 0; left: 0;
	z-index: 10000;
}

#on-load {
	visibility: visible;
	opacity: 1;
	animation: page-load 1s ease 500ms forwards;
}

@keyframes page-load {
	0% {opacity: 1; visibility: visible;}
	99% {opacity: 0; visibility: visible;}
	100% {visibility: hidden;}
}

#on-exit {
	visibility: hidden;
	opacity: 0;
	transition: opacity 300ms ease;
}
	

#on-exit.page-change {
	visibility: visible;
	opacity: 1;
	transition: opacity 300ms ease;
}

.optional {display: inline-block;}

/*	==========================================================================
	MENU
	========================================================================== */

/*	==========================================================================
	HOME - SECTION 0
	========================================================================== */

#isDesktop { display: block; }
.mobile { display: none; }
   
.case {
	overflow: hidden;
	max-width: 0;
}

.study {
	width: 100%;
	margin: auto;
	text-align: center;
	background: #fff;
	white-space: nowrap;
}

.animation-wrapper { display: initial; }

.animation-wrapper.reset { display: none; }

.donate.reset { display: none; }

.menu li.reset { display: none; }
   
/* ==========================================================================
   ABOUT - SECTION 1
   ========================================================================== */

#liu_about { fill: #3f3f3f; }
#liu_three { fill: #dcdcdc; }
#liu_more { fill: #fafafa; }

.bio {
	width: 80%;
	position: relative;
	left: 10%;
	top: auto;
	margin-top: 80px;
	margin-bottom: 80px;
	transition: opacity 0ms ease;
	-webkit-transition: opacity 0ms ease;
	opacity: 1;
	z-index: 1000;
}

.bio.open {
	opacity: 0;
	transition: opacity 0 ease;
	-webkit-transition: opacity 0 ease;
}

.sep { /* line after name */
	display: inline-block;
	height: 4px;
	width: 100px;
	background: #1c92f4;
}

.type_text { /* links inside bio */
	color: #1c92f4;
	cursor: pointer;
	padding: 0 2px;
	border-radius: 5px;
	background: rgba(127,211,246,0);
	transition: background 100ms ease;
}

.type_text:hover {
	background: #7fd3f6;
	background: rgba(127,211,246,1);
	background-size: 10px 10px;
	transition: background 100ms ease;
}

.hover_helper { z-index: 1000; }

/* ==========================================================================
   BACKGROUND COLORS
   ========================================================================== */

#top_section { background: #ffffff; z-index: 1000;}
#about_section { background: #444444; height: auto; z-index: 1000; }   
#more_section { background: #ffffff; height: auto; z-index: 1000; }  
#contact_section { background: #fafafa; z-index: 1000; }  

#work_1 { background: #fafafa; z-index: 500; } 
#work_2 { background: #dddddd; z-index: 500; }   
#work_3 { background: #eaeaea; z-index: 500; }
#work_4 { background: #f3f3f3; z-index: 500; } 
#work_5 { background: #eeeeee; z-index: 500; } 
#work_6 { background: #dddddd; z-index: 500; } 


/* ==========================================================================
   NAVIGATION
   ========================================================================== */	

#nav_circles {
	position: fixed;
	right: 27px;
	top: 50%;
	transform: translatey(-50%);
	-webkit-transform: translatey(-50%);
	z-index: 800;
	opacity: 1;
	transition: opacity 00ms ease;
	-webkit-transition: opacity 00ms ease;
}

#nav_circles.open {
	opacity: 0;
	transition: opacity 00ms ease;
	-webkit-transition: opacity 00ms ease;
}


.circle {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	outline: 4px solid transparent;
	background: #222222;
	box-shadow: none;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	cursor: pointer;
}
	

.circle.active {
	background: none;
	box-shadow: 0 0 0 3px #222222;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
}

.circle + .circle {
	margin-top: 20px;
}

.circle .tooltiptext {
    visibility: hidden;
    width: auto;
    white-space: nowrap;
    background-color: black;
    opacity: 0;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 5px 15px;
    position: absolute;
    z-index: 1;
    margin-top: -10px;
    margin-left: -15px;
    transform: translateX(-90%);
    height: 15px;
    line-height: 16px;
    transition: all 300ms ease;
    outline: 1px solid transparent;
}

.circle:hover .tooltiptext {
    visibility: visible;
    opacity: 0.7;
    transition: all 300ms ease;
    z-index: 300;
    transform: translateX(-100%);
}

#menu-icon {
	width: 24px;
	height: 24px;
	position: fixed;
	top: 20px;
	right: 18px;
	z-index: 40000;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	opacity: 1;
}
	
#menu-icon span:nth-child(1) { top: 0px; }
#menu-icon span:nth-child(2),#menu-icon span:nth-child(3) { top: 8px; }
#menu-icon span:nth-child(4) { top: 16px; }
#menu-icon.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; }
#menu-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#menu-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#menu-icon.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; }

#menu-icon span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #222222;
	border-radius: 2px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: all .25s ease-in-out, background 500ms ease;
	transition: all .25s ease-in-out, background 500ms ease;
}

#menu {
	display: none;
	list-style: none;
	font-size: 2.25em;
	position: fixed;
	z-index: 20000;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	padding: 0;
	margin: 0;
	color: #222222;
	line-height: 12vh;
	text-align: center;
	padding-top: 2px;
	border-bottom: 4px solid transparent;
}

#menu.open { display: block; }

#menu li {
	opacity: 0;
	transform: translatex(-50px);
    transition-property: opacity, transform;
    transition-duration: 400ms; 0
    transition-timing-function: ease, linear;
    transition-delay: 0s, 450ms;
}

#menu li.open {
	opacity: 1;
	transform: translate(0);
	transition: all 400ms ease;
	-webkit-transition: all 400ms ease;
	cursor: pointer;
}

#menu span {
	border-bottom: 4px solid;
	border-color: transparent;
	-webkit-transition: 300ms ease;
		transition: 300ms ease;
	}

#menu span:hover {
	border-color: #222222;
	-webkit-transition: 300ms ease;
		transition: 300ms ease;
}

#menu.dark span:hover {
	border-color: #1c92f4;
	-webkit-transition: 300ms ease;
		transition: 300ms ease;
}
.arrow {
	display: inline-block;
	width: 2px;
	height: 18px;
	background: #222222;
	z-index: 2000;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
}

.arrow::before {
	display: inline-block;
	z-index: 2000;
	margin-left: -5px;
	margin-top: 3px;
	content: "";
	background: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid #222222;
	border-bottom: 2px solid #222222;
	transform: rotate(45deg);
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
}

#top { /* container for arrow */
	width: 20px;
	height: auto;
	position: fixed;
	padding: 10px;
	border-radius: 20px;
	background: #eeeeee;
	bottom: 30px;
	left: 50%;
	z-index: 1000;
	text-align: center;
	transform: translatex(-50%);
	opacity: 0.5;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	animation-name: bopping;
	animation-duration: 500ms;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
	
@keyframes bopping {
	from {bottom: 30px;}
	to {bottom: 20px;} 
}


#top.open {
	opacity: 0;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
}

.l_slider {
	transform: translateY(100%);
	animation: transition-slider-reverse 9s cubic-bezier(0.6, 0.2, 0.1, 1) 2s infinite;
	animation-direction: alternate-reverse;
	cursor: wait;
}

.i_slider	{
	transform: translateY(-100%);
	animation: transition-slider 9s cubic-bezier(0.6, 0.2, 0.1, 1) -1s infinite;
	animation-direction: alternate-reverse;
	cursor: wait;
}

.u_slider {
	transform: translateY(100%);
	animation: transition-slider 9s cubic-bezier(0.6, 0.2, 0.1, 1) 5s infinite;
	animation-direction: alternate-reverse;
	cursor: wait;
}

.hover-svg { fill: transparent; cursor: pointer; }

.logo-svg { transition: opacity 400ms ease; opacity: 0.25; }
.logo-svg:hover { transition: opacity 400ms ease; opacity: 1; }
#hover-logo:hover .logo-svg { transition: opacity 400ms ease; opacity: 1; }
#hover-logo { cursor: pointer; }

@keyframes no-hover {
	from {visibility: visible;}
	75% {visibility: visible;}
	76% {visibility: hidden;}
	99% {visibility: hidden;}
	to {visibility: visible;}
}

.animate_1 { animation: frame-one 27s linear infinite; opacity: 1;}
.animate_2 { animation: frame-two 27s linear infinite; opacity: 0;}
.animate_3 { animation: frame-three 27s linear infinite; opacity: 0;}
.animate_l { animation-delay: 2s;}
.animate_i { animation-delay: -1s;}
.animate_u { animation-delay: 5s;}


.svg-outline {
	stroke: #ffffff;
	fill: transparent;
	stroke-width: 2px;
}


@keyframes frame-one {
	0% {opacity: 1;}
	16.6% {opacity: 1;}
	16.7% {opacity: 0;}
	84.2% {opacity: 0;}
	84.3% {opacity: 1;}
	100% {opacity: 1;}
}

@keyframes frame-two {
	0% {opacity: 0;}
	16.6% {opacity: 0;}
	16.7% {opacity: 1;}
	49.9% {opacity: 1;}
	50.0% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes frame-three {
	0% {opacity: 0;}
	49.9% {opacity: 0;}
	50.0% {opacity: 1;}
	84.2% {opacity: 1;}
	84.3% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes transition-slider {
	0% {transform: translateY(-100%); visibility: hidden;}
	39.8% {visibility: hidden;}
	40% {transform: translateY(-100%); visibility: visible;}
	47% {transform: translateY(0); visibility: visible;}
	53% {transform: translateY(0); visibility: visible;}
	60% {transform: translateY(100%); visibility: visible;}
	60.2% {visibility: hidden;}
	100% {transform: translateY(100%); visibility: hidden;}
}

@keyframes transition-slider-reverse {
	0% {transform: translateY(100%); visibility: hidden;}
	39.8% {visibility: hidden;}
	40% {transform: translateY(100%); visibility: visible;}
	47% {transform: translateY(0); visibility: visible;}
	53% {transform: translateY(0); visibility: visible;}
	60% {transform: translateY(-100%); visibility: visible;}
	60.2% {visibility: hidden;}
	100% {transform: translateY(-100%); visibility: hidden;}
}

.kb-study, .msf-study, .liuser-study, .helicon-study, .simplist-study {cursor:pointer;}


/* ==========================================================================
   MOBILE ONLY
   ========================================================================== */	
   



/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */	

	.sep.desktop { display: inline-block; }
	.sep.mobile { display: none; }

@media only screen and (max-width: 768px) {
	h1 {
		font-size: 2em;
	}
}

@media only screen and (max-height: 500px) {
	.mobile-list li {margin-top: 15px}
	h2, h4 {font-size: 1.5em; line-height: 1.1em; font-weight: 400}
	.donate { visibility: hidden;}
}

@media only screen and (max-height: 450px) {
	.mobile-list {display: none;}
	.title {font-size: 1.75em}
	.mobile-letter {
		height: 220px;
		padding: 15px 15px 50px 15px;
	}
}

@media only screen and (max-height: 420px) {
	.mobile-letter {height: 200px}
}

@media only screen and (max-height: 360px) {
	.circle + .circle {margin-top: 15px;}
}

@media only screen and (max-height: 360px) and (max-width: 475px) {
	.optional {display: none;}
}
	
@media only screen and (max-width: 640px) {
	.title { font-size: 1.75em; }
	h2, h4 { font-size: 2.0em; }
	p { font-size: 1.75em; line-height: 1.5em}
	p.description { font-size: 0.9em;
		line-height: 1.4em; }
	.bio {
	margin-top: 50px;
	margin-bottom: 50px;	
	}
		
}

@media only screen and (max-width: 600px) {
	.title, p { font-size: 1.5em; }
	h2, h4 { font-size: 1.75em; }
	#nav_circles { display: none; }
	.letter {
		height: auto;
		width: 80vw;
		max-height: 40vh;
		transition: 300ms ease;
	}
}

@media only screen and (max-width: 520px) {
	h2, h4 { font-size: 1.4em; font-weight: 400;}
	.title {font-size: 1.4em;}
	p { font-size: 1.3em; line-height: 1.25em;}
}

@media only screen and (max-width: 475px) {
	h2 { font-size: 1.2em; text-align: center; line-height: 1.15em;}
	.title {font-size: 1.2em;}
	h4 { font-size: 1.2em; line-height: 1.15em;}
	p {font-size: 1.1em; line-height: 1.2em; text-align: center;}
	#isDesktop { display: none }
	.desktop { display: none }
	.mobile { display: block }
	.sep.desktop { display: none; }
	.sep.mobile { 
		display: inline-block; 
		margin-bottom: 5px;
		height: 4px;
		border-radius: 2px;
		width: 50px;
	}
	.mobile-list {display: block;}
	#menu {line-height: 12vh;}
	.donate { visibility: hidden;}
}



 
/* ==========================================================================
   CASE STUDIES
   ========================================================================== */

.study-desc {
	width: 65vh;
	position: fixed;
	left: auto;
	right: 52.5%;
	top: 50vh;
	transform: translateY(-50%);
	transition: opacity 200ms ease;
	-webkit-transition: opacity 200ms ease;
}

.study-img {
	width: 65vh;
	height: 65vh;
	position: relative;
	left: 52.5%;
	border-radius: 10px;
	background: #ffffff;
	margin-top: 5vh;
	box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1);
}

.darker {
	box-shadow: 0 0px 20px 0 rgba(0,0,0,0.25);
}

.study-img.first {
	margin-top: 25vh;
}

.study-img-mob {
	background: #ffffff;
	display: inline-block;
	width: 40vh;
	height: 40vh;
	position: relative;
	margin: 0;
	border-radius: 8px;
	box-shadow: 0 0px 20px 0 rgba(0,0,0,0.1);
}

/*.study-img-mob:first-of-type { 
	margin-left: calc(50vw - 20vh); 
	margin-right: calc(50vw - 30vh);
}

.side-margin {
	width: calc(50vw - 20vh);
	display: inline-block;
	position: relative;
}*/

.mid-margin {
	width: calc(50vw - 30vh);
	display: inline-block;
	position: relative;
	min-width: 1vh;
	max-width: 10vh;
}

.mob-study-outer {
	position: fixed;
	display: none;
	top: 45vh;
	height: 40vh;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	overflow-x: scroll;
}

.mob-study-inner {
	position: absolute;
	width: auto;
	white-space: nowrap;
	padding-left: calc(50vw - 20vh);
	padding-right: calc(50vw - 20vh);
}	

@media (max-aspect-ratio: 8/5) {
	.study-img { width: 60vh; height: 60vh; }
	.study-desc { width: 60vh; }
	.outer.cases { height: 100vh; }
}

@media (max-aspect-ratio: 7/5) {
	.study-img { width: 50vh; height: 50vh; left: 50%; }
	.study-desc { width: 45vh; right: 55%; }
	.outer.cases { height; 80vh; }
}

@media (max-aspect-ratio: 6/5) {
	.study-img { width: 45vh; height: 45vh; left: 50%; }
	.study-desc { width: 40vh; right: 55%; }
	.outer.cases { height; 80vh; }
}

@media (max-aspect-ratio: 1/1) {
	.study-img { display: none; }
	.mob-study-outer { display: block; }
	.study-desc {
		left: 10%;
		right: 10%;
		width: 80%;
		top: 10%;
		transform: none;
	}
}