/*
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;
  position: absolute;
	top: 2%;
	width: 100%; height: 100%;
	padding: 0% 0%;
	margin: 0 0;
	z-index:2;
}

smal {
  font-size: 1.5em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: #3272B8; 
  opacity:0.6; 
}

div#Top {
    font-size: 1.5em;
    float: center; 
	vertical-align: center;
	/*background:url(../images/bg-top.gif) repeat-x left top;*/
	width: 100%; 
	height: 3%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 0 0;
	margin: 0 0;
 /*   background-color: #181818;*/
    font-family: arial black, sans-serif;color: #3272B8; 
	text-align:right;
	z-index:1;	
  }
  

ul {
  list-style: none;
}

ol {
  list-style: circle;
  padding-left: 0.6em; margin-left: 0.6em;
}
/*  ul.char { list-style-type:none;}
 ul.char li:before { content: "\25BA" " "; color:green; font-size:smaller;}
ul { padding-left: 0.6em; margin-left: 0.6em; }
 */  

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

@font-face {
font-family: 'ORCAjp';
  src: url('ocra-webfont.eot');
  src: url('ocra-webfont.eot?#iefix') format('embedded-opentype'),
       url('ocra-webfont.woff') format('woff'),
       url('ocra-webfont.ttf') format('truetype'),
       url('ocra-webfont.svg#DroidSansRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
#sequence.sequence-theme {
  /* this container is just to ensure the background color stretches all the way across on bigger screens */
  background: white;
}

#sequence {
  position: relative;
  min-height: 680px;
  max-width: 1400px;
  min-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  /*background: url(../images/bg-sky.png) repeat-x #65b7f1;*/
  color: white;
  color: #3272B8;
  font-family: "ORCAjp", sans-serif;
}

 
#sequence h1 {
  font-size: 1.5em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: #3272B8; 
}

 
#sequence h2 {
  font-size: 1.5em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: black; 
  white-space: pre;
}

#sequence h3 {
font-size: 1.5em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: #3272B8; 
  /*background-color:#C3E0EF; */
}

#sequence h4 {
  font-size: 2.1em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: #3272B8; 
}

#sequence a {
  font-size: 1.5em;
  line-height: 1.2em;
  font-family: arial black, sans-serif;color: #3272B8; 
  text-decoration:none;
  opacity: 0.6;
}
#sequence p {
	text-align: justify;
}	

#sequence a:hover {
background-color:gray; 
} 

#sequence h2:first-letter { 
  font-size: 2.5em;
  color: #3272B8;
 }

#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: 580px;
  height: 41px;
  width: 39px;
  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: 4px;
}
#sequence .sequence-next {
  right: 4px;
}
#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 .sequence-pagination {
  top: 2%;
  display: inline-block;
  *display: inline;
  position: absolute;
  z-index: 20;
  right: 6%;
  width: 50%;
 /* font-size: 1em;
  line-height: 1.2em;
*/
 
	text-align:right; 
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
#sequence .sequence-pagination li {
  display: inline-block;
  *display: inline;
  /* Hack for IE7 and below as they don't support inline-block */
  /*height: 140px;*/
}
#sequence .sequence-pagination li {
  cursor: pointer;
  opacity: 0.6;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: margin-bottom, opacity;
  -moz-transition-property: margin-bottom, opacity;
  -ms-transition-property: margin-bottom, opacity;
  -o-transition-property: margin-bottom, opacity;
  transition-property: margin-bottom, opacity;
}
#sequence .sequence-pagination li :hover {
  margin-bottom: 0px;
  background-color: gray;
  color: #3272B8;
  opacity: 1;
  -webkit-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  -moz-transition-property:  opacity;
  -ms-transition-property:  opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
#sequence .sequence-pagination li.current {
  opacity: 1;
}
/*
 #sequence .sequence-pagination {
    top: 0;
  }
 
 #sequence .sequence-pagination li img {
    height: 100px;
  }*/

 
#sequence .logo,
#sequence .logo2 {
  max-width: 15%;
  /*width: 6%;*/
  height: auto;
  right: 14%;
  top: 20%;
  opacity: 0;
  vertical-align: middle;
  z-index: 19;
   -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}
#sequence .logo
 {
  max-width: 15%;
  /*width: 6%;*/
  height: auto;
  left: 4%;
  top: 20%;
  opacity: 0;
  vertical-align: middle;
  z-index: 19;
   -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}

#sequence .animate-in .logo,
#sequence .animate-in .logo2 {
  opacity: 0.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 .animate-in .logo2 {
  opacity: 1;
  }
  
#sequence .animate-out .logo,
#sequence .animate-out .logo2 {
  opacity: 0;
 -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
 
#sequence .logo2 {
  max-width: 5%;
  /*width: 6%;*/
  height: auto;
  right: 0%;
  opacity: 0.99;
  top: 2.5%;
  vertical-align: middle;
  z-index: 19; 
}
 
#sequence .slogan,
#sequence .slogan2
{
  color: #3272B8;
  opacity: 0;
top: 75%;
  left: 55%;
  max-width: 32%;
  z-index: 20;
  vertical-align: left;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-property: right top, opacity;
  -moz-transition-property: right top, opacity;
  -ms-transition-property: right top, opacity;
  -o-transition-property: right top, opacity;
  transition-property: right top, opacity;
}

#sequence .animate-in .slogan,
#sequence .animate-in .slogan2 {
  opacity: 1;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}

#sequence .animate-out .slogan,
#sequence .animate-out .slogan2 {
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

#sequence .slogan2 {
  top: 2%;
  left: 5%;
  z-index: 20;
}
 
#sequence .mmenue {
  color: #3272B8;
  opacity: 0;
  right: 86%;
  top: 7.5%;
  width: 20%;
  z-index: 20;
  vertical-align: right;
  text-align: right; 
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-property: right top, opacity;
  -moz-transition-property: right top, opacity;
  -ms-transition-property: right top, opacity;
  -o-transition-property: right top, opacity;
  transition-property: right top, opacity;
}

#sequence .animate-in .mmenue {
  top: 7.5%;
  right: 86%;
  opacity: 0.61;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .animate-out .mmenue {
  top: 7.5%;
  right: 86%;
  opacity: 0.6;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
} 

#sequence .mmenu :hover {
  margin-bottom: 0px;
  background-color: gray;
  color: #3272B8;
  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.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  -moz-transition-property:  opacity;
  -ms-transition-property:  opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

#sequence .info1,
#sequence .info2,
#sequence .info3,
#sequence .info4, 
#sequence .info5,
#sequence .kop1,
#sequence .kop2,
#sequence .kop3,
#sequence .mod1,
#sequence .mod2,
#sequence .mod3 {


  color: black;
  opacity: 0;
  font-size: 0.8em;
  left: 5%;
  line-height: 1em;
  top: 10%;
  max-width: 29%;
  z-index: 10;
  vertical-align: top;
  text-align: justify;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-property: right, opacity;
  -moz-transition-property: right, opacity;
  -ms-transition-property: right, opacity;
  -o-transition-property: right, opacity;
  transition-property: right, opacity;
}

#sequence .info2 {
  left: 50%;
  top: 20%;
  max-width: 16%;
}

#sequence .info3 {

  left: 62%;
  top: 22%;
  font-size: 1.0em;
  line-height: 1.2em;
}

#sequence .info4 {
  left: 5%;
  top: 51%;
  font-size: 1.0em;
  line-height: 1.2em;
}

#sequence .info5 {
max-width: 25%;
top: 55%;
}

#sequence .mod1 {
max-width: 17%;
top: 49%;
left: 17%;
z-index: 8;
}
#sequence .mod2 {
max-width: 12%;
top: 45%;
left: 25%;
z-index: 8;
}
#sequence .mod3 {
max-width: 13%;
top: 49%;
left: 17%;
z-index: 8;
}
#sequence .kop1 {
max-width: 9%;
top: 38%;
left: 7%;
z-index: 8;
}
#sequence .kop2 {
max-width: 9%;
top: 30%;
left: 11%;
z-index: 8;
}
#sequence .kop3 {
max-width: 8%;
top: 38%;
left: 9%;
z-index: 8;
}

#sequence .animate-in .info1,
#sequence .animate-in .info2,
#sequence .animate-in .info3,
#sequence .animate-in .info4,
#sequence .animate-in .info5,
#sequence .animate-in .kop1,
#sequence .animate-in .kop2,
#sequence .animate-in .kop3,
#sequence .animate-in .kop3,
#sequence .animate-in .mod1,
#sequence .animate-in .mod2,
#sequence .animate-in .mod3 {
  opacity: 1;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .animate-in .mod1,
#sequence .animate-in .mod2,
#sequence .animate-in .mod3 {
 opacity: 0.65;
}
#sequence .animate-in .kop2 {
 opacity: 0.45;
}
#sequence .animate-out .info1,
#sequence .animate-out .info2,
#sequence .animate-out .info3,
#sequence .animate-out .info4,
#sequence .animate-out .info5,
#sequence .animate-out .kop1,
#sequence .animate-out .kop2,
#sequence .animate-out .kop3,
#sequence .animate-out .mod1,
#sequence .animate-out .mod2,
#sequence .animate-out .mod3 {
  opacity: 0;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}
#sequence .eos,
#sequence .B1, 
#sequence .B2, 
#sequence .B3 {
opacity: 0;
  right: 5.5%;
  top: 0%;
  max-width: 75%;
  z-index: 6;
   -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}
#sequence .eos {
max-width: 75%;
}
#sequence .B1,
#sequence .B2,
#sequence .B3 {
max-width: 50%; /* vorher 60% mit bildbreite 1250 pixeln */
}
#sequence .animate-in .eos,
#sequence .animate-in .B1,
#sequence .animate-in .B2,
#sequence .animate-in .B3 {
opacity: 0.70;
  top: 0%;
  -webkit-transition-duration: 1.3s;
  -moz-transition-duration: 1.3s;
  -ms-transition-duration: 1.3s;
  -o-transition-duration: 1.3s;
  transition-duration: 1.3s; 
  z-index: 4;
}
#sequence .animate-out .eos,
#sequence .animate-out .B1,
#sequence .animate-out .B2,
#sequence .animate-out .B3 {
opacity: 0;
   top: 0%;
  z-index: 2;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .phone0,
#sequence .phone_i,
#sequence .phone1,
#sequence .phone2,
#sequence .phone3,
#sequence .ARP0,
#sequence .ARP0a,
#sequence .ARP_i,
#sequence .ARP_ia,
#sequence .ARP1,
#sequence .ARP1a,
#sequence .ARP2,
#sequence .ARP2a,
#sequence .ARP3,
#sequence .ARP3a {
opacity: 0;
text-align: center;
  left: 8%;
  top: 10%;
  /*height: 130%;  
  width: auto;*/
  max-width: 35%;
  z-index: 10;
   -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
 -webkit-transition-property: left top, opacity;
  -moz-transition-property: left top, opacity;
  -ms-transition-property: left top, opacity;
  -o-transition-property: left top, opacity;
  transition-property: left top, opacity;
}

#sequence .animate-in .phone0,
#sequence .animate-in .phone_i,
#sequence .animate-in .phone1,
#sequence .animate-in .phone2,
#sequence .animate-in .phone3,
#sequence .animate-in .ARP0,
#sequence .animate-in .ARP0a,
#sequence .animate-in .ARP_i,
#sequence .animate-in .ARP_ia,
#sequence .animate-in .ARP1,
#sequence .animate-in .ARP1a,
#sequence .animate-in .ARP2,
#sequence .animate-in .ARP2a,
#sequence .animate-in .ARP3,
#sequence .animate-in .ARP3a {
opacity: 1.0;
  left: 16%;
  top: 16%;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  z-index: 10;
 -webkit-transition-property: left top, opacity;
  -moz-transition-property: left top, opacity;
  -ms-transition-property: left top, opacity;
  -o-transition-property: left top, opacity;
  transition-property: left top, opacity;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}

  
#sequence .animate-out .phone0,
#sequence .animate-out .phone_i,
#sequence .animate-out .phone1,
#sequence .animate-out .phone2,
#sequence .animate-out .phone3,
#sequence .animate-out .ARP0,
#sequence .animate-out .ARP0a,
#sequence .animate-out .ARPi,
#sequence .animate-out .ARP_ia,
#sequence .animate-out .ARP1,
#sequence .animate-out .ARP1a,
#sequence .animate-out .ARP2,
#sequence .animate-out .ARP2a,
#sequence .animate-out .ARP3,
#sequence .animate-out .ARP3a {
opacity: 0;
  left: 19%;
  top: 21%;
  z-index: 10;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
#sequence .ARP0a {
/* muss gleiche daten haben wie arp0 bei animate-in*/
 left: 16%;
  top: 16%;
   -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
#sequence .animate-in .ARP0a {
 -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
-webkit-transition-delay: 2.8s;
  -moz-transition-delay: 2.8s;
  -ms-transition-delay: 2.8s;
  -o-transition-delay: 2.8s;
  transition-delay: 2.8s;
}


#sequence .phone_i,
#sequence .ARP_i,
#sequence .ARP_ia {
left: 31%;
  top: 42%;
   max-width: 21%;
 }
#sequence .ARP_ia {
/* muss gleiche daten haben wie arp_i bei animate-in*/
  left: 35%;
  top: 48%;
}  
#sequence .animate-in .phone_i,
#sequence .animate-in .ARP_i,
#sequence .animate-in .ARP_ia {
  left: 35%;
  top: 48%;
}
#sequence .animate-out .phone_i,
#sequence .animate-out .ARP_i,
#sequence .animate-out .ARP_ia {
  left: 38%;
  top: 52%;
}
#sequence .animate-in .ARP_ia {
 -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
-webkit-transition-delay: 2.5s;
  -moz-transition-delay: 2.5s;
  -ms-transition-delay: 2.5s;
  -o-transition-delay: 2.5s;
  transition-delay: 2.5s;
}

#sequence .phone1,
#sequence .ARP1 {
left: 33%;
top: 35%;
max-width: 30%;
}
#sequence .ARP1a {
/* muss gleiche daten haben wie arp1 bei animate-in*/
  left: 41%;
  top: 40%;
  max-width: 30%;
} 
#sequence .animate-in .phone1,
#sequence .animate-in .ARP1,
#sequence .animate-in .ARP1a {
  left: 41%;
  top: 40%;
}
#sequence .animate-in .ARP1a {
 -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
-webkit-transition-delay: 2.5s;
  -moz-transition-delay: 2.5s;
  -ms-transition-delay: 2.5s;
  -o-transition-delay: 2.5s;
  transition-delay: 2.5s;
}

#sequence .animate-out .phone1,
#sequence .animate-out .ARP1, 
#sequence .animate-out .ARP1a {
  left: 44%;
  top: 45%;
}

#sequence .phone3,
#sequence .ARP3 {
left: 33%;
top: 35%;
max-width: 30%;
}
#sequence .ARP3a {
/* muss gleiche daten haben wie arp1 bei animate-in*/
  left: 41%;
  top: 40%;
  max-width: 30%;
     -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
} 
#sequence .animate-in .phone3,
#sequence .animate-in .ARP3,
#sequence .animate-in .ARP3a {
  left: 41%;
  top: 40%;
     -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
#sequence .animate-in .ARP3a {
 -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
-webkit-transition-delay: 2.5s;
  -moz-transition-delay: 2.5s;
  -ms-transition-delay: 2.5s;
  -o-transition-delay: 2.5s;
  transition-delay: 2.5s;
}

#sequence .animate-out .phone3,
#sequence .animate-out .ARP3, 
#sequence .animate-out .ARP3a {
  left: 44%;
  top: 45%;
}
/*---------------------*/
#sequence .phone2,
#sequence .ARP2 {
left: 42%;
top: 37%;
max-width: 29%;
}
#sequence .ARP2a {
/* muss gleiche daten haben wie arp2 bei animate-in*/
  left: 47.3%;
  top: 39.5%;
  max-width: 29%;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
} 
#sequence .animate-in .phone2,
#sequence .animate-in .ARP2,
#sequence .animate-in .ARP2a {
-webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
  left: 47%;
  top: 39%;
}
#sequence .animate-in .ARP2,
#sequence .animate-in .ARP2a {
  left: 47.3%;
  top: 39.5%;
}
#sequence .animate-in .ARP2a {
 -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
-webkit-transition-delay: 2.5s;
  -moz-transition-delay: 2.5s;
  -ms-transition-delay: 2.5s;
  -o-transition-delay: 2.5s;
  transition-delay: 2.5s;
}

#sequence .animate-out .phone2,
#sequence .animate-out .ARP2, 
#sequence .animate-out .ARP2a {
  left: 49%;
  top: 43%;
}
_____________________

#sequence .ARP0,
#sequence .ARP1,
#sequence .ARP2,
#sequence .ARP3{
  z-index: 8;
}
#sequence .animate-in .ARP0,
#sequence .animate-in .ARP1,
#sequence .animate-in .ARP2,
#sequence .animate-in .ARP3 {
  z-index: 8;
}
#sequence .animate-out .ARP0,
#sequence .animate-out .ARP1,
#sequence .animate-out .ARP2,
#sequence .animate-out .ARP3 {
  z-index: 8;
  }
#sequence .ARP0a,
#sequence .ARP1a,
#sequence .ARP2a,
#sequence .ARP3a{
  z-index: 9;
}
#sequence .animate-in .ARP0a,
#sequence .animate-in .ARP1a,
#sequence .animate-in .ARP2a,
#sequence .animate-in .ARP3a {
  z-index: 9;
}
#sequence .animate-out .ARP0a,
#sequence .animate-out .ARP1a,
#sequence .animate-out .ARP2a,
#sequence .animate-out .ARP3a {
  z-index: 9;
  }

#sequence .tex1,
#sequence .tex2, 
#sequence .real,
#sequence .real2,  
#sequence .laptop, 
#sequence .lines,
#sequence .line {
  opacity: 0;
  left: 13%;
  max-width: 10%;
  top: 25%;
  z-index: 6;
 -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}


#sequence .tex1 {
font-size: 1.0em;
  line-height: 1.2em; 
 left: 23.5%;
  top: 23.0%;
  max-width: 25%;
}
#sequence .tex2 {
font-size: 0.7em;
  line-height: 1.2em; 
  left: 6.5%;
  top: 46.5%;
  max-width: 29%;
}

#sequence .real2 {
 left: 55%;
  max-width: 5%;
  top: 55%;
 }

#sequence .laptop {
 left: 22%;
  max-width: 20%;
  top: 42%;
 }
 
 #sequence .lines {
 left: 11%;
  max-width: 20%;
  top: 39%;
  z-index: 5;
 }

  #sequence .line {
 left: 15%;
  max-width: 38%;
  top: 77%;
  z-index: 5;
 }
#sequence .animate-in .tex1,
#sequence .animate-in .tex2,
#sequence .animate-in .real,
#sequence .animate-in .real2,
#sequence .animate-in .laptop, 
#sequence .animate-in .lines,
#sequence .animate-in .line { 
  opacity: 1;
   -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}
#sequence .animate-out .tex1,
#sequence .animate-out .tex2,
#sequence .animate-out .real, 
#sequence .animate-out .real2, 
#sequence .animate-out .laptop,
#sequence .animate-out .lines,
#sequence .animate-out .line {
  opacity: 0;
   -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}

#sequence .sequence-fallback .animate-in .tex1 {
  left: 20%;
  top: 200px;
}