#homepage-banners .rotating-banner-images .banner-text-1 { color: rgb(255, 255, 255); font-family: "Saira Extra Condensed"; font-size: 70px; font-weight: 500; letter-spacing: 12.6px; text-transform: uppercase; text-align: center; margin-bottom:25px; line-height:90%; }
#homepage-banners .rotating-banner-images .banner-text-2 p { color: rgb(255, 255, 255); font-size: 16px; font-weight: 300; display: inline-block; line-height: 188%; letter-spacing: 0.8px; margin-bottom:36px; }
#homepage-banners .rotating-banner-images .cycle-prev { position: absolute; top: 50%; left: 5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 21px; height: 35px; background-image: url(banner-arrow-left.png); background-repeat: no-repeat; z-index: 200; cursor: pointer; }
#homepage-banners .rotating-banner-images .cycle-next { position: absolute; top: 50%; right: 5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 21px; height: 35px; background-image: url(banner-arrow-right.png); background-repeat: no-repeat; z-index: 200; cursor: pointer; }

#homepage-banners .animated-banner-text { position: absolute; top: 52%; left: 50%; max-width: 960px; text-align: center; width: 100%; padding-left: 15px; padding-right: 15px; z-index: 1001; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
#homepage-banners .animated-banner-text a.btn { display: block; width:214px; margin:0 auto; }
#homepage-banners .animated-banner-text a:link { text-decoration: none; }
#homepage-banners .animated-banner-text a:hover { /*color: #FFF;*/ }
#homepage-banners .animated-banner-text a span { background-repeat: no-repeat; background-position: 100% 50%; }

#homepage-banners #banner-text-2 h2 { font-size: 70px; color: #FFF; line-height: 1; }
#homepage-banners #banner-text-2 h2 + br { display: none; }

#homepage-banners .homepage-banners-height-block-wrapper::before { content: ""; position: absolute; top: 0; right: 0; display: block; z-index: 400; background: url(banner-right-flair.png); width: 950px; height: 839px; pointer-events: none; background-repeat: no-repeat; }

.view-bloglandingpage .animated-banner-text { max-width:800px; }
#homepage .animated-banner-text a.btn { width:240px; }

#homepage-banners { position: relative; z-index: 1000; text-align: center; overflow: hidden; }
#homepage-banners:before { content:' '; display:block; position:absolute; left:0; top:0; right:0; height:400px; z-index:1001; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); pointer-events:none; }
#homepage-banners:after { content:' '; display:block; position:absolute; left:0; bottom:0; width:566px; height:877px; z-index:1002; background:url(../../images/banner-swirl.png) 50% 50% no-repeat; pointer-events:none; }
#homepage-banners img { width: 100%; visibility: hidden; }

#homepage-banners .rotating-banner-images .cycle-slide { height: 100%; width: 100%; }
#homepage-banners .rotating-banner-images .cycle-slide.cycle-sentinel {  }
#homepage-banners .animated-banner-imagearea { height: 100%; }
#homepage-banners .cycle-pager { position: absolute; width: 100%; bottom: 100px; text-align: center; z-index: 500; max-width: 1530px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-left: 15px; padding-right: 15px; }
#homepage-banners .cycle-pager span { font-size: 0; cursor: pointer; width: 10px; height: 10px; display: inline-block; border: 1px solid #FFF; border-radius: 50%; margin-right: 9px; }
#homepage-banners .cycle-pager .cycle-pager-active { background-color: #FFF; }

#homepage-banners .animated-banner-imagearea a { display: inline-block; }
#homepage-banners .homepage-banners-height-block-wrapper { position: relative; }
#homepage-banners .homepage-banners-height-block-wrapper:after { content: ""; display: block; position: absolute; width: 100%; top: 0; left: 0; height: 100%; background-color: #ccc; }
#homepage-banners .homepage-banners-height-block { width:100%; height:95vh; max-height:1080px; min-height:700px; }

#homepage-banners .video-slide { position: absolute; top: 0; width: 100%; height: 100%; }
#banner .animated-banner-text { display:none; }

@media (max-width: 1800px) {
	#homepage-banners:after { width: 29%; background-size: contain; background-position: 0 100%; }
	#homepage-banners .homepage-banners-height-block-wrapper::before { width: 42%; background-size: contain; }
}
@media (max-width: 1400px) {
	#homepage-banners .homepage-banners-height-block { height: auto; }
	#homepage-banners .rotating-banner-images .banner-text-1 { font-size: 50px; }
}
@media (max-width: 767px) {
	#homepage-banners .homepage-banners-height-block { height: 95vw; }
	#homepage-banners .homepage-banners-height-block-wrapper::before { width: 86%; height: 100%; }
	#homepage-banners:after { width: 49%; }
	#homepage-banners:before { height:300px; }
	#homepage-banners .rotating-banner-images .banner-text-1 { line-height:119%; letter-spacing:7px; /*text-shadow:0 0 25px rgb(0, 0, 0);*/ }
	#homepage-banners .rotating-banner-images .banner-text-2 p { font-size: 14px; margin-bottom: 20px; }
}
@media (max-width: 500px) {
	#homepage-banners:after { width: 72%; }
	#homepage-banners .homepage-banners-height-block { min-height: 0; height: calc(100vh - 80px); }
	#homepage-banners .homepage-banners-height-block-wrapper::before { width: 96%; }
}


/* Banner Height Fix */
#homepage-banners .home-banners { position: absolute !important; top: 0; width: 100%; height: 100%; }

/* Related to the breakpoint at mobile when the banner is always 500px high -- banner-mobile-background layout */
@media (max-width: 1199px) {
	#homepage-banners .homepage-banners-height-block { /*display: none;*/ }
	#homepage { overflow-x: hidden; }
	/* Fixes for having the banner height set at mobile resolutions */
	#homepage-banners .home-banners { /*position: relative !important; top: auto; width: auto; height: auto;*/ }
}

@media (max-width: 600px) {
	.animated-banner-imagearea { min-height: 200px; }
}