@import url("https://fonts.googleapis.com/css?family=Ruslan+Display&subset=cyrillic");
@import url("https://fonts.googleapis.com/css?family=Rubik:400,400i,500,700,700i&subset=cyrillic");
@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");

@-webkit-keyframes element-move {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    65% {
        opacity: .2
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes element-move {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    65% {
        opacity: .2
    }

    to {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@-webkit-keyframes fuzZz-move {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    20% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    40% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    60% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    80% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fuzZz-move {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    20% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    40% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    60% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    80% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes loader-text-up {

    0%,
    to {
        opacity: .05
    }

    50% {
        opacity: 1
    }
}

@keyframes loader-text-up {

    0%,
    to {
        opacity: .05
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes result-name-up {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes result-name-up {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes result-answer-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    40% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    80% {
        opacity: .8;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        opacity: 1
    }
}

@keyframes result-answer-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    40% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px)
    }

    80% {
        opacity: .8;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes item-1_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(-10deg, -10deg);
        transform: translate(0) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    25% {
        -webkit-transform: translateY(100px) skew(10deg, 10deg);
        transform: translateY(100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    50% {
        -webkit-transform: translate(100px, 100px) skew(-10deg, -10deg);
        transform: translate(100px, 100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    75% {
        -webkit-transform: translate(100px) skew(10deg, 10deg);
        transform: translate(100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }
}

@keyframes item-1_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(-10deg, -10deg);
        transform: translate(0) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    25% {
        -webkit-transform: translateY(100px) skew(10deg, 10deg);
        transform: translateY(100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    50% {
        -webkit-transform: translate(100px, 100px) skew(-10deg, -10deg);
        transform: translate(100px, 100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    75% {
        -webkit-transform: translate(100px) skew(10deg, 10deg);
        transform: translate(100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }
}

@-webkit-keyframes item-2_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(10deg, 10deg);
        transform: translate(0) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    25% {
        -webkit-transform: translate(-100px) skew(-10deg, -10deg);
        transform: translate(-100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    50% {
        -webkit-transform: translate(-100px, 100px) skew(10deg, 10deg);
        transform: translate(-100px, 100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    75% {
        -webkit-transform: translateY(100px) skew(-10deg, -10deg);
        transform: translateY(100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }
}

@keyframes item-2_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(10deg, 10deg);
        transform: translate(0) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    25% {
        -webkit-transform: translate(-100px) skew(-10deg, -10deg);
        transform: translate(-100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    50% {
        -webkit-transform: translate(-100px, 100px) skew(10deg, 10deg);
        transform: translate(-100px, 100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    75% {
        -webkit-transform: translateY(100px) skew(-10deg, -10deg);
        transform: translateY(100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }
}

@-webkit-keyframes item-3_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(-10deg, -10deg);
        transform: translate(0) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    25% {
        -webkit-transform: translateY(-100px) skew(10deg, 10deg);
        transform: translateY(-100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    50% {
        -webkit-transform: translate(-100px, -100px) skew(-10deg, -10deg);
        transform: translate(-100px, -100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    75% {
        -webkit-transform: translate(-100px) skew(10deg, 10deg);
        transform: translate(-100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }
}

@keyframes item-3_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(-10deg, -10deg);
        transform: translate(0) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    25% {
        -webkit-transform: translateY(-100px) skew(10deg, 10deg);
        transform: translateY(-100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    50% {
        -webkit-transform: translate(-100px, -100px) skew(-10deg, -10deg);
        transform: translate(-100px, -100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }

    75% {
        -webkit-transform: translate(-100px) skew(10deg, 10deg);
        transform: translate(-100px) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }
}

@-webkit-keyframes item-4_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(10deg, 10deg);
        transform: translate(0) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    25% {
        -webkit-transform: translate(100px) skew(-10deg, -10deg);
        transform: translate(100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    50% {
        -webkit-transform: translate(100px, -100px) skew(10deg, 10deg);
        transform: translate(100px, -100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    75% {
        -webkit-transform: translateY(-100px) skew(-10deg, -10deg);
        transform: translateY(-100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }
}

@keyframes item-4_move {

    0%,
    to {
        -webkit-transform: translate(0) skew(10deg, 10deg);
        transform: translate(0) skew(10deg, 10deg);
        border-radius: 4px 4px 4px 16px
    }

    25% {
        -webkit-transform: translate(100px) skew(-10deg, -10deg);
        transform: translate(100px) skew(-10deg, -10deg);
        border-radius: 4px 4px 16px 4px
    }

    50% {
        -webkit-transform: translate(100px, -100px) skew(10deg, 10deg);
        transform: translate(100px, -100px) skew(10deg, 10deg);
        border-radius: 4px 16px 4px 4px
    }

    75% {
        -webkit-transform: translateY(-100px) skew(-10deg, -10deg);
        transform: translateY(-100px) skew(-10deg, -10deg);
        border-radius: 16px 4px 4px 4px
    }
}

.christmas-fortune-telling {
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.christmas-fortune-telling h1,
.christmas-fortune-telling h2,
.christmas-fortune-telling h3,
.christmas-fortune-telling h4,
.christmas-fortune-telling h5,
.christmas-fortune-telling h6,
.christmas-fortune-telling p {
    margin: 0;
    padding: 0
}

.christmas-fortune-telling ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.christmas-fortune-telling a {
    text-decoration: none
}

.christmas-fortune-telling__content,
.christmas-fortune-telling button,
.christmas-fortune-telling input {
    font-family: Ruslan Display, cursive;
    font-weight: 400
}

.christmas-fortune-telling__content {
    width: 760px;
    height: 650px;
    border: 4px solid rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .25);
    border-radius: 16px;
    overflow: hidden
}

@media (max-width:1110px) {
    .christmas-fortune-telling__content {
        width: 465px;
        height: 530px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__content {
        width: 465px;
        height: 530px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__content {
        width: 300px;
        height: 530px
    }
}

.christmas-fortune-telling__intro-box,
.christmas-fortune-telling__loader-box,
.christmas-fortune-telling__result-box {
    position: relative;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(106, 105, 200, .9)), to(rgba(49, 48, 129, .15))), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: -webkit-linear-gradient(rgba(106, 105, 200, .9), rgba(49, 48, 129, .15)), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: -o-linear-gradient(rgba(106, 105, 200, .9), rgba(49, 48, 129, .15)), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: linear-gradient(rgba(106, 105, 200, .9), rgba(49, 48, 129, .15)), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.christmas-fortune-telling__intro-box .signature-bg-box,
.christmas-fortune-telling__loader-box .signature-bg-box,
.christmas-fortune-telling__result-box .signature-bg-box {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: 0;
    background-color: rgba(35, 34, 92, .25);
    border-radius: 5px 0 0 0;
    padding: 5px !important
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .signature-bg-box,
    .christmas-fortune-telling__loader-box .signature-bg-box,
    .christmas-fortune-telling__result-box .signature-bg-box {
        padding: 3px !important
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .signature-bg-box,
    .christmas-fortune-telling__loader-box .signature-bg-box,
    .christmas-fortune-telling__result-box .signature-bg-box {
        padding: 3px !important
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .signature-bg-box,
    .christmas-fortune-telling__loader-box .signature-bg-box,
    .christmas-fortune-telling__result-box .signature-bg-box {
        padding: 2px !important
    }
}

.christmas-fortune-telling__intro-box .signature-bg-box span,
.christmas-fortune-telling__loader-box .signature-bg-box span,
.christmas-fortune-telling__result-box .signature-bg-box span {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: hsla(0, 0%, 100%, .5)
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .signature-bg-box span,
    .christmas-fortune-telling__loader-box .signature-bg-box span,
    .christmas-fortune-telling__result-box .signature-bg-box span {
        font-size: 12px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .signature-bg-box span,
    .christmas-fortune-telling__loader-box .signature-bg-box span,
    .christmas-fortune-telling__result-box .signature-bg-box span {
        font-size: 12px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .signature-bg-box span,
    .christmas-fortune-telling__loader-box .signature-bg-box span,
    .christmas-fortune-telling__result-box .signature-bg-box span {
        font-size: 11px
    }
}

.christmas-fortune-telling__intro-box .signature-bg-box span:first-child,
.christmas-fortune-telling__loader-box .signature-bg-box span:first-child,
.christmas-fortune-telling__result-box .signature-bg-box span:first-child {
    margin-right: 2px
}

.christmas-fortune-telling__intro-box .signature-bg-box span:last-child,
.christmas-fortune-telling__loader-box .signature-bg-box span:last-child,
.christmas-fortune-telling__result-box .signature-bg-box span:last-child {
    color: rgba(255, 255, 204, .5)
}

.christmas-fortune-telling__intro-box .title-box,
.christmas-fortune-telling__loader-box .title-box,
.christmas-fortune-telling__result-box .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 20px
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .title-box,
    .christmas-fortune-telling__loader-box .title-box,
    .christmas-fortune-telling__result-box .title-box {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .title-box,
    .christmas-fortune-telling__loader-box .title-box,
    .christmas-fortune-telling__result-box .title-box {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .title-box,
    .christmas-fortune-telling__loader-box .title-box,
    .christmas-fortune-telling__result-box .title-box {
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px
    }
}

.christmas-fortune-telling__intro-box .title-box h2,
.christmas-fortune-telling__loader-box .title-box h2,
.christmas-fortune-telling__result-box .title-box h2 {
    font-family: Ruslan Display, cursive;
    color: #ffc;
    font-size: 27px;
    font-weight: 400
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .title-box h2,
    .christmas-fortune-telling__loader-box .title-box h2,
    .christmas-fortune-telling__result-box .title-box h2 {
        font-size: 20px
    }
}

.christmas-fortune-telling__intro-box .title-box img,
.christmas-fortune-telling__loader-box .title-box img,
.christmas-fortune-telling__result-box .title-box img {
    margin-top: 12px;
    width: auto;
    height: auto
}

.christmas-fortune-telling__intro-box .desc-box,
.christmas-fortune-telling__loader-box .desc-box,
.christmas-fortune-telling__result-box .desc-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .desc-box,
    .christmas-fortune-telling__loader-box .desc-box,
    .christmas-fortune-telling__result-box .desc-box {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .desc-box,
    .christmas-fortune-telling__loader-box .desc-box,
    .christmas-fortune-telling__result-box .desc-box {
        margin-bottom: 20px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .desc-box,
    .christmas-fortune-telling__loader-box .desc-box,
    .christmas-fortune-telling__result-box .desc-box {
        margin-bottom: 20px
    }
}

.christmas-fortune-telling__intro-box .desc-box p,
.christmas-fortune-telling__loader-box .desc-box p,
.christmas-fortune-telling__result-box .desc-box p {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: #fff
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .desc-box p,
    .christmas-fortune-telling__loader-box .desc-box p,
    .christmas-fortune-telling__result-box .desc-box p {
        font-size: 18px;
        line-height: 27px;
        text-align: center
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .desc-box p,
    .christmas-fortune-telling__loader-box .desc-box p,
    .christmas-fortune-telling__result-box .desc-box p {
        font-size: 18px;
        line-height: 27px;
        text-align: center
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .desc-box p,
    .christmas-fortune-telling__loader-box .desc-box p,
    .christmas-fortune-telling__result-box .desc-box p {
        font-size: 17px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 24px
    }
}

.christmas-fortune-telling__intro-box .input-box,
.christmas-fortune-telling__loader-box .input-box,
.christmas-fortune-telling__result-box .input-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 2px solid gold;
    width: 355px;
    margin: 0 auto;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 204, .25);
    border-radius: 40px;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .input-box,
    .christmas-fortune-telling__loader-box .input-box,
    .christmas-fortune-telling__result-box .input-box {
        width: 300px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .input-box,
    .christmas-fortune-telling__loader-box .input-box,
    .christmas-fortune-telling__result-box .input-box {
        width: 300px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .input-box,
    .christmas-fortune-telling__loader-box .input-box,
    .christmas-fortune-telling__result-box .input-box {
        width: 250px
    }
}

.christmas-fortune-telling__intro-box .input-box:hover,
.christmas-fortune-telling__loader-box .input-box:hover,
.christmas-fortune-telling__result-box .input-box:hover {
    border: 8px solid rgba(255, 255, 204, .35)
}

.christmas-fortune-telling__intro-box .input-box input,
.christmas-fortune-telling__loader-box .input-box input,
.christmas-fortune-telling__result-box .input-box input {
    width: 335px;
    height: 60px;
    font-size: 38px;
    text-align: center;
    line-height: 60px;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    color: #5856c1;
    background-color: #fff;
    outline: none;
    -webkit-box-shadow: inset 0 3px 8px 0 rgba(0, 0, 0, .35), 0 12px 32px 0 rgba(0, 0, 0, .35);
    box-shadow: inset 0 3px 8px 0 rgba(0, 0, 0, .35), 0 12px 32px 0 rgba(0, 0, 0, .35);
    border: 0;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .input-box input,
    .christmas-fortune-telling__loader-box .input-box input,
    .christmas-fortune-telling__result-box .input-box input {
        width: 300px;
        height: 50px;
        font-size: 34px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .input-box input,
    .christmas-fortune-telling__loader-box .input-box input,
    .christmas-fortune-telling__result-box .input-box input {
        width: 300px;
        height: 50px;
        font-size: 34px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .input-box input,
    .christmas-fortune-telling__loader-box .input-box input,
    .christmas-fortune-telling__result-box .input-box input {
        width: 250px;
        height: 45px;
        font-size: 30px
    }
}

.christmas-fortune-telling__intro-box .input-box input::-webkit-input-placeholder,
.christmas-fortune-telling__loader-box .input-box input::-webkit-input-placeholder,
.christmas-fortune-telling__result-box .input-box input::-webkit-input-placeholder {
    color: #8483d1;
    font-size: 32px
}

.christmas-fortune-telling__intro-box .input-box input:-ms-input-placeholder,
.christmas-fortune-telling__loader-box .input-box input:-ms-input-placeholder,
.christmas-fortune-telling__result-box .input-box input:-ms-input-placeholder {
    color: #8483d1;
    font-size: 32px
}

.christmas-fortune-telling__intro-box .input-box input::-ms-input-placeholder,
.christmas-fortune-telling__loader-box .input-box input::-ms-input-placeholder,
.christmas-fortune-telling__result-box .input-box input::-ms-input-placeholder {
    color: #8483d1;
    font-size: 32px
}

.christmas-fortune-telling__intro-box .input-box input::placeholder,
.christmas-fortune-telling__loader-box .input-box input::placeholder,
.christmas-fortune-telling__result-box .input-box input::placeholder {
    color: #8483d1;
    font-size: 32px
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-webkit-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input:-ms-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-ms-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input::placeholder,
    .christmas-fortune-telling__loader-box .input-box input::placeholder,
    .christmas-fortune-telling__result-box .input-box input::placeholder {
        font-size: 30px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-webkit-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input:-ms-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-ms-input-placeholder {
        font-size: 30px
    }

    .christmas-fortune-telling__intro-box .input-box input::placeholder,
    .christmas-fortune-telling__loader-box .input-box input::placeholder,
    .christmas-fortune-telling__result-box .input-box input::placeholder {
        font-size: 30px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-webkit-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-webkit-input-placeholder {
        font-size: 26px
    }

    .christmas-fortune-telling__intro-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input:-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input:-ms-input-placeholder {
        font-size: 26px
    }

    .christmas-fortune-telling__intro-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__loader-box .input-box input::-ms-input-placeholder,
    .christmas-fortune-telling__result-box .input-box input::-ms-input-placeholder {
        font-size: 26px
    }

    .christmas-fortune-telling__intro-box .input-box input::placeholder,
    .christmas-fortune-telling__loader-box .input-box input::placeholder,
    .christmas-fortune-telling__result-box .input-box input::placeholder {
        font-size: 26px
    }
}

.christmas-fortune-telling__intro-box .input-box input:focus,
.christmas-fortune-telling__loader-box .input-box input:focus,
.christmas-fortune-telling__result-box .input-box input:focus {
    background-color: #ffffd6
}

.christmas-fortune-telling__intro-box .question-box,
.christmas-fortune-telling__loader-box .question-box,
.christmas-fortune-telling__result-box .question-box {
    margin-top: 50px;
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .question-box,
    .christmas-fortune-telling__loader-box .question-box,
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 25px;
        margin-bottom: 20px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .question-box,
    .christmas-fortune-telling__loader-box .question-box,
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 25px;
        margin-bottom: 20px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .question-box,
    .christmas-fortune-telling__loader-box .question-box,
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 20px;
        margin-bottom: 15px
    }
}

.christmas-fortune-telling__intro-box .question-box p,
.christmas-fortune-telling__loader-box .question-box p,
.christmas-fortune-telling__result-box .question-box p {
    width: 600px;
    color: #fff;
    font-size: 62px;
    line-height: 62px;
    text-align: center;
    text-shadow: 0 3px 6px rgba(0, 0, 0, .35)
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .question-box p,
    .christmas-fortune-telling__loader-box .question-box p,
    .christmas-fortune-telling__result-box .question-box p {
        width: 400px;
        font-size: 42px;
        line-height: 42px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .question-box p,
    .christmas-fortune-telling__loader-box .question-box p,
    .christmas-fortune-telling__result-box .question-box p {
        width: 400px;
        font-size: 42px;
        line-height: 42px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .question-box p,
    .christmas-fortune-telling__loader-box .question-box p,
    .christmas-fortune-telling__result-box .question-box p {
        width: 270px;
        font-size: 32px;
        line-height: 32px
    }
}

.christmas-fortune-telling__intro-box .button-box,
.christmas-fortune-telling__loader-box .button-box,
.christmas-fortune-telling__result-box .button-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.christmas-fortune-telling__intro-box .button-box button,
.christmas-fortune-telling__loader-box .button-box button,
.christmas-fortune-telling__result-box .button-box button {
    visibility: hidden;
    position: relative;
    height: 65px;
    width: 205px;
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#fe7a6b), to(#fe6352));
    background: -webkit-linear-gradient(bottom, #fe7a6b, #fe6352);
    background: -o-linear-gradient(bottom, #fe7a6b, #fe6352);
    background: linear-gradient(0deg, #fe7a6b, #fe6352);
    outline: none;
    border: 0;
    padding-top: 6px;
    border-radius: 12px;
    font-size: 32px;
    text-align: center;
    line-height: 57px;
    cursor: pointer;
    -webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, .35);
    box-shadow: 0 12px 32px 0 rgba(0, 0, 0, .35);
    -webkit-animation: fuzZz-move 2.2s ease-in-out infinite;
    animation: fuzZz-move 2.2s ease-in-out infinite;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-transition: all .135s ease-out;
    -o-transition: all .135s ease-out;
    transition: all .135s ease-out
}

@media (max-width:1110px) {

    .christmas-fortune-telling__intro-box .button-box button,
    .christmas-fortune-telling__loader-box .button-box button,
    .christmas-fortune-telling__result-box .button-box button {
        width: 165px;
        height: 55px;
        font-size: 26px;
        padding-top: 2px
    }
}

@media (max-width:767px) {

    .christmas-fortune-telling__intro-box .button-box button,
    .christmas-fortune-telling__loader-box .button-box button,
    .christmas-fortune-telling__result-box .button-box button {
        width: 165px;
        height: 55px;
        font-size: 26px;
        padding-top: 2px
    }
}

@media (max-width:810px) {

    .christmas-fortune-telling__intro-box .button-box button,
    .christmas-fortune-telling__loader-box .button-box button,
    .christmas-fortune-telling__result-box .button-box button {
        width: 165px;
        height: 55px;
        font-size: 26px;
        padding-top: 2px
    }
}

.christmas-fortune-telling__intro-box .button-box button:hover,
.christmas-fortune-telling__loader-box .button-box button:hover,
.christmas-fortune-telling__result-box .button-box button:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    color: #ffc
}

.christmas-fortune-telling__intro-box .button-box button:active,
.christmas-fortune-telling__loader-box .button-box button:active,
.christmas-fortune-telling__result-box .button-box button:active {
    color: #ffffb3;
    background: -webkit-gradient(linear, left bottom, left top, from(#fe6352), to(#fe4c38));
    background: -webkit-linear-gradient(bottom, #fe6352, #fe4c38);
    background: -o-linear-gradient(bottom, #fe6352, #fe4c38);
    background: linear-gradient(0deg, #fe6352, #fe4c38)
}

.christmas-fortune-telling__loader-box {
    display: none
}

.christmas-fortune-telling__loader-box .preloader-box h4 {
    font-family: Ruslan Display, cursive;
    font-weight: 400;
    font-size: 34px;
    color: #fff;
    padding-top: 40px;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    -webkit-animation: loader-text-up 1.1715s ease-in-out infinite;
    animation: loader-text-up 1.1715s ease-in-out infinite
}

@media (max-width:1110px) {
    .christmas-fortune-telling__loader-box .preloader-box h4 {
        font-size: 30px;
        padding-top: 25px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__loader-box .preloader-box h4 {
        font-size: 30px;
        padding-top: 25px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__loader-box .preloader-box h4 {
        font-size: 30px;
        padding-top: 25px
    }
}

.christmas-fortune-telling__result-box {
    display: none;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(106, 105, 200, .85)), to(rgba(255, 255, 102, .15))), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: -webkit-linear-gradient(rgba(106, 105, 200, .85), rgba(255, 255, 102, .15)), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: -o-linear-gradient(rgba(106, 105, 200, .85), rgba(255, 255, 102, .15)), url(https://raw.githubusercontent.com/ProUnebit/Reminder_ToMe_Reminder/master/src/assets/img/gadanie-titul.jpg);
    background: linear-gradient(rgba(106, 105, 200, .85), rgba(255, 255, 102, .15)), url(/special/gadanie-game/img/gadanie-titul.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto
}

.christmas-fortune-telling__result-box .question-box {
    margin-top: 10px;
    margin-bottom: 20px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 5px;
        margin-bottom: 10px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 5px;
        margin-bottom: 10px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .question-box {
        margin-top: 5px;
        margin-bottom: 10px
    }
}

.christmas-fortune-telling__result-box .question-box p {
    width: 340px;
    font-size: 34px;
    line-height: 34px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .question-box p {
        font-size: 30px;
        line-height: 30px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .question-box p {
        font-size: 30px;
        line-height: 30px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .question-box p {
        font-size: 30px;
        line-height: 30px
    }
}

.christmas-fortune-telling__result-box .answer-box {
    width: 75%;
    background-position: 50%;
    background-color: rgba(35, 34, 92, .35);
    margin: 0 auto;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px 20px 20px;
    -webkit-animation: result-name-up .1878s linear;
    animation: result-name-up .1878s linear
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .answer-box {
        padding: 8px 15px 15px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .answer-box {
        padding: 8px 15px 15px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .answer-box {
        padding: 5px 15px 15px
    }
}

.christmas-fortune-telling__result-box .answer-box span {
    display: inline-block;
    margin-bottom: 20px;
    font-family: Ruslan Display, cursive;
    font-weight: 400;
    font-size: 32px;
    color: #ffc;
    border-bottom: 2px solid rgba(255, 255, 204, .85)
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .answer-box span {
        font-size: 28px;
        margin-bottom: 15px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .answer-box span {
        font-size: 28px;
        margin-bottom: 15px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .answer-box span {
        margin-bottom: 15px;
        font-size: 26px
    }
}

.christmas-fortune-telling__result-box .answer-box p {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    text-align: center;
    -webkit-animation: result-name-up .25s ease-out;
    animation: result-name-up .25s ease-out;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .answer-box p {
        font-size: 26px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .answer-box p {
        font-size: 26px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .answer-box p {
        font-size: 24px
    }
}

.christmas-fortune-telling__result-box .answer-box p:last-child {
    margin-top: 10px;
    background-color: rgba(255, 255, 214, .85);
    border: 1px solid #ffc;
    color: #3b399c;
    border-radius: 4px;
    padding: 20px;
    font-size: 22px;
    -webkit-animation: result-answer-up .75s ease-in;
    animation: result-answer-up .75s ease-in;
    text-shadow: none
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .answer-box p:last-child {
        font-size: 18px;
        margin-top: 5px;
        padding: 15px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .answer-box p:last-child {
        font-size: 18px;
        margin-top: 5px;
        padding: 15px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .answer-box p:last-child {
        font-size: 18px;
        padding: 10px;
        margin-top: 2px
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box {
    background-color: rgba(35, 34, 92, .35);
    border-radius: 0 0 12px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 280px;
    margin: 0 auto;
    -webkit-animation: result-name-up .1878s linear;
    animation: result-name-up .1878s linear
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .soc-net-share-box {
        width: 60%
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .soc-net-share-box {
        width: 60%
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .soc-net-share-box {
        width: 63%
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box p {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    margin-bottom: 5px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .soc-net-share-box p {
        font-size: 16px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .soc-net-share-box p {
        font-size: 16px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .soc-net-share-box p {
        text-align: center;
        font-size: 14px
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box__list {
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 7px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__list {
        margin-bottom: 2px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__list {
        margin-bottom: 2px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__list {
        margin-bottom: 0
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box__item {
    border-radius: 6px;
    margin: 10px;
    min-width: 45px;
    min-height: 45px;
    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;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    -webkit-transition: all .115s linear;
    -o-transition: all .115s linear;
    transition: all .115s linear
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item {
        min-width: 40px;
        min-height: 40px;
        margin: 5px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item {
        min-width: 40px;
        min-height: 40px;
        margin: 5px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item {
        min-width: 35px;
        min-height: 35px;
        margin: 5px
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box__item i {
    font-size: 18px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item i {
        font-size: 17px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item i {
        font-size: 17px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .soc-net-share-box__item i {
        font-size: 16px
    }
}

.christmas-fortune-telling__result-box .soc-net-share-box__item:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px)
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--vk {
    background-color: #506f9b;
    color: #fff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--vk:hover {
    background-color: #5a7baa
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--vk:active {
    background-color: #6b89b3
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--fa {
    background-color: #435897;
    color: #fff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--fa:hover {
    background-color: #4b62a9
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--fa:active {
    background-color: #586fb5
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--tw {
    background-color: #5c9eff;
    color: #fff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--tw:hover {
    background-color: #76adff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--tw:active {
    background-color: #8fbcff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--te {
    background-color: #34ade1;
    color: #fff
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--te:hover {
    background-color: #4ab6e4
}

.christmas-fortune-telling__result-box .soc-net-share-box__item--te:active {
    background-color: #60bfe8
}

.christmas-fortune-telling__result-box .button-box {
    margin-top: 18px
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .button-box {
        margin-top: 10px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .button-box {
        margin-top: 10px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .button-box {
        margin-top: 12px
    }
}

.christmas-fortune-telling__result-box .button-box button {
    position: relative;
    z-index: 19;
    visibility: visible;
    height: 55px;
    width: auto;
    padding-top: 6px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 26px;
    line-height: 26px;
    -webkit-animation-delay: 1.85s;
    animation-delay: 1.85s
}

@media (max-width:1110px) {
    .christmas-fortune-telling__result-box .button-box button {
        height: 48px;
        font-size: 18px;
        padding-left: 10px;
        padding-right: 10px
    }
}

@media (max-width:767px) {
    .christmas-fortune-telling__result-box .button-box button {
        height: 48px;
        font-size: 18px;
        padding-left: 10px;
        padding-right: 10px
    }
}

@media (max-width:810px) {
    .christmas-fortune-telling__result-box .button-box button {
        height: 48px;
        font-size: 18px;
        padding-left: 10px;
        padding-right: 10px
    }
}

.preloader-container {
    position: absolute;
    z-index: 9;
    width: 150px;
    height: 150px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 275px auto auto;
    background-color: rgba(255, 255, 204, .65);
    background: -webkit-radial-gradient(circle, rgba(255, 236, 13, .55) 0, rgba(200, 37, 59, .3) 57%, rgba(88, 86, 193, .395693) 100%);
    background: -o-radial-gradient(circle, rgba(255, 236, 13, .55) 0, rgba(200, 37, 59, .3) 57%, rgba(88, 86, 193, .395693) 100%);
    background: radial-gradient(circle, rgba(255, 236, 13, .55) 0, rgba(200, 37, 59, .3) 57%, rgba(88, 86, 193, .395693) 100%);
    border-radius: 50%
}

@media (max-width:1110px) {
    .preloader-container {
        margin-top: 265px
    }
}

@media (max-width:767px) {
    .preloader-container {
        margin-top: 265px
    }
}

@media (max-width:810px) {
    .preloader-container {
        margin-top: 240px
    }
}

.preloader-item {
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.preloader-item--1 {
    background-color: #5f5dc4;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 16px 4px 4px 4px;
    -webkit-animation: item-1_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
    animation: item-1_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-item--2 {
    background-color: #7d7bcf;
    top: 0;
    right: 0;
    border-radius: 4px 16px 4px 4px;
    -webkit-animation: item-2_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
    animation: item-2_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-item--3 {
    background-color: #a2a1dc;
    bottom: 0;
    right: 0;
    z-index: 1;
    border-radius: 4px 4px 16px 4px;
    -webkit-animation: item-3_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
    animation: item-3_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-item--4 {
    background-color: #bfbee7;
    bottom: 0;
    left: 0;
    border-radius: 4px 4px 4px 16px;
    -webkit-animation: item-4_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
    animation: item-4_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.game-actions__displaying-off {
    display: none !important
}

.game-actions__displaying-on {
    display: block !important
}

.view-port {
    max-width: 900px;
    margin: 0 auto
}