/* HOME */

.color_pri {
	color: #37e1d1;
}

.color_black {
	color: #403540;
}

h1 {
/*
	margin: 20px auto;
	font-size: 40px;
	line-height: 45px;
	font-weight: 900;
*/
	margin: 35px auto 15px auto;
	padding: 0;
	font-size: 56px;
	line-height: 60px;
	font-weight: 900;
	text-transform: none;
	text-align: center;
}

p.h1_buffer {
	margin: 50px auto 25px auto;
	padding: 0;
	font-size: 60px;
	line-height: 84px;
	font-weight: 900;
}

p.writer {
	margin: 35px auto 15px auto;
	padding: 0;
	font-size: 40px;
	line-height: 52px;
	font-weight: 900;
	font-style: italic;
	text-align: center;
}

h2 {
/*
	margin: 20px auto;
	font-size: 24px;
	line-height: 36px;
	font-weight: 900;
*/
	margin: 35px auto 15px auto;
	font-size: 32px;
	line-height: 48px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h3 {
	margin: 35px auto 15px auto;
	font-size: 28px;
	line-height: 40px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 1px;
/* 	text-transform: uppercase; */
}

section.intro {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: 1;
}

.intro_text {
	margin: 0 auto;
	padding: 0;
	width: 80%;
}

p.portfolio_intro {
	font-size: 24px;
	line-height: 42px;
	text-align: center;
}

section.intro_buffer {
	margin: 0 auto;
/* 	padding: 80px 0 100px 0; */
	width: 100%;
	height: 100vh;
	opacity: 0 !important;
	pointer-events: none;
}

section.portfolio {
	position: relative;
	z-index: 10;
}

ul.portfolio_list {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	line-height: 0px;
	list-style: none;
}

.portfolio_list li {
	margin: 0 auto;
	padding: 0;
	width: 50%;
	height: 450px;
	display: inline-block;
	overflow: hidden;
}

.portfolio_list li div {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-position: center;
}

/*a.project_title .darken_overlay {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #403540;
	position: absolute;
	z-index: 1;
	display: block;
}*/

.video_thumb {
	position: relative;
	z-index: 1;
	transform: translate(0, -100%);
}

section.contact {
	margin: 0 auto;
	padding: 80px 0 60px 0;
	width: 80%;
/*
	background: #403540;
	background: #37e1d1;
*/
}

section.contact h3 {
/* 	color: #f7f6f4; */
}

@media only screen and (min-device-width: 701px), only screen and (min-width: 701px) {

	.portfolio_list li a {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		color: #f7f6f4;
		text-align: center;
		background: #37e1d1;
		background: rgba(53, 225, 208, 0.9);
		box-shadow: inset 0 0 0 20px #f7f6f4;
		display: block;
		overflow: hidden;
		opacity: 0;
		position: relative;
		z-index: 2;
		-moz-transition: ease all 500ms;
		-o-transition: ease all 500ms;
		-webkit-transition: ease all 500ms;
		transition: ease all 500ms;
	}

	.portfolio_list li a:hover {
		opacity: 1;
	}

	a.project_title span.overlay {
		margin: 0 auto;
		padding: 0;
		width: 85%;
		color: #f7f6f4;
		text-shadow: 0 0 8px #37e1d1;
		text-align: center;
		display: block;
		position: relative;
		z-index: 10;
	}

	.project_name {
		font-size: 26px;
		line-height: 38px;
		letter-spacing: 1px;
		font-weight: 900;
		text-transform: uppercase;
		display: block;
	}

	.project_desc {
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 1px;
		font-weight: 500;
		text-transform: uppercase;
		display: block;
	}

}

@media only screen and (max-device-width: 700px), only screen and (max-width: 700px) {

	section.intro, section.intro_buffer {
		margin: 0 auto;
/* 		padding: 50px 0 25px 0; */
/* 		padding: 30px 7.5% 40px 7.5%; */
/* 		width: 85%; */
	}
	
	section.intro_buffer {
		width: 85%;
	}
	
	.intro_text {
		width: 85%;
	}

	h1, p.h1_buffer {
		margin: 25px auto 10px auto;
		font-size: 32px;
		line-height: 44px;
	}

	h2 {
		margin: 25px auto 10px auto;
		font-size: 24px;
		line-height: 36px;
	}
	
	p.writer {
		margin: 25px auto 10px auto;
		font-size: 32px;
		line-height: 44px;
		font-weight: 900;
		text-align: center;
	}
	
	.portfolio_list li {
		width: 100%;
	}
	
	.portfolio_list li a {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		color: #f7f6f4;
		text-align: center;
		display: block;
		overflow: hidden;
		position: relative;
		z-index: 2;
		-moz-transition: ease all 500ms;
		-o-transition: ease all 500ms;
		-webkit-transition: ease all 500ms;
		transition: ease all 500ms;
	}

	a.project_title span.overlay {
		margin: 0 auto;
		padding: 20px 7% !important;
		width: 86%;
		text-align: center;
		background: #f7f6f4;
		background: rgba(247, 246, 244, .95);
		background: rgba(64, 53, 64, .95);
		background: rgba(55, 225, 209, .92);
		display: block;
		position: absolute;
		bottom: 0;
		z-index: 10;
	}

	.project_name {
		margin: 0 0 10px 0;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: 1px;
		font-weight: 900;
		text-transform: uppercase;
		color: #403540;
		color: #f7f6f4;
		display: block;
	}

	.project_desc {
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 1px;
		font-weight: 500;
		text-transform: uppercase;
		color: #37e1d1;
		color: #f7f6f4;
		display: block;
	}

	section.contact {
		width: 85%;
	}
}