// slide dimensions
$slide-height:	670px;
$slide-width:	1180px;

/*
 * Responsive css will be imported at the bottom of this file
 */

#horizontal-slideshow {
	height: $slide-height;
	width: 100%;
	background-color: #000;
	position: relative;
	overflow: hidden;

	#slide-left,
	#slide-right {
		height: 37px;
		width: 37px;
		border: 1px solid #fff;
		position: absolute;
		top: $slide-height / 2 - 75;
		z-index: 5;
		cursor: pointer;
		@include transition(background-color 0.3s);

		&:after {
			content: "";
			display: block;
			height: 18px;
			width: 11px;
			position: absolute;
			top: 8px;
			background-image: image-url('sprite_retina.png');
			background-repeat: no-repeat;
			background-size: $retina-width $retina-height;
		}

		&:hover {
			background-color: rgba(255, 255, 255, 0.9);
		}
	}

	#slide-left {
		left: 50%;
		margin-left: $slide-width / 2 - 36;

		&:after {
			background-position: -191px -89px;
			left: 12px;
		}

		&:hover:after {
			background-position: -191px -51px;
		}
	}

	#slide-right {
		border-left: none;
		left: 50%;
		margin-left: $slide-width / 2 + 1;

		&:after {
			background-position: -230px -89px;
			left: 14px;
		}

		&:hover:after {
			background-position: -230px -51px;
		}
	}

	#slides-container {
		width: 4 * $slide-width;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -1.5 * $slide-width;
		z-index: 1;

		.slide {
			width: $slide-width;
			height: $slide-height;
			opacity: 0.25;
			position: relative;
			@include transition(opacity 0.8s);

			.slide-image {
				width: 100%;
				height: auto;
				position: absolute;
				left: 0;
				top: calc(50% - #{$slide-height / 2});
			}

			.content {
				display: none;
			}

			&.active {
				opacity: 1;
			}
		}
	}

	// extends _bg_overlay.css
	.bg-overlay {
		z-index: 2;

		.top{
			&:before {
				right: calc(50% + 240px);
			}
			&:after {
				left: calc(50% - 240px);
			}
		}
	}

	#slides-overlay {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: calc(50% + 225px);
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 3;

		&:after {
			content: "";
			display: block;
			height: 0px;
			width: 0px;
			position: absolute;
			top: 0;
			left: 100%;
			border-top: $slide-height solid rgba(0, 0, 0, 0.3);
			border-left: none;
			border-bottom: none;
			border-right: 212px solid transparent;
		}
	}

	#current-slide-content {
		width: $slide-width;
		height: $slide-height;
		opacity: 0;
		@include transition(opacity 0.5s);
		position: absolute;
		z-index: 4;
		left: 50%;
		margin-left: -1 * $slide-width / 2;
		font-size: 50px;
		color: #fff;
		padding: 150px 100px;
		line-height: 60px;

		.title1 {
			text-shadow: 0px 1px 1px rgb( 0, 0, 0 );
		}
	}

	#timebar-container {
		height: 6px;
		width: 100%;
		position: absolute;
		bottom: 50px;
		left: 0;
		text-align: center;
		z-index: 5;

		.timebar {
			width: $slide-width * 0.14;
			height: 6px;
			display: inline-block;
			margin: 0 10px;
			background-color: #fff;
			position: relative;

			&:after {
				content: "";
				display: block;
				height: 100%;
				width: 0%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: $bright-background-color;
			}

			&.active:after {
				width: 100%;
				// make sure this time is the same as "timer" in horizontalSlideshow.js
				@include transition(width 6s);
				@include transition-timing-function(linear);
			}

			&.completed {
				background-color: $bright-background-color;
			}
		}
	}
}

// responsive
@import "imports/responsive_horizontal_slideshow";