/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(../imgs/hero.jpg) no-repeat 0 0;
	background-size: 189.72%;
}


/* custom CSS on a per project basis
================================*/


.section-inner {
	background-color: #000;
}

.section-inner .black {
	max-width: 1170px;
	margin: 0 auto;
}

.row {
	margin: 25px auto!important;
}

.social-follow-item-icon {
	color: #FFF!important;
}

h1.hero {
	font-family: 'GeForce-alt',  sans-serif;
	font-weight: bold;
	color: #76b900;
	text-transform: uppercase;
}

h2.sub-hero {
	font-family: 'GeForce-alt',  sans-serif;
	font-size: 1.75em;
	font-weight: bold;
	color: #FFF;
	padding:  0 0 0 8%;
	margin-bottom: 25px;
	text-transform: uppercase;
}

p.hero-intro {
	font-family: 'DINPro',  sans-serif;
	font-size: 1.35em;
	line-height: 1.5em;
	font-weight: normal;
	color: #FFF;
	padding:  0 0 0 8%;
	max-width: 50%;
}


h1.section-title {
	font-family: 'GeForce', sans-serif;
	font-size: 2.25em;
	color: #FFF;
	font-weight: normal;
	text-transform: uppercase;
	margin: 25px 0;
}

h2.content-title {
	font-family: 'GeForce', sans-serif;
	font-size: 1.5em;
	color: #76b900;
	font-weight: normal;
	text-transform: uppercase;
	max-width: 300px;
	margin: 25px auto;
}

h3.product_title {
	font-family: 'GeForce', sans-serif;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.25em;
	text-align: center;
	color: #76B900;
	margin: 15px auto 0 auto;
}

h4.item-title a {
	font-family: 'DINPro', sans-serif;
	font-size: 1.1em;
	line-height: 1.25em;
	font-weight: bold;
	margin-top: 20px;
	text-align: center; 
	color:#FFF !important
}


h4.item-title a:hover {

	color:#06F !important
}

p.content-detail {
	font-family: 'DINpro', sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	color: #FFF;
	line-height: 1.1em;
	max-width: 300px;
	margin: 0 auto 25px auto;
}

ul.items-grid {
	background-color: #000;
}

img {
	display: block;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: inherit!important;
}

hr.divider {
	margin: 50px 0;
}

.type {
	background-color: #EEE;
    padding: 10px 15px 4px 15px;
    box-sizing: border-box;
    text-align: center;
	font-family: 'DINPro','Open-Sans Condensed', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    margin: 5px 2px 0 0;
    border-bottom: 4px solid #EEE;
    width: 100%;
	display: block!important;
}

.type:hover {
	border-bottom: 4px solid #76b900;
}

.brand-logo {
	margin: 20px auto;
}

ul {
	text-align: center;
}

li.partner-logo {
	display: inline-block;
	margin: 20px;
}

.disclaimer {
	margin: 0!important;
	text-align: center;
}



.items-grid:after {
    background: none;
}


/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
	
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
	
	h1.hero {
		font-size: 2.75em;
		padding:  3% 0 0 4%;
	}
	
	h2.sub-hero {
		font-size: 1.25em;
		padding:  0 0 0 4%;
		margin-bottom: 15px;
	}
	
	p.hero-intro {
		font-size: 1.1em;
		line-height: 1.2em;
		padding:  0 0 0 4%;
		max-width: 70%;
	}
	.items-grid .item-title {
		height: 10em;
	}
	
	.disclaimer {
		padding: 50px 25px;
	}
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}
	h1.hero {
		font-size: 3em;
		padding:  3% 0 0 4%;
	}
	
	h2.sub-hero {
		font-size: 1.5em;
		padding:  0 0 0 4%;
		margin-bottom: 15px;
	}
	
	
	p.hero-intro {
		font-size: 1.1em;
		line-height: 1.25em;
		padding:  0 0 0 4%;
		max-width: 70%;
	}
	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	
	.items-grid .item-cell{ width:28%;}
	
	
	
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	.items-grid .item-cell.two {
		min-width: 33%;
	}
	
	.items-grid .item-cell.two img {
		min-width: 100%;
	}
	
	.items-grid .item-cell {
		min-width: 19%;
		border-bottom: none;
	}
	
	h1.hero {
		font-size: 3.75em;
		padding:  5% 0 0 8%;
	}
	
	h2.sub-hero {
		font-size: 1.75em;
		padding:  0 0 0 8%;
	}
	
	p.hero-intro {
		font-size: 1.35em;
		padding:  0 0 0 8%;
		max-width: 50%;
	}
	
	.disclaimer {
		padding: 50px 100px;
	}
	
}