.next, .prev { color: white; cursor: pointer; display: none; font-weight: bold; padding: 10px 15px; position: absolute; /*top: 300px;*/ z-index: 1000; height: 75px; }
.pause { bottom: 0; cursor: pointer; position: absolute; z-index: 1000; }
.paused { opacity: 0.3; }
.prev { left: 1%; /*top: 300px;*/ }
.next {/* right: 1%;*/ }
.prev img, .next img { height: 100%; width: auto; }
#sequence-preloader { background: #d9d9d9; }
#nav { bottom: 1%; display: none; right: 6%; position: absolute; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
#nav li { display: inline-block; height: 140px; }
#nav li img { cursor: pointer; opacity: 0.5; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
#nav li img.active { opacity: 1; }
#sequence li { height: 100%; position: absolute; top: 0%; width: 100%; list-style:none }
#sequence li object { position: absolute; width:100%; height:100%; z-index:-232 }
/*#sequence li img{ height: 96%;}*/

#sequence { display: block; height: 100%; margin: 0; position: relative; width: 100%; /*backface-visibility prevents graphical glitches when frames are animating -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;*/ }
.next, .prev { position: absolute; opacity: 0.6; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
.next:hover, .prev:hover { opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
.title { left: 0%; opacity: 0; z-index: 50; }
.title.animate-in { opacity: 1; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
.title.animate-out { left: 100%; opacity: 0; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
.subtitle { color: white; font-size: 2em; left: 35%; opacity: 0; top: 101%; }
.subtitle.animate-in { left: 50%; opacity: 1; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
.subtitle.animate-out { left: 65%; opacity: 0; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
.model { left: 0%; opacity: 0; top:0; position: absolute; width: 100%; display:block; }
.model.animate-in { left: 0%; opacity: 1; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
.model.animate-out { opacity: 1; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; }
.st-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif; }
.st-container > input, .st-container > a { position: fixed; bottom: 0px; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px; }
.st-container > input { opacity: 0; z-index: 1000; }
.st-container > a { z-index: 10; font-weight: 700; background: #e23a6e; color: #fff; text-align: center; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); }
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before { content: ''; position: fixed; width: 100%; height: 34px; z-index: 9; bottom: 0; }
#st-control-1, #st-control-1 + a { left: 0; }
#st-control-2, #st-control-2 + a { left: 20%; }
#st-control-3, #st-control-3 + a { left: 40%; }
#st-control-4, #st-control-4 + a { left: 60%; }
#st-control-5, #st-control-5 + a { left: 80%; }
.st-container > input:checked + a, .st-container > input:checked:hover + a { }
.st-container > input:checked + a:after, .st-container > input:checked:hover + a:after { bottom: 100%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; /*pointer-events: none; */border-bottom-color: #821134; border-width: 20px; left: 50%; margin-left: -20px; }
.st-container > input:hover + a { background: #AD244F; }
.st-container > input:hover + a:after { border-bottom-color: #AD244F; }
.st-scroll, .st-panel { position: relative; width: 100%; height: 100%; }
.st-scroll { top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; /* Let's enforce some hardware acceleration */ -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; }
.st-panel { overflow: hidden; }
 #st-control-1:checked ~ .st-scroll {
 -webkit-transform: translateY(0%);
 -moz-transform: translateY(0%);
 -o-transform: translateY(0%);
 -ms-transform: translateY(0%);
 transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 -o-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
 -webkit-transform: translateY(-200%);
 -moz-transform: translateY(-200%);
 -o-transform: translateY(-200%);
 -ms-transform: translateY(-200%);
 transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
 -webkit-transform: translateY(-300%);
 -moz-transform: translateY(-300%);
 -o-transform: translateY(-300%);
 -ms-transform: translateY(-300%);
 transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
 -webkit-transform: translateY(-400%);
 -moz-transform: translateY(-400%);
 -o-transform: translateY(-400%);
 -ms-transform: translateY(-400%);
 transform: translateY(-400%);
}
/* Content elements */





.st-deco { width: 200px; height: 200px; position: absolute; top: 0px; left: 50%; margin-left: -100px; background: #fa96b5; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); }
[data-icon]:after { content: attr(data-icon); font-family: 'RaphaelIcons'; color: #fff; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 90px; top: 50%; left: 50%; margin: -100px 0 0 -100px; -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); transform: rotate(-45deg) translateY(25%); }
.st-panel h2 { color: #e23a6e; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; font-size: 54px; font-weight: 900; width: 80%; left: 10%; text-align: center; line-height: 50px; margin: -70px 0 0 0; padding: 0; top: 45%; -webkit-backface-visibility: hidden; }
 #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2 {
 -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
 animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown { 0% {
 -webkit-transform: translateY(-40px);
 opacity: 0;
}
 100% {
 -webkit-transform: translateY(0px);
 opacity: 1;
}
}
 @-moz-keyframes moveDown { 0% {
 -moz-transform: translateY(-40px);
 opacity: 0;
}
 100% {
 -moz-transform: translateY(0px);
 opacity: 1;
}
}
 @-o-keyframes moveDown { 0% {
 -o-transform: translateY(-40px);
 opacity: 0;
}
 100% {
 -o-transform: translateY(0px);
 opacity: 1;
}
}
 @-ms-keyframes moveDown { 0% {
 -ms-transform: translateY(-40px);
 opacity: 0;
}
 100% {
 -ms-transform: translateY(0px);
 opacity: 1;
}
}
 @keyframes moveDown { 0% {
 transform: translateY(-40px);
 opacity: 0;
}
 100% {
 transform: translateY(0px);
 opacity: 1;
}
}
.st-panel p { position: absolute; text-align: center; font-size: 16px; line-height: 22px; color: #8b8b8b; z-index: 2; padding: 0; width: 50%; left: 25%; top: 45%; margin: 10px 0 0 0; -webkit-backface-visibility: hidden; }
#st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p {
 -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
 animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
 @-webkit-keyframes moveUp { 0% {
 -webkit-transform: translateY(40px);
 opacity: 0;
}
 100% {
 -webkit-transform: translateY(0px);
 opacity: 1;
}
}
 @-moz-keyframes moveUp { 0% {
 -moz-transform: translateY(40px);
 opacity: 0;
}
 100% {
 -moz-transform: translateY(0px);
 opacity: 1;
}
}
 @-o-keyframes moveUp { 0% {
 -o-transform: translateY(40px);
 opacity: 0;
}
 100% {
 -o-transform: translateY(0px);
 opacity: 1;
}
}
 @-ms-keyframes moveUp { 0% {
 -ms-transform: translateY(40px);
 opacity: 0;
}
 100% {
 -ms-transform: translateY(0px);
 opacity: 1;
}
}
 @keyframes moveUp { 0% {
 transform: translateY(40px);
 opacity: 0;
}
 100% {
 transform: translateY(0px);
 opacity: 1;
}
}
/* Colored sections */
.sign_upnews { position: absolute; text-align: center; z-index: 2; padding: 0; width: 50%; left: 25%; top: 85%; }
.st-color, .st-deco { background: url(images/bg2.jpg) no-repeat; background-size:cover; }
.st-color [data-icon]:after { color: #fa96b5; }
.st-color .st-deco { background: #fff; }
.st-color h2 { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); }
.st-color p { color: #fff; color: rgba(255,255,255,0.8); }
 @media screen and (max-width: 520px) {
.st-panel h2 { font-size: 42px; }
.st-panel p { width: 90%; left: 5%; margin-top: 0; }
.st-container > a { font-size: 13px; }
}
@media screen and (max-width: 360px) {
.st-container > a { font-size: 10px; }
.st-deco { width: 120px; height: 120px; margin-left: -60px; }
[data-icon]:after { font-size: 60px; -webkit-transform: rotate(-45deg) translateY(15%); -moz-transform: rotate(-45deg) translateY(15%); -o-transform: rotate(-45deg) translateY(15%); -ms-transform: rotate(-45deg) translateY(15%); transform: rotate(-45deg) translateY(15%); }
}