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

Theme:   Sliding Horizontal Parallax (Responsive)
Version:   0.2.2 Beta
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 dual licensed under the following: 
http://www.opensource.org/licenses/mit-license.php | http://www.gnu.org/licenses/gpl.html

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 unless otherwise stated.
Aside from these comments, you may modify and distribute this file as you please. Have fun!
 */

.header-container{
position:relative;
z-index:10;
width:100%;
background: url(../images/bg1.png) repeat;
margin: 0 auto 42px auto;
}

.header {
max-width:1240px;
float:none;
	height: 450px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	
z-index:0;
	
}



#main, #aside{
	
}


#header i{
font-size:40px;
}





.pause {
	bottom: 0;
	cursor: pointer;
	position: absolute;
	z-index: 1000;
}

.paused {
	opacity: 0.3;
}



#header .next,
#header .prev {opacity:0;
	color: #fff;
	cursor: pointer;
	
	font-weight: bold;
	
	position: absolute;
	top: 43%;
	z-index: 1000;
	height: 75px;
transition: all .3s;
-moz-transition: all .3s; 
-webkit-transition:all .3s; 
-o-transition: all .3s; 	
}

#header:hover .next {opacity:.2;

	
}
#header:hover .prev {
opacity:.2;	
}

#header .next:hover, #header .prev:hover {
opacity:1;		
}


.prev {
	left: 3%;
}

.next {
	right: 3%;
}

.prev img, .next img{
	height: 100%;
	width: auto;
}

#sequence-preloader{
	display:none;
}

.sequence-pagination {
	bottom: -20%;
	display: none;
	right: 6%;
	position: absolute;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.sequence-pagination li {background:#fff;
opacity:.5;
	display: inline-block;
	height: 20px;width:20px;
}
.sequence-pagination li:hover {
opacity:1;

}


.pause {
	bottom: 0;
	cursor: pointer;
	position: absolute;
	z-index: 1000;
}

.paused {
	opacity: 0.3;
}



#sequence-preloader{
	display:none;
}

.sequence-pagination {
  bottom: 0;
  right: 5%;
  position: absolute;
  z-index: 10;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.sequence-pagination li  {
background: #fff;
display:block;
margin-left:5px;
margin-right:5px;
float:left;
cursor:pointer;	
	width: 18px;
	height: 18px;
	transition: all .3s;
-moz-transition: all .3s; 
-webkit-transition:all .3s; 
-o-transition: all .3s; 
 opacity:.5;
border-radius:100% ;
-moz-border-radius:100% ;
-webkit-border-radius:100% ;
}
.sequence-pagination li:hover {
 opacity:1;
	transition: all .3s;
-moz-transition: all .3s; 
-webkit-transition:all .3s; 
-o-transition: all .3s; 
}




#sequence li{
	height: 100%;
	position: absolute;
	top: -50%;
	width: 100%;
}

#sequence li * {
	position: absolute;
}

#sequence li img{
	height: 96%;
}

#sequence {
	
	display: block;
	height: 100%;
	margin: 0;
	position: absolute;
	max-width: 1280px;
	width: 100%;
	
	/*backface-visibility prevents graphical glitches when frames are animating*/
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}


#sequence h2 {
color: #fff;	
text-transform: uppercase;
font-size:105px;
}


#sequence h3 {
color: #fff;	
text-transform: uppercase;
font-size:66px;
}

#sequence h4 {
color: #fff;
font-family:"pt serif";
font-size:27px;
}
#sequence h5 {
color: #fff;
font-size:36px;
text-transform: uppercase;
font-family:"pt sans";
}


#sequence p {
color: #fff;
font-size:17px;
font-family:"pt sans";
}


.title1 {
font-weight:bold;
font-family:"pt sans";
bottom:30%;
left: 50%;
opacity: 0;
z-index: 50;
/*transform:rotate(180deg);
-ms-transform:rotate(180deg); 
-webkit-transform:rotate(180deg); */
}

.title1.animate-in {
	left: 50%;
	opacity: 1;
bottom:-10%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
/*transform:rotate(0deg);
-ms-transform:rotate(0deg); 
-webkit-transform:rotate(0deg); */

}

.title1.animate-out {
	left: 50%;
bottom:30%;
	opacity: 0;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1 {
	
	left: 50%;
	width:40%;
	opacity: 0;
	bottom:-50%;
}

.subtitle1.animate-in {
	left: 50%;
	opacity: 1;
       bottom:-25%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1.animate-out {
	left:50%;
	opacity: 0;
 bottom:-50%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}
.subtitle1p {
	
	left: 50%;
	width:40%;
	opacity: 0;
	bottom:-50%;
}

.subtitle1p.animate-in {
	left: 50%;
	opacity: 1;
         bottom:-30%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1p.animate-out {
	left:50%;
	opacity: 0;
        bottom:-50%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}


.title1a {

font-family:"pt sans";
	bottom:-12%;
	left: 80%;
	
	opacity: 0;
	
	z-index: 50;
}

.title1a.animate-in {
       
	left: 50%;
	opacity: 1;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.title1a.animate-out {
	left: 80%;
      
	opacity: 0;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1a {
	
	left: 50%;
	width:40%;
	opacity: 0;
	bottom:-50%;
}

.subtitle1a.animate-in {
	left: 50%;
	opacity: 1;
        bottom:-25%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1a.animate-out {
	left:50%;
	opacity: 0;
        bottom:-50%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}
.subtitle1b {
	
	left: 50%;
	width:40%;
	opacity: 0;
	bottom:30%;
}

.subtitle1b.animate-in {
	left: 50%;
	opacity: 1;
          bottom:12%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.subtitle1b.animate-out {
	left:50%;
	opacity: 0;
        bottom:30%;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}




.model1 {
	left: 0;
	bottom: -50%;
	opacity: 0;
	position: relative;
	height: auto !important;
	max-height: 568px !important;
      
	width: 30%;
	min-width: 366px; /*prevents the model from shrinking when the browser is resized*/
	max-width: 366px;
}

.model1.animate-in {
	left: 10%;
	opacity: 1;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

.model1.animate-out {
	left:0;
	opacity: 0;

	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
}

@media only screen and (min-width : 992px) {

.title1{
width: 40%;
}

}

@media only screen and (max-width : 991px) {

	
	

.header{
height: 450px;
}


.title1 {
bottom:0%;
}
.subtitle1 {
bottom:-15%;
}

	
.model1{
max-height: 530px !important;
width: 20%;
left:0;
}

.model1.animate-in{		
left:2%;
}
.model1.animate-out{		
left:0;
}


}


@media only screen and (max-width :850px) {
	

#sequence h2 {
font-size:88px;
}


#sequence h3 {
font-size:44px;
}

#sequence h4 {
font-size:21px;
}
#sequence h5 {
font-size:27px;
}


	
}



@media only screen and (max-width :767px) {


.header-container{
background:transparent;
}

.header {
background: url(../images/bg1.png) repeat;	
}


.subtitle1 {
visibility:hidden;
}
.subtitle1a {
visibility:hidden;
}
.subtitle1b {
visibility:hidden;
}
.subtitle1p {
visibility:hidden;
}



.title1 {
bottom:-20%;
left: 0;
transform:rotate(0deg);
-ms-transform:rotate(0deg); 
-webkit-transform:rotate(0deg); 
}

.title1.animate-in {
left: 0%;
bottom:-50%;
transform:rotate(0deg);
-ms-transform:rotate(0deg); 
-webkit-transform:rotate(0deg); 
}

.title1.animate-out {
left: 0;
bottom:-20%;
}


.title1a {
bottom:-20%;
left:0;
transform:rotate(0deg);
-ms-transform:rotate(0deg); 
-webkit-transform:rotate(0deg); 
}

.title1a.animate-in {
left: 0%;
bottom:-50%;
transform:rotate(0deg);
-ms-transform:rotate(0deg); 
-webkit-transform:rotate(0deg); 
}

.title1a.animate-out {
left: 0;
bottom:-20%;
}

.model1{
max-height: 530px !important;
left:0;
}

.model1.animate-in{		
left:10%;
}
.model1.animate-out{		
left:0;
}

}



@media only screen and (max-width :400px) {


.model1{
max-height: 530px !important;
left:0;
width: 20%;
	min-width: 300px; /*prevents the model from shrinking when the browser is resized*/
	max-width: 300px;


}

.model1.animate-in{		
left:2%;
}
.model1.animate-out{		
left:0;
}



}





@media only screen and (max-width :300px) {

.header {
height: 300px;	
}



.model1{
max-height: 530px !important;
left:0;
width: 20%;
	min-width: 200px; /*prevents the model from shrinking when the browser is resized*/
	max-width: 200px;


}

.model1.animate-in{		
left:2%;
}
.model1.animate-out{		
left:0;
}



}