:root {
  --color-one: #F8CD90;
  --color-two: #3093b2;
  --color-three: #E23065;
  --color-four: #4d6870;
}


@font-face{ 
	font-family: 'Anybody Condensed Light Italic';
	src: url('../fonts/Anybody_Condensed-LightItalic.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Condensed-LightItalic.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Condensed Light';
	src: url('../fonts/Anybody_Condensed-Light.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Condensed-Light.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Condensed Regular';
	src: url('../fonts/Anybody_Condensed-Regular.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Condensed-Regular.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Condensed Bold';
	src: url('../fonts/Anybody_Condensed-Bold.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Condensed-Bold.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Regular';
	src: url('../fonts/Anybody-Regular.woff2')
	format('woff2'),
	src: url('../fonts/Anybody-Regular.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Bold';
	src: url('../fonts/Anybody-Bold.woff2')
	format('woff2'),
	src: url('../fonts/Anybody-Bold.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Condensed Semibold';
	src: url('../fonts/Anybody_Condensed-Semibold.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Condensed-Semibold.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Anybody Light';
	src: url('../fonts/Anybody_Light.woff2')
	format('woff2'),
	src: url('../fonts/Anybody_Light.woff')
	format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face{ 
	font-family: 'Fit';
	src: url('../fonts/fit.woff2')
	format('woff2');
	font-weight: 100 3600;
	font-stretch: 1% 10000%;
	font-style: normal;
}

body{
	overscroll-behavior: none;
	background-color: var(--color-one);
}

header{
	grid-area: title;
	font-family: Fit;
	font-variation-settings: 'wdth' 1000;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 2vh;
	color: var(--color-three);
	transition: color 150ms ease;
}

header:hover{
	color: var(--color-two);
}

nav{
	grid-area: scroller;
	padding: 0 1px;
	border-left: .3vh solid var(--color-two);
	border-right: .3vh solid var(--color-two);
}

main{
	position: relative;
	grid-area: content;
	overflow-y: auto;
	border-radius: 3vh;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent);
}

aside{
	grid-area: selector;
	width: 100%;
	height: 100%;
}

.container{
	padding: 3vh;
	display: grid;
	grid-gap: 3vh;
	grid-template-columns: 33.3333% 66%;
	grid-template-rows: 30% 5% 60%;
	grid-template-areas: 
		"title content content"
		"scroller content content"
		"selector content content";
	min-height: calc(90vh);
	max-width: calc(100vw - 10vh);
}

.selector-holder{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.project-selector-background{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	transition: opacity 300ms ease;
	z-index: 1;
} 

.project-selector-background:hover {
	opacity: 1;
}

#project1-selector-background {
	background: url("../images/Straw_4.jpg");	
	background-size: cover;
	background-position: center;
}

#project2-selector-background {
	background: url("../images/wandericons-selector.jpg");	
	background-size: cover;
	background-position: center;
}

#project3-selector-background {
	background: url("../images/triangle-selector.png");	
	background-size: cover;
	background-position: center;
}

#project4-selector-background {
	background: url("../images/HNTB_Welcome.jpg");	
	background-size: cover;
	background-position: center;
}

#project5-selector-background {
	background: url("../images/Rok_Selector.png");	
	background-size: cover;
	background-position: center;
}

.project-section{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: auto;
  transition: transform 0.5s ease, opacity 0.5s ease;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.project-section {
  overflow-y: scroll;          /* allow vertical scroll */
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}

.project-section::-webkit-scrollbar {
  display: none;               /* Chrome/Safari */
}

.project-content{
/*	display: flex;*/
	width: 100%;
	min-height: 100%;
	font-family: Anybody Regular;
	line-height: 3.4vh;
	font-size: 2.2vh;
	color:var(--color-four);
	background-color: var(--color-one);
}

.placeholder{
	display: block;
	width: 100%;
	margin-bottom: 5vh;
	border-radius: 3vh;
}

#project1-img-one {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_1.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project1-img-two {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_2.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project1-img-three {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_3.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project1-img-four {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_4.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project1-img-five {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_5.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project1-img-six {
	aspect-ratio: 2000 / 1393;
	background: url("../images/Straw_6.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#project2-img-one {
  width: 100%;
  height: auto;
  display: block;
}

#project3-img-one {
  width: 100%;
  height: auto;
  display: block;
}

.volume-slider {
  position: absolute;
  top: 1vh;
  left: 1vh;
  width: 20%;
  accent-color: var(--color-one); /* change to match your brand color */
}

#project4-img-one{

}

#project4-img-two{
		aspect-ratio: 3 / 2;
		background: url("../images/HNTB_Welcome.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-three{
		aspect-ratio: 1000 / 772;
		background: url("../images/HNTB_Brochure1.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-four{
		aspect-ratio: 1000 / 772;
		background: url("../images/HNTB_Brochure2.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-five{
		aspect-ratio: 1000 / 773;
		background: url("../images/HNTB_Cover1.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-six{
		aspect-ratio: 1000 / 761;
		background: url("../images/HNTB_Cover2.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-seven{
		aspect-ratio: 2000 / 773;
		background: url("../images/HNTB_Layout1.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-eight{
		aspect-ratio: 2000 / 773;
		background: url("../images/HNTB_Layout2.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-nine{
		aspect-ratio: 1000 / 746;
		background: url("../images/HNTB_StyleGuide.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-ten{
		aspect-ratio: 1000 / 578;
		background: url("../images/HNTB_LogoNew.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-eleven{
		aspect-ratio: 1000 / 469;
		background: url("../images/HNTB_LogoOld.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project4-img-twelve{
		aspect-ratio: 1000 / 1000;
		background: url("../images/HNTB_Social.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-one{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_1.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-two{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_2.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-three{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_3.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-four{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_4.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-five{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_5.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project5-img-six{
		aspect-ratio: 2000 / 1100;
		background: url("../images/Rok_6.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

#project6-img-one{
		aspect-ratio: 3648 / 1760;
		background: url("../images/Me.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
}

.flex{
	display: flex;
}

.bold{
	font-family: Anybody Bold;
}

.url{
	display: block;
	text-align: center;
	font-family: Anybody Condensed Bold;
	color: var(--color-three);
	font-size: 5vh;
	margin-bottom: 5vh;
	transition: all 300ms ease;
}

.url:hover{
	color: var(--color-two);
	font-size: 6vh;
}

.project-content p{
	width: 100%;
	margin-bottom: 5vh;
	/*text-align: justify;
	text-align-last: justify;*/
}

.project-content p.image-description{
	width: 100%;
	margin-bottom: 2vh;
	/*text-align: justify;
	text-align-last: justify;*/
}

.left{
	margin-right: 6%;
}

.hidden {
  opacity: 0;
  transform: translateX(-100%);
/*  transform: rotateY(180deg);*/
  z-index: 1;
}

.moving-out{
/*	transform: translateX(100%);*/
	z-index: 1;
}

.visible {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.unclickable{
	pointer-events: none;
}

.project-name{
	position: relative;
	top: 55%;
	font-family: Anybody Condensed Regular;
	font-size: 3vh;
	line-height: 2.25vh;
	color: var(--color-one);
	opacity: 1;
	transform: translateY(-50%);
	transition: opacity 300ms;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.carousel {
  overflow: hidden;
  white-space: nowrap;
  width: 99%;
  font-family: Anybody Condensed Light Italic;
  color:var(--color-three);
  font-size: 3vh;
  padding-top: 10px;
}

.carousel-track span {
  flex: 0 0 100%;
  margin-right: 0px; 
}

.text-container{
	width: 100%;
	background-color: var(--color-one);
}

.text-container:nth-of-type(1){
	margin-bottom: -.6vh;
}

.stretch-text {
	position: relative;
	left: .1vh;
	font-family: 'Fit';
	font-variation-settings: 'wdth' 1000;
	white-space: nowrap;
	display: inline-block;
	font-size: 17.8vh;
	line-height: 12.5vh;
}

.stretch-text:nth-of-type(1){
	margin: .5vh 0 1.2vh -.2vh;
}

.contact-button {
  position: absolute;
  top: 1vh;
  right: 1vh;
  display: flex;
  align-items: center;   
  justify-content: center; 
  padding: 1vh 2vh .7vh 2vh;
  font-family: Anybody Condensed Bold;
  font-size: 3vh;
  color:var(--color-one);
  text-decoration: none;
  background-color: var(--color-three);
  border-radius: 10vh;
  transition: background-color 150ms ease;
  z-index: 99;
}

.contact-button:hover{
	cursor: pointer;
	color: var(--color-one);
	background-color:var(--color-two);
}

.contact-mobile-button{
	display: none;
}

.project-content .biography-title{
	font-family: 'Anybody Condensed Bold';
	font-size: 3vh;
	margin-bottom: 10px;
}

.project-selector{
	position: relative;
	display: block;
	flex: 1;
	text-align: center;
	overflow: hidden;
	transition: flex 0.3s ease;
	border-top: .4vh solid  var(--color-one);
	border-radius: 2vh;
	background-color: var(--color-two);
	cursor: pointer;
	transition: flex 300ms ease;
}

.project-selector:nth-of-type(1){
	border-top: none;
}

.project-selector:nth-of-type(6){
	border-top: none;
	border-radius: none;
}

.project-selector:hover{
	flex: 9;
}

.project-selector:hover .project-name {
  opacity: 0;
}

.carousel-track {
  display: inline-block; 
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left{
	from{
		transform: translateX(0%);
	}
	to{
		transform: translateX(-25%);
	}
}

/* MOBILE & TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-aspect-ratio: 1/1){

	html, body {
	  overflow: hidden;   /* disable all scrollbars */
	  height: 100%;       /* prevent extra space */
	  position: fixed;    /* lock content in place */
	  width: 100%;
	}

	aside{
		height: 90%;
	}

	.container{
		padding: 1vh;
		grid-gap: 1vh;
		grid-template-columns: auto;
		grid-template-rows: 23% 5% 39% 22%;
		grid-template-areas: 
			"title"
			"scroller"
			"content"
			"selector";
		max-height: 50vh;
		max-width: calc(100vw - 10px);
		overflow: hidden;
	}

	.text-container:nth-of-type(1){
		margin-bottom: -.5vh;
	}

	.project-section{
		height: 100%;
	}

	.stretch-text{
		font-size: 13.2vh;
		line-height: 75%;
	}

	.stretch-text:nth-of-type(1){
		padding: .6vh 0.1vh 0vh 0.1vh;
		margin: 0vh 0vh -0.6vh 0vh;
	}

	.project-selector:hover{
		flex: 1;
	}

	.project-name{
		font-size: 2.5vh;
	}

	.contact-button{
		display: none;
	}

	.contact-mobile-button{
		position: absolute;
	  width: calc(100% - 2vh);
	  bottom: 1.9vh;
	  display: block;
	  text-align: center;   
	  justify-content: center; 
	  padding: 1.3vh 0;
	  font-family: 'Anybody Condensed Bold';
	  font-size: 3vh;
	  color:var(--color-one);
	  text-decoration: none;
	  background-color:var(--color-three);
	  border-radius: 3vh;
	  transition: all 100ms ease;
	  z-index: 99;
	}
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
/*@media only screen and (min-width: 1025px){
	.container{

	}
}*/

/*.project-display{
	width: calc(66.6666% - 20px);
	height: 100%;
	background-color: #00ff00;
}*/