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;
vertical-align: baseline;
} 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;
}   #sequence {
position: relative;
min-height: 430px;
max-width: 1920px;
min-width:420px;
margin: 0 auto;
overflow: hidden;
color: white;
font-family: 'Oxygen', sans-serif;
}
#sequence > .sequence-canvas {
height: 100%;
width: 100%;
}
#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: 80px;
font-weight: bold;
position: absolute;
opacity: 0.4;
top: 215px;
height: 41px;
width: 39px;
z-index: 20;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
#sequence .sequence-prev {
left: 40px;
}
#sequence .sequence-next {
right: 40px;
}
#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.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
#sequence h2 {
font-size: 30px;
line-height: 32px;
}
#sequence .info {
color: #fff;
font-size: 1em;
right: 150%;
line-height: 1.2em;
top: 200px;
width: 33%;
z-index: 10;
vertical-align: middle;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-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: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#sequence .animate-out .info {
right: -150%;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#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: 30px;
-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 .balloon {
left: 140%;
top: -30px;
z-index: 2;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#sequence .aeroplane {
left: -50%;
max-width: 30%;
top: 600px;
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: 40px;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-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: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-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: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#sequence .animate-out .sky {
left: 6%;
opacity: 0;
top: 0;
z-index: 1;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#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: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#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;
}    @media only screen and (min-width: 480px) and (max-width: 767px) {
#sequence .sequence-prev {
left: 5px;
}
#sequence .sequence-next {
right: 5px;
}	
#sequence .animate-in .info {
right: 10%;
}
#sequence .animate-in .balloon {
left: 10%;
}
}