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

Theme: Apple Style
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/apple-style/

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 - 2014 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

/* Keyframes */
@include prefixedKeyframe("paused") { /* animate the pause button when Sequence is paused */
	0% {
	    background-position: 0 0;
	   	opacity: 0;
	 }
	 100% {
	    background-position: 0 0;
	   	opacity: .7;
	 }
}

@include prefixedKeyframe("status-bar") { /* cause the status bar to move */
	0% {
	background-position: -119px 0;
	}
	100% {
	background-position: 0 0;
	}
}

@include prefixedKeyframe("preload") { /* preloader icons */
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* !Keyframes */

#sequence-theme {
	width: 100%;
	height: 600px;
	overflow: hidden;
}

/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#{$sequenceContainer}.sequence-fallback {
    overflow: hidden;
}

#{$sequenceContainer} {
	position: relative;
	height: 600px;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	
	background: white;

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

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

		li > * {
			position: absolute;
		}
	}

	h2 {
		font-family: 'Magra', sans-serif;
		font-size: 30px;
		font-weight: bold;
		margin: 0 0 10px 0;
	}

	h3 {
		font-family: 'Magra', sans-serif;
		font-size: 20px;
	}

	.controls {
		background: url("../images/bg-controls.png") no-repeat;
		height: 49px;
		margin: 0 auto;
		position: relative;
		top: 0;
		width: 198px;
		z-index: 9999;
	}

	#{$prevButton},
	#{$nextButton} {
		opacity: 0.7;
	}

	#{$nextButton},
	#{$prevButton},
	#{$pauseButton} {
		position: absolute;
		z-index: 10000;
		top: 10px;
	}

	#{$nextButton} {
		background: url("../images/bt-next.png") 50% 4px no-repeat;
		height: 34px;
		left: 128px;
		width: 41px;
	}

	#{$nextButton}:hover,
	#{$prevButton}:hover,
	#{$pauseButton}:hover {
		background-position: 50% -26px;
	}

	#{$prevButton} {
		left: 28px;
		background: url("../images/bt-prev.png") 50% 4px no-repeat;
		height: 34px;
		width: 41px;
	}

	#{$pauseButton} {
		background: url("../images/bt-pause.png") 50% 4px no-repeat;
		cursor: pointer;
		height: 33px;
		left: 78px;
		width: 42px;
	}

	#{$pauseButton}.paused {
		background: url("../images/bt-play.png") 50% 4px no-repeat;
		height: 33px;
		left: 78px;
		width: 42px;
	}

	#{$pauseButton}.paused:hover {
		background-position: 50% -25px;
	}

	.status {
		background: url("../images/status-bar.png") -119px 0 repeat-y;
		@include prefixed(border-radius, 3px);
		height: 6px;
		margin: 0 auto;
		position: relative;
		top: 4px;
		width: 118px;
	}

	.status.paused {
		@include prefixed(animation, paused 1s linear alternate infinite);
	}

	.status.active {
		@include prefixed(animation, status-bar 4s linear);
	}

	.pause-icon {
		right: 20px;
		position: absolute;
		bottom: 20px;
	}

	/* Preloader */
	#{$sequencePreloader} {
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 999999;

		img {
			background: #ff9933;
			@include prefixed(border-radius, 6px);
			display: inline-block;
			height: 12px;
			opacity: 0;
			position: relative;
			top: -50%;
			width: 12px;
			@include prefixed(animation, preload 1s infinite);
		}

		.preloading {
			height: 12px;
			margin: 0 auto;
			top: 50%;
			position: relative;
			width: 48px;
		}

		img:nth-child(2) {
			@include prefixed(animation-delay, .15s);
		}

		img:nth-child(3) {
			@include prefixed(animation-delay, .3s);
		}

		.preloading-complete {
			opacity: 0;
			visibility: hidden;
			@include prefixed(transition-duration, 1s);
		}
	}
	/* !Preloader */

	/* Frame Animations */
	.iphone {
		left: -450px;
		opacity: 1;
		position: absolute;
		top: -520px;
		@include prefixed(transform, rotate(-40deg));
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateIn} .iphone {
		left: 600px;
		opacity: 1;
		top: 20px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateOut} .iphone {
		left: 1100px;
		opacity: 0;
		top: -370px;
		@include prefixed(transform, rotate(20deg));
		@include prefixed(transition-duration, 1s);
	}

	.iphone-shadow {
		left: 598px;
		opacity: 0;
		top: 490px;
		position: absolute;
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateIn} .iphone-shadow {
		left: 598px;
		opacity: 1;
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateOut} .iphone-shadow {
		left: 598px;
		opacity: 0;
		@include prefixed(transition-duration, 2s);
	}

	.intro {
		position: absolute;
		left: -450px;
		top: -370px;
		width: 400px;
		@include prefixed(transform, rotate(-40deg));
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateIn} .intro {
		left: 100px;
		top: 220px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1.5s);
	}

	#{$animateOut} .intro {
		left: 100px;
		opacity: 0;
		top: 220px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1s);
	}

	.ipad {
		left: -450px;
		position: absolute;
		top: 770px;
		@include prefixed(transform, rotate(-20deg));
		z-index: 5;
		
	}

	#{$animateIn} .ipad {
		left: 50px;
		top: 20px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1s);
	}

	#{$animateOut} .ipad {
		left: -800px;
		opacity: 0;
		top: 20px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1s);
	}

	.ipad-shadow {
		left: 30px;
		top: 478px;
		opacity: 0;
		position: absolute;
		@include prefixed(transition-duration, .5s);
	}

	#{$animateIn} .ipad-shadow {
		left: 30px;
		opacity: 1;
		@include prefixed(transition-duration, 1s);
	}

	#{$animateOut} .ipad-shadow {
		left: -800px;
		opacity: 0;
		@include prefixed(transition-duration, 1s);
	}

	.slide2 {
		left: 950px;
		position: absolute;
		top: 670px;
		width: 400px;
		@include prefixed(transform, rotate(20deg));
	}

	#{$animateIn} .slide2 {
		left: 450px;
		top: 220px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1s);
	}

	#{$animateOut} .slide2 {
		left: 800px;
		opacity: 0;
		top: 220px;
		@include prefixed(transform, rotate(0deg));
		@include prefixed(transition-duration, 1s);
	}

	.iphone2 {
		left: 400px;
		position: absolute;
		top: -570px;
		z-index: 3;
	}

	#{$animateIn} .iphone2 {
		left: 400px;
		top: 30px;
		@include prefixed(transition-duration, 2.5s);
		@include prefixed(transition-timing-function, ease-in);
	}

	#{$animateOut} .iphone2 {
		left: 600px;
		top: 770px;
		@include prefixed(transform, rotate(100deg));
		@include prefixed(transition-duration, 2.5s);
	}

	.iphone2-shadow {
		position: absolute;
		left: 398px;
		opacity: 0;
		top: 500px;
		@include prefixed(transition-duration, 1s);
	}

	#{$animateIn} .iphone2-shadow {
		left: 398px;
		opacity: 1;
		@include prefixed(transition-duration, 1s);
		@include prefixed(transition-delay, 1s);
	}

	#{$animateOut} .iphone2-shadow {
		left: 398px;
		opacity: 0;
		@include prefixed(transition-duration, 1s);
	}

	.iphone3-shadow {
		position: absolute;
		left: 500px;
		opacity: 0;
		top: 477px;
		@include prefixed(transform, scale(0.9));
		@include prefixed(transition-duration, 1s);
	}

	#{$animateIn} .iphone3-shadow {
		left: 500px;
		opacity: 1;
		@include prefixed(transition-duration, 1s);
		@include prefixed(transition-delay, .5s);
	}

	#{$animateOut} .iphone3-shadow {
		left: 500px;
		opacity: 0;
		@include prefixed(transform, scale(0.9));
		@include prefixed(transition-duration, 1s);
	}

	.iphone4-shadow {
		position: absolute;
		left: 575px;
		opacity: 0;
		top: 455px;
		@include prefixed(transform, scale(0.8));
		@include prefixed(transition-duration, 1s);
	}

	#{$animateIn} .iphone4-shadow {
		opacity: 1;
		@include prefixed(transition-duration, 1s);
	}

	#{$animateOut} .iphone4-shadow {
		opacity: 0;
		@include prefixed(transform, scale(0.8));
		@include prefixed(transition-duration, 1s);
	}

	.iphone3 {
		left: 500px;
		top: -570px;
		position: absolute;
		z-index: 2;
		@include prefixed(transform, scale(0.9));
	}

	#{$animateIn} .iphone3 {
		left: 500px;
		top: 30px;
		@include prefixed(transition-duration, 2s);
		@include prefixed(transition-timing-function, ease-in);
	}

	#{$animateOut} .iphone3 {
		left: 700px;
		top: 770px;
		@include prefixed(transform, rotate(100deg));
		@include prefixed(transition-duration, 2s);
	}

	.iphone4 {
		left: 575px;
		top: -570px;
		position: absolute;
		z-index: 1;
		@include prefixed(transform, scale(0.8));
	}

	#{$animateIn} .iphone4 {
		left: 575px;
		top: 30px;
		@include prefixed(transition-duration, 1.5s);
		@include prefixed(transition-timing-function, ease-in);
	}

	#{$animateOut} .iphone4 {
		left: 800px;
		top: 770px;
		@include prefixed(transform, rotate(100deg));
		@include prefixed(transition-duration, 1.5s);
	}

	.slide3 {
		position: absolute;
		left: -800px;
		opacity: 0;
		top: 220px;
		width: 250px;
	}

	#{$animateIn} .slide3 {
		left: 100px;
		opacity: 1;
		@include prefixed(transition-delay, 1s);
		@include prefixed(transition-duration, 1s);
	}

	#{$animateOut} .slide3 {
		left: 900px;
		opacity: 0;
		@include prefixed(transition-duration, 1s);
	}
	/* !Frame Animations */
}