/* ## Banner Effects Slideshow ## */
/* 
powered by Cycle2 - http://jquery.malsup.com/cycle2/
some of these styles will be set by the plugin (by default) but setting them here
helps avoid flash-of-unstyled-content
*/

.reskin-banner{position: relative; }
.site-banner .banner-item{min-height: 575px;}
.site-banner.landing .banner-item{min-height:400px;}
.overlay-text{position: absolute; left: 0; top: 50px; max-width: 40em; padding: 20px;}
.overlay-text h2{font-size:1.5em; color: #134b7a; padding: 10px 0; border-bottom: 2px solid #0071bc; font-weight: 600; max-width: 13em; font-family: 'Montserrat', sans-serif;}
.overlay-text p{font-size: 1.15em; font-weight: 500; line-height: 1.5; max-width: 24em;}
.landing .overlay-text p{max-width: 36em; margin:25px 0;}
.overlay-text a{display:block;text-align: center; color: #ffffff!important; text-decoration: none; text-transform: uppercase;}
.overlay-text a:hover,
.overlay-text a:active,
.overlay-text a:focus{border-color: #134b7a; color: #134b7a!important;}


/* Slick Styling */
.slick-arrow{border:none; background: none; position: absolute; top: 48%;}
.slick-prev{left: 20px;}
.slick-next{right: 50px;}

.slick-arrow span{
    content: '';
    height: 35px;
    width: 35px;  
    border-right: 5px solid #999999;
    border-top: 5px solid #999999;
    transform: rotate(45deg);
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

.slick-arrow span.arrow-right{
   transform: rotate(45deg);
}
.slick-arrow span.arrow-left{
   transform: rotate(-135deg);
}

.slick-dots{list-style: none; display: flex; justify-content: center; }
.slick-dots li{margin: 0 10px;}
.slick-dots li button{border:none; background: transparent; text-indent: -999em; border: 2px solid #ccc; border-radius: 50%; height: 20px; width: 20px;}
.slick-dots li.slick-active button{background: #e31c3d;}

.site-banner.homep .reskin-banner .slick-arrow{z-index: 999; height: 50px; width: 50px;}
.site-banner.homep .reskin-banner .slick-prev{left: 50px;}
.site-banner.homep .reskin-banner .slick-next{right: 40px;}
.site-banner.homep .reskin-banner .slick-prev:before,
.site-banner.homep .reskin-banner .slick-next:before,
.site-banner.homep .reskin-banner .slick-prev:after,
.site-banner.homep .reskin-banner .slick-next:after{content: ''; height: 40px; width: 3px; background: #8e8080; position: absolute; padding: 2px;  transition: all ease .5s }


.site-banner.homep .reskin-banner .slick-prev:hover:before,
.site-banner.homep .reskin-banner .slick-next:hover:before,
.site-banner.homep .reskin-banner .slick-prev:hover:after,
.site-banner.homep .reskin-banner .slick-next:hover:after{ background: #000; transition: all ease .5s }



.site-banner.homep .reskin-banner .slick-next:after{transform: rotate(45deg); top: 15px;}
.site-banner.homep .reskin-banner .slick-next:before{ transform: rotate(-45deg);top: -10px}

.site-banner.homep .reskin-banner .slick-prev:after{transform: rotate(135deg); top: 15px;}
.site-banner.homep .reskin-banner .slick-prev:before{ transform: rotate(-135deg); top: -10px}
.site-banner.homep .reskin-banner #pausebtn{height: 50px; width: 50px; background: #134b7a; color: #fff; border: none; position: absolute; left: 0; right: 0; margin:0 auto; bottom: 10px; border-radius: 50%;}

.site-banner.homep .reskin-banner #pausebtn.banner-pause:after,
.site-banner.homep .reskin-banner #pausebtn.banner-play:after{content:"";  background-size: contain;height: 40px; width: 40px; padding:5px; position: absolute;top: 10px; left: 10px;}

.site-banner.homep .reskin-banner #pausebtn.banner-pause:after{background: url('/cms/images/layout/design/pause2.svg') no-repeat;}
.site-banner.homep .reskin-banner #pausebtn.banner-play:after{background: url('/cms/images/layout/design/play3.svg') no-repeat;}

@media(max-width: 36em){
    .site-banner.landing .banner-item{min-height: 500px; background-position: 75% 100%; background-size: 250%;}
}

@media (min-width: 48em) and (max-width:65em)
{
    .site-banner .banner-item {
        background-position: 140% 110%;
        background-size: 127%;
        background-repeat: no-repeat;
        background-color: #ecf6fa;
        min-height: 645px;
      }
		.overlay-text h2{max-width: 25em}
		.site-banner.landing .banner-item{min-height: 575px; background-position: 105% 100%; background-size: 150%;}
}

@media (min-width: 36.063em) (max-width: 47.963em){
	.site-banner.landing .banner-item{min-height: 550px; background-position: 105% 100%; background-size: 150%;}
}

@media(max-width: 48em){
 /* .site-banner.landing .banner-item{min-height: 550px; background-position: 105% 100%; background-size: 150%;} */
 .site-banner .banner-item{background-position: bottom right; background-size: 150%; background-repeat: no-repeat; background-color: #ecf6fa;}
} 

@media(max-width: 61em){
    .site-banner.homep .reskin-banner button{display: none!important;}
}


@media (min-width: 65.063em){
 .overlay-text h2{font-size:2.5em;}
 .slick-prev{left: -30px;}
 .slick-next{right: 5px;}
 .overlay-text a{display:inline-block;}

 .site-banner .banner-item{
 	background-size: 100%;
		background-repeat: no-repeat;
		background-color:#ecf6fa;
		background-position: 115% bottom;
	}
}



@media (min-width: 114em){
 .site-banner .banner-item{min-height: 550px; background-size: cover;}
 .site-banner.landing .banner-item{min-height: 360px; background-size: cover; background-position: bottom;}
}