/*
 * Project Listing Section
 */

.project-listing-section {
	position: relative;
	z-index: 3;
	text-align: center;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
}

.project-listing-section .project-type {
	position: relative;
	padding: 8.5% 0;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
	text-decoration: none;
}

.project-listing-section .project-type .title {
	position: relative;
	z-index: 3;
	letter-spacing: 0.05rem;
}

.project-listing-section .project-type .heading {
	position: relative;
	z-index: 3;
	margin-top: 5px;
}

.project-listing-section .project-type .image {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.65;
}

.project-listing-section .project-type .image:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 10%, rgba(0,0,0,0) 65%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 10%,rgba(0,0,0,0) 65%);
	background: linear-gradient(to right, rgba(0,0,0,0.65) 10%,rgba(0,0,0,0) 65%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
}

@media( min-width: 640px )  {}

@media( min-width: 800px )  {
	.project-listing-section {
		text-align: left;
		display: flex;
		justify-content: space-between;
	}

	.project-listing-section .project-type {
		display: inline-block;
		writing-mode: vertical-rl;
		text-orientation: sideways;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
		flex-grow: 1;
		padding: 15px;
		transition: flex-grow .4s .2s ease-out;
		cursor: pointer;
		height: 300px;
	}

	.project-listing-section .project-type:hover {
		flex-grow: 4;
	}

	.project-listing-section .project-type:focus {
		outline: 0;
	}

	.project-listing-section .project-type .image {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

@media( min-width: 1040px ) {
	.project-listing-section .project-type {
		height: 360px;
		padding: 20px;
	}
}
@media( min-width: 1380px ) {
	.project-listing-section .project-type {
		height: 420px;
		padding: 30px;
	}
}
@media( min-width: 1680px ) {
	.project-listing-section .project-type {
		height: 480px;
		padding: 40px;
	}
}
@media( min-width: 1940px ) {
	.project-listing-section .project-type {
		height: 540px;
		padding: 50px;
	}
}