/*
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; }
.sequence-preloader {top:40%;}

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

.sequence {margin: 0 auto;	position: relative;	overflow:hidden;	width:100%; height: 855px; padding:0;}
#sequence {	height: 100%;}

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

		.sequence > .sequence-canvas > li img { height: 100%; }
		
	.sequence li > .sequence-entry {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	

/* -------------------------------------------------- */
/*  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, 0);}

.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 {height:100%; background-position:center bottom; background-size:cover; background-repeat:no-repeat}

.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:1200px;	 margin:0 auto; height:100%; vertical-align: middle;	text-align: center; }
.sequence-content { display: table-cell; overflow:hidden; }

.sequence-content .sequence-slogan, .sequence-content .sequence-slogan2,
.sequence-content .sequence-text, .sequence-content .sequence-btn {opacity:0;  z-index:50;}


.sequence-content .sequence-slogan {}
.sequence-content .sequence-slogan span {}
.sequence-content .sequence-slogan2 {}
.sequence-content .sequence-text {}
.sequence-content .sequence-text span {}
.sequence-content .sequence-btn {}

	
.sequence-content .sequence-slogan, .sequence-content .sequence-slogan2,
.sequence-content .sequence-text, .sequence-content .sequence-btn {
	-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;
}

	
/* -------------------------------------------------- */
/*  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: .2s;
				transition-delay: .2s;
	}

	.animate-out .sequence-slogan2 {opacity: 0;
		-webkit-transform: translateY(50px);
				transform: translateY(50px);	}

.animate-in .sequence-slogan2 {opacity: 1;
		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: .4s;
				transition-delay: .4s;
	}

	.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: 0.6s;
				transition-delay: 0.6s;
	}

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

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

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

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 0.8s;
				transition-delay: 0.8s;
	}
	
/* -------------------------------------------------- */
/*  Responsive
/* -------------------------------------------------- */

@media screen and (max-width:1199px){
	.sequence-extra,
	.sequence-content {width:96%;}
}



@media all and (max-width:1024px) {
	.sequence {height:750px;}

	.sequence-content .sequence-slogan {font-size:40px; line-height:52px;}
	.sequence-content .sequence-slogan2 {font-size:16px; line-height:26px; margin:40px 0 20px;}
	.sequence-content .sequence-text {font-size:18px;}
	.sequence-content .sequence-btn {width:230px; font-size:16px; line-height:45px; margin-top:45px;}


}

@media all and (max-width:768px) {
	.sequence-extra {width:100%;}
	.sequence {height:90vw;}
	.sequence-content {text-align:center;}
	.sequence-content > div {width:100%; box-sizing:border-box; padding:0 5%; margin-top:50px;}

	.full-bg-image {background-position:right bottom !important}
	
	.sequence-content .sequence-slogan {font-size:30px; line-height:38px}
	.sequence-content .sequence-slogan2 {display:none;font-size:13px; line-height:20px; margin:30px 0 15px;}
	.sequence-content .sequence-slogan2 br {display:none;}
	.sequence-content .sequence-text {font-size:15px;margin-top: 20px;line-height:1.5;}
	.sequence-content .sequence-text span{display:block;}
	.sequence-content .sequence-btn {width:180px; font-size:16px; line-height:45px; margin:20px auto 0;}
	
}

@media screen and (max-width:568px) {
    .sequence {height:140vw}
	
	.full-bg-image {background-position:70% bottom !important}


}