.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x))
}

.container {
    width: 100%
}

@media(min-width: 576px) {
    .container {
        max-width:540px;
        width: 100%
    }
}

@media(min-width: 768px) {
    .container {
        max-width:720px
    }
}

@media(min-width: 992px) {
    .container {
        max-width:960px
    }
}

@media(min-width: 1200px) {
    .container {
        max-width:1140px
    }
}

:root {
    --size: 140px;
    --radius: calc(var(--size) / 2);
    --thick: 14px;
    --thick-half: calc(var(--thick) / 2);
    --border: var(--thick)
}

@media(min-width: 1600px) {
    :root {
        --size:300px;
        --thick: 18px
    }
}

@media(min-width: 1900px) {
    :root {
        --size:360px;
        --thick: 22px
    }
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

@media(min-width: 1200px) {
    .col-xl-8 {
        flex:0 0 auto;
        width: 66.66666667%
    }
}

#content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

#coin-wrapper {
    padding: 3rem 0 0 0
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.fs-2 {
    font-size: calc(1.325rem+.9vw) !important
}

.text-center {
    text-align: center !important
}

@media(min-width: 1200px) {
    .fs-2 {
        font-size:2rem !important
    }
}

#result {
    visibility: hidden
}

#coin {
    transition: transform 6s cubic-bezier(.2,.2,0,1);
    width: var(--size);
    height: var(--size);
    margin: 0 auto;
    transform-origin: calc(var(--size)/ 2);
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(0) rotateZ(0);
    cursor: pointer
}

.demo #coin {
    transition: transform 150s linear
}

button {
    border-radius: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    -webkit-appearance: button
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.btn-info {
    color: #000;
    background-color: #0dcaf0;
    border-color: #0dcaf0
}

.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem
}

button:not(:disabled) {
    cursor: pointer
}

.btn:hover {
    color: #212529
}

.btn-info:hover {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2
}

#coin>* {
    position: absolute
}

.sides {
    transform-style: preserve-3d;
    left: 0
}

.face {
    font-size: var(--size);
    width: 1em;
    height: 1em;
    border-radius: .5em;
    border: var(--border) solid gray;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcdcdc
}

.heads {
    transform: translateZ(var(--thick-half))
}

.face {
    border: 0
}

.tails {
    transform: rotateY(180deg) translateZ(var(--thick-half))
}

#flip i {
    font-style: normal
}

.side {
    position: absolute;
    width: var(--thick);
    height: var(--edge);
    top: calc((var(--size) - var(--edge))/ 2);
    left: calc((var(--size) - var(--thick))/ 2);
    background: silver;
    border-bottom: 1px solid gray
}

.side:nth-child(1) {
    transform: rotateZ(0) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(2) {
    transform: rotateZ(4deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(3) {
    transform: rotateZ(8deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(4) {
    transform: rotateZ(12deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(5) {
    transform: rotateZ(16deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(6) {
    transform: rotateZ(20deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(7) {
    transform: rotateZ(24deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(8) {
    transform: rotateZ(28deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(9) {
    transform: rotateZ(32deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(10) {
    transform: rotateZ(36deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(11) {
    transform: rotateZ(40deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(12) {
    transform: rotateZ(44deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(13) {
    transform: rotateZ(48deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(14) {
    transform: rotateZ(52deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(15) {
    transform: rotateZ(56deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(16) {
    transform: rotateZ(60deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(17) {
    transform: rotateZ(64deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(18) {
    transform: rotateZ(68deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(19) {
    transform: rotateZ(72deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(20) {
    transform: rotateZ(76deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(21) {
    transform: rotateZ(80deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(22) {
    transform: rotateZ(84deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(23) {
    transform: rotateZ(88deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(24) {
    transform: rotateZ(92deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(25) {
    transform: rotateZ(96deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(26) {
    transform: rotateZ(100deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(27) {
    transform: rotateZ(104deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(28) {
    transform: rotateZ(108deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(29) {
    transform: rotateZ(112deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(30) {
    transform: rotateZ(116deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(31) {
    transform: rotateZ(120deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(32) {
    transform: rotateZ(124deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(33) {
    transform: rotateZ(128deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(34) {
    transform: rotateZ(132deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(35) {
    transform: rotateZ(136deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(36) {
    transform: rotateZ(140deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(37) {
    transform: rotateZ(144deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(38) {
    transform: rotateZ(148deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(39) {
    transform: rotateZ(152deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(40) {
    transform: rotateZ(156deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(41) {
    transform: rotateZ(160deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(42) {
    transform: rotateZ(164deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(43) {
    transform: rotateZ(168deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(44) {
    transform: rotateZ(172deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(45) {
    transform: rotateZ(176deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(46) {
    transform: rotateZ(180deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(47) {
    transform: rotateZ(184deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(48) {
    transform: rotateZ(188deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(49) {
    transform: rotateZ(192deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(50) {
    transform: rotateZ(196deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(51) {
    transform: rotateZ(200deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(52) {
    transform: rotateZ(204deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(53) {
    transform: rotateZ(208deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(54) {
    transform: rotateZ(212deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(55) {
    transform: rotateZ(216deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(56) {
    transform: rotateZ(220deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(57) {
    transform: rotateZ(224deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(58) {
    transform: rotateZ(228deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(59) {
    transform: rotateZ(232deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(60) {
    transform: rotateZ(236deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(61) {
    transform: rotateZ(240deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(62) {
    transform: rotateZ(244deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(63) {
    transform: rotateZ(248deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(64) {
    transform: rotateZ(252deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(65) {
    transform: rotateZ(256deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(66) {
    transform: rotateZ(260deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(67) {
    transform: rotateZ(264deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(68) {
    transform: rotateZ(268deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(69) {
    transform: rotateZ(272deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(70) {
    transform: rotateZ(276deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(71) {
    transform: rotateZ(280deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(72) {
    transform: rotateZ(284deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(73) {
    transform: rotateZ(288deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(74) {
    transform: rotateZ(292deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(75) {
    transform: rotateZ(296deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(76) {
    transform: rotateZ(300deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(77) {
    transform: rotateZ(304deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(78) {
    transform: rotateZ(308deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(79) {
    transform: rotateZ(312deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(80) {
    transform: rotateZ(316deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(81) {
    transform: rotateZ(320deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(82) {
    transform: rotateZ(324deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(83) {
    transform: rotateZ(328deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(84) {
    transform: rotateZ(332deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(85) {
    transform: rotateZ(336deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(86) {
    transform: rotateZ(340deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(87) {
    transform: rotateZ(344deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(88) {
    transform: rotateZ(348deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(89) {
    transform: rotateZ(352deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.side:nth-child(90) {
    transform: rotateZ(356deg) rotateY(90deg) translateX(0) translateY(0) translateZ(var(--edge-radius))
}

.heads i {
    background-image: url(/images/heads.svg)
}

.face i {
    font-size: calc(var(--size) * .7);
    width: 1em;
    height: 1em;
    line-height: 1em;
    font-style: normal
}

.heads i {
    background-image: url(../images/xRUB-heads.png)
}

.face i {
    font-size: var(--size);
    border-radius: calc(var(--size)/ 2);
    background-size: var(--size) var(--size)
}

.tails i {
    background-image: url(../images/xRUB-tails.png)
}

.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center
}

button {
    width: 150px;
    padding: 15px 0;
    border: 0;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer
}

#flip-button {
    background-color: #053469;
    color: #fff
}

.input-roulette {
    width: 95% !important
}

@media screen and (max-width: 430px) {
    button {
        width:90px
    }
}

.select_block {
    padding: 10px !important;
    max-width: 700px
}

.text_big {
    margin: 0 !important
}

#order_form {
    width: 95%
}

@media screen and (max-width: 600px) {
    .select_block,.chest__img_pack {
        width:80%
    }
}

@media screen and (max-width: 450px) {
    .select_block,.chest__img_pack {
        width:85%
    }
}

form p {
    color: #46578a;
    font-weight: bold;
    text-transform: uppercase
}

.container,.item,sub,sup {
    position: relative
}

#iphone,#win2,#winP,[hidden],template {
    display: none
}

.popup,.tooltip_yet_spin {
    box-shadow: 0 4px 9px 4px rgba(0,0,0,.55)
}

.text_big {
    font-size: 1.5em
}

.vis_small {
    display: none
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block
}

audio,canvas,video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

code,kbd,pre,samp {
    font-family: sans-serif;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}

q:after,q:before {
    content: "";
    content: none
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

dl,menu,ol,ul {
    margin: 0;
    padding: 0
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    padding: 0;
    white-space: normal
}

#win,#win2,.close_button,.popup .popup_header .close:hover {
    cursor: pointer
}

.popup .popup_content p,.popup .popup_header,.popup_wrapper.winner .popup_content {
    font-family: sans-serif
}

.table {
    border-collapse: collapse;
    border-spacing: 0;
    height: 100%
}

table td.first {
    width: 60px;
    background: #243c6d
}

.clear {
    clear: both
}

.item {
    margin-bottom: 3px;
    padding: 2px;
    background: #fff;
    min-height: 30vw
}

#spinner {
    width: 29vw;
    margin: auto;
    text-align: initial;
    padding-top: 15px
}

.item .img {
    float: left;
    border: 0 solid #666;
    padding: 1px
}

#iphone,#light,#spin,#spinBG,#win,#win2 {
    position: absolute
}

#spin {
    z-index: 2;
    width: 29vw
}

#light {
    z-index: 2;
    width: 29vw;
    animation: light 1.2s infinite
}

#spinBG {
    z-index: 2;
    top: 2vw;
    left: 2vw;
    width: 88vw
}

#win,#win2 {
    z-index: 8;
    width: 7vw;
    left: 11vw;
    top: 11vw;
    position: relative
}

#iphone {
    z-index: 4;
    top: 15vw;
    left: 10vw;
    width: 72vw
}

@keyframes light {
    0,100% {
        opacity: 0
    }

    60% {
        opacity: 1
    }
}

#win {
    animation: scale .5s infinite;
    animation-direction: alternate
}

@keyframes rotateIn {
    0 {
        transform-origin: center;
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    100% {
        transform-origin: center;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.spinAround,.spinAround2 {
    animation-duration: 6.6s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1
}

@keyframes scale {
    0 {
        transform: scale(1)
    }

    100% {
        transform: scale(1.1)
    }
}

.spinAround {
    animation-name: spin
}

@keyframes spin {
    0 {
        transform: rotate(0)
    }

    80% {
        transform: rotate(4740deg)
    }

    95% {
        transform: rotate(4738deg)
    }

    100% {
        transform: rotate(4739deg)
    }
}

.spinAround2 {
    animation-name: spin2
}

@keyframes spin2 {
    0 {
        transform: rotate(4739deg)
    }

    90% {
        transform: rotate(7456deg)
    }

    95% {
        transform: rotate(7454deg)
    }

    100% {
        transform: rotate(7453deg)
    }
}

.show {
    opacity: 1 !important;
    display: block !important
}

.show-flex-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: 1 !important
}

.popup_wrapper {
    background: rgba(0,0,0,.5);
    height: 100%;
    opacity: 0;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;
    display: none
}

.popup {
    width: 467px;
    border-radius: 9px;
    position: relative;
    margin: 12vw auto 0;
    z-index: 4
}

.popup .popup_header {
    font-size: 23px;
    color: #fffefe;
    background: #46578a;
    padding: 16px 0;
    position: relative;
    z-index: 1;
    font-weight: 700;
    text-transform: uppercase;
    font-family: sans-serif
}

.popup .popup_header .close {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 4;
    top: 10px;
    right: 12px;
    display: block
}

.popup .popup_content {
    background: #fff;
    text-align: center;
    position: relative;
    padding: 25px 17px;
    border-bottom: 1px solid #f2f2f2
}

.popup .popup_content p {
    font-size: 19px;
    color: #000;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
    font-family: sans-serif
}

.popup.welcome p span {
    color: #e9946f;
    display: block;
    padding: 12px 0
}

.popup_wrapper.winner .popup_content {
    font-size: 16px;
    color: #888787
}

.popup_wrapper.winner .popup_content img {
    max-width: 100%
}

.close_button,.select_block,.select_block h2,.tooltip_yet_spin {
    color: #fff;
    font-family: sans-serif
}

.popup_wrapper.winner .popup_content span {
    font-weight: 700;
    display: block;
    padding-bottom: 10px;
    font-family: sans-serif;
    font-size: 18px
}

.popup_wrapper.winner .popup_content p {
    line-height: 22px
}

.popup_button {
    width: 100%;
    text-align: center;
    background: #fff
}

.my_button {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    padding: 10px 23px;
    background: #58cd52;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
    font-family: sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff
}

.close_button:hover {
    background: #5edb58
}

.tooltip_yet_spin {
    background: #3b5998;
    font-size: 18px;
    line-height: 26px;
    padding: 20px;
    width: 245px;
    text-align: left;
    border-radius: 10px;
    position: relative;
    cursor: pointer
}

@media screen and (max-width: 460px) {
    .vis_small {
        display:block;
        padding-top: 260px
    }

    .text_big {
        font-size: 16px
    }

    .tooltip_yet_spin {
        width: 185px !important;
        padding: 14px !important
    }

    .select_block {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px !important;
        line-height: 18px !important
    }

    .select_block h2 {
        font-size: 16px !important;
        line-height: 20px !important
    }

    .top_block h1 {
        font-size: 20px !important;
        line-height: 23px !important
    }

    .top_block p {
        font-size: 16px !important;
        line-height: 20px
    }

    .top_block p span {
        padding: 0 15px
    }

    .chest__title {
        margin: 0 !important
    }

    .chest__subtitle {
        margin: 5px 0 5px !important
    }

    .text_big {
        margin: 5px 0 !important
    }
}

@media screen and (max-width: 360px) {
    .select_block,.chest__img_pack {
        width:100%;
        padding: 23px !important
    }

    .tooltip_yet_spin {
        width: 220px !important
    }

    .popup {
        width: 100% !important
    }

    .popup_header {
        text-align: left !important;
        padding-left: 15px !important
    }
}

@media screen and (max-width: 780px) {
    .text_big {
        font-size:16px
    }
}

@media screen and (max-width: 760px) {
    .text_big {
        font-size:16px
    }

    .popup {
        width: 80% !important
    }
}

.select_block {
    padding: 10px 10px 0;
    margin: 0 auto;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    border: 5px solid #d8575c;
    border-radius: 4px
}

.select_block h2 {
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    margin: 0 0 10px
}

.top_block {
    font-family: sans-serif;
    margin: 3px 0 3px;
    margin-top: 20px
}

.top_block h1 {
    font-weight: 700;
    font-size: 25px;
    font-family: sans-serif;
    margin: 0;
    line-height: 30px;
    text-align: center
}

.top_block p {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-family: sans-serif;
    text-align: center
}

.top_block p span {
    font-weight: 700;
    display: block
}

@media(max-width: 1144px) {
    #spinner,#spin,#light {
        width:33vw
    }

    #win,#win2 {
        left: 13vw;
        top: 13vw
    }

    .item {
        min-height: 350px
    }
}

@media(max-width: 768px) {
    .text_big {
        font-size:16px
    }

    #spinner,#spin,#light {
        width: 41vw
    }

    #win,#win2 {
        left: 15vw;
        top: 15vw;
        width: 11vw
    }

    .item {
        min-height: 350px
    }
}

@media(max-width: 480px) {
    #spinner,#spin,#light {
        width:90%
    }

    #win,#win2 {
        left: 38%;
        top: 31vw;
        width: 20vw
    }

    .item {
        min-height: 440px
    }

    .my_button {
        font-size: 17px
    }

    .popup_wrapper.winner .popup_content {
        padding: 500px 500px
    }

    .popup .popup_header {
        padding-top: 5px;
        padding-bottom: 5px
    }

    form p {
        margin-top: 0
    }
}

@media(max-width: 420px) {
    .text_big {
        font-size:16px
    }

    .item {
        min-height: 350px
    }

    #win,#win2 {
        top: 140px;
        left: 40%
    }
}

@media(max-width: 375px) {
    .text_big {
        font-size:16px
    }

    .item {
        min-height: 350px
    }

    #win,#win2 {
        top: 123px;
        left: 40%
    }
}

@media(max-width: 365px) {
    .text_big {
        font-size:16px
    }

    .item {
        min-height: 350px
    }

    #win,#win2 {
        left: 43%
    }
}

@media(max-width: 325px) {
    .text_big {
        font-size:16px
    }

    .item {
        min-height: 350px
    }

    #win,#win2 {
        top: 110px;
        left: 44%
    }
}

.myblock1 {
    font-family: sans-serif;
    color: rgba(255,32,0,.78);
    padding: 10px 7px 10px 7px;
    font-size: 21px;
    max-width: 421px;
    width: auto;
    margin: 0 auto;
    border: 1px dashed rgba(241,70,45,.85);
    font-weight: 500;
    top: 20px;
    display: -webkit-inline-box;
    margin-top: 0;
    border-radius: 3px;
    text-shadow: 0 0 0 #cecece
}

.my_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    padding: 25px 0;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
    box-shadow: 0 0 10px rgba(0,0,0,.5)
}

.submit-roulette {
    margin-top: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto
}

.text_popup {
    background-color: #369;
    font-family: sans-serif;
    font-size: 23px;
    color: #fff;
    padding: 20px 5px;
    box-sizing: border-box;
    width: 100%
}

button,.m4l_button {
    cursor: pointer;
    color: #fff;
    background-color: #2c9e76;
    border: 1px solid #167755;
    text-transform: uppercase
}

button:hover,.m4l_button:hover {
    background-color: #7dcfb2
}

input[placeholder],select[placeholder] {
    color: #000
}

@media screen and (max-width: 650px) {
    input,button,.m4l_button,select {
        width:280px
    }
}

@media screen and (max-width: 340px) {
    input,button,.m4l_button,select {
        width:95%;
        font-size: 1.3em
    }

    .text_popup {
        font-size: 1.5em
    }
}

#order_form input {
    display: flex;
    justify-content: center
}

#order_form #input-name,#order_form #input-phone,#order_form #input-country, .country_select {
    display: inline-block;
    outline: 0;
    padding: 10px 0;
    max-width: 285px;
    width: 97%;
    font-size: 16px;
    font-family: sans-serif;
    border-radius: 50px !important;
    margin-top: 1em;
    box-sizing: border-box;
    height: 52px;
    background-color: transparent;
    line-height: 22px
}

#order_form #input-name[placeholder],#order_form #input-phone[placeholder],#order_form #input-country, .country_select {
    color: #000
}

.saleBox {
    max-width: 350px;
    width: 100%
}

@media(max-width: 360px) {
    .saleBox {
        max-width:276px
    }
}

.prodImg {
    width: 75%
}

.select_block .select_block__title {
    color: #000
}

.text_big {
    color: #d8575c;
    font-weight: 600
}

@media(max-width: 360px) {
    #order_form #input-name,#order_form #input-phone,#order_form #input-country, .country_select {
        font-size:16px
    }
}

.chest__rotate {
    perspective: 2000px;
    width: 200px;
    height: 200px;
    position: absolute
}

.back {
    transform: rotateY(180deg)
}

.front,.back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

.front {
    animation: front-rotation 1s infinite
}

.back {
    animation: back-rotation 1s infinite
}

@keyframes front-rotation {
    from {
        transform: rotateY(0)
    }

    to {
        transform: rotateY(360deg)
    }
}

@keyframes back-rotation {
    from {
        transform: rotateY(180deg)
    }

    to {
        transform: rotateY(540deg)
    }
}

.chest__title,.chest__subtitle {
    text-align: center
}

.chest__title {
    font-size: 24px;
    margin-bottom: 0
}

.chest__subtitle {
    font-size: 18px;
    line-height: 20px
}

.chest__img_pack {
    box-sizing: border-box;
    max-width: 700px;
    width: 100%;
    margin: 10px auto 0;
    border: 3px solid #ffd700;
    border-radius: .5em;
    box-shadow: 1px 1px 4px 1px grey;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.chest__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.chest__button button {
    position: absolute;
    width: 90px;
    height: 90px;
    background: #fcf20d;
    color: #000;
    text-transform: uppercase;
    outline: 0;
    border-radius: 50%;
    font-size: 16px;
    border: #fcf20d;
    cursor: pointer;
    animation: radial-pulse 1s infinite
}

@keyframes radial-pulse {
    0 {
        box-shadow: 0 0 0 0 rgba(0,0,0,.5)
    }

    100% {
        box-shadow: 0 0 0 40px rgba(0,0,0,0)
    }
}

.chest__img {
    width: 100%;
    max-width: 350px;
    margin-top: 1em
}

.chest__img--dinamic,.chest__coins,.chest__order,.chest__consult {
    display: none
}

.chest__img--opened {
    opacity: .5
}

.chest__coins {
    align-items: center;
    justify-content: center;
    position: relative
}

.chest__coin {
    background-image: url(../images/coin2.png);
    background-position: center center;
    background-size: contain;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    text-shadow: 1px 1px #ffd700;
    cursor: pointer
}

.chest__product {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1em
}

.chest__order,.chest__consult {
    flex-direction: column;
    align-items: center;
    text-align: center
}

.my_form {
    width: 100%
}

.submit-roulette {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto
}

.input-roulette::placeholder {
    font-size: .9em;
    color: #666
}

.input-roulette {
    border: 1px solid #000;
    border-radius: 5px;
    text-indent: 20px;
    color: #767272
}

.submit-roulette {
    display: inline-block !important;
    cursor: pointer;
    color: #fff;
    background-color: #2c9e76;
    border: 1px solid #167755;
    text-transform: uppercase;
    max-width: 285px;
    width: 97%;
    font-size: 19px;
    height: 54px
}