@font-face {
    font-family: Roboto;
    src: url(../../fonts/main/Roboto-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: Roboto Light;
    src: url(../../fonts/main/Roboto-Light.ttf);
    font-display: swap
}

@font-face {
    font-family: Roboto Bold;
    src: url(../../fonts/main/Roboto-Bold.ttf);
    font-display: swap
}

@font-face {
    font-family: Beaufort;
    src: url(../../fonts/main/Beaufort.otf);
    font-display: swap
}

@font-face {
    font-family: Beaufort Bold;
    src: url(../../fonts/main/Beaufort-Bold.ttf);
    font-display: swap
}

html,
body,
header,
nav,
section,
aside,
article,
footer,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: Roboto;
    color: #5f554c
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

a {
    text-decoration: none;
    color: #6193ec
}

input,
button,
select,
textarea {
    outline: none
}

::-webkit-input-placeholder {
    opacity: 1;
    transition: opacity .3s ease;
    color: #8a7f7f
}

::-moz-placeholder {
    opacity: 1;
    transition: opacity .3s ease;
    color: #8a7f7f
}

:-moz-placeholder {
    opacity: 1;
    transition: opacity .3s ease;
    color: #8a7f7f
}

:-ms-input-placeholder {
    opacity: 1;
    transition: opacity .3s ease;
    color: #8a7f7f
}

:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity .3s ease
}

:focus::-moz-placeholder {
    opacity: 0;
    transition: opacity .3s ease
}

:focus:-moz-placeholder {
    opacity: 0;
    transition: opacity .3s ease
}

:focus:-ms-input-placeholder {
    opacity: 0;
    transition: opacity .3s ease
}

.input {
    width: 100%;
    height: 50px;
    position: relative;
    border-radius: 500px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #f4f4f4
}

.input>.icon {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none
}

.input>input {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    text-align: center;
    border: none;
    font-family: Beaufort;
    font-size: 16px;
    color: #8a7f7f;
    z-index: 1
}

.select {
    width: 100%;
    height: 50px;
    position: relative;
    border-radius: 500px;
    border: 1px solid #e5e5e5;
    background: #f4f4f4
}

.select>.icon {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none
}

.select>select {
    width: 99%;
    height: 100%;
    border: 0;
    background-color: transparent;
    padding-left: 50px;
    font-family: Beaufort;
    font-size: 16px;
    color: #8a7f7f;
    text-align: center;
    text-align-last: center;
}

.select>.select-selected {
    width: 100%;
    height: 100%;
    font-family: Beaufort;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 50px;
    padding-top: 14px;
    text-align: center
}

.select>.select-selected:after {
    position: absolute;
    content: "";
    top: calc(50% - 4px);
    right: 20px;
    width: 13px;
    height: 8px;
    background: url(../images/icon/select_arrow.png) center center;
    opacity: .7;
    transition: all .2s ease-in-out
}

.select>.select-selected.select-arrow-active:after {
    opacity: 1
}

.select>.select-items div {
    color: #8a7f7f;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    transition: all .2s ease-in-out
}

.select>.select-selected {
    color: #8a7f7f;
    cursor: pointer;
    user-select: none
}

.select>.select-items {
    position: absolute;
    background-color: #fff;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.select>.select-hide {
    display: none
}

.select>.select-items div:hover,
.select>.select-items>.same-as-selected {
    background-color: rgba(0, 0, 0, .1)
}

.select:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.select>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: 50px;
    bottom: calc(100% + 15px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg);
    text-align: center
}

.select>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.flex-sbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.flex-sbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.flex-sbe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end
}

.flex-cc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.flex-cs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start
}

.flex-ce {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end
}

.flex-sc {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.flex-ss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start
}

.flex-se {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end
}

.flex-ec {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center
}

.flex-es {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start
}

.flex-ee {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end
}

.yellow-grad {
    background: linear-gradient(to top,#ff9500,#feb900);
}
.yellow-grad-otp {
    background: linear-gradient(to top,#ff9500,#feb900);
}

.yellow-grad-text {
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    text-shadow: 0 -1px 0 #ffcc75
}

.yellow-grad-text>span {
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #82330d;
    text-shadow: 0 -1px 0 #ffcc75;
    padding: 0 6px
}

.hover-effect:hover {
    filter: brightness(120%)
}

.button {
    height: 46px;
    border-radius: 200px;
    box-shadow: 0 0 10px rgba(254, 169, 0, .5);
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .2s ease-in-out
}

body {
    background: #ececec
}

.wrapper {
    width: 100%;
    max-width: 1920px;
    min-height: 100vh;
    background: url(../../img/main/bg/bg2.webp) top center repeat-y;
    margin: 0 auto;
    background-color: #e4e5e5;
    background-size: cover
}

.nav-bg {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    /*background:url(../../img/main/bg/footer_bg.webp) top center no-repeat #dcd8d9*/
}

/*.nav-bg:before{content:'';width:123px;height:90px;background:url(../../img/main/bg/nav_front_left.png);position:absolute;top:0;left:calc( 50% - 61.5px - 771px );pointer-events:none}*/
.nav-bg:after {
    content: '';
    width: 158px;
    height: 149px;
    position: absolute;
    top: 10px;
    left: calc(50% - 79px + 610px);
    pointer-events: none
}

.header-bg {
    width: 100%;
    margin: 0 auto;
    position: inherit;
    z-index: 2
}

.content {
    width: 1225px;
    position: relative;
    z-index: 2;
    margin: 0 auto
}

nav {
    width: 1240px;
    height: 90px;
    position: relative;
    z-index: 2;
    margin: 0 auto
}

nav>.logo {
    width: 171px;
    height: 80px;
    transition: all .2s ease-in-out
}

nav>.logo:hover {
    filter: brightness(120%)
}

nav>.nav-links {
    width: calc(100% - 171px)
}

nav>.nav-links>.links {
    width: calc(100% - 300px)
}

nav>.nav-links>.links>.link,
nav>.nav-links>.links>.link>.open-dropbox {
    font-family: Roboto Bold;
    color: #51423d;
    font-size: 16px;
    transition: all .2s ease-in-out;
    position: relative;
    cursor: pointer
}

nav>.nav-links>.links>.link {}

nav>.nav-links>.links>.link>.open-dropbox {}

nav>.nav-links>.links>.link:hover,
nav>.nav-links>.links>.link>.open-dropbox:hover {
    color: #ff5f00
}

nav>.nav-links>.links>.link:not(:last-child) {
    margin-right: 35px
}

nav>.nav-links>.links>.link>.open-dropbox>i {
    font-size: 10px;
    margin-left: 5px
}

nav>.nav-links>.links>.link>.drop-box {
    width: 250px;
    background: #efece9;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    left: 0;
    top: -30px;
    transition: all .2s ease-in-out;
    transform: scale(.8, .8);
    border-top: 2px solid #ff5f00;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

nav>.nav-links>.links>.link>.active {
    display: block;
    opacity: 1;
    top: calc(100% + 35px);
    pointer-events: auto;
    transform: scale(1, 1)
}

nav>.nav-links>.links>.link>.drop-box>a {
    width: 100%;
    padding: 15px 20px;
    font-family: Roboto Bold;
    color: #5d483a;
    font-size: 14px;
    text-transform: uppercase;
    background: transparent;
    transition: all .2s ease-in-out
}

nav>.nav-links>.links>.link>.drop-box>a:hover {
    background: #fcf8f4;
    color: #ff5f00
}

nav>.nav-links>.links>.link>.drop-box>#arrow {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    left: 25px;
    border-left: 12px solid transparent;
    border-bottom: 12px solid #ff5f00;
    border-right: 12px solid transparent
}

nav>.nav-links>.cp-button {
    width: 270px
}

nav>.nav-links>.cp-button>span {}

nav>.open-nav-button {
    width: 50px;
    height: 50px;
    color: #621c00;
    font-size: 30px;
    border: 1px solid #ffd2ba;
    border-radius: 50px;
    transition: all .2s ease-in-out;
    cursor: pointer;
    background: transparent;
    display: none
}

nav>.open-nav-button>i {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

nav>.open-nav-button:hover {
    color: #ffb203;
    border: 1px solid #621c00;
    background: #621c00
}

nav>.nav-links>.user {
    width: 300px;
    position: relative
}

nav>.nav-links>.user>.name {
    width: calc(100% - 90px);
    height: 46px;
    border-radius: 500px;
    position: relative;
    z-index: 2
}

nav>.nav-links>.user>.name>.text {
    width: calc(100% - 40px);
    height: 100%;
    padding-left: 15px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 10px;
    transition: all .2s ease-in-out
}

nav>.nav-links>.user>.name>.text:hover {
    color: #bd1f00
}

nav>.nav-links>.user>.name>.closed-button {
    width: 46px;
    height: 46px;
    font-size: 30px;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .2s ease-in-out
}

nav>.nav-links>.user>.name>.closed-button:hover {
    color: #bd1f00
}

nav>.nav-links>.user>.balance {
    width: 130px;
    height: 46px;
    background: #eee;
    border-radius: 500px;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    padding-left: 36px;
    font-family: Beaufort Bold;
    font-size: 15px;
    color: #ff7200
}

nav>.nav-links>.user>.balance>img {
    margin-right: 8px
}

nav>.nav-links>.user>.balance>span {
    display: none;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #ff7200;
    margin-left: 5px
}

header {
    width: 1240px;
    position: relative;
    z-index: 2;
    margin: 0 auto
}

header>.status-server {
    width: 100%;
    margin-top: 300px;
    margin-bottom: 25px
}

header>.status-server>.icon {
    width: 20%;
    margin: 0 auto
}

header>.status-server>.icon>img {
    width: 100%;
    height: 100%
}

header>.status-server>.status {
    width: 100%;
    text-align: center;
    font-family: Beaufort;
    font-size: 24px;
    color: #a22400;
    margin-top: 10px
}

header>.status-server>.status>span {
    font-family: Beaufort;
    font-size: 24px;
    color: #fda301
}

header>.status-server>.timer {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 46px;
    color: #562200;
    margin-top: -5px
}

header>.buttons {
    width: 100%;
    margin-bottom: 40px
}

header>.buttons>.start-button {
    height: 56px;
    padding: 0 35px;
    font-size: 24px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 14px
}

header>.buttons>.reg-button {
    height: 57px;
    padding: 0 20px;
    font-size: 24px;
    margin-top: -4px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 10px;
    font-family: Beaufort;
    color: #562200;
    border: 2px solid #ff9500
}

header>.buttons>.reg-button:hover {
    color: #ad2f02;
    border: 2px solid #f66
}

.slider {
    width: 100%;
    height: 220px;
    background: #4c2916;
    border-radius: 5px;
    border-bottom: 3px solid #ff9c00;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1)
}

.slider-block {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 10px
}

.slider-block .slider-line {
    display: flex;
    width: initial;
    height: 100%
}

.slider-block .slider-line .slider-slide {
    height: 100%;
    align-self: stretch;
    padding: 30px;
    border-radius: 5px
}

.slider-block .slider-nav {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 15px;
    padding-left: 19px
}

.slider-block .slider-nav .perv {
    width: 20px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    opacity: .4
}

.slider-block .slider-nav .perv:hover {
    opacity: 1;
    color: #fcbe00
}

.slider-block .slider-nav .next {
    width: 20px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    opacity: .4
}

.slider-block .slider-nav .next:hover {
    opacity: 1;
    color: #fcbe00
}

.slider-block .slider-nav .markers {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center
}

.slider-block .slider-nav .markers .marker {
    width: 7px;
    height: 7px;
    background: #fff;
    cursor: pointer;
    margin: 5px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 12px;
    opacity: .3
}

.slider-block .slider-nav .markers .m_active {
    opacity: 1;
    background: #fcbe00
}

.slider-title {
    width: 50%;
    margin-top: 5px;
    font-family: Beaufort Bold;
    font-size: 38px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 -1px 1px #000
}

.slider-text {
    width: 50%;
    margin-top: 10px;
    color: #dfdfdf;
    font-size: 16px;
    line-height: 24px;
    text-shadow: 0 -1px 1px #000
}

.news-blcok {
    width: calc(100% - 350px);
    position: relative;
    margin-bottom: -20px
}

.news-blcok>.title {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    margin-bottom: 20px;
    height: 40px
}

.news-blcok>.title>.more-news {
    width: 185px;
    height: 34px;
    font-size: 15px;
    margin-left: 20px
}

.news {
    width: 100%;
    position: relative
}

.news>article:nth-child(1) {
    width: calc(46% - 5px);
    height: calc(100% - 20px);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin-left: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, .08)
}

.news>article:nth-child(1)>.img {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    align-items: center
}

.news>article:nth-child(1)>.img:after {
    content: '';
    position: absolute;
    z-index: 2;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%)
}

.news>article:nth-child(1)>.img>img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    z-index: 1
}

.news>article:nth-child(1)>.news-area {
    width: calc(100% - 60px);
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 30px
}

.news>article:nth-child(1)>.news-area>.title>a {
    width: 100%;
    height: calc(28px * 2.1);
    font-family: Beaufort Bold;
    font-size: 30px;
    line-height: 28px;
    color: #3f312c;
    transition: all .2s ease-in-out;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical
}

.news>article:nth-child(1)>.news-area>.title>a:hover {
    color: #a22400
}

.news>article:nth-child(1)>.news-area>.text {
    width: 100%;
    height: calc(22px * 3);
    font-size: 14px;
    color: #8d807c;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 3;
    -moz-box-orient: vertical;
    position: relative
}

.news>article:nth-child(1)>.news-area>.text>a {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    color: #fd963a;
    text-decoration: underline;
    line-height: 22px;
    background: #fff;
    transition: all .2s ease-in-out
}

.news>article:nth-child(1)>.news-area>.text>a:hover {
    color: #ca2b00
}

.news>article:nth-child(1)>.news-area>.text>a:before {
    content: '';
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: -100px;
    top: 0;
    pointer-events: none
}

.news>article:nth-child(1)>.news-area>.info>.date {
    font-size: 12px;
    color: #635b58;
    opacity: .4
}

.news>article:nth-child(1)>.news-area>.info>.date>i {
    font-size: 16px;
    margin-right: 5px;
    margin-top: -1px
}

.news>article:nth-child(1)>.news-area>.info>a {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out;
    margin-right: 0;
    margin-left: 15px
}

.news>article:nth-child(1)>.news-area>.info>a>span {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out;
    display: block
}

.news>article:nth-child(1)>.news-area>.info>a>img {
    padding: -6px
}

.news>article:nth-child(1)>.news-area>.info>a:hover span {
    color: #ff9e00
}

.news>article {
    width: calc(54% - 15px);
    height: 143px;
    margin-bottom: 20px;
    position: relative;
    margin-left: 5%;
    border-radius: 5px;
    overflow: hidden
}

.news>article>.img {
    width: 213px;
    height: 143px;
    z-index: 1;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    align-items: flex-start
}

.news>article>.img>img {
    position: absolute;
    z-index: 1;
    height: 143px;
    object-fit: fill
}

.news>article>.news-area {
    width: calc(100% - 230px);
    position: relative;
    z-index: 2;
    bottom: none;
    left: none
}

.news>article>.news-area>.title>a {
    width: 100%;
    height: calc(22px * 2);
    font-family: Beaufort Bold;
    font-size: 20px;
    line-height: 22px;
    color: #3f312c;
    transition: all .2s ease-in-out;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical
}

.news>article>.news-area>.title>a:hover {
    color: #a22400
}

.news>article>.news-area>.text {
    width: 100%;
    height: calc(18px * 3);
    font-size: 14px;
    color: #8d807c;
    margin-top: 9px;
    margin-bottom: 6px;
    overflow: hidden;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 3;
    -moz-box-orient: vertical;
    position: relative
}

.news>article>.news-area>.text>a {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    color: #fd963a;
    text-decoration: underline;
    line-height: 18px;
    background: #ececec;
    transition: all .2s ease-in-out
}

.news>article>.news-area>.text>a:hover {
    color: #ca2b00
}

.news>article>.news-area>.text>a:before {
    content: '';
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(236, 236, 236, 1) 0%, rgba(236, 236, 236, 0.5) 60%, rgba(236, 236, 236, 0.1) 80%, rgba(236, 236, 236, 0) 100%);
    position: absolute;
    left: -100px;
    top: 0;
    pointer-events: none
}

.news>article>.news-area>.info>.date {
    font-size: 12px;
    color: #635b58;
    opacity: .4
}

.news>article>.news-area>.info>.date>i {
    font-size: 16px;
    margin-right: 5px;
    margin-top: -1px
}

.news>article>.news-area>.info>a {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out;
    margin-right: auto;
    margin-left: 15px
}

.news>article>.news-area>.info>a>span {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out;
    display: none
}

.news>article>.news-area>.info>a>img {
    padding: -6px
}

.widget-block {
    width: 330px;
}

.widget-block>.title {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    margin-bottom: 20px;
    height: 40px
}

.widget {
    width: 100%;
    height: 1000px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, .04)
}

.inner-page {
    width: 100%;
    height: auto;
    background: #f8f8f8;
    padding-bottom: 55px;
    border-radius: 5px
}

.switch {
    width: 100%
}

.switch>.switch-button {
    width: 50%;
    height: 85px;
    font-family: Beaufort;
    text-transform: uppercase;
    font-size: 24px;
    color: #655a5a;
    background: #ebebeb;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    position: relative;
    transition: all .2s ease-in-out;
    border-radius: 5px
}

.switch>.switch-button:hover {
    background: #f6f6f6;
    color: #562200
}

.switch>.switch-button:hover span {
    color: #562200
}

.switch>.switch-button>span {
    margin-left: 5px;
    font-family: Beaufort;
    text-transform: uppercase;
    font-size: 24px;
    color: #655a5a;
    transition: all .2s ease-in-out
}

.switch>.switch-button:after {
    content: '';
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    bottom: -17px;
    left: 0;
    position: absolute;
    opacity: 0;
    transition: all .2s ease-in-out
}

.switch>.active {
    background: #fff;
    color: #562200;
    border-bottom: 1px solid transparent;
    cursor: default;
    pointer-events: none
}

.switch>.active:after {
    opacity: 1
}

.switch>.active>span {
    color: #562200
}

.switch-items {
    width: 750px;
    position: relative;
    margin: 0 auto;
    margin-top: 45px
}

.switch-items>.item {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    display: none
}

.switch-items>.active {
    display: block
}

.switch-items>.item>.title {
    width: 100%;
    height: auto;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    text-align: center;
    margin-bottom: 10px
}

.switch-items>.item>.title>span {
    display: block;
    width: 100%;
    height: auto;
    font-family: Roboto;
    text-transform: none;
    font-size: 16px;
    color: #655a5a;
    text-align: center;
    margin-top: 5px
}

form {
    display: block;
    width: 100%
}

form>.items {
    width: 100%
}

.log-reg-form>.items>.item:nth-child(1) {}

.log-reg-form>.items>.item:nth-child(2) {}

.log-reg-form>.items>.item:nth-child(3) {}

.log-reg-form>.items>.item:nth-child(4) {}

.log-reg-form>.items>.item:nth-child(5) {}

.log-reg-form>.items>.item:nth-child(6) {}

.log-reg-form>.items>.item:nth-child(7) {}

.log-reg-form>.items>.item:nth-child(8) {}

.log-reg-form>.items>.item {
    width: calc(50% - 15px);
    margin-top: 30px;
    order: initial
}

.login-form>.items>.item {
    width: 100%
}

.log-reg-form>.items>.input>input {}

.log-reg-form>.items>.select>.select-selected {}

.log-reg-form>.items>.item>.icon {}

.log-reg-form>.items>.box {
    background: #edecec;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    align-self: stretch
}

.log-reg-form>.items>.box>.text {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #959595;
    margin-top: 10px
}

.log-reg-form>.items>.box>.text>a {
    color: #575252;
    transition: all .2s ease-in-out
}

.log-reg-form>.items>.box>.text>a:hover {
    color: #a51f00
}

.log-reg-form>.items>.captcha {}

.log-reg-form>.items>.box>.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.log-reg-form>.items>.box>.checkbox+label {
    position: relative;
    padding: 0 0 0 36px;
    cursor: pointer
}

.log-reg-form>.items>.box>.checkbox+label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 35px;
    height: 20px;
    border-radius: 13px;
    background: #dbd9d9;
    transition: .2s
}

.log-reg-form>.items>.box>.checkbox+label:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #655a5a;
    transition: .2s
}

.log-reg-form>.items>.box>.checkbox:checked+label:before {
    background: #dbd9d9
}

.log-reg-form>.items>.box>.checkbox:checked+label:after {
    left: 17px;
    background: #ffa114
}

.log-reg-form>.form-button {
    width: 290px;
    height: 55px;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 22px
}

.switch-items>.item>.vk-button {
    width: 290px;
    height: 45px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 16px;
    background: linear-gradient(to bottom, #66aef0, #3d7cb2) !important;
    color: #194266;
    text-shadow: 0 -1px 0 #6bafed;
    box-shadow: 0 0 10px rgba(81, 184, 208, .3);
    text-align: center
}

.switch-items>.item>.vk-button>i {
    font-size: 25px;
    margin-right: 7px;
    margin-top: 0
}

.link-restore-pass {
    margin: 0 auto;
    margin-top: 20px;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 16px;
    color: #534c4c;
    text-align: center;
    display: block;
    text-decoration: underline;
    transition: all .2s ease-in-out
}

.link-restore-pass:hover {
    color: #a52b00
}

.inner-page>.top-title {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 34px;
    position: relative;
    margin-bottom: 40px
}

.inner-page>.top-title:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: 0;
    bottom: -16px;
    pointer-events: none
}

.start-game-guide-box {
    width: 100%;
    position: relative
}

.start-game-guide-box:nth-child(n+3) {
    padding-top: 45px
}

.start-game-guide-box:not(:last-child) {
    padding-bottom: 55px
}

.start-game-guide-box:not(:last-child):after {
    content: '';
    position: absolute;
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: 0;
    bottom: -16px;
    pointer-events: none
}

.start-game-guide-box>.step {
    width: 83px;
    height: 83px;
    margin: 0 auto;
    background: url(../../img/main/bg/step_icon.png) center center;
    background-size: 100% 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    text-align: center;
    text-shadow: 0 -1px 0 #ffc057;
    padding-top: 10px
}

.start-game-guide-box>.step>span {
    display: block;
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 16px;
    color: #562200;
    text-align: center;
    text-shadow: 0 -1px 0 #ffc057;
    margin-top: 8px
}

.start-game-guide-box>.title {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 24px;
    color: #55433d;
    text-align: center;
    margin-top: 20px
}

.start-game-guide-box>.text {
    width: 720px;
    margin: 0 auto;
    margin-top: 10px;
    font-family: Roboto;
    font-size: 18px;
    color: #75655f;
    text-align: center;
    margin-bottom: 30px;
    line-height: 24px
}

.start-game-guide-box>.text2 {
    width: 720px;
    margin: 0 auto;
    font-family: Roboto;
    font-size: 18px;
    color: #75655f;
    text-align: center;
    margin-bottom: 30px
}

.start-game-guide-box>.text2>span {
    font-family: Roboto Bold;
    font-size: 18px;
    color: #ef230e
}

.start-game-guide-box>.reg-button {
    width: 280px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    font-size: 24px
}

.start-game-guide-box>.buttons {
    width: calc(100% - 80px);
    margin: 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding-bottom: 40px;
    margin-bottom: 20px
}

.start-game-guide-box>.success-reg-buttons {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.start-game-guide-box>.success-reg-text {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #736054;
    font-size: 16px;
    line-height: 24px
}

.start-game-guide-box>.buttons>.gd-button,
.start-game-guide-box>.buttons>.ut-button,
.start-game-guide-box>.buttons>.yd-button,
.start-game-guide-box>.buttons>.mg-button {
    width: 250px;
    height: 56px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px
}

.start-game-guide-box>.buttons>.gd-button {
    background: linear-gradient(to top, #004aad, #0095fe);
    box-shadow: 0 0 10px rgba(0, 120, 222, .5)
}

.start-game-guide-box>.buttons>.ut-button {
    background: linear-gradient(to top, #498543, #76e73f);
    box-shadow: 0 0 10px rgba(85, 241, 60, .5)
}

.start-game-guide-box>.buttons>.mg-button {
    background: linear-gradient(to top, #e16968, #fb9468);
    box-shadow: 0 0 10px rgba(231, 113, 104, .5)
}

.start-game-guide-box>.buttons>.gd-button>img,
.start-game-guide-box>.buttons>.ut-button>img,
.start-game-guide-box>.buttons>.yd-button>img,
.start-game-guide-box>.buttons>.mg-button>img {
    margin-left: 15px
}

.start-game-guide-box>.buttons>.gd-button>.info,
.start-game-guide-box>.buttons>.ut-button>.info,
.start-game-guide-box>.buttons>.yd-button>.info,
.start-game-guide-box>.buttons>.mg-button>.info {
    margin-left: 10px
}

.start-game-guide-box>.buttons>.gd-button>.info>.name,
.start-game-guide-box>.buttons>.ut-button>.info>.name,
.start-game-guide-box>.buttons>.yd-button>.info>.name,
.start-game-guide-box>.buttons>.mg-button>.info>.name {
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 20px;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, .3)
}

.start-game-guide-box>.buttons>.gd-button>.info>.name,
.start-game-guide-box>.buttons>.gd-button>.info>.desc {
    color: #1c2441
}

.start-game-guide-box>.buttons>.ut-button>.info>.name,
.start-game-guide-box>.buttons>.ut-button>.info>.desc {
    color: #114905
}

.start-game-guide-box>.buttons>.yd-button>.info>.name,
.start-game-guide-box>.buttons>.yd-button>.info>.desc {
    color: #562200
}

.start-game-guide-box>.buttons>.mg-button>.info>.name,
.start-game-guide-box>.buttons>.mg-button>.info>.desc {
    color: #74271a
}

.start-game-guide-box>.buttons>.gd-button>.info>.desc,
.start-game-guide-box>.buttons>.ut-button>.info>.desc,
.start-game-guide-box>.buttons>.yd-button>.info>.desc,
.start-game-guide-box>.buttons>.mg-button>.info>.desc {
    font-family: Beaufort Bold;
    font-size: 14px;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
    margin-top: -3px
}

.start-game-guide-box>.title-mini {
    width: 100%;
    font-family: Beaufort;
    text-transform: uppercase;
    font-size: 24px;
    color: #55433d;
    text-align: center
}

.start-game-guide-box>.recomend-block {
    width: calc(100% - 80px);
    margin: 0 auto
}

.start-game-guide-box>.recomend-block>.box {
    width: calc(50% - 20px);
    align-self: stretch;
    padding: 30px 30px 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    border-radius: 5px;
    margin-top: 30px
}

.start-game-guide-box>.recomend-block>.box>.title {
    width: 100%;
    font-family: Beaufort;
    text-transform: uppercase;
    font-size: 20px;
    color: #55433d;
    text-align: center;
    margin-bottom: 20px
}

.start-game-guide-box>.recomend-block>.box>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #55433d;
    text-align: center;
    margin-bottom: 20px
}

.start-game-guide-box>.buttons2 {
    width: calc(100% - 80px);
    margin: 0 auto
}

.start-game-guide-box>.buttons2>a {
    width: 250px;
    height: 56px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px
}

.start-game-guide-box>.buttons2>a>.info {
    width: 100%
}

.start-game-guide-box>.buttons2>a>.info>.name {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    text-shadow: 0 -1px 0 #ffcc75;
    text-transform: uppercase
}

.start-game-guide-box>.buttons2>a>.info>.desc {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #562200;
    text-shadow: 0 -1px 0 #ffcc75;
    margin-top: -3px
}

.start-game-guide-box>.drop-box {
    width: 860px;
    margin: 0 auto;
    margin-top: -20px
}

.start-game-guide-box>.drop-box>.title {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 18px;
    color: #55433d;
    padding: 20px 0;
    cursor: pointer;
    transition: all .2s ease-in-out;
    text-align: center
}

.start-game-guide-box>.drop-box>.title:hover {
    color: #bf1f00
}

.start-game-guide-box>.drop-box>.title>i {
    font-size: 12px;
    margin-left: 5px
}

.start-game-guide-box>.drop-box>.box {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .1);
    display: none;
    font-size: 14px;
    color: #857873;
    line-height: 20px
}

.start-game-guide-box>.drop-box>.box>span {
    color: #cd7e0d;
    transition: all .2s ease-in-out;
    text-decoration: underline;
    cursor: pointer
}

.start-game-guide-box>.drop-box>.box>span:hover {
    color: #bf1f00
}

.start-game-guide-box>.drop-box>.box>.top-text {
    margin-bottom: 20px;
    color: #55433d
}

.start-game-guide-box>.drop-box>.box>.screenshot {
    width: 100%;
    margin-top: 20px;
    display: none
}

.start-game-guide-box>.drop-box>.box>.screenshot>a {
    display: block
}

.start-game-guide-box>.drop-box>.box>.screenshot>a>img {
    width: 100%
}

.start-game-guide-box>a>.newbie-box {
    width: 280px;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 20px;
    border-radius: 5px;
    margin: 0 auto
}

.start-game-guide-box>a>.newbie-box>img {
    margin-top: -20px
}

.start-game-guide-box>a>.newbie-box>.name {
    width: 100%;
    font-family: Beaufort;
    text-transform: uppercase;
    font-size: 20px;
    color: #55433d;
    text-align: center;
    margin-top: 20px
}

.chars-nav {
    width: calc(100% - 80px);
    margin: 0 auto;
    background: #ebebec;
    border-radius: 5px
}

.chars-nav>.chars-button {
    width: calc(100%/10);
    padding-top: 25px;
    padding-bottom: 25px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    background: transparent;
    position: relative;
    border-radius: 5px
}

.chars-nav>.chars-button:hover {
    background: #f5f5f5
}

.chars-nav>.chars-button>img {
    display: block;
    margin: 0 auto
}

.chars-nav>.chars-button>.name {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 19px;
    color: #562200;
    text-align: center;
    margin-top: 15px
}

.chars-nav>.chars-button:after {
    content: '';
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top left;
    position: absolute;
    left: 0;
    bottom: -17px;
    opacity: 1;
    transition: all .2s ease-in-out
}

.chars-nav>.chars-button:before {
    content: '';
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    position: absolute;
    left: 0;
    bottom: -17px;
    opacity: 0;
    transition: all .2s ease-in-out
}

.chars-nav>.active {
    background: #fff;
    pointer-events: none
}

.chars-nav>.active:after {
    opacity: 0
}

.chars-nav>.active:before {
    opacity: 1
}

.chars-block {
    width: calc(100% - 80px);
    margin: 0 auto;
    margin-top: 45px;
    position: relative
}

.chars-block>.char {
    width: 100%;
    opacity: 1;
    transition: all .3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.chars-block>.active {
    position: relative;
    opacity: 1;
    pointer-events: auto
}

.chars-block>.char>.img {
    width: 320px;
    height: 420px;
    position: relative
}

.chars-block>.char>.img>img {
    position: absolute;
    pointer-events: none
}

.chars-block>.char>.info {
    width: calc(100% - 370px)
}

.chars-block>.char>.info>.name {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 30px;
    color: #562200;
    text-align: left;
    padding-top: 15px
}

.chars-block>.char>.info>.desc {
    width: 100%;
    font-family: Roboto;
    font-size: 16px;
    color: #897f7c;
    line-height: 24px;
    margin-top: 15px;
    margin-bottom: 20px
}

.chars-block>.char>.info>.perv {
    width: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3)
}

.ft-slider-bg {
    width: calc(100% - 80px);
    height: auto;
    position: relative;
    margin: 0 auto
}

.ft-slider-bg>.left_button {
    width: 40px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    left: -8px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    font-size: 60px;
    color: #000;
    opacity: .25
}

.ft-slider-bg>.right_button {
    width: 40px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    right: -8px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    font-size: 60px;
    color: #000;
    opacity: .25
}

.ft-slider-bg>.left_button>i,
.ft-slider-bg>.right_button>i {
    position: absolute
}

.ft-slider-bg>.left_button:hover,
.ft-slider-bg>.right_button:hover {
    color: #a62902;
    opacity: 1
}

.ft-slider-bg>.ft-slider {
    width: calc(100% - 100px);
    height: 100%;
    overflow: hidden;
    margin: 0 auto
}

.ft-slider-bg>.ft-slider>.slider_line {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -7.5px;
    transition: transform .5s ease-in-out
}

.ft-slider-bg>.ft-slider>.slider_line>.slider_item {
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 7.5px;
    margin-left: 7.5px;
    position: relative;
    cursor: pointer;
    border-bottom: 2px solid #ff9700;
    transition: background .2s ease-in-out;
    align-self: stretch;
    padding: 20px;
    background: #eaeaea
}

.ft-slider-bg>.ft-slider>.slider_line>.slider_item:hover {
    border-bottom: 2px solid #f8bea6;
    background: #f5f5f5
}

.ft-slider-bg>.ft-slider>.slider_line>.active {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    border-bottom: 2px solid #e32a11
}

.ft-slider-bg>.ft-slider>.slider_line>.slider_item>.icon {
    width: 100px;
    height: 60px;
    margin: 0 auto
}

.ft-slider-bg>.ft-slider>.slider_line>.slider_item>.name {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    text-align: center;
    text-transform: uppercase;
    margin-top: 15px
}

.slider_info {
    width: calc(100% - 80px - 100px);
    margin: 0 auto;
    margin-top: 45px;
    position: relative
}

.slider_info>.slider_info_item {
    width: 100%;
    transition: all .3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.slider_info>.active {
    opacity: 1;
    position: relative;
    pointer-events: auto
}

.slider_info>.slider_info_item>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 24px;
    color: #52443a;
    text-align: center;
    text-transform: uppercase
}

.slider_info>.slider_info_item>.title>.icon {
    width: 40px;
    height: 20px;
    position: relative;
    margin-right: 20px
}

.slider_info>.slider_info_item>.title>.icon>img {
    position: absolute;
    height: 180%
}

.slider_info>.slider_info_item>.text {
    width: 100%;
    color: #52443a;
    font-size: 16px;
    line-height: 28px;
    margin-top: 20px
}

.calendar-events {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.calendar-events>.image {
    width: 288px;
    height: auto;
    border-radius: 5px;
    overflow: hidden
}

.calendar-events>.image>img {
    width: 100%
}

.calendar-events>.events-content {
    width: calc(100% - 288px - 30px);
    height: auto;
    margin-left: auto
}

.calendar-events>.events-content>.title {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 20px;
    color: #562200
}

.calendar-events>.events-content>.text {
    width: 100%;
    margin-top: 10px;
    font-family: Roboto;
    font-size: 16px;
    color: #736054;
    line-height: 25px
}

.calendar-events>.events-content>.events {
    width: 100%;
    margin-top: 15px
}

.calendar-events>.events-content>.events>.event {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    line-height: 30px
}

.calendar-events>.events-content>.events>.event>.date {
    font-size: 14px;
    height: 26px;
    padding: 3px 10px;
    margin-right: 5px;
    border-radius: 20px;
    width: auto
}

.calendar-events>.events-content>.events>.event>.name {
    font-family: Roboto;
    font-size: 20px;
    color: #562200;
    line-height: 20px
}

.game-desc {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.game-desc>.images {
    width: 288px;
    height: auto
}

.game-desc>.images>.img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3)
}

.game-desc>.images>.img:not(:last-child) {
    margin-bottom: 35px
}

.game-desc>.images>.img>img {
    width: 100%;
    margin-bottom: -10px
}

.game-desc>.game-desc-content {
    width: calc(100% - 288px - 30px);
    height: auto;
    margin-left: auto
}

.game-desc>.game-desc-content>.block {
    width: 100%
}

.game-desc>.game-desc-content>.block:not(:first-child) {
    margin-top: 40px
}

.game-desc>.game-desc-content>.block>.title {
    font-family: Roboto Bold;
    font-size: 25px;
    color: #562200
}

.game-desc>.game-desc-content>.block>.text {
    font-family: Roboto;
    font-size: 16px;
    color: #796963;
    line-height: 26px;
    margin-top: 15px
}

.game-desc>.game-desc-content>.block>.text>a {
    font-family: Roboto Bold;
    font-size: unset;
    color: #f37e00;
    transition: all .2s ease-in-out;
    text-decoration: underline
}

.game-desc>.game-desc-content>.block>.text>a:hover {
    color: #f33900
}

.game-desc>.game-desc-content>.block>.start-button {
    width: 250px;
    height: 56px;
    margin-top: 20px;
    font-size: 24px
}

.text-content {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.text-content *:last-child {
    margin-bottom: 0 !important
}

.text-content>p>a {
    text-decoration: underline;
    color: #f37e00
}

ul {
    margin: 25px 0;
    margin-left: 18px
}

ul li {
    color: #4a4646;
    line-height: 24px
}

p {
    color: #827979;
    line-height: 24px;
    margin: 25px 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Beaufort Bold;
    color: #4a4646;
    margin: 25px 0
}

table {
    width: 100%;
    margin: 25px 0;
    border: 1px solid #d5d2d0
}

table tr {
    width: 100%
}

table tr td {
    text-align: center;
    background: #f8f8f8;
    color: #827e7e
}

table tr:not(:last-child) td {
    border-bottom: 1px solid #d5d2d0
}

table tr td:not(:last-child) {
    border-right: 1px solid #d5d2d0
}

.promotions {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.promotions:not(:nth-child(2)) {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.promotions>.image {
    width: 220px;
    height: 220px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3)
}

.promotions>.image>img {
    width: 100%;
    position: absolute
}

.promotions>.promo-content {
    width: calc(100% - 220px - 20px)
}

.promotions>.promo-content>.title {
    font-family: Beaufort Bold;
    font-size: 24px;
    color: #562200;
    text-transform: uppercase
}

.promotions>.promo-content>.title>.text {
    font-family: Beaufort Bold;
    font-size: 24px;
    color: #562200;
    text-transform: uppercase;
    margin-right: 20px
}

.promotions>.promo-content>.title>.period {
    font-size: 18px;
    height: 30px;
    padding: 3px 10px;
    border-radius: 20px;
    margin: 10px 0
}

.promotions>.promo-content>.text {
    width: 100%;
    height: calc(30px * 4);
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 30px;
    margin-top: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 4;
    -moz-box-orient: vertical
}

.promotions>.promo-content>.info {
    width: 100%;
    margin-top: 15px
}

.promotions>.promo-content>.info>.date {
    font-size: 12px;
    color: #635b58;
    opacity: .4
}

.promotions>.promo-content>.info>.date>i {
    font-size: 16px;
    margin-right: 5px;
    margin-top: -1px
}

.promotions>.promo-content>.info>a {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out;
    margin-right: auto;
    margin-left: 15px
}

.promotions>.promo-content>.info>a>span {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #635b58;
    transition: all .2s ease-in-out
}

.promotions>.promo-content>.info>a:hover span {
    color: #ff9e00
}

.pagination {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.pagination>a {
    width: 40px;
    height: 40px;
    background: #e4deda;
    margin: 0 7px;
    border-radius: 40px;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #75665c;
    line-height: 20px;
    transition: all .2s ease-in-out
}

.pagination>a:hover {
    background: #f3dbcb
}

.pagination>.active {
    background: linear-gradient(to top, #ff9500, #feb900);
    font-size: 20px;
    color: #82330d;
    text-shadow: 0 -1px 0 #ffcc75
}

.pagination>.active:hover {
    background: linear-gradient(to top, #ff9500, #feb900)
}

.votes {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.votes>.block {
    width: calc(50% - 15px)
}

.votes>.block>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 16px;
    color: #562200;
    line-height: 30px;
    text-align: center;
    margin-top: 20px
}

.votes>.block>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    line-height: 30px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px
}

.votes>.block>.table {
    width: 100%
}

.votes>.block>.table>.line {
    width: 100%;
    background: #e9e9e9;
    border-radius: 20px;
    padding: 15px;
    font-family: Roboto Bold;
    font-size: 16px;
    color: #635553;
    margin-top: 5px
}

.votes>.block>.table>.line>img {
    margin-right: 5px
}

.votes>.block>.table>.line>span {
    font-family: unset;
    font-size: unset;
    color: #c65646;
    margin: 0 5px
}

.votes>.block>.table>.line>.golden {
    color: #ff8300
}

.votes>.block>.text2 {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #8a807f;
    line-height: 30px;
    text-align: center;
    margin-top: 30px
}

.votes>.block>.right-info {
    width: 100%;
    padding: 30px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    border-radius: 20px;
    position: relative
}

.votes>.block>.right-info>img {
    margin-top: -20px
}

.votes>.block>.right-info>.title {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    line-height: 30px;
    text-transform: uppercase;
    margin-top: -20px
}

.votes>.block>.right-info>.title>span {
    display: block;
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 28px;
    color: #e52407;
    line-height: 30px;
    text-align: center
}

.votes>.block>.right-info>.vote-button {
    width: 250px;
    height: 56px;
    font-size: 24px;
    margin-top: 20px
}

.votes>.block>.right-info>.mini-title {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #562200;
    line-height: 20px;
    text-align: center;
    margin-top: 40px
}

.votes>.block>.right-info>.items {
    width: calc(100% - 40px);
    margin-top: 20px;
    margin-bottom: 20px
}

.votes>.block>.right-info>.items>.block {
    width: calc(50% - 30px);
    position: relative;
    z-index: 1
}

.votes>.block>.right-info>.items>.block:hover {
    z-index: 2
}

.votes>.block>.right-info>.items>.block>.item {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #8a807f;
    line-height: 20px;
    margin-top: 5px 0;
    position: relative;
    cursor: pointer;
    z-index: 1
}

.votes>.block>.right-info>.items>.block>.item:hover {
    color: #562200;
    z-index: 2
}

.votes>.block>.right-info>.items>.block>.item:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.votes>.block>.right-info>.items>.block>.item>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: 0;
    bottom: 25px;
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.votes>.block>.right-info>.items>.block>.item>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: 20px;
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.newbie-box-info {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    padding-bottom: 35px
}

.newbie-registration-box-info {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    padding-bottom: 35px
}

.newbie-registration-box-info a {
    color: #f37e00;
    text-decoration: underline
}

.newbie-registration-box-info:after {
    content: '';
    position: absolute;
    width: calc(100% + 80px);
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: -40px;
    bottom: -16px;
    pointer-events: none
}

.newbie-box-info>.image {
    width: 200px;
    height: 175px;
    position: relative
}

.newbie-box-info>.image>img {
    position: absolute;
    transform: translateY(-22px);
    pointer-events: none
}

.newbie-box-info>.newbie-box-content {
    width: calc(100% - 200px - 40px)
}

.newbie-box-info>.newbie-box-content>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 28px
}

.newbie-registration-box-info>.newbie-box-content>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 28px
}

.newbie-box-info>.newbie-box-content>.newbie-button {
    width: 300px;
    height: 56px;
    font-size: 24px;
    margin-top: 20px
}

.newbie-box-rewards {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    margin-top: 35px
}

.newbie-registration-box-rewards {
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-top: 10px
}

.newbie-box-rewards>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px
}

.newbie-box-info>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
    margin-top: 40px
}

.newbie-registration-box-info>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px
}

.newbie-box-rewards>.newbie-drop-box {
    width: 100%;
    margin-top: 8px
}

.newbie-box-rewards>.newbie-drop-box>.title {
    width: 100%;
    height: 50px;
    border-radius: 50px;
    background: #e8e8e8;
    cursor: pointer;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 0 transparent
}

.newbie-box-rewards>.newbie-drop-box>.title:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.newbie-box-rewards>.newbie-drop-box>.title>.icon {
    width: 28px;
    height: 28px;
    overflow: hidden;
    position: relative;
    margin-left: 10px
}

.newbie-box-rewards>.newbie-drop-box>.title>.icon>img {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%
}

.newbie-box-rewards>.newbie-drop-box>.title>.text {
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #58524f;
    text-transform: uppercase;
    margin-left: 10px
}

.newbie-box-rewards>.newbie-drop-box>.title>.arrow {
    margin-left: auto;
    margin-right: 15px
}

.newbie-box-rewards>.newbie-drop-box>.title>.arrow>span {
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #afadac;
    text-transform: uppercase;
    margin-right: 8px
}

.newbie-box-rewards>.newbie-drop-box>.title>.arrow>i {
    font-size: 18px;
    color: #8e8785
}

.newbie-box-rewards>.newbie-drop-box>.box {
    width: 100%;
    padding-left: 43px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    margin-top: 3px;
    display: none
}

.newbie-box-rewards>.newbie-drop-box>.box>.item {
    font-family: Roboto;
    font-size: 14px;
    color: #58524f;
    line-height: 30px;
    position: relative;
    cursor: pointer
}

.newbie-box-rewards>.newbie-drop-box>.box>.item:hover {
    color: #9e4c03
}

.newbie-box-rewards>.newbie-drop-box>.box>.item:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.newbie-box-rewards>.newbie-drop-box>.box>.item>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: 0;
    bottom: calc(100% + 5px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.newbie-box-rewards>.newbie-drop-box>.box>.item>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: 20px;
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.newbie-registration-box-rewards>.newbie-drop-box {
    width: 100%;
    margin-top: 8px
}

.newbie-registration-box-rewards>.newbie-drop-box>.title {
    width: 100%;
    height: 50px;
    border-radius: 50px;
    background: #e8e8e8;
    cursor: pointer;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 0 transparent
}

.newbie-registration-box-rewards>.newbie-drop-box>.title:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.icon {
    width: 28px;
    height: 28px;
    overflow: hidden;
    position: relative;
    margin-left: 10px
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.icon>img {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.text {
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #58524f;
    text-transform: uppercase;
    margin-left: 10px
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.arrow {
    margin-left: auto;
    margin-right: 15px
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.arrow>span {
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #afadac;
    text-transform: uppercase;
    margin-right: 8px
}

.newbie-registration-box-rewards>.newbie-drop-box>.title>.arrow>i {
    font-size: 18px;
    color: #8e8785
}

.newbie-registration-box-rewards>.newbie-drop-box>.box {
    width: 100%;
    padding-left: 43px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    margin-top: 3px;
    display: none
}

.newbie-registration-box-rewards>.newbie-drop-box>.box>.item {
    font-family: Roboto;
    font-size: 14px;
    color: #58524f;
    line-height: 30px;
    position: relative;
    cursor: pointer
}

.newbie-registration-box-rewards>.newbie-drop-box>.box>.item:hover {
    color: #9e4c03
}

.newbie-registration-box-rewards>.newbie-drop-box>.box>.item:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.newbie-registration-box-rewards>.newbie-drop-box>.box>.item>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: 0;
    bottom: calc(100% + 5px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.newbie-registration-box-rewards>.newbie-drop-box>.box>.item>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: 20px;
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.ref-system {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.ref-system>.text {
    width: 100%;
    border-radius: 20px;
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 30px;
    text-align: center
}

.ref-system>.block {
    width: calc(50% - 15px);
    margin-top: 40px
}

.ref-system>.block>.title {
    width: 80%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    text-transform: uppercase;
    padding-bottom: 25px;
    text-align: center;
    margin: 0 auto
}

.ref-system>.block>.line {
    width: 100%;
    padding: 10px;
    background: #e9e9e9;
    border-radius: 30px;
    margin-top: 3px
}

.ref-system>.block>.line>.left,
.ref-system>.block>.line>.right {
    width: 100px;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #564f4f
}

.ref-system>.block>.line>.center {
    width: calc(100% - 200px);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    color: #564f4f;
    position: relative;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.ref-system>.block>.line>.center:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.ref-system>.block>.line>.center:hover {
    color: #9e4c03
}

.ref-system>.block>.line-title {
    background: #f7e4c9
}

.ref-system>.block>.line-title>.center {
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #9e4c03
}

.ref-system>.block>.line-title>.left,
.ref-system>.block>.line-title>.right {
    width: 100px;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #9e4c03
}

.ref-system>.block>.line-title>.left>span,
.ref-system>.block>.line-title>.right>span {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #9e4c03;
    display: block
}

.ref-system>.block>.line-title>.left>span:first-child,
.ref-system>.block>.line-title>.right>span:first-child {
    display: block
}

.ref-system>.block>.line-title>.left>span:last-child,
.ref-system>.block>.line-title>.right>span:last-child {
    display: none
}

.ref-system>.block>.line>.center>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: calc(50% - 125px);
    bottom: calc(100% + 5px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.ref-system>.block>.line>.center>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.calculator {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.scroll-block {
    width: 100%;
    height: auto
}

.resource-map {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative
}

.resource-map>.text {
    width: 100%;
    margin-bottom: 35px;
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 30px;
    text-align: center
}

.resource-map>.text-bottom {
    width: 100%;
    margin-top: 35px;
    font-family: Roboto;
    font-size: 16px;
    color: #5f554c;
    line-height: 30px;
    text-align: center
}

.cp-head-block {
    width: calc(100% - 355px);
    height: 265px;
    margin-left: auto
}

.cp-status-server {
    width: 280px
}

.cp-status-server>.icon {
    width: 75px;
    height: 75px;
    position: relative
}

.cp-status-server>.icon>img {
    position: absolute;
    width: 100px
}

.cp-status-server>.info {
    width: calc(100% - 85px)
}

.cp-status-server>.info>.status {
    width: 100%;
    text-align: center;
    font-family: Beaufort;
    font-size: 24px;
    color: #a22400
}

.cp-status-server>.info>.status>span {
    font-family: Beaufort;
    font-size: 24px;
    color: #fda301
}

.cp-status-server>.info>.timer {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 46px;
    color: #562200;
    margin-top: -7px
}

.cp-layout {
    width: 100%
}

.cp-layout>.cp-aside {
    width: 325px;
    align-self: stretch
}

.cp-layout>.cp-content {
    width: calc(100% - 355px);
    align-self: stretch;
    background: #fff;
    border-radius: 5px;
    padding-bottom: 30px
}

.cp-layout>.cp-aside>.cp-user {
    width: 100%;
    height: 185px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 30px
}

.cp-layout>.cp-aside>.cp-navigation {
    width: 100%;
    background: #fff;
    border-radius: 5px
}

.cp-layout>.cp-content>.cp-top-title {
    width: 100%;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 24px;
    color: #562200;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 28px;
    position: relative;
    margin-bottom: 30px
}

.cp-layout>.cp-content>.cp-top-title:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: 0;
    bottom: -16px;
    pointer-events: none
}

.cp-layout>.cp-content>.cp-center {
    width: 100%;
    padding: 0 30px
}

.cp-layout>.cp-content>.cp-center>.half-block {
    width: calc(50% - 15px)
}

.cp-layout>.cp-content>.cp-center>*:last-child {
    padding-bottom: 0 !important
}

.cp-block-title {
    width: 100%;
    padding-bottom: 20px;
    font-family: Beaufort Bold;
    text-transform: uppercase;
    font-size: 20px;
    color: #562200;
    text-align: center
}

.cp-table {
    width: 100%
}

.cp-table>.tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 15px;
    border-radius: 20px;
    margin-top: 4px
}

.cp-table>.tr>.td {
    position: relative;
    font-family: Roboto;
    font-size: 14px;
    color: #635a52;
    padding: 0 !important;
}

.cp-table>.tr:nth-child(even) {
    background: #f9f9f9
}

.cp-table>.tr:nth-child(odd) {
    background: #eee
}

.cp-table>.tr>.td:before {
    content: attr(data-label);
    display: none
}

.cp-pagination {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    margin-top: 20px
}

.cp-pagination>a {
    width: 30px;
    height: 30px;
    background: #e4deda;
    margin: 0 3px;
    border-radius: 40px;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #75665c;
    line-height: 20px;
    transition: all .2s ease-in-out
}

.cp-pagination>a:hover {
    background: #f3dbcb
}

.cp-pagination>.active {
    background: linear-gradient(to top, #ff9500, #feb900);
    font-size: 16px;
    color: #82330d;
    text-shadow: 0 -1px 0 #ffcc75
}

.cp-pagination>.active:hover {
    background: linear-gradient(to top, #ff9500, #feb900)
}

.cp-user>img {
    display: block;
    margin: 0 auto
}

.cp-user>.desc {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #88776d;
    text-transform: uppercase;
    margin-top: 15px
}

.cp-user>.name {
    width: 100%;
    text-align: center;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cp-user>a {
    width: 125px;
    display: block;
    padding: 5px 7px 5px 10px;
    text-align: center;
    font-family: Beaufort;
    font-size: 17px;
    color: #e04141;
    background: transparent;
    border-radius: 4px;
    margin: 0 auto;
    transition: all .2s ease-in-out
}

.cp-user>a:hover {
    background: #f7d9d9
}

.cp-open-nav {
    width: 100%
}

.cp-navigation>.cp-open-nav {
    width: 100%;
    padding: 25px;
    border-bottom: 1px solid #ededed;
    cursor: pointer;
    background: transparent;
    transition: all .2s ease-in-out;
    border-radius: 5px;
    display: none
}

.cp-navigation>.cp-open-nav:hover {
    background: #faf3ec
}

.cp-navigation>.cp-open-nav:hover .arrow {
    opacity: 1
}

.cp-navigation>.cp-open-nav>.icon {
    width: 20px;
    height: 20px;
    position: relative
}

.cp-navigation>.cp-open-nav>.icon>i {
    position: absolute
}

.cp-navigation>.cp-open-nav>.text {
    width: calc(100% - 40px - 32px);
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #4e4139;
    text-transform: uppercase;
    position: relative
}

.cp-navigation>.cp-open-nav>.arrow {
    width: 20px;
    height: 20px;
    position: relative;
    opacity: .4;
    transition: all .2s ease-in-out
}

.cp-navigation>.cp-open-nav>.arrow>i {
    position: absolute
}

.cp-navigation>.links {
    width: 100%;
    display: block
}

.cp-navigation>.links>a {
    width: 100%;
    padding: 15px 15px 15px 25px;
    position: relative;
    background: transparent;
    transition: all .2s ease-in-out;
    border-radius: 5px
}

.cp-navigation>.links>a:not(:last-child) {
    border-bottom: 1px solid #ededed
}

.cp-navigation>.links>a:hover {
    background: #f9f0e5
}

.cp-navigation>.links>a:hover .text {
    color: #86360b
}

.cp-navigation>.links>.active {
    background: #fff !important
}

.cp-navigation>.links>.active:before {
    content: '';
    width: 18px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -16px;
    background: url(../../img/main/bg/border_right_cp_button.png) center center
}

.cp-navigation>.links>.active>.text {
    color: #e03503 !important
}

.cp-navigation>.links>a>.icon {
    width: 20px;
    height: 20px;
    position: relative
}

.cp-navigation>.links>a>.icon>img {
    position: absolute
}

.cp-navigation>.links>a>.icon_b {
    width: calc(100% - 170px)
}

.cp-navigation>.links>a>.icon_b>img {
    left: -45px
}

.cp-navigation>.links>a>.text {
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #4e4139;
    text-transform: uppercase;
    position: relative
}

.cp-navigation>.links>a>.text_b {
    width: 75px;
    left: -24px;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #4e4139;
    text-transform: uppercase;
    position: relative
}

.cp-navigation>.links>a>.balance {
    position: absolute;
    height: 26px;
    padding: 0 10px;
    border-radius: 50px;
    right: 20px;
    top: calc(50% - 13px);
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #fff;
    background: #ff8f00
}

.cp-navigation>.links>a>.balance2 {
    position: absolute;
    height: 26px;
    padding: 0 10px;
    border-radius: 50px;
    right: 20px;
    top: calc(50% - 13px);
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #615649;
    background: #eee
}

.cp-user-information {
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ededed
}

.cp-user-information>.line {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #634934;
    margin-bottom: 10px
}

.cp-user-information>.line>span {
    font-family: Roboto Bold;
    color: #634934;
    font-size: unset
}

.cp-user-information>.line.balance {
    font-family: Roboto Bold;
    color: #ff7f00
}

.cp-user-information>.line>a {
    color: #796963;
    text-decoration: underline;
    transition: all .2s ease-in-out;
    font-size: unset
}

.cp-user-information>.line>a:hover {
    color: #ff7f00
}

.cp-character-list {
    width: 100%
}

.cp-character-list>.cp-table>.tr>.td:nth-child(1) {
    width: 50%;
    text-align: left
}

.cp-character-list>.cp-table>.tr:nth-child(n+1)>.td:nth-child(1) {
    font-family: Roboto Bold
}

.cp-character-list>.cp-table>.tr>.td:nth-child(2) {
    width: 150px;
    text-align: center
}

.cp-character-list>.cp-table>.tr>.td:nth-child(2)>i {
    margin-right: 5px
}

.cp-character-list>.cp-table>.tr:nth-child(1) {}

.cp-character-list>.cp-table>.tr {}

.cp-character-list>.cp-table>.tr>.td {}

.cp-character-list>.cp-table>.tr>.td:before {}

.cp-login-history {
    width: 100%
}

.cp-login-history>.cp-table>.tr>.td:nth-child(1) {
    width: 30px;
    text-align: center
}

.cp-login-history>.cp-table>.tr>.td:nth-child(2) {
    width: 50%;
    text-align: left
}

.cp-login-history>.cp-table>.tr>.td:nth-child(3) {
    width: calc(40% - 30px);
    text-align: left
}

.cp-login-history>.cp-table>.tr:nth-child(1) {}

.cp-login-history>.cp-table>.tr {}

.cp-login-history>.cp-table>.tr>.td {}

.cp-login-history>.cp-table>.tr>.td:before {}

.action-cp-top {
    width: 100%;
    margin-bottom: 10px;
    flex-wrap: nowrap
}

.action-cp-top>.select-block {
    color: #51423d;
    font-family: Roboto Bold;
    font-size: 16px
}

.action-cp-top>.select-block>.select {
    width: 55px;
    height: 30px;
    margin: 0 10px
}

.action-cp-top>.select-block>.select>.select-selected {
    padding: 0 5px;
    padding-top: 4px;
    padding-right: 10px
}

.action-cp-top>.select-block>.select>.select-selected:after {
    right: 4px;
    transform: scale(.6, .6)
}

.action-cp-top>.cp-search-block {
    width: auto;
    color: #51423d;
    font-family: Roboto Bold;
    font-size: 16px;
    margin-right: 20px
}

.action-cp-top>.cp-search-block>input {
    width: 120px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid #e5e5e5;
    background: #f4f4f4;
    text-align: center;
    margin-left: 10px;
    color: #51423d;
    font-size: 16px;
    font-family: Beaufort Bold
}

.cp-table.action-history {
    width: 100%
}

.cp-table.action-history>.tr>.td:nth-child(1) {
    width: 60px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.action-history>.tr>.td:nth-child(2) {
    width: 140px;
    text-align: center
}

.cp-table.action-history>.tr>.td:nth-child(3) {
    width: 115px;
    text-align: center
}

.cp-table.action-history>.tr>.td:nth-child(4) {
    width: calc((100% - 300px)/5);
    text-align: center
}

.cp-table.action-history>.tr:not(:first-child)>.td:nth-child(4) {
    color: #a52701
}

.cp-table.action-history>.tr>.td:nth-child(5) {
    width: calc((100% - 300px)/5);
    text-align: center
}

.cp-table.action-history>.tr:not(:first-child)>.td:nth-child(5) {
    color: #f5870a
}

.cp-table.action-history>.tr>.td:nth-child(6) {
    width: calc((100% - 300px)/2);
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: pointer
}

.cp-table.action-history>.tr>.td:nth-child(6)>span {
    display: block;
    text-align: center;
    white-space: nowrap;
    transition: transform 8s;
    transform: translateX(0px)
}

.cp-table.action-history>.tr>.td:nth-child(6):hover span {
    transform: translateX(-100%)
}

.cp-table.action-history>.tr:nth-child(1) {}

.cp-table.action-history>.tr {}

.cp-table.action-history>.tr>.td {}

.cp-table.action-history>.tr>.td:before {}

.cp-table.action-history>.tr>.td>input {
    width: 100%;
    height: 24px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid #dcdcdc;
    font-size: 11px
}

.ip-defence {
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ededed
}

.ip-defence>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #7d7670;
    text-align: center;
    line-height: 26px
}

.ip-defence>.my-ip {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #562200;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px
}

.ip-defence>.my-ip>span {
    font-size: unset;
    font-family: unset;
    color: #ff7800
}

.ip-defence>.stroke-ip {
    width: 100%
}

.ip-defence>.stroke-ip>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #562200;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px
}

.ip-defence>.stroke-ip>.ip {
    display: inline-block;
    padding: 3px 6px;
    background: #f6f6f6;
    border-radius: 3px;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #635a52;
    text-transform: uppercase;
    text-align: center;
    margin: 2px
}

.ip-defence>.stroke-ip>.ip>a {
    color: #ff7800;
    transition: all .2s ease-in-out
}

.ip-defence>.stroke-ip>.ip>a:hover {
    color: #ff4800
}

.ip-defence>.insert-ip {
    width: 100%;
    margin-top: 25px
}

.ip-defence>.insert-ip>form>input {
    width: 250px;
    height: 40px;
    position: relative;
    border-radius: 500px;
    border: 1px solid #e5e5e5;
    background: #f4f4f4;
    text-align: center;
    font-family: Beaufort;
    color: #635a52
}

.ip-defence>.insert-ip>form>.button {
    width: 200px;
    height: 40px;
    font-size: 16px;
    margin: 5px
}

.cp-change-password {
    width: 100%
}

.cp-rechange-password-form {
    width: 100%
}

.cp-rechange-password-form>.items>.input {
    height: 44px;
    margin-top: 0;
    margin-bottom: 5px;
    overflow: visible
}

.cp-rechange-password-form>.items>.input>input {}

.cp-rechange-password-form>.items>.input>.icon {
    width: 43px;
    height: 42px;
    pointer-events: auto
}

.cp-rechange-password-form>.items>.line {
    width: 100%;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    color: #7d7670;
    text-align: center;
    margin: 10px 0
}

.cp-rechange-password-form>.items>.input>.icon:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.cp-rechange-password-form>.items>.input>.icon>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #00ec14;
    left: 0;
    bottom: calc(100% + 10px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.cp-rechange-password-form>.items>.input>.icon>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: 10px;
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.cp-rechange-password-form>.form-button {
    width: 240px;
    height: 45px;
    font-size: 18px;
    margin: 0 auto;
    margin-top: 20px
}

.add-vk-account {
    width: 100%
}

.add-vk-account>.text {
    width: 100%;
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #635a52;
    text-align: center;
    line-height: 22px
}

.add-vk-account>.form-button {
    width: 240px;
    height: 45px;
    font-size: 18px;
    margin: 0 auto;
    margin-top: 20px
}

.cp-table.donate-history {
    width: 100%;
    flex-wrap: nowrap !important
}

.cp-table.donate-history>.tr>.td:nth-child(1) {
    width: 30px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.donate-history>.tr>.td:nth-child(2) {
    width: 90px;
    text-align: center
}

.cp-table.donate-history>.tr:not(:first-child)>.td:nth-child(2) {
    color: #ff5f00;
    font-family: Roboto Bold
}

.cp-table.donate-history>.tr>.td:nth-child(3) {
    width: 130px;
    text-align: center
}

.cp-table.donate-history>.tr>.td:nth-child(4) {
    width: 100px;
    text-align: center
}

.cp-table.donate-history>.tr:not(:first-child)>.td:nth-child(4) {
    color: #1678cc;
    font-family: Roboto Bold
}

.cp-table.donate-history>.tr>.td:nth-child(5) {
    width: 140px;
    text-align: center
}

.cp-table.donate-history>.tr:not(:first-child)>.td:nth-child(5) {
    font-family: Roboto Bold
}

.cp-table.donate-history>.tr>.td:nth-child(6) {
    width: 110px;
    text-align: center
}

.cp-table.donate-history>.tr:not(:first-child)>.td:nth-child(6) {
    color: #48aa00;
    font-family: Roboto Bold
}

.cp-table.donate-history>.tr:nth-child(1) {}

.cp-table.donate-history>.tr {}

.cp-table.donate-history>.tr>.td {}

.cp-table.donate-history>.tr>.td:before {}

.cp-table.transfer-history {
    width: 100%;
    flex-wrap: nowrap !important
}

.cp-table.transfer-history>.tr>.td:nth-child(1) {
    width: 30px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.transfer-history>.tr>.td:nth-child(2) {
    width: 130px;
    text-align: center
}

.cp-table.transfer-history>.tr>.td:nth-child(3) {
    width: 90px;
    text-align: center
}

.cp-table.transfer-history>.tr:not(:first-child)>.td:nth-child(3) {
    color: #ff5f00;
    font-family: Roboto Bold
}

.cp-table.transfer-history>.tr>.td:nth-child(4) {
    width: 100px;
    text-align: center
}

.cp-table.transfer-history>.tr:not(:first-child)>.td:nth-child(4) {
    color: #285f00;
    font-family: Roboto Bold
}

.cp-table.transfer-history>.tr>.td:nth-child(5) {
    width: 140px;
    text-align: center
}

.cp-table.transfer-history>.tr:not(:first-child)>.td:nth-child(5) {
    font-family: Roboto Bold
}

.cp-table.transfer-history>.tr:nth-child(1) {}

.cp-table.transfer-history>.tr {}

.cp-table.transfer-history>.tr>.td {}

.cp-table.transfer-history>.tr>.td:before {}

.cp-banace-info {
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 50px
}

.cp-banace-info>.balance {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #533724;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px
}

.cp-banace-info>.balance>span {
    font-size: unset;
    font-family: unset;
    color: #ff7800
}

.cp-banace-info>a {
    color: #796963;
    text-decoration: underline;
    transition: all .2s ease-in-out;
    font-size: #959595
}

.cp-banace-info>a:hover {
    color: #ff7f00
}

.cp-banace-info:after {
    content: '';
    position: absolute;
    width: calc(100% + 60px);
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: -30px;
    bottom: -16px;
    pointer-events: none
}

.cp-add-balance {
    width: 100%;
    margin-top: 50px
}

.cp-add-balance>.cp-balance-progress {
    width: 100%;
    height: 6px;
    background: #e3e3e3;
    border-radius: 20px;
    position: relative;
    margin-bottom: 38px;
    z-index: 2
}

.cp-add-balance>.cp-balance-progress>.bonus {
    width: 36px;
    height: 36px;
    border-radius: 50px;
    background: #e3e3e3;
    position: relative;
    margin-top: -15px;
    z-index: 2;
    cursor: pointer
}

.cp-add-balance>.cp-balance-progress>.bonus:hover {
    z-index: 2
}

.cp-add-balance>.cp-balance-progress>.bonus.active {
    z-index: 2
}

.cp-add-balance>.cp-balance-progress>.bonus:hover .item-desc {
    opacity: 1
}

.cp-add-balance>.cp-balance-progress>.bonus>img {
    position: absolute;
    top: 8px;
    opacity: .4;
    transition: all .2s ease-in-out
}

.cp-add-balance>.cp-balance-progress>.bonus>.count {
    position: absolute;
    top: calc(100% + 10px);
    font-family: Roboto Bold;
    font-size: 12px;
    color: #868686
}

.cp-add-balance>.cp-balance-progress>.active>.count {
    color: #ff7200
}

.cp-add-balance>.cp-balance-progress>.active>img {
    opacity: 1
}

.cp-add-balance>.cp-balance-progress>.active.bonus>.item-desc {
    opacity: 1
}

.cp-add-balance>.cp-balance-progress>.bonus>.item-desc {
    width: 160px;
    height: auto;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    font-size: 12px;
    top: calc(100% + 10px);
    border-top: 2px solid #feb700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease-in-out
}

.cp-add-balance>.cp-balance-progress>.bonus>.item-desc:before {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    top: -9px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png) center center;
    transform: scale(1, -1)
}

.cp-add-balance>.cp-balance-progress>.bar {
    width: 0%;
    height: 6px;
    background: linear-gradient(to top, #ea3f00, #ffbc00);
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all .2s ease-in-out
}

.cp-donate-form {
    display: block;
    width: 700px;
    margin: 0 auto;
    padding-top: 40px;
    position: relative;
    z-index: 1
}

.cp-donate-form>.items>.input {
    height: 44px;
    margin-top: 0;
    margin-bottom: 5px;
    overflow: visible
}

.cp-donate-form>.items>.input>input {}

.cp-donate-form>.items>.input>.icon {
    width: 43px;
    height: 42px;
    pointer-events: auto
}

.cp-donate-form>.items>.line {
    width: 100%;
    text-align: center;
    font-family: Beaufort;
    color: #533724;
    font-size: 16px;
    margin-top: 15px
}

.cp-donate-form>.form-button {
    width: 240px;
    height: 45px;
    font-size: 18px;
    margin: 0 auto;
    margin-top: 20px
}

.balance-drop-box {
    margin-top: 40px !important
}

.cp-drop-box {
    width: 100%;
    margin-top: 8px
}

.cp-drop-box>.title {
    width: 100%;
    height: 50px;
    border-radius: 70px;
    background: #e8e8e8;
    cursor: pointer;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 0 transparent;
    padding-left: 10px;
    position: relative
}

.cp-drop-box>.title:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.cp-drop-box>.title>.text {
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #58524f;
    text-transform: uppercase;
    margin-left: 10px
}

.cp-drop-box>.title>.arrow {
    margin-left: auto;
    margin-right: 15px
}

.cp-drop-box>.title>.arrow>span {
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #afadac;
    text-transform: uppercase;
    margin-right: 8px
}

.cp-drop-box>.title>.arrow>i {
    font-size: 18px;
    color: #8e8785
}

.cp-drop-box>.box {
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    margin-top: 3px;
    display: none;
    font-size: 14px;
    line-height: 22px;
    color: #58524f
}

.cp-alteans-to-eira {
    width: 100%;
    margin-top: 40px
}

.cp-alteans-to-eira>.cp-donate-form {
    padding-top: 0
}

.cp-insert-code {
    width: 100%;
    margin-top: 0
}

.cp-insert-code>.cp-donate-form {
    padding-top: 0
}

.cp-ref-info {
    width: 100%;
    position: relative;
    padding-bottom: 40px
}

.cp-ref-info:after {
    content: '';
    position: absolute;
    width: calc(100% + 60px);
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: -30px;
    bottom: -16px;
    pointer-events: none
}

.cp-ref-info>.count {
    width: 97px;
    height: 97px;
    background: url(../../img/main/bg/ref_circle_bg.png) center center;
    font-family: Beaufort Bold;
    font-size: 37px;
    color: #562200;
    text-transform: uppercase;
    text-align: center;
    padding-top: 13px
}

.cp-ref-info>.count>span {
    width: 100%;
    font-size: 12px;
    text-align: center;
    font-family: unset;
    color: unset;
    display: block;
    margin-top: -5px
}

.cp-ref-info>.info {
    width: calc(100% - 20px - 97px)
}

.cp-ref-info>.info>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #562200;
    text-align: left
}

.cp-ref-info>.info>.form {
    width: 100%;
    margin-top: 10px
}

.cp-ref-info>.info>.form>.desc {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #817269;
    text-align: left;
    margin-bottom: 5px
}

.cp-ref-info>.info>.form>input {
    width: 310px;
    height: 36px;
    border: 1px solid #e5e5e5;
    background: #f4f4f4;
    border-radius: 50px;
    color: #76675d;
    font-size: 14px;
    padding: 0 10px
}

.cp-ref-info>.info>.form>.copy-button {
    width: 140px;
    height: 36px;
    font-size: 14px;
    margin-left: 10px
}

.cp-referals {
    width: 100%;
    margin-top: 40px;
    position: relative;
    padding-bottom: 40px
}

.cp-referals:after {
    content: '';
    position: absolute;
    width: calc(100% + 60px);
    height: 23px;
    background: url(../../img/main/bg/border-bottom.png) top center;
    left: -30px;
    bottom: -16px;
    pointer-events: none
}

.cp-table.cp-ref-table {
    width: 100%
}

.cp-table.cp-ref-table>.tr>.td {
    width: 25%;
    text-align: center
}

.cp-table.cp-ref-table>.tr>.td:nth-child(1) {
    width: 70px;
    text-align: center
}

.cp-table.cp-ref-table>.tr>.td:nth-child(2) {
    width: 150px;
    text-align: center
}

.cp-table.cp-ref-table>.tr:not(:first-child)>.td:nth-child(2) {
    font-family: Roboto Bold
}

.cp-table.cp-ref-table>.tr>.td:nth-child(3) {
    width: 150px;
    text-align: center
}

.cp-table.cp-ref-table>.tr>.td:nth-child(4) {
    width: 100px;
    text-align: center
}

.cp-table.cp-ref-table>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold
}

.cp-table.cp-ref-table>.tr:nth-child(1) {}

.cp-table.cp-ref-table>.tr {}

.cp-table.cp-ref-table>.tr>.td {}

.cp-table.cp-ref-table>.tr>.td:before {}

.ref-description {
    width: 100%;
    font-family: Roboto;
    font-size: 14px;
    color: #5f554c;
    text-align: center;
    margin-top: 40px;
    line-height: 24px;
    margin-bottom: 30px
}

.ref-bonus-block {
    width: 100%;
    margin-bottom: 30px
}

.cp-table.cp-ref-bonus-table {
    width: 100%
}

.cp-table.cp-ref-bonus-table>.tr>.td {
    width: 25%;
    text-align: center
}

.cp-table.cp-ref-bonus-table>.tr>.td:nth-child(1) {
    width: 50px;
    text-align: center
}

.cp-table.cp-ref-bonus-table>.tr>.td:nth-child(2) {
    width: calc(100% - 120px);
    text-align: center;
    cursor: pointer
}

.cp-table.cp-ref-bonus-table>.tr:not(:first-child)>.td:nth-child(2) {
    font-family: Roboto Bold
}

.cp-table.cp-ref-bonus-table>.tr>.td:nth-child(3) {
    width: 70px;
    text-align: center
}

.cp-table.cp-ref-bonus-table>.tr:nth-child(1) {}

.cp-table.cp-ref-bonus-table>.tr {}

.cp-table.cp-ref-bonus-table>.tr>.td {}

.cp-table.cp-ref-bonus-table>.tr>.td:before {}

.cp-table.cp-ref-bonus-table>.tr>.td:nth-child(2):hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.cp-table.cp-ref-bonus-table>.tr>.td>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: 0;
    bottom: calc(100% + 15px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg)
}

.cp-table.cp-ref-bonus-table>.tr>.td>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.cp-table.cp-auth-history-table>.tr>.td:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.cp-table.cp-auth-history-table>.tr>.td>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: -50px;
    bottom: calc(100% + 15px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg);
    text-align: center
}

.cp-table.cp-auth-history-table>.tr>.td>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.cp-table.cp-ref-table>.tr>.td:hover .item-desc {
    opacity: 1;
    transform: translateY(0px) scale(1, 1) rotate(0deg)
}

.cp-table.cp-ref-table>.tr>.td>.item-desc {
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    border-bottom: 2px solid #eca500;
    left: -50px;
    bottom: calc(100% + 15px);
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transform: translateY(-50px) scale(.6, .6) rotate(20deg);
    text-align: center
}

.cp-table.cp-ref-table>.tr>.td>.item-desc:after {
    content: '';
    width: 26px;
    height: 9px;
    position: absolute;
    bottom: -11px;
    left: calc(50% - 13px);
    background: url(../images/icon/arrow_bottom_yellow.png)
}

.cp-inv-bonus {
    width: 100%;
    border-radius: 5px;
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 20px 25px;
    position: relative;
    margin-bottom: 30px
}

.cp-inv-bonus:before {
    content: '';
    width: 66px;
    height: 66px;
    background: url(../images/bonus_flag.png);
    position: absolute;
    top: -1px;
    right: -1px
}

.cp-bonus-items>.title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    text-transform: uppercase
}

.cp-bonus-items>.item-list {
    width: 100%;
    margin-top: 20px
}

.cp-bonus-items>.item-list>.item {
    width: 100%;
    padding: 3px 9px;
    background: #ececec;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.cp-bonus-items>.item-list>.item:hover {
    border: 1px solid #b5adad
}

.cp-bonus-items>.item-list>.item>.check {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #c8c8c8;
    top: 10px;
    right: 10px;
    position: absolute
}

.cp-bonus-items>.item-list>.item>.check>.marker {
    width: 6px;
    height: 6px;
    background: #f5870a;
    margin: 0 auto;
    margin-top: 3px;
    border-radius: 6px;
    opacity: 0
}

.cp-bonus-items>.item-list>.item>.icon {
    width: 18px;
    height: 18px;
    border-radius: 3px
}

.cp-bonus-items>.item-list>.item>.name {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #51423d;
    margin-left: 6px;
    margin-top: 5px;
    margin-bottom: 5px
}

.cp-bonus-items>.item-list>.item>.count {
    font-family: Roboto Bold;
    font-size: 12px;
    color: #f5870a;
    margin-left: 24px;
    margin-top: 5px;
    margin-bottom: 5px
}

.cp-bonus-items>.item-list>.item>.select-date,
.cp-bonus-items>.item-list>.item>.live-date {
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-left: 24px;
    margin-top: 5px;
    margin-bottom: 5px
}

.cp-bonus-items>.item-list>.item>.desc {
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-left: 24px;
    margin-top: 5px;
    margin-bottom: 5px
}

.cp-bonus-items>.item-list>.selected {
    background: #f2e8da;
    border: 1px solid #ead2ad
}

.cp-bonus-items>.item-list>.selected:hover {
    border: 1px solid #f7bf68
}

.cp-bonus-items>.item-list>.selected>.check>.marker {
    opacity: 1
}

.cp-bonus-items>.item-list>.button {
    width: 220px;
    height: 34px;
    font-size: 16px;
    margin-top: 20px
}

.cp-bonus-title>.title {
    width: 100%
}

.cp-bonus-title>.title>.text {
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #562200;
    text-transform: uppercase;
    margin-right: 24px
}

.cp-bonus-title>.title>.select-date,
.cp-bonus-title>.title>.live-date {
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-right: 24px;
    margin-top: 5px;
    margin-bottom: 5px
}

.cp-bonus-title>.title-settings {
    width: 100%
}

.cp-bonus-title>.title-settings>.input-title {
    width: auto;
    margin-right: 30px;
    margin-top: 20px
}

.cp-bonus-title>.title-settings>.input-title>input {
    width: 520px;
    height: 36px;
    border: 1px solid #cfcfcf;
    background: #e7e7e7;
    border-radius: 50px;
    color: #76675d;
    font-size: 14px;
    padding: 0 10px;
    text-align: center
}

.cp-bonus-title>.title-settings>.input-title>.confirm-button {
    width: 175px;
    height: 36px;
    margin-left: 5px
}

.cp-bonus-title>.title-settings>.title-colors {
    width: 100%;
    margin-right: 30px;
    margin-top: 20px
}

.cp-bonus-title>.title-settings>.title-colors>.letter-block {
    width: auto;
    height: 36px;
    padding: 4px;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
    transition: all .2s ease-in-out
}

.cp-bonus-title>.title-settings>.title-colors>.letter-block:hover {
    background: #e7e7e7
}

.cp-bonus-title>.title-settings>.title-colors>.letter-block>.letter {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 16px;
    margin-bottom: 2px;
    white-space: nowrap
}

.make-top0 {
    padding-top: 0
}

.cp-bonus-title>.title-settings>.title-colors>.letter-block>.color {
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-radius: 20px
}

.cp-bonus-title>.title-settings>.button {
    width: 180px;
    height: 36px;
    font-size: 16px;
    margin-top: 20px
}

.select-character-block {
    z-index: 3
}

.select-character {
    width: 150px !important
}

.cp-item-list {
    width: 100%;
    margin-top: 15px
}

.cp-item-list>.item {
    width: 100%;
    padding: 15px 18px;
    width: 100%;
    border-radius: 5px;
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.cp-item-list>.item:hover {
    border: 1px solid #e8e8e8;
    background: #fff
}

.cp-item-list>.item>.icon {
    width: 38px;
    height: 38px;
    border-radius: 5px
}

.cp-item-list>.item>.info {
    width: calc(100% - 50px);
    margin-top: -3px
}

.cp-item-list>.item>.info>.top {
    width: 100%
}

.cp-item-list>.item>.info>.top>.name {
    width: auto;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #51423d;
    margin-right: 20px
}

.cp-item-list>.item>.info>.top>.desc {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-top: 5px
}

.cp-item-list>.item>.info>.bottom {
    width: 100%;
    margin-top: 6px
}

.cp-item-list>.item>.info>.bottom>.count {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-right: 20px
}

.cp-item-list>.item>.info>.bottom>.count>span {
    font-family: Roboto Bold;
    font-size: 12px;
    color: #f5780a
}

.cp-item-list>.item>.info>.bottom>.select-date,
.cp-item-list>.item>.info>.bottom>.live-date {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-right: 20px
}

.cp-item-list>.item>.select-status {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: #eaeaea;
    position: absolute;
    top: 20px;
    right: 20px;
    overflow: hidden;
    border-radius: 30px
}

.cp-item-list>.item>.select-status>.check-icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #d7d6d6;
    color: #c6c4c4;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0
}

.cp-search-block>.select-all-status {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: #eaeaea;
    margin-left: 10px;
    top: 20px;
    right: 20px;
    overflow: hidden;
    border-radius: 30px
}

.cp-search-block>.select-all-status>.check-all-icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #d7d6d6;
    color: #c6c4c4;
    top: 0;
    right: 0
}

.cp-search-block.selected>.select-all-status>.check-all-icon {
    background: #0af516;
    color: #fff
}

.cp-item-list>.item>.select-status>input {
    width: 100%;
    height: 100%;
    padding-right: 25px;
    display: block;
    z-index: 1;
    border: 1px solid #c3c1c1;
    border-radius: 30px;
    background: 0 0;
    text-align: center
}

.cp-item-list>.selected {
    border: 1px solid #ffdeb9;
    background: #fff8ef;
    transition: 0s
}

.cp-item-list>.selected:hover {
    border: 1px solid #ffdeb9;
    background: #fff8ef
}

.cp-item-list>.selected>.select-status>.check-icon {
    background: #68f50a;
    color: #fff
}

.cp-item-list>.item>.desc-item {
    width: 200px;
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    z-index: 3
}

.cp-item-list>.item>.desc-item>.icon {
    width: 38px;
    height: 38px;
    border-radius: 5px
}

.cp-item-list>.item>.desc-item>.info {
    width: calc(100% - 45px)
}

.cp-item-list>.item>.desc-item>.info>*>font {
    font-family: Roboto Bold
}

.cp-item-list>.item>.desc-item>.info>.name {
    width: auto;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #51423d;
    margin-right: 20px;
    margin-top: 2px
}

.cp-item-list>.item>.desc-item>.info>.type {
    width: 100%;
    margin-top: 15px
}

.cp-item-list>.item>.desc-item>.info>.lvl {
    width: 100%;
    margin-top: 5px
}

.cp-item-list>.item>.desc-item>.info>.class {
    width: 100%;
    margin-top: 5px
}

.cp-item-list>.item>.desc-item>.info>.desc {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-top: 10px
}

.cp-inventory-bottom {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    position: relative
}

.cp-inventory-bottom>.cp-pagination {
    margin-top: 0;
    z-index: 1
}

.cp-inventory-bottom>.send-button {
    width: 115px;
    height: 30px;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    z-index: 2
}

.cp-shop-filters {
    width: 100%;
    margin-bottom: 18px
}

.cp-shop-filters>.line {
    width: 100%;
    position: relative
}

.cp-shop-filters>.line>.button {
    width: auto;
    height: 32px;
    text-transform: uppercase;
    padding: 0 10px;
    font-size: 14px;
    margin: 5px;
    position: relative;
    z-index: 1;
    background: linear-gradient(to top, #ecdcc5, #f0e3c3);
    color: #a25830;
    box-shadow: none
}

.cp-shop-filters>.line>.button:hover {
    filter: brightness(110%)
}

.cp-shop-filters>.line>.active {
    background: linear-gradient(to top, #ff9500, #feb900);
    color: #562200;
    text-shadow: 0 -1px 0 #ffcc75
}

.cp-search-shop {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 2
}

.cp-search-shop>.open-button {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: #dfdede;
    position: relative;
    font-size: 16px;
    color: #562200;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.cp-search-shop>.open-button:hover {
    filter: brightness(110%)
}

.cp-search-shop>.open-button>i {
    position: absolute;
    display: none
}

.cp-search-shop>.search-input {
    width: 120px;
    height: 100%;
    position: absolute;
    right: -125px;
    top: 0;
    display: none
}

.cp-search-shop>.search-input>input {
    width: 100%;
    height: 100%;
    border: 1px solid #cfcfcf;
    background: #e7e7e7;
    border-radius: 50px;
    color: #76675d;
    font-size: 14px;
    padding: 0 10px;
    text-align: center
}

.cp-search-shop>.open-button>.active {
    display: block
}

.cp-search-shop>.active {
    display: flex !important
}

.cp-shop-item-list {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    position: relative
}

#show_discount.item:before {
    content: '';
    width: 66px;
    height: 66px;
    background: url(../images/discount.svg);
    position: absolute;
    top: -1px;
    right: -1px
}

#show_discount.item:after {
    content: attr(data-after-content);
    color: #fff;
    width: 66px;
    height: 66px;
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 12px;
    padding-left: 9px;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.cp-shop-item-list>.item {
    width: calc((100% - 120px)/4);
    margin: 15px;
    padding: 15px;
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    align-self: stretch;
    position: relative;
    z-index: 1;
    cursor: default
}

.cp-shop-item-list>.item:hover {
    z-index: 2
}

.cp-shop-item-list>.item>.icon {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 10px;
    display: block
}

.cp-shop-item-list>.item>.name {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #51423d;
    text-align: center;
    line-height: 20px;
    margin-top: 15px;
    height: 60px
}

.cp-shop-item-list>.item>.price {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 14px;
    color: #5f554c;
    text-align: center;
    margin-top: 10px
}

.cp-shop-item-list>.item>.price>.button {
    height: 15px;
    width: 15px;
    display: inline-block;
    font-size: 12px
}

.cp-shop-item-list>.item>.button {
    width: 100%;
    height: 32px;
    text-transform: uppercase;
    padding: 0 10px;
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 5px
}

.cp-shop-item-list>.item>.desc-item {
    width: 200px;
    position: absolute;
    width: 250px;
    background: #fff;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    border-radius: 5px;
    padding: 10px;
    pointer-events: none;
    font-size: 12px;
    line-height: 16px;
    color: #8a807f;
    opacity: 0;
    z-index: 3
}

.cp-shop-item-list>.item>.desc-item>.icon {
    width: 38px;
    height: 38px;
    border-radius: 5px
}

.cp-shop-item-list>.item>.desc-item>.info {
    width: calc(100% - 45px)
}

.cp-shop-item-list>.item>.desc-item>.info>*>font {
    font-family: Roboto Bold
}

.cp-shop-item-list>.item>.desc-item>.info>.name {
    width: auto;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #51423d;
    margin-right: 20px;
    margin-top: 2px
}

.cp-shop-item-list>.item>.desc-item>.info>.type {
    width: 100%;
    margin-top: 15px
}

.cp-shop-item-list>.item>.desc-item>.info>.lvl {
    width: 100%;
    margin-top: 5px
}

.cp-shop-item-list>.item>.desc-item>.info>.class {
    width: 100%;
    margin-top: 5px
}

.cp-shop-item-list>.item>.desc-item>.info>.desc {
    width: auto;
    font-family: Roboto;
    font-size: 12px;
    color: #76706f;
    margin-top: 10px
}

.wnd-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .8);
    display: none
}

.wnd-buy-item {
    width: 470px;
    height: 200px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, .3);
    position: fixed;
    top: calc(50vh - 100px);
    left: calc(50% - 235px);
    z-index: 101;
    padding: 30px;
    display: none
}

.wnd-buy-item>.icon {
    width: 38px;
    height: 38px;
    display: block
}

.wnd-buy-item>.info {
    width: calc(100% - 50px)
}

.wnd-buy-item>.info>.name {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 18px;
    color: #51423d;
    margin-top: -3px
}

.wnd-buy-item>.info>.price {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 14px;
    color: #f5870a
}

.wnd-buy-item>.info>.setting {
    width: 100%;
    margin-top: 15px
}

.wnd-buy-item>.info>.setting>.block {
    width: 50%;
    padding-right: 20px;
    align-self: stretch;
    font-family: Roboto;
    font-size: 14px;
    color: #a19a98
}

.wnd-buy-item>.info>.setting>.block:nth-child(1) {}

.wnd-buy-item>.info>.setting>.block>input {
    width: 100%;
    height: 32px;
    border: 1px solid #cfcfcf;
    background: #e7e7e7;
    border-radius: 50px;
    color: #76675d;
    font-size: 14px;
    padding: 0 10px;
    text-align: center
}

.wnd-buy-item>.info>.setting>.block>.button {
    width: 120px;
    height: 36px;
    font-size: 16px
}

.wnd-buy-item>.info>.setting>.block>span {
    font-family: Roboto Bold;
    font-size: 14px;
    color: #f5870a;
    margin-left: 5px
}

.close-wnd {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #9e9e9e;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.close-wnd:hover {
    color: #d02c00
}

.cp-switch-stat {
    width: 100%;
    border-bottom: 1px solid #eceae3;
    padding-bottom: 25px;
    margin-bottom: 30px
}

.cp-switch-stat>.button {
    width: auto;
    height: 32px;
    text-transform: uppercase;
    padding: 0 20px;
    font-size: 14px;
    margin: 5px;
    position: relative;
    z-index: 1;
    background: linear-gradient(to top, #ecdcc5, #f0e3c3);
    color: #a25830;
    box-shadow: none
}

.cp-switch-stat>.button:hover {
    filter: brightness(110%)
}

.cp-switch-stat>.active {
    background: linear-gradient(to top, #ff9500, #feb900);
    color: #562200;
    text-shadow: 0 -1px 0 #ffcc75
}

.cp-stat-tables {
    width: 100%;
    position: relative
}

.cp-stat-tables>.table {
    width: 100%;
    transition: all .3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.cp-stat-tables>.active {
    opacity: 1;
    position: relative;
    pointer-events: auto
}

.cp-stat-tables>.table>.action-cp-top>.cp-stat-pages-info {
    text-align: center;
    font-size: 14px
}

.cp-table.cp-top-lvl {
    width: 100%
}

.cp-table.cp-top-lvl>.tr>.td {
    text-align: center
}

.cp-table.cp-top-lvl>.tr>.td:nth-child(1) {
    width: 40px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.cp-top-lvl>.tr>.td:nth-child(2) {
    width: 25%;
    text-align: left
}

.cp-table.cp-top-lvl>.tr>.td:nth-child(3) {
    width: 50%;
    text-align: center
}

.cp-table.cp-top-lvl>.tr>.td:nth-child(4) {
    width: 70px;
    text-align: center
}

.cp-table.cp-top-lvl>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold;
    color: #547300
}

.cp-table.cp-top-lvl>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold
}

.cp-table.cp-top-lvl>.tr:nth-child(1) {}

.cp-table.cp-top-lvl>.tr {}

.cp-table.cp-top-lvl>.tr>.td {}

.cp-table.cp-top-lvl>.tr>.td:before {}

.cp-table.cp-top-online {
    width: 100%
}

.cp-table.cp-top-online>.tr>.td {
    text-align: center
}

.cp-table.cp-top-online>.tr>.td:nth-child(1) {
    width: 40px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.cp-top-online>.tr>.td:nth-child(2) {
    width: 25%;
    text-align: left
}

.cp-table.cp-top-online>.tr>.td:nth-child(3) {
    width: 25%;
    text-align: center
}

.cp-table.cp-top-online>.tr>.td:nth-child(4) {
    width: 25%;
    text-align: center
}

.cp-table.cp-top-online>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold;
    color: #547300
}

.cp-table.cp-top-online>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold
}

.cp-table.cp-top-online>.tr:nth-child(1) {}

.cp-table.cp-top-online>.tr {}

.cp-table.cp-top-online>.tr>.td {}

.cp-table.cp-top-online>.tr>.td:before {}

.cp-table.cp-top-pk {
    width: 100%
}

.cp-table.cp-top-pk>.tr>.td {
    text-align: center
}

.cp-table.cp-top-pk>.tr>.td:nth-child(1) {
    width: 40px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.cp-top-pk>.tr>.td:nth-child(2) {
    width: 25%;
    text-align: left
}

.cp-table.cp-top-pk>.tr>.td:nth-child(3) {
    width: 25%;
    text-align: center
}

.cp-table.cp-top-pk>.tr>.td:nth-child(4) {
    width: 25%;
    text-align: center
}

.cp-table.cp-top-pk>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold;
    color: #ff3636
}

.cp-table.cp-top-pk>.tr:not(:first-child)>.td:nth-child(4) {
    font-family: Roboto Bold
}

.cp-table.cp-top-pk>.tr:nth-child(1) {}

.cp-table.cp-top-pk>.tr {}

.cp-table.cp-top-pk>.tr>.td {}

.cp-table.cp-top-pk>.tr>.td:before {}

.cp-table.cp-top-guilds {
    width: 100%
}

.cp-table.cp-top-guilds>.tr>.td {
    text-align: center
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(1) {
    width: 40px;
    text-align: center;
    font-family: Roboto Bold
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(2) {
    width: 16%;
    text-align: left
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(3) {
    width: 20%;
    text-align: center
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(4) {
    width: 80px;
    text-align: center
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(5) {
    width: 80px;
    text-align: center
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(6) {
    width: 80px;
    text-align: center
}

.cp-table.cp-top-guilds>.tr>.td:nth-child(7) {
    width: 80px;
    text-align: center
}

.cp-table.cp-top-guilds>.tr:nth-child(1) {}

.cp-table.cp-top-guilds>.tr {}

.cp-table.cp-top-guilds>.tr>.td {}

.cp-table.cp-top-guilds>.tr>.td:before {}

.silver-text {
    width: 100%;
    text-align: left;
    margin-top: 40px
}

footer {
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    margin-top: 60px;
    /*background:url(../../img/main/bg/footer_bg.webp) top center no-repeat #dcd8d9*/
}

footer>.footer-content {
    width: 1240px;
    position: relative;
    z-index: 1;
    margin: 0 auto
}

footer>.footer-content>.top {
    width: 100%;
    padding-bottom: 40px;
    padding-top: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .08)
}

footer>.footer-content>.top>.cpr {
    width: 500px
}

footer>.footer-content>.top>.cpr>.logo {
    opacity: .7
}

footer>.footer-content>.top>.cpr>.title {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 12px;
    color: #897f7c;
    margin-top: 0px
}

footer>.footer-content>.top>.cpr>.text {
    width: 100%;
    font-family: Roboto;
    font-size: 12px;
    color: #897f7c;
    margin-top: 12px
}

footer>.footer-content>.top>.cpr>.text>a {
    color: #bbb3b0
}

footer>.footer-content>.top>.cpr>.text>a:hover {
    color: #d34e1f
}

footer>.footer-content>.top>.cpr>.unsimple {
    width: 152px;
    opacity: .4;
    display: block;
    margin-top: 20px;
    transition: all .2s ease-in-out
}

footer>.footer-content>.top>.nav-block {
    width: auto
}

footer>.footer-content>.top>.nav-block:not(:last-child) {}

footer>.footer-content>.top>.nav-block:nth-child(3) {}

footer>.footer-content>.top>.nav-block:nth-child(2) {}

footer>.footer-content>.top>.nav-block:nth-child(2),
footer>.footer-content>.top>.nav-block:nth-child(3) {}

footer>.footer-content>.top>.nav-block:nth-child(4),
footer>.footer-content>.top>.nav-block:nth-child(5) {}

footer>.footer-content>.top>.nav-block>.title {
    width: 100%;
    font-family: Roboto Bold;
    font-size: 18px;
    color: #996b4d
}

footer>.footer-content>.top>.nav-block>.items {
    width: auto;
    line-height: 28px;
    padding-top: 8px
}

footer>.footer-content>.top>.nav-block>.items>a {
    width: auto;
    font-family: Roboto;
    font-size: 13px;
    color: #7e6a64;
    text-transform: uppercase;
    transition: all .2s ease-in-out
}

footer>.footer-content>.top>.nav-block>.items>a:hover {
    color: #d34e1f
}

footer>.footer-content>.top>.cpr>.unsimple:hover {
    opacity: 1
}

footer>.footer-content>.payments {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: 20px;
    padding-bottom: 30px
}

footer>.footer-content>.payments>img {
    margin: 20px;
    transition: all .2s ease-in-out
}

footer>.footer-content>.payments>img:hover {
    filter: brightness(80%)
}

#promo_code {
    text-transform: uppercase
}

.silver {
    background-image: url(../img/slivercoin.svg);
    background-position: center left;
    background-repeat: no-repeat;
    height: 14px;
    padding-left: 17px
}

.gold {
    height: 14px;
    font-size: 15px;
    padding-left: 15px;
    color: #f3ac4d
}

.vk-title {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #562200;
    text-transform: uppercase;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px
}

.pay-type-group {
    position: relative;
    width: 100%;
    text-align: center
}

.pay-type-group>.pay-btn {
    display: inline-block;
    margin-left: 10px
}

.payment-text {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #533724;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px
}

.select-pay-type {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 20px;
    color: #533724;
    text-transform: uppercase;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px
}

.cp-banace-info-result {
    width: 100%;
    text-align: center;
    position: relative
}

.balance-success {
    color: #6db123;
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px
}

.balance-fail {
    color: #ec2720;
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px
}

.balance-presents {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #533724;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px
}

.balance-presents>a {
    font-size: 22px;
    font-family: Beaufort Bold;
    text-decoration: underline;
    color: #f37e00
}

.pay-type-group>.pay-btn>.check {
    width: 18px;
    height: 18px;
    border-radius: 12px;
    background: #c8c8c8;
    top: 10px;
    right: 10px;
    display: inline-block;
    vertical-align: middle
}

.pay-type-group>.pay-btn>.check>.marker {
    width: 12px;
    height: 12px;
    background: #f5870a;
    margin: 0 auto;
    margin-top: 3px;
    border-radius: 6px;
    opacity: 0
}

.pay-type-group>.selected>.check>.marker {
    opacity: 1
}

.pay-type-group>.pay-btn>.text {
    display: inline-block;
    text-align: center;
    font-family: Beaufort;
    color: #533724;
    font-size: 16px
}

.gradient {
    background: linear-gradient(to right, #562200, #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.roulette-text {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 22px;
    color: #533724;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px
}

.roulette-bottom-border {
    border-top: 1px solid #ededed;
    padding-top: 15px
}

.cp-roulette-item-list {
    width: calc(100% + 30px);
    margin-left: 15px;
    margin-right: 15px;
    position: relative
}

.cp-roulette-item-list>.item {
    width: calc((100% - 120px)/6);
    margin: 5px;
    padding: 5px;
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    align-self: stretch;
    position: relative;
    z-index: 1;
    cursor: default
}

.cp-roulette-item-list>.item>.icon {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 10px;
    display: block
}

.cp-roulette-item-list>.item>.name {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #51423d;
    text-align: center;
    line-height: 18px;
    margin-top: 10px;
    margin-bottom: 10px
}

.roulette-box {
    overflow: hidden;
    height: 140px;
    width: 100%;
    border: 1px solid #ededed;
    position: relative
}

.roulette-box>.boxes {
    width: 1000%;
    height: 100px;
    margin: 20px 0;
    list-style: none;
    display: inline-block;
    content: ""
}

.roulette-box>.boxes>.tape {
    position: relative;
    right: 75px;
    height: 100px;
    width: 100px;
    border: 1px solid #ededed;
    margin-right: 5px;
    list-style: none;
    display: inline-block;
    content: ""
}

.roulette-box>.win {
    position: absolute;
    top: 10px;
    left: 49.5%;
    border-left: 3px solid #ff8f00;
    height: 120px;
    box-shadow: 0 0 1px 1px rgba(255, 143, 0, .3)
}

.roulette-box>.boxes>.tape>.tape-img {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    position: relative;
    outline: none
}

.roulette-button {
    width: 260px;
    margin: 20px
}

.text-content-404 {
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
    text-align: center
}

.text-content-404>.text-404 {
    font-family: Beaufort Bold;
    color: #562200;
    margin-top: -45px;
    font-size: 200px
}

.buttons-404 {
    margin-top: 20px
}

.buttons-404>a {
    padding: 0 35px
}

.action-description {
    text-align: center;
    margin-bottom: 55px;
    font-family: Beaufort Bold;
    color: #4a4646;
    font-size: 20px
}

.action-description>span {
    font-family: Beaufort Bold;
    color: #2fbc23;
    font-size: 20px
}

.xmasbtn {
    background: url(../images/xmas/button.png) top center no-repeat;
    position: fixed;
    top: 105px;
    left: 0;
    height: 303px;
    width: 118px;
    display: block;
    text-decoration: none;
    background-size: contain;
    cursor: pointer;
    z-index: 3
}

.valentine_btn {
    background: url(../images/valentines_day/button.png) top center no-repeat;
    position: fixed;
    top: 105px;
    left: -4px;
    height: 303px;
    width: 118px;
    display: block;
    text-decoration: none;
    background-size: contain;
    cursor: pointer;
    z-index: 3
}

.donate-bonuse {
    width: 100%;
    margin-top: 40px
}

.donate-bonuse>.title {
    width: 100%;
    padding: 12px;
    padding-top: 14px;
    background: #f7f0e8;
    border-bottom: 2px solid #fea900;
    border-radius: 4px;
    font-family: Beaufort Bold;
    text-align: center;
    font-size: 18px;
    color: #ce2f00;
    line-height: 18px
}

.donate-bonuse>.title span {
    font-family: unset;
    font-size: unset;
    color: #3d5203
}

.donate-bonuse>.bonuses {
    width: 100%;
    margin-top: 10px;
    position: relative
}

.donate-bonuse>.bonuses>.items {
    width: 100%;
    position: relative;
    padding: 2px
}

.donate-bonuse>.bonuses>.items>.item {
    width: 66px;
    height: 280px;
    position: relative;
    z-index: 1;
    transition: all .5s ease-in-out
}

.donate-bonuse>.bonuses>.items>.item:nth-child(6),
.donate-bonuse>.bonuses>.items>.item:nth-child(7),
.donate-bonuse>.bonuses>.items>.item:nth-child(8),
.donate-bonuse>.bonuses>.items>.item:nth-child(9) {}

.donate-bonuse>.bonuses>.items>.item.disable {
    filter: grayscale(100%);
    opacity: .5
}

.donate-bonuse>.bonuses>.items>.item.disable>.status {
    opacity: 1
}

.donate-bonuse>.bonuses>.items>.item:hover {
    z-index: 2;
    opacity: 1
}

.donate-bonuse>.bonuses>.items>.item>.status {
    width: 100%;
    font-family: Roboto;
    font-size: 12px;
    color: silver;
    text-align: center;
    opacity: 0;
    pointer-events: none
}

.donate-bonuse>.bonuses>.items>.item>img {
    position: absolute;
    bottom: 0
}

.donate-bonuse>.bonuses>.items>.item>.i_block {
    width: 190px;
    width: 100%;
    min-height: 237px;
    position: absolute;
    background: #f4f4f4;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 0 #cf6101, 0 0 10px transparent;
    transform: translateY(-24px);
    bottom: 0;
    padding: 12px calc((100% - 40px)/2);
    overflow: hidden;
    transition: all .5s ease-in-out
}

.donate-bonuse>.bonuses>.items>.item.active .i_block {
    transform: translateY(-40px);
    background: #fff;
    box-shadow: 0 2px 0 #cf6101, 0 0 10px rgba(255, 82, 0, .29)
}

.donate-bonuse>.bonuses>.items>.item>.i_block:hover {
    width: 190px;
    padding: 12px
}

.donate-bonuse>.bonuses>.items>.item>.i_block:hover .i_items {
    max-height: 500px;
    height: auto
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.info {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #a32500;
    text-align: center;
    transition: all .3s ease-in-out
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.info>i {
    color: #cc695f;
    font-size: 15px
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.i_items {
    max-height: 159px;
    width: 100%;
    overflow: hidden;
    transition: all .5s ease-in-out
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.i_items>.i_item {
    width: 162px;
    margin-top: 13px;
    position: relative
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.i_items>.i_item>img {
    width: 40px;
    height: 40px
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.i_items>.i_item>.name {
    width: 115px;
    font-family: Roboto;
    font-size: 12px;
    color: #939393;
    padding-left: 13px
}

.donate-bonuse>.bonuses>.items>.item>.i_block>.price_count {
    width: calc(100% + 12px);
    padding: 3px 0;
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: -6px;
    background: linear-gradient(to top, #ff9800, #feb700);
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #562200;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    border-radius: 3px;
    text-align: center;
    margin-top: 13px
}

.bonus_progress {
    width: 100%;
    height: 24px;
    background: #f4f4f4;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 2px
}

.bonus_progress_bar {
    width: 0%;
    height: 100%;
    background: #f4f4f4;
    border-radius: 3px;
    background: linear-gradient(to top, #be2502, #feb700);
    transition: all .3s ease-in-out
}

.donate-bonuse-first {
    width: 100%;
    margin-top: 40px
}

.donate-bonuse-first>.title {
    width: 100%;
    padding: 12px;
    padding-top: 14px;
    background: #f7f0e8;
    border-bottom: 2px solid #fea900;
    border-radius: 4px;
    font-family: Beaufort Bold;
    text-align: center;
    font-size: 18px;
    color: #ce2f00;
    line-height: 18px
}

.donate-bonuse-first>.title span {
    font-family: unset;
    font-size: unset;
    color: #3d5203
}

.donate-bonuse-first>.bonuses {
    width: 100%;
    margin-top: 10px;
    position: relative
}

.donate-bonuse-first>.bonuses>.items {
    width: 100%;
    position: relative;
    padding: 2px
}

.donate-bonuse-first>.bonuses>.items>.item {
    width: calc((100% - 20px)/5);
    height: 130px;
    position: relative;
    z-index: 1;
    transition: all .5s ease-in-out
}

.donate-bonuse-first>.bonuses>.items>.item:nth-child(4),
.donate-bonuse-first>.bonuses>.items>.item:nth-child(5) {}

.donate-bonuse-first>.bonuses>.items>.item.disable {
    filter: grayscale(100%);
    opacity: .5
}

.donate-bonuse-first>.bonuses>.items>.item.disable>.status {
    opacity: 1
}

.donate-bonuse-first>.bonuses>.items>.item:hover {
    z-index: 2;
    opacity: 1
}

.donate-bonuse-first>.bonuses>.items>.item>.status {
    width: 100%;
    font-family: Roboto;
    font-size: 12px;
    color: silver;
    text-align: center;
    opacity: 0;
    pointer-events: none
}

.donate-bonuse-first>.bonuses>.items>.item>img {
    position: absolute;
    bottom: 0
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block {
    width: 190px;
    width: 100%;
    min-height: 87px;
    position: absolute;
    background: #f4f4f4;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 0 #cf6101, 0 0 10px transparent;
    transform: translateY(-24px);
    bottom: 0;
    padding: 0 12px;
    overflow: hidden;
    transition: all .5s ease-in-out
}

.donate-bonuse-first>.bonuses>.items>.item.active .i_block {
    transform: translateY(-40px);
    background: #fff;
    box-shadow: 0 2px 0 #cf6101, 0 0 10px rgba(255, 82, 0, .29)
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block:hover {}

.donate-bonuse-first>.bonuses>.items>.item>.i_block:hover .i_items {
    max-height: 500px;
    height: auto
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.info {
    width: 100%;
    font-family: Beaufort Bold;
    font-size: 16px;
    color: #a32500;
    text-align: center;
    transition: all .3s ease-in-out
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.info>i {
    color: #cc695f;
    font-size: 15px
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.i_items {
    max-height: 159px;
    width: 100%;
    overflow: hidden;
    transition: all .5s ease-in-out
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.i_items>.i_item {
    width: 100%;
    margin-top: 13px;
    position: relative
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.i_items>.i_item>img {
    width: 30px;
    height: 30px
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.i_items>.i_item>.name {
    width: calc(100% - 30px);
    font-family: Roboto;
    font-size: 12px;
    color: #939393;
    padding-left: 10px;
    height: calc(14px * 2);
    line-height: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.price_count {
    width: calc(100% + 12px);
    padding: 3px 0;
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: -6px;
    background: linear-gradient(to top, #ff9800, #feb700);
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #562200;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    border-radius: 3px;
    text-align: center;
    margin-top: 13px
}

.donate-bonuse-first>.bonuses>.items>.item>.i_block>.price_count>span {
    font-family: Beaufort Bold;
    font-size: 14px;
    color: #562200;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3)
}

.progress-first {}

.game-desc>article {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden
}

.game-desc>article>.img {
    width: 288px;
    height: 186px;
    z-index: 1;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    border-radius: 5px;
    align-items: flex-start
}

.game-desc>article>.img>img {
    position: absolute;
    z-index: 1;
    object-fit: fill
}

.game-desc>article>.block {
    width: calc(100% - 288px - 30px);
    position: relative;
    z-index: 2
}

.game-desc>article>.block>.title {
    font-family: Roboto Bold;
    font-size: 25px;
    color: #562200
}

.game-desc>article>.block>.text {
    font-family: Roboto;
    font-size: 16px;
    color: #796963;
    line-height: 26px;
    margin-top: 15px
}

.game-desc>article>.block>.text>a {
    font-family: Roboto Bold;
    font-size: unset;
    color: #f37e00;
    transition: all .2s ease-in-out;
    text-decoration: underline
}

.game-desc>article>.block>.start-button {
    width: 250px;
    height: 56px;
    margin-top: 20px;
    font-size: 24px
}

.start-game-guide-box.video {
    padding: 0;
    padding-bottom: 55px
}

.promo-video {
    width: 100%;
    height: 550px;
    margin: -25px 0 -50px;
    background: url(../../img/main/bg/promo_video_bg.png) center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center
}
.promo-video__video_bg {
    width: 522px;
    height: 299px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ff9800;
    margin-bottom: 30px;
    box-shadow: 0 0 20px #fff, 0 0 50px #fff
}

.promo-video__video {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: url(../images/video_bg.png) center center;
    background-size: cover
}

thead.cp-table>tr {
    background: #fae5cd !important;
}

table {
    border: 0 !important;
}

.td {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.thead.cp-table>tr:first-child {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.thead.cp-table>tr:last-child {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

.paginate_button {
    background: #e4deda !important;
    border-radius: 40px !important;
    font-size: 16px;
    color: #82330d !important;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle;
    line-height: 30px;
    border: 0 !important;
    font-family: Beaufort Bold;
}

.paginate_button.current {
    background: linear-gradient(to top, #ff9500, #feb900) !important;
    text-shadow: 0px -1px 0px #ffcc75 !important;
}

.paginate_button:hover {
    background: #f3dbcb !important;
    color: #333 !important
}

thead.cp-table>tr>th {
    text-align: center !important;
}

.blue-grad {
    background: linear-gradient(to top, #058b9f, #71c3b6);
}

.snow {
    position: fixed;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
}

.snow:nth-child(1) {
    opacity: 0.3232;
    transform: translate(49.0191vw, -10px) scale(0.8972);
    animation: fall-1 16s -11s linear infinite;
}

@keyframes fall-1 {
    35.557% {
        transform: translate(43.1126vw, 35.557vh) scale(0.8972);
    }

    to {
        transform: translate(46.06585vw, 100vh) scale(0.8972);
    }
}

.snow:nth-child(2) {
    opacity: 0.0094;
    transform: translate(52.2519vw, -10px) scale(0.1016);
    animation: fall-2 20s -3s linear infinite;
}

@keyframes fall-2 {
    30.094% {
        transform: translate(43.5572vw, 30.094vh) scale(0.1016);
    }

    to {
        transform: translate(47.90455vw, 100vh) scale(0.1016);
    }
}

.snow:nth-child(3) {
    opacity: 0.0975;
    transform: translate(59.7321vw, -10px) scale(0.8138);
    animation: fall-3 25s -12s linear infinite;
}

@keyframes fall-3 {
    41.844% {
        transform: translate(60.941vw, 41.844vh) scale(0.8138);
    }

    to {
        transform: translate(60.33655vw, 100vh) scale(0.8138);
    }
}

.snow:nth-child(4) {
    opacity: 0.8826;
    transform: translate(57.2298vw, -10px) scale(0.7634);
    animation: fall-4 26s -13s linear infinite;
}

@keyframes fall-4 {
    55.157% {
        transform: translate(61.2099vw, 55.157vh) scale(0.7634);
    }

    to {
        transform: translate(59.21985vw, 100vh) scale(0.7634);
    }
}

.snow:nth-child(5) {
    opacity: 0.7993;
    transform: translate(72.9855vw, -10px) scale(0.6955);
    animation: fall-5 22s -15s linear infinite;
}

@keyframes fall-5 {
    40.581% {
        transform: translate(65.4685vw, 40.581vh) scale(0.6955);
    }

    to {
        transform: translate(69.227vw, 100vh) scale(0.6955);
    }
}

.snow:nth-child(6) {
    opacity: 0.1198;
    transform: translate(61.605vw, -10px) scale(0.9256);
    animation: fall-6 25s -6s linear infinite;
}

@keyframes fall-6 {
    34.281% {
        transform: translate(55.3926vw, 34.281vh) scale(0.9256);
    }

    to {
        transform: translate(58.4988vw, 100vh) scale(0.9256);
    }
}

.snow:nth-child(7) {
    opacity: 0.192;
    transform: translate(22.5347vw, -10px) scale(0.0289);
    animation: fall-7 20s -13s linear infinite;
}

@keyframes fall-7 {
    52.897% {
        transform: translate(16.2724vw, 52.897vh) scale(0.0289);
    }

    to {
        transform: translate(19.40355vw, 100vh) scale(0.0289);
    }
}

.snow:nth-child(8) {
    opacity: 0.5706;
    transform: translate(30.2782vw, -10px) scale(0.2283);
    animation: fall-8 22s -16s linear infinite;
}

@keyframes fall-8 {
    61.089% {
        transform: translate(37.1998vw, 61.089vh) scale(0.2283);
    }

    to {
        transform: translate(33.739vw, 100vh) scale(0.2283);
    }
}

.snow:nth-child(9) {
    opacity: 0.0833;
    transform: translate(14.7322vw, -10px) scale(0.3617);
    animation: fall-9 25s -8s linear infinite;
}

@keyframes fall-9 {
    41.654% {
        transform: translate(23.8052vw, 41.654vh) scale(0.3617);
    }

    to {
        transform: translate(19.2687vw, 100vh) scale(0.3617);
    }
}

.snow:nth-child(10) {
    opacity: 0.0304;
    transform: translate(11.3823vw, -10px) scale(0.1274);
    animation: fall-10 22s -26s linear infinite;
}

@keyframes fall-10 {
    69.155% {
        transform: translate(4.4145vw, 69.155vh) scale(0.1274);
    }

    to {
        transform: translate(7.8984vw, 100vh) scale(0.1274);
    }
}

.snow:nth-child(11) {
    opacity: 0.9033;
    transform: translate(22.5168vw, -10px) scale(0.4071);
    animation: fall-11 21s -24s linear infinite;
}

@keyframes fall-11 {
    72.62% {
        transform: translate(24.2667vw, 72.62vh) scale(0.4071);
    }

    to {
        transform: translate(23.39175vw, 100vh) scale(0.4071);
    }
}

.snow:nth-child(12) {
    opacity: 0.6583;
    transform: translate(42.6208vw, -10px) scale(0.8641);
    animation: fall-12 26s -14s linear infinite;
}

@keyframes fall-12 {
    44.758% {
        transform: translate(43.0937vw, 44.758vh) scale(0.8641);
    }

    to {
        transform: translate(42.85725vw, 100vh) scale(0.8641);
    }
}

.snow:nth-child(13) {
    opacity: 0.8531;
    transform: translate(19.9316vw, -10px) scale(0.1494);
    animation: fall-13 28s -1s linear infinite;
}

@keyframes fall-13 {
    36.389% {
        transform: translate(25.2104vw, 36.389vh) scale(0.1494);
    }

    to {
        transform: translate(22.571vw, 100vh) scale(0.1494);
    }
}

.snow:nth-child(14) {
    opacity: 0.5102;
    transform: translate(92.3912vw, -10px) scale(0.573);
    animation: fall-14 15s -17s linear infinite;
}

@keyframes fall-14 {
    56.565% {
        transform: translate(96.7971vw, 56.565vh) scale(0.573);
    }

    to {
        transform: translate(94.59415vw, 100vh) scale(0.573);
    }
}

.snow:nth-child(15) {
    opacity: 0.8251;
    transform: translate(33.262vw, -10px) scale(0.2093);
    animation: fall-15 20s -28s linear infinite;
}

@keyframes fall-15 {
    70.83% {
        transform: translate(25.3614vw, 70.83vh) scale(0.2093);
    }

    to {
        transform: translate(29.3117vw, 100vh) scale(0.2093);
    }
}

.snow:nth-child(16) {
    opacity: 0.04;
    transform: translate(28.3251vw, -10px) scale(0.6553);
    animation: fall-16 21s -25s linear infinite;
}

@keyframes fall-16 {
    51.46% {
        transform: translate(26.2715vw, 51.46vh) scale(0.6553);
    }

    to {
        transform: translate(27.2983vw, 100vh) scale(0.6553);
    }
}

.snow:nth-child(17) {
    opacity: 0.2534;
    transform: translate(86.424vw, -10px) scale(0.9823);
    animation: fall-17 30s -20s linear infinite;
}

@keyframes fall-17 {
    74.198% {
        transform: translate(76.7893vw, 74.198vh) scale(0.9823);
    }

    to {
        transform: translate(81.60665vw, 100vh) scale(0.9823);
    }
}

.snow:nth-child(18) {
    opacity: 0.6844;
    transform: translate(81.8156vw, -10px) scale(0.0736);
    animation: fall-18 29s -7s linear infinite;
}

@keyframes fall-18 {
    74.887% {
        transform: translate(84.5753vw, 74.887vh) scale(0.0736);
    }

    to {
        transform: translate(83.19545vw, 100vh) scale(0.0736);
    }
}

.snow:nth-child(19) {
    opacity: 0.1935;
    transform: translate(13.8406vw, -10px) scale(0.3609);
    animation: fall-19 29s -14s linear infinite;
}

@keyframes fall-19 {
    66.135% {
        transform: translate(10.8487vw, 66.135vh) scale(0.3609);
    }

    to {
        transform: translate(12.34465vw, 100vh) scale(0.3609);
    }
}

.snow:nth-child(20) {
    opacity: 0.1699;
    transform: translate(40.2255vw, -10px) scale(0.6168);
    animation: fall-20 27s -17s linear infinite;
}

@keyframes fall-20 {
    48.455% {
        transform: translate(43.563vw, 48.455vh) scale(0.6168);
    }

    to {
        transform: translate(41.89425vw, 100vh) scale(0.6168);
    }
}

.snow:nth-child(21) {
    opacity: 0.4147;
    transform: translate(71.2015vw, -10px) scale(0.218);
    animation: fall-21 23s -15s linear infinite;
}

@keyframes fall-21 {
    58.114% {
        transform: translate(79.4842vw, 58.114vh) scale(0.218);
    }

    to {
        transform: translate(75.34285vw, 100vh) scale(0.218);
    }
}

.snow:nth-child(22) {
    opacity: 0.9595;
    transform: translate(2.0847vw, -10px) scale(0.4708);
    animation: fall-22 16s -24s linear infinite;
}

@keyframes fall-22 {
    77.798% {
        transform: translate(-5.9566vw, 77.798vh) scale(0.4708);
    }

    to {
        transform: translate(-1.93595vw, 100vh) scale(0.4708);
    }
}

.snow:nth-child(23) {
    opacity: 0.8023;
    transform: translate(16.0662vw, -10px) scale(0.6081);
    animation: fall-23 10s -13s linear infinite;
}

@keyframes fall-23 {
    58.661% {
        transform: translate(22.1478vw, 58.661vh) scale(0.6081);
    }

    to {
        transform: translate(19.107vw, 100vh) scale(0.6081);
    }
}

.snow:nth-child(24) {
    opacity: 0.3635;
    transform: translate(14.1302vw, -10px) scale(0.0208);
    animation: fall-24 24s -12s linear infinite;
}

@keyframes fall-24 {
    46.082% {
        transform: translate(7.8675vw, 46.082vh) scale(0.0208);
    }

    to {
        transform: translate(10.99885vw, 100vh) scale(0.0208);
    }
}

.snow:nth-child(25) {
    opacity: 0.4825;
    transform: translate(26.7173vw, -10px) scale(0.0486);
    animation: fall-25 24s -12s linear infinite;
}

@keyframes fall-25 {
    32.259% {
        transform: translate(21.8854vw, 32.259vh) scale(0.0486);
    }

    to {
        transform: translate(24.30135vw, 100vh) scale(0.0486);
    }
}

.snow:nth-child(26) {
    opacity: 0.8293;
    transform: translate(4.4005vw, -10px) scale(0.1273);
    animation: fall-26 14s -15s linear infinite;
}

@keyframes fall-26 {
    53.1% {
        transform: translate(0.2242vw, 53.1vh) scale(0.1273);
    }

    to {
        transform: translate(2.31235vw, 100vh) scale(0.1273);
    }
}

.snow:nth-child(27) {
    opacity: 0.3131;
    transform: translate(56.2816vw, -10px) scale(0.747);
    animation: fall-27 13s -3s linear infinite;
}

@keyframes fall-27 {
    35.6% {
        transform: translate(52.8376vw, 35.6vh) scale(0.747);
    }

    to {
        transform: translate(54.5596vw, 100vh) scale(0.747);
    }
}

.snow:nth-child(28) {
    opacity: 0.9735;
    transform: translate(73.6055vw, -10px) scale(0.976);
    animation: fall-28 23s -11s linear infinite;
}

@keyframes fall-28 {
    34.048% {
        transform: translate(82.1969vw, 34.048vh) scale(0.976);
    }

    to {
        transform: translate(77.9012vw, 100vh) scale(0.976);
    }
}

.snow:nth-child(29) {
    opacity: 0.8205;
    transform: translate(10.1537vw, -10px) scale(0.814);
    animation: fall-29 10s -26s linear infinite;
}

@keyframes fall-29 {
    54.085% {
        transform: translate(1.8945vw, 54.085vh) scale(0.814);
    }

    to {
        transform: translate(6.0241vw, 100vh) scale(0.814);
    }
}

.snow:nth-child(30) {
    opacity: 0.206;
    transform: translate(56.689vw, -10px) scale(0.2091);
    animation: fall-30 30s -1s linear infinite;
}

@keyframes fall-30 {
    78.164% {
        transform: translate(57.2302vw, 78.164vh) scale(0.2091);
    }

    to {
        transform: translate(56.9596vw, 100vh) scale(0.2091);
    }
}

.snow:nth-child(31) {
    opacity: 0.1073;
    transform: translate(27.7544vw, -10px) scale(0.0899);
    animation: fall-31 25s -29s linear infinite;
}

@keyframes fall-31 {
    42.22% {
        transform: translate(26.7431vw, 42.22vh) scale(0.0899);
    }

    to {
        transform: translate(27.24875vw, 100vh) scale(0.0899);
    }
}

.snow:nth-child(32) {
    opacity: 0.8463;
    transform: translate(44.2188vw, -10px) scale(0.7513);
    animation: fall-32 13s -16s linear infinite;
}

@keyframes fall-32 {
    57.196% {
        transform: translate(47.3436vw, 57.196vh) scale(0.7513);
    }

    to {
        transform: translate(45.7812vw, 100vh) scale(0.7513);
    }
}

.snow:nth-child(33) {
    opacity: 0.1343;
    transform: translate(51.2375vw, -10px) scale(0.1287);
    animation: fall-33 17s -18s linear infinite;
}

@keyframes fall-33 {
    45.147% {
        transform: translate(51.8885vw, 45.147vh) scale(0.1287);
    }

    to {
        transform: translate(51.563vw, 100vh) scale(0.1287);
    }
}

.snow:nth-child(34) {
    opacity: 0.7909;
    transform: translate(0.0152vw, -10px) scale(0.892);
    animation: fall-34 26s -16s linear infinite;
}

@keyframes fall-34 {
    37.786% {
        transform: translate(-7.7443vw, 37.786vh) scale(0.892);
    }

    to {
        transform: translate(-3.86455vw, 100vh) scale(0.892);
    }
}

.snow:nth-child(35) {
    opacity: 0.6531;
    transform: translate(32.2132vw, -10px) scale(0.302);
    animation: fall-35 18s -21s linear infinite;
}

@keyframes fall-35 {
    77.567% {
        transform: translate(36.0643vw, 77.567vh) scale(0.302);
    }

    to {
        transform: translate(34.13875vw, 100vh) scale(0.302);
    }
}

.snow:nth-child(36) {
    opacity: 0.3754;
    transform: translate(17.8869vw, -10px) scale(0.2949);
    animation: fall-36 27s -22s linear infinite;
}

@keyframes fall-36 {
    37.381% {
        transform: translate(27.261vw, 37.381vh) scale(0.2949);
    }

    to {
        transform: translate(22.57395vw, 100vh) scale(0.2949);
    }
}

.snow:nth-child(37) {
    opacity: 0.3629;
    transform: translate(4.8011vw, -10px) scale(0.9894);
    animation: fall-37 20s -5s linear infinite;
}

@keyframes fall-37 {
    52.176% {
        transform: translate(3.6931vw, 52.176vh) scale(0.9894);
    }

    to {
        transform: translate(4.2471vw, 100vh) scale(0.9894);
    }
}

.snow:nth-child(38) {
    opacity: 0.6266;
    transform: translate(93.1137vw, -10px) scale(0.8439);
    animation: fall-38 13s -21s linear infinite;
}

@keyframes fall-38 {
    53.644% {
        transform: translate(100.6414vw, 53.644vh) scale(0.8439);
    }

    to {
        transform: translate(96.87755vw, 100vh) scale(0.8439);
    }
}

.snow:nth-child(39) {
    opacity: 0.5708;
    transform: translate(44.744vw, -10px) scale(0.9244);
    animation: fall-39 26s -10s linear infinite;
}

@keyframes fall-39 {
    30.021% {
        transform: translate(39.7173vw, 30.021vh) scale(0.9244);
    }

    to {
        transform: translate(42.23065vw, 100vh) scale(0.9244);
    }
}

.snow:nth-child(40) {
    opacity: 0.4856;
    transform: translate(89.4127vw, -10px) scale(0.58);
    animation: fall-40 15s -28s linear infinite;
}

@keyframes fall-40 {
    38.182% {
        transform: translate(92.2106vw, 38.182vh) scale(0.58);
    }

    to {
        transform: translate(90.81165vw, 100vh) scale(0.58);
    }
}

.snow:nth-child(41) {
    opacity: 0.3188;
    transform: translate(14.5742vw, -10px) scale(0.3103);
    animation: fall-41 17s -1s linear infinite;
}

@keyframes fall-41 {
    37.837% {
        transform: translate(10.5373vw, 37.837vh) scale(0.3103);
    }

    to {
        transform: translate(12.55575vw, 100vh) scale(0.3103);
    }
}

.snow:nth-child(42) {
    opacity: 0.6922;
    transform: translate(40.6745vw, -10px) scale(0.149);
    animation: fall-42 20s -15s linear infinite;
}

@keyframes fall-42 {
    41.345% {
        transform: translate(48.3136vw, 41.345vh) scale(0.149);
    }

    to {
        transform: translate(44.49405vw, 100vh) scale(0.149);
    }
}

.snow:nth-child(43) {
    opacity: 0.7439;
    transform: translate(49.1798vw, -10px) scale(0.7352);
    animation: fall-43 30s -10s linear infinite;
}

@keyframes fall-43 {
    54.724% {
        transform: translate(48.6715vw, 54.724vh) scale(0.7352);
    }

    to {
        transform: translate(48.92565vw, 100vh) scale(0.7352);
    }
}

.snow:nth-child(44) {
    opacity: 0.7562;
    transform: translate(18.6613vw, -10px) scale(0.8833);
    animation: fall-44 22s -16s linear infinite;
}

@keyframes fall-44 {
    60.548% {
        transform: translate(18.2087vw, 60.548vh) scale(0.8833);
    }

    to {
        transform: translate(18.435vw, 100vh) scale(0.8833);
    }
}

.snow:nth-child(45) {
    opacity: 0.104;
    transform: translate(45.2671vw, -10px) scale(0.5751);
    animation: fall-45 30s -4s linear infinite;
}

@keyframes fall-45 {
    32.179% {
        transform: translate(36.4751vw, 32.179vh) scale(0.5751);
    }

    to {
        transform: translate(40.8711vw, 100vh) scale(0.5751);
    }
}

.snow:nth-child(46) {
    opacity: 0.2332;
    transform: translate(13.8476vw, -10px) scale(0.0061);
    animation: fall-46 20s -5s linear infinite;
}

@keyframes fall-46 {
    74.412% {
        transform: translate(10.9057vw, 74.412vh) scale(0.0061);
    }

    to {
        transform: translate(12.37665vw, 100vh) scale(0.0061);
    }
}

.snow:nth-child(47) {
    opacity: 0.0698;
    transform: translate(20.6686vw, -10px) scale(0.498);
    animation: fall-47 20s -19s linear infinite;
}

@keyframes fall-47 {
    57.032% {
        transform: translate(15.0288vw, 57.032vh) scale(0.498);
    }

    to {
        transform: translate(17.8487vw, 100vh) scale(0.498);
    }
}

.snow:nth-child(48) {
    opacity: 0.8115;
    transform: translate(42.5152vw, -10px) scale(0.6008);
    animation: fall-48 11s -25s linear infinite;
}

@keyframes fall-48 {
    52.7% {
        transform: translate(44.3936vw, 52.7vh) scale(0.6008);
    }

    to {
        transform: translate(43.4544vw, 100vh) scale(0.6008);
    }
}

.snow:nth-child(49) {
    opacity: 0.0126;
    transform: translate(0.6859vw, -10px) scale(0.3869);
    animation: fall-49 27s -15s linear infinite;
}

@keyframes fall-49 {
    57.296% {
        transform: translate(1.4119vw, 57.296vh) scale(0.3869);
    }

    to {
        transform: translate(1.0489vw, 100vh) scale(0.3869);
    }
}

.snow:nth-child(50) {
    opacity: 0.1148;
    transform: translate(97.6259vw, -10px) scale(0.6526);
    animation: fall-50 13s -16s linear infinite;
}

@keyframes fall-50 {
    79.535% {
        transform: translate(101.4684vw, 79.535vh) scale(0.6526);
    }

    to {
        transform: translate(99.54715vw, 100vh) scale(0.6526);
    }
}

.snow:nth-child(51) {
    opacity: 0.9915;
    transform: translate(54.8627vw, -10px) scale(0.7192);
    animation: fall-51 17s -9s linear infinite;
}

@keyframes fall-51 {
    77.839% {
        transform: translate(49.2175vw, 77.839vh) scale(0.7192);
    }

    to {
        transform: translate(52.0401vw, 100vh) scale(0.7192);
    }
}

.snow:nth-child(52) {
    opacity: 0.1643;
    transform: translate(7.9969vw, -10px) scale(0.2568);
    animation: fall-52 10s -8s linear infinite;
}

@keyframes fall-52 {
    49.739% {
        transform: translate(-0.7742vw, 49.739vh) scale(0.2568);
    }

    to {
        transform: translate(3.61135vw, 100vh) scale(0.2568);
    }
}

.snow:nth-child(53) {
    opacity: 0.6641;
    transform: translate(45.2983vw, -10px) scale(0.3343);
    animation: fall-53 25s -6s linear infinite;
}

@keyframes fall-53 {
    64.687% {
        transform: translate(54.9098vw, 64.687vh) scale(0.3343);
    }

    to {
        transform: translate(50.10405vw, 100vh) scale(0.3343);
    }
}

.snow:nth-child(54) {
    opacity: 0.467;
    transform: translate(34.1608vw, -10px) scale(0.5817);
    animation: fall-54 30s -1s linear infinite;
}

@keyframes fall-54 {
    37.106% {
        transform: translate(27.3172vw, 37.106vh) scale(0.5817);
    }

    to {
        transform: translate(30.739vw, 100vh) scale(0.5817);
    }
}

.snow:nth-child(55) {
    opacity: 0.5958;
    transform: translate(23.1623vw, -10px) scale(0.5911);
    animation: fall-55 25s -27s linear infinite;
}

@keyframes fall-55 {
    44.139% {
        transform: translate(14.2555vw, 44.139vh) scale(0.5911);
    }

    to {
        transform: translate(18.7089vw, 100vh) scale(0.5911);
    }
}

.snow:nth-child(56) {
    opacity: 0.1374;
    transform: translate(35.0722vw, -10px) scale(0.5257);
    animation: fall-56 25s -13s linear infinite;
}

@keyframes fall-56 {
    36.025% {
        transform: translate(32.7502vw, 36.025vh) scale(0.5257);
    }

    to {
        transform: translate(33.9112vw, 100vh) scale(0.5257);
    }
}

.snow:nth-child(57) {
    opacity: 0.3004;
    transform: translate(51.8959vw, -10px) scale(0.9763);
    animation: fall-57 30s -23s linear infinite;
}

@keyframes fall-57 {
    52.603% {
        transform: translate(46.1268vw, 52.603vh) scale(0.9763);
    }

    to {
        transform: translate(49.01135vw, 100vh) scale(0.9763);
    }
}

.snow:nth-child(58) {
    opacity: 0.138;
    transform: translate(83.5001vw, -10px) scale(0.9577);
    animation: fall-58 25s -6s linear infinite;
}

@keyframes fall-58 {
    57.985% {
        transform: translate(92.8144vw, 57.985vh) scale(0.9577);
    }

    to {
        transform: translate(88.15725vw, 100vh) scale(0.9577);
    }
}

.snow:nth-child(59) {
    opacity: 0.6843;
    transform: translate(8.0526vw, -10px) scale(0.071);
    animation: fall-59 25s -26s linear infinite;
}

@keyframes fall-59 {
    68.43% {
        transform: translate(13.5304vw, 68.43vh) scale(0.071);
    }

    to {
        transform: translate(10.7915vw, 100vh) scale(0.071);
    }
}

.snow:nth-child(60) {
    opacity: 0.8163;
    transform: translate(12.0186vw, -10px) scale(0.0708);
    animation: fall-60 27s -22s linear infinite;
}

@keyframes fall-60 {
    42.125% {
        transform: translate(16.9704vw, 42.125vh) scale(0.0708);
    }

    to {
        transform: translate(14.4945vw, 100vh) scale(0.0708);
    }
}

.snow:nth-child(61) {
    opacity: 0.8545;
    transform: translate(28.1203vw, -10px) scale(0.0167);
    animation: fall-61 29s -3s linear infinite;
}

@keyframes fall-61 {
    34.174% {
        transform: translate(29.1993vw, 34.174vh) scale(0.0167);
    }

    to {
        transform: translate(28.6598vw, 100vh) scale(0.0167);
    }
}

.snow:nth-child(62) {
    opacity: 0.8789;
    transform: translate(55.8721vw, -10px) scale(0.803);
    animation: fall-62 15s -8s linear infinite;
}

@keyframes fall-62 {
    54.268% {
        transform: translate(49.9492vw, 54.268vh) scale(0.803);
    }

    to {
        transform: translate(52.91065vw, 100vh) scale(0.803);
    }
}

.snow:nth-child(63) {
    opacity: 0.5892;
    transform: translate(22.8354vw, -10px) scale(0.5847);
    animation: fall-63 30s -8s linear infinite;
}

@keyframes fall-63 {
    43.191% {
        transform: translate(28.0901vw, 43.191vh) scale(0.5847);
    }

    to {
        transform: translate(25.46275vw, 100vh) scale(0.5847);
    }
}

.snow:nth-child(64) {
    opacity: 0.2084;
    transform: translate(72.8765vw, -10px) scale(0.3493);
    animation: fall-64 26s -1s linear infinite;
}

@keyframes fall-64 {
    72.869% {
        transform: translate(73.3642vw, 72.869vh) scale(0.3493);
    }

    to {
        transform: translate(73.12035vw, 100vh) scale(0.3493);
    }
}

.snow:nth-child(65) {
    opacity: 0.0765;
    transform: translate(69.0046vw, -10px) scale(0.2654);
    animation: fall-65 20s -15s linear infinite;
}

@keyframes fall-65 {
    71.513% {
        transform: translate(66.2964vw, 71.513vh) scale(0.2654);
    }

    to {
        transform: translate(67.6505vw, 100vh) scale(0.2654);
    }
}

.snow:nth-child(66) {
    opacity: 0.8024;
    transform: translate(35.8159vw, -10px) scale(0.3489);
    animation: fall-66 30s -25s linear infinite;
}

@keyframes fall-66 {
    36.049% {
        transform: translate(29.21vw, 36.049vh) scale(0.3489);
    }

    to {
        transform: translate(32.51295vw, 100vh) scale(0.3489);
    }
}

.snow:nth-child(67) {
    opacity: 0.2765;
    transform: translate(11.9224vw, -10px) scale(0.2186);
    animation: fall-67 14s -25s linear infinite;
}

@keyframes fall-67 {
    77.316% {
        transform: translate(20.1419vw, 77.316vh) scale(0.2186);
    }

    to {
        transform: translate(16.03215vw, 100vh) scale(0.2186);
    }
}

.snow:nth-child(68) {
    opacity: 0.0707;
    transform: translate(21.7251vw, -10px) scale(0.1429);
    animation: fall-68 15s -23s linear infinite;
}

@keyframes fall-68 {
    66.967% {
        transform: translate(14.3431vw, 66.967vh) scale(0.1429);
    }

    to {
        transform: translate(18.0341vw, 100vh) scale(0.1429);
    }
}

.snow:nth-child(69) {
    opacity: 0.3265;
    transform: translate(67.2669vw, -10px) scale(0.8051);
    animation: fall-69 13s -14s linear infinite;
}

@keyframes fall-69 {
    57.579% {
        transform: translate(68.2401vw, 57.579vh) scale(0.8051);
    }

    to {
        transform: translate(67.7535vw, 100vh) scale(0.8051);
    }
}

.snow:nth-child(70) {
    opacity: 0.1912;
    transform: translate(86.2267vw, -10px) scale(0.661);
    animation: fall-70 16s -5s linear infinite;
}

@keyframes fall-70 {
    71.099% {
        transform: translate(77.1915vw, 71.099vh) scale(0.661);
    }

    to {
        transform: translate(81.7091vw, 100vh) scale(0.661);
    }
}

.snow:nth-child(71) {
    opacity: 0.0666;
    transform: translate(48.2856vw, -10px) scale(0.4421);
    animation: fall-71 10s -12s linear infinite;
}

@keyframes fall-71 {
    49.741% {
        transform: translate(53.7665vw, 49.741vh) scale(0.4421);
    }

    to {
        transform: translate(51.02605vw, 100vh) scale(0.4421);
    }
}

.snow:nth-child(72) {
    opacity: 0.9121;
    transform: translate(58.0165vw, -10px) scale(0.2574);
    animation: fall-72 24s -17s linear infinite;
}

@keyframes fall-72 {
    64.389% {
        transform: translate(66.8057vw, 64.389vh) scale(0.2574);
    }

    to {
        transform: translate(62.4111vw, 100vh) scale(0.2574);
    }
}

.snow:nth-child(73) {
    opacity: 0.5094;
    transform: translate(25.8102vw, -10px) scale(0.7816);
    animation: fall-73 22s -9s linear infinite;
}

@keyframes fall-73 {
    43.952% {
        transform: translate(33.7143vw, 43.952vh) scale(0.7816);
    }

    to {
        transform: translate(29.76225vw, 100vh) scale(0.7816);
    }
}

.snow:nth-child(74) {
    opacity: 0.3708;
    transform: translate(47.4098vw, -10px) scale(0.434);
    animation: fall-74 24s -15s linear infinite;
}

@keyframes fall-74 {
    43.331% {
        transform: translate(39.833vw, 43.331vh) scale(0.434);
    }

    to {
        transform: translate(43.6214vw, 100vh) scale(0.434);
    }
}

.snow:nth-child(75) {
    opacity: 0.8616;
    transform: translate(90.2347vw, -10px) scale(0.8938);
    animation: fall-75 10s -17s linear infinite;
}

@keyframes fall-75 {
    42.492% {
        transform: translate(85.349vw, 42.492vh) scale(0.8938);
    }

    to {
        transform: translate(87.79185vw, 100vh) scale(0.8938);
    }
}

.snow:nth-child(76) {
    opacity: 0.3894;
    transform: translate(84.2103vw, -10px) scale(0.4087);
    animation: fall-76 23s -14s linear infinite;
}

@keyframes fall-76 {
    44.361% {
        transform: translate(76.5635vw, 44.361vh) scale(0.4087);
    }

    to {
        transform: translate(80.3869vw, 100vh) scale(0.4087);
    }
}

.snow:nth-child(77) {
    opacity: 0.5745;
    transform: translate(26.6932vw, -10px) scale(0.0533);
    animation: fall-77 25s -6s linear infinite;
}

@keyframes fall-77 {
    76.832% {
        transform: translate(23.7715vw, 76.832vh) scale(0.0533);
    }

    to {
        transform: translate(25.23235vw, 100vh) scale(0.0533);
    }
}

.snow:nth-child(78) {
    opacity: 0.836;
    transform: translate(13.9832vw, -10px) scale(0.5453);
    animation: fall-78 22s -30s linear infinite;
}

@keyframes fall-78 {
    35.837% {
        transform: translate(12.3156vw, 35.837vh) scale(0.5453);
    }

    to {
        transform: translate(13.1494vw, 100vh) scale(0.5453);
    }
}

.snow:nth-child(79) {
    opacity: 0.9969;
    transform: translate(91.7214vw, -10px) scale(0.3767);
    animation: fall-79 10s -15s linear infinite;
}

@keyframes fall-79 {
    64.197% {
        transform: translate(89.5779vw, 64.197vh) scale(0.3767);
    }

    to {
        transform: translate(90.64965vw, 100vh) scale(0.3767);
    }
}

.snow:nth-child(80) {
    opacity: 0.2145;
    transform: translate(7.9525vw, -10px) scale(0.9408);
    animation: fall-80 12s -20s linear infinite;
}

@keyframes fall-80 {
    79.708% {
        transform: translate(14.5487vw, 79.708vh) scale(0.9408);
    }

    to {
        transform: translate(11.2506vw, 100vh) scale(0.9408);
    }
}

.snow:nth-child(81) {
    opacity: 0.5972;
    transform: translate(41.6143vw, -10px) scale(0.8339);
    animation: fall-81 18s -24s linear infinite;
}

@keyframes fall-81 {
    73.562% {
        transform: translate(50.6638vw, 73.562vh) scale(0.8339);
    }

    to {
        transform: translate(46.13905vw, 100vh) scale(0.8339);
    }
}

.snow:nth-child(82) {
    opacity: 0.5219;
    transform: translate(23.6395vw, -10px) scale(0.9624);
    animation: fall-82 24s -6s linear infinite;
}

@keyframes fall-82 {
    65.784% {
        transform: translate(24.0847vw, 65.784vh) scale(0.9624);
    }

    to {
        transform: translate(23.8621vw, 100vh) scale(0.9624);
    }
}

.snow:nth-child(83) {
    opacity: 0.2214;
    transform: translate(79.7512vw, -10px) scale(0.4924);
    animation: fall-83 11s -3s linear infinite;
}

@keyframes fall-83 {
    63.554% {
        transform: translate(77.6337vw, 63.554vh) scale(0.4924);
    }

    to {
        transform: translate(78.69245vw, 100vh) scale(0.4924);
    }
}

.snow:nth-child(84) {
    opacity: 0.7955;
    transform: translate(92.2924vw, -10px) scale(0.0644);
    animation: fall-84 15s -21s linear infinite;
}

@keyframes fall-84 {
    33.424% {
        transform: translate(87.1651vw, 33.424vh) scale(0.0644);
    }

    to {
        transform: translate(89.72875vw, 100vh) scale(0.0644);
    }
}

.snow:nth-child(85) {
    opacity: 0.7465;
    transform: translate(93.6536vw, -10px) scale(0.5962);
    animation: fall-85 19s -21s linear infinite;
}

@keyframes fall-85 {
    70.645% {
        transform: translate(97.7339vw, 70.645vh) scale(0.5962);
    }

    to {
        transform: translate(95.69375vw, 100vh) scale(0.5962);
    }
}

.snow:nth-child(86) {
    opacity: 0.4199;
    transform: translate(8.6559vw, -10px) scale(0.7302);
    animation: fall-86 22s -18s linear infinite;
}

@keyframes fall-86 {
    61.314% {
        transform: translate(8.2241vw, 61.314vh) scale(0.7302);
    }

    to {
        transform: translate(8.44vw, 100vh) scale(0.7302);
    }
}

.snow:nth-child(87) {
    opacity: 0.5412;
    transform: translate(90.5045vw, -10px) scale(0.209);
    animation: fall-87 22s -13s linear infinite;
}

@keyframes fall-87 {
    72.594% {
        transform: translate(92.7261vw, 72.594vh) scale(0.209);
    }

    to {
        transform: translate(91.6153vw, 100vh) scale(0.209);
    }
}

.snow:nth-child(88) {
    opacity: 0.7947;
    transform: translate(76.6695vw, -10px) scale(0.8586);
    animation: fall-88 20s -6s linear infinite;
}

@keyframes fall-88 {
    52.285% {
        transform: translate(75.3874vw, 52.285vh) scale(0.8586);
    }

    to {
        transform: translate(76.02845vw, 100vh) scale(0.8586);
    }
}

.snow:nth-child(89) {
    opacity: 0.3404;
    transform: translate(62.7737vw, -10px) scale(0.073);
    animation: fall-89 21s -12s linear infinite;
}

@keyframes fall-89 {
    35.244% {
        transform: translate(66.793vw, 35.244vh) scale(0.073);
    }

    to {
        transform: translate(64.78335vw, 100vh) scale(0.073);
    }
}

.snow:nth-child(90) {
    opacity: 0.0416;
    transform: translate(96.8312vw, -10px) scale(0.3028);
    animation: fall-90 21s -4s linear infinite;
}

@keyframes fall-90 {
    48.364% {
        transform: translate(97.0152vw, 48.364vh) scale(0.3028);
    }

    to {
        transform: translate(96.9232vw, 100vh) scale(0.3028);
    }
}

.snow:nth-child(91) {
    opacity: 0.6155;
    transform: translate(52.9751vw, -10px) scale(0.1452);
    animation: fall-91 24s -18s linear infinite;
}

@keyframes fall-91 {
    30.346% {
        transform: translate(61.2539vw, 30.346vh) scale(0.1452);
    }

    to {
        transform: translate(57.1145vw, 100vh) scale(0.1452);
    }
}

.snow:nth-child(92) {
    opacity: 0.2515;
    transform: translate(36.7738vw, -10px) scale(0.0153);
    animation: fall-92 28s -6s linear infinite;
}

@keyframes fall-92 {
    46.791% {
        transform: translate(30.3268vw, 46.791vh) scale(0.0153);
    }

    to {
        transform: translate(33.5503vw, 100vh) scale(0.0153);
    }
}

.snow:nth-child(93) {
    opacity: 0.717;
    transform: translate(40.9874vw, -10px) scale(0.431);
    animation: fall-93 27s -28s linear infinite;
}

@keyframes fall-93 {
    65.488% {
        transform: translate(31.9716vw, 65.488vh) scale(0.431);
    }

    to {
        transform: translate(36.4795vw, 100vh) scale(0.431);
    }
}

.snow:nth-child(94) {
    opacity: 0.0323;
    transform: translate(39.224vw, -10px) scale(0.0185);
    animation: fall-94 11s -10s linear infinite;
}

@keyframes fall-94 {
    32.744% {
        transform: translate(35.3267vw, 32.744vh) scale(0.0185);
    }

    to {
        transform: translate(37.27535vw, 100vh) scale(0.0185);
    }
}

.snow:nth-child(95) {
    opacity: 0.8272;
    transform: translate(35.6026vw, -10px) scale(0.2287);
    animation: fall-95 14s -16s linear infinite;
}

@keyframes fall-95 {
    52.25% {
        transform: translate(41.3028vw, 52.25vh) scale(0.2287);
    }

    to {
        transform: translate(38.4527vw, 100vh) scale(0.2287);
    }
}

.snow:nth-child(96) {
    opacity: 0.4534;
    transform: translate(13.0315vw, -10px) scale(0.3023);
    animation: fall-96 16s -11s linear infinite;
}

@keyframes fall-96 {
    37.896% {
        transform: translate(16.6805vw, 37.896vh) scale(0.3023);
    }

    to {
        transform: translate(14.856vw, 100vh) scale(0.3023);
    }
}

.snow:nth-child(97) {
    opacity: 0.81;
    transform: translate(11.5114vw, -10px) scale(0.0413);
    animation: fall-97 13s -1s linear infinite;
}

@keyframes fall-97 {
    39.165% {
        transform: translate(9.2519vw, 39.165vh) scale(0.0413);
    }

    to {
        transform: translate(10.38165vw, 100vh) scale(0.0413);
    }
}

.snow:nth-child(98) {
    opacity: 0.8968;
    transform: translate(41.9067vw, -10px) scale(0.683);
    animation: fall-98 19s -3s linear infinite;
}

@keyframes fall-98 {
    54.779% {
        transform: translate(38.8022vw, 54.779vh) scale(0.683);
    }

    to {
        transform: translate(40.35445vw, 100vh) scale(0.683);
    }
}

.snow:nth-child(99) {
    opacity: 0.127;
    transform: translate(25.1109vw, -10px) scale(0.8482);
    animation: fall-99 30s -24s linear infinite;
}

@keyframes fall-99 {
    49.868% {
        transform: translate(18.8887vw, 49.868vh) scale(0.8482);
    }

    to {
        transform: translate(21.9998vw, 100vh) scale(0.8482);
    }
}

.snow:nth-child(100) {
    opacity: 0.0655;
    transform: translate(9.664vw, -10px) scale(0.1155);
    animation: fall-100 24s -25s linear infinite;
}

@keyframes fall-100 {
    71.162% {
        transform: translate(11.7286vw, 71.162vh) scale(0.1155);
    }

    to {
        transform: translate(10.6963vw, 100vh) scale(0.1155);
    }
}

.snow:nth-child(101) {
    opacity: 0.1314;
    transform: translate(83.1598vw, -10px) scale(0.402);
    animation: fall-101 14s -17s linear infinite;
}

@keyframes fall-101 {
    67.445% {
        transform: translate(76.1952vw, 67.445vh) scale(0.402);
    }

    to {
        transform: translate(79.6775vw, 100vh) scale(0.402);
    }
}

.snow:nth-child(102) {
    opacity: 0.4411;
    transform: translate(17.3896vw, -10px) scale(0.5203);
    animation: fall-102 17s -11s linear infinite;
}

@keyframes fall-102 {
    65.498% {
        transform: translate(22.2426vw, 65.498vh) scale(0.5203);
    }

    to {
        transform: translate(19.8161vw, 100vh) scale(0.5203);
    }
}

.snow:nth-child(103) {
    opacity: 0.4584;
    transform: translate(58.6081vw, -10px) scale(0.2735);
    animation: fall-103 17s -25s linear infinite;
}

@keyframes fall-103 {
    72.608% {
        transform: translate(62.6182vw, 72.608vh) scale(0.2735);
    }

    to {
        transform: translate(60.61315vw, 100vh) scale(0.2735);
    }
}

.snow:nth-child(104) {
    opacity: 0.5787;
    transform: translate(67.8632vw, -10px) scale(0.5996);
    animation: fall-104 24s -12s linear infinite;
}

@keyframes fall-104 {
    79.448% {
        transform: translate(61.7616vw, 79.448vh) scale(0.5996);
    }

    to {
        transform: translate(64.8124vw, 100vh) scale(0.5996);
    }
}

.snow:nth-child(105) {
    opacity: 0.6659;
    transform: translate(45.3218vw, -10px) scale(0.7581);
    animation: fall-105 23s -17s linear infinite;
}

@keyframes fall-105 {
    46.622% {
        transform: translate(51.1493vw, 46.622vh) scale(0.7581);
    }

    to {
        transform: translate(48.23555vw, 100vh) scale(0.7581);
    }
}

.snow:nth-child(106) {
    opacity: 0.6187;
    transform: translate(57.9027vw, -10px) scale(0.4278);
    animation: fall-106 21s -24s linear infinite;
}

@keyframes fall-106 {
    50.023% {
        transform: translate(58.0474vw, 50.023vh) scale(0.4278);
    }

    to {
        transform: translate(57.97505vw, 100vh) scale(0.4278);
    }
}

.snow:nth-child(107) {
    opacity: 0.0826;
    transform: translate(72.2201vw, -10px) scale(0.0063);
    animation: fall-107 28s -30s linear infinite;
}

@keyframes fall-107 {
    66.176% {
        transform: translate(69.3962vw, 66.176vh) scale(0.0063);
    }

    to {
        transform: translate(70.80815vw, 100vh) scale(0.0063);
    }
}

.snow:nth-child(108) {
    opacity: 0.7098;
    transform: translate(44.0418vw, -10px) scale(0.1338);
    animation: fall-108 24s -19s linear infinite;
}

@keyframes fall-108 {
    44.459% {
        transform: translate(35.9041vw, 44.459vh) scale(0.1338);
    }

    to {
        transform: translate(39.97295vw, 100vh) scale(0.1338);
    }
}

.snow:nth-child(109) {
    opacity: 0.2442;
    transform: translate(5.0739vw, -10px) scale(0.1279);
    animation: fall-109 27s -20s linear infinite;
}

@keyframes fall-109 {
    48.904% {
        transform: translate(-4.4394vw, 48.904vh) scale(0.1279);
    }

    to {
        transform: translate(0.31725vw, 100vh) scale(0.1279);
    }
}

.snow:nth-child(110) {
    opacity: 0.8052;
    transform: translate(12.3314vw, -10px) scale(0.615);
    animation: fall-110 12s -14s linear infinite;
}

@keyframes fall-110 {
    36.369% {
        transform: translate(7.2813vw, 36.369vh) scale(0.615);
    }

    to {
        transform: translate(9.80635vw, 100vh) scale(0.615);
    }
}

.snow:nth-child(111) {
    opacity: 0.2219;
    transform: translate(45.28vw, -10px) scale(0.9523);
    animation: fall-111 12s -17s linear infinite;
}

@keyframes fall-111 {
    74.869% {
        transform: translate(45.8501vw, 74.869vh) scale(0.9523);
    }

    to {
        transform: translate(45.56505vw, 100vh) scale(0.9523);
    }
}

.snow:nth-child(112) {
    opacity: 0.9964;
    transform: translate(73.3004vw, -10px) scale(0.1755);
    animation: fall-112 15s -19s linear infinite;
}

@keyframes fall-112 {
    61.467% {
        transform: translate(73.7427vw, 61.467vh) scale(0.1755);
    }

    to {
        transform: translate(73.52155vw, 100vh) scale(0.1755);
    }
}

.snow:nth-child(113) {
    opacity: 0.7068;
    transform: translate(21.6053vw, -10px) scale(0.5216);
    animation: fall-113 27s -22s linear infinite;
}

@keyframes fall-113 {
    67.845% {
        transform: translate(25.7787vw, 67.845vh) scale(0.5216);
    }

    to {
        transform: translate(23.692vw, 100vh) scale(0.5216);
    }
}

.snow:nth-child(114) {
    opacity: 0.5375;
    transform: translate(90.2038vw, -10px) scale(0.5822);
    animation: fall-114 29s -12s linear infinite;
}

@keyframes fall-114 {
    55.074% {
        transform: translate(89.8329vw, 55.074vh) scale(0.5822);
    }

    to {
        transform: translate(90.01835vw, 100vh) scale(0.5822);
    }
}

.snow:nth-child(115) {
    opacity: 0.5343;
    transform: translate(7.588vw, -10px) scale(0.1187);
    animation: fall-115 25s -7s linear infinite;
}

@keyframes fall-115 {
    48.112% {
        transform: translate(5.2139vw, 48.112vh) scale(0.1187);
    }

    to {
        transform: translate(6.40095vw, 100vh) scale(0.1187);
    }
}

.snow:nth-child(116) {
    opacity: 0.6235;
    transform: translate(73.5302vw, -10px) scale(0.9494);
    animation: fall-116 25s -24s linear infinite;
}

@keyframes fall-116 {
    70.199% {
        transform: translate(68.5607vw, 70.199vh) scale(0.9494);
    }

    to {
        transform: translate(71.04545vw, 100vh) scale(0.9494);
    }
}

.snow:nth-child(117) {
    opacity: 0.9672;
    transform: translate(72.0892vw, -10px) scale(0.0621);
    animation: fall-117 14s -8s linear infinite;
}

@keyframes fall-117 {
    68.943% {
        transform: translate(74.8516vw, 68.943vh) scale(0.0621);
    }

    to {
        transform: translate(73.4704vw, 100vh) scale(0.0621);
    }
}

.snow:nth-child(118) {
    opacity: 0.6167;
    transform: translate(92.6784vw, -10px) scale(0.9491);
    animation: fall-118 19s -12s linear infinite;
}

@keyframes fall-118 {
    34.718% {
        transform: translate(92.5904vw, 34.718vh) scale(0.9491);
    }

    to {
        transform: translate(92.6344vw, 100vh) scale(0.9491);
    }
}

.snow:nth-child(119) {
    opacity: 0.2539;
    transform: translate(86.6548vw, -10px) scale(0.2479);
    animation: fall-119 24s -17s linear infinite;
}

@keyframes fall-119 {
    67.125% {
        transform: translate(90.944vw, 67.125vh) scale(0.2479);
    }

    to {
        transform: translate(88.7994vw, 100vh) scale(0.2479);
    }
}

.snow:nth-child(120) {
    opacity: 0.7734;
    transform: translate(25.0155vw, -10px) scale(0.7108);
    animation: fall-120 11s -25s linear infinite;
}

@keyframes fall-120 {
    71.773% {
        transform: translate(33.2104vw, 71.773vh) scale(0.7108);
    }

    to {
        transform: translate(29.11295vw, 100vh) scale(0.7108);
    }
}

.snow:nth-child(121) {
    opacity: 0.7813;
    transform: translate(38.013vw, -10px) scale(0.0857);
    animation: fall-121 17s -7s linear infinite;
}

@keyframes fall-121 {
    33.482% {
        transform: translate(43.9496vw, 33.482vh) scale(0.0857);
    }

    to {
        transform: translate(40.9813vw, 100vh) scale(0.0857);
    }
}

.snow:nth-child(122) {
    opacity: 0.5354;
    transform: translate(19.2316vw, -10px) scale(0.5925);
    animation: fall-122 16s -16s linear infinite;
}

@keyframes fall-122 {
    41.743% {
        transform: translate(26.0169vw, 41.743vh) scale(0.5925);
    }

    to {
        transform: translate(22.62425vw, 100vh) scale(0.5925);
    }
}

.snow:nth-child(123) {
    opacity: 0.9607;
    transform: translate(94.4367vw, -10px) scale(0.7015);
    animation: fall-123 29s -9s linear infinite;
}

@keyframes fall-123 {
    77.808% {
        transform: translate(91.2555vw, 77.808vh) scale(0.7015);
    }

    to {
        transform: translate(92.8461vw, 100vh) scale(0.7015);
    }
}

.snow:nth-child(124) {
    opacity: 0.9292;
    transform: translate(5.5493vw, -10px) scale(0.8533);
    animation: fall-124 25s -13s linear infinite;
}

@keyframes fall-124 {
    66.807% {
        transform: translate(1.1513vw, 66.807vh) scale(0.8533);
    }

    to {
        transform: translate(3.3503vw, 100vh) scale(0.8533);
    }
}

.snow:nth-child(125) {
    opacity: 0.4602;
    transform: translate(93.564vw, -10px) scale(0.6853);
    animation: fall-125 17s -16s linear infinite;
}

@keyframes fall-125 {
    55.308% {
        transform: translate(86.5941vw, 55.308vh) scale(0.6853);
    }

    to {
        transform: translate(90.07905vw, 100vh) scale(0.6853);
    }
}

.snow:nth-child(126) {
    opacity: 0.2056;
    transform: translate(0.0567vw, -10px) scale(0.943);
    animation: fall-126 14s -13s linear infinite;
}

@keyframes fall-126 {
    65.495% {
        transform: translate(3.143vw, 65.495vh) scale(0.943);
    }

    to {
        transform: translate(1.59985vw, 100vh) scale(0.943);
    }
}

.snow:nth-child(127) {
    opacity: 0.8017;
    transform: translate(23.1969vw, -10px) scale(0.8499);
    animation: fall-127 20s -12s linear infinite;
}

@keyframes fall-127 {
    50.826% {
        transform: translate(19.7213vw, 50.826vh) scale(0.8499);
    }

    to {
        transform: translate(21.4591vw, 100vh) scale(0.8499);
    }
}

.snow:nth-child(128) {
    opacity: 0.9994;
    transform: translate(34.8611vw, -10px) scale(0.269);
    animation: fall-128 14s -1s linear infinite;
}

@keyframes fall-128 {
    68.328% {
        transform: translate(25.303vw, 68.328vh) scale(0.269);
    }

    to {
        transform: translate(30.08205vw, 100vh) scale(0.269);
    }
}

.snow:nth-child(129) {
    opacity: 0.5769;
    transform: translate(97.1726vw, -10px) scale(0.1672);
    animation: fall-129 14s -12s linear infinite;
}

@keyframes fall-129 {
    74.048% {
        transform: translate(100.4408vw, 74.048vh) scale(0.1672);
    }

    to {
        transform: translate(98.8067vw, 100vh) scale(0.1672);
    }
}

.snow:nth-child(130) {
    opacity: 0.8899;
    transform: translate(96.7529vw, -10px) scale(0.8768);
    animation: fall-130 16s -12s linear infinite;
}

@keyframes fall-130 {
    55.709% {
        transform: translate(106.0148vw, 55.709vh) scale(0.8768);
    }

    to {
        transform: translate(101.38385vw, 100vh) scale(0.8768);
    }
}

.snow:nth-child(131) {
    opacity: 0.6778;
    transform: translate(72.5347vw, -10px) scale(0.7928);
    animation: fall-131 29s -9s linear infinite;
}

@keyframes fall-131 {
    64.323% {
        transform: translate(73.2908vw, 64.323vh) scale(0.7928);
    }

    to {
        transform: translate(72.91275vw, 100vh) scale(0.7928);
    }
}

.snow:nth-child(132) {
    opacity: 0.075;
    transform: translate(12.5399vw, -10px) scale(0.9304);
    animation: fall-132 21s -14s linear infinite;
}

@keyframes fall-132 {
    33.434% {
        transform: translate(15.0997vw, 33.434vh) scale(0.9304);
    }

    to {
        transform: translate(13.8198vw, 100vh) scale(0.9304);
    }
}

.snow:nth-child(133) {
    opacity: 0.0399;
    transform: translate(92.3828vw, -10px) scale(0.4084);
    animation: fall-133 15s -15s linear infinite;
}

@keyframes fall-133 {
    66.753% {
        transform: translate(86.0603vw, 66.753vh) scale(0.4084);
    }

    to {
        transform: translate(89.22155vw, 100vh) scale(0.4084);
    }
}

.snow:nth-child(134) {
    opacity: 0.7367;
    transform: translate(85.672vw, -10px) scale(0.7448);
    animation: fall-134 17s -28s linear infinite;
}

@keyframes fall-134 {
    77.871% {
        transform: translate(94.2529vw, 77.871vh) scale(0.7448);
    }

    to {
        transform: translate(89.96245vw, 100vh) scale(0.7448);
    }
}

.snow:nth-child(135) {
    opacity: 0.8964;
    transform: translate(80.3787vw, -10px) scale(0.0411);
    animation: fall-135 15s -1s linear infinite;
}

@keyframes fall-135 {
    36.286% {
        transform: translate(88.7666vw, 36.286vh) scale(0.0411);
    }

    to {
        transform: translate(84.57265vw, 100vh) scale(0.0411);
    }
}

.snow:nth-child(136) {
    opacity: 0.438;
    transform: translate(72.687vw, -10px) scale(0.1271);
    animation: fall-136 13s -25s linear infinite;
}

@keyframes fall-136 {
    55.959% {
        transform: translate(80.2462vw, 55.959vh) scale(0.1271);
    }

    to {
        transform: translate(76.4666vw, 100vh) scale(0.1271);
    }
}

.snow:nth-child(137) {
    opacity: 0.909;
    transform: translate(33.9921vw, -10px) scale(0.8739);
    animation: fall-137 15s -16s linear infinite;
}

@keyframes fall-137 {
    72.161% {
        transform: translate(33.0893vw, 72.161vh) scale(0.8739);
    }

    to {
        transform: translate(33.5407vw, 100vh) scale(0.8739);
    }
}

.snow:nth-child(138) {
    opacity: 0.4728;
    transform: translate(0.352vw, -10px) scale(0.0336);
    animation: fall-138 22s -21s linear infinite;
}

@keyframes fall-138 {
    67.573% {
        transform: translate(-5.2841vw, 67.573vh) scale(0.0336);
    }

    to {
        transform: translate(-2.46605vw, 100vh) scale(0.0336);
    }
}

.snow:nth-child(139) {
    opacity: 0.5352;
    transform: translate(60.7108vw, -10px) scale(0.0927);
    animation: fall-139 25s -9s linear infinite;
}

@keyframes fall-139 {
    66.994% {
        transform: translate(57.3563vw, 66.994vh) scale(0.0927);
    }

    to {
        transform: translate(59.03355vw, 100vh) scale(0.0927);
    }
}

.snow:nth-child(140) {
    opacity: 0.3483;
    transform: translate(65.5512vw, -10px) scale(0.1036);
    animation: fall-140 13s -5s linear infinite;
}

@keyframes fall-140 {
    70.119% {
        transform: translate(74.8993vw, 70.119vh) scale(0.1036);
    }

    to {
        transform: translate(70.22525vw, 100vh) scale(0.1036);
    }
}

.snow:nth-child(141) {
    opacity: 0.303;
    transform: translate(24.723vw, -10px) scale(0.5435);
    animation: fall-141 15s -15s linear infinite;
}

@keyframes fall-141 {
    49.913% {
        transform: translate(30.3799vw, 49.913vh) scale(0.5435);
    }

    to {
        transform: translate(27.55145vw, 100vh) scale(0.5435);
    }
}

.snow:nth-child(142) {
    opacity: 0.6576;
    transform: translate(33.6776vw, -10px) scale(0.527);
    animation: fall-142 19s -7s linear infinite;
}

@keyframes fall-142 {
    38.354% {
        transform: translate(43.6621vw, 38.354vh) scale(0.527);
    }

    to {
        transform: translate(38.66985vw, 100vh) scale(0.527);
    }
}

.snow:nth-child(143) {
    opacity: 0.1672;
    transform: translate(67.8914vw, -10px) scale(0.3111);
    animation: fall-143 26s -8s linear infinite;
}

@keyframes fall-143 {
    37.193% {
        transform: translate(62.412vw, 37.193vh) scale(0.3111);
    }

    to {
        transform: translate(65.1517vw, 100vh) scale(0.3111);
    }
}

.snow:nth-child(144) {
    opacity: 0.6432;
    transform: translate(41.8167vw, -10px) scale(0.645);
    animation: fall-144 16s -14s linear infinite;
}

@keyframes fall-144 {
    31.921% {
        transform: translate(49.4394vw, 31.921vh) scale(0.645);
    }

    to {
        transform: translate(45.62805vw, 100vh) scale(0.645);
    }
}

.snow:nth-child(145) {
    opacity: 0.4316;
    transform: translate(13.6981vw, -10px) scale(0.6724);
    animation: fall-145 12s -18s linear infinite;
}

@keyframes fall-145 {
    32.085% {
        transform: translate(14.7531vw, 32.085vh) scale(0.6724);
    }

    to {
        transform: translate(14.2256vw, 100vh) scale(0.6724);
    }
}

.snow:nth-child(146) {
    opacity: 0.9963;
    transform: translate(31.9771vw, -10px) scale(0.9641);
    animation: fall-146 25s -27s linear infinite;
}

@keyframes fall-146 {
    65.829% {
        transform: translate(27.0986vw, 65.829vh) scale(0.9641);
    }

    to {
        transform: translate(29.53785vw, 100vh) scale(0.9641);
    }
}

.snow:nth-child(147) {
    opacity: 0.0392;
    transform: translate(52.7049vw, -10px) scale(0.1852);
    animation: fall-147 24s -17s linear infinite;
}

@keyframes fall-147 {
    51.449% {
        transform: translate(47.2341vw, 51.449vh) scale(0.1852);
    }

    to {
        transform: translate(49.9695vw, 100vh) scale(0.1852);
    }
}

.snow:nth-child(148) {
    opacity: 0.1466;
    transform: translate(38.8823vw, -10px) scale(0.7402);
    animation: fall-148 18s -20s linear infinite;
}

@keyframes fall-148 {
    36.392% {
        transform: translate(34.5508vw, 36.392vh) scale(0.7402);
    }

    to {
        transform: translate(36.71655vw, 100vh) scale(0.7402);
    }
}

.snow:nth-child(149) {
    opacity: 0.6218;
    transform: translate(62.0785vw, -10px) scale(0.2729);
    animation: fall-149 15s -1s linear infinite;
}

@keyframes fall-149 {
    57.137% {
        transform: translate(53.7538vw, 57.137vh) scale(0.2729);
    }

    to {
        transform: translate(57.91615vw, 100vh) scale(0.2729);
    }
}

.snow:nth-child(150) {
    opacity: 0.6807;
    transform: translate(61.1658vw, -10px) scale(0.6468);
    animation: fall-150 25s -4s linear infinite;
}

@keyframes fall-150 {
    76.956% {
        transform: translate(69.1671vw, 76.956vh) scale(0.6468);
    }

    to {
        transform: translate(65.16645vw, 100vh) scale(0.6468);
    }
}

.snow:nth-child(151) {
    opacity: 0.3463;
    transform: translate(7.7107vw, -10px) scale(0.6564);
    animation: fall-151 20s -29s linear infinite;
}

@keyframes fall-151 {
    49.004% {
        transform: translate(4.8306vw, 49.004vh) scale(0.6564);
    }

    to {
        transform: translate(6.27065vw, 100vh) scale(0.6564);
    }
}

.snow:nth-child(152) {
    opacity: 0.2603;
    transform: translate(84.54vw, -10px) scale(0.8412);
    animation: fall-152 26s -10s linear infinite;
}

@keyframes fall-152 {
    32.296% {
        transform: translate(83.7193vw, 32.296vh) scale(0.8412);
    }

    to {
        transform: translate(84.12965vw, 100vh) scale(0.8412);
    }
}

.snow:nth-child(153) {
    opacity: 0.9149;
    transform: translate(60.8364vw, -10px) scale(0.3854);
    animation: fall-153 23s -7s linear infinite;
}

@keyframes fall-153 {
    78.508% {
        transform: translate(52.6804vw, 78.508vh) scale(0.3854);
    }

    to {
        transform: translate(56.7584vw, 100vh) scale(0.3854);
    }
}

.snow:nth-child(154) {
    opacity: 0.2838;
    transform: translate(87.6099vw, -10px) scale(0.7321);
    animation: fall-154 19s -12s linear infinite;
}

@keyframes fall-154 {
    71.204% {
        transform: translate(82.1454vw, 71.204vh) scale(0.7321);
    }

    to {
        transform: translate(84.87765vw, 100vh) scale(0.7321);
    }
}

.snow:nth-child(155) {
    opacity: 0.8649;
    transform: translate(86.9596vw, -10px) scale(0.037);
    animation: fall-155 23s -28s linear infinite;
}

@keyframes fall-155 {
    34.626% {
        transform: translate(90.3228vw, 34.626vh) scale(0.037);
    }

    to {
        transform: translate(88.6412vw, 100vh) scale(0.037);
    }
}

.snow:nth-child(156) {
    opacity: 0.5673;
    transform: translate(19.605vw, -10px) scale(0.5318);
    animation: fall-156 11s -4s linear infinite;
}

@keyframes fall-156 {
    78.683% {
        transform: translate(15.0347vw, 78.683vh) scale(0.5318);
    }

    to {
        transform: translate(17.31985vw, 100vh) scale(0.5318);
    }
}

.snow:nth-child(157) {
    opacity: 0.1445;
    transform: translate(19.3673vw, -10px) scale(0.6447);
    animation: fall-157 25s -9s linear infinite;
}

@keyframes fall-157 {
    36.165% {
        transform: translate(19.411vw, 36.165vh) scale(0.6447);
    }

    to {
        transform: translate(19.38915vw, 100vh) scale(0.6447);
    }
}

.snow:nth-child(158) {
    opacity: 0.3696;
    transform: translate(65.6699vw, -10px) scale(0.5562);
    animation: fall-158 16s -19s linear infinite;
}

@keyframes fall-158 {
    55.827% {
        transform: translate(60.4363vw, 55.827vh) scale(0.5562);
    }

    to {
        transform: translate(63.0531vw, 100vh) scale(0.5562);
    }
}

.snow:nth-child(159) {
    opacity: 0.0269;
    transform: translate(21.8935vw, -10px) scale(0.0237);
    animation: fall-159 25s -23s linear infinite;
}

@keyframes fall-159 {
    39.133% {
        transform: translate(22.0723vw, 39.133vh) scale(0.0237);
    }

    to {
        transform: translate(21.9829vw, 100vh) scale(0.0237);
    }
}

.snow:nth-child(160) {
    opacity: 0.7896;
    transform: translate(8.4409vw, -10px) scale(0.365);
    animation: fall-160 19s -29s linear infinite;
}

@keyframes fall-160 {
    77.138% {
        transform: translate(4.9666vw, 77.138vh) scale(0.365);
    }

    to {
        transform: translate(6.70375vw, 100vh) scale(0.365);
    }
}

.snow:nth-child(161) {
    opacity: 0.0864;
    transform: translate(83.0539vw, -10px) scale(0.1454);
    animation: fall-161 30s -16s linear infinite;
}

@keyframes fall-161 {
    54.292% {
        transform: translate(92.6531vw, 54.292vh) scale(0.1454);
    }

    to {
        transform: translate(87.8535vw, 100vh) scale(0.1454);
    }
}

.snow:nth-child(162) {
    opacity: 0.6054;
    transform: translate(76.8437vw, -10px) scale(0.2702);
    animation: fall-162 16s -23s linear infinite;
}

@keyframes fall-162 {
    61.835% {
        transform: translate(74.59vw, 61.835vh) scale(0.2702);
    }

    to {
        transform: translate(75.71685vw, 100vh) scale(0.2702);
    }
}

.snow:nth-child(163) {
    opacity: 0.0262;
    transform: translate(72.4785vw, -10px) scale(0.019);
    animation: fall-163 21s -10s linear infinite;
}

@keyframes fall-163 {
    67.433% {
        transform: translate(76.3674vw, 67.433vh) scale(0.019);
    }

    to {
        transform: translate(74.42295vw, 100vh) scale(0.019);
    }
}

.snow:nth-child(164) {
    opacity: 0.049;
    transform: translate(74.1006vw, -10px) scale(0.8591);
    animation: fall-164 22s -9s linear infinite;
}

@keyframes fall-164 {
    32.755% {
        transform: translate(76.4286vw, 32.755vh) scale(0.8591);
    }

    to {
        transform: translate(75.2646vw, 100vh) scale(0.8591);
    }
}

.snow:nth-child(165) {
    opacity: 0.5448;
    transform: translate(36.0887vw, -10px) scale(0.2542);
    animation: fall-165 13s -19s linear infinite;
}

@keyframes fall-165 {
    34.901% {
        transform: translate(38.6996vw, 34.901vh) scale(0.2542);
    }

    to {
        transform: translate(37.39415vw, 100vh) scale(0.2542);
    }
}

.snow:nth-child(166) {
    opacity: 0.1834;
    transform: translate(87.2688vw, -10px) scale(0.7696);
    animation: fall-166 17s -3s linear infinite;
}

@keyframes fall-166 {
    63.119% {
        transform: translate(84.085vw, 63.119vh) scale(0.7696);
    }

    to {
        transform: translate(85.6769vw, 100vh) scale(0.7696);
    }
}

.snow:nth-child(167) {
    opacity: 0.1759;
    transform: translate(94.7095vw, -10px) scale(0.4789);
    animation: fall-167 29s -9s linear infinite;
}

@keyframes fall-167 {
    46.312% {
        transform: translate(101.3678vw, 46.312vh) scale(0.4789);
    }

    to {
        transform: translate(98.03865vw, 100vh) scale(0.4789);
    }
}

.snow:nth-child(168) {
    opacity: 0.2214;
    transform: translate(10.8182vw, -10px) scale(0.4607);
    animation: fall-168 28s -14s linear infinite;
}

@keyframes fall-168 {
    66.12% {
        transform: translate(18.1956vw, 66.12vh) scale(0.4607);
    }

    to {
        transform: translate(14.5069vw, 100vh) scale(0.4607);
    }
}

.snow:nth-child(169) {
    opacity: 0.9303;
    transform: translate(29.9781vw, -10px) scale(0.4943);
    animation: fall-169 23s -6s linear infinite;
}

@keyframes fall-169 {
    49.992% {
        transform: translate(34.4863vw, 49.992vh) scale(0.4943);
    }

    to {
        transform: translate(32.2322vw, 100vh) scale(0.4943);
    }
}

.snow:nth-child(170) {
    opacity: 0.8259;
    transform: translate(48.6397vw, -10px) scale(0.9482);
    animation: fall-170 14s -20s linear infinite;
}

@keyframes fall-170 {
    36.1% {
        transform: translate(39.5307vw, 36.1vh) scale(0.9482);
    }

    to {
        transform: translate(44.0852vw, 100vh) scale(0.9482);
    }
}

.snow:nth-child(171) {
    opacity: 0.4963;
    transform: translate(53.5659vw, -10px) scale(0.7509);
    animation: fall-171 30s -2s linear infinite;
}

@keyframes fall-171 {
    60.853% {
        transform: translate(46.9049vw, 60.853vh) scale(0.7509);
    }

    to {
        transform: translate(50.2354vw, 100vh) scale(0.7509);
    }
}

.snow:nth-child(172) {
    opacity: 0.6211;
    transform: translate(12.1604vw, -10px) scale(0.4815);
    animation: fall-172 27s -7s linear infinite;
}

@keyframes fall-172 {
    46.82% {
        transform: translate(2.9568vw, 46.82vh) scale(0.4815);
    }

    to {
        transform: translate(7.5586vw, 100vh) scale(0.4815);
    }
}

.snow:nth-child(173) {
    opacity: 0.2716;
    transform: translate(65.0077vw, -10px) scale(0.7573);
    animation: fall-173 26s -13s linear infinite;
}

@keyframes fall-173 {
    41.564% {
        transform: translate(56.0954vw, 41.564vh) scale(0.7573);
    }

    to {
        transform: translate(60.55155vw, 100vh) scale(0.7573);
    }
}

.snow:nth-child(174) {
    opacity: 0.9909;
    transform: translate(19.7156vw, -10px) scale(0.7981);
    animation: fall-174 10s -11s linear infinite;
}

@keyframes fall-174 {
    64.834% {
        transform: translate(25.3318vw, 64.834vh) scale(0.7981);
    }

    to {
        transform: translate(22.5237vw, 100vh) scale(0.7981);
    }
}

.snow:nth-child(175) {
    opacity: 0.443;
    transform: translate(96.5802vw, -10px) scale(0.7186);
    animation: fall-175 29s -14s linear infinite;
}

@keyframes fall-175 {
    52.956% {
        transform: translate(97.2222vw, 52.956vh) scale(0.7186);
    }

    to {
        transform: translate(96.9012vw, 100vh) scale(0.7186);
    }
}

.snow:nth-child(176) {
    opacity: 0.5313;
    transform: translate(20.8815vw, -10px) scale(0.0047);
    animation: fall-176 10s -9s linear infinite;
}

@keyframes fall-176 {
    40.834% {
        transform: translate(19.7984vw, 40.834vh) scale(0.0047);
    }

    to {
        transform: translate(20.33995vw, 100vh) scale(0.0047);
    }
}

.snow:nth-child(177) {
    opacity: 0.6284;
    transform: translate(83.0738vw, -10px) scale(0.2047);
    animation: fall-177 28s -3s linear infinite;
}

@keyframes fall-177 {
    30.654% {
        transform: translate(81.963vw, 30.654vh) scale(0.2047);
    }

    to {
        transform: translate(82.5184vw, 100vh) scale(0.2047);
    }
}

.snow:nth-child(178) {
    opacity: 0.9728;
    transform: translate(11.4995vw, -10px) scale(0.6262);
    animation: fall-178 25s -28s linear infinite;
}

@keyframes fall-178 {
    45.246% {
        transform: translate(20.4226vw, 45.246vh) scale(0.6262);
    }

    to {
        transform: translate(15.96105vw, 100vh) scale(0.6262);
    }
}

.snow:nth-child(179) {
    opacity: 0.3479;
    transform: translate(3.7493vw, -10px) scale(0.6579);
    animation: fall-179 21s -16s linear infinite;
}

@keyframes fall-179 {
    35.352% {
        transform: translate(5.5737vw, 35.352vh) scale(0.6579);
    }

    to {
        transform: translate(4.6615vw, 100vh) scale(0.6579);
    }
}

.snow:nth-child(180) {
    opacity: 0.1344;
    transform: translate(75.9558vw, -10px) scale(0.4017);
    animation: fall-180 19s -6s linear infinite;
}

@keyframes fall-180 {
    64.101% {
        transform: translate(79.2127vw, 64.101vh) scale(0.4017);
    }

    to {
        transform: translate(77.58425vw, 100vh) scale(0.4017);
    }
}

.snow:nth-child(181) {
    opacity: 0.4911;
    transform: translate(73.8229vw, -10px) scale(0.7778);
    animation: fall-181 30s -19s linear infinite;
}

@keyframes fall-181 {
    67.518% {
        transform: translate(73.6403vw, 67.518vh) scale(0.7778);
    }

    to {
        transform: translate(73.7316vw, 100vh) scale(0.7778);
    }
}

.snow:nth-child(182) {
    opacity: 0.286;
    transform: translate(34.209vw, -10px) scale(0.8264);
    animation: fall-182 29s -29s linear infinite;
}

@keyframes fall-182 {
    35.73% {
        transform: translate(29.0976vw, 35.73vh) scale(0.8264);
    }

    to {
        transform: translate(31.6533vw, 100vh) scale(0.8264);
    }
}

.snow:nth-child(183) {
    opacity: 0.9073;
    transform: translate(74.4575vw, -10px) scale(0.2105);
    animation: fall-183 29s -4s linear infinite;
}

@keyframes fall-183 {
    33.962% {
        transform: translate(77.1285vw, 33.962vh) scale(0.2105);
    }

    to {
        transform: translate(75.793vw, 100vh) scale(0.2105);
    }
}

.snow:nth-child(184) {
    opacity: 0.8871;
    transform: translate(56.0515vw, -10px) scale(0.9066);
    animation: fall-184 15s -11s linear infinite;
}

@keyframes fall-184 {
    66.185% {
        transform: translate(46.9357vw, 66.185vh) scale(0.9066);
    }

    to {
        transform: translate(51.4936vw, 100vh) scale(0.9066);
    }
}

.snow:nth-child(185) {
    opacity: 0.5289;
    transform: translate(48.3935vw, -10px) scale(0.3654);
    animation: fall-185 15s -14s linear infinite;
}

@keyframes fall-185 {
    32.478% {
        transform: translate(48.105vw, 32.478vh) scale(0.3654);
    }

    to {
        transform: translate(48.24925vw, 100vh) scale(0.3654);
    }
}

.snow:nth-child(186) {
    opacity: 0.5745;
    transform: translate(20.3253vw, -10px) scale(0.1295);
    animation: fall-186 29s -12s linear infinite;
}

@keyframes fall-186 {
    34.571% {
        transform: translate(18.2805vw, 34.571vh) scale(0.1295);
    }

    to {
        transform: translate(19.3029vw, 100vh) scale(0.1295);
    }
}

.snow:nth-child(187) {
    opacity: 0.0226;
    transform: translate(75.2296vw, -10px) scale(0.5691);
    animation: fall-187 20s -4s linear infinite;
}

@keyframes fall-187 {
    75.903% {
        transform: translate(74.2225vw, 75.903vh) scale(0.5691);
    }

    to {
        transform: translate(74.72605vw, 100vh) scale(0.5691);
    }
}

.snow:nth-child(188) {
    opacity: 0.5045;
    transform: translate(43.5662vw, -10px) scale(0.2775);
    animation: fall-188 28s -25s linear infinite;
}

@keyframes fall-188 {
    49.083% {
        transform: translate(33.5798vw, 49.083vh) scale(0.2775);
    }

    to {
        transform: translate(38.573vw, 100vh) scale(0.2775);
    }
}

.snow:nth-child(189) {
    opacity: 0.7359;
    transform: translate(65.2582vw, -10px) scale(0.1948);
    animation: fall-189 14s -19s linear infinite;
}

@keyframes fall-189 {
    67.484% {
        transform: translate(74.2686vw, 67.484vh) scale(0.1948);
    }

    to {
        transform: translate(69.7634vw, 100vh) scale(0.1948);
    }
}

.snow:nth-child(190) {
    opacity: 0.1225;
    transform: translate(32.4564vw, -10px) scale(0.072);
    animation: fall-190 18s -6s linear infinite;
}

@keyframes fall-190 {
    43.686% {
        transform: translate(29.003vw, 43.686vh) scale(0.072);
    }

    to {
        transform: translate(30.7297vw, 100vh) scale(0.072);
    }
}

.snow:nth-child(191) {
    opacity: 0.3456;
    transform: translate(59.4516vw, -10px) scale(0.2369);
    animation: fall-191 23s -10s linear infinite;
}

@keyframes fall-191 {
    78.342% {
        transform: translate(54.3119vw, 78.342vh) scale(0.2369);
    }

    to {
        transform: translate(56.88175vw, 100vh) scale(0.2369);
    }
}

.snow:nth-child(192) {
    opacity: 0.2569;
    transform: translate(3.8475vw, -10px) scale(0.1587);
    animation: fall-192 20s -13s linear infinite;
}

@keyframes fall-192 {
    51.715% {
        transform: translate(8.0732vw, 51.715vh) scale(0.1587);
    }

    to {
        transform: translate(5.96035vw, 100vh) scale(0.1587);
    }
}

.snow:nth-child(193) {
    opacity: 0.4879;
    transform: translate(35.6502vw, -10px) scale(0.8298);
    animation: fall-193 13s -21s linear infinite;
}

@keyframes fall-193 {
    53.023% {
        transform: translate(30.7661vw, 53.023vh) scale(0.8298);
    }

    to {
        transform: translate(33.20815vw, 100vh) scale(0.8298);
    }
}

.snow:nth-child(194) {
    opacity: 0.5621;
    transform: translate(54.1269vw, -10px) scale(0.4512);
    animation: fall-194 25s -3s linear infinite;
}

@keyframes fall-194 {
    67.871% {
        transform: translate(46.0922vw, 67.871vh) scale(0.4512);
    }

    to {
        transform: translate(50.10955vw, 100vh) scale(0.4512);
    }
}

.snow:nth-child(195) {
    opacity: 0.4949;
    transform: translate(22.1668vw, -10px) scale(0.3733);
    animation: fall-195 26s -24s linear infinite;
}

@keyframes fall-195 {
    54.8% {
        transform: translate(26.9709vw, 54.8vh) scale(0.3733);
    }

    to {
        transform: translate(24.56885vw, 100vh) scale(0.3733);
    }
}

.snow:nth-child(196) {
    opacity: 0.7834;
    transform: translate(93.8908vw, -10px) scale(0.4654);
    animation: fall-196 22s -12s linear infinite;
}

@keyframes fall-196 {
    52.434% {
        transform: translate(92.9499vw, 52.434vh) scale(0.4654);
    }

    to {
        transform: translate(93.42035vw, 100vh) scale(0.4654);
    }
}

.snow:nth-child(197) {
    opacity: 0.4547;
    transform: translate(3.2359vw, -10px) scale(0.2065);
    animation: fall-197 18s -13s linear infinite;
}

@keyframes fall-197 {
    51.054% {
        transform: translate(12.3126vw, 51.054vh) scale(0.2065);
    }

    to {
        transform: translate(7.77425vw, 100vh) scale(0.2065);
    }
}

.snow:nth-child(198) {
    opacity: 0.3719;
    transform: translate(81.7415vw, -10px) scale(0.8809);
    animation: fall-198 22s -15s linear infinite;
}

@keyframes fall-198 {
    78.738% {
        transform: translate(72.4649vw, 78.738vh) scale(0.8809);
    }

    to {
        transform: translate(77.1032vw, 100vh) scale(0.8809);
    }
}

.snow:nth-child(199) {
    opacity: 0.347;
    transform: translate(53.4693vw, -10px) scale(0.6983);
    animation: fall-199 23s -2s linear infinite;
}

@keyframes fall-199 {
    34.623% {
        transform: translate(49.368vw, 34.623vh) scale(0.6983);
    }

    to {
        transform: translate(51.41865vw, 100vh) scale(0.6983);
    }
}

.snow:nth-child(200) {
    opacity: 0.1907;
    transform: translate(50.8153vw, -10px) scale(0.3766);
    animation: fall-200 20s -18s linear infinite;
}

@keyframes fall-200 {
    54.277% {
        transform: translate(58.0655vw, 54.277vh) scale(0.3766);
    }

    to {
        transform: translate(54.4404vw, 100vh) scale(0.3766);
    }
}

.status-server img:hover {
    filter: brightness(120%);
}

/* --------------------------------
    
       Primary style
    
       -------------------------------- */
*,
*::after,
*::before {
    box-sizing: border-box;
}

a {
    color: #26a69a;
    text-decoration: none;
}

/* --------------------------------

   Main Components

   -------------------------------- */
.icons-container {
    height: 100px;
    width: 100px;
    position: fixed;
    top: 40%;
    right: -2%;
}

.social-icons .item {
    display: inline-block;
    margin: 5px;
    width: 50px;
    height: 50px;
    transition: 0.3s all;
    position: relative;
    -webkit-transition: 0.3s all;
    text-align: center;
    color: #fff;
    background-color: #fff;
    line-height: 48px;
    border-radius: 50px;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
        0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.18),
        0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}

.social-icons.spinned .item:hover {
    -webkit-animation: Social-Icons-Flipping 0.3s;
    animation: Social-Icons-Flipping 0.3s;
}

.social-icons .item:hover {
    text-decoration: none;
    background-color: #42474e;
    box-shadow: 0 -1px 0 transparent inset, 0 2px 3px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.3);
    color: #fff !important;
}

.social-icons .item .fa {
    font-size: 26px;
    font-weight: 500;
    padding-top: 12px;
}

.social-icons .facebook {
    color: #425f9c !important;
}

.social-icons .twitter {
    color: #00acee !important;
}

.social-icons .google {
    color: #c00 !important;
}

.social-icons .linkedin {
    color: #0073b2 !important;
}

.social-icons .youtube {
    color: #eb3e40 !important;
}

.social-icons .instagram {
    color: #5e8aac !important;
}

.facebook:hover {
    background-color: #425f9c !important;
}

.twitter:hover {
    background-color: #00acee !important;
}

.google:hover {
    background-color: #c00 !important;
}

.linkedin:hover {
    background-color: #0073b2 !important;
}

.youtube:hover {
    background-color: #eb3e40 !important;
}

.instagram:hover {
    background-color: #5e8aac !important;
}

.cpr {
    width: 100%;
    text-align: center;
}

@-webkit-keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@font-face {
    font-family: "rbicon";
    src: url(/static/fonts/main/rbicon.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 600px) {
    .content {
        width: 100%;
    }

    .nav-bg:after {
        width: auto;
    }

    .content.flex-sbs {
        padding: 0;
    }
}

@media (max-width: 1300px) {
    .content {
        width: 100% !important;
    }

    .nav-bg:after {
        width: auto;
    }
}

@media (max-width: 300px) {
    header>.buttons>.start-button {
        padding: 0 !important;
    }
}

@media (min-width: 1301px) {
    .logo-width {
        width: 80% !important;
    }
}

.logo-width {
    width: 100%;
}
.input {
    overflow: inherit !important;
}

.error {
    color: orangered;
}

.green {
    color: green !important;
}
.toast-message{
    color: white !important;
}
.flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
}
#buttonGetGiftCode,#changeInfo{
    display: block;
    margin: 0 auto;
    margin-top: 0.5rem;
    width: 50%;
}