@charset "UTF-8";

/*
 Basics 
 */
 
.carousel--{
 position: relative;
 text-align: left
}

.carousel-- .carousel-wrapper{
 position: relative
}
.carousel-- .clip{
 overflow: hidden;
}
.carousel-- .reel{
 display: flex; 
 position: relative;
 align-content: stretch;
 left: 0
}

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

.carousel-- .slide .holder .caption.empty{
 display: none	
}
.carousel-- .slide .holder .caption{
 text-align: left
}

@media ( max-width: 991px ){

 .carousel-- .slide .holder, 
 .carousel-- .slide .holder .image-caption{
  height: 100%
 }
 .carousel-- .slide .holder .image-caption{
  display: flex;
  flex-direction: column
 }
 .carousel-- .slide .holder .image-caption .caption{
  flex: 1 1 auto
 }
 
}

@media ( min-width: 992px ){
	
 .carousel-- .slide .holder .image-caption{
  display: flex
 }
 .carousel-- .slide .holder .caption{
  position: relative
 }
 .carousel-- .slide .holder .caption.align-center{
  text-align: center
 }
 .carousel-- .slide .holder .caption.align-right{
  text-align: right
 }
 .carousel-- .slide .holder .caption.align-justify{
  text-align: justify
 }
 
 .carousel-- .slide .holder .image-caption.image-cover,
 .carousel-- .slide .holder .image-caption.image-float .caption,
 .carousel-- .slide .holder .image-caption.image-float .image{
  justify-content: center; 
  align-items: center
 }
 .carousel-- .slide .holder .image-caption.image-cover.caption-left,
 .carousel-- .slide .holder .image-caption.image-float.caption-left .caption,
 .carousel-- .slide .holder .image-caption.image-float.image-left .image{
  justify-content: flex-start;
 }
 .carousel-- .slide .holder .image-caption.image-cover.caption-right,
 .carousel-- .slide .holder .image-caption.image-float.caption-right .caption,
 .carousel-- .slide .holder .image-caption.image-float.image-right .image{
  justify-content: flex-end;
 }
 .carousel-- .slide .holder .image-caption.image-cover.caption-top,
 .carousel-- .slide .holder .image-caption.image-float.caption-top .caption,
 .carousel-- .slide .holder .image-caption.image-float.image-top .image{
  align-items: flex-start;
 }
 .carousel-- .slide .holder .image-caption.image-cover.caption-bottom,
 .carousel-- .slide .holder .image-caption.image-float.caption-bottom .caption,
 .carousel-- .slide .holder .image-caption.image-float.image-bottom .image{
  align-items: flex-end;
 }
 
 .carousel-- .slide .holder .image-caption.image-float .caption,
 .carousel-- .slide .holder .image-caption.image-float .image{
  display: flex; 
  min-width: 50%;
  text-align: center
 }
 .carousel-- .slide .holder .image-caption.image-float.image-float-right .caption{
  order: 1
 }
 .carousel-- .slide .holder .image-caption.image-float.image-float-right .image{
  order: 2
 }
 .carousel-- .slide .holder .image-caption.image-float.caption-left .caption{
  text-align: left
 }
 .carousel-- .slide .holder .image-caption.image-float.caption-right .caption{
  text-align: right
 }

}

/*
 Height and padding
 */
 
@media ( max-width: 991px ){
	
 .carousel-- .slide .holder .image-caption .apply-image{
  padding-bottom: 62%	 
 }
 
}
 
@media ( min-width: 992px ){
	
 .carousel-- .image-caption{
  min-height: 500px; 
 }
 .carousel-- .image-caption.image-cover{
  padding: 20px 80px
 }
 .carousel-- .image-caption{
   min-height: 400px;
 }

 .carousel-- .image-caption.image-float .caption{
  padding: 20px 80px
 }
 .carousel-- .image-caption.image-float.image-float-left.caption-left .caption{
  padding-left: 40px
 }
 .carousel-- .image-caption.image-float.image-float-right.caption-right .caption{
  padding-right: 40px
 }

}


/*
 Apply background image
 */
 
.carousel-- .slide .holder .apply-image{
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover
}

@media ( max-width: 991px ){
	
 .carousel-- .slide .holder .image-caption .apply-image{
  width: 100%;
 }
 
}

@media ( min-width: 992px ){

 .carousel-- .slide .holder .image-caption.image-cover .apply-image{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100% 
 }
 .carousel-- .slide .holder .image-caption.image-float .image{
  padding: 0 20px
 }
 .carousel-- .slide .holder .image-caption.image-float.image-float-left.image-left .image{
  padding-left: 80px
 }
 .carousel-- .slide .holder .image-caption.image-float.image-float-right.image-right .image{
  padding-right: 80px
 }
 .carousel-- .slide .holder .image-caption.image-float .image .image-box{
  width: 60%;
  padding-bottom: 30%
 } 
 .carousel-- .image-caption.image-float.image-fillv.image-fillh .image{
  padding: 0
 }
 .carousel-- .image-caption.image-float.image-fillv.image-fillh .image .image-box{
  width: 100%;
  height: 100%;
  padding: 0
 }
	
}
 
/*
 Caption
 */
 
@media ( max-width: 991px ){

 .carousel-- .slide .holder .caption{
  width: 100%;
  padding: 20px 20px 50px 20px
 }
 
}

@media ( min-width: 992px ){

 .carousel-- .slide .holder .caption.bgcolour-applied{
  padding: 17px 30px	
 }

}

/*
 Group caption
 */

.carousel-- .group-caption .wrapper{
 padding: 20px 20px 50px 20px;	
}
.carousel-- .group-caption{
 text-align: left
}

@media ( min-width: 992px ){
	
 .carousel-- .group-caption{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 40px 80px;
  pointer-events: none
 }

 .carousel-- .group-caption.align-center{
  text-align: center
 }
 .carousel-- .group-caption.align-right{
  text-align: right
 }
 .carousel-- .group-caption.align-justify{
  text-align: justify
 }
 
 .carousel-- .group-caption{
  justify-content: center; 
  align-items: center
 }
 
 .carousel-- .group-caption.caption-left{
  justify-content: flex-start;
 }
 .carousel-- .group-caption.caption-right{
  justify-content: flex-end;
 }
 .carousel-- .group-caption.caption-top{
  align-items: flex-start;
 }
 .carousel-- .group-caption.caption-bottom{
  align-items: flex-end;
 }
 .carousel-- .group-caption .wrapper{
  max-width: 600px;
  padding: 20px;
  pointer-events: auto;				
 }

}



/*
 Arrows 
 */

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

@media ( max-width: 991px ){
	
 .carousel--.carousel-advanced a.arrow{ top: 40% }
 
}

/*
 Pagination 
 */

.carousel-- .pagination{
 position: absolute;
 bottom: 0; 
 left: 0; 
 width: 100%; 
 text-align: center;
 z-index: 20
}
.carousel-- .pagination ul{
 display: inline-block; 
 font-size: 0px /* font-size: 0px removes inline-block margins */ 
}
.carousel-- .pagination li{
 display: inline-block
}
.carousel-- .pagination li+li{  
 margin-left: 15px
}
.carousel-- .pagination a{
 display: block;
 padding: 10px 0
}
.carousel-- .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 shape/size styles
 */
 
@media ( min-width: 992px ){

 .carousel-- .slide .holder .image-caption .caption{
  max-width: 600px;
 }
 
}

/*
 !important, stabilize the mobile width to prevent text push
 */

@media ( max-width: 767px ){
	
 .carousel--{
  max-width: 100vw;
 }

}

/*
 Modifications...
 */