// compass
@import "compass";

// scss config
@import "imports/config";

/*
 * Mobile
 */
@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {

	// slide dimensions
	$slide-height:	360px;
	$slide-width:	634px;

	#horizontal-slideshow {
		height: $slide-height;

		#slide-left,
		#slide-right {
			display: none;
		}

		#slides-container {
			width: 4 * $slide-width;
			margin-left: -1.5 * $slide-width;

			.slide {
				width: $slide-width;
				height: $slide-height;

				.slide-image {
					top: calc(50% - #{$slide-height / 2});
				}
			}
		}

		//extends _bg_overlay.css
		.bg-overlay {
			display: none;
		}

		#slides-overlay {
			right: calc(50% + 100px);

			&:after {
				border-top: $slide-height solid rgba(0, 0, 0, 0.3);
				border-right: 150px solid transparent;
			}
		}

		#current-slide-content {
			width: auto;
			height: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 20px;
			line-height: auto;
			margin-left: 0;

			.title1 {
				margin-bottom: 10px;
			}

			.button {
				height: 36px;
				line-height: 36px;
				font-size: 14px;

				&:before {
					top: 5px;
					bottom: 5px;
				}

				&:after {
					border-left: 15px solid $bright-background-color;
					border-bottom: 36px solid transparent;
				}

				&:hover {

					&:after {
						border-top: 36px solid transparent;
						border-bottom: 0px solid transparent;
						border-left-color: $bright-background-color-hover;
					}
				}
			}
		}

		#timebar-container {

			.timebar {
				width: 14%;
				margin: 0 5px;
			}
		}
	}
}


/*
 * Tablet
 */
@media only screen 
and (min-width : 768px) 
and (max-width : 1023px) {

	// slide dimensions
	$slide-height:	436px;
	$slide-width:	768px;

	#horizontal-slideshow {
		height: $slide-height;

		#slide-left,
		#slide-right {
			display: none;
		}

		#slides-container {
			width: 4 * $slide-width;
			margin-left: -1.5 * $slide-width;

			.slide {
				width: $slide-width;
				height: $slide-height;

				.slide-image {
					top: calc(50% - #{$slide-height / 2});
				}
			}
		}

	 //extends _bg_overlay.css
		.bg-overlay {
			display: none;
		}

		#slides-overlay {
			right: calc(50% + 100px);

			&:after {
				border-top: $slide-height solid rgba(0, 0, 0, 0.3);
				border-right: 150px solid transparent;
			}
		}

		#current-slide-content {
			width: auto;
			height: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 20px;
			line-height: auto;
			margin-left: 0;

			.title1 {
				margin-bottom: 10px;
				font-size: 38px;
				line-height: 44px;
			}
		}

		#timebar-container {

			.timebar {
				width: 14%;
				margin: 0 5px;
			}
		}
	}
}

/*
 * Large screens
 */
@media only screen 
and (min-width: 1300px) {
	
}