/*

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



Theme: Sliding Horizontal Parallax

Version: 1.2

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

body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;



}





/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



/* !CSS RESET */

/* prefix declarations */

/* THEME STYLES */

#sequence {

  position: relative;

  min-height: 325px;

  max-width: 1000px;

  margin: 0 auto;

  overflow: hidden;

  background:url(/images/bg_slider.png);

  color: white;

  font-family:Bellerose;

}

#sequence > .sequence-canvas {

  height: 450px;

  width: 1000px;

}

#sequence > .sequence-canvas > li {

  position: absolute;

  width: 970px;

  height: 450px;

  z-index: 1;

}

#sequence > .sequence-canvas li > * {

  position: absolute;

  -webkit-transition-timing-function: ease-in-out;

  -moz-transition-timing-function: ease-in-out;

  -ms-transition-timing-function: ease-in-out;

  -o-transition-timing-function: ease-in-out;

  transition-timing-function: ease-in-out;

   background:url(/images/bg_slider.png);

  

}

#sequence .sequence-next,

#sequence .sequence-prev {

  color: white;

  cursor: pointer;

  display: none;

  font-size: 80px;

  font-weight: bold;

  position: absolute;

  opacity: 0.4;

  top: 280px;

  height: 26px;

  width: 25px;

  z-index: 20;

  -webkit-transition-duration: 0.4s;

  -moz-transition-duration: 0.4s;

  -ms-transition-duration: 0.4s;

  -o-transition-duration: 0.4s;

  transition-duration: 0.4s;

}

#sequence .sequence-prev {

  left: 20px;

  top:50%;

}

#sequence .sequence-next {

  right: 20px;

  top:50%;

}

#sequence .sequence-next:hover,

#sequence .sequence-prev:hover {

  opacity: 1;

  -webkit-transform: scale(1.2);

  -moz-transform: scale(1.2);

  -ms-transform: scale(1.2);

  -o-transform: scale(1.2);

  transform: scale(1.2);

  -webkit-transition-duration: 0.4s;

  -moz-transition-duration: 0.4s;

  -ms-transition-duration: 0.4s;

  -o-transition-duration: 0.4s;

  transition-duration: 0.4s;

}



#sequence .info {

  color: #000;

  font-size: 22px;
    letter-spacing:3px;

  right: 250%;

  line-height:inherit;

  top: 20px;

  width: auto;

  z-index: 10;

  vertical-align: middle;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

  -webkit-transition-property: right;

  -moz-transition-property: right;

  -ms-transition-property: right;

  -o-transition-property: right;

  transition-property: right;

}

#sequence .animate-in .info {

  right: 0%;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

   background:url(/images/bg_slider.png);

 

}

#sequence .animate-out .info {

  right: -150%;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

}

#sequence .balloon {

  left: -140%;

  top: 200px;

  max-width: 40%;

  z-index: 6;

  -webkit-transition-property: left top;

  -moz-transition-property: left top;

  -ms-transition-property: left top;

  -o-transition-property: left top;

  transition-property: left top;

}

#sequence .animate-in .balloon {

  left: 15%;

  top: 70px;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

  z-index: 4;

}

#sequence .animate-out .balloon {

  left: 140%;

  top: -30px;

  z-index: 2;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

}

#sequence .aeroplane {

  left: -50%;

  max-width: 40%;

  top: 800px;

  z-index: 6;

  -webkit-transition-property: left top -webkit-transform;

  -moz-transition-property: left top -moz-transform;

  -o-transition-property: left top -o-transform;

  -ms-transition-property: left top -ms-transform;

  transition-property: left top transform;

}

#sequence .animate-in .aeroplane {

  left: 10%;

  top: 100px;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

  -webkit-transform: rotate(20deg);

  -moz-transform: rotate(20deg);

  -ms-transform: rotate(20deg);

  -o-transform: rotate(20deg);

  transform: rotate(20deg);

  z-index: 4;

}

#sequence .animate-out .aeroplane {

  left: 70%;

  top: -900px;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

  -webkit-transform: rotate(40deg);

  -moz-transform: rotate(40deg);

  -ms-transform: rotate(40deg);

  -o-transform: rotate(40deg);

  transform: rotate(40deg);

  z-index: 2;

}

#sequence .sky {

  height: auto;

  width: 100%;

  left: -6%;

  opacity: 0;

  top: 0;

  vertical-align: middle;

  z-index: 1;

  -webkit-transition-property: left top;

  -moz-transition-property: left top;

  -ms-transition-property: left top;

  -o-transition-property: left top;

  transition-property: left top;

}

#sequence .animate-in .sky {

  left: 0%;

  opacity: 1;

  top: 0;

  z-index: 1;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

}

#sequence .animate-out .sky {

  left: 6%;

  opacity: 0;

  top: 0;

  z-index: 1;

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

}

#sequence .kite {

  left: -30%;

  opacity: 0;

  max-width: 40%;

  top: 300px;

  z-index: 6;

  -webkit-transform-origin: 100%;

  -moz-transform-origin: 100%;

  -ms-transform-origin: 100%;

  -o-transform-origin: 100%;

  transform-origin: 100%;

  -webkit-transition-property: left top -webkit-transform;

  -moz-transition-property: left top -moz-transform;

  -o-transition-property: left top -o-transform;

  -ms-transition-property: left top -ms-transform;

  transition-property: left top transform;

}

#sequence .animate-in .kite {

  left: -15%;

  top: 300px;

  opacity: 1;

  z-index: 4;

  -webkit-transform-origin: 100%;

  -moz-transform-origin: 100%;

  -ms-transform-origin: 100%;

  -o-transform-origin: 100%;

  transform-origin: 100%;

  -webkit-transform: rotate(80deg);

  -moz-transform: rotate(80deg);

  -ms-transform: rotate(80deg);

  -o-transform: rotate(80deg);

  transform: rotate(80deg);

  -webkit-transition-duration: 4s;

  -moz-transition-duration: 4s;

  -ms-transition-duration: 4s;

  -o-transition-duration: 4s;

  transition-duration: 4s;

}

#sequence .animate-out .kite {

  left: -15%;

  opacity: 0;

  top: 300px;

  z-index: 2;

  -webkit-transform-origin: 100%;

  -moz-transform-origin: 100%;

  -ms-transform-origin: 100%;

  -o-transform-origin: 100%;

  transform-origin: 100%;

  -webkit-transform: rotate(200deg);

  -moz-transform: rotate(200deg);

  -ms-transform: rotate(200deg);

  -o-transform: rotate(200deg);

  transform: rotate(200deg);

  -webkit-transition-duration: 3s;

  -moz-transition-duration: 3s;

  -ms-transition-duration: 3s;

  -o-transition-duration: 3s;

  transition-duration: 3s;

}

#sequence .sequence-fallback .animate-in .kite {

  left: 50%;

  top: 200px;

}