/* BASE CSS */

* {
	box-sizing: border-box;
}

 body {
 	overflow-x: hidden;
	font-family: 'adieu', sans-serif;
	font-weight: 100;
	font-size: 18px;
	letter-spacing: -0.5px;
	color: #000;
	background-color: #fff;
	background-image: url('');
	background-position: left top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin: 0px;
	/*overflow:hidden;*/
	cursor: none;
}

/* CUSTOM CURSOR */

div#cursor {
	width: 24px;
	height: 24px;
	/*background-color: #ff6b00;*/
	z-index: 99;
	border-radius: 100%;
	position: fixed;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 0.2s ease;
	transform-origin: 100% 100%;
	backdrop-filter: invert(100%);
	-webkit-backdrop-filter: invert(100%);
}

div#cursor.grow {
	transform: scale(3);
	transition: transform 0.2s ease;
}

/* MOBILE */

@media only screen and (min-device-width: 300px) and (min-width: 300px){
	/* ABOUT */

	aside#about-hero {
		width: 100vw;
		position: absolute;
		background-color: #e1b77e;
		visibility: hidden;
		opacity: 0%;
		top: -20%;
		left: 0;
		z-index: 3;
		transition: all 0.5s ease;
	}

	aside#about-hero.show {
		transition: all 0.5s ease;
		visibility: visible;
		opacity: 100%;
		top: 0;
	}

	div#canvas-wrap {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index:-1;
	}

	canvas#background-draw {
		top: 0;
		left: 0;
		position: absolute !important;
	}

	button#x-btn {
		z-index: 2;
		align-self: flex-end;
		border: none;
		outline: none;
		background: url('./assets/imgs/x.svg') no-repeat;
		background-size: contain;
		font-family: 'sprat cnd';
		width: 5vw;
		height: calc(5vw * 1.5);
		margin-right: -0.2%;
		margin-top: -0.4%;
		cursor: none;
	}

	#about-desc {
		margin-top: -2vw;
		padding-right: 5%;
	}

	h2 {
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 9vw;
		letter-spacing: -0.4vw;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	#about-mid {
		width: 100%;
		padding-left: 8.5%;
		padding-right: 5%;
		margin-top: 5vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.social-links{
		align-self: center;
		display: flex;
		flex-direction: column;
		font-size: 0.8rem;
		width: 32%;
	}

	.social-links a {
		transition: all 0.5s ease;
		letter-spacing: -0.5px;
	}

	.social-links a:hover {
		letter-spacing: -2px;
	}

	.portrait {
		width: 60%;
		margin-right: 8%;
	}

	.portrait img {
		width: 100%;
	}

	.about-more {
		width: 100%;
		font-weight: 100;
		padding-top: 5vw;
		height: auto;
	}

	#about-contact {
		margin-top: 5.5vw;
		display: flex;
		flex-direction: column;
	}

	#e-mail {
		margin: 8vw 0;
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 10vw;
		letter-spacing: -1.25vw;
		text-transform: uppercase;
		line-height: 1;
	}

	#e-mail span.at {
		display: inline-block;
		padding-left: 12vw;
	}

	#e-mail span.dom {
		display: inline-block;
		padding-left: 11vw;
	}

	#phone {
		margin-top: 5vw;
		align-self: center;
		text-align: center;
		font-size: 12px;
		line-height: 1.5;
		text-transform: uppercase;
	}

	footer#cred {
		color: #b29b70;
		margin-top: 2rem;
		padding-top: 1rem;
		border-top: 1px solid #c1a87a;;
		font-size: 0.8rem;
	}

	/* HOME */

	section#home {
		width: 100%;
		background-color: #fff;
	}

	.wrapper {
		max-width: 100%;
		margin: 0px auto;
		padding: 4vw 2vw;
		display: flex;
		flex-direction: column;
	}

	header#main-header {
		z-index: 2;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		width: 100%;
		margin-top: -5%; /* line-height */
	}

	#head-right, #head-left {
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		font-size: 19vw;
		line-height: 1;
		text-transform: uppercase;
	}

	#head-right {
		letter-spacing: -2vw;
		margin-left: -2%;
	}

	#head-left {
		align-self: flex-end;
		letter-spacing: -2vw;
		margin-right: 0;
		margin-top: -2%;
		flex: 2;
		text-align: right;
	}

	a, a:link, a:visited, a:active, a:hover {
		color: #000;
		text-decoration: none;
		cursor: none;
	}

	button.btn {
		border: none;
		outline: none;
		background: none;
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 5.5vw;
		letter-spacing: -0.8vw;
		margin-left: 0;
		line-height: 1;
		text-transform: uppercase;
		cursor: none;
	}

	button#about-btn {
		margin-right: 16%;
	}

	#home-top {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 2%;
		margin-left: 0;
		color: #ccc;
	}

	h1 {
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 19vw;
		letter-spacing: -2.8vw;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
	}

	.thumb-holder-top {
		z-index: 2;
		width: 42%;
		align-self: center;
		margin-left: 0;
		margin-top: -12%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.thumbnail {
		width: 100%;
		padding-bottom: 62%;
		background-repeat: no-repeat;
	    background-size: cover;
	    background-position: 50% 20% ;
	}

	span.thumb-title {
		margin-top: 10px;
		font-size: 8px;
		font-weight: 300;
		text-transform: uppercase;
		color: #000;
	}

	#home-mid {
		align-self: flex-end;
		display: flex;
		flex-direction: column;
		align-content: flex-start;
		align-items: flex-start;
		width: 100%;
		margin-top: 3.5%;
	}

	#home-mid h1 {
		margin-left: 12%;
		letter-spacing: -3vw;
	}

	button#contact-btn {
		margin-top: 40%;
		margin-left: -10%;
	}

	.thumb-holder-mid {
		z-index: 2;
		width: 42%;
		margin-right: 5%;
		margin-top: -26%;
		align-self: flex-end;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#home-bot {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		text-align: center;
		margin-top: 2.5%;
		padding-right: 0;
		color: #ccc;
	}

	#home-bot h1 {
		font-size: 19vw;
		line-height: 1;
		letter-spacing: -2.5vw;
	}

	.thumb-holder-bot {
		z-index: 2;
		width: 42%;
		align-self: flex-start;
		margin-left: 35px;
		margin-top: -8%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#scroll-label {
		display: none;
		margin-top: -2.8%;
		font-weight: 100;
		font-size: 12px;
		line-height: 1.5;
	}

	h5 {
		font-size: 0.75rem;
		font-weight: 100;
	}

	/* PROJECTS */

	section#portfolioPin {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #004c45;
	}

	section#portfolioWrapper {
		color: #fff;
		width: 100%;
		height: 100vh;
		display: flex;
		overflow-x: hidden;
		flex-direction: column;
		justify-content: center;
	}

	section#portfolioWrapper a {
		color: #fff;
	}

	.project-bg-container {
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100vh;
	}

	article.project {
		position: absolute;
		padding: 50px 30px;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		opacity: 0%;
	}

	article.project.green {
		background-color: #004c45;
	}

	article.project.nude {
		background-color: #e1b77e;
	}

	article.project.blue {
		background-color: #00a0df;
	}

	article.project.orange {
		background-color: #ff6b00;
	}

	.project-no-container {
		height: 10vw;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -45%;
		margin-bottom: 35%;
	}

	.project-no {
		position: absolute;
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		font-size: 10vw;
		line-height: 1;
		letter-spacing: -0.5vw;
		opacity: 0%;
	}

	.project-name-container  {
		width: 100%;
		height: 28vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0;
	}

	.project-name {
		position: absolute;
		white-space: pre;
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		line-height: 1;
		font-size: 28vw;
		letter-spacing: -2.5vw;
		opacity: 0%;
		visibility: hidden;
	}

	.overlay-container  {
		pointer-events: none;
		width: 100%;
		height: 100vh;
		padding-top: 100vh;
		overflow: hidden;
		position: absolute;

	}

	article.overlays {
		pointer-events: none;
		transform: translateY(15vh);
		margin-top: -100vh;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
	}

	article.overlays > div {
		pointer-events: none;
		transform: scale(0);
		border-radius: 100%;
		background-color: #ccc;
		background-repeat: no-repeat;
	    background-size: cover;
	    background-position: center center;
	}

	div.overlay-bot {
		align-self: flex-start;
		order: 3;
		width: 200px;
		padding-bottom: 200px;
		margin-bottom: 0px;
	}

	div.overlay-mid {
		order: 2;
		width: 200px;
		padding-bottom: 200px;
		margin: 22vh 0;
	}

	div.overlay-top {
		align-self: flex-end;
		order: 1;
		width: 150px;
		padding-bottom: 150px;
		margin-top: -120px;
	}

	/*INITIAL PROJECT SHOWING*/

	#bg-1 {
		opacity: 100%;
	}

	#no-1 {
		opacity: 100%;
		transform: translateY(0);
	}

	#name-1 {
		visibility: visible;
		opacity: 100%;
	}

	#olays-1 div {
		transform: scale(1);
	}

}

@media only screen and (min-device-width: 768px) and (min-width: 768px){

	/* ABOUT */

	aside#about-hero {
		width: 100vw;
		position: absolute;
		background-color: #e1b77e;
		visibility: hidden;
		opacity: 0%;
		top: -20%;
		left: 0;
		z-index: 3;
		transition: all 0.5s ease;
	}

	aside#about-hero.show {
		transition: all 0.5s ease;
		visibility: visible;
		opacity: 100%;
		top: 0;
	}

	div#canvas-wrap {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index:-1;
	}

	canvas#background-draw {
		top: 0;
		left: 0;
		position: absolute !important;
	}

	button#x-btn {
		align-self: flex-end;
		border: none;
		outline: none;
		background: url('./assets/imgs/x.svg') no-repeat;
		background-size: contain;
		width: 3.3vw;
		height: calc(3.3vw * 1.5);
		margin-right: -0.2%;
		margin-top: -0.4%;
		cursor: none;
	}

	#about-desc {
		margin-top: -3.5vw;
		padding-right: 5%;
	}

	h2 {
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 6.3vw;
		letter-spacing: -0.4vw;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	#about-mid {
		width: 100%;
		padding-left: 8.5%;
		padding-right: 5%;
		margin-top: -3vw;
		display: flex;
		justify-content: space-between;
	}

	.social-links{
		align-self: center;
		display: flex;
		flex-direction: column;
		font-size: 0.8rem;
		width: 32%;
	}

	.social-links a {
		transition: all 0.5s ease;
		letter-spacing: -0.5px;
	}

	.social-links a:hover {
		letter-spacing: -2px;
	}

	.portrait {
		width: 28%;
		margin-right: 8%;
	}

	.portrait img {
		width: 100%;
	}

	.about-more {
		width: 28%;
		height: auto;
	}

	#about-contact {
		margin-top: 5.5vw;
		display: flex;
		flex-direction: column;
	}

	#e-mail {
		margin: initial;
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 9.5vw;
		letter-spacing: -1.25vw;
		text-transform: uppercase;
		line-height: 1;
	}

	#e-mail span.at {
		display: inline-block;
		padding-left: 12vw;
	}

	#e-mail span.dom {
		display: inline-block;
		padding-left: 11vw;
	}

	#phone {
		margin-top: 5vw;
		align-self: center;
		text-align: center;
		font-size: 12px;
		line-height: 1.5;
		text-transform: uppercase;
	}

	/* HOME */

	section#home {
		width: 100%;
		background-color: #fff;
	}

	.wrapper {
		max-width: 100%;
		margin: 0px auto;
		padding: 30px 60px;
		display: flex;
		flex-direction: column;
	}

	header#main-header {
		z-index: 2;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		width: 100%;
		margin-top: -2%; /* line-height */
	}

	#head-right, #head-left {
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		font-size: 9.5vw;
		line-height: 1;
		text-transform: uppercase;
	}

	#head-right {
		letter-spacing: -0.8vw;
		margin-left: -0.6%;
	}

	#head-left {
		align-self: initial;
		flex: initial;
		letter-spacing: -1.2vw;
		margin-right: 4%;
		margin-top: 0;
	}

	a, a:link, a:visited, a:active, a:hover {
		color: #000;
		text-decoration: none;
		cursor: none;
	}

	button.btn {
		border: none;
		outline: none;
		background: none;
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 3vw;
		line-height: 1;
		letter-spacing: -0.3vw;
		text-transform: uppercase;
		margin-left: 3.5%;
		cursor: none;
	}

	button#about-btn {
		margin: 0;
	}

	#home-top {
		display: flex;
		width: 52%;
		flex-direction: column;
		margin-top: -1.9%;
		margin-left: -0.2%;
		color: #ccc;
	}

	h1 {
		font-family: 'sprat cnd';
		font-weight: 100;
		font-size: 9.5vw;
		letter-spacing: -1.25vw;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
	}

	.thumb-holder-top {
		width: 30%;
		align-self: center;
		margin-left: -4%;
		margin-top: -12%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.thumbnail {
		width: 100%;
		padding-bottom: 62%;
		background-repeat: no-repeat;
	    background-size: cover;
	    background-position: 50% 20% ;
	}

	span.thumb-title {
		margin-top: 10px;
		font-size: 10px;
		font-weight: 300;
		text-transform: uppercase;
		color: #000;
	}

	#home-mid {
		align-self: flex-end;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		width: 46%;
		margin-top: -7.9%;
	}

	#home-mid h1 {
		margin: 0;
		letter-spacing: -1.6vw;
	}

	button#contact-btn {
		margin: 0;
	}

	.thumb-holder-mid {
		width: 16%;
		margin-right: 19%;
		margin-top: -6.3%;
		align-self: flex-end;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#home-bot {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 0;
		padding-right: 1%;
		color: #ccc;
	}

	#home-bot h1 {
		font-size: 9.5vw;
		letter-spacing: -1.35vw;
	}

	.thumb-holder-bot {
		width: 16%;
		align-self: center;
		margin-left: -16%;
		margin-top: -5.5%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#scroll-label {
		display: block;
		margin-top: -2.8%;
		font-weight: 100;
		font-size: 12px;
		line-height: 1.5;
	}

	/* PROJECTS */

	section#portfolioPin {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #004c45;
	}

	section#portfolioWrapper {
		color: #fff;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	section#portfolioWrapper a {
		color: #fff;
	}

	.project-bg-container {
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100vh;
	}

	article.project {
		padding: 30px 60px;
		position: absolute;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		opacity: 0%;
	}

	article.project.green {
		background-color: #004c45;
	}

	article.project.nude {
		background-color: #e1b77e;
	}

	article.project.blue {
		background-color: #00a0df;
	}

	article.project.orange {
		background-color: #ff6b00;
	}

	.project-no-container {
		height: 3vw;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -6.5%;
		margin-bottom: 2%;
	}

	.project-no {
		position: absolute;
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		font-size: 3vw;
		line-height: 1;
		letter-spacing: -0.2vw;
		opacity: 0%;
	}

	.project-name-container  {
		width: 100%;
		height: 14.5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0;
	}

	.project-name {
		position: absolute;
		white-space: pre;
		font-family: 'sprat cnd', serif;
		font-weight: 100;
		line-height: 1;
		font-size: 14.5vw;
		letter-spacing: -1vw;
		opacity: 0%;
		visibility: hidden;
	}

	.overlay-container  {
		pointer-events: none;
		width: 100%;
		height: 100vh;
		padding-top: 24%;
		overflow: hidden;
		position: absolute;
	}

	.overlay-container  {
		pointer-events: none;
		width: 100%;
		height: 100vh;
		padding-top: 100vh;
		overflow: hidden;
		position: absolute;

	}

	article.overlays {
		pointer-events: none;
		transform: translateY(15vw);
		margin-top: -100vh;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
	}

	article.overlays > div {
		pointer-events: none;
		transform: scale(0);
		border-radius: 100%;
		background-color: #ccc;
		background-repeat: no-repeat;
	    background-size: cover;
	    background-position: center center;
	}

	div.overlay-bot {
		align-self: flex-start;
		order: 3;
		width: 21vw;
		padding-bottom: 21vw;
		margin-bottom: 0px;
		margin-left: 13vw;
	}

	div.overlay-mid {
		order: 2;
		width: 23vw;
		padding-bottom: 23vw;
		margin: 0;
	}

	div.overlay-top {
		align-self: flex-end;
		order: 1;
		width: 14vw;
		padding-bottom: 14vw;
		margin-top: -20vw;
		margin-bottom: 12vw;
		margin-right: 12vw;
	}
}


@media only screen and (min-device-width: 1400px) and (min-width: 1400px){
	section#home {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}
}