/*
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 */
/* prefix declarations */
/* THEME STYLES */
#sequence {
  position: relative;
  height: 350px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index:20;
}


#sequence > .sequence-canvas {
  height: 100%;
  width: 100%;
  margin-top:-21px;
}
#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  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;
}
#sequence .sequence-next,
#sequence .sequence-prev {
  color: white;
  cursor: pointer;
  display: none;
  font-size: 60px;
  position: absolute;
  opacity: 0.5;
  top: 140px;
  height: 57px;
  width: 30px;
  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: 30px;
}
#sequence .sequence-next {
  right: 30px;
}
#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 h2 {
  color:#222;
  background: rgba(255,255,255,0.7);
  font:normal 30px/42px 'Roboto Condensed', sans-serif;
  padding: 10px;
  margin:0;
  text-align: left;
}
#sequence p {
  color:#333;
  background: rgba(255,255,255,0.7);
  font: 16px/22px 'Roboto', sans-serif;
  padding: 10px;
  margin:0;
  margin-top:10px;
  text-align: left;
}
#sequence p span {
	font-weight:normal;
}
#sequence .info {
  left: -80%;
  top: 140px;
  width: 420px;
  z-index: 10;
  text-align: left;
  -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 .info {
  left: 50%;
  margin-left: -460px;
  z-index: 10;
  -webkit-transition-duration: 2.6s;
  -moz-transition-duration: 2.6s;
  -ms-transition-duration: 2.6s;
  -o-transition-duration: 2.6s;
  transition-duration: 2.6s;
}
#sequence .animate-out .info {
  left: 140%;
  z-index: 10;
  -webkit-transition-duration: 1.2s;
  -moz-transition-duration: 1.2s;
  -ms-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
}
#sequence .sresim1 {
  left: -80%;
  top: 0px;
  width: 630px;
  height: 400px;
  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 .sresim1 {
  left: 50%;
  top: 0px;
  margin-left: -490px;
  -webkit-transition-duration: 2.2s;
  -moz-transition-duration: 2.2s;
  -ms-transition-duration: 2.2s;
  -o-transition-duration: 2.2s;
  transition-duration: 2.2s;
  z-index: 6;
}
#sequence .animate-out .sresim1 {
  left: 130%;
  top: 0px;
  z-index: 6;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .sresim2 {
  left: -80%;
  top: 0px;
  width: 485px;
  height: 195px;
  z-index: 7;
  -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 .sresim2 {
  left: 50%;
  top: 0px;
  margin-left: 5px;
  -webkit-transition-duration: 2.4s;
  -moz-transition-duration: 2.4s;
  -ms-transition-duration: 2.4s;
  -o-transition-duration: 2.4s;
  transition-duration: 2.4s;
  z-index: 7;
}
#sequence .animate-out .sresim2 {
  left: 130%;
  top: 0px;
  z-index: 7;
  -webkit-transition-duration: 1.3s;
  -moz-transition-duration: 1.3s;
  -ms-transition-duration: 1.3s;
  -o-transition-duration: 1.3s;
  transition-duration: 1.3s;
}
#sequence .sresim3 {
  left: -80%;
  top: 205px;
  width: 410px;
  height: 195px;
  z-index: 8;
  -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 .sresim3 {
  left: 50%;
  top: 205px;
  margin-left: 80px;
  -webkit-transition-duration: 2.6s;
  -moz-transition-duration: 2.6s;
  -ms-transition-duration: 2.6s;
  -o-transition-duration: 2.6s;
  transition-duration: 2.6s;
  z-index: 8;
}
#sequence .animate-out .sresim3 {
  left: 130%;
  top: 205px;
  z-index: 8;
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence .sbg {
  height: auto;
  width: 100%;
  left: 0;
  opacity: 0;
  top: 0;
  vertical-align: middle;
  z-index: 5;
  -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 .sbg {
  left: 0;
  opacity: 1;
  top: 0;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  z-index: 4;
}
#sequence .animate-out .sbg {
  left: 0;
  opacity: 0;
  top: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .sequence-pagination {color:#fff; font-size:48px; opacity:1; margin:0 auto; cursor:pointer;}
	#sequence .sequence-pagination li {float:left; margin:0 5px 0; position:relative; top:372px; z-index:30;}
.sequence-pagination .current {opacity:0.4;}
#sequence .ortala {width:100%;}
#sequence .ortala ul {display:table;}
*:first-child+html #sequence .ortala {text-align:center}
* html #sequence .ortala {text-align:center}


@media only screen and (min-width: 768px) and (max-width: 980px) {
	#sequence {height:320px;}
	#sequence .sequence-next, #sequence .sequence-prev {top:145px;}
	#sequence .sequence-prev {left:20px;}
	#sequence .sequence-next {right:20px;}
	#sequence h2 {font: normal 27px/48px 'Roboto Condensed', sans-serif;}
	#sequence p {font: italic 16px/22px 'Roboto', sans-serif;}
	#sequence .info {top: 110px; width: 384px;}
	#sequence .animate-in .info {margin-left: -360px;}
	#sequence .sresim1 {width: 494px; height: 313px;}
	#sequence .animate-in .sresim1 {margin-left: -384px;}
	#sequence .sresim2 {width: 381px; height: 153px;}
	#sequence .animate-in .sresim2 {margin-left: 3px;}
	#sequence .sresim3 {width: 322px; height: 153px; top: 160px;}
	#sequence .animate-in .sresim3 {margin-left: 62px; top: 160px;}
	#sequence .animate-out .sresim3 {margin-left: 62px; top: 160px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#sequence {height:244px; margin-top: 10px;}
	#sequence .sequence-next, #sequence .sequence-prev {top:100px;}
	#sequence .sequence-prev {left:12px;}
	#sequence .sequence-next {right:12px;}
	#sequence h2 {font: normal 26px/42px 'Roboto Condensed', sans-serif;}
	#sequence p {font: italic 15px/21px 'Roboto', sans-serif; margin-bottom: -30px;}
	#sequence .info {top: 10px; width: 240px;}
	#sequence .sresim {width: 270px; height: 209px;}
	#sequence .animate-in .sresim {margin-left: -240px;}
}
@media only screen and (max-width: 479px) {
	#sequence {display:none;}
}