/* natUIve – Slider – CSS-only */

@import 'natuive-setup';

.slider {

	overflow: visible;
	overflow-y: hidden;
	white-space: nowrap; /* keep inline-block elements together */
	word-wrap: normal; /* IE8 fix */
	position: relative;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none; /* No scrollbars on IE10+ */
	left: 0;

/*
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: .4s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-duration: .4s;
*/

/*
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
*/

// 	transition: none;

	display: flex;
	// will-change: transform; // Breaks WebKit full screen video
    min-height: 4em; // Make controls visible on very short slides

}

.slider > * {

	width: 100%;
	display: inline-block;
	white-space: normal;
	vertical-align: top;
	overflow: hidden;
// 	padding: 0 1px;
/*
	font-size: $font-size;
	line-height: $line-height;
	min-height: $line-height;
*/
	margin: 0;

	flex: 1 0 auto;

}

.slider.vertical > * {
	
	display: block;

}

.slider.vertical > img {

	max-width: none;
	width: auto;
	max-height: 100%;

}

@supports (--a: 1) { // New browsers only

	.slider > *:after, .slider > *:before { /* Slide background with full slider height */
		
		content: '<';
		display: block;
		position: absolute;
		top: 50%;
		bottom: 0;
		width: 100%;
		background: transparent;
		z-index: -1;
		opacity: .5;
	
	}
	
	.slider > *:after {
		
		content: '>';
		text-align: end;
		
	}
	
	
	.slider-wrap .slider > *:after, .slider-wrap .slider > *:before, .slider > *:first-child:before, .slider > *:last-child:after, .slider-wrap .slider > * > div.bg {
	
		display: none;	
	
	}

}

.slider > div:before { // Specify full-height per-slide background here
	
	background: transparent;
	
}

.row .slider {
	
	padding: 0;
/*
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
*/

}

.slider > * > img {

	max-height: 100%;
    vertical-align: middle;
	margin: 0 auto;
	display: block;

}

.slider.center > * {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	
}

.slider.auto-height > *:not(.active) {
	
	height: 0;

}

.slider-wrap .slider.align-middle > *, .slider.align-middle > * {
	
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.slider.align-middle > * > * {
	
	text-align: center;

}

/*
.overlay .slider-wrap.vertical.tabs > .slider-nav.row {
		
	position: fixed;
	top: 1em;
	bottom: 1em;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	flex-wrap: nowrap;

}
*/

@media screen and (max-width: $screen-narrow-max) {

	.slider-wrap.tabs > .slider-nav.row {
		
		display: flex;
		
	}

	.slider > * { // Stack slides vertically on old mobile browsers

		display: block;

	}

	@supports (--a: 1) { // ...and restore the slider on modern browsers
		
		.slider > * {
	
			display: inline-block;
	
		}
	
	}

}
