@charset "UTF-8";

/*
 Basics 
 */

.testimonials-group .testimonials-header .testimonials-introduction{
 margin-top: 14px		
}
.testimonials-group .testimonials-header+.testimonials--{
 margin-top: 40px
}

.testimonials--{
 position: relative;
 padding-bottom: 60px;
 text-align: center
}
.testimonials-- .testimonials-wrapper{
 position: relative;
 padding: 0 30px
}
.testimonials-- .clip{
 overflow: hidden
}

.testimonials-- .reel{
 display: flex; 
 position: relative;
 align-content: stretch;
 left: 0
}


/*
 Slides per viewport
 */

.testimonials-- .testimonial.slide{
 position: relative;
 flex: 0 0 100%;
 max-width: 100%
}

@media ( min-width: 992px ){
	
 .testimonials--.columns-2 .testimonial.slide{
  flex: 0 0 100%;
  max-width: 100%
 }  
 .testimonials--.columns-3  .testimonial.slide{
  flex: 0 0 50%; 
  max-width: 50%
 }
 
}

@media ( min-width: 1200px ){

 .testimonials--.columns-2 .testimonial.slide{
  flex: 0 0 50%; 
  max-width: 50%
 }  
 .testimonials--.columns-3 .testimonial.slide{
  flex: 0 0 33.3333%; 
  max-width: 33.3333% 
 }     

}




.testimonials-- .slide span, .testimonials-- .slide a{
 display: block
}
.testimonials-- .slide .content-wrapper{
 padding: 0 20px	
}

.testimonials-- .content-wrapper .line{
 width: 100px;
 height: 1px;
 margin: 20px auto;
 background-color: #000
}

.bgcolour-dark .testimonials-- .content-wrapper .line{
 background-color: #fff
}

/*
 Arrows 
 */

.testimonials-- a.arrow{
 position: absolute;
 top: 50%;
 margin-top: -25px
}
.testimonials-- a.prev.arrow{ left: 0 }
.testimonials-- a.next.arrow{ right: 0 }

/*
 !important, shrink the max with of the container to prevent text push
 */

@media ( max-width: 1199px ){
	
 .testimonials-- .testimonials-wrapper.container{
  max-width: 931px
 }

}

@media ( max-width: 991px ){
	
 .testimonials-- .testimonials-wrapper.container{
  max-width: 727px;
  max-width: calc( 100vw - 60px )
 }

}


@media ( max-width: 767px ){
	
 .testimonials-- .testimonials-wrapper.container{
  max-width: 535px;
  max-width: calc( 100vw - 60px );
 }

}

@media ( max-width: 575px ){
	
 .testimonials-- .testimonials-wrapper.container{
  max-width: 100%;
  max-width: 100vw;
 }

}


/*
 Balance image
 */
 
.testimonials-- .testimonial.slide .content-wrapper>.image{
 position: relative;
 width: 200px;
 height: 160px;
 margin-left: auto;
 margin-right: auto;
}
.testimonials-- .testimonial.slide .content-wrapper>.image picture{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0
}

/*
 Pagination 
 */

.testimonials-- .pagination{
 position: absolute;
 bottom: 0; 
 left: 0; 
 width: 100%; 
 text-align: center;
 z-index: 20
}
.testimonials-- .pagination ul{
 display: inline-block; 
 font-size: 0px /* font-size: 0px removes inline-block margins */ 
}
.testimonials-- .pagination li{
 display: inline-block
}
.testimonials-- .pagination li+li{  
 margin-left: 15px
}
.testimonials-- .pagination a{
 display: block;
 padding: 10px 0
}
.testimonials-- .pagination a:before{
 display: block; 
 content: ''; 
 width: 30px; 
 height: 5px;
 background-color: transparent; 
 border: solid transparent 1px;
 transition: ease border-color 300ms, ease background-color 300ms
}

/*
 Basic theme styles 
 */
 
.testimonials-group .testimonials-title{
 font-size: 1.625rem;
 font-weight: 500;
 text-align: center
}


/*
 Mods
 *
 Testimonials
 */
 
 
.testimonials-group .testimonials-title{
 font-size: 2.125rem;
 font-weight: 700;
 line-height: 1.3em;
 color: #171D6E
}
.testimonials-- .clip{
 position: relative
}
.testimonials-- .slide .content-wrapper{
 max-width: 780px;
 margin-left: auto;
 margin-right: auto
}
.testimonials-- .slide .line{
 background-color: transparent	
}

@media ( max-width: 575px ){

 .testimonials-- .testimonials-wrapper,
 .testimonials-- .slide .content-wrapper{
  padding: 0
 }	
 .testimonials-- a.arrow{
  display: none 
 }
 
}

@media ( min-width: 576px ){
 
 .testimonials-- .testimonials-wrapper{
  padding: 0 70px
 }
 .testimonials-- .clip:before,
 .testimonials-- .clip:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 100%;
  background: transparent;
  z-index: 1
 }
 .testimonials--.running .clip:before{
  left: 0;
  background: linear-gradient( 90deg, rgba( 255, 255, 255, 1 ) 0%, rgba( 255, 255, 255, 0) 100% )
 }
 .testimonials--.running .clip:after{
  right: 0;
  background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% )
 }
 .testimonials-- a.arrow{
  margin-top: -60px
 }

}

@media ( min-width: 992px ){
	
 .testimonials--.running .clip:before,
 .testimonials--.running .clip:after{
  width: 60px
 }	
 
}