/* LEFT COLUMN */

	#about-contact {
		padding: 25px 30px 35px 30px;
		position: fixed;
		height: 100%;
		z-index: 504;
	}

	.name-container {
	  height: 100%;
	  position: relative;
	}

	a.name, div.name {
	  display: flex;
	  width: 60%;
	  max-width: 275px;
	  flex-flow: row nowrap;
	  justify-content: space-between;
	  font-size: 1.5555555555em;
	  position: absolute;
	  top: calc(50% - 25px);
	  left: 50%;
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  padding: 40px;
	  min-width:124px;
	  color: unset;
	}

	a.name:hover {
		cursor: help;
		color: white;
	}

	a.name:active {
		color: rgba(20,20,0,0.2);
	}

	div.name {
		opacity: 0;
		pointer-events: none;
	}

	.intro {
	  font-family: 'FK Roman';
	  opacity: 0;
	  pointer-events: none;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  top: calc(50% - 30px);
	  left: 50%;
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  width: 75%;
	  height: 100%;
	  flex-flow: row nowrap;
	  z-index: 500;
	  position: absolute;
	  font-size: 1.3333333333em;
	  line-height: 1.3333333333em;
	}

	.email, .social {
		position: absolute;
		width: calc(100% - 60px);
		font-size: .8888888888em;
		line-height: 1.3333333333em;
		z-index: 504;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.social {
		bottom: 86px;
	}

	.about-link, .contact-link {
		opacity: 0;
		pointer-events: none;
		font-size: .8888888888em;	
		position: absolute;
		margin-top: -3px;
	}

	.about-link {
		text-align: left;
		left: 0;
	}

	.contact-link {
		text-align: right;
		right: 0;
	}

/*	.header-spacer, .footer-spacer {
		opacity: 0;
		pointer-events: none;
	}*/

	.contact-icon, .about-icon {
		position: absolute;
		height: 32px;
		opacity: 0;
		pointer-events: none;
		margin-top: -10px;
	}

	.about-icon{
		left: 0;
		width: 32px;		
	}

	.contact-icon {
		right: 0;
		width: 34px;
	}

	svg {
		fill:rgba(20,20,0,1);
		height: 100%;
	}

	svg:hover {
		fill: rgba(20,20,0,0.5);
	}

	svg:active {
		fill: rgba(20,20,0,0.2);
	}

/* BACKGROUND SELECTED PROJECTS TITLE */

#projects-title {
	position: fixed;
	height: 100%;
	top: 30px;
	right: 30px;
	margin-bottom: 30px;
	z-index: 501;
	padding-left: 30px;
}

.selected-projects {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23.5%;
  min-width: 227px;
  height: 100%;
  margin: 0 auto;
  flex-flow: row nowrap;
  justify-content: space-between;
  z-index: 100;
  font-size: 1.5555555555em;
  margin-top: -42px;
}

/* PORTFOLIO SECTION */

#portfolio {
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 501;
	padding: 0 30px 0 30px;
	border-left: solid 1px #141400;
}

#portfolio::after {
    position: absolute;
    content: "";
    bottom: -30px;
    height: 30px;
    width: 1px;
}

/* PROJECT INDEX */

.project-image {
	width: 100%;
	position: relative;
	margin-top: 60px;
}

.project-image:first-child {
	margin-top: 0;
}

.project-image img, .project-image video {
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.project-image::before {
	z-index: 501;	
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #ebebeb;
	opacity: 0;
	pointer-events:none;
}

.project-image:hover::before {
	opacity: .2;
}

.project-image:active::before {
	opacity: .4;
}

.project-image.hover-overlay::before {
	content:"";
	opacity: .2;
	pointer-events:none;
}

.project-image.active-overlay::before {
	content:"";
	opacity: .4;
	pointer-events:none;
}

/* PROJECT DESCRIPTIONS */

.project-text {
	font-size: .8888888888em;
	margin-top: 20px;
	overflow: auto;
	display: block;
	line-height: 1.4444444444em;
}

.project-text .title, .project-text .description {
	float: left;
	display: inline-block;
	margin-right: 30px;
	position: relative;
}

.project-text .title {
	width: calc(29% - 30px);
	max-width: 520px;
}

.project-text .description {
	font-family: 'FK Roman';
	width: calc(59% - 30px);
}

.project-text .link {
	text-align: right;
}