/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */

// Gradient mixin
@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) {
	background-color: $from;
	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background-image: -webkit-linear-gradient(top, $from, $to);
	background-image: -moz-linear-gradient(top, $from, $to);
	background-image: -o-linear-gradient(top, $from, $to);
	background-image: linear-gradient(to bottom, $from, $to);
}

// Bar mixin
@mixin bar($color) {
	background-color:$color;
	@include css-gradient( $color, darken($color, 20%) ); 
}

html.swipebox-html.swipebox-touch {
	overflow: hidden!important;
}

#swipebox-overlay img {
	border: none!important;
}

#swipebox-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999!important;
	overflow: hidden;
	user-select: none;
}

#swipebox-container{
	position: relative;
	width: 100%;
	height: 100%;
}

#swipebox-slider {
	transition : transform 0.8s cubic-bezier(0.61, 0.21, 0.25, 1);
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	white-space: nowrap;
	position: absolute;
	display: none;
	cursor: pointer;
	
	.slide {
		height: 100%;
		width: 100%;
		line-height: 1px;
		text-align: center;
		display: inline-block;
		padding: 50px 65px 50px 50px;
		@include breakpoint(small only) { padding: 0; }
		
		&:before {
			content: "";
			display: inline-block;
			height: 50%;
			width: 1px;
			margin-right: -1px;
		}

		img,
        .swipebox-video-container,
        .swipebox-inline-container {
			display: inline-block;
			max-height: 100%;
			max-width: 100%;
			margin: 0;
			padding: 0;
			width: auto;
			height: auto;
			vertical-align: middle;
		}

		.swipebox-video-container {
			background:none;
			max-width: 1140px;
			max-height: 100%;
			width: 100%;
			padding:5%;
			box-sizing: border-box;
			.swipebox-video{
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				overflow: hidden;
				position: relative; 
				iframe{
					width: 100%!important; 
					height: 100%!important;
					position: absolute;
					top: 0; left: 0;
				}
			}
		}
	}
}

// #swipebox-bottom-bar,
#swipebox-top-bar{
	// transition : 0.5s;
	position: absolute;
	bottom: 0; 
	left: 0;
	z-index: 999;
	height: 50px;
	width: 100%;
}

#swipebox-title{
	display:none;
	width: 100%;
	text-align: center;
}

#swipebox-prev{
	top: 50%;
	margin-top: -50px;
	left: 10px;
	position: absolute;
	z-index: 9999;
	width: 30px;
	height: 100px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="100px" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" ><line id="e4_line1" x1="25" y1="0" x2="10" y2="15" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/><line x1="10" y1="15" x2="25" y2="30" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/></svg>') !important; background-repeat: no-repeat !important;

}
#swipebox-next{
	top: 50%;
	margin-top: -50px;
	right: 20px;
	position: absolute;
	z-index: 9999;
	width: 30px;
	height: 100px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="100px" viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" ><line id="e4_line2" x1="5" y1="0" x2="20" y2="15" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/><line x1="20" y1="15" x2="5" y2="30" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/></svg>') !important; background-repeat: no-repeat !important; 

}

#swipebox-close{
	top: 30px;
	right: 20px;
	position: absolute;
	z-index: 9999;
	width: 50px;
	height: 50px;
	background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 100 100" style=""
		 xml:space="preserve"><line id="e4_line3" x1="35" y1="35" x2="65" y2="65" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/><line x1="65" y1="35" x2="35" y2="65" stroke="rgba(255,255,255,1)" style="stroke-width: 2px; vector-effect: non-scaling-stroke; fill: none;"/>
		</svg>'); background-repeat: no-repeat;
	@include breakpoint(small only) { top: 10px; right: 10px; }
		

}

.swipebox-no-close-button #swipebox-close{
	display: none;
}

#swipebox-prev,
#swipebox-next{
	&.disabled{
		opacity: 0.3;
	}
}

.swipebox-no-touch{
	#swipebox-overlay.rightSpring #swipebox-slider {
		animation : rightSpring 0.3s;
	}

	#swipebox-overlay.leftSpring  #swipebox-slider{
		animation : leftSpring 0.3s;
	}
}

.swipebox-touch{
	#swipebox-container {
		&:before,
		&:after{
			backface-visibility:hidden;
			transition : all .3s ease;
			content : ' ';
			position: absolute;
			z-index: 999;
			top: 0;
			height: 100%;
			width: 20px;
			opacity: 0;
		}

		&:before{
			left: 0;
			box-shadow: inset 10px 0px 10px -8px #656565;
		}

		&:after{
			right: 0;
			box-shadow: inset -10px 0px 10px -8px #656565;
		}
	}

	#swipebox-overlay.leftSpringTouch #swipebox-container{
		&:before{
			opacity: 1;
		}
	}

		
	#swipebox-overlay.rightSpringTouch #swipebox-container{
		&:after{
			opacity: 1;
		}
	}
}

@keyframes rightSpring {
	0% {
		left:0;
	}

	50% {
		left:-30px;
	}

	100% {
		left:0;
	}
}

@keyframes leftSpring {
	0% {
		left:0;
	}

	50% {
		left:30px;
	}

	100% {
		left:0;
	}
}

@media screen and (min-width: 800px) {

	#swipebox-arrows{
		width: 92%;
		max-width: 800px;
	}
}

/* Skin 
--------------------------*/
#swipebox-overlay {
	background: #0d0d0d;
}

#swipebox-bottom-bar,
#swipebox-top-bar {
	text-shadow: 1px 1px 1px black;
	background: #000;
	//@include bar(#0d0d0d);
	opacity: 0.95;
}

#swipebox-bottom-bar {
	//border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#swipebox-top-bar {
	//border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: white!important;
	font-size: 15px;
	line-height: 43px;
	font-family: Helvetica, Arial, sans-serif;
}