html {
}

p {
	font-family: "Alegreya", serif;
	margin-bottom: 1.5em;
}

.header-container {
	background-color: white;
	padding-top: 3em;
	padding-bottom: .5em;
}

h3 {
	font-weight: bold !important;
	font-size: 1em !important;
}

.logo-container {
	position: fixed;
	padding: 0 4em;
	margin-top: 3em;
	width: 100%;
	margin-left: -1em;
	z-index: 100;
}

.logo {
	padding: 0 !important;
	
}

#logo-image {
	height: 2.5em;
	position: relative;
}

.masthead {
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	text-transform: none;
	margin-top: 1.5em;
	position: relative;
	transition: .25s ease;
	transition-delay: .1s;
	z-index: 1001;
}

.masthead-text {
	position: absolute;
	margin: auto;
	z-index: 100;
	color: black;
	transition: .25s ease;
	opacity: 1;
}

/*
	.masthead-text::after {
		content: "Home";
		background-color: white;
		position: absolute;
		left: 0;
		padding-right: 100px;
		padding-left: 1px;
		transition: .25s ease;
		opacity: 0;
		color: black;
	}
	
	.masthead-text:hover::after {
		opacity: 1;
		transition-delay: .25s;
	}
*/

.masthead-text span {
	width: 20px;
	border-bottom: 2px solid black;
	position: absolute;
	bottom: -3px;
	left: 1px;
	transition: .25s ease;
}

		.masthead:hover {
			padding-bottom: 6em;
			transition: .25s ease;
		}
		
/*
		.masthead:hover .masthead-text {
			color: white;
		}

		
		.masthead:hover .masthead-text::after {
			opacity: 1;
			transition-delay: .25s;
		}
*/

		.masthead:hover span {
			width: 99%;
			transition: .25s ease;
		}

		.masthead:hover .masthead-menu {
			opacity: 1;
			transition: .5s ease;
			visibility: visible;
		}
		
		.masthead-menu:hover {
			opacity: 1;
		}
				
		.masthead:hover .masthead-menu li {
			transition: .25s ease;
		}
	
.masthead-menu {
	padding-top: 3em;
	position: relative;
	transition: .25s ease;
	opacity: 0;
	text-transform: none;
	transition: .25s ease;
	visibility: hidden;
	height: 0;
}

.masthead-menu ul {
	list-style-type: none;
	margin-left: 0;
}

.masthead-menu li {
	cursor: pointer;
}

.masthead-menu a {
	color: inherit;
}
		

.contact {
	font-family: "Roboto", sans-serif;
	margin-top: .75em;
	margin-right: 1em;
	float: right;
	color: #1480d9;
	transition: .25s ease;
	transition-delay: .1s;
	background-color: white;
	padding: .75em 1em 0 1em;
}	

.contact-m {
	visibility: hidden;
	margin-right: 0;
}

.contact-text {
	position: absolute;
	margin: auto;
	cursor: pointer;
}
	
.contact-text span {
	width: 20px;
	border-bottom: 1px solid #1480d9;
	position: absolute;
	bottom: -3px;
	left: 1px;
	transition: .25s ease;
}

		
		.contact:hover span {
			width: 99%;
			transition: .25s ease;
		}
		
		.contact:hover > .contact-menu {
			opacity: 1;
			transition: .25s ease;
			height: auto;
			visibility: visible;
		}
	
.contact-menu {
	margin-top: 2.5em;
	transition: .25s ease;
	opacity: 0;
	height: 0;
	visibility: hidden;
	background-color: white;
}

.contact-menu ul {
	list-style-type: none;
	margin-left: 0;
}

.contact-menu li {
	cursor: pointer;
}

.mission {
	font-family: "Alegreya", serif;
	font-size: 2em;
	position: relative;
}

.mission a {
	color: inherit;
	position: relative;
}

	.mission a:hover {
		color: inherit;
	}
	
	.mission a::after {
		content:'';
	    position:absolute;
	    width: 100%;
	    height: 0;    
	    left:0;
	    bottom: 0;                
	    border-bottom: 1px dotted #000;	
	    transition: .25s ease;
	}
	
	.mission a:hover::after {
		border-bottom: 1px solid #1480d8;
	    transition: .25s ease;
	}


.projects {
	margin-top: 2em;
	margin-bottom: 15em;
}

.project {
	position: relative;
}

.project::after {
	content: "";
	position: absolute;
	width: 0px;
	height: 0;
	left: 0;
	bottom: -.7em;
	border-bottom: 2px solid black;
	transition: .25s ease;	
}

	.project:hover::after {
	    width: 40%;
	    transition: .25s ease;
	}

	.project.short:hover::after {
	    width: 20%;
	    transition: .25s ease;
	}

.explore-site {
	font-size: 1.5rem !important;
}

.project-division {
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: black;
	margin-bottom: 2em;
	padding-top: 4.5em;
}

.projTitle {
	margin-bottom: 2em;
}
	

.project .label {
	font-family: "Alegreya", serif;
	color: black;
	font-size: 3em;
	font-style: none;
	line-height: 1;
	margin-top: .15em;
	cursor: pointer;
}

.project .eyebrow {
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	color: lightgray;
	font-size: .75em;
}

.project .more-link {
	font-family: "Roboto", sans-serif;
	color: gray;
	font-size: .75em;
	margin-top: .5em;
}

.projDesc {
	font-family: "Alegreya", serif;
	height: 0;
	opacity: 0;
}

.footer {
	font-family: "Roboto", sans-serif;
	color: gray;
	font-size: .6em;
	margin-top: 5em;
	margin-bottom: 3em;
}


/* Project page */


.project-page {
	margin-top: 1em;
	margin-bottom: 1em;
}

.project-page .label {
	font-family: "Alegreya", serif;
	color: black;
	font-size: 3em;
	font-style: none;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.project-page .eyebrow {
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	color: lightgray;
	font-size: .75em;
}

.project-page .blurb {
	font-family: "Alegreya", serif;
	font-size: 1.25em;
	margin-top: 1em;
}

.link {
	font-family: "Roboto", sans-serif;
	color: #1480d8;
	transition: .25s ease;
	position: relative;
	top: 0;
	margin-top: 0;
}


.link-block {
	margin-top: .35em;
}


.link img {
	height: .5em;
	margin-left: 5px;
	margin-top: -1px;
	opacity: 0;
	transition: .25s ease;
}

	.link::after {
		content:'';
	    position:absolute;
	    width: 20px;
	    height: 0;    
	    left:0;
	    bottom: -.5em;                
	    border-bottom: 1px solid #1480d8;		
		transition: .25s ease;
	}

	.link:hover::after {
		width: 100%;
		transition: .25s ease;
	}
	
	.link:hover .link img {
		opacity: 1;
		transition: .25s ease;
	}
	
	.link-block:hover .link::after {
		width: 100%;
		transition: .25s ease;
	}

	.link-block:hover .link img {
		opacity: 1;
		transition: .25s ease;
	}

.link-blurb	{
	font-family: "Roboto", sans-serif;
	margin-top: 1em;
	color: gray;
	font-size: .75em;
}

.project-page .skills {
	font-family: "Roboto", sans-serif;
	color: gray;
	margin-top: .5em;
}

.section {
	margin: 2em 0;
}

.section.last {
	margin-bottom: 6em;
}

.section h2 {
	font-family: "Roboto", sans-serif;
	font-size: inherit;
	font-weight: bold;
}

.section p {
	margin-bottom: 2em;
}

.caption {
	color: gray;
	margin-top: 1em;
}

.caption img {
	height: .8em;
	margin-top: -3px;
	margin-right: 5px;
}

.project-page .blurb a {
	color: inherit;
	position: relative;
}

	.project-page .blurb a:hover {
		color: inherit;
	}
	
	.project-page .blurb a::after {
		content:'';
	    position:absolute;
	    width: 100%;
	    height: 0;    
	    left:0;
	    bottom: 0;                
	    border-bottom: 1px dotted #000;	
	    transition: .25s ease;
	}
	
	.project-page .blurb a:hover::after {
		border-bottom: 1px solid #1480d8;
	    transition: .25s ease;
	}


.expand-overlay span {
	position: relative;
	color: black;
	width: 100%;
	height: 100px;
}




	
	
.wine-bright {
	color: #d80c45;
}

.wine-deep {
	color: #79254d;
}

.algae-bright {
	color: #02c63a;
}

.algae-deep {
	color: #03c6a2;
}

.peacock-bright {
	color: #1480d8;
}

.peacock-deep {
	color: #07518d;
}

.fall-bright {
	color: #c67e05;
}

.fall-deep {
	color: #c42b03;
}

.full {padding: 0 !important;}

	
@media (max-width: 40em) {
	
	.row {
		padding-right: 2em !important;
		padding-left: 2em !important;
	}
	
	#logo-image {
		margin-left: -1em;
	}
	
	.logo-container {
		position: relative;
	}
	
	li {
		margin-top: .5em;
	}
	
	.mission {
		font-size: 1.25em;
		margin-bottom: 1em;
	}
	
	.project .label {
		font-size: 2em;
	}

	.projDesc {
		visibility: hidden;
	}

		.contact:hover {
			padding-bottom: 5em;
			transition: .25s ease;
		}

	.contact-d {
		visibility: hidden;
	}
	
	.contact-m {
		visibility: visible;
	}
	
	.project-page .blurb {
		font-size: 1em;
	}
	
}	

@media (max-width: 72em) {
	
	.link {
		font-weight: bold;
	}
	
	.link-block {
		margin-top: 2em;
		margin-bottom: 2em;
	}


}
	
	
	

.main-carousel {
	width: 100%;
}	

.main-carousel.stylebook {
	width: 100%;
	background-color: black;
}	

.main-carousel .flickity-viewport {
}

	
.carousel-cell {
	width: 100%;
}

.carousel-cell.stylebook {
	opacity: .95;
}