@font-face{
	font-family: 'Iowan';
	src: url(../assets/IowanOldStyle-Roman.woff);
}

*{
    list-style: none; 
    padding: 0; 
    margin: 0;
    font-weight: 400;
    /*font-size: 1.25vw;*/
}

a{
	color: white;
	text-decoration: none;
}

html, body{
    -webkit-font-smoothing: antialiased;
    font-family: 'Iowan', serif;
    text-transform: uppercase;
    overflow: hidden;
    background: rgb(16,16,16);
    color: white;
    font-size: 56%;
}

html.animate, body.animate{
	-webkit-transform: translateZ(0);
}

body{
	font-size: 1.4rem;
}

/**/

.loading{
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(16,16,16);
}

/**/

.wrapper{
	position: relative;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
}

.wrapper.scroll{
	overflow: scroll;
}

/**/

header{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	/*height: 10vh;*/
	width: 100vw;
	box-sizing: border-box;
	padding: 2.5rem 4rem;
	display: flex;
}

header.stick{
	position: relative;
}

/**/

.l_overlay{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.l_overlay span{
	display: block;
	background: rgb(16,16,16);
	width: 100%;
	height: 20vw;
}

.preview{
	width: 100vw;
	height: 100%;
	/*overflow: hidden;*/
	position: relative;
}

.preview li{
	height: 100%;
	width: 100%;
	display: flex;
	position: relative;
	cursor: pointer;
}

.preview li a{
	width: 100%;
	height: 100%;
	display: flex;
}

.preview li.current{
}

.preview .info{
	height: 100%;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
}

.preview .info span{
	padding: 0 4rem;
	overflow: hidden;
}

.preview .info p{
	font-size: 5rem;
	/*line-height: 5rem;*/
	text-align: center;
}

.preview img{
	width: 50%;
	height: 100%;
	align-self: center;
	object-fit: cover;
	object-position: top;
}

.preview li:nth-child(5) img, .preview li:nth-child(10) img, .preview li:nth-child(11) img, .preview li:nth-child(16) img{
	object-position: center;
}

.preview .counter{
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	/*height: 10vh;*/
	width: 100vw;
	box-sizing: border-box;
	padding: 2.5rem 4rem;
	display: flex;
	display: none;
}

/**/

.index{
	width: 100vw;
	/*min-height: 100vh;*/
	box-sizing: border-box;
	padding: 0 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.index li{
	height: 22.5vw;
	padding: 2rem 1rem 0rem;
	overflow: hidden;
}

.index li img{
	height: 100%;
	/*height: 80vh;*/
	object-fit: cover;
}

.load{
	/*height: 10vh;*/
	width: 100vw;
	box-sizing: border-box;
	padding: 2.5rem 4rem;
	height: 2rem;
	display: flex;
}

.load p{
	cursor: pointer;
}

/**/

.project{
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	display: flex;
	cursor: none;
	display: none;
	user-select: none;
}

.project.show{
	display: flex;
}

.project img{
	height: 80vh;
	cursor: none;
}

.project .close{
	height: 3vw;
	width: 3vw;
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	padding: 1.5vw 2vw;
	cursor: pointer;
}

.project .close *{
	cursor: pointer;
}

.project .close span{
	width: 0.2vw;
	height: 3vw;
	background: white;
	display: block;
	position: absolute;
}

.project .close span:first-child{
	transform: rotate(45deg);
	left: 2.85vw;
}

.project .close span:last-child{
	transform: rotate(-45deg);
	left: 2.85vw;
}

.project .left, .project .right{
	position: fixed;
	z-index: 99;
	top: 0;
	width: 50vw;
	height: 100vh;
}

.project .left{
	left: 0;
}

.project .right{
	right: 0;
}

.project ul{
	width: 100vw;
	height: 100vh;
}

.project ul li{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.project ul li.current{
	display: flex;
}

.trail{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	margin-left: -5%;
	display: none;
	cursor: none;
	mix-blend-mode: difference;
	color: white;
}

.trail p{
	text-align: center;

}

/**/

.bio{
	height: 90vh;
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	flex-direction: column;
}

.bio p{
	padding: 7rem 4rem 0;
	font-size: 4.75rem;
}

.bio p.sub{
	padding: 3.5rem 4rem 0;
	text-transform: none;
	font-size: 1.4rem;
}

/**/

footer{
	/*height: 10vh;*/
	width: 100vw;
	box-sizing: border-box;
	padding: 2.5rem 4rem;
	display: flex;
}

/**/

.nav{
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	/*height: 10vh;*/
	/*width: 50vw;*/
	box-sizing: border-box;
	padding: 2.5rem 4rem;
	display: flex;
	justify-content: space-between;
}

.nav span{
	font-family: Times New Roman, serif;
	font-size: 4rem;
	margin-right: 1.5rem;
	cursor: pointer;
}

@media (max-width: 736px) {
	.nav{padding: 2.5rem;}
	header{width: 50vw;}
	body{font-size: 0.8rem;}
	.l_overlay, .r_overlay{display: none;}
	.preview .info p{font-size: 2.25rem; line-height: auto;}
    .bio p{font-size: 2.5rem;}
    .project img{
		height: 60vh;
	}
	.project .close{
		height: 10vw;
		width: 10vw;
		left: 1.5rem;
		top: 0.5rem;
	}

	.project .close span{
		height: 8vw;
	}
}

@media (max-width: 568px) {
	.nav{padding: 2.5rem;}
	
	body{
		font-size: 1.65vw;
	}

	header, .preview .counter, footer{
		padding: 2.5rem 2rem;
	}

	.bio p, .preview .info span{
		padding: 0 2rem;
	}

	.index{padding: 0 1rem;}

	.preview .info p{ font-size: 2rem; }
}