/*========================
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:not(.new-layout) 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: 168px;
	height: 340px;
}

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

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

	#main-banner li{
		height: 300px;
	}
}
@media (min-width: 771px){
	#main-banner{
		margin-top: 178px;
	}
}

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

@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;
	}
}


/***
 * Styles for new layout
 */

:root {
    --document-width: 100vw;
}

#main-banner.new-layout {
    padding: 0;
    height: 430px;
    width: var(--document-width);
    margin-left: -15px;
    margin-right: -15px;
}
#main-banner.new-layout > .wrap {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
#main-banner.new-layout .wrap .main-banner li {
    display: flex;
    align-items: center;
    height: 430px;
    padding: 0;
    background: #000;
}
#main-banner.new-layout .wrap .main-banner li .wrap {
    width: 100%;
}
#main-banner.new-layout .wrap .main-banner li .banner-content {
    max-width: 550px;
}
#main-banner.new-layout .wrap .main-banner li .banner-content .banner-title {
    margin-top: 0;
    color: #fff;
}
#main-banner.new-layout .wrap .main-banner li .banner-content a {
    background: #fff;
    color: #287CB8;
    font-size: 16px;
}
#main-banner.new-layout .wrap .main-banner li .banner-content a img {
    margin-top: 0;
}
#main-banner.new-layout .wrap .main-banner li img.main-image {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    object-fit: cover;
    object-position: center;
	display: none;
}
#main-banner.new-layout .wrap .main-banner li img.main-image.main-image--mob {
	display: block;
}

@media (min-width: 1200px) {
    #main-banner.new-layout {
        width: var(--document-width);
        margin-left: calc(((var(--document-width) - 1200px) / 2) * -1);
        margin-right: calc(((var(--document-width) - 1200px) / 2) * -1);
    }
}

@media (min-width: 991px) {
	#main-banner.new-layout .wrap .main-banner li img.main-image {
		display: block;
	}
	#main-banner.new-layout .wrap .main-banner li img.main-image.main-image--mob {
		display: none;
	}
}