* {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
    color: #333;
    font-weight: 100;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    height: 100%;
    overflow: hidden
}

body {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden
}

b {
    font-weight: 600
}

h1 {
    font-size: 30px;
    font-weight: 700;
    display: block;
    margin-bottom: 40px
}

h2 {
    font-size: 27px;
    font-weight: 700;
    display: block;
    margin-bottom: 20px
}

h3 {
    font-size: 40px;
    font-weight: 700;
    display: block;
    margin-bottom: 50px
}

h4 {
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px
}

a {
    display: inline-block
}

.t-center {
    text-align: center
}

.t-left {
    text-align: left
}

.t-right {
    text-align: right
}

.container {
    padding: 0 10vw;
    margin: auto
}

svg.contenter {
    height: 100%;
    width: 100%
}

.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    display: inline-block;
    vertical-align: top
}

.col-1 {
    width: 8.3%
}

.col-2 {
    width: 16.6%
}

.col-3 {
    width: 24.9%
}

.col-4 {
    width: 33.1%
}

.col-5 {
    width: 40.4%
}

.col-6 {
    width: 48.8%
}

.col-7 {
    width: 57.2%
}

.col-8 {
    width: 65.5%
}

.col-9 {
    width: 73.8%
}

.col-10 {
    width: 81.1%
}

.col-11 {
    width: 89.4%
}

.col-12 {
    width: 100%
}

.ani3 {
    transition: .3s all;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    -o-transition: .3s all
}

.ani6 {
    transition: .6s all;
    -webkit-transition: .6s all;
    -moz-transition: .6s all;
    -o-transition: .6s all
}

.ani10 {
    transition: 1s all;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all
}

.ani20 {
    transition: 2s all;
    -webkit-transition: 2s all;
    -moz-transition: 2s all;
    -o-transition: 2s all
}

.ani3transform {
    transition: .3s transform;
    -webkit-transition: .3s transform;
    -moz-transition: .3s transform;
    -o-transition: .3s transform
}

.ani6transform {
    transition: .6s transform;
    -webkit-transition: .6s transform;
    -moz-transition: .6s transform;
    -o-transition: .6s transform
}

.ani10transform {
    transition: 1s transform;
    -webkit-transition: 1s transform;
    -moz-transition: 1s transform;
    -o-transition: 1s transform
}

.ani20transform {
    transition: 2s transform;
    -webkit-transition: 2s transform;
    -moz-transition: 2s transform;
    -o-transition: 2s transform
}

.ani3background {
    transition: .3s background;
    -webkit-transition: .3s background;
    -moz-transition: .3s background;
    -o-transition: .3s background
}

.ani6background {
    transition: .6s background;
    -webkit-transition: .6s background;
    -moz-transition: .6s background;
    -o-transition: .6s background
}

.ani10background {
    transition: 1s background;
    -webkit-transition: 1s background;
    -moz-transition: 1s background;
    -o-transition: 1s background
}

.ani20background {
    transition: 2s background;
    -webkit-transition: 2s background;
    -moz-transition: 2s background;
    -o-transition: 2s background
}

.ani3opacity {
    transition: .3s opacity;
    -webkit-transition: .3s opacity;
    -moz-transition: .3s opacity;
    -o-transition: .3s opacity
}

.ani6opacity {
    transition: .6s opacity;
    -webkit-transition: .6s opacity;
    -moz-transition: .6s opacity;
    -o-transition: .6s opacity
}

.ani10opacity {
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    -o-transition: 1s opacity
}

.ani20opacity {
    transition: 2s opacity;
    -webkit-transition: 2s opacity;
    -moz-transition: 2s opacity;
    -o-transition: 2s opacity
}

.scale-hover:hover {
    transform: scale(1.1)
}

.opacity-hover:hover {
    opacity: 1
}

.lucida-font {
    font-family: "Lucida Grande"
}

.helvetica-font {
    font-family: "Open Sans"
}

.white,
.white * {
    color: #fff
}

.display {
    min-height: 100vh;
    position: relative
}

.display-1,
.display-2 {
    position: relative;
    height: 100vh
}

.plut-1,
.plut-2 {
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 3
}

.plut-2 {
    right: 0;
    left: 50%
}

.plut-1 {
    left: 0;
    right: 50%
}

.display-1 .plut-1 {
    background: #49eec8;
    background: -moz-linear-gradient(146deg, #49eec8 0, #52d2f0 100%);
    background: -webkit-linear-gradient(146deg, #49eec8 0, #52d2f0 100%);
    background: linear-gradient(135deg, #49eec8 0, #52d2f0 100%);
    right: 0;
    left: 50%
}

.display-1 .plut-2 {
    left: 0;
    right: 50%
}

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%
}

.active .top-bar {
    opacity: .4
}

.disp-phone-1 {
    position: fixed;
    pointer-events: none;
    top: 0;
    bottom: 0;
    width: 50vw;
    opacity: 1;
    background: url(../img/mac-white.svg) center top 2.5vw/auto 81vh no-repeat, transparent
}

.disp-phone-1.dp-2 {
    opacity: 0;
    background: url(../img/mac-black.svg) center top 2.5vw/auto 81vh no-repeat, transparent
}

.stop .disp-phone-1 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 50vw;
    height: 100%
}

.active .disp-phone-1 {
    opacity: 0
}

.active .disp-phone-1.dp-2 {
    opacity: 1
}

.display-1 .plut-2 {
    text-align: center
}

.display-1 .plut-2:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

.display-1 .plut-2 h1 {
    font-size: 27px;
    font-weight: 700;
    display: block;
    margin-bottom: 40px
}

.display-1 .plut-2 p {
    display: block;
    font-size: 18px;
    margin-bottom: 40px
}

.display .pl-wrap {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    width: 50%
}

.logo-noizio {
    width: 120px;
    margin-bottom: 60px
}

.display-2 {
    position: relative;
    background: #0d010c;
    background: -moz-linear-gradient(180deg, #0d010c 0, #00252e 100%);
    background: -webkit-linear-gradient(180deg, #0d010c 0, #00252e 100%);
    background: linear-gradient(180deg, #0d010c 0, #00252e 100%)
}

@-webkit-keyframes starsAni {
    0% {
        transform: translate(0, 0)
    }
    50% {
        transform: translate(-100%, 0)
    }
    100% {
        transform: translate(0, 0)
    }
}

.display-2 .stars {
    background: url(../img/stars.svg) center top 20%/auto 50% repeat-x;
    position: absolute;
    left: 0;
    top: 0;
    right: -3000px;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    -webkit-animation: starsAni 800s infinite linear;
    animation: starsAni 800s infinite linear
}

.display-2.active .stars {
    opacity: 1
}

@-webkit-keyframes bounced {
    0% {
        opacity: 0;
        transform: translate(0, -100px)
    }
    40% {
        transform: translate(0, 0)
    }
    55% {
        transform: translate(0, -20px)
    }
    70% {
        transform: translate(0, 0)
    }
    82% {
        transform: translate(0, -10px)
    }
    90% {
        transform: translate(0, 0)
    }
    95% {
        transform: translate(0, -2px)
    }
    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

.display-2 .luna {
    width: 4vw;
    height: 4vw;
    position: absolute;
    top: 15%;
    left: 50%;
    opacity: 0;
    z-index: 1;
    margin-left: -15px;
    background: url(../img/luna.svg) center/auto 100% no-repeat
}

.display-2.active .luna {
    opacity: 1;
    -webkit-animation: bounced .8s linear;
    animation: bounced .8s linear
}

.display-2 .clouds {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: url(../img/cloud-1.svg) left 10% bottom 35% no-repeat, url(../img/cloud-2.svg) right 45% bottom 10% no-repeat
}

.display-2 .container {
    height: 100%;
    padding-right: 47vw;
    position: relative;
    z-index: 3
}

.display-2 .pl-wrap {
    width: 100%;
    max-width: none
}

.display-3 .pl-wrap {
    text-align: center
}

.display-3 .plut-2 p {
    margin-bottom: 30px
}

.display-3 .plut-2 {
    text-align: center
}

.display-3 .plut-1 {
    background: #49eec8;
    background: -moz-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
    background: -webkit-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
    background: linear-gradient(180deg, #49eec8 0, #52d2f0 100%)
}

.display-3 .disp-hand {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50vw;
    background: url(../img/iphone12.png) right 40% bottom 50%/auto 90% no-repeat;
    background: url(../img/iphone12.webp) right 40% bottom 50%/auto 90% no-repeat;
    background-position: center !important
}

.display-3.fix .disp-hand {
    position: fixed
}

.display-3.lock .disp-hand {
    position: absolute;
    top: 100%
}

.display-3 .disp-hand-2 {
    background: url(../img/iphone12-dark.png) right 40% bottom 50%/auto 90% no-repeat;
    background: url(../img/iphone12-dark.webp) right 40% bottom 50%/auto 90% no-repeat;
    opacity: 0
}

.display-3.screen .disp-hand-2 {
    opacity: 1
}

.display-4 {
    background: url(../img/back-4.jpg) center/cover no-repeat
}

.line {
    height: 30px
}

.display-4 .plut-2 {
    padding: 0 5vw
}

.display-4 .pl-wrap {
    width: 80%
}

.display-4 li,
.display-4 p {
    font-size: 16px
}

.display-5 {
    padding: 65px 50px
}

.noi-over {
    width: 100%;
    overflow: hidden;
    overflow-x: auto
}

.noi-list {
    margin: auto;
    width: 1145px
}

.noi-list .noi-item {
    position: relative;
    padding: 5px;
    padding-left: 65px;
    height: 42px;
    margin: 20px 15px;
    display: inline-block;
    width: 195px
}

.noi-list .img {
    width: 32px;
    background-repeat: no-repeat;
    height: 32px;
    position: absolute;
    left: 5px;
    top: 5px
}

.noi-list .name {
    font-family: 'Open Sans';
    font-size: 14px;
    margin-top: 7px
}

.display-6 {
    padding: 75px 50px;
    background: #d2fbf2;
    background: -moz-linear-gradient(113deg, #d2fbf2 0, #d4f4fc 100%);
    background: -webkit-linear-gradient(113deg, #d2fbf2 0, #d4f4fc 100%);
    background: linear-gradient(113deg, #d2fbf2 0, #d4f4fc 100%)
}

.reviews {
    text-align: center
}

.reviews .reviews-item {
    display: inline-block;
    text-align: left;
    width: 333px;
    vertical-align: top;
    margin: 10px 30px
}

.reviews .reviews-item .top {
    position: relative;
    min-height: 40px;
    margin: 20px 0;
    padding-left: 50px
}

.reviews .reviews-item .name {
    font-weight: 600;
    color: #333;
    font-size: 14px
}

.reviews .reviews-item .info {
    font-size: 13px;
    color: #333
}

.reviews .reviews-item .img {
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    background-size: 100%;
    left: 0;
    top: 0
}

.display-7 {
    padding: 55px 50px;
    text-align: center
}

.logo-list {
    max-width: 1200px;
    display: inline-block
}

.logo-list a {
    width: 150px;
    height: 70px;
    display: inline-block;
    margin: 30px 60px
}

.logo-list a:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

.logo-list a img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
    max-height: 100%
}

.logo-list div {
    width: 150px;
    height: 70px;
    display: inline-block;
    margin: 30px 60px
}

.logo-list div img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
    max-height: 100%
}


.logo-list #a {
    width: 150px;
    height: 70px;
    display: inline-block;
    margin: 30px 60px
}
.logo-list #a img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
    max-height: 100%
}

.footer-bottom {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: #49eec8;
    background: -moz-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
    background: -webkit-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
    background: linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
    text-align: center;
    padding: 50px 50px 40px
}

.footer .links-list {
    margin-bottom: 40px
}

.footer .links-list a {
    display: inline-block;
    text-decoration: none;
    margin: 6px 20px;
    font-family: 'Open Sans'
}

.footer .copy {
    margin-bottom: 15px
}

.footer .copy,
.footer .ukraine {
    color: #90fff6;
    font-size: 14px
}

.footer .ukraine span {
    color: #90fff6;
    font-size: 18px
}

.display-7 {
    background: #f8f9fb
}

.video-review {
    max-width: 1180px;
    margin: 0 auto
}

.video-review__title {
    font-size: 40px;
    font-weight: 700;
    display: block;
    font-family: "Open Sans";
    line-height: 1.4;
    margin: 70px 0 20px;
    text-align: center
}

.video-review__snippet {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 50px
}

.video-review__container {
    max-width: 740px;
    margin: 0 auto;
    border: 10px solid #fff;
    box-shadow: 0 10px 40px #e5e5e5;
    margin-bottom: 15px
}

.video-review__container iframe {
    max-width: 720px;
    max-height: 405px;
    width: 100%;
    height: 42vw
}

@media screen and (max-width:452px) {
    .video-review__container {
        margin-bottom: 80px
    }
}

.latest__title {
    margin-top: 70px;
    margin-bottom: 60px;
    font-size: 40px;
    font-weight: 700
}

.latest__wrapper {
    display: flex;
    max-width: 1180px;
    margin: 80px auto
}

.latest__item {
    display: block;
    margin: 0 30px 70px;
    flex: 1;
    text-decoration: none;
    font-family: Roboto !important
}

.latest__item-img {
    margin-bottom: 20px
}

.latest__item-header {
    margin-bottom: 10px
}

.latest__item-header span {
    transition: .1s;
    color: #333;
    line-height: 1.2;
    font-size: 24px;
    font-weight: 900
}

.latest__item-paragraph {
    line-height: 1.6
}

.latest__item-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden
}

.latest__item-img-wrapper img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: .2s
}

.latest__item:hover img {
    height: 110%
}

latest__item:hover .latest__item-header span {
    border-bottom: 2px solid #333
}

@media screen and (max-width:890px) {
    .latest__wrapper {
        flex-wrap: wrap
    }
    .latest__item {
        flex: 1 1 100%;
        margin: 0 20px 70px 20px
    }
}

@media (max-aspect-ratio:5/3) {
    .youtube {
        height: 200px !important
    }
    .display-3 .disp-hand-2 {
        background: url(../img/iphone12-dark.png) right 7vw bottom/auto 90% no-repeat;
        background: url(../img/iphone12-dark.webp) right 7vw bottom/auto 90% no-repeat;
        background-position: center
    }
}

@media (max-aspect-ratio:7/6) {
    .active .top-bar {
        opacity: 1
    }
    .display-5 {
        display: none
    }
    .disp-phone-1 {
        position: absolute;
        width: 100%;
        background: url(../img/mac-white.svg) center top 5.5vw/auto 81vh no-repeat, transparent
    }
    .disp-phone-1.dp-2 {
        position: absolute;
        width: 100%;
        background: url(../img/mac-black.svg) center top 5.5vw/auto 81vh no-repeat, transparent
    }
    div div .plut-1 {
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 100% !important
    }
    div div .plut-2 {
        left: 0 !important;
        width: 100% !important;
        top: auto !important;
        bottom: 0 !important;
        height: 75vh !important;
        padding-left: 20px;
        padding-right: 20px
    }
    .display-1,
    .display-3 {
        height: 175vh
    }
    .display-3 .disp-hand {
        pointer-events: initial;
        width: 100%;
        background-position: center !important
    }
    .display .pl-wrap {
        width: 95%
    }
    .display-2 .container {
        padding: 0 40px
    }
    .display-4 .plut-1 {
        display: none
    }
    .display-4 .plut-2 {
        top: 0 !important
    }
    .display-4 foreignObject {
        width: 300px
    }
    .logo-list a {
        margin: 10px 20px
    }
    .display-7 {
        padding: 50px 10px
    }
    .display-4 {
        height: 80vh;
        min-height: auto
    }
    .display-2 .contenter,
    .display-4 .contenter {
        display: none
    }
    .display-2 {
        min-height: auto;
        height: auto;
        padding-top: 200px;
        padding-bottom: 100px
    }
    .display-4 {
        padding: 40px 40px;
        height: auto;
        min-height: auto
    }
    .display-4 ul {
        list-style-type: none
    }
    .display-2 .luna {
        width: 10vw;
        height: 10vw;
        opacity: 1 !important;
        z-index: 4 !important;
        display: block !important;
        animation: none !important
    }
    .display-4 .plut-2 {
        position: initial;
        height: auto !important;
        padding: 0 !important
    }
    .display-4 {
        background: url(../img/back-4.jpg) center right/cover no-repeat
    }
    @media(max-aspect-ratio:5/6) {
        .display-1 {
            height: 155vh
        }
        .display-1 .plut-1 {
            height: 80vh !important
        }
        .disp-phone-1 {
            position: absolute;
            width: 100%;
            background: url(../img/mac-white.svg) center top 5.5vw/auto 72vh no-repeat, transparent
        }
        .disp-phone-1.dp-2 {
            position: absolute;
            width: 100%;
            background: url(../img/mac-black.svg) center top 5.5vw/auto 72vh no-repeat, transparent
        }
        .display-2 {
            padding-top: 180px
        }
        .display-2 .pl-wrap h2,
        .display-4 .pl-wrap h2 {
            font-size: 20px
        }
        .display-2 .pl-wrap p,
        .display-4 .pl-wrap li,
        .display-4 .pl-wrap p {
            font-size: 12px
        }
        .footer .links-list a {
            width: 100%;
            margin: 10px 0
        }
        h1 {
            font-size: 30px
        }
        .reviews .reviews-item {
            width: 100%;
            margin: 20px 0
        }
        .logo-list a {
            width: 100px
        }
        .display-3 .plut-1 {
            height: 90vh
        }
        .display-2 {
            height: auto
        }
        .display-2 .luna {
            width: 20vw;
            height: 20vw;
            margin-left: -10vw
        }
        .display-2 .stars {
            background: url(../img/stars.svg) center top 20%/auto 30% repeat-x
        }
    }
}

.youtube {
    background-color: #000;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer
}

.youtube img {
    width: 100%;
    top: -16.82%;
    left: 0;
    opacity: .7
}

.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    z-index: 1;
    opacity: .8;
    border-radius: 6px
}

.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff
}

.youtube .play-button,
.youtube img {
    cursor: pointer
}

.youtube .play-button,
.youtube .play-button:before,
.youtube iframe,
.youtube img {
    position: absolute
}

.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

        #footer {
            background: #49eec8;
            background: -moz-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
            background: -webkit-linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
            background: linear-gradient(180deg, #49eec8 0, #52d2f0 100%);
            text-align: center;
            padding: 50px 50px 40px
        }