.backToTop { display: none; position: fixed; bottom: 0; right: 0; color: #fff; background-color: #3A8100; padding: 1rem 2rem; }.backToTop:hover { color: #fff; text-shadow: 0 0 2px #fff; }.backToTop--visible { display: block; }.no-script { width: 100%; height: 100%; z-index: 11; position: absolute; top: 0; left: 0; background: #5AB70D; font-size: 1.15em; color: #fff; width: 100%; text-align: center; } @media screen and (max-width: 1154px) { .no-script { top: 100px; } } .no-script p { margin: 5px; } .no-script p:first-child { margin: 1em; }@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url(/assets/fonts/SourceSansPro-Regular.ttf) format("truetype"); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"), url(/assets/fonts/SourceSansPro-Semibold.ttf) format("truetype"); } body { margin: 0; line-height: normal; }body, h1, h2, h3, h4, h5, h6 { font-family: 'Source Sans Pro', sans-serif; text-rendering: optimizeLegibility; }.textShadow { text-shadow: 1px 1px 2px #444; }.darkBlur { color: #ffffff; text-shadow: 0px 0px 5px #000; background: rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 10px 15px rgba(50, 50, 50, 0.4); }.lightBlur { color: #fff; text-shadow: 1px 1px 2px #444; background: rgba(237, 237, 237, 0.2); box-shadow: 0px 0px 15px 15px rgba(237, 237, 237, 0.2); }.text--primary { color: #54ab0b; }.button { background-image: none; -webkit-tab-highlight-color: transparent; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: none; display: inline-block; width: auto; height: 50px; line-height: 50px; padding: 0 15px; text-decoration: none; background: rgba(60, 60, 60, 0.1); color: #000; border: 1px solid #ccc; box-sizing: border-box; }.button:hover { color: #000; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.18); }.button--business { color: #FFFFFF; background: #013C4C; border: 0; }.button--business:hover { color: #FFFFFF; box-shadow: none; }.button:active { box-shadow: inset 2px 2px 1px rgba(0, 0, 0, 0.18); }.button--green { background: #52a01a; }.button--primary { background: #5AB70D; }.button--green, .button--primary, .button--green:hover, .button--primary:hover { color: #fff; }.button--more { border: none; }.button--noBorder { border: none; }.button--radius { border-radius: 3px; }.button--block { display: block; width: 100%; margin: 1em 0; }.button--center { text-align: center; }.button--landing { color: #fff; }.button--landing:hover { color: #fff; box-shadow: none; }.button--shareButton--fb, .button--shareButton--tw, .button--shareButton--gp, .button--shareButton--rd { color: #ffffff !important; }.button--shareButton--fb { background: #3b5998; } .button--shareButton--fb:hover { background: rgba(59, 89, 152, 0.95); }.button--shareButton--tw { background: #00aced; } .button--shareButton--tw:hover { background: rgba(0, 172, 237, 0.92); }.button--shareButton--gp { background: #dd4b39; } .button--shareButton--gp:hover { background: rgba(221, 75, 57, 0.95); }.button--shareButton--rd { background: orangered; } .button--shareButton--rd:hover { background: rgba(255, 69, 0, 0.92); }.button--paypal { background: #009cde; color: #fff; } .button--paypal:hover, .button--paypal:active, .button--paypal:focus { color: #fff; }.landing-section { position: relative; display: table; display: flex; float: left; width: 100%; min-height: 50vh; padding: 4rem 2rem; background-color: #5AB70D; color: #ffffff; box-sizing: border-box; text-align: center; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: 2s background-image ease-in-out; box-sizing: border-box; } @media screen and (max-width: 1154px) { .landing-section { padding: 4rem 0; } }.landing-section:nth-child(2n):not(.heading) { background-color: #fff; color: #222; } .landing-section:nth-child(2n):not(.heading) .textShadow { text-shadow: 1px 1px 2px #aaa; }.landing-section--background { background-image: url("/assets/images/private_landing_lowQual_big.jpg"); background-color: #ffffff; }.landing-section--background2 { background-color: #ebeced; background-size: 100% auto; background-position: center 50vh !important; } @media screen and (min-width: 1780px) { .landing-section--background2 { background-position: center 450px !important; } } @media screen and (max-width: 1154px) { .landing-section--background2 { background-position: center bottom !important; min-height: 0 !important; padding-bottom: 500px !important; } } @media screen and (max-width: 670px) { .landing-section--background2 { padding-bottom: 350px !important; } } @media screen and (max-width: 670px) and (orientation: landscape) { .landing-section--background2 { min-height: calc(100vh + 500px) !important; } }.landing-section--background2-de { background-image: url("/assets/images/app-release-de.jpg"); }.landing-section--background2-en { background-image: url("/assets/images/app-release-en.jpg"); }.landing-section--background--night { background-image: url("/assets/images/lighthouse_night.jpg"); background-color: #555; }.landing-section--inner { max-width: 1280px; width: 100%; margin: auto; display: table-cell; vertical-align: middle; }.landing-section--realInner { display: table; width: 100%; margin: 0; }.heading .section-header { width: 100%; }.heading { height: auto; min-height: 100vh; padding-bottom: 0; background-position: center center; overflow: visible; } @media screen and (min-width: 1155px) { .heading { padding: 50px 25px 200px; } } @media screen and (max-width: 1154px) { .heading { min-height: 100vh; padding-top: 62px; } }@media screen and (min-width: 1155px) { .heading { padding-top: 50px; } }.section-header, .section-paragraph { display: block; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1155px) { .section-header, .section-paragraph { width: 600px; } } @media screen and (max-width: 1154px) { .section-header, .section-paragraph { width: 90%; max-width: 600px; } }.section-header { margin-top: 0; margin-bottom: 2rem; box-sizing: border-box; } @media screen and (min-width: 1155px) { .section-header { font-size: 3em; font-weight: 600; line-height: 120%; } } @media screen and (max-width: 1154px) { .section-header { font-size: 2em; font-weight: 600; line-height: 120%; } }.section-header { letter-spacing: -2px; width: auto; } @media screen and (min-width: 1155px) { .section-header { font-size: 4rem; } } @media screen and (max-width: 1154px) { .section-header { font-size: 3rem; } }.section-header--large { max-width: 85% !important; }.section-paragraph { padding-bottom: 2rem; margin-top: 1rem; margin-bottom: 1rem; } @media screen and (min-width: 1155px) { .section-paragraph { font-size: 1.5em; font-weight: 200; line-height: 120%; } } @media screen and (max-width: 1154px) { .section-paragraph { font-size: 1.3em; font-weight: 400; line-height: 120%; } }@media screen and (max-width: 1154px) { .heading .section-header { max-width: 300px; } }.heading .section-paragraph { margin-top: -16px; margin-bottom: 1.5rem; padding-bottom: 0; } @media screen and (max-width: 1154px) { .heading .section-paragraph { margin-top: -20px; margin-bottom: 1.7rem; } }.section-ul { max-width: 760px; margin: 0 auto 2rem; padding-top: 1rem; padding-bottom: 1rem; } @media screen and (max-width: 1154px) { .section-ul { width: 80%; } }.fa-ul { padding-left: 2.14285714em; margin-left: auto; box-sizing: border-box; }.fa-li { line-height: 45px; font-size: 1.6rem; }.section-li { display: block; width: 100%; padding: 10px; text-align: left; font-size: 1.5em; font-weight: 200; box-sizing: border-box; }.section-header--noTopMargin { margin-top: 0px; }.landing-section-icon { width: 25%; }.landing-section-text { width: 75%; }.landing-section-icon, .landing-section-text { position: relative; display: table-cell; vertical-align: middle; } @media screen and (max-width: 670px) { .landing-section-icon, .landing-section-text { width: 100%; display: block; } }.landing-section-icon--hideDesktop { display: none; } @media screen and (max-width: 670px) { .landing-section-icon--hideDesktop { display: block; } }@media screen and (max-width: 670px) { .landing-section-icon--hideMobile { display: none; } }.landing-section-escape { width: 100%; float: left; }.landing-section--fullScreen { height: 100vh; padding-bottom: 1rem; } @media screen and (max-width: 1154px) { .landing-section--fullScreen { min-height: 100vh; } }.section-next { display: block; position: absolute; margin: -15px auto 0; width: 150px; height: 55px; padding: 11px 10px 10px; left: calc(50% - 75px); bottom: 25px; color: #fff; border: none; box-sizing: border-box; transition: 0.3s background ease; }.section-next:hover { color: #ffffff; background: rgba(60, 60, 60, 0.25); }.fa-section-next { display: block; margin-top: 2px; }@media screen and (min-width: 1155px) { .helper-showMobile { display: none !important; visibility: hidden !important; } }@media screen and (max-width: 1154px) { .helper-hideMobile { display: none !important; visibility: hidden !important; } }.fa-xxl { font-size: 15em; vertical-align: middle; } @media screen and (max-width: 670px) { .fa-xxl { font-size: 5em; } }.fa-xl { font-size: 8em; }.fa-l { font-size: 5em; }.fa-middle { vertical-align: middle; }.fa-bottom { vertical-align: bottom; }.header { background: #5AB70D; border: none; font-family: ubuntulight, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; }.contentFallBack { height: 100vh; width: 100%; border: 0; }@media screen and (max-width: 1154px) { .header-inner { padding: 0 50px; box-sizing: border-box; text-align: center; } }@media screen and (max-width: 1154px) { .header-brand { display: inline-block; float: none; width: none; margin: 0; text-align: center; } }.globalNotificationWrap { display: none; }.globalNotificationWrap--visible { display: block; }#globalNotification { display: block; position: fixed; z-index: 9; top: 50px; left: 0; width: 100%; line-height: 30px; background: rgba(30, 30, 30, 0.9); color: #ffffff; border-bottom: 1px solid rgba(10, 10, 10, 0.9); text-align: center; }#globalNotification a { color: #ffffff; border-bottom: 1px dotted #ffffff; }#globalNotification a:hover { border-bottom-style: solid; }#globalNotificationSpace { display: block; position: relative; width: 100%; height: 30px; }.landing-registerFrame { display: block; width: 98%; margin: 1em auto 0; max-width: 450px; height: 300px; border: none; } @media (max-width: 395px) { .landing-registerFrame { height: 318px; } }.heading { padding-bottom: 0; }.heading .landing-registerFrame { padding-bottom: 32px; } @media screen and (max-width: 1154px) { .heading .landing-registerFrame { padding-bottom: 16px; } }.landing-section__logo { width: 502px; max-width: 80%; } @media screen and (min-width: 1155px) { .landing-section__logo { margin: 6em auto 2em; } }.landing-section__appstore { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; color: #788286; text-transform: uppercase; }.landing-section__appstore__icon:first-child { margin-right: 11px; } .landing-section__appstore__icon:last-child { margin-left: 11px; } .landing-section__appstore__icon:first-child:last-child { margin: 0; }#countdown__counter { min-height: 76px; }.counter__digit { display: inline-block; line-height: 36px; }.digit { display: inline-block; width: 100%; }#counter__days { width: 76px; } @media screen and (max-width: 1154px) { #counter__days { width: 100%; margin-bottom: 10px; } }#counter__hours { width: 90px; }#counter__minutes { width: 83px; }#counter__seconds { width: 103px; }.digit-description { display: inline-block; width: 100%; text-align: center; font-size: 16px; letter-spacing: 0px; font-weight: 300; text-transform: uppercase; }.landing-section-video { display: block; position: relative; width: 98%; margin: 0 auto; margin-bottom: 1.5rem; max-width: 300px; cursor: pointer; }.landing-section-video-image { width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.7); }.landing-section-video-icon-wrap { position: absolute; top: calc(50% - 2.5em); left: calc(50% - 2.5em); background-color: rgba(90, 183, 13, 0.9); height: 5em; width: 5em; line-height: 5em; border-radius: 100%; text-align: center; }.landing-section-video-icon { display: inline-block; vertical-align: middle; padding-left: 8px; transition: .6s text-shadow ease; transform: translate3d(0, 0, 0); }.landing-section-video:hover .landing-section-video-icon { text-shadow: 1px 1px 2px #444; }.landing-section--footer { min-height: 76px; padding: 1rem 8rem 1rem 1rem; background: #ffffff; color: #000000; text-align: left; border-top: 1rem solid #5AB70D; } @media screen and (max-width: 1154px) { .landing-section--footer { padding: 1rem 6rem 1rem 0.5rem; } } .landing-section--footer:after { content: " "; background: #5AB70D; width: 88px; height: 100%; position: absolute; top: 0; right: 0; }@media screen and (min-width: 1155px) { .landing-footer-left, .landing-footer-right { display: inline-block; float: left; } } @media screen and (max-width: 1154px) { .landing-footer-left, .landing-footer-right { display: inline-block; width: 100%; line-height: 1.5em; font-size: 1.2em; } }@media screen and (min-width: 1155px) { .landing-footer-right { text-align: right; float: right; padding: 0 1em; } }.landing-footer-link { white-space: nowrap; } @media screen and (min-width: 1155px) { .landing-footer-link { padding: 0 0.5em; } }.legal-stuff { position: absolute; bottom: 0; left: 0; width: 100%; } .legal-stuff small { color: #FFFFFF; }.video-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; background: rgba(0, 0, 0, 0.7); }#video-overlay-close { position: absolute; top: -35px; right: -35px; width: 30px; height: 30px; line-height: 30px; text-align: center; padding-right: 1px; cursor: pointer; color: #ffffff; background: #000000; border: 2px solid #ffffff; border-radius: 100%; }.video-overlay-video { width: 100%; height: 100%; }#video-overlay-wrapper { position: relative; display: none; height: 80%; width: 80%; margin: 6% 10% 10%; } @media screen and (max-width: 1154px) { #video-overlay-wrapper { width: calc(100% - 76px); margin: 55px 38px 0 38px; } }.video-overlay--visible { display: block; }.video-overlay--visible #video-overlay-wrapper { display: block; }.animation-box { position: relative; width: 960px; margin: 0 auto 2rem; padding-bottom: 10px; text-align: left !important; } @media (max-width: 1010px) { .animation-box { display: none; } }.animation-node { display: inline-block; margin: 0; padding: 0; width: 20%; line-height: 131px; text-align: center; }.animation-node-description { display: block; line-height: 1em; }.s1, .s2 { width: 55px; }.s1 { margin-right: 100px; }.s2 { margin-left: 100px; }.s1Pc, .s2Pc { width: 150px; }.server { width: 350px; }.message { position: absolute; text-align: center; margin: 21px 0 0; line-height: 17px; left: 0; top: 0; opacity: 0; padding: 0; width: 100px; height: auto; border: 1px solid #fff; border-radius: 3px; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, opacity, filter; }.message-sender { font-size: 10px; display: block; line-height: 10px; border-bottom: 1px solid #fff; padding: 3px; text-align: left; background: #fff; color: #444; }.message-text { font-size: 13px; padding: 3px; display: block; line-height: 15px; }@-webkit-keyframes sendMessage { 0% { /* user a */ opacity: 0; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 5% { /* user a fade in */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 18% { /* user a pause */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 20% { /* user a screen - blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 22.5% { /* user a screen + blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 23% { /* user a screen + blur pause */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27% { /* user b screen + blur pause */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27.5% { /* user b screen + blur*/ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 30% { /* user b screen - blur */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 32% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 45% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 50% { /* user b fade out */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 100% { /* fake-delay */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } } @-moz-keyframes sendMessage { 0% { /* user a */ opacity: 0; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 5% { /* user a fade in */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 18% { /* user a pause */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 20% { /* user a screen - blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 22.5% { /* user a screen + blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 23% { /* user a screen + blur pause */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27% { /* user b screen + blur pause */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27.5% { /* user b screen + blur*/ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 30% { /* user b screen - blur */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 32% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 45% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 50% { /* user b fade out */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 100% { /* fake-delay */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } } @-o-keyframes sendMessage { 0% { /* user a */ opacity: 0; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 5% { /* user a fade in */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 18% { /* user a pause */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 20% { /* user a screen - blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 22.5% { /* user a screen + blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 23% { /* user a screen + blur pause */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27% { /* user b screen + blur pause */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27.5% { /* user b screen + blur*/ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 30% { /* user b screen - blur */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 32% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 45% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 50% { /* user b fade out */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 100% { /* fake-delay */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } } @keyframes sendMessage { 0% { /* user a */ opacity: 0; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 5% { /* user a fade in */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 18% { /* user a pause */ opacity: 1; transform: translate(60px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 20% { /* user a screen - blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 22.5% { /* user a screen + blur */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 23% { /* user a screen + blur pause */ opacity: 1; transform: translate(179px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27% { /* user b screen + blur pause */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 27.5% { /* user b screen + blur*/ opacity: 1; transform: translate(680px, 0px); -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } 30% { /* user b screen - blur */ opacity: 1; transform: translate(680px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 32% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 45% { /* user b */ opacity: 1; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 50% { /* user b fade out */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } 100% { /* fake-delay */ opacity: 0; transform: translate(800px, 0px); -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } } .animation-start .message { -webkit-animation: sendMessage 15s; -moz-animation: sendMessage 15s; -o-animation: sendMessage 15s; animation: sendMessage 15s; } .animation-start .message-s2 { -webkit-animation-direction: reverse; -moz-animation-direction: reverse; -o-animation-direction: reverse; animation-direction: reverse; } .animation-start .message--infinity { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animation-start .message-en--i3, .animation-start .message-en--i4 { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; animation-delay: 15s; } .animation-start .message-en--i5, .animation-start .message-en--i6 { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; } .animation-start .message-en--i7, .animation-start .message-en--i8 { -webkit-animation-delay: 45s; -moz-animation-delay: 45s; -o-animation-delay: 45s; animation-delay: 45s; } .animation-start .message-en--i9, .animation-start .message-en--i10 { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -o-animation-delay: 60s; animation-delay: 60s; } .animation-start .message-de--i3, .animation-start .message-de--i4 { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; animation-delay: 15s; } .animation-start .message-de--i5, .animation-start .message-de--i6 { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; animation-delay: 30s; } .animation-start .message-de--i7, .animation-start .message-de--i8 { -webkit-animation-delay: 45s; -moz-animation-delay: 45s; -o-animation-delay: 45s; animation-delay: 45s; } .animation-start .message-de--i9, .animation-start .message-de--i10 { -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -o-animation-delay: 60s; animation-delay: 60s; }