.intro-background {
	background-image:url(https://www.defiantdev.com/img/backgroundhof.png);
	background-size:cover;
	width:100%;
	display:block;
	box-sizing:border-box;
	padding-bottom:5%
}

.black-text {
	line-height:1.5em;
	padding-left:10px;
	padding-bottom:10px;
}

.text-container {
	margin-top:10%;
	width: 30%;
	margin-left:45%;
	margin-right:5%;
	display:block;
	height:400px;
}

.text-container-left {
	margin-top:8%;
	width: 30%;
	margin-left:5%;
	margin-right:5%;
	height:500px;
}

@media screen and (min-width: 320px ) and (max-width: 805px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:90%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 569px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:90%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 539px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:100%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 469px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:120%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 437px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:130%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 406px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:140%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 373px) {
	.overview-container-hof, .key-features-container-hof {
		padding-bottom:190%;
		margin-top:-28%;
	}

	.key-features-container-hof {
		padding-bottom:300%;
	}

	..screenshots-section-hof {
		margin-top:-50%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 960px) {
	.text-container, .text-container-left {
		margin-top:2%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 872px) {
	.text-container, .text-container-left {
		margin-top:5%;
		margin-left:0%;
		margin-right:0%;
		width:80%;
	}

	.overview-container-hof {
		background-image:url(https://www.defiantdev.com/img/overviewsmall.png);
	}
}

@media screen and (min-width: 320px ) and (max-width: 833px) {
	.text-container, .text-container-left {
		width:50%;
		margin-top:2%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 805px) {
	.text-container, .text-container-left {
		width:80%;
		margin-top:10%;
	}
}

.left {
	text-align:left;
}

@media screen and (min-width: 320px ) and (max-width: 1115px) {
	.text-container-left {
		width:80%;
		margin-left:5%;
		margin-right:5%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 1115px) {
	.text-container-left {
		margin-top:10%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 895px) {
	.text-container-left {
		margin-top:8%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 851px) {
	.rat-dude {
		display:none;
	}

	.text-container-left {
		margin-top:12%;
	}

	.key-features-container-hof {
		padding-bottom: 100%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 851px) {
	.key-features-container-hof {
		padding-bottom: 80%;
	}

	.text-container-left {
		margin-top:20%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 700px) {
	.key-features-container-hof {
		padding-bottom: 100%;
	}

	.text-container-left {
		margin-top:20%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 564px) {
	.key-features-container-hof {
		padding-bottom: 120%;
	}

	.text-container-left {
		margin-top:22%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 480px) {
	.key-features-container-hof {
		padding-bottom: 140%;
	}

	.text-container-left {
		margin-top:25%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 439px) {
	.key-features-container-hof {
		padding-bottom: 155%;
	}

	.text-container-left {
		margin-top:28%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 415px) {
	.key-features-container-hof {
		padding-bottom: 180%;
	}

	.text-container-left {
		margin-top:20%;
		margin-left:1%;
		margin-right:1%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 378px) {
	.key-features-container-hof {
		padding-bottom: 210%;
	}

	.text-container-left {
		margin-top:20%;
		margin-left:1%;
		margin-right:1%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 337px) {
	.key-features-container-hof {
		padding-bottom: 245%;
	}

	.text-container-left {
		margin-top:25%;
		margin-left:1%;
		margin-right:1%;
	}
}

.full-width {
	width:100%;
	font-size:2em;
	color:#f2f2f2;
	text-align:left;
}

@media screen and (min-width: 1200px ) {
	.youtube-trailer-box-hof {
		max-width:960px;
		max-height:700px;
		padding-bottom:30%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 1100px) {
	.text-container {
		margin-right:0%;
		width:40%;
	}
}

@media screen and (min-width: 320px ) and (max-width: 870px) {
	.text-container {
		margin-right:0%;
		width:80%;
	}
}