/*========================
Main Banner
========================*/

#main-banner { padding-bottom:0; float:left; width: 100%; padding-top: 90px; }


#main-banner li { position: relative; }
#main-banner li .banner-background {}
#main-banner li .banner-content { padding: 17% 5% 0 5%; width: 100%; float:left; }
#main-banner li .banner-content .banner-title { font-size: 40px; line-height: 1em; }

#main-banner li .banner-content a { border-radius:8px; font-size: 18px; float: left; padding:10px 20px; background: #00a5ab; color: #FFF; margin-top: 15px;  }

#main-banner li .banner-content img { width: 9px; margin-right: 10px; }

#main-banner .owl-pagination, #main-banner .owl-controls { display: none !important; }
#main-banner li .banner-content .banner-title {   font-family: din_next; color: #00a5ab;}

/* =======================================
 @ 500
======================================= */
@media only screen and (min-width: 500px) {


#main-banner li .banner-content { padding: 26% 5% 0 5%; }


}





/* =======================================
 @ 771
======================================= */
@media only screen and (min-width: 771px) {

#main-banner li .banner-content {width: 53%; padding: 17% 5% 14.5% 5%;}
#main-banner li .banner-background { position: absolute; top: 120px; z-index: -1; }


}





/* =======================================
 @ 1000
======================================= */
@media only screen and (min-width: 1000px) {

#main-banner li .banner-content {width: 49%; padding: 17% 5% 8.5% 5%;}
#main-banner li .banner-content .banner-title { font-size: 52px; }
#main-banner li .banner-background { top:80px; }



}



/* =======================================
 @ 1200
======================================= */
@media only screen and (min-width: 1200px) {

#main-banner li .banner-content {width: 49%; padding-left:0; padding-bottom:10.5%;}
#main-banner li .banner-content .banner-title { font-size: 52px; }



}


/* =======================================
 @ 1300
======================================= */
@media only screen and (min-width: 1300px) {

#main-banner li .banner-content { padding-bottom:168px;}




}





/* =======================================
 @ 1400
======================================= */
@media only screen and (min-width: 1400px) {

#main-banner li .banner-content { padding-bottom:145px;}
#main-banner li .banner-background { top:0px; }


}



/* =======================================
 @ 1550
======================================= */
@media only screen and (min-width: 1550px) {


#main-banner li .banner-background { top:0px; right: 0; width: 88%; }


}



/* =======================================
 @ 2000
======================================= */
@media only screen and (min-width: 2000px) {

#main-banner li .banner-content { padding-bottom: 18%; }
#main-banner li .banner-background img { max-width: 1590px; float:right;}


}




/*JH -- Resizing banner*/
@media (min-width: 600px){
	#main-banner{
		padding-top: 40px;
	}
}

@media (min-width: 1080px){
	#main-banner{
		padding-top: 0;
	}
}


/*JH -- New style for banner text*/
#main-banner{
	position: relative;
}

#main-banner li .wrap{
	max-width: 100%;
}

#main-banner li .banner-content{
	padding-left: 3%;
	padding-right: 0;
	padding-top: 40%;
	padding-bottom: 0;
}

@media (min-width: 430px){
	#main-banner li .banner-content{
		padding-top: 32%;
	}
}
@media (min-width: 500px){
	#main-banner li .banner-content{
		padding-top: 23%;
	}
}
@media (min-width: 800px){
	#main-banner li .banner-content{
		padding-top: 18%;
		padding-bottom: 40px;
	}
	#main-banner li .banner-content .banner-title{
		font-size: 48px;
	}
	#main-banner li .banner-content a{
		font-size: 24px;
	}
	#main-banner li .banner-content img{
		margin-top: 5px;
	}
}
@media (min-width: 1100px){
	#main-banner li .banner-content .banner-title{
		font-size: 58px;
	}
}
@media (min-width: 1500px){
	#main-banner li .banner-content{
		padding-top: 11%;
	}
	#main-banner li .banner-content .banner-title{
		font-size: 68px;
	}
}

/*JH -- Styles for redesigned banner*/
#main-banner{
	margin-top: 140px;
	height: 340px;
}

#main-banner li{
	height: 250px;
}

@media (min-width: 600px){
	#main-banner{
		margin-top: 160px;
	}

	#main-banner li{
		height: 300px;
	}
}

@media (min-width: 1080px){
	#main-banner{
		height: 300px;
	}
}



#main-banner .wrap .main-banner li{
	position: relative;
	overflow: hidden;
}


#main-banner li .banner-content{
	width: 100%;
	padding: 0 0 0 15px !important;
	position: relative;
	z-index: 10;
}

@media (min-width: 768px){
	#main-banner li .banner-content{
		width: 50%;
	}
}

@media (min-width: 1024px){
	#main-banner li .banner-content{
		width: 50%;
	}
}

@media (min-width: 1200px){
	#main-banner li .banner-content{
		width: 65%;
	}
}



#main-banner .wrap .main-banner li .banner-content .banner-title{
	font-size: 26px;
	font-weight: 500;
}

@media (min-width: 768px){
	#main-banner .wrap .main-banner li .banner-content .banner-title{
		font-size: 32px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

@media (min-width: 1024px){
	#main-banner .wrap .main-banner li .banner-content .banner-title{
		font-size: 42px;
	}
}

@media (min-width: 1200px){
	#main-banner .wrap .main-banner li .banner-content .banner-title{
		font-size: 48px;
		margin-top: 70px;
		margin-bottom: 20px;
	}
}




#main-banner .wrap .main-banner li img.cutout{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 800px;
	height: 100%;
	z-index: 9;
}

@media (min-width: 768px){
	#main-banner .wrap .main-banner li img.cutout{
		width: 1000px;
		height: 98%;
	}
}

@media (min-width: 800px){
	#main-banner .wrap .main-banner li img.cutout{
		width: 1200px;
		height: 100%;
	}
}


#main-banner .wrap .main-banner li img.main-image{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 150%;
	/*height: 240px;*/
	z-index: 8;
	opacity: .4;
}

@media (min-width: 690px){
	#main-banner .wrap .main-banner li img.main-image{
		width: 100%;
		opacity: 1;
	}
}

@media (min-width: 768px){
	#main-banner .wrap .main-banner li img.main-image{
		width: 540px;
		opacity: 1;
	}
}

@media (min-width: 800px){
	#main-banner .wrap .main-banner li img.main-image{
		width: 640px;
	}
}