/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow {/* width: 100% !important;*/ min-width: 200px;margin: 0; padding: 0; position: relative;top:0px;
/*    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat; max-width: 1900px; */
    background:transparent;
  width:100%; max-width:1280px; 
  
  margin:0px auto 0px auto; padding-bottom:120px;
 }



/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
  /*  position: absolute; bottom: 0; left: 200px; 
    width: 35% !important; height:auto; max-width:500px;
    padding: 0; display: block;*/
}



.slide-element {
position:relative; width:100%; /*height:200vw;   */overflow:hidden;
}


.slideimage {
width:100%; position:relative;  
border-bottom:4px solid #00396E;
}


.imagecontainer {
width:100%; position:relative;  padding-bottom:54.794520%;  
background-repeat: no-repeat; 
background-position:center center;
background-size:cover;  }


.slidetext {position:relative;  }
.slidetext div.textcontainer {position:relative;  background:#fff;
 padding:20px 0px 110% 0px;
}


.slidetext div.headingcontainer {position:absolute; text-align:center; padding: 0px 30px 0px 30px;width:100%;}
 

.slidetext h5 {margin-bottom:0px; }  

.slidetext .slidelink  {position:absolute;bottom:20px;left:0px;width:100%; text-align:center; }

.slidetext h4, .slidetext h5  {font-size:16px; }   

.slidetext div h3 {margin-top:30px; font-size:24px;line-height:34px}



.testimonials .slideimage {
width:100%; position:relative;  
border-bottom:none;padding:0px 0px 40px 0px;
}

.testimonials .imagecontainer {
width:100%; position:relative;     width:290px;  height:240px;margin:0px auto 0px auto;padding-bottom:0;
background-repeat: no-repeat; 
background-position:center top;
background-size:65% auto;  }

.caption {position:absolute;bottom:0px;width:100%; text-align:center; background:#00C7FF;border-bottom:4px solid #00396E;padding:10px 20px 10px 20px;}
.caption span {color:#fff; display:block; }

 

.testimonials .slidetext {
 padding:0px 20px 0px 20px;
}

.testimonials .slidetext p {font-weight:600; color:#00C7FF; font-size:20px; line-height:28px;}




/* pager */
.cycle-pager { 
 width: 100%; z-index: 10; display:block; 
 
 position: absolute; 
 
 bottom: 40px; left:0px;overflow: hidden; height:16px;
 background:transparent ; padding:0px 20px 0px 20px; text-align:center;
 
}




.cycle-single  .cycle-pager span { display:none;}

.cycle-pager span { display:  inline-block; cursor: pointer;  margin-bottom:0px;  background:transparent;    width:32px;height:16px;text-indent:-9999px;
background-repeat:no-repeat;
background-size:16px 16px; 
background-position:left top ;
background-image:url('../images/icons/slide-bullet-outline.svg');
}

.cycle-pager span:hover {  background-image:url('../images/icons/slide-bullet-full.svg'); }

.cycle-pager span.cycle-pager-active { background-image:url('../images/icons/slide-bullet-full.svg'); }

 
 
    
.cycle-pager > * { cursor: pointer;}



/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 11;
    background: black; color: white; padding: 15px; opacity: .5;
}



.disabled { opacity: .5; filter:alpha(opacity=50); }

 /* display paused text on top of paused slideshow */
.cycle-paused:after {display:none;
    content: ''; color: white; background: transparent; padding: 10px;
    z-index: 10; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}
 
 
 .cycle-prev, .cycle-next  {display:none;}
 
 
@media all and (min-width: 480px){	 
  .slidetext div.textcontainer {position:relative;  background:#fff;
 padding:20px 0px 60% 0px;
}
}
 
 
 


@media all and (min-width: 768px){	
	
.cycle-slideshow { 
 
width:100%; 
max-width:1440px; padding:0px 0px 150px 0px;max-width:1440px; padding:0px 80px 160px 80px; width:100%; 
 }

.testimonials .cycle-slideshow { padding:0px 80px 80px 80px;  padding:0px 80px 40px 80px; }

.cycle-pager { bottom: 0px;}

.slide-element {
background:transparent; /*padding-bottom:37.773585%; */ max-width:1280px;  padding:0px 80px 0px 80px;
}

.slideimage {
width:68.867924%; position:relative;float:right;   
border-left:4px solid #00396E;
border-bottom:none;
}

.slidetext {position:relative;float:left;   background:transparent; 
 width:31.132075%; }

.slidetext div.textcontainer {position:relative;  background:#fff;
  padding:0px 0px 121.212121% 0px;}
 
.slidetext div.headingcontainer {position:absolute; text-align:center; padding: 20px 30px 0px 30px}
.slidetext div h3 {margin-top:30px;}
.slidetext h5 {margin-bottom:0px; }  
.slidetext .slidelink  {position:absolute;bottom:20px;width:100%; text-align:center; }

.slidetext h4, .slidetext h5  {font-size:13px; }  
.slidetext div h3 {margin-top:18px; font-size:18px;line-height:24px}


 

.testimonials .slideimage {
width:100%; position:relative;  
border-bottom:none;
padding:0px 0px 40px 0px;padding:0px 0px  0px 0px;
border-left:none;
border-bottom:none;
}

.testimonials .slidetext {
width:100%;}

.cycle-prev { 
/*background-color:transparent; bottom:50%;
left:-60px;  
height:40px; width:40px; */
display:block;position:absolute; left:0px;   bottom:0px;
cursor:pointer;
z-index:101;
background-repeat:no-repeat;
background-size:40px 40px; 
background-position:left top 0px ;
background-image:url('../images/icons/slider-back.png');

background-color: #F5F5F5; 

height:100%;
/*height: calc(100% - 40px);*/
width:80px;
 background-position:right 40px top 50%; margin-top:-60px; 
}
 
 
.cycle-next { 
/*background-color:transparent; bottom:50%;
right:-60px; right:0px; 
height:40px; width:40px;  */
display:block;position:absolute; right:0px;   bottom:0px;
cursor:pointer;
z-index:101;
background-repeat:no-repeat;
background-size:40px 40px; 
background-position:left top 0px ;
background-image:url('../images/icons/slider-forward.png');background-color: #F5F5F5;

height:100%;
/*height: calc(100% - 40px);*/
width:80px; background-position:left 40px top 50%; margin-top:-60px;  }
 
 
/*
.cycle-prev:hover   , .cycle-next:hover {opacity:0.7}*/
 
.testimonials .cycle-next  {background-position:left 40px top 30%; }
 .testimonials .cycle-prev {background-position:left 0px top 30%; }

}


 
@media all and (min-width: 1024px){	
  
.slidetext h4, .slidetext h5  {font-size:16px; }   

.slidetext div h3 {margin-top:30px; font-size:24px;line-height:34px}

}
 
   
 

@media all and (min-width:1280px){	 


.testimonials .imagecontainer {width:100%;padding-bottom:80%; height:auto; }
.testimonials .slideimage {
width:27.358491%; position:relative;float:left;   
border-left:none;
border-bottom:none;
}

.caption {position:absolute;bottom:0px;width:100%; text-align:center; background:#00C7FF;border-bottom:4px solid #00396E;padding:10px 10px 10px 10px;}
.caption span {color:#fff; display:block; }

.testimonials .slidetext {position:relative;float:left;   background:transparent;  padding:0px 120px 0px 40px;
 width:72.641509%; }


}



@media all and (min-width:1440px){	 	
.cycle-slideshow { padding:0px 80px 100px 80px;}
}