@charset 'UTF-8';
.sequence-theme { background: #f08a00; }
#sequence, #sequence2 { font-size: .625em; position: relative; position: relative; overflow: hidden; width: 100%; max-width: 1280px; height: 573px; margin: 0 auto; margin: 0 auto; color: white; background-color: #ee7f00; }
#sequence2 { height: 532px; background-color: none; }
#sequence > .sequence-canvas, #sequence2 > .sequence-canvas { width: 100%; height: 100%; margin: 0; padding: 0; }
#sequence > .sequence-canvas > li, #sequence2 > .sequence-canvas > li { position: absolute; z-index: 1; top: -50%; width: 100%; height: 100%; }
#sequence > .sequence-canvas li > *, #sequence2 > .sequence-canvas li > * { position: absolute;    /* only cause the left and opacity properties to transition */ }
.sequence-next, .sequence-prev { font-weight: bold; position: absolute; z-index: 800; top: 50%; display: none; height: 75px; margin-top: -47.5px; padding: 10px 15px; cursor: pointer; color: white; }
.sequence-pause { position: absolute; z-index: 800; bottom: 0; cursor: pointer; }
.sequence-paused { opacity: .3; }
.sequence-prev { left: 3%; }
.sequence-next { right: 3%; }
.sequence-prev img, .sequence-next img { width: auto; height: 100%; }
#sequence-preloader { background: #d9d9d9; }
.sequence-pagination { position: absolute; z-index: 10; right: 6%; bottom: 1%; display: none; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; }
.sequence-pagination li { display: inline-block;    /* Hack for IE7 and below as they don't support inline-block */ height: 140px; *display: inline; }
.sequence-pagination li img { cursor: pointer; -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; opacity: .5; }
.sequence-pagination li img:hover { margin-bottom: 4px; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; }
.sequence-pagination li.current img { opacity: 1; }
.sequence-next, .sequence-prev { position: absolute; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; opacity: .6; }
.sequence-next:hover, .sequence-prev:hover { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; opacity: 1; }

/* DEMO 1 */
.check { -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); }
.check:hover { cursor: pointer; }
.sanieren { z-index: 5; top: 99%; left: 44%; width: 35px; height: auto; opacity: 0; }
.animate-in .sanieren { -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; opacity: 1; }
.animate-out .sanieren { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.animate-in .check { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.lackieren { z-index: 5; top: 101%; left: 68%; width: 35%; width: 55px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .lackieren { -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; }
.animate-out .lackieren { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.beschichten { z-index: 5; top: 119%; left: 21%; display: block; width: 35%; width: 44px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .beschichten { -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -ms-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 1; }
.animate-out .beschichten { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.reinigen { z-index: 5; top: 64%; left: 35%; width: 35%; width: 95px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .reinigen { -webkit-transition-delay: 1.9s; -moz-transition-delay: 1.9s; -ms-transition-delay: 1.9s; -o-transition-delay: 1.9s; transition-delay: 1.9s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 1; }
.animate-out .reinigen { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }

/* SLIDE 2 */
.packaging { z-index: 5; top: 120%; left: 43%; width: 35%; width: 95px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .packaging { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 1; }
.animate-out .packaging { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.display { z-index: 5; top: 81%; left: 55%; width: 35%; width: 45px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .display { -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -ms-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; }
.animate-out .display { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.logistik { z-index: 5; top: 102%; left: 32%; display: block; width: 35%; width: 58px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .logistik { -webkit-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 1; }
.animate-out .logistik { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.scanner { z-index: 5; top: 106%; left: 59%; width: 35%; width: 70px; height: auto; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
.animate-in .scanner { -webkit-transition-delay: 1.9s; -moz-transition-delay: 1.9s; -ms-transition-delay: 1.9s; -o-transition-delay: 1.9s; transition-delay: 1.9s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 1; }
.animate-out .scanner { left: 65%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.background_slider { position: relative; bottom: -50%; left: 40%; height: auto !important; opacity: 0; }
.animate-in .background_slider { left: 17%; -webkit-transition: left 1s, opacity 1s; -moz-transition: left 1s, opacity 1s; -ms-transition: left 1s, opacity 1s; -o-transition: left 1s, opacity 1s; transition: left 1s, opacity 1s; opacity: 1; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -ms-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }
.animate-out .background_slider { left: 15%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.targetBox { position: absolute; z-index: 9; display: none; overflow: visible; width: 100%; height: auto; border-radius: 15px; background: rgb(19, 49, 67); background: rgba(19, 49, 67, .9); }
.boxIcon { float: left; width: 50px; height: 50px; margin: 15px; border-radius: 12px; }
.targetBox span { font-family: 'Roboto'; font-size: 30px; font-weight: 700; display: block; margin-top: -3px; padding-left: 10px; text-transform: uppercase; color: #ec7404; }
.targetBox span.first { font-family: 'Roboto'; font-size: 18px; font-weight: normal; margin-top: 13px; }
.targetBox p { font-size: 14px; display: block; width: 95%; padding-left: 15px; color: white; }
.targetBox a { font-size: 18px; display: block; padding-bottom: 20px; padding-left: 15px; text-transform: uppercase; color: white; }
div#box1 { top: 100%; left: 67%; width: 280px; }
div#box2 { top: 96%; left: 44%; width: 320px; }
div#box3 { top: 68%; left: 36%; width: 270px; }
div#box4 { top: 117%; left: 22%; width: 320px; }
div#box5 { top: 125%; left: 43%; width: 475px; }
div#box6 { top: 80%; left: 54%; width: 390px; }
div#box7 { top: 108%; left: 59%; width: 300px; }
div#box8 { top: 102%; left: 31%; width: 590px; }
#sequence .machenwir, .scrollto { display: none; }

/* HOME  */
.background_slider2 { position: relative; top: 50%; bottom: -50%; left: 31%; width: 90%; max-width: 800px; height: auto !important; opacity: 0; }
.animate-in .background_slider2 { left: 31%; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; opacity: 1; }
.animate-out .background_slider2 { left: 31%; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; transition-duration: .6s; opacity: 0; }
.background_slider3 { position: relative; top: 53%; bottom: -50%; left: 34%; width: 90%; max-width: 800px; height: auto !important; opacity: 0; }
.animate-in .background_slider3 { left: 34%; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; opacity: 1; }
.animate-out .background_slider3 { left: 34%; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; transition-duration: .6s; opacity: 0; }
a.headline, span.headline { font-family: 'Roboto', Arial, sans-serif; font-size: 1.3em; font-weight: 700; line-height: 1em; position: absolute; z-index: 9; top: 117%; left: 12.5%; text-transform: uppercase; opacity: 0; color: #08394c; }
.animate-in a.headline, .animate-in span.headline { left: 12.5%; -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; opacity: 1; }
.animate-out a.headline, .animate-out span.headline { left: 12.5%; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; opacity: 0; }
.machenwir { position: absolute; z-index: 996; top: 129%; left: 50%; -webkit-transition-delay: 1.2s; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; opacity: 0; color: white; }
.animate-in .machenwir { left: 12.5%; -o-transition-delay: 1.2s; transition-delay: 1.2s; opacity: 1; }
.animate-out .machenwir { left: 50%; -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 0; }
.machenwir span { font-family: 'Roboto', Arial, sans-serif; font-size: 1.3em; font-weight: 700; display: block; float: left; margin-left: -8%; text-transform: uppercase; color: #fff; }
.machenwir .check2 { float: left; height: auto; }
a.coverlink { top: 50%; display: block; width: 100%; height: 100%; opacity: 0; }
@media screen and (max-width:1100px) {
  .background_slider2, .background_slider3 { max-width: 680px; }
  .background_slider { max-width: 840px; }
  .animate-in .background_slider { left: 12%; }
}
@media screen and (max-width:900px) {
  #sequence, #sequence2 { height: 414px; }
  .background_slider { max-width: 630px; }
  .background_slider2, .background_slider3 { max-width: 470px; }
  span.headline, a.headline { top: 114%; }
  .background_slider { position: relative; top: 60%; left: 80%; max-width: 530px; height: auto !important; opacity: 0; }
  .animate-in .background_slider { left: 39%; }
  .showBox, .targetBox { display: none !important; }
  .scrollto { position: relative; z-index: 997; display: block; margin-top: -35px; padding-bottom: 20px; padding-left: 10%; }
  .scrollto a img, .scrollto a.span { float: left; }
  .scrollto span { padding-left: 5px; }
  .scrollto a img { width: 30px; }
  .scrollto a { font-family: 'Roboto', Arial, sans-serif; display: block; padding: 5px 0; text-transform: uppercase; color: #fff; }
  .scrollto a:hover { color: #08394c; }
  .scrollto a:hover svg { fill: #08394c; }
  #sequence .machenwir { top: 120%; display: block; -webkit-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; }
  #sequence .machenwir span { font-size: 2em; }
  #sequence .animate-in .machenwir { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; }
  .scrollto .fade1 { -webkit-animation-delay: .8s; -o-animation-delay: .8s; animation-delay: .8s; }
  .scrollto .fade2 { -webkit-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; }
  .scrollto .fade3 { -webkit-animation-delay: 1.6s; -o-animation-delay: 1.6s; animation-delay: 1.6s; }
  .scrollto .fade4 { -webkit-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; }
  .scrollto .float { font-size: .6em; width: 49%; margin-right: 10px; }
  .scrollto .float:first-child, .scrollto .float:nth-child(2n+1) { width: 35%; }
  .machenwir .check2 { width: 23%; }
  .machenwir { left: 2%; }
  .page-id-4 .machenwir { left: 40%; }
  .animate-in span.headline, span.headline, .animate-in .machenwir, .animate-out span.headline, .animate-in a.headline, a.headline, .animate-out a.headline { left: 2%; }
  .sequence-next, .sequence-prev { display: none !important; }
  .machenwir span { margin-left: -6%; }
}
@media screen and (max-width:730px) {
  .scrollto { padding-left: 2%; }
}
@media screen and (max-width:600px) {
  .background_slider2, .background_slider3 { max-width: 240px; }
  a.mobile { display: block; }
  .machenwir span { margin-left: -15px; }
  span.headline, a.headline { top: 107%; }
  #sequence2 { height: 220px; }
  #sequence { height: 300px; }
  .scrollto { margin-top: -15px; padding-left: 70px; }
  .scrollto .float { font-size: .8em; width: 100%; }
  .scrollto .float:first-child, .scrollto .float:nth-child(2n+1) { width: 100%; }
  .background_slider { top: 50%; max-width: 380px; }
  .animate-in .background_slider { left: 29%; }
}
@media screen and (max-width:500px) {
  .background_slider { left: 7%; max-width: 350px; }
  .animate-in .background_slider { left: 7%; max-width: 350px; }
}