article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
display: block
}

.download-list li, .swiper-container-no-flexbox .swiper-slide {
float: left
}

nav ul, ol, ul {
list-style: none
}

a, button, input, ins {
text-decoration: none
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0
}

ins, mark {
background-color: #ff9;
color: #000
}

blockquote, q {
quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0
}

mark {
font-style: italic;
font-weight: 700
}

del {
text-decoration: line-through
}

abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help
}

table {
border-collapse: collapse;
border-spacing: 0
}

hr {
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0
}

.swiper-slide, .swiper-wrapper {
width: 100%;
height: 100%;
position: relative
}

input, select {
vertical-align: middle
}

@font-face {
font-family: neuropolitical;
src: url(/assets/fonts/neuropolitical/neuropolitical.ttf);
}


.rtl {
direction: rtl
}

.text-right {
text-align: right
}

.text-left {
text-align: left
}

.text-center {
text-align: center
}

.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 1
}

.swiper-container-vertical > .swiper-wrapper {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column
}

.swiper-wrapper {
z-index: 1;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
transition-property: -webkit-transform;
transition-property: transform;
box-sizing: content-box
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}

.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}

.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto
}

.swiper-slide {
-ms-flex: 0 0 auto;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}

.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}

.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y
}

.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x
}

.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto
}

.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto
}

.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-pagination {
position: absolute;
text-align: center;
transition: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}

.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}

button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none
}

#newsletter-form input, a, button, input {
-webkit-appearance: none;
-ms-appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}

.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}

.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff
}

.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}

.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}

.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block
}

.swiper-container-horizontal > .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%
}

.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px
}

.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out
}

.preload *, .resizing * {
transition: none !important
}

.swiper-container-fade .swiper-slide, .swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}

.swiper-container-cube {
overflow: visible
}

#slider-nav a, #timeline-track, .download-list {
overflow: hidden
}

.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
z-index: 1
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden
}

.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}

.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}

.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}

.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}

.swiper-scrollbar-cursor-drag {
cursor: move
}

.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite
}

#sections-list-container, #wrapper, html {
height: 100%
}

#slider-images, section {
top: 0;
bottom: 0;
left: 0
}

.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}

#download h2, #sections-list figure, .hidden {
display: none
}

.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}

@keyframes  swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}

@-webkit-keyframes timeline-glow {
0% {
border: 15px solid #fff;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(0)
}
100% {
border: 1px solid #fff;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(1)
}
}

@keyframes  timeline-glow {
0% {
border: 15px solid #fff;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0)
}
100% {
border: 1px solid #fff;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1)
}
}

*, :after, :before {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent
}

html {
width: 100%;
font-size: 62.5%
}

body {
font-weight: 400;
font-size: 1.9rem;
line-height: 2.3rem;
color: #303030;
background: #f6f6f4
}

@media  only screen and (min-width: 741px) {
html {
overflow: hidden
}

body {
overflow: hidden;
font-size: 1.7rem
}

#wrapper {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
}

.dragging *, .noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.preload * {
-webkit-animation-name: none;
animation-name: none
}

.scrolling * {
pointer-events: none !important
}

::selection {
color: #fff;
background:#00B1CF
}

::-moz-selection {
color: #fff;
background:#00B1CF
}

a, button, input {
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: 0
}

button {
cursor: pointer
}

h1, h2, h3, h4, h5, h6 {
font-style: normal;
font-weight: 900
}

h2 {
margin-bottom: 18px;
margin-right: -.5rem;
font-size: 20px
}

section {
position: absolute;

right: 0;
padding: 55px
}
@media  only screen and (max-width: 740px) {
#content {
height: 100%
}

section {
position: relative;
top: auto;
bottom: auto;

height: 90%;
padding: 10px
}

#sections-list-container:after, #sections-list-container:before {
content: ""
}

#sections-list-container {
position: relative;
height: 530px;
background:#00B1CF
}

#sections-list-container:before {
position: absolute;
top: 20px;
left: calc(50% - 90px);
width: 180px;
height: 300px;
background: #222
}

#sections-list-container:after {
position: absolute;
top: -50px;
left: calc(50% - 116px);
z-index: 60;
width: 233px;
height: 436px;
background-image: url(/assets/img/mockup/iPhone-small.png);
pointer-events: none
}
}

@media  only screen and (max-height: 440px) {
section {
height: 100%
}
}

@media  only screen and (max-width: 740px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 740px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 740px) and (-o-min-device-pixel-ratio: 1.3/1), only screen and (max-width: 740px) and (min-resolution: 125dpi), only screen and (max-width: 740px) and (min-resolution: 1.3dppx) {
#sections-list-container:after {
background-image: url(/assets/img/mockup/iPhone-small_2x.png);
background-size: 233px 436px
}
}

@media  only screen and (min-width: 741px) {
.swiper-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
background: 0 0
}

body[data-current-section="0"] #sections-list li:nth-child(1) section:before, body[data-current-section="8"] #sections-list li:nth-child(4) h2, body[data-current-section="8"] #sections-list li:nth-child(4) p {
-webkit-transform: translate3d(0, 160px, 0);
transform: translate3d(0, 160px, 0)
}

body[data-current-section="2"] #sections-list li:nth-child(1) section:before, body[data-current-section="2"] #sections-list li:nth-child(3) h2, body[data-current-section="2"] #sections-list li:nth-child(3) p, body[data-current-section="1"] #sections-list li:nth-child(2) section:before, body[data-current-section="3"] #sections-list li:nth-child(2) h2, body[data-current-section="3"] #sections-list li:nth-child(2) p, body[data-current-section="3"] #sections-list li:nth-child(4) section:before, body[data-current-section="4"] #sections-list li:nth-child(3) section:before {
-webkit-transform: translate3d(-160px, 0, 0);
transform: translate3d(-160px, 0, 0)
}

body[data-current-section="2"] #sections-list li:nth-child(3) section:before, body[data-current-section="3"] #sections-list li:nth-child(2) section:before {
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0)
}

body[data-current-section="8"] #sections-list li:nth-child(4) section:before {
-webkit-transform: translate3d(0, -160px, 0);
transform: translate3d(0, -160px, 0)
}
}

@media  only screen and (max-width: 740px) {
.swiper-container {
height: 100%
}
}

#sections-list {
counter-reset: section
}

#sections-list li:nth-child(n+1) section {
counter-increment: section
}

#sections-list li:nth-child(even) section:before {
top: calc(50% - 230px)
}

#sections-list li:nth-child(even) article {
top: calc(50% + 105px)
}

#sections-list section:before {
content: "0" counter(section);
position: absolute;
top: calc(50% + 50px);
left: calc(50% - 370px);
z-index: 30;
width: 160px;
height: 160px;
font-size: 16rem;
line-height: 16rem;
color: #fff;
opacity: 0;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
transition: .4s cubic-bezier(.55, .085, .68, .53)
}

body[data-current-section="8"] #sections-list section:before {
opacity: 0;
-webkit-transform: translate3d(0, -400px, 0);
transform: translate3d(0, -400px, 0);
transition: .5s 0s cubic-bezier(.25, .46, .45, .94)
}

#sections-list section.current:before {
opacity: 1;
-webkit-transform: none;
transform: none;
transition: .6s .3s cubic-bezier(.25, .46, .45, .94)
}

#sections-list section.current article h2, #sections-list section.current article p {
opacity: 1;
-webkit-transform: none;
transform: none;
transition: .6s .1s cubic-bezier(.25, .46, .45, .94)
}

#sections-list section.current article h2 {
transition-delay: 0
}

#sections-list section.current article p {
transition-delay: .2s
}

#sections-list article {
position: absolute;
top: calc(40% - 190px);
right: calc(57% + 128px);
max-width: 350px;
text-align: right
}

@media  only screen and (max-width: 1200px) {
#sections-list section:before {
left: calc(50% - 250px)
}

#sections-list article {
right: calc(57% + 30px)
}
}

#sections-list article h2, #sections-list article p {
opacity: 0;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
transition: .4s cubic-bezier(.55, .085, .68, .53)
}

#sections-list article h2 {
transition-delay: .2s
}

@media  only screen and (min-width: 1600px) {
#sections-list section:before {
left: calc(50% - 410px)
}
}

@media  only screen and (min-width: 2000px) {
#sections-list section:before {
left: calc(50% - 460px)
}
}

@media  only screen and (max-width: 740px) {
#sections-list section {
height: 100%
}

#sections-list section:before {
top: auto !important;
bottom: 70px;
left: calc(50% - 134px);
width: 60px;
height: 60px;
font-size: 45px;
line-height: 7rem;
-webkit-transform: translate3d(70px, 0, 0);
transform: translate3d(70px, 0, 0);
transition-delay: 0 !important
}

#sections-list article {
overflow: hidden;
top: auto !important;
right: 10px;
bottom: 62px;
left: calc(50% - 62px);
z-index: 50;
text-align: left;
font-size: 14px;
background:#00B1CF
}

#sections-list article h2 {
-webkit-transform: translate3d(-400px, 0, 0);
transform: translate3d(-400px, 0, 0);
transition-delay: 0 !important
}

#sections-list article p {
display: none
}
}

#slider-images, #slider-nav, #video-container > div {
position: absolute;
right: 0
}

#download article, #logo, #logo .download-list, #slider-nav, .main-articles, .tagline {
text-align: center
}

#slider-images span {
position: absolute;
top: 22px;
left: calc(50% - 81px);
z-index: 55;
width: 163px;
height: 291px;
background-repeat: no-repeat !important;
background-size: 163px 291px !important;
box-shadow: 0 7px 7px rgba(0, 0, 0, .2);
-webkit-transform-origin: 50% calc(100% + 51vw);
transform-origin: 50% calc(100% + 51vw);
transition: .7s cubic-bezier(.25, .46, .45, .94)
}

#slider-images span:not(:first-child) {
-webkit-transform: translate3d(0, 0, 0) rotateZ(90deg);
transform: translate3d(0, 0, 0) rotateZ(90deg)
}
        #slider-images span:nth-child(1) {
        background: url(https://bibbib.net/assets/front/img/page_170267666724105279.png)
    }
        #slider-images span:nth-child(2) {
        background: url(https://bibbib.net/assets/front/img/page_1702676683166100990.png)
    }
        #slider-images span:nth-child(3) {
        background: url(https://bibbib.net/assets/front/img/page_17026766931377016464.png)
    }
        #slider-images span:nth-child(4) {
        background: url(https://bibbib.net/assets/front/img/page_17026767051416498971.png)
    }
        #slider-images span:nth-child(5) {
        background: url(https://bibbib.net/assets/front/img/page_17026767191152854960.png)
    }
        #slider-images span:nth-child(6) {
        background: url(https://bibbib.net/assets/front/img/page_17026767451113519433.png)
    }
        #slider-images span:nth-child(7) {
        background: url(https://bibbib.net/assets/front/img/page_1702676761463056345.png)
    }



.slide-change #slider-images span {
transition: none
}

#slider-nav {
bottom: 30px;
left: 0;
z-index: 10
}

#slider-nav li {
display: inline-block
}

#slider-nav li:not(:last-child) {
margin-right: 15px
}

#slider-nav a {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
border: 3px solid #d1ae41;
transition: .4s cubic-bezier(.785, .135, .15, .86)
}

#slider-nav li.current a {
border: 5px solid #fff;
-webkit-transform: translate3d(0, 0, 0) rotate(90deg);
transform: translate3d(0, 0, 0) rotate(90deg)
}

@media  only screen and (min-width: 741px) {
#sections-list, #sections-list li {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}

#sections-list {
z-index: 20
}

#slider-images, #slider-nav {
display: none
}
}

.tagline {
position: absolute;
bottom: 100px;
left: 50%;
width: 200px;
margin-left: -100px;
font-style: normal;
font-size: 15px;
opacity: 0;
transition: opacity 0s .6s
}

#download p:after, .tagline:after {
width: 1px;
content: ""
}

body[data-current-section="0"] .tagline {
opacity: 1;
transition-delay: 0s
}

.tagline:after {
position: absolute;
top: 120%;
left: 50%;
height: 80px;
background: #717171
}

.tagline strong {
font-size: 1.1rem;
font-weight: 400;
color:#00B1CF
}

@media  only screen and (max-width: 740px) {
.tagline {
bottom: 145px
}

.tagline:after {
top: 350%
}

#video-container {
display: none
}
}

@media  only screen and (max-height: 520px) {
.tagline {
bottom: 135px
}
}

#video-container {
top: 100%;
left: 50%;
z-index: 1000;
width: 24%;
min-width: 329px;
position: relative;
-webkit-transform: translate3d(-50%, 0, 0) rotateZ(-15deg);
transform: translate3d(-50%, 0, 0) rotateZ(-15deg)
}

@media  only screen and (max-width: 1200px) {
#video-container {
left: 55%
}
}

#video-container > div {
top: 0;
bottom: 0;
left: 0
}

#error-tag, #timeline-ctn, #timeline-track {
top: 50%;
position: absolute
}

#video-container:before {
content: "";
display: block;
padding-top: 187.53799%
}

#video-container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/img/mockup/iPhone.png);
background-repeat: no-repeat;
background-size: cover !important
}

#video {
position: absolute;
top: 16.6%;
left: 14.89%;
width: 71%
}

#timeline-ctn {
left: calc(50% - 325px);
z-index: 30;
width: 650px;
height: 2px;
opacity: 0;
-webkit-transform: translate3d(0, 130px, 0) scaleX(0);
transform: translate3d(0, 130px, 0) scaleX(0)
}

@media  only screen and (min-width: 1600px) {
#timeline-ctn {
left: calc(50% - 365px);
width: 730px
}
}

@media  only screen and (min-width: 2000px) {
#timeline-ctn {
left: calc(50% - 415px);
width: 830px
}
}

#timeline-ctn:before {
content: "";
position: absolute;
top: -13px;
left: -15px;
width: 30px;
height: 30px;
border: 11px solid #fff;
border-radius: 15px;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0)
}

#timeline-ctn.glowing:before {
-webkit-animation: timeline-glow 2s ease infinite;
animation: timeline-glow 2s ease infinite
}

#timeline-track {
left: 0;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, .2)
}

#timeline-bar {
position: absolute;
top: 0;
right: 100%;
width: 100%;
height: 100%;
background: #fff
}

#download article {
position: absolute;
left: calc(50% - 264px);
bottom: 145px;
z-index: 100;
max-width: 500px
}

#download p {
position: relative;
margin-bottom: 80px;
opacity: 0;
transition: .6s 0s ease-in;
font-weight: 700
}

#download p:after {
position: absolute;
bottom: -60px;
left: 50%;
height: 48px;
background: #000
}

#download #newsletter-form, #download .download-btn {
margin: 0 auto;
opacity: 0;
pointer-events: none;
transition: .6s 0s ease-in
}

#download.current p {
opacity: 1;
transition: .6s .5s ease-in
}

#download.current #newsletter-form, #download.current .download-btn {
opacity: 1;
pointer-events: all;
transition: .6s .5s ease-in
}

@media  only screen and (max-height: 560px) {
#download article {
bottom: 120px
}

#download p {
margin-bottom: 40px
}

#download p:after {
display: none
}
}

@media  only screen and (max-height: 440px) {
#download p {
margin-bottom: 20px
}
}

@media  only screen and (max-height: 750px) and (min-width: 1024px) {
#download article {
bottom: 135px
}

#download p {
margin-bottom: 50px
}

#download p:after {
bottom: -37px;
height: 30px
}
}

.download-list li:not(:last-child) {
margin-right: 9px
}

@media  only screen and (max-width: 740px) {
#timeline-ctn, #video {
display: none
}

#download {
overflow: hidden;
background: #F7AB07
}

#download article {
left: calc(50% - 148px);
width: 296px
}

#download #newsletter-form, #download .download-btn, #download p {
opacity: 1;
pointer-events: all
}

.download-list {
text-align: center
}

.download-list li {
float: none;
display: inline-block
}

.download-list li:not(:last-child) {
margin-right: 0
}
}

#footer h3, #newsletter-form label, #newsletter-form legend {
display: none
}

#newsletter-form {
position: relative;
width: 250px
}

#newsletter-form input {
-moz-appearance: none;
-o-appearance: none;
appearance: none;
width: 240px;
height: 55px;
padding: 0 10px;
text-align: center;
font-size: .9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2rem;
color:#00B1CF;
-webkit-text-fill-color: #fff;
background: #000;
border: none;
border-radius: 0;
transition: .4s ease-in-out
}

#newsletter-form input::-webkit-input-placeholder {
color: #fff;
-webkit-text-fill-color: initial
}

#newsletter-form input::-moz-placeholder {
color: #fff;
-webkit-text-fill-color: initial
}

#newsletter-form input:-moz-placeholder {
color: #fff;
-webkit-text-fill-color: initial
}

#newsletter-form input:-ms-input-placeholder {
color: #fff;
-webkit-text-fill-color: initial
}

#newsletter-form input:-webkit-autofill {
box-shadow: 0 0 0 1000px #000 inset
}

#newsletter-form input:focus {
box-shadow: 0 3px 3px rgba(0, 0, 0, .4)
}

#newsletter-form input:focus:-webkit-autofill {
box-shadow: 0 3px 3px rgba(0, 0, 0, .4), 0 0 0 1000px #000 inset
}

#newsletter-form button {
position: absolute;
top: 13px;
right: -8px;
z-index: 10;
width: 28px;
height: 28px;
text-indent: -9999px;
overflow: hidden;
background: url(/assets/img/icons/send-btn.png) center center no-repeat #fff;
border: none;
border-radius: 50%;
cursor: pointer;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0);
transition: -webkit-transform .4s cubic-bezier(.6, -.28, .735, .045);
transition: transform .4s cubic-bezier(.6, -.28, .735, .045)
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
#video-container:after {
background-image: url(/assets/img/mockup/iPhone_2x.png);
background-size: 329px 617px
}

#newsletter-form button {
background-image: url(/assets/img/icons/send-btn_2x.png);
background-size: 7px 10px
}
}

#newsletter-form button:active {
top: 15px
}

#newsletter-form.sendable button {
pointer-events: all;
-webkit-transform: none;
transform: none;
transition: -webkit-transform .4s cubic-bezier(.175, .885, .32, 1.275);
transition: transform .4s cubic-bezier(.175, .885, .32, 1.275)
}

#error-tag {
left: calc(100% + 20px);
height: 26px;
margin-top: -13px;
padding: 0 10px;
white-space: nowrap;
font-size: 1.3rem;
line-height: 2.6rem;
color: #fff;
background: #D34322;
opacity: 0;
pointer-events: none;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translate3d(-20px, 0, 0) scale(.8);
transform: translate3d(-20px, 0, 0) scale(.8);
transition: .6s cubic-bezier(.68, -.55, .265, 1.55)
}

#error-tag:before {
content: "";
position: absolute;
top: 7px;
left: -6px;
height: 0;
width: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #D34322
}

#error-tag.visible {
opacity: 1;
-webkit-transform: none;
transform: none
}

@media  only screen and (max-width: 740px) {
#error-tag {
top: -30px;
left: 50%;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translate3d(-50%, 20px, 0) scale(.8);
transform: translate3d(-50%, 20px, 0) scale(.8)
}

#error-tag:before {
top: 100%;
left: calc(50% - 6px);
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #D34322
}

#error-tag.visible {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
}

.newsletter-form-notice {
position: absolute;
top: 0;
right: 5px;
bottom: 0;
left: 5px;
background: #000;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translate3d(0, 0, 0) scaleY(0);
transform: translate3d(0, 0, 0) scaleY(0);
transition: .4s cubic-bezier(.445, .05, .55, .95)
}
.footer-share a{
    color:#fff;
}


.newsletter-form-notice:after {
content: attr(data-text);
font-family: neuropolitical, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal;
font-size: .9rem;
font-weight: 700;
line-height: 5.5rem;
text-transform: uppercase;
letter-spacing: .2rem;
color: #fff
}

.footer-share:after, .nav-btn:after {
content: ""
}

#logo, .tagline strong {
text-transform: none
}

.success .newsletter-form-notice {
-webkit-transform: none;
transform: none
}

@media  only screen and (max-width: 740px) {
#footer {
position: absolute;
top: calc(90% + 530px);
left: 0;
width: 100%;
height: 93%;
text-align: center
}

#footer h3 {
display: block;
margin-top: 30%;
padding-left: 1.2rem;
font-size: 2.5rem;
letter-spacing: 1.2rem;
color: #fff;
line-height: 40px
}
}

@media  only screen and (max-height: 500px) {
#footer h3 {
margin-top: 40%
}
}

@media  only screen and (max-height: 440px) {
#footer {
top: calc(100% + 540px)
}
}

.footer-share {
position: absolute;
bottom: 75px;
left: 50%;
z-index: 1000;
height: 25px;
line-height: 2.5rem;
-webkit-transform: translate3d(-50%, 100px, 0);
transform: translate3d(-50%, 100px, 0);
transition: 1s cubic-bezier(.785, .135, .15, .86)
}

.footer-share:after {
display: table;
clear: both
}

body[data-current-section="8"] .footer-share {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
transition: 1s cubic-bezier(.785, .135, .15, .86)
}

.footer-share h4 {
float: left;
font-size: 1.2rem;
font-weight: 400;
letter-spacing: .3rem;
color: #fff
}

.footer-share ul {
float: right;
margin-left: 10px
}

.footer-share ul li {
display: inline-block
}

.footer-share a {
display: block;
width: 25px;
height: 25px;
background-repeat: no-repeat
}

@media  only screen and (max-width: 740px) {
.footer-share {
bottom: 90px;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}

.footer-share h4, .footer-share ul {
float: none
}

.footer-share ul {
display: inline-block;
margin-left: 0
}
}

@media  only screen and (max-height: 560px) {
.footer-share {
bottom: 50px
}
}

.share-ins {
background-position: center -203px
}

.share-gp {
background-position: center -235px
}

.share-you {
background-position: center -268px
}

.share-fb {
background-position: center -93px
}

.share-tw {
background-position: center -62px
}

.footer-note {
position: fixed;
right: 55px;
left: 55px;
bottom: 0;
z-index: 1000;
-webkit-font-smoothing: subpixel-antialiased;
font-style: normal;
font-size: 10px;
line-height: 5.5rem;
color: #a4a4a4;
-webkit-transform: translate3d(0, 55px, 0);
transform: translate3d(0, 55px, 0);
transition: 1.5s cubic-bezier(.785, .135, .15, .86)
}

.started .footer-note {
-webkit-transform: none;
transform: none
}

.footer-note a.logo-link {
display: block;
float: right;
width: 18px;
height: 55px;
margin-left: 8px;
background-position: center -11px;
-webkit-transform: translate3d(0, 55px, 0);
transform: translate3d(0, 55px, 0);
transition: -webkit-transform 1.5s cubic-bezier(.785, .135, .15, .86), opacity .2s;
transition: transform 1.5s cubic-bezier(.785, .135, .15, .86), opacity .2s
}

#logo, #logo .download-list, .description {
position: fixed;
width: 100%
}

.footer-note span {
float: right
}

.footer-note a {
color: rgba(60, 59, 54, .7);
border-bottom: 1px solid rgba(0, 0, 0, .1);
margin-right: 15px
}

.footer-note a:hover {
opacity: .8
}

.started .footer-note a {
-webkit-transform: none;
transform: none
}

@media  only screen and (max-width: 740px) {
.footer-note {
position: absolute;
height: auto;
left: 20px;
right: 20px;
margin-bottom: 16px;
}

.footer-note.footer-custom-links a {
display: block;
float: left;
border: 0;
font-size: 12px;
line-height: 30px;
margin-right: 10px;
}

.footer-note.footer-custom-links span {
display: none;
}

.footer-note.footer-custom-links a.logo-link {
float: right;
margin-right: 5px;
height: 30px;
background-position: center -22px;
-webkit-transform: none;
transform: none;
transition: none;
}
}

#logo {
top: 45%;
left: 0;
z-index: 20;
font-size: 35px;
color:#00B1CF;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: neuropolitical
}

.current-section-2 #logo, .current-section-4 #logo {
color: #f6f6f4
}

.description {
color: #676767;
font-size: 30px;
margin-top: 30px;
display: none;
-webkit-transition: display 2s;
transition: display 2s
}

.current-section-0 #logo .description, .current-section-8 #logo .description {
display: block
}

.current-section-8 #logo .description {
color: #f6f6f4
}

body[data-current-section="8"] #logo {
color: #fff;
top: 35%
}

#logo .download-list {
font-size: 11px;
top: 82px;
margin: 10px auto auto;
display: none
}

.current-section-0 #logo .download-list, .current-section-8 #logo .download-list {
display: block
}

#logo .download-list li {
float: none;
display: inline;
font-family: Avenir-Next
}

a.language, body {
font-family: IRANSans
}

#logo .download-list li a {
color: #999;
cursor: pointer
}

#logo .download-list li a img {
width: 32px;
opacity: .5
}

#logo .download-list li.link a:hover img {
opacity: 1
}

.current-section-8 #logo .download-list li a {
color: #fff
}

#logo .download-list li a:hover {
color: rgba(0, 155, 228, .9)
}

#logo span {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: -webkit-transform 3s cubic-bezier(.075, .82, .165, 1), color .8s cubic-bezier(.55, .085, .68, .53);
transition: transform 3s cubic-bezier(.075, .82, .165, 1), color .8s cubic-bezier(.55, .085, .68, .53)
}

#logo span:not(:last-child) {
margin-right: 3.6rem
}

.started #logo span:nth-child(1) {
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0)
}

.started #logo span:nth-last-child(1) {
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0)
}

.started #logo span:nth-child(2) {
-webkit-transform: translate3d(-24px, 0, 0);
transform: translate3d(-24px, 0, 0)
}

.started #logo span:nth-last-child(2) {
-webkit-transform: translate3d(24px, 0, 0);
transform: translate3d(24px, 0, 0)
}

.started #logo span:nth-child(3) {
-webkit-transform: translate3d(-18px, 0, 0);
transform: translate3d(-18px, 0, 0)
}

.started #logo span:nth-last-child(3) {
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0)
}

.started #logo span:nth-child(4) {
-webkit-transform: translate3d(-12px, 0, 0);
transform: translate3d(-12px, 0, 0)
}

.started #logo span:nth-last-child(4) {
-webkit-transform: translate3d(12px, 0, 0);
transform: translate3d(12px, 0, 0)
}

.started #logo span:nth-child(5) {
-webkit-transform: translate3d(-6px, 0, 0);
transform: translate3d(-6px, 0, 0)
}

.started #logo span:nth-last-child(5) {
-webkit-transform: translate3d(6px, 0, 0);
transform: translate3d(6px, 0, 0)
}

body[data-current-section="8"] #logo span {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important
}

@media  only screen and (max-width: 1023px) {
#logo {
font-size: 4rem
}

#logo span:not(:last-child) {
margin-right: 1.5rem
}
}

@media  only screen and (max-width: 740px) {
#logo {
position: absolute;
top: 30%;
padding-left: 1.2rem;
font-size: 25px;
letter-spacing: .1rem;
line-height: 30px;
color:#00B1CF !important;
}

#logo p {
font-size: 20px;
margin-top: 10px;
display: block;
color: #676767 !important
}

#logo span:not(:last-child) {
margin-right: 0
}
}

@media  only screen and (max-width: 350px) {
#logo {
padding-left: 1rem;
letter-spacing: 1rem;
top: 20%
}

#logo .download-list {
letter-spacing: normal;
top: 126px
}
}

.footer-note, .tagline strong, h2 {
letter-spacing: 0
}

@media  only screen and (max-height: 540px) {
#logo {
top: 28%
}
}

@media  only screen and (max-height: 500px) {
#logo {
top: 25%
}
}

.nav-btn {
display: block;
position: relative;
width: 100%;
height: 35px;
text-indent: -9999px;
overflow: hidden;
border: none;
background: 0 0;
-webkit-transform: translate3d(56px, 0, 0);
transform: translate3d(56px, 0, 0);
transition: .5s cubic-bezier(.455, .03, .515, .955)
}

.nav-btn:after {
position: absolute;
left: 50%;
width: 10px;
height: 1px;
margin-left: -5px;
background: #e5e5e5
}

.nav-btn:disabled {
cursor: default
}

.nav-btn:hover span {
opacity: .5
}

.nav-btn.up {
margin-bottom: 20px;
transition-delay: .4s
}

.nav-btn.up:hover span {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}

.nav-btn.up:disabled span {
-webkit-transform: translate3d(0, 35px, 0);
transform: translate3d(0, 35px, 0)
}

.nav-btn.up:after {
bottom: 0
}

.nav-btn.down {
margin-top: 20px;
transition-delay: 0s
}

.nav-btn.down:after {
top: 0
}

.nav-btn.down:hover span {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}

.nav-btn.down:disabled span {
-webkit-transform: translate3d(0, -35px, 0);
transform: translate3d(0, -35px, 0)
}

.nav-btn.down span {
background-position: center -166px
}

.nav-btn span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url(/assets/img/icons/icons-sprite.png);
background-repeat: no-repeat;
background-position: center -126px;
opacity: .2;
transition: .3s cubic-bezier(.445, .05, .55, .95)
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
.nav-btn span {
background-image: url(/assets/img/icons/icons-sprite_2x.png);
background-size: 18px 214px
}
}

.started .nav-btn {
-webkit-transform: none;
transform: none
}

.started .nav-btn.up {
transition-delay: .4s
}

.started .nav-btn.down {
transition-delay: .75s
}

#main-nav {
position: fixed;
top: 50%;
right: 0;
z-index: 1000;
width: 55px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}

#main-nav li {
width: 10px;
height: 10px;
margin: 0 auto;
border: 3px solid #d9d9d9;
-webkit-transform: translate3d(40px, 0, 0) rotate(90deg);
transform: translate3d(40px, 0, 0) rotate(90deg);
transition: .5s cubic-bezier(.455, .03, .515, .955)
}

#main-nav li:not(:last-child) {
margin-bottom: 25px
}

#main-nav li:nth-child(1) {
transition-delay: .3s
}

#main-nav li:nth-child(2) {
transition-delay: .25s
}

#main-nav li:nth-child(3) {
transition-delay: .2s
}

#main-nav li:nth-child(4) {
transition-delay: .15s
}

#main-nav li:nth-child(5) {
transition-delay: .1s
}

.started #main-nav li {
-webkit-transform: none;
transform: none
}

.started #main-nav li:nth-child(1) {
transition-delay: .45s
}

.started #main-nav li:nth-child(2) {
transition-delay: .5s
}

.started #main-nav li:nth-child(3) {
transition-delay: .55s
}

.started #main-nav li:nth-child(4) {
transition-delay: .6s
}

.started #main-nav li:nth-child(5) {
transition-delay: .65s
}

#main-nav li.current {
background:#00B1CF;
border-color:#00B1CF;
transition-delay: 0s !important;
}

#main-nav a {
display: none
}

@media  only screen and (max-width: 740px) {
#main-nav {
display: none
}
}
.dynamicpage #sub-nav{
position:static !important;
transform:none !important;
}
#sub-nav {
position: absolute;
top: 55px;
right: 55px;
z-index: 99;
transition: 1.5s cubic-bezier(.785, .135, .15, .86);
-webkit-transform: translate3d(40px, -40px, 0);
transform: translate3d(40px, -40px, 0)
}

.started #sub-nav {
-webkit-transform: none;
transform: none;
transition-delay: 0
}

#sub-nav li {
    float: left
}

#sub-nav li.title {

    margin-right: 20px;
display: none
}

#sub-nav li.title.last {
    margin-right: 35px


}

.current-section-0 #sub-nav li.title {
display: inherit
}

#sub-nav a, .footer-custom-links a {
font-size: 16px;
line-height: 7rem;
color: rgba(60, 59, 54, .7);
border-bottom: 1px solid rgba(0, 0, 0, .1)
}

#sub-nav a.custom {
background-color: #FFCC00;
color: #514F4A;
padding: 10px;
border-radius: 5px
}

.footer-custom-links a {
line-height: 5.5rem;
letter-spacing: 0
}

@media  only screen and (min-width: 741px) {
[data-current-section="4"] #sub-nav {
transition: 1.3s cubic-bezier(.455, .03, .515, .955)
}

[data-current-section="8"] #sub-nav {
transition: 1s cubic-bezier(.455, .03, .515, .955);
-webkit-transform: translate3d(500px, 0, 0);
transform: translate3d(500px, 0, 0)
}

#sub-nav li:last-child {

transition: border 1.5s cubic-bezier(.785, .135, .15, .86)
}

.started #sub-nav li:last-child {

    border-left: solid#00B1CF
}
}

@media  only screen and (max-width: 740px) {
#sub-nav {
position: absolute;
top: auto;
right: auto;
bottom: 125px;
left: 50%;
width: 100%;
text-align: center;
-webkit-transform: translate3d(-50%, 0, 0) !important;
transform: translate3d(-50%, 0, 0) !important
}

#sub-nav li {
float: none;
display: inline-block
}

#sub-nav li.title {
display: none !important
}
}

@media  only screen and (max-height: 440px) {
#sub-nav {
bottom: 100px
}
}

.download-btn, .newsletter-btn {
display: block;
width: 160px;
height: 55px;
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat !important;
border: none !important;
transition: background-color 1.5s cubic-bezier(.785, .135, .15, .86)
}

.download-btn.yellow, .newsletter-btn.yellow, .started .download-btn.yellow, .started .newsletter-btn.yellow {
background-color:#00B1CF
}

.download-btn.black, .newsletter-btn.black {
background-color: #3a3a3a
}

@media  only screen and (max-width: 740px) {
.download-btn, .newsletter-btn {
width: 145px;
height: 44px
}
}

@media  only screen and (max-width: 350px) {
.download-btn, .newsletter-btn {
width: 135px
}
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
.download-btn {
background-image: url(/assets/img/icons/download-btn_2x.png);
background-size: 126px 34px
}

.download-btn.android {
background-image: url(/assets/img/icons/download-btn-android_2x.png);
background-size: 132px 29px
}

.download-btn.windows {
background-image: url(/assets/img/icons/download-btn-windows_2x.png);
background-size: 132px 29px
}
}

@media  only screen and (max-width: 740px) {
.download-btn {
background-size: 115px auto
}

.download-btn.android {
background-size: 120px auto
}
.download-btn.windows {
background-size: 120px auto
}
}

.newsletter-btn {
width: 170px;
background-image: url(/assets/img/icons/newsletter-btn.png);
background-position: center 50%
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
.newsletter-btn {
background-image: url(/assets/img/icons/newsletter-btn_2x.png);
background-size: 135px 27px
}
}

.border {
position: fixed;
z-index: 100;
background: #fff;
transition: 1.5s cubic-bezier(.785, .135, .15, .86)
}

.border.hor {
left: 0;
width: 100%;
height: 55px
}

.border.vert {
top: 0;
width: 55px;
height: 100%
}

.border.top {
top: 0;
-webkit-transform: translate3d(0, -40px, 0);
transform: translate3d(0, -40px, 0)
}

.border.bot {
bottom: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0)
}

.border.left {
left: 0;
-webkit-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0)
}

.border.right {
right: 0;
-webkit-transform: translate3d(40px, 0, 0);
transform: translate3d(40px, 0, 0)
}

.started .border {
-webkit-transform: none;
transform: none;
transition-delay: 0
}

@media  only screen and (max-width: 740px) {
.border {
z-index: 1000;
-webkit-transform: none !important;
transform: none !important
}

.border.hor {
height: 10px
}

.border.vert {
width: 10px;
height: 130%
}

#stripe {
display: none
}
}

#stripe {
position: absolute;
top: 100%;
left: 55px;
z-index: 10;
width: calc(100% - 110px);
height: 105%;
background:#00B1CF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}

#illustration-01 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1
}

#illustration-01 div {
position: absolute;
background-size: contain !important
}

#illustration-01 div div {
opacity: .4
}

#illustration-01 .bottle {
top: -2%;
left: 50%;
z-index: 100;
width: 248px;
height: 636px;
background-image: url(/assets/img/illustration/Asset_28.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
transition: 2s ease
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
#illustration-01 .bottle {
background-image: url(/assets/img/illustration/Asset_28.png);
background-size: 248px 636px;
top: -10%
}
}

.started #illustration-01 .bottle {
-webkit-transform: translate3d(-50%, 30px, 0) scale(.95);
transform: translate3d(-50%, 30px, 0) scale(.95)
}

@media  only screen and (min-width: 1200px) {
#illustration-01 .bottle {
top: 5%;
width: 20%
}
}

@media  only screen and (min-width: 1500px) {
#illustration-01 .bottle {
width: 22%;
height: auto;
position: relative;
top: -14%
}

#illustration-01 .bottle > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}

#illustration-01 .bottle:before {
content: "";
display: block;
padding-top: 257.25%
}
}

#illustration-01 .branches {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 2s cubic-bezier(.785, .135, .15, .86)
}

.started #illustration-01 .branches {
-webkit-transform: translate3d(0, -10px, 0) scale(.9);
transform: translate3d(0, -10px, 0) scale(.9)
}

#illustration-01 .branch-01, #illustration-01 .branch-02, #illustration-01 .branch-03 {
width: 250px;
height: 238px;
background-image: url(/assets/img/illustration/Asset_31.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
opacity: 1
}

#illustration-01 .leaf-01, #illustration-01 .leaf-02 {
opacity: .6 !important;
background-repeat: no-repeat;
background-position: center
}

@media  only screen and (min-width: 1500px) {
#illustration-01 .branch-01, #illustration-01 .branch-02, #illustration-01 .branch-03 {
width: 17.36%;
height: auto;
position: relative
}

#illustration-01 .branch-01 > div, #illustration-01 .branch-02 > div, #illustration-01 .branch-03 > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}

#illustration-01 .branch-01:before, #illustration-01 .branch-02:before, #illustration-01 .branch-03:before {
content: "";
display: block;
padding-top: 95.2%
}
}

#illustration-01 .branch-01 {
background-image: url(/assets/img/illustration/Asset_30.png);
top: 335px;
left: 18%;
-webkit-transform: rotateY(180deg) rotateZ(28deg) scale(.8);
transform: rotateY(180deg) rotateZ(28deg) scale(.8)
}

#illustration-01 .branch-02 {
top: 1%;
left: 18.5%;
-webkit-transform: rotateY(180deg) rotateZ(28deg) scale(.8);
transform: rotateY(180deg) rotateZ(28deg) scale(.8)
}

@media  only screen and (min-width: 1500px) {
#illustration-01 .branch-02 {
top: -38%
}
}

#illustration-01 .branch-03 {
top: 18%;
left: 64%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg)
}

@media  only screen and (min-width: 1500px) {
#illustration-01 .branch-03 {
top: -51%
}
}

#illustration-01 .branch-top {
top: 17%;
left: 15%;
width: 359px;
height: 224px;
background-image: url(/assets/img/illustration/Asset_32.png);
background-repeat: no-repeat;
background-position: center;
-webkit-transform: rotateY(180deg) rotateZ(28deg) scale(.8);
transform: rotateY(180deg) rotateZ(28deg) scale(.8)
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
#illustration-01 .branch-01, #illustration-01 .branch-02, #illustration-01 .branch-03 {
background-size: 250px 238px
}

#illustration-01 .branch-top {
background-image: url(/assets/img/illustration/Asset_32.png);
background-size: 359px 224px;
left: 4%
}

#illustration-01 .leaf-01 {
background-image: url(/assets/img/illustration/igap-world.png);
background-size: 146px 59px
}
}

#illustration-01 .leaf-01 {
top: 58%;
left: 24%;
width: 200px;
height: 225px;
background-image: url(/assets/img/illustration/igap-world.png)
}

#illustration-01 .leaf-02 {
top: 45%;
left: 65%;
width: 171px;
height: 396px;
background-image: url(/assets/img/illustration/Asset_29.png)
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
#illustration-01 .leaf-02 {
background-size: 125px 49px
}
}

@media  only screen and (max-width: 740px) {
#illustration-01 {
position: absolute;
width: 100%;
height: 90%;
top: 22px;
right: auto;
background-image: url(/assets/img/illustration/Asset_28.png);
background-repeat: no-repeat;
background-size: 49% auto !important;
opacity: .7;
background-position: top center
}

#illustration-01 div {
display: none
}
}

@media  only screen and (max-width: 480px) {
#illustration-01 {
background-size: 70% auto !important
}
}

@media  only screen and (max-width: 740px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 740px) and (min--moz-device-pixel-ratio: 1.3), only screen and (max-width: 740px) and (-o-min-device-pixel-ratio: 1.3/1), only screen and (max-width: 740px) and (min-resolution: 125dpi), only screen and (max-width: 740px) and (min-resolution: 1.3dppx) {
#illustration-01 {
background-image: url(/assets/img/illustration/Asset_28.png);
background-size: 375px 325px
}
}

#illustration-02 {
position: absolute;
top: 4%;
left: 50%;
z-index: 10;
width: 587px;
height: 715px;
margin-left: -300px;
background-image: url(/assets/img/illustration/en_land_mark.png);
opacity: 0;
-webkit-transform: translate3d(0, 100px, 0) scale(.9);
transform: translate3d(0, 100px, 0) scale(.9);
transition: .5s cubic-bezier(.55, .085, .68, .53);
background-size: 100%;
background-repeat: no-repeat;
background-position: center
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
#illustration-02 {
background-size: 75%
}
}

body[data-current-section="8"] #illustration-02 {
opacity: .3;
-webkit-transform: none;
transform: none;
transition: 2s .3s cubic-bezier(.075, .82, .165, 1)
}

@media  only screen and (max-width: 740px) {
#illustration-02 {
top: 5%;
z-index: 0;
width: 300px;
height: 490px;
margin-left: -148px;
background-size: 100%;
opacity: .3;
-webkit-transform: none;
transform: none
}
}

.main-articles {
position: absolute;
right: 0;
top: 10000px
}

@media (max-width: 740px) {
.main-articles {
display: none !important
}
}

body {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased
}

h1, h2, h3, h4, h5, h6 {
font-family: inherit
}

#sub-nav li.title, .description, .footer-note, .tagline strong {
font-family: IRANSans
}

#sections-list article {
font-size: 14px
}

@media  only screen and (max-width: 740px) {
#sections-list article {
bottom: 71px;
font-size: 12px;
right: 10px;
}
}

#sub-nav a.custom {
font-size: 15px
}

.download-btn {
background-image: url(/assets/img/icons/en_apple.png);
background-position: center 40%
}



.download-btn.android {
background-image: url(/assets/img/icons/en_google.png);
background-position: center 50%
}
.download-btn.windows {
background-image: url(/assets/img/icons/en_appgallery.png);
background-position: center 50%
}


.alexa-ark {
display: none;
}