/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Sliding Horizontal Parallax
Version: 1.2
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/sliding-horizontal-parallax/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/

//Selector Variables
$sequenceContainer: "#sequence";
$sequenceCanvas: ".sequence-canvas";
$animateIn: ".animate-in";
$animateOut: ".animate-out";
$nextButton: ".sequence-next";
$prevButton: ".sequence-prev";
$pauseButton: ".sequence-pause";
$pagination: ".sequence-pagination";
$whenPaused: ".sequence-paused";
$sequencePreloader: ".sequence-preloader";

@import "partials/reset"; //import Eric Meyer's CSS Reset. Remove this if you have a reset in your main stylesheet
@import "partials/mixins"; //vendor prefixing mixins

/* THEME STYLES */

#{$sequenceContainer} {
	position: relative;
	min-height: 600px;
	max-width: 1400px;
	min-width: 960px;
	margin: 0 auto;
	overflow: hidden;

	background: url(../images/bg-sky.png) repeat-x #65B7F1;
	color: white;
	font-family: 'Play', sans-serif;

	> #{$sequenceCanvas} {
		height: 100%;
		width: 100%;

		 > li {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		li > * {
			position: absolute;
			@include prefixed(transition-timing-function, ease-in-out);
		}
	}

	#{$nextButton},
	#{$prevButton} {
		color: white;
		cursor: pointer;
		display: none;
		font-size: 80px;
		font-weight: bold;
		position: absolute;
		opacity: 0.4;
		top: 280px;
		height: 41px;
		width: 39px;
		z-index: 20;
		@include prefixed(transition-duration, .4s);
	}

	#{$prevButton} {
		left: 40px;
	}

	#{$nextButton} {
		right: 40px;
	}

	#{$nextButton}:hover,
	#{$prevButton}:hover {
		opacity: 1;
		@include prefixed(transform, scale(1.2));
		@include prefixed(transition-duration, .4s);
	}

	h2 {
		font-size: 1.5em;
		line-height: 1.2em;
	}

	.info {
		color: black;
		font-size: 1em;
		right: 150%;
		line-height: 1.2em;
		top: 270px;
		width: 25%;
		z-index: 10;
		vertical-align: middle;
		@include prefixed(transition-duration, 4s);
		$transitionProperties: right;
		@include prefixed(transition-property, #{$transitionProperties});
	}

	#{$animateIn} .info {
		right: 15%;
		@include prefixed(transition-duration, 4s);
	}

	#{$animateOut} .info {
		right: -150%;
		@include prefixed(transition-duration, 4s);
	}

	.balloon {
		left: -140%;
		top: 200px;
		max-width: 40%;
		z-index: 6;
		$transitionProperties: left top;
		@include prefixed(transition-property, #{$transitionProperties});
	}

	#{$animateIn} .balloon {
		left: 15%;
		top: 70px;
		@include prefixed(transition-duration, 4s);
		z-index: 4;
	}

	#{$animateOut} .balloon {
		left: 140%;
		top: -30px;
		z-index: 2;
		@include prefixed(transition-duration, 4s);
	}

	.aeroplane {
		left: -50%;
		max-width: 40%;
		top: 800px;
		z-index: 6;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
	}

	#{$animateIn} .aeroplane {
		left: 10%;
		top: 100px;
		@include prefixed(transition-duration, 4s);
		@include prefixed(transform, rotate(20deg));
		
		z-index: 4;
	}

	#{$animateOut} .aeroplane {
		left: 70%;
		top: -900px;
		@include prefixed(transition-duration, 4s);
		@include prefixed(transform, rotate(40deg));
		z-index: 2;
	}

	.sky {
	  height: auto;
	  width: 100%;
		left: -6%;
		opacity: 0;
		top: 0;
		vertical-align: middle;
		z-index: 1;
		$transitionProperties: left top;
		@include prefixed(transition-property, #{$transitionProperties});
	}

	#{$animateIn} .sky {
		left: 0%;
		opacity: 1;
		top: 0;
		z-index: 1;
		@include prefixed(transition-duration, 4s);
	}

	#{$animateOut} .sky {
		left: 6%;
		opacity: 0;
		top: 0;
		z-index: 1;
		@include prefixed(transition-duration, 4s);
	}

	.kite {
		left: -30%;
		opacity: 0;
		max-width: 40%;
		top: 300px;
		z-index: 6;
		@include prefixed(transform-origin, 100%);
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
	}

	#{$animateIn} .kite {
		left: -15%;
		top: 300px;
		opacity: 1;
		z-index: 4;
		@include prefixed(transform-origin, 100%);
		@include prefixed(transform, rotate(80deg));
		@include prefixed(transition-duration, 4s);
	}

	#{$animateOut} .kite {
		left: -15%;
		opacity: 0;
		top: 300px;
		z-index: 2;
		@include prefixed(transform-origin, 100%);
		@include prefixed(transform, rotate(200deg));
		@include prefixed(transition-duration, 3s);
	}

	.sequence-fallback #{$animateIn} .kite {
	    left: 20%;
	    top: 200px;
	}
}