@font-face {
    font-family: Drina;
    src: url(../fonts/drina/Drina.eot);
    src: url(../fonts/drina/Drina.eot?#iefix) format("embedded-opentype"), url(../fonts/drina/Drina.woff2) format("woff2"), url(../fonts/drina/Drina.woff) format("woff"), url(../fonts/drina/Drina.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: gerbera;
    src: url(../fonts/gerbera/Gerbera.eot);
    src: url(../fonts/gerbera/Gerbera.eot?#iefix) format("embedded-opentype"), url(../fonts/gerbera/Gerbera.woff) format("woff"), url(../fonts/gerbera/Gerbera.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: gerbera-medium;
    src: url(../fonts/gerbera/Gerbera-Medium.eot);
    src: url(../fonts/gerbera/Gerbera-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/gerbera/Gerbera-Medium.woff) format("woff"), url(../fonts/gerbera/Gerbera-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: glober;
    src: url(../fonts/glober/GloberMRegular.eot);
    src: url(../fonts/glober/GloberMRegular.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMRegular.woff) format("woff"), url(../fonts/glober/GloberMRegular.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: glober;
    src: url(../fonts/glober/GloberMBold.eot);
    src: url(../fonts/glober/GloberMBold.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMBold.woff) format("woff"), url(../fonts/glober/GloberMBold.ttf) format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: glober;
    src: url(../fonts/glober/GloberMRegularItalic.eot);
    src: url(../fonts/glober/GloberMRegularItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMRegularItalic.woff) format("woff"), url(../fonts/glober/GloberMRegularItalic.ttf) format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: glober;
    src: url(../fonts/glober/GloberMBoldItalic.eot);
    src: url(../fonts/glober/GloberMBoldItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMBoldItalic.woff) format("woff"), url(../fonts/glober/GloberMBoldItalic.ttf) format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: glober-xbold;
    src: url(../fonts/glober/GloberMxBold.eot);
    src: url(../fonts/glober/GloberMxBold.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMxBold.woff) format("woff"), url(../fonts/glober/GloberMxBold.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: glober-xbold;
    src: url(../fonts/glober/GloberMxBoldItalic.eot);
    src: url(../fonts/glober/GloberMxBoldItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/glober/GloberMxBoldItalic.woff) format("woff"), url(../fonts/glober/GloberMxBoldItalic.ttf) format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap
}

*,
:after,
:before {
    box-sizing: border-box
}

body {
    margin: 0
}

body.no-scroll {
    height: 100%;
    overflow: hidden
}

img {
    display: block
}

button {
    border: none
}

.button {
    z-index: 1;
    position: relative;
    display: inline-block;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    min-width: 205px;
    height: 70px;
    padding: 0;
    font-family: gerbera-medium;
    font-size: 18px;
    line-height: 1.44;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    background: #c65cc0;
    outline: none;
    cursor: pointer
}

.button,
.button:link,
.button:visited {
    color: #fff
}

@media only screen and (max-width:767px) {
    .button {
        min-width: 188px;
        height: 60px
    }
}

.button:after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #c65cc0
}

.button span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 21px 44px 0
}

@media only screen and (max-width:767px) {
    .button span {
        padding: 16px 32px 0
    }
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

body._card-background-01 {
    background-image: url(../img/content/greeting/greeting-back-01-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-01 {
        background-image: url(../img/content/greeting/words.svg), url(../img/content/greeting/space-bear.svg), url(../img/content/greeting/greeting-back-01-mob.jpg);
        background-size: 165px, 360px, cover;
        background-position: top 50px left 30px, 100% 0, top
    }
}

body._card-background-02 {
    background-image: url(../img/content/greeting/greeting-back-02-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-mob-en.jpg);
    }
}

body._card-background-03 {
    background-image: url(../img/content/greeting/greeting-back-03-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-mob-en.jpg);
    }
}

body._card-background-04 {
    background-image: url(../img/content/greeting/greeting-back-04-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-mob-en.jpg);
    }
}

body._card-background-05 {
    background-image: url(../img/content/greeting/greeting-back-05-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-mob-en.jpg);
    }
}

body._card-background-06 {
    background-image: url(../img/content/greeting/greeting-back-06-en.jpg);
}

@media (max-width:1360px) {
    body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-desktop-en.jpg);
    }
}

@media (max-width:768px) {
    body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-tablet-en.jpg);
    }
}

@media (max-width:400px) {
    body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-mob-en.jpg);
    }
}

html:lang(ru) body._card-background-01 {
    background-image: url(../img/content/greeting/greeting-back-01-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-tablet-ru.jpg);
    }
}

html:lang(ru) body._card-background-02 {
    background-image: url(../img/content/greeting/greeting-back-02-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-tablet-ru.jpg);
    }
}

@media (max-width:400px) {
    html:lang(ru) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-mob-ru.jpg);
    }
}

html:lang(ru) body._card-background-03 {
    background-image: url(../img/content/greeting/greeting-back-03-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-tablet-ru.jpg);
    }
}

@media (max-width:400px) {
    html:lang(ru) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-mob-ru.jpg);
    }
}

html:lang(ru) body._card-background-04 {
    background-image: url(../img/content/greeting/greeting-back-04-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-tablet-ru.jpg);
    }
}

@media (max-width:400px) {
    html:lang(ru) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-mob-ru.jpg);
    }
}

html:lang(ru) body._card-background-05 {
    background-image: url(../img/content/greeting/greeting-back-05-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-tablet-ru.jpg);
    }
}

@media (max-width:400px) {
    html:lang(ru) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-mob-ru.jpg);
    }
}

html:lang(ru) body._card-background-06 {
    background-image: url(../img/content/greeting/greeting-back-06-ru.jpg);
}

@media (max-width:1360px) {
    html:lang(ru) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-desktop-ru.jpg);
    }
}

@media (max-width:768px) {
    html:lang(ru) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-tablet-ru.jpg);
    }
}

@media (max-width:400px) {
    html:lang(ru) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-mob-ru.jpg);
    }
}

html:lang(vn) body._card-background-01 {
    background-image: url(../img/content/greeting/greeting-back-01-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-01 {
        background-image: url(../img/content/greeting/greeting-back-01-tablet-vn.jpg);
    }
}

html:lang(vn) body._card-background-02 {
    background-image: url(../img/content/greeting/greeting-back-02-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-tablet-vn.jpg);
    }
}

@media (max-width:400px) {
    html:lang(vn) body._card-background-02 {
        background-image: url(../img/content/greeting/greeting-back-02-mob-vn.jpg);
    }
}

html:lang(vn) body._card-background-03 {
    background-image: url(../img/content/greeting/greeting-back-03-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-tablet-vn.jpg);
    }
}

@media (max-width:400px) {
    html:lang(vn) body._card-background-03 {
        background-image: url(../img/content/greeting/greeting-back-03-mob-vn.jpg);
    }
}

html:lang(vn) body._card-background-04 {
    background-image: url(../img/content/greeting/greeting-back-04-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-tablet-vn.jpg);
    }
}

@media (max-width:400px) {
    html:lang(vn) body._card-background-04 {
        background-image: url(../img/content/greeting/greeting-back-04-mob-vn.jpg);
    }
}

html:lang(vn) body._card-background-05 {
    background-image: url(../img/content/greeting/greeting-back-05-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-tablet-vn.jpg);
    }
}

@media (max-width:400px) {
    html:lang(vn) body._card-background-05 {
        background-image: url(../img/content/greeting/greeting-back-05-mob-vn.jpg);
    }
}

html:lang(vn) body._card-background-06 {
    background-image: url(../img/content/greeting/greeting-back-06-vn.jpg);
}

@media (max-width:1360px) {
    html:lang(vn) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-desktop-vn.jpg);
    }
}

@media (max-width:768px) {
    html:lang(vn) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-tablet-vn.jpg);
    }
}

@media (max-width:400px) {
    html:lang(vn) body._card-background-06 {
        background-image: url(../img/content/greeting/greeting-back-06-mob-vn.jpg);
    }
}

.greeting-page {
    width: 100%;
    min-height: 100vh;
    background-image: url(../img/content/greeting/greeting-back.jpg)
}

.envelope-container {
    position: fixed;
    left: 50%;
    width: 660px;
    max-width: 100%;
    transform: translate(-50%);
    bottom: 50%
}

@media (max-height:600px) {
    .envelope-container {
        width: 400px
    }
}

.envelope-container._overother {
    z-index: 1
}

.envelope-container__inner1 {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px
}

.envelope-container__inner2 {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    padding-bottom: 63.125%;
    transform: translateY(15%)
}

.envelope-container__inner3 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    transform: translateY(35%)
}

.envelope-top {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100.2%;
    perspective: 1500px;
    perspective-origin: 50% 50%
}

.envelope-top__img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
    transform-origin: left bottom;
    transform: rotateX(180deg)
}

.animation-step-1 .envelope-top__img {
    transform: rotateX(10deg)
}

.envelope-mid {
    position: absolute;
    width: 100%;
    left: 0;
    top: -2px
}

@media (max-height:600px) {
    .envelope-mid {
        top: -1px
    }
}

.envelope-mid__img {
    display: block;
    max-width: 100%;
    height: auto
}

.envelope-mid__img-wr {
    position: relative;
    left: 2.5%;
    width: 95%
}

.envelope {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.envelope__left {
    left: 0
}

.envelope__left,
.envelope__right {
    position: absolute;
    bottom: 0;
    width: 47.5%
}

.envelope__right {
    right: 0
}

.envelope__content {
    position: absolute;
    left: 2.5%;
    width: 95%;
    bottom: 0
}

.envelope__content-inner {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    padding-top: 30px;
    text-align: center
}

.envelope__txt {
    max-width: 412px;
    margin: 0 auto 20px;
    font-family: glober-xbold;
    font-size: 16px;
    line-height: 1.5;
    color: #fff
}

@media (max-width:660px) {
    .envelope__txt {
        display: none
    }
}

@media (max-height:600px) {
    .envelope__txt {
        display: none
    }
}

.envelope__btn {
    display: inline-block;
    width: 284px;
    height: 74px;
    background-color: #00b4ff;
    border-radius: 37px;
    padding-top: 28px;
    font-family: glober-xbold;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: all .2s linear 0ms
}

.envelope__btn:active,
.envelope__btn:hover,
.envelope__btn:link,
.envelope__btn:visited {
    color: #fff
}

.envelope__btn:hover {
    background-color: #00a2e6
}

.envelope__img {
    display: block;
    max-width: 100%;
    height: auto
}

.animation-step-3 .envelope__content-inner {
    opacity: 1
}

.grtn-content {
    position: relative;
    width: 660px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px
}

@media (max-height:600px) {
    .grtn-content {
        width: 400px
    }
}

.grtn-content__top-space {
    height: 200vh
}

.grtn-content__bottom-space {
    height: 260px
}

@media (max-width:660px) {
    .grtn-content__bottom-space {
        height: 37.9vw
    }
}

@media (max-height:600px) {
    .grtn-content__bottom-space {
        height: 150px
    }
}

.grtn-content__body {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 20px 8.5% 51px
}

.grtn-content__body:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 74px;
    background: url(../img/content/greeting/top-shadow.svg) repeat-x center 0
}

.grtn-content__inner {
    position: relative
}

.grtn-content__logo {
    margin: 0 0 40px
}

.grtn-text__head {
    margin: 0 0 25px;
    font-family: Drina;
    font-size: 42px;
    line-height: 1.05;
    color: #231f20
}

.grtn-text__body {
    font-family: glober;
    font-size: 20px;
    line-height: 1.4;
    color: #231f20
}

.grtn-text__body p {
    margin: 0 0 20px
}