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

Theme: Modern Slide In
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/modern-slide-in/

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.
*/

.sequence-theme { background-color: transparent; }

/* -------------------------------------------------- */
/*  Main Styles
/* -------------------------------------------------- */

.sequence {
	margin: 0px;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding:0px;
    
	/*height: 600px;*/
}

#sequence {
	height: 450px;
	
}

	.sequence > .sequence-canvas {
		height: 100%;
		width: 100%;
		margin:0px;
		padding:0px;
		z-index:-1;
	}
  
  .sequence > .sequence-canvas > li {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
	  padding:0px;
	  display: block;
	  list-style: none;
	  opacity: 1 !important;
  }

		.sequence > .sequence-canvas > li img { height: 100%; z-index: -1;}
		
	.sequence li > .sequence-entry {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		padding: 0px;
		width: 100%;
		height: 100%;
	}
	
/* -------------------------------------------------- */
/*  Next Prev Buttons
/* -------------------------------------------------- */	

.sequence-theme .sequence-prev,
.sequence-theme .sequence-next {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: block;
	margin-top: -25px;
	width: 30px;
	height: 30px;
	font-size: 0;
	cursor: pointer;
	text-align: center;

	-webkit-transition: all .30s ease-in-out;
			transition: all .30s ease-in-out;
}

.no-touch .sequence-theme .sequence-prev { left:  -60px; }
.no-touch .sequence-theme .sequence-next { right: -60px; }

.touch .sequence-theme .sequence-prev { left:  20px; }
.touch .sequence-theme .sequence-next { right: 20px; }

.sequence-theme:hover .sequence-prev { left:  20px; }
.sequence-theme:hover .sequence-next { right: 20px; }

.sequence-theme .sequence-prev:after,
.sequence-theme .sequence-next:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	font-size: 35px;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1em;
}

.sequence-theme .sequence-prev:after { content: "<"; }
.sequence-theme .sequence-next:after { content: ">"; }
	
.sequence-pause {
	bottom: 0;
	cursor: pointer;
	position: absolute;
	z-index: 1000; 
}

.sequence-paused    { opacity: 0.3; }
#sequence-preloader { background-color: #d9d9d9; }

/* -------------------------------------------------- */
/*  Pagination
/* -------------------------------------------------- */

.sequence-pagination {
	position: absolute;
	bottom: 2%;
	z-index: 10;
	display: none;
    width: 100%;
	text-align: center;
	font-size: 0;
	
	-webkit-transition-duration: .5s;
			transition-duration: .5s; 
}

	.sequence-pagination .page { display: inline-block; }

		.sequence-pagination .page span {
			display: inline-block;
			margin: 2px 8px;
			padding: 4px;
			width: 3px;
			height: 3px;
			border-width: 1px;
			border-style: solid;
			border-color: transparent;
			background-color: #fff;
			cursor: pointer;
			vertical-align: middle;

			-webkit-transition: all .25s ease-in-out;
					transition: all .25s ease-in-out;
			-webkit-border-radius: 50%;
					border-radius: 50%;
		}
		
		.sequence-pagination .page.current span,
		.sequence-pagination .page:hover span {
			border-color: #fff;
			background-color: transparent;

			-webkit-transform: scale(1.4);
					transform: scale(1.4);
		}

/* -------------------------------------------------- */
/*  Fullscreen Image
/* -------------------------------------------------- */

.sequence-canvas .parallax-overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url(overlay-pattern.png);
	background-repeat: repeat;
}

#sequence-fullscreen .animate-in .parallax-overlay {
	z-index: 1;
	background-color: rgba(0,0,0, .2);
}

.animated-element {
	position: relative;
	opacity: 0;
	
	-webkit-transition-duration: 1s;
			transition-duration: 1s;
}

.animate-out .animated-element { opacity: 0; }
.animate-in  .animated-element { opacity: 1; }

.full-bg-image.animated-element {
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-delay: 0;
            transition-delay: 0;
}

/* -------------------------------------------------- */
/*  Elements
/* -------------------------------------------------- */

.sequence-extra,
.sequence-content {
	display: table;
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	text-align: center;
	z-index:100;
}

.sequence-content { display: table-cell; }

	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		margin-bottom: 10px;
		opacity: 0;
		color: #fff;
		text-transform: uppercase;
		font-weight: 700;
		font-family: 'Roboto Condensed', sans-serif;
		line-height: 1.3em;
	}
	
	.sequence-content .sequence-slogan { font-size: 70px; }
	.sequence-content .sequence-text   { font-size: 48px; }
	
	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
				
		-webkit-transition-property: -webkit-transform, opacity;
				transition-property: transform, opacity;
		-webkit-transition-duration: .7s;
				transition-duration: .7s;
		-webkit-transition-timing-function: ease;
				transition-timing-function: ease;
	}
	
	.sequence-content .sequence-button {
		opacity: 0;
		
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
				
		-webkit-transition-property: -webkit-transform, opacity;
				transition-property: transform, opacity;
		-webkit-transition-duration: .7s;
				transition-duration: .7s;
		-webkit-transition-timing-function: ease;
				transition-timing-function: ease;
	}

		.sequence-content .sequence-slogan > span { color: white; }
	
/* -------------------------------------------------- */
/*  Animation
/* -------------------------------------------------- */

/* Sequence Fullscreen */
	.animate-out .sequence-slogan {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-slogan {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: .5s;
				transition-delay: .5s;
	}

	.animate-out .sequence-text {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-text {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.1s;
				transition-delay: 1.1s;
	}

	.animate-out .sequence-button {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-button {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.6s;
				transition-delay: 1.6s;
	}
	
	/* Sequence with Extra Radius */
	
	.sequence-canvas .extra-radius {
		opacity: 0;
		
		-webkit-transition: -webkit-transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
				transition: transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
		-webkit-transform: scale(0);
				transform: scale(0);
	}
	
	.animate-out .extra-radius {
		opacity: 0;
		
		-webkit-transform: scale(0);
				transform: scale(0);
	}	
	
	.animate-in .extra-radius {
		opacity: 1;
		
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	
		.sequence-canvas .inner-content h2 {
			opacity: 0;

			-webkit-transition-duration: 0;
					transition-duration: 0;
			-webkit-transition-property: opacity, transform;
					transition-property: opacity, transform;
			-webkit-transition-timing-function: ease;
					transition-timing-function: ease;
			-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
		}
		
		.sequence-canvas .inner-content > h2:nth-child(1) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(2) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(3) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(4) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(5) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.animate-in .inner-content > h2:nth-child(1) { 
			-webkit-transition-delay: 1.1s;
					transition-delay: 1.1s;
			-webkit-transition-duration: .6s;  
					transition-duration: .6s;  
		}

		.animate-in .inner-content > h2:nth-child(2) { 
			-webkit-transition-delay: 1.8s;
					transition-delay: 1.8s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(3) { 
			-webkit-transition-delay: 2.4s;
					transition-delay: 2.4s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(4) { 
			-webkit-transition-delay: 3s;
					transition-delay: 3s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(5) { 
			-webkit-transition-delay: 3.6s;
					transition-delay: 3.6s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}
		
		.sequence-canvas .animate-in .inner-content > h2 { 
			opacity: 1;

			-webkit-transform: translateX(0);
					transform: translateX(0);
		}	
	
/* -------------------------------------------------- */
/*  Responsive
/* -------------------------------------------------- */

@media only screen and (max-width: 767px) {
		
	.sequence li > .sequence-entry { padding: 0px; }	
	
		.touch .sequence-theme .sequence-prev { left:  10px; }
		.touch .sequence-theme .sequence-next { right: 10px; }

		.sequence-theme:hover .sequence-prev { left:  10px; }
		.sequence-theme:hover .sequence-next { right: 10px; }
	
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	
	#sequence {
		min-height: 250px;
		height: 250px;
	}
	
		#sequence li > .sequence-entry { padding: 0; }	
	
	.sequence-content .sequence-slogan { font-size: 40px; }
	.sequence-content .sequence-text   { font-size: 20px; }
	
	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		margin-bottom: 10px;
		line-height: 1.2em;
	}
	
} 

@media only screen and (max-width: 767px) and (orientation: portrait) {
	
	#sequence {
		min-height: 350px;
		height: 350px;
	}
	
		#sequence li > .sequence-entry { padding: 25px; }	
	
	.sequence-content .sequence-slogan { font-size: 33px; }
	.sequence-content .sequence-text   { font-size: 20px; }
	
	.sequence-content .sequence-slogan,
	.sequence-content .sequence-text {
		margin-bottom: 20px;
		line-height: 1.2em;
	}
	
}