.section.hero {

	background-image: url("../images/home.jpg");

	background-position: center center;

	background-size: cover;

	

	min-height: calc(100% - 80px);

	

	display: table;

}



.section.hero h1 {

	position: relative;

	

	color: #ffffff;

	

	font-size: 100px;

	text-shadow: 0 0 10px #000000;

	

	display: table-cell;

	vertical-align: middle;

	

	padding-top: 32px;

	padding-bottom: 32px;

	padding-left: calc(32px + 8%);

	

	margin: 0;

}



.section.hero .tint {

	position: absolute;

	width: 100%;

	height: 100%;

	background-color: #000000;

	opacity: 0.25;

	

	display: none;

}



@media screen and (max-width: 1024px) {

	.section.hero h1 {

		font-size: 80px;

		text-shadow: 0 0 8px #000000;

	}

}



@media screen and (max-width: 864px) {

	.section.hero h1 {

		font-size: 60px;

		text-shadow: 0 0 6px #000000;

	}

}



@media screen and (max-width: 664px) {

	.section.hero h1 {

		font-size: 40px;

		text-shadow: 0 0 4px #000000;

	}

}