/*
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.
*/
/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */


/* !CSS RESET */
/* prefix declarations */
/* THEME STYLES */

@font-face {
    font-family: 'RalewayHeavy';
    src: url('../fonts/raleway-heavy.eot');
    src: url('../fonts/raleway-heavy.eot') format('embedded-opentype'),
         url('../fonts/raleway-heavy.woff2') format('woff2'),
         url('../fonts/raleway-heavy.woff') format('woff'),
         url('../fonts/raleway-heavy.ttf') format('truetype'),
         url('../fonts/raleway-heavy.svg#RalewayHeavy') format('svg');
}

@font-face {
    font-family: 'RalewayLight';
    src: url('../fonts/raleway-light.eot');
    src: url('../fonts/raleway-light.eot') format('embedded-opentype'),
         url('../fonts/raleway-light.woff2') format('woff2'),
         url('../fonts/raleway-light.woff') format('woff'),
         url('../fonts/raleway-light.ttf') format('truetype'),
         url('../fonts/raleway-light.svg#RalewayLight') format('svg');
}

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.eot');
    src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RalewayBold';
    src: url('../fonts/raleway-bold.eot');
    src: url('../fonts/raleway-bold.eot') format('embedded-opentype'),
         url('../fonts/raleway-bold.woff2') format('woff2'),
         url('../fonts/raleway-bold.woff') format('woff'),
         url('../fonts/raleway-bold.ttf') format('truetype'),
         url('../fonts/raleway-bold.svg#RalewayBold') format('svg');
}

@font-face {
    font-family: 'SFUAGBuchStencilBQMedium';
    src: url('../fonts/sfuagbuchstencilbqmedium.eot');
    src: url('../fonts/sfuagbuchstencilbqmedium.eot') format('embedded-opentype'),
         url('../fonts/sfuagbuchstencilbqmedium.woff2') format('woff2'),
         url('../fonts/sfuagbuchstencilbqmedium.woff') format('woff'),
         url('../fonts/sfuagbuchstencilbqmedium.ttf') format('truetype'),
         url('../fonts/sfuagbuchstencilbqmedium.svg#SFUAGBuchStencilBQMedium') format('svg');
}


.sequence-theme {
  /* this container is just to ensure the background color stretches all the way across on bigger screens */
  background: #D9D9D9;
}

#sequence {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #D9D9D9;
  color: white;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  height: 206px;
}
#sequence > .sequence-canvas {
  height: 100%;
  width: 100%;
}
#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top:0;
}
#sequence > .sequence-canvas > li img {
  height: 100%;
}
#sequence > .sequence-canvas li > * {
  position: absolute;
  /* only cause the left and opacity properties to transition */
  /* -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity; */
}
#sequence-theme .controls a {
    background: url("images/control_sequence.png") no-repeat scroll 0 0 ;
    cursor: pointer;
    display: block;
    height: 49px;
    margin: -25px 0 0;
    text-indent: -9999px;
    top: 50%;
    width: 49px;
    z-index: 999;
    position: absolute; 
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#sequence-theme .controls .sequence-next {
    background-position: 100% 0;
    right: 20px;
    display: none;
}
#sequence-theme .controls .sequence-prev {
    left: 20px;
    display: none;
}
#sequence-theme:hover .controls .sequence-prev,#sequence-theme:hover .controls .sequence-next{display: block;}
/*.sequence-next,*/
/*.sequence-prev {*/
/*  color: white;*/
/*  cursor: pointer;*/
/*  display: none;*/
/*  font-weight: bold;*/
/*  padding: 10px 15px;*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  z-index: 1000;*/
/*  height: 75px;*/
/*  margin-top: -47.5px;*/
/*}*/

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

.sequence-paused {
  opacity: 0.3;
}

.sequence-prev {
  left: 3%;
}

.sequence-next {
  right: 3%;
}

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

#sequence-preloader {
  background: #d9d9d9;
}

.sequence-pagination {
  bottom: 1%;
  display: none;
  right: 6%;
  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 {
  display: inline-block;
  *display: inline;
  /* Hack for IE7 and below as they don't support inline-block */
  height: 140px;
}
.sequence-pagination li img {
  cursor: pointer;
  opacity: 0.5;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: margin-bottom, opacity;
  -moz-transition-property: margin-bottom, opacity;
  -ms-transition-property: margin-bottom, opacity;
  -o-transition-property: margin-bottom, opacity;
  transition-property: margin-bottom, opacity;
}
.sequence-pagination li img:hover {
  margin-bottom: 4px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sequence-pagination li.current img {
  opacity: 1;
}


.sequence-next,
.sequence-prev {
  position: absolute;
  opacity: 0.6;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.sequence-next:hover,
.sequence-prev:hover {
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.title {
  font-size: 80px;
  left: 0;
  width: auto;
  top: 50%;
  margin-top: -100px; 
  text-transform: capitalize;
  z-index: 50;  
  font-family: 'RalewayLight';
  text-align: left;
  padding: 0;
  line-height: 65px;
  opacity: 0;
  color: #fff;
  transition-property: left, opacity;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.animate-in .title {
  left: 50%;
  opacity: 1;   
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.animate-out .title {
  left: 0;
  opacity: 0;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
#sequence .title {
    width:auto;
  }

 
.link  a {
  color: #fff; 
  background: #000;
  line-height: 40px; padding: 10px 30px; display: block; 
}
 
.link a:hover {
  color: #00c8c8; 
}
.link {
	left: 0; 
	 opacity: 0; text-transform: uppercase; font-size: 15px; font-family: RalewayBold; top: 50%; margin-top: 50px;
}
.animate-in .link {
  left: 50%;
  opacity: 1;

  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
.animate-out .link {
  left: 0;
  opacity: 0 !important;

  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}

.subtitle {
  left: 0;
  top: 50%; 
  margin-top: -40px; 
  font-size: 78px; line-height: 70px;	
  font-family: 'SFUAGBuchStencilBQMedium';
  color: #fff;
  font-weight: normal !important;
  text-transform: uppercase;
  width: auto;
  opacity: 0;
  z-index:999999;
}

.animate-in .subtitle {
  left: 50%;     
  width: auto;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.animate-out .subtitle {
left: 0;
opacity: 0; 
}

.intro {
  left: 0; 
  top: 50%; margin-top: -125px;
  font-size: 19px; letter-spacing: 16px;
  font-family: 'RalewayLight';
  color: #fff;
  font-weight: normal !important;
  text-transform: capitalize;
  width: auto;
  opacity: 0;
  z-index:999999;
}
.animate-in .intro {
  left: 50%;     
  width: auto;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.animate-out .intro {
left: 0;
opacity: 0; 
}

.model {
  left: 0;
  margin: 0 0 0 -450px;
  bottom: 0;
  opacity: 0;
  position: relative; 
}

.animate-in .model {
 left: 50%;
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.animate-out .model {
 left: 0;
  opacity: 0;
  -webkit-transition-duration:0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
/*=====================================slider1======================================*/
.slider1 .intro   { margin-left: -130px; }
.slider1 .title { margin-left: -130px;display: none;}
.slider1 .subtitle {margin-left: -75px;}
/*=====================================slider2======================================*/
 .slider2 .intro, .slider2 .title, .slider2 .subtitle { color: #000; }
.slider2 .subtitle { font-size: 54px; }
/*=====================================endslider2======================================*/

/*=====================================slider3======================================*/

/*=====================================endslider3======================================*/




/* customer style*/
 /* #sequence .slider-bg {
    left: 0%;
    min-width: 100%;
    width: 100%;
	top:50%;
  }
  
  #sequence .animate-in .slider-bg {
    left: 0%;
    margin-left: 0%;
	  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  }
  
  #sequence .animate-out .slider-bg {
    left: 0%;
    margin-left: 0%;
  }*/

  .model1 {
	right: -100%;  
	top: 0;
	opacity: 0;
	position: relative;
	height: auto !important; 
  /* prevents the model from shrinking when the browser is resized */ 
}

.animate-in .model1 { 
	 right: 0;
	opacity: 1;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-ms-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
}

.animate-out .model1 {
	right: -100%;
	opacity: 0;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

 .slider-bg {
  right: 0%;
  bottom: 0%;
  opacity: 0;
  position: relative;
  width: 100%;
  min-height:100%;
  top:0;	
  /* prevents the model from shrinking when the browser is resized */
}

.animate-in .slider-bg {
  right: 0%;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.animate-out .slider-bg {
  right: 0%;
  opacity: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
 
 
@media only screen and (max-width: 1199px) {
#sequence { height: 167px;}
	.model { margin-left: -415px;}
	.model1 { }
	.title { font-size: 65px;  margin-top: -100px; }
	.subtitle { font-size: 75px; line-height: 75px; margin-top: -51px; }
	.intro { font-size: 18px; margin-top: -117px; }
	.link a { line-height: 30px;}
	.slider2 .model1 { margin-left: -172px; }
}

@media only screen and (max-width: 991px) {
	#sequence { height: 122px; }
	.model { margin-left: -335px;}
	/*.model1 {  margin-left: -110px; }*/
	.title { font-size: 55px; margin-top: -90px; }
	.subtitle { font-size: 65px; margin-top: -50px; }
	.intro { font-size: 14px; margin-top: -96px; letter-spacing: 10px;} 
	.slider2 .model1 { margin-left: -135px; }
	#sequence-theme .controls a { display: none !important;}
	.slider2 .subtitle { font-size: 45px;}

}

@media only screen and (max-width: 640px) {
	#sequence { height: 99px; }
	.model { margin-left: -270px;}
	.model1 {  margin-right: 0px; }
	.title { font-size: 46px; margin-top: -60px; margin-left: -102px; }
	.subtitle { font-size: 60px; margin-top: -25px; margin-left: -160px; }
	.intro { font-size: 14px; margin-top: -65px; margin-left: -120px;} 
	.slider1 .title, .slider1 .intro { margin-left: -105px; }
	.slider2 .model1 { margin-left: -135px; }
	#sequence-theme .controls a { display: none !important;}
	.link { margin-left: -72px; }
}
@media only screen and (max-width: 560px) {
	#sequence { height: 63px; }
	.model { margin-left: -45%; }
	.model1 {  margin-left: 0px; }
	.title { font-size: 30px; margin-top: -100px; margin-left: -77px; }
	.subtitle { font-size: 48px; margin-top: -75px; }
	.intro { font-size: 12px; margin-top: -15px; } 
	.slider1 .subtitle { margin-left: -87px; }
	.slider1 .title { margin-left: -75px; }
	.slider1 .intro { margin-left: -110px;}
	.slider2 .model1 { margin-left: -135px; }
	#sequence-theme .controls a { display: none !important;}
	.link { top: 72px; }
	.link a { font-size: 12px; line-height: 20px; }
}