/* natUIve – Slider */

@import 'natuive-setup';

.lightbox a {
	
	display: inline-block;
	vertical-align: middle;
	margin: $line-height-em $line-height-em/4;
// 	margin: var(--line-height-em) calc(var(--line-height-em)/4);
	
}

	.lightbox a img {
		
		display: block;
		padding-bottom: 0 !important;
	
	}
	
	.full-window-wrap .slider, .full-window-wrap .slider-wrap {
		
		height: 100%;
		
	}
	
	.no-touch .full-window-wrap .slider-wrap, .no-touch .full-window-wrap .slider-wrap.vertical {
				
		margin-top: $line-height-em*2;
// 		margin-top: calc(var(--line-height-em)*2);
		height: calc(100% - #{$line-height-em*2});
// 		height: calc(100% - var(--line-height-em)*2);

	}		
	
.slider-wrap { 
	
	position: relative;
	overflow: hidden;
	max-height: 100%;
	z-index: 1;

}

.slider-wrap.vertical-tabs {
	
	display: flex;

}

.slider-wrap.vertical-tabs > .slider {

	order: 1;
	flex: 1;

}

.slider-wrap.vertical.tabs > .slider-nav {
	
	width: 33.3%;
	display: block;

}

.slider-wrap.vertical.tabs > .slider-nav a {
	
	display: block;

}

.full-window-wrap .slider-wrap {
	
	top: 0px;
	bottom: 0px;
	height: 100%;
	right: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
// 	background: #fff;
	position: absolute;

}

*:-webkit-full-screen  .slider-wrap {

	background: #000;

}
	
*:-moz-full-screen  .slider-wrap {

	background: #000;

}
	
*:fullscreen  .slider-wrap {

	background: #000;

}
	
.slider {

	overflow-x: visible;
	overflow-y: hidden;
	white-space: nowrap; /* keep inline-block elements together */
	word-wrap: normal; /* IE8 fix */
	position: relative;
	-webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0); /* fast, hardware-accelerated scrolling */
	-ms-overflow-style: none; /* No scrollbars on IE10+ */
	-webkit-transform-style: preserve-3d;
	left: 0;
// 	font-size: 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;

	-webkit-transition: none;
	-ms-transition: none;
	transition: none;

	-ms-transition: top .2s linear;
	transition: top .2s linear;

	-ms-transition: left .2s linear;
	transition: left .2s linear;

	display: flex;

}

.slider-wrap .slider {
	
	overflow: visible;
	width: 100%;
	
}

.slider-wrap .slider > * {
	
	opacity: 0;
	
}

.slider-wrap .slider > .visible {
	
	opacity: 1;
	
}

.slider-wrap.vertical, .slider.vertical {
	
// 	height: $line-height*23;

}

.full-window-wrap .slider-wrap.vertical, .full-window-wrap .slider, .full-window-wrap .slider > * {
	
	height: 100%;

}

.full-window-wrap .slider:not(.vertical) > * {
	
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	
}

.slider.vertical {
	
	overflow-x: hidden;
	overflow-y: scroll;

}

.slider-wrap .slider.vertical {
	
	overflow-x: visible;
	overflow-y: visible;
	flex-direction: column;

}

.slider-wrap .slider.vertical > * {

	height: 100%;
	display: none;

}

.sliding .slider-wrap .slider.vertical > *, .slider-wrap .slider.vertical > .visible {

	display: block;

}

.slider > * {

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

	flex: 1 0 auto;

}

.no-flex .slider > * + * { // Fallback
	
	margin-left: -.3em;
	
}

.slider.vertical > * {
	
	display: block;
	height: 100%;

}

.slider-wrap .slider.sliding > *:not(.visible) {

	display: none;

}

.slider-wrap .slider.sliding {

	-webkit-transform: none !important;
	-ms-transform: none !important;

}

.slider > *.visible {

	display: inline-block;

}

.slider.vertical > *.visible {

	display: block;
	
}

.slider.vertical > img {

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

}

.full-window-wrap .slider > img {
	
	padding: 0 !important;
	height: auto;
	
}

.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.lightbox > * {

	height: 100%;
	text-align: center;
	position: relative;
	
}

.slider.lightbox > *:before {

	content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
	height: 100%;
	position: static;
	width: 0;

}

.slider.lightbox > * p { /* Image captions */

	position: absolute;
	bottom: 48px;
	text-align: center;
	color: #fff;
	left: 50%;
	transform: translateX(-50%);
	padding: .2em .5em;
	background: rgba(0, 0, 0, .4);

}

.slider-wrap .slider::-webkit-scrollbar {

    display: none;

}

.slider-arrow {
	
	position: absolute;
	top: 50%;
	left: 1em;
	z-index: 3; /* Stay on top of slider-nav if they are aligned vertically */
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	
}

	.slider-arrow:before {
	
		content: '←';
	
	}

	.vertical .slider-arrow:before {
	
		content: '↑';
	
	}

	.vertical .slider-arrow {
		
		top: 1em;
		left: 48%;
		left: calc(50% - 1em);
		text-align: center;
		-webkit-transform: none;
		transform: none;
	
	}

	.slider-arrow.right {
	
		left: auto;
		right: 1em;
	
	}

	.slider-arrow.right:before {
	
		content: '→';
	
	}

	.vertical .slider-arrow.right:before {
	
		content: '↓';
	
	}

	.vertical .slider-arrow.right {
		
		left: 48%;
		left: calc(50% - 1em);
		right: auto;
		bottom: 1em;
		top: auto;
	
	}
	
	.slider-arrow, .slider-nav a {
		
		cursor: pointer;
		padding: .6em;
		width: 1em;
		height: 1em;
		-webkit-border-radius: 50px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .1);
		color: #fff;
		transition: background-color .2s linear;
		line-height: 1em;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	
	}

.slider-arrow, .slider-nav {

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.slider-nav {
	
	text-align: center;
	position: absolute;
	bottom: .5em;
	white-space: nowrap;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
}

	.slider-nav {
		
		text-align: start;
		justify-content: flex-start;

	}

	.slider-wrap.tabs > .slider-nav a {
		
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;

	}

	.vertical .slider-nav {
		
		width: auto;
		display: table;
		left: .5em;
		padding: 1em 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		
	}

	.slider-nav a {
		
		display: inline-block;
		margin: .5em;
		line-height: 2em;
		padding: 0;
		width: 2em;
		height: 2em;
		text-align: center;
		
	}
	
	.vertical .slider-nav a {
		
		display: block;
		
	}
		
	.slider-nav a.active {
	
		background: rgba(0, 0, 0, .2);
		color: inherit;
	
	}

	.slider-wrap.tabs > .slider-nav {
		
		right: auto;
		position: static;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		
	}

	.slider-wrap.tabs > .slider-arrow {

		display: none;
		
	}
	
	.slider-wrap.tabs > .slider-nav.row {
		
		padding: 0;
		margin: 0;
		width: auto;

	}
	
	.full-window .slider-wrap.tabs > .slider-nav {
		
		position: absolute;
		bottom: 0;
		padding: 0;
	
	}
	
	.slider-wrap.tabs > .slider-nav a {
		
		text-indent: 0;
		width: auto;
		height: auto;
		display: table-cell;
		text-align: start;
		border-radius: 0;
		line-height: $line-height;
// 		line-height: var(--line-height);
		padding: 0 .5em;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		margin: 0;
		white-space: normal;
	
	}

.slider > * > img {

	max-height: 100%;
    vertical-align: middle;
	margin: 0 auto;
	display: block;
	padding-bottom: 0 !important;

}

.lightbox.slider > * > img {
	
	display: none;

}

.lightbox.slider > *.visible > img {
	
	display: inline-block;

}

.lightbox.slider > *.visible > img.zoom {

	width: auto;
	height: auto;
	max-height: none;
	max-width: none;
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	transform: translate3d(-50%, -50%, 0);

}

.full-window-wrap .lightbox.slider > * {
	
	overflow: hidden;
	
}

.sliding {

	-webkit-animation-name: sliding;
	animation-name: sliding;
	
}

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