@import url("mediaqueries.css") screen;
/*
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 */
html, 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;
  font-size: 100%;
  font: inherit;
/*  vertical-align: baseline*/}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

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: absolute;
/*  min-height: 600px;
  max-width: 1400px;
  min-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: url(../images/bg-sky.jpg) repeat-x #65b7f1; */
    font-size: 100%;
  font: inherit;
  
  width:100%;  height:100%;
  color: white;
  font-family: "Play", sans-serif;
}
#sequence > .sequence-canvas {
  min-height: 100%;
  min-width: 100%;
  vertical-align: middle;
}
#sequence > .sequence-canvas > li { position: absolute; width: 100%; height: 100%;  min-width: 100%;  margin-top: auto; margin-bottom: auto; float: none; clear: both; top: 0; bottom: 1%; 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;
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  opacity: 0.4;
  top: 45%;
  height: 30px;
  width: 20px;
  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: 5%; 
}
#sequence .sequence-next {
  right: 5%;
}
#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 {
  font-size: 130%;
  line-height: 1.2em;
  letter-spacing:.5px;   
  position: relative;
 
/*  margin-top: 15%;*/ /* transform: translateY(-50%); */
}

/*
#sequence .info {
  color: black;
  font-size: 1em;
  right: 150%;
  line-height: 1.2em;
  top: 270px;
  width: 25%;
  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: 15%;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#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 .info {
  color: white;font-size:200%;width:60%;
  font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
  right: -150%; text-align:center;
  line-height: 1.9em;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); 
  z-index: 10;
  text-shadow: 0px 0px 10px #000; 
   -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 {
  z-index: 10;right:20%;
  
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;

}
#sequence .animate-out .info {
  right: 150%;
  -webkit-transition-duration: 4s;z-index: 10;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .balloon {
  left: 25%;
 /* top: 270px;*/
  width: 53%;
  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: 31%;
 /* top: 270px;*/
  
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
  transition-property: center bottom transform;
  z-index: 4;
}
#sequence .animate-out .balloon {
  left: 43%;
 /* top: 270px;*/
  z-index: 2;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .five {
  left: 0%;
  height: auto;
  width:65%;
  top:0;
  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 .five {
  left: -100%;
    top:0;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
    transition-property: left middle transform;
  z-index: 6;
}
#sequence .animate-out .five {
  left: 0%;
    top:0;
  z-index: 2;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .two {
  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 .two {
  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 .two {
  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;   min-width: 120%; width:auto;
  min-height:100%;
  max-height:120%;
  max-width:auto;
  left: -20%;
  opacity: 0;
  top: 0;
  text-align:center;
  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: -10%;
  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: 0%;
  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: 20%;
  top: 200px;
}
#sequence .contact { width: auto; position: relative; z-index: 10; vertical-align:bottom;bottom: 10%; text-align: center; margin-left: 35%; margin-right: 35%; font-family: Helvetica, san-serif; font-color: #000; font-size: 1.0em; }
#sequence #header {width:100%;z-index:12;top:0;text-align:center;position:relative;margin: 0 auto;}
#sequence #header #logo {width:15%;height:auto;position:relative;z-index:11;top:0;min-width:75px;margin: 0 auto;}
#sequence #footer {text-align:center;max-height:100px; position:absolute;width:100%;z-index:100;bottom:5%;}
#sequence #footer #contactbutton { padding: 10px; z-index:12;position:relative;background-color: #fff; margin-bottom:0; margin-left:auto;margin-right:auto; opacity: .5; border-radius: 8px; width: 200px; }
			a {font-color:#FFFFFF;}
		#sequence .contact a, #sequence .contact a:visited{ font-family: Helvetica, san-serif; font-size: 12px; font-color: #fff; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #000000; letter-spacing: 1px;		}
			#sequence .aligncenter {text-align:center;margin-left:auto;margin-right:auto;}
			#sequence #footer #contactbutton:hover { padding: 10px; background-color: #E59108; }

#sequence #tip {position:absolute;padding: 10px; background-color: #fff; margin-left:40%;margin-right:40%;z-index:20;border-radius: 8px; width: 350px; height:auto;text-align:left; }
#sequence #tip p { font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size: 12px; line-height: 1.4em; color: #333; z-index: 21; }
li .info h2 {}
.info h2 a { font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; color: #FAF8F8; font-style: normal; font-weight: 800; vertical-align: super; font-size: 50%; }
#sequrnce.footnote h2 a, sup {font-family:Helvetica, arial, san-serif; font-size:12px; text-decoration:none;}
a {text-decoration:none;}

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @extend %vertical-align;
}

#facebook, #instagram {margin:10px;width:20px;height:auto;opacity:.5;}
h2 {display:block;}