/* Hero Slider */
/* Loading Slider */
.HeroSliderLoadingContainer { position: absolute; top: 0px; left: 0px; }
.HeroSliderLoadingArea { opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; }
.HeroSliderLoadingImage { position: absolute; display: block; background: url(/assets/tools/hero_jssor/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%; }


/* Banner containers */
.HeroSliderContainer { position: relative; height: 600px; width: 100% !important; overflow: hidden; }
.HeroSliderMaxSize { cursor: move; position: absolute; top: 0; left: 0; height: 600px; width: 100%; overflow: hidden; }

/* Main background image */
.HeroSlide { position: absolute; left: -3000px; box-sizing: border-box; width: 100vw; }
	.HeroSlide > img { left: 0 !important; top: 0 !important; width: 100% !important; height: 600px !important; object-fit: cover !important; object-position: 50% 50% !important; }

/* Animating overlay image */
/*.HeroCaptionImage { position: absolute; top: 0 !important; left: calc((100vw / 2) + 200px); height: 100%; }
	.HeroCaptionImage > img { height: 250px; width: auto; position: relative; top: 40% !important; transform: translateY(-50%) !important; }*/

/* MAIN TITLE */
.HeroCaptionTitle { position: absolute; top: 50px; left: calc((100vw / 2) - 650px); max-width: 600px; }
	.HeroCaptionTitle > h2 { display: inline; color: #fff !important; font-weight: 800; line-height: 80px; font-size: 80px; }


/* LONG DESC */
.HeroCaptionDescLong { position: absolute; top: 250px; left: calc((100vw / 2) - 650px); max-width: 700px; }
	.HeroCaptionDescLong > p { display: inline; color: #fff; }

/* SHORT DESC */
.HeroCaptionDescShort { position: absolute; top: 400px; left: calc((100vw / 2) - 650px); height: 100px; max-width: 700px; }
	.HeroCaptionDescShort > p { display: inline; color: #fff; font-weight: 600; }

/* CTA BUTTON */
.HeroCaptionLink { position: absolute; bottom: 70px; left: calc((100vw / 2) - 625px); }
	.HeroCaptionLink > a { background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, .2); font-weight: 600; border: .0625rem solid #fff; border-radius: .25rem; padding: 10px 30px; font-size: 18px; line-height: normal; text-decoration: none !important; color: #11598a !important; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; user-select: none; }
		.HeroCaptionLink > a:hover { text-decoration: none !important; background-color: #6aa1d7; border: .0625rem solid #6aa1d7; }

/* ****   VARIOUS SUPPORTING COMMENTS / ELEMENTS NOT USED IN THIS RELEASE   ****/
/* custom - all dimensions proportional to their parent element dimensions in responsive mode - HeroSliderContainer */
/* do not use bottom:0px style it bugs caption animation, must have top/left */
/* Hide the main slider while loading */


/* Bullet Navigation */
.HeroSliderNav div, .HeroSliderNav div:hover, .HeroSliderNav .av { background: url(/assets/tools/hero_jssor/Template/SlidingElements/images/slider_bullets_horizontal.svg) no-repeat; overflow: hidden; cursor: pointer; }
.HeroSliderNav div { background-position: -5px -5px; }
	.HeroSliderNav div:hover, .HeroSliderNav .av:hover { background-position: -35px -5px; }
.HeroSliderNav .av { background-position: -65px -5px; }
.HeroSliderNav .dn, .HeroSliderNav .dn:hover { background-position: -95px -5px; }

/* Arrow Navigation */
/*
.HeroSliderArrowLeft, .HeroSliderArrowRight, .HeroSliderArrowLeftDown, .HeroSliderArrowRightDown
            										{position:absolute; cursor:pointer; display:block; background:url(/assets/tools/hero_jssor/Template/SlidingElements/images/slider_arrows_horizontal.png) center center no-repeat; overflow: hidden;}
.HeroSliderArrowLeft 					{background-position:-3px -33px;}
.HeroSliderArrowRight 				{background-position:-63px -33px;}
.HeroSliderArrowLeft:hover		{background-position:-123px -33px;}
.HeroSliderArrowRight:hover	{background-position:-183px -33px;}
.HeroSliderArrowLeftDown			{background-position:-243px -33px;}
.HeroSliderArrowRightDown			{background-position:-303px -33px;}
*/

.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn { position: absolute; cursor: pointer; display: block; background: url(/assets/tools/hero_jssor/Template/SlidingElements/images/slider_arrows_horizontal.svg) no-repeat; overflow: hidden; }
.jssora03l { background-position: -3px -33px; }
.jssora03r { background-position: -63px -33px; }
.jssora03l:hover { background-position: -123px -33px; }
.jssora03r:hover { background-position: -183px -33px; }
.jssora03ldn { background-position: -243px -33px; }
.jssora03rdn { background-position: -303px -33px; }



/* RESPONSIVE LAYUPS */

/* Desktop - Screen is less than 1400px wide */
@media only screen and (max-width:1400px) {
	.HeroSliderContainer { height: 500px; }
	.HeroSliderMaxSize { height: 500px; }
	.HeroSlide > img { height: 500px !important; }
	/*	.HeroCaptionImage > img { height: 240px; }*/
	.HeroCaptionTitle { left: calc((100vw / 2) - 550px); max-width: 700px; top: 30px; }
		.HeroCaptionTitle > h2 { font-size: 50px; line-height: 50px; }
	.HeroCaptionDescLong { left: calc((100vw / 2) - 550px); top: 120px; max-width: 600px; }
	.HeroCaptionDescShort { left: calc((100vw / 2) - 550px); top: 275px; max-width: 600px; }
	.HeroCaptionLink { left: calc((100vw / 2) - 500px); }
		.HeroCaptionLink > a { font-size: 22px; line-height: 26px; padding: 12px 35px; }
}

/* Laptop - Screen is less than 1200px wide */
@media only screen and (max-width:1200px) {
	.HeroSliderContainer { height: 400px; }
	.HeroSliderMaxSize { height: 400px; }
	.HeroSlide > img { height: 400px !important; }
	/*.HeroCaptionImage > img { height: 240px; }*/
	.HeroCaptionTitle { left: calc((100vw / 2) - 420px); max-width: 550px; top: 20px; }
		.HeroCaptionTitle > h2 { font-size: 40px; line-height: 40px; }
	.HeroCaptionDescLong { left: calc((100vw / 2) - 420px); top: 75px; font-size: 16px; max-width: 550px; line-height: initial; }
	.HeroCaptionDescShort { left: calc((100vw / 2) - 420px); top: 200px; max-width: 550px; }
	.HeroCaptionLink { left: calc((100vw / 2) - 400px); }
		.HeroCaptionLink > a { font-size: 18px; line-height: 20px; padding: 12px 35px; }
}

/* Tablet - Screen is less than 992px wide */
@media only screen and (max-width:992px) {
	.HeroSliderContainer { height: 350px; }
	.HeroSliderMaxSize { height: 350px; }
	.HeroSlide > img { height: 350px !important; }
	/*	.HeroCaptionImage { position: absolute; left: calc((100vw / 2) + 50px); height: 100%; }
		.HeroCaptionImage > img { height: 200px; }
*/
	.HeroCaptionTitle { left: calc((100vw / 2) - 350px); max-width: 500px; top: 20px; }
		.HeroCaptionTitle > h2 { font-size: 32px; line-height: 32px; }
	.HeroCaptionDescLong { left: calc((100vw / 2) - 350px); top: 75px; font-size: 16px; max-width: 450px; }
	.HeroCaptionDescShort { left: calc((100vw / 2) - 350px); top: 200px; max-width: 450px; line-height: initial; }
	.HeroCaptionLink { left: calc((100vw / 2) - 325px); bottom: 50px; }
		.HeroCaptionLink > a { font-size: 16px; line-height: 18px; padding: 8px 35px; }
	.HeroSliderNav { bottom: 10px !important; }
}

/* Tablet - Screen is less than 768px wide */
@media only screen and (max-width:768px) {
	.HeroSliderContainer { height: 250px; }
	.HeroSliderMaxSize { height: 250px; }
	.HeroSlide > img { height: 250px !important; }
	/*.HeroCaptionImage > img { height: 140px; }*/
	.HeroCaptionTitle { left: 15px; max-width: 400px; top: 20px; }
		.HeroCaptionTitle > h2 { font-size: 32px; line-height: 32px; }
	.HeroCaptionDescLong { height: 0; width: 0; overflow: hidden; }
	.HeroCaptionDescShort { left: 15px; top: 70px; font-size: 16px; max-width: 300px; }
	.HeroCaptionLink { left: 25px; bottom: 50px; }
		.HeroCaptionLink > a { font-size: 16px; line-height: 18px; padding: 8px 35px; }
}

/* Phone - Screen is less than 576px wide */
@media only screen and (max-width:575px) {
	.HeroSliderContainer { height: 200px; }
	.HeroSliderMaxSize { height: 200px; }
	.HeroSlide > img { height: 200px !important; }
	/*	.HeroCaptionImage { left: calc((100vw / 2) - 70px); }
		.HeroCaptionImage > img { position: relative; top: 20% !important; height: 100px; margin: 0 auto; }
*/
	.HeroCaptionTitle { left: 10px; max-width: 350px; top: 15px; }
		.HeroCaptionTitle > h2 { font-size: 22px; line-height: 26px; }
	.HeroCaptionDescShort { left: 10px; max-width: 300px; top: 60px; font-size: 16px; }
		.HeroCaptionDescShort > p { font-weight: 400; }
	.HeroCaptionLink { left: 20px; bottom: 30px; }
		.HeroCaptionLink > a { font-size: 14px; line-height: 18px; padding: 5px 25px; }
	.HeroSliderNav { bottom: 5px !important; }
}