/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./assets/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(./assets/fonts/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* disable scrollbar for Firefox */
html {
    scrollbar-width: none;
}

/* disable scrollbar for Chrome */
::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    background: #000000 center top no-repeat padding-box;
    background-image: url('./assets/bg-desktop.png');
    background-size: cover;
    opacity: 1;
}

@media screen and (max-width: 1551px) {
    body {
        background-image: url('./assets/bg-desktop-small.png');
		background-size: contain;
    }
}

@media screen and (max-width: 788px) {
    body {
        background-image: url('./assets/bg-phone.png');
		background-size: contain;
    }
}

#loading {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loading-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 1088px;
    font: normal normal normal 14px/28px Roboto;
    text-shadow: 0px 10px 5px rgba(0,0,0,0.75);
    letter-spacing: 0px;
    color: #FFFFFF;
}

.hidden {
    display: none !important;
}

#information {
    position: absolute;
    top: 0px;
    left: 50px;
    z-index: 9999999999999;
    font: normal normal normal 18px/32px Roboto;
    font-size: 30px;
    letter-spacing: 0px;
    color: #FFFFFF;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    max-width: 812px;
    height: 100%;
    margin-top: 8vh;
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 60%;
    height: 10%;
    padding-left: 20%;
    padding-right: 20%;
    border-bottom: 1pt solid rgba(41, 41, 41, 0.16);
}

#logo-desktop {
    width: 224px;
}

@media screen and (max-width: 960px) {
    #logo-desktop {
        display: none;
    }
    #main {
        margin-top: calc(7vh - 5px);
    }
}

.video-title {
    color: #ffffff;
    margin-top: 45px;
    margin-bottom: 0;
    text-align: center;
    font: normal normal bold 67px/72px Roboto;
    letter-spacing: 0px;
    opacity: 1;
}

@media screen and (max-width: 800px) {
    .video-title {
        font-size: 51px;
    }
}

#video-title-phone {
    display: none;
    margin-top: 25px;
    line-height: 60px;
}

@media screen and (max-width: 580px) {
    #video-title-desktop {
        display: none;
    }

    #video-title-phone {
        display: block;
    }
}

.red-w {
    color: #E51E1A;
}

#description-desktop {
    text-align: center;
    font: normal normal normal 18px/32px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    width: 542px;
}

#description-phone {
    display: none;
}

@media screen and (max-width: 580px) {
    #description-desktop {
        display: none;
    }

    #description-phone {
        display: block;
        text-align: center;
        font: normal normal normal 14px/21px Roboto;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
        max-width: 300px;
    }
}

#btn-play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 162px;
    height: 162px;
    margin-top: -100px;
    border-radius: 50%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 50px #E51E1A;
    opacity: 1;
    cursor: pointer;
    z-index: 40;
}

.cant-play {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: default !important;
}

#btn-play-img {
    margin-left: 12px;
}

@media screen and (max-width: 560px) {
    #btn-play {
        width: 124px;
        height: 124px;
        margin-top: -26px;
    }

    #btn-play-img {
        width: 34px;
        margin-left: 9px;
    }
}

#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 60px;
}

#logo-phone {
    display: none;
}

@media screen and (max-width: 960px) {
    #logo-phone {
        display: block;
        width: 32%;
        max-width: 200px;
    }
}

#logo-phone-img {
    width: 100%;
}

#footer-notice {
    font: normal normal normal 14px/19px Roboto;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    margin-top: 44px;
    margin-bottom: 56px;
    text-align: center;
    margin-left: 16px;
    margin-right: 16px;
}