/* === HERO BANNER CSS === */
.hero-banner-main-wrapper .hero-banner-sliding-item {  display: flex; align-items: flex-end; position:relative; color: var(--white-light); padding: 30px 0px 35px;height: 90vh;width:100%;min-height: 830px; } 
.hero-banner-main-wrapper .hero-banner-sliding-item .banner-image{background-position: center; background-size: cover; background-repeat: no-repeat;position: absolute;top: 0;left: 0;width:100%;height:100%;display: inline-block;}
.hero-banner-main-wrapper .hero-banner-sliding-item .banner-image::after { content:''; position: absolute;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1; background: linear-gradient(41.49deg, rgba(17, 49, 162, 0.27) 0.05%, rgba(17, 49, 162, 0) 61.34%); } 
.hero-banner-main-wrapper .hero-banner-sliding-item .content-wrapper { z-index: 2;position: relative;}

.hero-banner-slider-wrapper .slick-dots { position: absolute; top: 65px; left: 22px; bottom: 0px; margin: auto; display: flex; flex-flow: column; justify-content: center;transition: all 0.5s ease-in-out;} 
.hero-banner-slider-wrapper .slick-dots li { padding-left: 64px; position: relative; cursor: pointer; } 
.hero-banner-slider-wrapper .slick-dots li button { background-color: transparent; border: 0px; color: var(--oxide-prime); font-size: 1.4rem; line-height: 1.6rem; letter-spacing: 1px; padding-left: 12px; font-weight:700; transition: all 0.3s ease-in-out;}
.hero-banner-slider-wrapper .slick-dots li::before { content: ''; width: 64px; position: absolute; height: 2px; background: #F1F3F4; left: 0px; top: 11px; opacity: 0.3;background: linear-gradient(to right, var(--oxide-prime) 50%, #F1F3F4 50%);background-size: 200% 100%;background-position: bottom right;  } 
.hero-banner-slider-wrapper .slick-dots li:hover::before { opacity:1; } 
.hero-banner-slider-wrapper .slick-dots li button { opacity: 0; } 
.hero-banner-slider-wrapper .slick-dots li.active button {opacity: 1;}
.hero-banner-slider-wrapper .slick-dots li.active::before{  opacity: 1; background-size: 200% 100%; background-position: bottom left;transition: all 5s ease-out;}
.hero-banner-slider-wrapper .slick-dots li button:focus-visible{outline:none;}
.hero-banner-sliding-item > .white-border{position:relative;z-index: 1}
.hero-banner-sliding-item > .white-border::before{content: '';height: 76px;width: 1px;background-color: var(--white-light);position: absolute;bottom: -50px;left: 15px;}  

/*.animation-strip span { display: inline-block; transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); transform: translate(20%, 100%); position: relative; z-index: 1; letter-spacing: -0.03em; text-shadow: 3px 4px 0 rgba(0, 0, 0, .1); } 
.animation-strip span:before { content: ''; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%; transform: translateY(-40%); transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); } */
.animation-strip span.row { overflow: hidden; line-height: 0.9; display: block; transform: none; } 
.animation-strip span.row:before { display: none; }
.animation-strip .animate { transform: translate(0, 0); } 
.animation-strip .animate:before { transform: translateY(100%); } 
  


.hero-banner-main-wrapper .tablet-slider .slick-dots {display: flex; justify-content: center; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li { position: relative;cursor: pointer;width: 64px;margin: 0px 8px; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li button { background-color: transparent; border: 0px; color: var(--oxide-prime); font-size: 1.4rem; line-height: 1.6rem; letter-spacing: 1px;font-weight:700;width: 44px; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li::before {content: '';width: 44px;position: absolute;height: 2px;background: #F1F3F4;left: 0px;top: 25px;opacity: 0.3; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li:hover::before { opacity:1; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li button { opacity: 0; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li.slick-active button { opacity: 1; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li.slick-active::after { background-position: right bottom;opacity: 1; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li::after { transition: all .5s ease-out; content: ''; width: 22px; position: absolute; height: 2px; left: 0px; top:11px; background-position: left bottom; background: linear-gradient(to left, var(--oxide-prime) 50%, #F1F3F4 50%); background-size: 200% 100%; opacity: 0;} 
.hero-banner-main-wrapper .tablet-slider .slick-dots li button:focus-visible{outline:none;}

.hero-banner-main-wrapper .tablet-slider .slick-dots li { position: relative;cursor: pointer;width: 64px;margin: 0px 8px; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li button { background-color: transparent;border: 0px;color: var(--oxide-prime);font-size: 1.4rem;line-height: 1.6rem;letter-spacing: 1px;font-weight: 700;width: 44px;top: -16px;position: relative;opacity: 0;transition: all 0.3s ease-in-out}
.hero-banner-main-wrapper .tablet-slider .slick-dots li::before { content: ''; width: 44px; position: absolute; height: 2px; background: #F1F3F4; left: 0px; top: 11px; opacity: 0.3;background: linear-gradient(to right, var(--oxide-prime) 50%, #F1F3F4 50%);background-size: 200% 100%;background-position: bottom right;  } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li:hover::before { opacity:1; } 
.hero-banner-main-wrapper .tablet-slider .slick-dots li.active button {opacity: 1;}
.hero-banner-main-wrapper .tablet-slider .slick-dots li.active::before{  opacity: 1; background-size: 200% 100%; background-position: bottom left;transition: all 5s ease-out;}
.hero-banner-main-wrapper .tablet-slider .slick-dots li button:focus-visible{outline:none;}

.hero-banner-main-wrapper{position: relative;}
.hero-banner-main-wrapper .tablet-slider-nav{position: absolute;bottom: 44px;left: 0;right: 0;margin: auto;}
.hero-banner-main-wrapper .tablet-slider-nav{display:none;}
.hero-banner-main-wrapper .mobile-video-cta{display:none;}

.banner-video-wrapper{position: absolute;width: 100%;height: 100%;opacity: 0;transition: all 0.3s ease-in-out;}

header.mega-header.slide-up{transform: translateY(-150%);}
.hero-banner-slider-wrapper .slick-dots.slide-left{transform: translateX(-150%);}
.hero-banner-sliding-item.slick-active .white-border.slide-bottom{transform: translateY(150%)!important;}
.slick-active .banner-image.no-op{opacity:0}
.banner-video-wrapper.has-op{opacity: 1;z-index: 9999;}

.banner-video-wrapper .video-item,.banner-video-wrapper .video-item .inv_videoMainContainer, .banner-video-wrapper .video-item .inv_videoMainContainer_inner, .banner-video-wrapper .video-item .inv_videoDisplay {height: 100%;}
.banner-video-wrapper .video-close{position: absolute;top: 60px;right: 60px;z-index: 10;font-size: 33px;color: #fff;}

.mobi-video-cta-wrapper{position: absolute;width: 100%;bottom: 10px;z-index:10;}
.banner-wrapper .banner-video-wrapper .inv_playerContainer{border-radius: 0px;}
.banner-wrapper .banner-video-wrapper .inv_playerContainer .inv_videoMainContainer{overflow: hidden;}
.banner-wrapper .banner-video-wrapper .inv_videoReady .inv_videoArea{height: 100%;background-color: var(--graphite-dark);}
.hero-banner-main-wrapper .banner-bottom-gradient-image{height: 2000px;bottom: -2000px;}
.hero-banner-main-wrapper.banner-wrapper{padding-bottom:0px;}

/* === HERO BANNER CSS === */
@media all and (min-width: 991px){
.hero-banner-sliding-item .content-wrapper{opacity: 0;transition: all 1s ease-in-out}
.hero-banner-sliding-item.slick-active .content-wrapper{transform: translateY(100%);}
.hero-banner-sliding-item.slick-active .content-wrapper.active{opacity: 1;transform: translateY(0);}

.hero-banner-sliding-item .white-border{transition: all 0.5s ease-in-out;transform: translateY(100%);}
.hero-banner-sliding-item .white-border.active{transition: all 0.5s ease-in-out;transform: translateY(0);}
}
@media all and (max-width: 991.98px) {
.hero-banner-main-wrapper .hero-banner-sliding-item{flex-flow: column;height: auto;min-height: auto;padding:0px;}
.hero-banner-main-wrapper .hero-banner-sliding-item .banner-image{position: relative;height: 442px;}
.hero-banner-main-wrapper .d-xs-block.deviceTitle { display: block !important; margin-bottom: 10px; }
.banner-video-wrapper .video-item, .banner-video-wrapper .video-item .inv_videoMainContainer, .banner-video-wrapper .video-item .inv_videoMainContainer_inner, .banner-video-wrapper .video-item .inv_videoDisplay{height: 442px;min-height: 442px}

.inv_FullScreen_Other .banner-video-wrapper .video-item, .inv_FullScreen_Other .banner-video-wrapper .video-item .inv_videoMainContainer, .inv_FullScreen_Other .banner-video-wrapper .video-item .inv_videoMainContainer_inner, .inv_FullScreen_Other .banner-video-wrapper .video-item .inv_videoDisplay{height: 100%;min-height: 100%;}
.banner-video-wrapper .video-close{top: 32px;right: 40px}
.hero-banner-slider-wrapper .slick-dots{justify-content: unset;top: 197px;}
.hero-banner-sliding-item > .white-border::before{height: 273px;left: 32px;}
.hero-banner-sliding-item > .white-border{background: var(--cobalt-gradient);}
.hero-banner-sliding-item > .white-border > .content-wrapper{padding: 64px 0 133px;}
.hero-banner-slider-wrapper .slick-dots li{padding-left: 34px;}
.hero-banner-slider-wrapper .slick-dots li::before{width: 34px;}
.hero-banner-slider-wrapper .slick-dots li::after{width:17px;}
.hero-banner-main-wrapper .tablet-slider-nav{display:block;}
.hero-banner-main-wrapper .banner-bottom-gradient-image{display:none;}
.hero-banner-main-wrapper .tablet-slider .slick-dots {
	flex-wrap: wrap;
    margin-bottom: -20px;
}
}
@media all and (max-width: 767.98px) {
.hero-banner-main-wrapper .hero-banner-sliding-item .banner-image{height:211px;}
.banner-video-wrapper .video-item, .banner-video-wrapper .video-item .inv_videoMainContainer, .banner-video-wrapper .video-item .inv_videoMainContainer_inner, .banner-video-wrapper .video-item .inv_videoDisplay{height:211px;min-height:211px;}
.banner-video-wrapper .video-close{top: 15px;right: 20px;}
.hero-banner-sliding-item > .white-border > .content-wrapper{padding: 32px 0 115px;}
.hero-banner-sliding-item > .white-border::before{display:none}
.hero-banner-slider-wrapper .slick-dots{display:none;}
.hero-banner-main-wrapper .tablet-slider-nav{bottom: 32px;}
.hero-banner-main-wrapper .mobile-video-cta{display:block;position: absolute;top: 167px;z-index: 21;left: 16px;}
.hero-banner-main-wrapper .banner-bottom-gradient-image {height: 600px;bottom: -600px;}
.hero-banner-main-wrapper .tablet-slider .slick-dots li {
    margin: 5px 5px 0px 5px;
}
}