/*General Styles*/

html{
  scroll-behavior: smooth;
}
.title{
	color: #3D433E;
}
body{
	font-family: 'Hanken Grotesk', sans-serif;
	scroll-behavior: smooth;
}
body{
	font-family: 'Hanken Grotesk', sans-serif;
	scroll-behavior: smooth;
}

p{
margin-bottom: 1.5em;
}

.link {
	color: #fff;
	position: relative;
	text-decoration: none;
}
.link:hover{
	color: #fff;
}
.link::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1.5px;
	border-radius: 3px;
	background-color: #fff;
	bottom: 0;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
}
.link:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}
.darken {
	position: relative;
}
.darken:before {
	background-color: black;
	height: 100%;
	width: 100%;
	content: "";
	opacity: 0.5;
	position: absolute;
	display: block;
	z-index: 0;
}
.navbar{
	position: sticky;
	top: 0;
  z-index: 99!important;
}
#images img{
	width: 100%;
}

body{
	overflow-x: hidden;
}

/* FILTERS */
.filter.tag{
	color: white;
	border: 1px solid #EEE;
	transition: all ease-in-out .4s;
	background-color: unset;
}
.filter.tag a{
	color: white;
	background-color: unset;
	text-decoration: none;
}

.filter.tag:hover{
	transform: scale(1.05);
	background-color: unset;
	text-decoration: none;
}

.filter.tag.is-active{
	background-color: #EEE;
	color: black;
}

.filter.tag.is-active a{
	color: black;
}

.filter.clear{
	text-align: right;
	color: white;
}

.projects.filter.title{
	text-align: left;
	margin-bottom: 2rem;
}


/* make any immediate child elements above our darkening mask */
.darken > * {
	position: relative;
}
/* Hero */
#header{
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
}
#header > .hero-body{
	text-align: center;
	min-height: 100vh;
	position: static;
	z-index: 2;
	padding: 0px;
}
#header > .hero-body > *{
	color: white;
}
.hero-body > .container > h2{
	text-align: center;
	color: white;
}
#header .title{
	font-size: 5rem;
	color: white;
	width: 100%;
}
#headline{
	z-index: 1;
}
#cta{
	position: absolute;
	bottom: 100px;
	text-align: center;
	width: 100vw;
}


/* Lightbox */
.lightbox .lb-image{
  border-radius: unset;
  /* Image border */
  border: none;
}

.lb-outerContainer{
  border-radius: unset;
}
.lb-outerContainer {
  background-color: black;
}

/* About */
#about{
	background-color: #E4E7E5;
	color: #505B51;
	margin-bottom: 0;
}
#about .link{
	color: #505B51;
	font-size: 1.4rem;
	font-weight: 600;
}
#about .title{
	font-weight: 800;
	color: #505B51;
}
#about .subtitle{
	line-height: 1.125;
	font-size: 3rem;
	font-weight: 600;
	color: #505B51;
}
#about .link::before{
	background-color: #505B51;
	height: 3px;
	border-radius: 3px;
}
.headshot img{
	width: 100%;
	text-align: center;
	transition: transform .3s ease-in-out;
}
.headshot:hover img{
	transform:scale(102%);
	transition: transform .3s ease-in-out;
}
.logo{
	max-height: 30px;
}
#cta .link{
	font-size: 1.3rem;
	font-weight: 600;
}
#cta:hover .downIcon .icon{
	transition: all 500ms ease-in-out;
	transform:translateY(5px);
}
.downIcon .icon{
	transition: all 500ms ease-in-out;
}
.downIcon .icon:hover{
	transition: all 500ms ease-in-out;
	transform:translateY(5px);
}


/* Values */
#values{
	background-color: #505B51;
	color: #E4E7E5;
}
#values .title{
	color: #fff;
}


/* Process */
#process .hero{
	background-color :#3b443b;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
#process .hero .title{
	color: #fff;
}
#process .columns{
	margin: 0;
}
#process .text{
	padding: 3rem;
	width: 75%;
	margin: auto;
}
#process .text *{
	color: #fff;
}
#sidebarContent{
	position: sticky;
	top: 15vh;
}
#sidebarContent .title{
	margin-bottom: .75rem;
}
#process .hero-body .title{
	font-size: 5rem;
}
#process img{
	width: 100%;
}

#process .section:not(:last-child){
  padding-bottom: 0;
}
/* Projects */
#projects{
	text-align: center;
}
.projectTile {
	position: relative;
	height: auto;
	transition: transform .3s ease-in-out;
}
.projectTile p{
	line-height: 1.15;
}
.projectTile:hover{
	transform:scale(101%);
	transition: transform .3s ease-in-out;
}
.projectTile:hover .projectOverlay {
	opacity: 1;
}
.projectImage{
	display: block;
	width: 100%;
	height: auto;
}
.projectImage img{
	width: 100%;
}
.projectContainer{
	line-height: 0;
}
.projectOverlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: none;
	transition: .5s ease;
	background-color: rgba(0, 0, 0, 0.7);
}
.projectOverlay *{
	color: white;
}
.projectOverlay{
	padding: 3rem;
}
.projectInfo{
	text-align: left;
}
.projectInfo .title{
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: lowercase;
}
#projects .hero{
	background-color :#3b443b;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#projects .hero-body{
	align-self: center;
}
#projects .hero-body .title{
	color: #fff
}

/* Contact */
#images{
	position: sticky;
	overflow: hidden;
}
#contact .container{
	max-width: 600px;
}

/* Project Pages */
#project.container{
  padding-top: 4rem;
}


/* Mobile-Specific Styles */
@media only screen and (max-width: 768px) {
	.projectOverlay{
		display: block;
		position: static;
		opacity: 1;
		background-color: unset;
		color: black;
		padding: 1rem 0;
	}
	.projectOverlay *{
		color: black;
	}
	.projectDescription{
		display: none;
	}
	.projectInfo .title{
		font-size: 2rem;
		font-weight: 800;
	}
	#projects img{
		width: 100%;
	}
	.processImages img:not(:first-child){
		display: none;
	}
	#sidebarContent{
		padding-bottom: 20px;
	}
	#header .title {
		font-size: 2.5rem;
	}
	.logo {
		max-height: 25px;
	}
	.section .subtitle{
		font-size: 2.5rem !important;
	}
	#process #sidebarContent .title{
		font-size: 2rem;
	}
	#cta{
		bottom: 90px;
	}
	#header{
		min-height: 90vh;
	}
	#header > .hero-body{
		min-height: unset;
	}
	.ctaLink {
		margin-bottom: -5px;
	}
	.divider-top{
		top: -1px !important;
	}
	#values .container{
		margin-top: 4rem;
		margin-bottom: 2rem;
	}
	#values .title.is-3{
		font-size: 5rem;
		margin-bottom: 0.5rem;
	}

	.value.column .title.is-4{
		margin-bottom: 0.4rem;
	}
	#project.container {
		padding-top: 0;
	}
	#values .title.is-3{
		text-align: center;
	}
}

/* Header Bottom Divider */
.custom-shape-divider-bottom-1675022589 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1675022589 svg {
    position: relative;
    display: block;
    width: calc(119% + 1.3px);
    height: 50px;
}

.custom-shape-divider-bottom-1675022589 .shape-fill {
    fill: #e4e7e5;
}


/* About Bottom Divider*/
.custom-shape-divider-top-1675021002 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1675021002 svg {
    position: relative;
    display: block;
    width: calc(174% + 1.3px);
    height: 47px;
}

.custom-shape-divider-top-1675021002 .shape-fill {
    fill: #e4e7e5;
}

/* Values Bottom Divider */

.custom-shape-divider-top-1675021677 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1675021677 svg {
    position: relative;
    display: block;
    width: calc(120% + 1.3px);
    height: 47px;
}

.custom-shape-divider-top-1675021677 .shape-fill {
    fill: #505b51;
}

/* Process Bottom Divider */

.custom-shape-divider-bottom-1675021755 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1675021755 svg {
    position: relative;
    display: block;
    width: calc(171% + 1.3px);
    height: 47px;
}

.custom-shape-divider-bottom-1675021755 .shape-fill {
    fill: #FFFFFF;
}


#about, #values, #process, #projects .hero{
	position: relative;
}




/*  Unsorted */
.page .container{
	margin-top: 3rem;
}

.page .container{
	max-width: 1000px;
}

.navLogo{
	height: 30px;
}
#values .title.is-3 {
    margin-top: -0.5rem;
}
#values .column{
	padding-top: 0;
}
am-img figure{
	text-align: left !important;
}
html {
	scroll-padding-top: 70px; /* height of sticky header */
  }

@supports ( -webkit-touch-callout : none) {
	.hero {
	background-attachment:scroll !important;
	}
	}
	
@supports not ( -webkit-touch-callout : none) {
	.hero {
	background-attachment: fixed !important;
	}
	}

#navMenu.is-active .navbar-item{
	text-align: right;
}