.carousel--{}

/* Basics */

.carousel-- .carousel-container{ position: relative }
.carousel-- .clip{ overflow: hidden }
.carousel-- .reel{ display: flex; position: relative; left: 0 }
.carousel-- .slide{ -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; text-align: left }

/* Arrows */
.carousel-- a.arrow{ position: absolute }
.carousel-- a.arrow{ top: 28%; margin-top: -25px }
@media ( min-width: 992px ){
 .carousel-- a.arrow{ top: 50% }
}

.carousel-- a.prev.arrow{ left: 20px }
.carousel-- a.next.arrow{ right: 20px }

/* Pagination */

.carousel-- .pagination{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center }
.carousel-- .pagination ul{ display: inline-block; font-size: 0px /* font-size: 0px removes inline-block margins */ }
.carousel-- .pagination li{ display: inline-block }      
.carousel-- .pagination a{ display: block; padding: 15px 0 0 15px } 
.carousel-- .pagination a:before{ display: block; content: ''; width: 20px; height:20px; background-color: transparent; border: solid #FFF 2px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: ease border-color 300ms, ease background-color 300ms; transition: ease border-color 300ms, ease background-color 300ms  }


/* height */
.carousel-- .image-caption{ height: 100% } /* To fill screen use: min-height: calc( 100vh - 71px ) - 71px begin the height of the header */
@media ( min-width: 992px ){ 
 .carousel-- .image-caption{ min-height: 400px; padding-left: 70px; padding-right: 70px }
}
@media ( min-width: 1199px ){
 .carousel-- .image-caption{ min-height: 500px }
}
@media ( min-width: 1800px ){ /* prevent arrow collision */
 .carousel-- .image-caption{ padding-left: 0; padding-right: 0 }   
}

/* Positioning */

@media ( min-width: 992px ){

 .carousel-- .image-caption{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1600px; margin-left: auto; margin-right: auto } /* align-items: center; */
 .carousel-- .slide.background .image-caption.caption-centre{ justify-content: center }
 .carousel-- .slide.background .image-caption.caption-right{ justify-content: right }
 
 
}

/* Image / Caption */

.carousel-- .slide .caption .box{ padding: 20px 20px 40px 20px }
.carousel-- .slide.background .holder .apply-image,
.carousel-- .slide.floating .image-box{ height: 300px }
.carousel-- .apply-image{ background-repeat: no-repeat; background-position: center; background-size: cover }

@media ( min-width: 992px ){

 .carousel-- .slide.background .holder{ position: relative; }     
 .carousel-- .slide.background .holder .apply-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100% }   
 .carousel-- .slide .caption .box{ max-width: 300px; padding: 100px 0 0 0; color: #FFF; font-size: 1.25rem; line-height: 1.4em }
 
 
 .carousel-- .reel .slide .caption .box{ opacity: 0; transition: linear opacity 300ms 200ms }
 .carousel-- .reel.stationary .slide.focus .caption .box{ opacity: 1; transition: linear opacity 300ms 0ms }
 
 
}

@media ( min-width: 1200px ){
 .carousel-- .slide .caption .box{ max-width: 500px; font-size: 1.5rem; line-height: 1.4em }
 .carousel-- .slide .caption .box p.title{ font-size: 1.875rem; font-weight: 700; margin-bottom: 10px; color: #025295 }
}

/* Colouring */

.carousel-- .slide{ color: #FFF; background-color: #44c8f5 }
.carousel-- .slide .caption .box a.btn{  background-color: #025295 }

/* Styling  -Pagination */

.carousel-- .pagination li+li{ margin-left: 2px }
.carousel-- .pagination a{ width: 50px; height: 50px }
.carousel-- .pagination li.active a:before{ border-color: #2699FB; background-color: #2699FB }
.carousel-- .pagination li.ready a:before{ border-color: #BCE0FD; background-color: transparent }
.carousel-- a.arrow:before{ border-color: #FFF }

@media ( min-width: 992px ){
 .carousel-- .shim{ position: absolute; top: 0; left: -145px; width: 55%; height: 100%; padding-right: 120px; z-index: 1; background-color: #44c8f5; -webkit-transform: skew( -30deg, 0deg ); transform: skew( -30deg, 0deg ) }
 .carousel-- .slide .caption{ z-index: 2 }       
}

@media ( min-width: 1200px ){
        

 .carousel-- .shim{ position: absolute; top: 0; left: -145px; width: 55%; height: 100%; padding-right: 120px; background-color: rgba( 68, 200, 245, .5 ); -webkit-transform: skew( -30deg, 0deg ); transform: skew( -30deg, 0deg ) }
 .carousel-- .shim:after{ content: ''; display: block; width: 100%; height: 100%; background-color: #44c8f5 }

 .carousel-- .pagination a{ width: 40px; padding-left: 1px }

}