@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Titillium Web Regular"), url(fonts/TitilliumWeb-Regular.ttf) format("truetype")
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Titillium Web SemiBold"), url(fonts/TitilliumWeb-SemiBold.ttf) format("truetype")
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

:hover {
    -webkit-transition: .2s;
    transition: .2s
}

body * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit
}

body,
html {
    min-height: 100%;
    min-width: 100%
}

html {
    overflow-x: hidden
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1
}

article,
aside,
div,
footer,
header,
main,
nav,
section {
    display: block
}

img {
    border: 0;
    border-radius: 0;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
}

iframe {
    display: block;
    border: 0;
    border-radius: 0
}

a,
button,
input,
label,
span {
    display: inline-block
}

a,
button {
    -webkit-transition: .2s;
    transition: .2s
}

html::-webkit-scrollbar {
    width: 8px
}

html::-webkit-scrollbar-thumb {
    background-color: #ffffff80;
    border-radius: 24px;
    border: 1px solid #ffffff80
}

html::-webkit-scrollbar-track {
    background: #01346a
}

.navigation .logoLink:hover,
.navigation .menuList .menuListItem:hover,
.navigation .platforms .platformLink:hover,
footer .footerBottom .buttonPresskitDownload:hover,
footer .footerBottom .feedbackLink:hover,
footer .footerBottom .socialsList .socialsListItem:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.container {
    margin: 0 auto;
    max-width: 1200px
}

.hidden {
    display: none
}

body {
    font-family: 'Titillium Web', sans-serif;
    background: #09f
}

input::-webkit-input-placeholder {
    color: #65a0c7
}

input:-ms-input-placeholder {
    color: #65a0c7
}

input::-ms-input-placeholder {
    color: #65a0c7
}

input::placeholder {
    color: #65a0c7
}

input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: .2s;
    transition: .2s
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
    -webkit-transition: background-color 6000s ease-in-out 0s;
    transition: background-color 6000s ease-in-out 0s
}

::-moz-selection {
    background: #bdc1c5bf
}

::selection {
    background: #bdc1c5bf
}

header .headerBg {
    width: 100%;
    height: 44.16667vw;
    pointer-events: none;
    background-image: url(../img/headerBg.jpg);
    background-repeat: no-repeat;
    background-size: contain
}

header .tabletHeaderBg {
    background-image: url(../img/tabletHeaderBg.jpg);
    background-repeat: no-repeat;
    background-size: contain
}

header .mobileHeaderBg {
    background-image: url(../img/mobileHeaderBg.jpg);
    background-repeat: no-repeat;
    background-size: contain
}

.navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.85417vw;
    z-index: 100;
    background: url(../img/navigationBg.png) no-repeat;
    background-size: cover
}

.navigation.thin {
    top: -24px
}

.navigation .navigationGroup {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%
}

.navigation .logoLink .logoImg {
    width: 8.54167vw;
    height: 1.77083vw
}

.navigation .menuList .menuListItem {
    color: #5cb7f0;
    text-transform: uppercase;
    font-size: 1.5625vw;
    font-weight: 600;
    position: relative;
    margin: 0 1.04167vw
}

.navigation .menuList .menuListItem:hover {
    color: #8bcbf4
}

.navigation .menuList .menuListItem::after {
    content: '';
    display: block;
    position: absolute;
    right: calc(-20 * 100vw / 1920 - 5px);
    bottom: calc(50% - 46px);
    width: 10px;
    height: 92px;
    z-index: 10;
    background: url(../img/dividerVerticalSmall.png) no-repeat
}

.navigation .menuList .menuListItem:last-child::after {
    display: none
}

.navigation .platforms .platformLink {
    margin-right: .83333vw
}

.navigation .platforms .platformLink:last-child {
    margin-right: 0
}

.navigation .platforms .platformLink .platformImg {
    width: 8.54167vw;
    height: 3.38542vw
}

footer {
    width: 100%;
    height: 45.67708vw;
    background: url(../img/footerBg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: calc(77 * 100vw / 1920);
    text-align: center
}

footer .footerTop {
    margin-bottom: 40px
}

footer .footerTop h2 {
    color: #eff9ff;
    text-shadow: 0 2px 2px #00000040;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 24px
}

footer .footerTop form {
    margin: 0 auto
}

footer .footerTop form .inputSubscribe {
    background: url(../img/inputBg.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 286px;
    height: 64px;
    text-align: left;
    padding-left: 36px;
    font-size: 18px;
    font-weight: 600;
    color: #fff
}

footer .footerTop form .buttonSubscribe {
    width: 140px;
    height: 50px;
    background: url(../img/buttonSubscribe.png) no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    text-shadow: 0 2px 2px #00000040;
    font-size: 22px;
    font-weight: 600;
    color: #e0f1ff;
    position: relative;
    top: 5px;
    left: -28px
}

footer .footerTop form .buttonSubscribe:hover {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
    cursor: pointer
}

footer .footerTop form .validationMessageBox {
    color: #fff;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s
}

footer .footerTop form .validationMessageBox.error {
    margin-top: 40px;
    -webkit-transition: .2s;
    transition: .2s;
    opacity: 1;
    font-weight: 600
}

footer .footerTop form .validationMessageBox.invalid {
    opacity: .2s;
    text-shadow: 0 0 24px #ffffff88
}

footer .footerBottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

footer .footerBottom .buttonPresskitDownload {
    background: url(../img/buttonPresskitBg.png) no-repeat;
    width: 275px;
    height: 81px;
    color: #e0f1ff;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

footer .footerBottom .buttonPresskitDownload:hover {
    color: #fff
}

footer .footerBottom .socialsList .socialsListItem {
    margin-right: calc(13 * 100vw / 1920)
}

footer .footerBottom .socialsList .socialsListItem:last-child {
    margin-right: 0
}

footer .footerBottom .socialsList .socialsListItem .footerSocialsImg {
    width: 62px;
    height: 62px;
    -o-object-fit: contain;
    object-fit: contain
}

footer .footerBottom .footerDividerImg {
    width: 5px;
    height: 99px;
    margin: 0 56px
}

footer .footerBottom .feedbackLink {
    color: #b6e0ff;
    text-shadow: 0 2px 2px #00000040;
    font-size: 16px;
    font-weight: 600;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 275px;
    text-align: left
}

footer .footerBottom .feedbackLink:hover {
    color: #d6eefe
}

.video {
    width: 100%;
    height: 40.36458vw;
    background: url(../img/videoBg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: calc(72 * 100vw / 1920)
}

.video .videoWrapper {
    background: url(../img/videoWrapper.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 56.40625vw;
    height: 32.86458vw;
    margin: 0 auto;
    position: relative;
    z-index: 10
}

.video .videoWrapper .videoFrame {
    width: calc(983 * 100vw / 1920);
    height: calc(984 * .5618 * 100vw / 1920);
    position: absolute;
    z-index: 20;
    top: calc(22 * 100vw / 1920);
    left: calc(46 * 100vw / 1920)
}

@media (min-width:1200px) {

    .mobileDivider,
    .mobileFooterLogo,
    .mobileHeaderBg,
    .tabletHeaderBg {
        display: none
    }
}

@media (max-width:1199.5px) {
    .navigation {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .navigation .navigationGroup {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

    .navigation .logoLink,
    .navigation .menuList {
        display: none
    }

    .navigation .platforms {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        padding-top: calc(62 * 100vw / 1080)
    }

    .navigation .platforms .platformLink {
        margin-right: 6.66667vw
    }

    .navigation .platforms .platformLink .platformImg {
        width: calc(428 * 100vw / 1080);
        height: calc(170 * 100vw / 1080)
    }

    header .headerBg,
    header .tabletHeaderBg {
        display: none
    }

    header .mobileHeaderBg {
        display: block;
        width: 100%;
        height: calc(364.44 * 100vw / 320)
    }

    .video {
        background: 0 0;
        height: calc(180 / 320 * 100vw);
        padding: 0
    }

    .video .videoWrapper {
        width: 100%;
        height: 100%;
        background: 0 0
    }

    .video .videoWrapper .videoFrame {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }

    footer {
        background-image: url(../img/mobileFooterBg.jpg);
        background-position: top;
        height: auto;
        padding: calc(140 * 100vw / 1080) 0
    }

    footer .footerTop {
        margin-bottom: calc(58 / 1080 * 100vw)
    }

    footer .footerTop h2 {
        font-size: calc(52 / 1080 * 100vw);
        margin-bottom: calc(42 / 1080 * 100vw - 4px)
    }

    footer .footerTop form .inputSubscribe {
        font-size: 13.33px;
        width: 206px;
        height: 46px;
        padding-left: 24px;
        position: relative;
        top: 0;
        left: 12px
    }

    footer .footerTop form .buttonSubscribe {
        font-size: 16px;
        width: 110px;
        height: 38px;
        position: relative;
        top: 2px;
        left: -12px
    }

    footer .footerTop form .validationMessageBox.error {
        margin-top: calc(46 / 1080 * 100vw)
    }

    footer .footerBottom {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    footer .footerBottom .socialsList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: calc(120 * 100vw / 1080)
    }

    footer .footerBottom .socialsList .socialsListItem {
        margin-right: calc(64 * 100vw / 1080)
    }

    footer .footerBottom .socialsList .socialsListItem .footerSocialsImg {
        height: calc(135 / 1080 * 100vw);
        width: calc(135 / 1080 * 100vw)
    }

    footer .footerBottom .footerDividerImg {
        display: none
    }

    footer .footerBottom .feedbackLink {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        text-align: center;
        font-size: calc(45 / 1080 * 100vw);
        margin-bottom: calc(56 / 1080 * 100vw)
    }

    footer .footerBottom .buttonPresskitDownload {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        background-position: center;
        width: calc(560 / 1080 * 100vw);
        height: calc(162 / 1080 * 100vw);
        font-size: calc(72 / 1080 * 100vw);
        background-size: contain;
        margin-bottom: calc(46 / 1080 * 100vw)
    }

    footer .footerBottom .mobileDivider {
        width: 100%;
        height: calc(2.28 * 100vw / 320);
        margin-bottom: calc(62 / 1080 * 100vw);
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1
    }

    footer .footerBottom .mobileFooterLogo {
        width: calc(215 * 100vw / 1080);
        height: calc(46 * 100vw / 1080)
    }
}

@media (min-width:540px) and (max-width:1199.5px) {
    .navigation .navigationGroup .platforms {
        padding-top: 16px
    }

    .navigation .navigationGroup .platforms .platformLink .platformImg {
        width: 164px;
        height: 65px
    }

    header .headerBg,
    header .mobileHeaderBg {
        display: none
    }

    header .tabletHeaderBg {
        display: block;
        width: 100%;
        height: calc(364.44 * 100vw / 320)
    }

    .video {
        background: 0 0
    }

    footer {
        padding: 120px 0
    }

    footer .footerTop {
        margin-bottom: 32px
    }

    footer .footerTop h2 {
        font-size: 32px;
        margin-bottom: 32px
    }

    footer .footerTop form .inputSubscribe {
        width: 320px;
        height: 72px;
        font-size: 18px;
        padding-left: 40px;
        left: 18px
    }

    footer .footerTop form .buttonSubscribe {
        width: 140px;
        height: 50px;
        font-size: 18px;
        left: -18px;
        top: 5px
    }

    footer .footerBottom .buttonPresskitDownload {
        font-size: 32px;
        width: 275px;
        height: 81px;
        margin-bottom: 32px
    }

    footer .footerBottom .mobileDivider {
        margin-bottom: 32px
    }

    footer .footerBottom .feedbackLink {
        font-size: 18px;
        margin-bottom: 32px
    }

    footer .footerBottom .socialsList {
        margin-bottom: 120px
    }

    footer .footerBottom .socialsList .socialsListItem {
        margin-right: 32px
    }

    footer .footerBottom .socialsList .socialsListItem .footerSocialsImg {
        width: 62px;
        height: 62px
    }
}

@media (min-width:1920.5px) {
    footer .footerTop h2 {
        font-size: calc(28 * 100vw / 1920);
        margin-bottom: calc(24 * 100vw / 1920)
    }

    footer .footerTop form .inputSubscribe {
        width: calc(286 * 100vw / 1920);
        height: calc(64 * 100vw / 1920);
        padding-left: calc(36 * 100vw / 1920);
        font-size: calc(18 * 100vw / 1920)
    }

    footer .footerTop form .buttonSubscribe {
        width: calc(140 * 100vw / 1920);
        height: calc(50 * 100vw / 1920);
        font-size: calc(22 * 100vw / 1920);
        top: calc(5 * 100vw / 1920);
        left: calc(-28 * 100vw / 1920)
    }

    footer .footerTop form .validationMessageBox {
        font-size: calc(16 * 100vw / 1920)
    }

    footer .footerTop form .validationMessageBox.error {
        margin-top: calc(40 * 100vw / 1920)
    }

    footer .footerBottom {
        margin-bottom: calc(40 * 100vw / 1920)
    }

    footer .footerBottom .buttonPresskitDownload {
        width: calc(275 * 100vw / 1920);
        height: calc(81 * 100vw / 1920);
        font-size: calc(32 * 100vw / 1920);
        background-size: contain;
        background-position: center
    }

    footer .footerBottom .footerDividerImg {
        width: calc(5 * 100vw / 1920);
        height: calc(99 * 100vw / 1920);
        margin: 0 calc(56 * 100vw / 1920)
    }

    footer .footerBottom .socialsList .socialsListItem .footerSocialsImg {
        width: calc(62 * 100vw / 1920);
        height: calc(62 * 100vw / 1920)
    }

    footer .footerBottom .feedbackLink {
        font-size: calc(16 * 100vw / 1920);
        width: calc(275 * 100vw / 1920)
    }
}