/* 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
================================*/

#mainCntr{width:100%;height:auto;clear:both;overflow:hidden;margin-top:2%;}
#mainCntr .LightSide{display:block;width:50%;height:auto;float:left;margin:0 auto;padding:0;}
#mainCntr .DarkSide{display:block;width:50%;height:auto;float:right;margin:0 auto;padding:0;}

#mainCntr .LightSide .main-item .item-info h4.item-title {max-height:6em;}
#mainCntr .DarkSide .main-item .item-info h4.item-title {max-height:6em;}

#mainCntr .LightSide h2.boxTitle{display:block;width:40%;margin:0 auto 50px auto;padding:7px;border:thin solid #000;text-align:center;text-transform:uppercase;}
#mainCntr .DarkSide h2.boxTitle{display:block;width:40%;margin:0 auto 50px auto;padding:7px;background-color:#000;color:#FFF;text-align:center;text-transform:uppercase;}

#mainCntr .items-grid .item-cell{width:60%;}



/* 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 */
}
@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%;
	}	
#mainCntr .items-grid .item-cell{width:30%;}


	.main-item .item-img,
	.two-items .item-img {
		display: inline-block;
		width: 50%;
		vertical-align: middle;
	}
	.main-item .item-info,
	.two-items .item-info {
		display: inline-block;
		margin-left: 5%;
		width: 40%;
		vertical-align: middle;
	}
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
}