html, .aboutPage {
	height: 100%;
}

.mobileNav {
	display:none;
}

.closeButton {
	cursor:pointer;
}

.slideOut {
	background:#000;
}

.shopCopy {
	padding-bottom:20px;
}

.hamburgerIcon {
	position:relative;
	top:2px;
	margin-right:5px;
}

.menuButton {
	cursor:pointer;
}

.closeIcon {
	position:relative;
	top:4px;
}

#off-canvas {
	z-index:7;
}

.youtube-trailer-box-hof2 {
	max-width: 700px;
	height: 430px;
	padding: 0;
	margin-right: 40px;
}

.youtube-trailer-box-hof2:before {
 	content:url('../img/redLeft.png'); /* with class ModalCarrot ??*/
  	position:absolute; /*or absolute*/
 	left: -40px;
 	top: -30px;
}

.youtube-trailer-box-hof2:after {
	content:url('../img/redRight.png'); /* with class ModalCarrot ??*/
  	position:absolute; /*or absolute*/
 	right: -40px;
 	left: auto;
 	top: -30px;
}

#constraint {
	background:#000;
}

youtube-iframe {
    width: 100%;
    height: 400px;
    top: 0;
    left: 0;
}

.trailer-text-area .red-text, .trailer-text-area h2 {
	color:#b82b14;
	position: relative;
}

.trailer-text-area h2 {
	margin-bottom: 50px;
}

.trailer-text-area h2:after, .trailer-text-area h2:before{
  content:url('../img/redHorizon.png'); /* with class ModalCarrot ??*/
  position:absolute; /*or absolute*/
  bottom: -35px;
  left: 0;
}

.trailer-text-area h2:before {
	bottom: auto;
	top: -70px;
}

.overview-container {
    background-image: url(../img/overviewbackground.png);
    margin-top: -10%;
    position: relative;
}

.trailer-text-area.overview h3 {
	margin: 20px 0;
	padding: 20px 0 0 ;
}


.key-features-container h4 { 
    color:#fff;
}

.key-features-container li {
    line-height: 1.5em;
    padding-left: 10px;
    padding-bottom: 10px;
}

.trailer-text-area.overview .white-border-under:after{
	margin-left:auto;
	margin-right:auto;
}

.white-border, .white-border-bottom, .black-border, .black-border-bottom {
	border: 0px;
}

.white-border:before, .black-border:before {
	display: block;
	content: "";
	position: relative;
	width: 60%;
	height: 1px;
	background: #fff;
	margin-bottom: 20px;
}

.white-border.full-width:before, .black-border.full-width:before {
	width: 100%;
}

.white-border-bottom:after, .black-border-bottom:after {
	display: block;
	content: "";
	position: relative;
	width: 60%;
	height: 1px;
	background: #fff;
	margin-top: 20px;
}

.white-border-under:after {
	display: block;
	content: "";
	position: relative;
	width: 60%;
	height: 1px;
	background: #fff;
	margin-top: 20px; 
}

.black-border:before, .black-border-bottom:after {
	background: #000;
}

.key-features-container{
	padding-bottom:600px;
	top: -20px;
}
.overview-container {
	padding-bottom: 400px;
}

.screenshots-section { 
	background: url(../img/repeatingBg.jpg);
}

.screenshot-flex-hof .white-border:before {
	margin-left: auto;
	margin-right: auto;
}

.overview-container h3 {
	text-align: left;
}

h1, h2,h3 {
    font-family: 'Oswald', sans-serif;
}

p {
	line-height: 1.5;
}

.screenshots-section-hof {
    padding-top: 30%;
    padding-bottom: 70%;
    margin-bottom: -40px;
}

.text-container {
	padding-top: 10%;
}

.desktop {
	display: none;
}

.overview-container-hof, .key-features-container-hof {
    padding-bottom: 650px;
}

.rat-dude {
	background-position: center;
}

.nav-flex {
	background-color: #000;
	position: relative;
}

.navigation {
	padding: 0;
	z-index: 2;
    position: relative;

}

.nav-flex:after {
	content: "";
	background: url(../img/topBar.png);
	background-position: bottom;
	background-repeat: repeat-x;
	padding-bottom: 20px;
	position: absolute;
	bottom: -11px;
	width: 100%;
	height: 30px;
	pointer-events: none;
}

.home-background {
    margin-top: -0px;
    padding-top: 40px;
    min-height:576px;
}

.landing {
	display: table;
    border-bottom: 1px solid #ff9f38;
}

.leftQuote, .landingImage, .rightQuote {
	display: table-cell;
	position: relative;
	background: #000;
}
.leftQuote,.rightQuote {
	background: #000;
	width: 20%;
	vertical-align: middle;
	padding: 0 20px;
	font-size: 2rem;
    text-transform: uppercase;
    color: #aaa;
    font-family: Oswald, sans-serif;
}

.leftQuote a,.rightQuote a {
	color:#b82b14;
	position: relative;
	font-family: Oxygen, sans-serif;
	 font-size: 0.7em;
}

.landingImage:before, .landingImage:after {
	content: "";
	display: block;
	position: absolute;
	height: 100%;
	width: 83px;
	left: 0;
	background: url(../img/leftFade.png);
	top: 0;
}

.landingImage:after {
	right: 0;
	left: auto;
	background: url(../img/rightFade.png);
}

.quoteHolder {
	position: relative;
	 font-family: Oswald, sans-serif;
}

.leftQuote .quoteHolder:after, .rightQuote .quoteHolder:after, .leftQuote .quoteHolder:before, .rightQuote .quoteHolder:before {
  content:url('../img/redHorizon.png'); /* with class ModalCarrot ??*/
  position:absolute; /*or absolute*/
  bottom: -35px;
  left: 0;
}

.leftQuote .quoteHolder:before, .rightQuote .quoteHolder:before {
	bottom: auto;
	top: -70px;
}

	.leftQuote,.rightQuote {
		display: none;
	}

		.blog {
    		max-width: none;
    	}

.mobile-twitter {
	display: block;
	text-align: center;
	width: 100%;
}

.mobile-twitter .twitter-container {
	width: 100%;
}

.platform-item { 
	width: auto;
	max-width: 20%;
	margin: 0 2%;
}

.platform-item img {
	max-width: 100%;

}

.upperContainer {
	margin-top: -10%;
		background: none;
		padding-bottom: 20px;
}

.twitter-container {
	margin-top:30px;
}

.blog-box-heading {
	margin-bottom:30px;
}
.blog-title, .blog-date {
	padding-bottom:20px;
}
.blog-title a {
	color: #f2f2f2;
	padding-top:40px;
}
.blog-content {
	padding-bottom:40px;
}

.socialBtns {
	padding-bottom:20px;
}

.socialBtn {
	width:30px;
	display:inline-block;
}

.socialBtn img {
	width:100%;
}



@media screen and (max-width: 700px) and (min-width: 320px) {
	.landing-hof-2 {
		background:url(../img/hof2mobile.jpg);
		background-size:cover;
		background-position:middle;
		    padding-bottom: 129%;
	}

	.landing-hof-1 {
		background:url(../img/hofmobile.png);
		background-size:cover;
		background-position:middle;
		    padding-bottom: 135%;
	}

	.intro-box {
		width:100%;
		margin-top:-8%;
		margin-left:0;
		padding:0 15%;
	}

	.hof-2-logo {
		display:none;
	}

	.trailer-box {
		padding-top:60px;
	}
}

@media screen and (max-width: 900px) and (min-width: 120px) {
	.desktopNav {
		display:none;
	}
	.mobileNav {display:inline-block;}
	.navigation nav ul li {margin:0;}
	.navigation nav ul .menuButton {position:absolute;top:-10px;left:8px;}
	.navigation nav ul .logoLi {position:absolute;right:8px;}
	.nav-flex {
    	min-height: 40px;
	}
}

@media screen and (max-width: 750px) and (min-width: 120px) {
		.widgetHolder {
		text-align:center;
		width:100%;
		margin: 10px 0 !important;
	}
	.widgetHolder div {
		display:inline-block;
	}
	.shopCopy {
		text-align: left;
	}
}

@media screen and (max-width: 1002px) and (min-width: 320px) {
	.platform-item {
		max-width: 40%;
	}

	.overview-container {
		padding-bottom:600px;
	}
	.trailer-text-area h2:after, .trailer-text-area h2:before{
	  margin-left: 50%;
	  left: -125px;
	}

	.trailer-text-area ul {
		padding-left: 30px;
	}

	.trailer-text-area h2 {
		text-align:center;
	}

	.trailer-text-area .red-text {
		text-align: center;
	}
	.youtube-trailer-box-hof2 {
	    margin: 0 auto;
	}

	.mobile-twitter .twitter-container, .mobile-twitter.twitter-title {
		display: block;
		float: none;
		margin: 0 auto;
	}
}
@media screen and (max-width: 500px) {
	.overview-container, .key-features-container {
		padding-bottom:700px;
	}
}

@media screen and (min-width: 700px) {
	.twitter-title {
		display: none;
	}
	.mobile-twitter {
		display: block;
		width: 100%;
	}

	.desktop {
		display: inline;
	}
	.text-container {
		padding-top: 0;
	}
	.shaman{
	    display: none;
	}
	.trailer-text-area.overview h3 {
		text-align: left;
	}

	.screenshot-flex {
		width: 100%;
		padding-top: 60px;
	}
	.image-popup-no-margins {
		width: 33%;
	}

	.screenshot-flex-hof .image-popup-no-margins {
		width:50%;
	}

}

@media screen and (min-width: 1050px) {
	.text-container {
		padding-top: 0;
	}
	.twitter-title {
		display: block;
	}
	.mobile-twitter {
		display: none;
	}
	.screenshots-section-hof {
		padding-bottom: 60%;
	}
}

@media screen and (min-width: 1050px) {
	.image-popup-no-margins {
		width: 50%;
	}

	.blog {
		    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    display: block;
	}
	.shaman{
	    display: block;
	}
	.overview-container, .key-features-container {
		padding-bottom: 56.25%;
	}
	.screenshot-flex {
		width: 50%;
		padding-top: 10px;
	}

}

@media screen and (min-width: 1200px) {
	.leftQuote,.rightQuote {
		font-size: 1.5rem;
	}
	.leftQuote,.rightQuote {
		display: table-cell;
	}
	.overview-container-hof {
	    padding-bottom: 65%;
	}
	 .key-features-container-hof {
		padding-bottom: 57%;
	}
	li.black-text, p.white-text, p.red-text {
	    font-size: 1em;
	}
	.screenshots-section-hof {
		padding-bottom: 65%;
	}

@media screen and (max-width: 1450px) and (min-width: 1200px) {
	li.black-text, p.white-text, p.red-text {
	    font-size: 1em;
	}
}

@media screen and (min-width: 1450px) {
	li.black-text, p.white-text, p.red-text {
	    font-size: 1em;
	}
	.key-features-container-hof .text-container-left {
		padding-left: 200px;
	}
	.trailer-text-area.overview {
		bottom: 20px;
		max-width: 500px;
	}
	.trailer-text-area {
		max-width: 400px;
	}
	.screenshot-flex, .screenshot-flex-hof {
	    width: 55%;
	}
	.screenshots-section-hof {
		padding-bottom: 45%;
	}
}

@media screen and (max-width: 3000px) and (min-width: 1921px) {
	p.white-text, p.black-text, li.black-text, p.red-text {
	    font-size: 1em;
	}
}