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,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    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
}
:focus {
    outline: none
}
ins {
    text-decoration: none
}
del {
    text-decoration: line-through
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
.static-site {
    overflow-y: auto !important
}
.static-site .content__paragraph {
    text-align: center !important
}
/*@media screen and (max-height: 760px) {
    .iphone-wrapper {
        transform: translateY(90px)
    }
}*/
.iphone-wrapper,
.content-wrapper {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%
}
.loaded .iphone-wrapper,
.loaded .content-wrapper {
    opacity: 1;
    transition: all 300ms ease-out
}
.static-site .iphone-wrapper,
.static-site .content-wrapper {
    display: none !important
}
.iphone-wrapper .slide-content,
.content-wrapper .slide-content {
    width: 325px;
    opacity: 0;
    transition: all 400ms ease-out
}
.iphone-wrapper .slide-1,
.iphone-wrapper .slide-3,
.content-wrapper .slide-1,
.content-wrapper .slide-3 {
    transform: translateX(150px) translateZ(0)
}
.iphone-wrapper .slide-3,
.content-wrapper .slide-3 {
    transform: translateX(150px) translateY(0px) translateZ(0)
}
.iphone-wrapper .slide-3 .content__paragraph,
.content-wrapper .slide-3 .content__paragraph {
    text-align: left
}
.iphone-wrapper .slide-2,
.content-wrapper .slide-2 {
    transform: translateX(-150px) translateY(0px) translateZ(0)
}
.iphone-wrapper .slide-2 .content__paragraph,
.content-wrapper .slide-2 .content__paragraph {
    text-align: right
}
.iphone-wrapper .slide-5 .content__paragraph,
.iphone-wrapper .slide-6 .content__paragraph,
.content-wrapper .slide-5 .content__paragraph,
.content-wrapper .slide-6 .content__paragraph {
    text-align: center
}
.iphone-wrapper .iphone,
.content-wrapper .iphone {
    transform: translateX(-150px) translateZ(0);
    opacity: 0;
    will-change: opacity, transform
}
.fp-viewing-0 .iphone-wrapper .slide-1,
.fp-viewing-0 .content-wrapper .slide-1 {
    opacity: 1;
    transform: translateX(240px) translateZ(0);
    transition: all 500ms ease-out
}
.fp-viewing-0 .iphone-wrapper .iphone,
.fp-viewing-0 .content-wrapper .iphone {
    opacity: 1;
    transform: translateX(-240px) translateZ(0);
    transition: all 500ms ease-out
}
.fp-viewing-1 .iphone-wrapper .slide-1,
.fp-viewing-1 .content-wrapper .slide-1 {
    opacity: 0;
    transform: translateX(100px) translateZ(0);
    transition: all 400ms ease-out
}
.fp-viewing-1 .iphone-wrapper .slide-2,
.fp-viewing-1 .content-wrapper .slide-2 {
    opacity: 1;
    transform: translateX(-25px) translateY(-280px) translateZ(0);
    transition: all 400ms ease-in
}
.fp-viewing-1 .iphone-wrapper .iphone,
.fp-viewing-1 .content-wrapper .iphone {
    transform: translateY(50px) translateX(0px) translateZ(0);
    opacity: 1;
    transition: all 400ms ease-out
}
.fp-viewing-2 .iphone-wrapper .slide-3,
.fp-viewing-2 .content-wrapper .slide-3 {
    opacity: 1;
    transform: translateX(240px) translateY(0px) translateZ(0);
    transition: all 500ms ease-out
}
.fp-viewing-2 .iphone-wrapper .iphone,
.fp-viewing-2 .content-wrapper .iphone {
    transform: translateX(-240px) translateZ(0);
    opacity: 1;
    transition: all 400ms ease-out
}
.fp-viewing-3 .iphone-wrapper .slide-3,
.fp-viewing-3 .content-wrapper .slide-3 {
    opacity: 0;
    transform: translateX(100px) translateY(0px) translateZ(0);
    transition: all 500ms ease-out
}
.fp-viewing-3 .iphone-wrapper .iphone,
.fp-viewing-3 .content-wrapper .iphone {
    transform: translateY(0px) translateX(0px) translateZ(0);
    opacity: 1;
    transition: all 400ms ease-out
}
.fp-viewing-4 .iphone-wrapper .slide-5,
.fp-viewing-4 .content-wrapper .slide-5 {
    opacity: 1;
    transform: translateY(-240px) translateZ(0)
}
@media screen and (max-height: 760px) {
    .fp-viewing-4 .iphone-wrapper .slide-5,
    .fp-viewing-4 .content-wrapper .slide-5 {
        transform: translateY(-200px) translateZ(0)
    }
}
.fp-viewing-4 .iphone-wrapper .iphone,
.fp-viewing-4 .content-wrapper .iphone {
    transform: translateY(355px) translateX(0px) translateZ(0);
    opacity: 1;
    transition: all 400ms ease-out
}
@media screen and (max-height: 760px) {
    .fp-viewing-4 .iphone-wrapper .iphone,
    .fp-viewing-4 .content-wrapper .iphone {
        transform: translateY(255px) translateX(0px) translateZ(0)
    }
}
.fp-viewing-5 .iphone-wrapper .slide-6,
.fp-viewing-5 .content-wrapper .slide-6 {
    opacity: 1;
    transform: translateY(200px) translateZ(0)
}
@media screen and (max-height: 650px) {
    .fp-viewing-5 .iphone-wrapper .slide-6,
    .fp-viewing-5 .content-wrapper .slide-6 {
        transform: translateY(170px) translateZ(0)
    }
}
.fp-viewing-5 .iphone-wrapper .iphone,
.fp-viewing-5 .content-wrapper .iphone {
    transform: translateY(-300px) translateX(0px) translateZ(0);
    opacity: 1;
    transition: all 400ms ease-out
}
@media screen and (max-height: 760px) {
    .fp-viewing-5 .iphone-wrapper .iphone,
    .fp-viewing-5 .content-wrapper .iphone {
        transform: translateY(-390px) translateX(0px) translateZ(0)
    }
}
.fp-viewing-6 .iphone-wrapper .slide-6,
.fp-viewing-6 .content-wrapper .slide-6 {
    opacity: 0;
    transform: translateY(300px) translateZ(0)
}
.fp-viewing-6 .iphone-wrapper .iphone,
.fp-viewing-6 .content-wrapper .iphone {
    transform: translateY(-600px) translateX(0px) translateZ(0);
    opacity: 0;
    transition: all 400ms ease-out
}
.content-wrapper {
    z-index: 99998
}
#mobile-site-content {
    display: none
}
#site-content {
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
.static-site #mobile-site-content {
    display: block
}
.static-site #site-content {
    display: none !important
}
.static-site html,
.static-site body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch
}
.static-site #fp-nav {
    display: none !important
}
.static-site #mobile-site-content {
    text-align: center;
    padding-top: 50px
}
.static-site #mobile-site-content .content {
    margin: 0 auto;
    margin: 50px auto !important
}
.static-site #mobile-site-content .content__content {
    padding: 0 30px
}
.static-site #mobile-site-content .iphone {
    margin: 100px auto !important;
    width: 320px
}
.static-site #mobile-site-content .iphone__mask {
    position: absolute;
    text-align: left;
    overflow: hidden;
    width: 246px;
    margin-top: 80px;
    margin-left: 37px;
    height: 437px
}
.static-site #mobile-site-content * {
    transition-property: none !important;
    transform: none !important
}
.static-site #mobile-site-content .cta-mobile {
    padding-top: 100px;
    padding-bottom: 150px
}
.static-site #mobile-site-content .footer {
    visibility: visible;
    opacity: 1;
    text-align: center;
    position: relative;
    min-height: 100vh;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}
.static-site #mobile-site-content .footer-links {
    margin-top: 70px
}
.static-site #mobile-site-content .footer-links a {
    background-position: center bottom;
    display: block;
    margin: 0;
    padding: 25px
}
.static-site #mobile-site-content .footer .app-title {
    margin-top: 0
}
.static-site #mobile-site-content .footer .app-store-link {
    margin: 0;
    padding: 0;
    margin-top: 60px;
    display: block
}
.static-site #mobile-site-content .footer .app-store-link img {
    width: 236px;
    height: 68px
}
* {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
h1,
h4 {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase
}
h1 {
    font-weight: 300;
    color: #525252;
    font-size: 41px
}
h4 {
    font-weight: 400;
    color: #999;
    font-size: 11px
}
p {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    line-height: 2
}
html,
body {
    height: 100%;
    width: 100%
}
body {
    text-align: center;
    position: relative
}
#one {
    z-index: 999
}
.app-title {
    margin-top: 30px;
    margin-bottom: 70px
}
@media screen and (max-height: 650px) {
    .app-title {
        margin-bottom: 55px
    }
}
.app-title h1 {
    margin-bottom: 15px
}
.app-title--slide-7 {
    margin-top: -80px
}
.content {
    width: 325px;
    text-align: center;
    margin: 0 20px;
    margin-left: 100px;
    margin-top: -20px
}
@media screen and (min-height: 1000px) {
    .content {
        margin-left: 140px
    }
}
.content__paragraph {
    text-align: justify
}
.text--slide-2 .content__paragraph {
    text-align: right
}
.text--slide-4 .content__paragraph {
    text-align: left
}
.text--slide-5 .content__paragraph {
    text-align: center
}
.text--slide-6 .content__paragraph {
    text-align: center
}
.text {
    will-change: transform, opacity;
    transform: translateZ(0);
    opacity: 0.0
}
.fp-viewing-0 .text--slide-1 {
    opacity: 1;
    transform: translateX(0px) translateZ(0);
    transition: all 400ms ease-out
}
.fp-viewing-1 .text--slide-1 {
    opacity: 0;
    transform: translateX(50px) translateZ(0);
    transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1)
}
.text--slide-2 {
    width: 325px;
    transform: translateX(-250px) translateZ(0);
    margin-top: 200px;
    opacity: 0
}
.text--slide-2 .tooltip {
    will-change: transform, opacity;
    transition: all 400ms ease-out;
    position: absolute;
    width: 244px;
    height: 135px
}
.fp-viewing-0 .text--slide-2 .tooltip {
    opacity: 0;
    transform: translateY(-340px) translateX(-20px) rotate(-2deg)
}
.fp-viewing-1 .text--slide-2 .tooltip {
    opacity: 1;
    transform: translateY(-340px) translateX(0px) rotate(0deg);
    transition: all 400ms ease-out 800ms
}
.fp-viewing-2 .text--slide-2 .tooltip {
    opacity: 0;
    transform: translateY(-340px) translateX(-20px) rotate(0deg)
}
.text--slide-2 .tooltip--2 {
    position: absolute;
    transform: translateX(630px) translateY(0px);
    will-change: transform, opacity;
    transition: all 400ms ease-out
}
.fp-viewing-0 .text--slide-2 .tooltip--2 {
    opacity: 0;
    transform: translateX(630px) translateY(0px) rotate(2deg)
}
.fp-viewing-1 .text--slide-2 .tooltip--2 {
    opacity: 1;
    transform: translateX(630px) translateY(-40px) rotate(0deg);
    transition: all 400ms ease-out 1300ms
}
.fp-viewing-2 .text--slide-2 .tooltip--2 {
    opacity: 0;
    transform: translateX(630px) translateY(0px) rotate(2deg)
}
.fp-viewing-1 .text--slide-2 {
    opacity: 1
}
.text--slide-4 {
    width: 325px;
    transition: all 400ms ease-out;
    margin-top: 200px;
    opacity: 0
}
.fp-viewing-2 .text--slide-4 {
    opacity: 1
}
.text--slide-4 {
    width: 325px;
    margin-top: 200px;
    opacity: 0
}
.text--slide-4 .tooltip--5 {
    position: absolute;
    transform: translateX(-220px) translateY(-220px) rotate(0deg);
    will-change: transform, opacity;
    transition: all 400ms ease-out
}
.fp-viewing-2 .text--slide-4 .tooltip--5 {
    opacity: 0;
    transform: translateX(-220px) translateY(-200px) rotate(2deg)
}
.fp-viewing-3 .text--slide-4 .tooltip--5 {
    opacity: 1;
    transform: translateX(-220px) translateY(-220px) rotate(0deg);
    transition: all 400ms ease-out 700ms
}
.fp-viewing-4 .text--slide-4 .tooltip--5 {
    opacity: 0;
    transform: translateX(-220px) translateY(-200px) rotate(2deg)
}
.fp-viewing-3 .text--slide-4 {
    opacity: 1
}
.text--slide-5 {
    width: 325px;
    transition: all 500ms ease-out 200ms
}
.text--slide-5 .tooltip--6 {
    position: absolute;
    transform: translateX(-220px) translateY(-310px) rotate(0deg);
    will-change: transform, opacity;
    transition: all 400ms ease-out
}
.fp-viewing-3 .text--slide-5 .tooltip--6 {
    opacity: 0;
    transform: translateX(-220px) translateY(-370px) rotate(2deg)
}
.fp-viewing-4 .text--slide-5 .tooltip--6 {
    opacity: 1;
    transform: translateX(-220px) translateY(-330px) rotate(0deg);
    transition: all 400ms ease-out 700ms
}
.fp-viewing-5 .text--slide-5 .tooltip--6 {
    opacity: 0;
    transform: translateX(-220px) translateY(-370px) rotate(2deg)
}
.fp-viewing-3 .text--slide-5 {
    opacity: 0;
    transform: translateY(-190px) translateZ(0);
    transition: all 250ms ease-out 0ms
}
.fp-viewing-4 .text--slide-5 {
    opacity: 1;
    transform: translateY(-240px) translateZ(0)
}
.fp-viewing-5 .text--slide-5 {
    opacity: 0;
    transform: translateY(-190px) translateZ(0);
    transition: all 250ms ease-out 0ms
}
.text--slide-6 {
    width: 325px;
    transition: all 500ms ease-out 200ms
}
.fp-viewing-4 .text--slide-6 {
    opacity: 0;
    transform: translateY(100%) translateZ(0);
    transition: all 250ms ease-out 0ms
}
.fp-viewing-5 .text--slide-6 {
    opacity: 1;
    transform: translateY(125%) translateZ(0)
}
.fp-viewing-6 .text--slide-6 {
    opacity: 0;
    transform: translateY(160%) translateZ(0);
    transition: all 250ms ease-out 0ms
}
.text--slide-7 {
    transition: all 200ms ease-out 500ms
}
.fp-viewing-6 .text--slide-7 {
    opacity: 1
}
.fp-viewing-5 .text--slide-7 {
    opacity: 0;
    transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1)
}
.text--slide-7 .app-title {
    will-change: transform;
    transition: transform 400ms ease-out 500ms
}
.fp-viewing-5 .text--slide-7 .app-title {
    transform: translateY(-50px) translateZ(0);
    transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1)
}
.fp-viewing-6 .text--slide-7 .app-title {
    transform: translateY(0px) translateZ(0)
}
.text--slide-7 .app-store-link {
    will-change: transform;
    transition: transform 400ms ease-out 500ms
}
.fp-viewing-5 .text--slide-7 .app-store-link {
    transform: translateY(50px) translateZ(0);
    transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1)
}
.fp-viewing-6 .text--slide-7 .app-store-link {
    transform: translateY(0px) translateZ(0)
}
.app-store-link {
    display: inline-block;
    pointer-events: all;
}
.app-store-link--slide-1 {
    margin-top: 70px
}
@media screen and (max-height: 650px) {
    .app-store-link--slide-1 {
        margin-top: 55px
    }
}
.app-store-link--slide-7 {
    margin-top: 60px;
    display: block
}
.app-store-link--slide-7 img {
    width: 236px;
    height: 68px
}
#site-content {
    z-index: 10000;
    transform: translate3d(0px, 0px, 0px) !important;
    transition: opacity 800ms ease-in
}
#fp-nav {
    opacity: 0;
    transition: opacity 600ms ease-in
}
.loaded #fp-nav {
    opacity: 1
}
.fp-viewing-6 #fp-nav {
    opacity: 0
}
.slide-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    transform: translateY(25px) translateZ(0);
    will-change: transform
}
#video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}
.iphone {
    position: relative;
    width: 400px
}
.iphone__svg {
    width: 100%
}
.iphone__mask {
    position: absolute;
    text-align: left;
    overflow: hidden;
    width: 308px;
    margin-top: 99px;
    margin-left: 46px;
    height: 548px
}
.iphone__mask img {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.0;
    transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), scale 300ms ease-in, opacity 300ms ease-in
}
.iphone__mask .img--1 {
    transition: none
}
.allowFirstAnimation .iphone__mask .img--1 {
    will-change: transform;
    transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), scale 300ms ease-in, opacity 300ms ease-in
}
.fp-viewing-0 .iphone__mask .img--1 {
    opacity: 1
}
.fp-viewing-1 .iphone__mask .img--1 {
    opacity: 1.0
}
.fp-viewing-1 .iphone__mask .img--2 {
    opacity: 1
}
.fp-viewing-2 .iphone__mask .img--2 {
    opacity: 1.0
}
.fp-viewing-2 .iphone__mask .img--3 {
    opacity: 1
}
.fp-viewing-3 .iphone__mask .img--3 {
    opacity: 1.0
}
.fp-viewing-3 .iphone__mask .img--4 {
    opacity: 1
}
.fp-viewing-4 .iphone__mask .img--4 {
    opacity: 1.0
}
.fp-viewing-4 .iphone__mask .img--5 {
    opacity: 1
}
.fp-viewing-5 .iphone__mask .img--5 {
    opacity: 1.0
}
.fp-viewing-5 .iphone__mask .img--6 {
    opacity: 1
}
.fp-viewing-6 .iphone__mask .img--6 {
    opacity: 1.0
}
.fp-viewing-6 .iphone__mask .img--7 {
    opacity: 1
}
.fp-viewing-7 .iphone__mask .img--7 {
    opacity: 1.0
}
.fp-viewing-7 .iphone__mask .img--8 {
    opacity: 1
}
.fp-viewing-8 .iphone__mask .img--8 {
    opacity: 1.0
}
.fp-viewing-8 .iphone__mask .img--9 {
    opacity: 1
}
.fp-viewing-9 .iphone__mask .img--9 {
    opacity: 1.0
}
.fp-viewing-9 .iphone__mask .img--10 {
    opacity: 1
}
.fp-viewing-10 .iphone__mask .img--10 {
    opacity: 1.0
}
.fp-viewing-10 .iphone__mask .img--11 {
    opacity: 1
}
.fp-viewing-11 .iphone__mask .img--11 {
    opacity: 1.0
}
.fp-viewing-11 .iphone__mask .img--12 {
    opacity: 1
}
.fp-viewing-12 .iphone__mask .img--12 {
    opacity: 1.0
}
.fp-viewing-6 .iphone__mask .img--6 {
    opacity: 1
}
.spinner {
    display: none;
    line-height: 0;
    width: 15px;
    height: 15px;
    text-align: left;
    position: absolute;
    left: 50%;
    top: 50%
}
.spinner hr {
    opacity: 0
}
.spinner hr:nth-child(1),
.spinner hr:nth-child(2) {
    padding: 0;
    border: 0;
    display: block;
    background: #777;
    height: 3px;
    width: 15px;
    margin: 0;
    margin-bottom: 3px
}
.spinner hr:nth-child(3) {
    display: inline-block;
    padding: 0;
    border: 0;
    background: #777;
    height: 3px;
    width: 9px;
    margin: 0;
    vertical-align: middle
}
.spinner hr:nth-child(4) {
    display: inline-block;
    padding: 0;
    border: 0;
    background: #777;
    height: 3px;
    width: 3px;
    margin: 0;
    margin-left: 3px;
    vertical-align: middle
}
.spinner hr:nth-child(1) {
    animation-name: loadingAnimation;
    animation-duration: 2.8s;
    animation-delay: 3.0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}
.spinner hr:nth-child(2) {
    animation-name: loadingAnimation;
    animation-delay: 3.2s;
    animation-duration: 2.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}
.spinner hr:nth-child(3) {
    animation-name: loadingAnimation;
    animation-delay: 3.4s;
    animation-duration: 2.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}
.spinner hr:nth-child(4) {
    animation-name: loadingAnimation;
    animation-delay: 3.5s;
    animation-duration: 2.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out
}
@keyframes loadingAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5)
    }
    15% {
        opacity: 1;
        transform: scale(1)
    }
    30% {
        opacity: 1;
        transform: scale(1)
    }
    45% {
        opacity: 0;
        transform: scale(0.5)
    }
    60% {
        opacity: 0;
        transform: scale(0.5)
    }
    75% {
        opacity: 1;
        transform: scale(1)
    }
    90% {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center
    }
    100% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1.2)
    }
}
.footer {
    text-align: center;
    position: fixed;
    z-index: 99999;
    bottom: 70px;
    left: 0;
    width: 100%;
    height: 24px;
    visibility: hidden;
    opacity: 0;
    transition: all 500ms ease-out;
    cursor: default
}
.fp-viewing-6 .footer {
    visibility: visible;
    opacity: 1;
    transition: all 500ms ease-out 800ms
}
.footer a {
    font-family: "Lato", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    text-transform: uppercase;
    padding-left: 24px;
    padding-right: 34px;
    text-decoration: none;
    background: url("assets/Popka.png") no-repeat right center
}
.footer a:hover {
    text-decoration: underline
}
.footer a:first-child {
    padding-left: 0
}
.footer a:last-child {
    padding-right: 0;
    background: none
}
.section {
    pointer-events: none;
    opacity: 0
}
.section.active {
    opacity: 1;
    pointer-events: all;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.tooltip--3 {
    width: 165px;
    height: 190px;
    background-image: url("assets/tooltip_1_1.png");
    will-change: transform, opacity;
    transition: all 400ms ease-out;
    position: absolute;
    transform: translateY(-280px) translateX(380px) rotate(2deg)
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .tooltip--3 {
        background-image: url("assets/tooltip_1_1@2x.png");
        background-size: 100%
    }
}
@media screen and (max-height: 760px) {
    .tooltip--3 {
        transform: translateY(-200px) translateX(380px) rotate(0deg)
    }
}
.fp-viewing-2 .tooltip--3 {
    opacity: 0
}
.fp-viewing-3 .tooltip--3 {
    opacity: 1;
    transform: translateY(-300px) translateX(380px) rotate(0deg);
    transition: all 400ms ease-out 800ms
}
@media screen and (max-height: 760px) {
    .fp-viewing-3 .tooltip--3 {
        transform: translateY(-220px) translateX(380px) rotate(0deg)
    }
}
.fp-viewing-4 .tooltip--3 {
    opacity: 0
}
.tooltip--4 {
    width: 150px;
    height: 190px;
    position: absolute;
    transform: translateX(-210px) translateY(-320px) rotate(2deg);
    will-change: transform, opacity;
    transition: all 400ms ease-out;
    background-image: url("assets/tooltip_1_2.png")
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .tooltip--4 {
        background-image: url("assets/tooltip_1_2@2x.png");
        background-size: 100%
    }
}
@media screen and (max-height: 760px) {
    .tooltip--4 {
        transform: translateX(-210px) translateY(-230px) rotate(2deg)
    }
}
.fp-viewing-2 .tooltip--4 {
    opacity: 0
}
.fp-viewing-3 .tooltip--4 {
    opacity: 1;
    transform: translateX(-210px) translateY(-300px) rotate(0deg);
    transition: all 400ms ease-out 1300ms
}
@media screen and (max-height: 760px) {
    .fp-viewing-3 .tooltip--4 {
        transform: translateX(-210px) translateY(-210px) rotate(0deg)
    }
}
.fp-viewing-4 .tooltip--4 {
    opacity: 0
}
/* Localized */