html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
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-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

body {
    line-height: 1;
    color: #222;
    background: #fff
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

a img {
    border: none
}

.no-webp .slot-bg {
    background: url("../images/cont.png") no-repeat -10px -10px;
    width: 492px;
    height: 181px
}

.webp .slot-bg {
    background: url("../images-webp/cont.png") no-repeat -10px -10px;
    width: 492px;
    height: 181px
}

.no-webp .start-text {
    background: url("../images/cont.png") no-repeat -10px -211px;
    width: 387px;
    height: 44px
}

.webp .start-text {
    background: url("../images-webp/cont.png") no-repeat -10px -211px;
    width: 387px;
    height: 44px
}

.no-webp .btn-h {
    background: url("../images/cont.png") no-repeat -10px -275px;
    width: 348px;
    height: 97px
}

.webp .btn-h {
    background: url("../images-webp/cont.png") no-repeat -10px -275px;
    width: 348px;
    height: 97px
}

.no-webp .btn-n {
    background: url("../images/cont.png") no-repeat -10px -392px;
    width: 348px;
    height: 97px
}

.webp .btn-n {
    background: url("../images-webp/cont.png") no-repeat -10px -392px;
    width: 348px;
    height: 97px
}

.no-webp .btn-bg {
    background: url("../images/cont.png") no-repeat -10px -509px;
    width: 348px;
    height: 97px
}

.webp .btn-bg {
    background: url("../images-webp/cont.png") no-repeat -5px -509px;
    width: 348px;
    height: 97px
}

.no-webp .btn-c {
    background: url("../images/cont.png") no-repeat -378px -275px;
    width: 348px;
    height: 97px
}

.webp .btn-c {
    background: url("../images-webp/cont.png") no-repeat -378px -275px;
    width: 348px;
    height: 97px
}

.no-webp .pbtn-n {
    background: url("../images/cont.png") no-repeat -522px -10px;
    width: 333px;
    height: 83px
}

.webp .pbtn-n {
    background: url("../images-webp/cont.png") no-repeat -522px -10px;
    width: 333px;
    height: 83px
}

.no-webp .pbtn-h {
    background: url("../images/cont.png") no-repeat -522px -113px;
    width: 333px;
    height: 83px
}

.webp .pbtn-h {
    background: url("../images-webp/cont.png") no-repeat -522px -113px;
    width: 333px;
    height: 83px
}

.no-webp .pbtn-c {
    background: url("../images/cont.png") no-repeat -378px -392px;
    width: 333px;
    height: 83px
}

.webp .pbtn-c {
    background: url("../images-webp/cont.png") no-repeat -378px -392px;
    width: 333px;
    height: 83px
}

.no-webp .reward-left {
    background: url("../images/cont.png") no-repeat -378px -495px;
    width: 218px;
    height: 171px
}

.webp .reward-left {
    background: url("../images-webp/cont.png") no-repeat -378px -495px;
    width: 218px;
    height: 171px
}

.no-webp .reward-right {
    background: url("../images/cont.png") no-repeat -10px -626px;
    width: 218px;
    height: 171px
}

.webp .reward-right {
    background: url("../images-webp/cont.png") no-repeat -10px -626px;
    width: 218px;
    height: 171px
}

.no-webp .reward-border {
    background: url("../images/cont.png") no-repeat -248px -686px;
    width: 205px;
    height: 57px
}

.webp .reward-border {
    background: url("../images-webp/cont.png") no-repeat -248px -686px;
    width: 205px;
    height: 57px
}

.no-webp .vol-off {
    background: url("../images/cont.png") no-repeat -473px -686px;
    width: 70px;
    height: 60px
}

.webp .vol-off {
    background: url("../images-webp/cont.png") no-repeat -473px -686px;
    width: 70px;
    height: 60px
}

.no-webp .vol-on {
    background: url("../images/cont.png") no-repeat -563px -686px;
    width: 70px;
    height: 60px
}

.webp .vol-on {
    background: url("../images-webp/cont.png") no-repeat -563px -686px;
    width: 70px;
    height: 60px
}

.no-webp .square-bg {
    background: url("../images/elements.png") no-repeat -10px -10px;
    width: 144px;
    height: 123px
}

.webp .square-bg {
    background: url("../images-webp/elements.png") no-repeat -10px -10px;
    width: 144px;
    height: 123px
}

.no-webp .square-glow {
    background: url("../images/elements.png") no-repeat -10px -153px;
    width: 136px;
    height: 115px
}

.webp .square-glow {
    background: url("../images-webp/elements.png") no-repeat -10px -153px;
    width: 136px;
    height: 115px
}

.no-webp .el-bells {
    background: url("../images/elements.png") no-repeat -166px -153px;
    width: 120px;
    height: 80px
}

.webp .el-bells {
    background: url("../images-webp/elements.png") no-repeat -166px -153px;
    width: 120px;
    height: 80px
}

.no-webp .el-cherry {
    background: url("../images/elements.png") no-repeat -174px -10px;
    width: 120px;
    height: 80px
}

.webp .el-cherry {
    background: url("../images-webp/elements.png") no-repeat -174px -10px;
    width: 120px;
    height: 80px
}

.no-webp .el-grape {
    background: url("../images/elements.png") no-repeat -166px -253px;
    width: 120px;
    height: 80px
}

.webp .el-grape {
    background: url("../images-webp/elements.png") no-repeat -166px -253px;
    width: 120px;
    height: 80px
}

.no-webp .el-lemon {
    background: url("../images/elements.png") no-repeat -10px -288px;
    width: 120px;
    height: 80px
}

.webp .el-lemon {
    background: url("../images-webp/elements.png") no-repeat -10px -288px;
    width: 120px;
    height: 80px
}

.no-webp .el-bar {
    background: url("../images/elements.png") no-repeat -306px -110px;
    width: 120px;
    height: 80px
}

.webp .el-bar {
    background: url("../images-webp/elements.png") no-repeat -306px -110px;
    width: 120px;
    height: 80px
}

.no-webp .el-pulm {
    background: url("../images/elements.png") no-repeat -314px -10px;
    width: 120px;
    height: 80px
}

.webp .el-pulm {
    background: url("../images-webp/elements.png") no-repeat -314px -10px;
    width: 120px;
    height: 80px
}

.no-webp .el-watermelon {
    background: url("../images/elements.png") no-repeat -306px -210px;
    width: 120px;
    height: 80px
}

.webp .el-watermelon {
    background: url("../images-webp/elements.png") no-repeat -306px -210px;
    width: 120px;
    height: 80px
}

.no-webp .el-wild {
    background: url("../images/elements.png") no-repeat -306px -310px;
    width: 120px;
    height: 80px
}

.webp .el-wild {
    background: url("../images-webp/elements.png") no-repeat -306px -310px;
    width: 120px;
    height: 80px
}

.no-webp .el-777 {
    background: url("../images/elements.png") no-repeat -150px -353px;
    width: 120px;
    height: 80px
}

.webp .el-777 {
    background: url("../images-webp/elements.png") no-repeat -150px -353px;
    width: 120px;
    height: 80px
}

.no-webp .el-orange {
    background: url("../images/elements.png") no-repeat -10px -388px;
    width: 120px;
    height: 80px
}

.webp .el-orange {
    background: url("../images-webp/elements.png") no-repeat -10px -388px;
    width: 120px;
    height: 80px
}

.no-webp .pay-qiwi {
    background: url("../images/pays.png") no-repeat -10px -10px;
    width: 80px;
    height: 40px
}

.webp .pay-qiwi {
    background: url("../images-webp/pays.png") no-repeat -10px -10px;
    width: 80px;
    height: 40px
}

.no-webp .pay-webmoney {
    background: url("../images/pays.png") no-repeat -10px -70px;
    width: 80px;
    height: 40px
}

.webp .pay-webmoney {
    background: url("../images-webp/pays.png") no-repeat -10px -70px;
    width: 80px;
    height: 40px
}

.no-webp .pay-yandex {
    background: url("../images/pays.png") no-repeat -110px -10px;
    width: 80px;
    height: 40px
}

.webp .pay-yandex {
    background: url("../images-webp/pays.png") no-repeat -110px -10px;
    width: 80px;
    height: 40px
}

.no-webp .pay-visa-el {
    background: url("../images/pays.png") no-repeat -110px -70px;
    width: 64px;
    height: 40px
}

.webp .pay-visa-el {
    background: url("../images-webp/pays.png") no-repeat -110px -70px;
    width: 64px;
    height: 40px
}

.no-webp .pay-visa {
    background: url("../images/pays.png") no-repeat -10px -130px;
    width: 64px;
    height: 40px
}

.webp .pay-visa {
    background: url("../images-webp/pays.png") no-repeat -10px -130px;
    width: 64px;
    height: 40px
}

.no-webp .pay-maestro {
    background: url("../images/pays.png") no-repeat -94px -130px;
    width: 60px;
    height: 40px
}

.webp .pay-maestro {
    background: url("../images-webp/pays.png") no-repeat -94px -130px;
    width: 60px;
    height: 40px
}

.no-webp .pay-mastercard {
    background: url("../images/pays.png") no-repeat -10px -190px;
    width: 60px;
    height: 40px
}

.webp .pay-mastercard {
    background: url("../images-webp/pays.png") no-repeat -10px -190px;
    width: 60px;
    height: 40px
}

.no-webp .popup-window {
    background: url("../images/popup.png") no-repeat -10px -10px;
    width: 590px;
    height: 533px
}

.webp .popup-window {
    background: url("../images-webp/popup.png") no-repeat -10px -10px;
    width: 590px;
    height: 533px
}

.no-webp .logo {
    background: url("../images/popup.png") no-repeat -10px -563px;
    width: 208px;
    height: 67px
}

.webp .logo {
    background: url("../images-webp/popup.png") no-repeat -10px -563px;
    width: 208px;
    height: 67px
}

.squares-container {
    width: 1194px;
    height: 638px;
    background: rgba(0, 1, 34, 0.5);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.square {
    position: absolute;
    width: 144px;
    height: 123px
}

.square-glow,
.el-fruit {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.square-glow {
    opacity: 0
}

#square-1 {
    top: -12px;
    left: -12px
}

#square-2 {
    top: -12px;
    left: 141px
}

#square-3 {
    top: -12px;
    left: 294px
}

#square-4 {
    top: -12px;
    left: 447px
}

#square-5 {
    top: -12px;
    left: 600px
}

#square-6 {
    top: -12px;
    left: 753px
}

#square-7 {
    top: -12px;
    left: 906px
}

#square-8 {
    top: -12px;
    left: 1059px
}

#square-9 {
    top: 122px;
    left: 1059px
}

#square-10 {
    top: 256px;
    left: 1059px
}

#square-11 {
    top: 390px;
    left: 1059px
}

#square-12 {
    top: 524px;
    left: 1059px
}

#square-13 {
    top: 524px;
    left: 906px
}

#square-14 {
    top: 524px;
    left: 753px
}

#square-15 {
    top: 524px;
    left: 600px
}

#square-16 {
    top: 524px;
    left: 447px
}

#square-17 {
    top: 524px;
    left: 294px
}

#square-18 {
    top: 524px;
    left: 141px
}

#square-19 {
    top: 524px;
    left: -12px
}

#square-20 {
    top: 390px;
    left: -12px
}

#square-21 {
    top: 256px;
    left: -12px
}

#square-22 {
    top: 122px;
    left: -12px
}

@media (max-width:725px) {
    #square-1 {
        top: -12px;
        left: -12px
    }

    #square-2 {
        top: -12px;
        left: 141px
    }

    #square-3 {
        top: -12px;
        left: 294px
    }

    #square-4 {
        top: -12px;
        left: 447px
    }

    #square-5 {
        top: -12px;
        left: 600px
    }

    #square-6 {
        top: 122px;
        left: 600px
    }

    #square-7 {
        top: 256px;
        left: 600px
    }

    #square-8 {
        top: 390px;
        left: 600px
    }

    #square-9 {
        top: 524px;
        left: 600px
    }

    #square-10 {
        top: 524px;
        left: 447px
    }

    #square-11 {
        top: 524px;
        left: 294px
    }

    #square-12 {
        top: 524px;
        left: 141px
    }

    #square-13 {
        top: 524px;
        left: -12px
    }

    #square-14 {
        top: 390px;
        left: -12px
    }

    #square-15 {
        top: 256px;
        left: -12px
    }

    #square-16 {
        top: 122px;
        left: -12px
    }

    #square-17 {
        display: none
    }

    #square-18 {
        display: none
    }

    #square-19 {
        display: none
    }

    #square-20 {
        display: none
    }

    #square-21 {
        display: none
    }

    #square-22 {
        display: none
    }

    .squares-container {
        width: 734px
    }
}

.slot-container {
    width: 492px;
    height: 181px;
    position: absolute;
    top: 220px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media (max-width:725px) {
    .slot-container {
        -webkit-transform: translateX(-50%) scale(.9);
        -ms-transform: translateX(-50%) scale(.9);
        transform: translateX(-50%) scale(.9)
    }
}

.slot-mask {
    position: absolute;
    width: 468px;
    height: 158px;
    left: 12px;
    top: 12px;
    overflow: hidden
}

#slot-col-1 {
    position: absolute;
    top: -450px;
    left: 14px
}

#slot-col-2 {
    position: absolute;
    top: -450px;
    left: 174px
}

#slot-col-3 {
    position: absolute;
    top: -450px;
    left: 334px
}

.el-1 {
    position: absolute;
    top: 40px;
    left: 0
}

.el-2 {
    position: absolute;
    top: 190px;
    left: 0
}

.el-3 {
    position: absolute;
    top: 340px;
    left: 0
}

.el-4 {
    position: absolute;
    top: 490px;
    left: 0
}

.col-move {
    -webkit-animation: column-move .3s linear infinite;
    animation: column-move .3s linear infinite
}

.col-stop {
    -webkit-animation: column-stop .5s ease-in-out forwards;
    animation: column-stop .5s ease-in-out forwards
}

@-webkit-keyframes column-move {
    100% {
        -webkit-transform: translateY(450px);
        transform: translateY(450px)
    }
}

@keyframes column-move {
    100% {
        -webkit-transform: translateY(450px);
        transform: translateY(450px)
    }
}

@-webkit-keyframes column-stop {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    20% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes column-stop {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    20% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.popup {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 3, 96, 0.7)
}

.popup-window {
    position: absolute;
    top: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0
}

@media (max-width:550px) {
    .popup-window {
        -webkit-transform: translateX(-50%) scale(.5);
        -ms-transform: translateX(-50%) scale(.5);
        transform: translateX(-50%) scale(.5)
    }
}

.popup-logo {
    top: 30px
}

.popup-btn {
    position: absolute;
    top: 467px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 333px;
    height: 83px;
    cursor: pointer;
    display: block
}

.popup-btn:hover .pbtn-h {
    -webkit-animation: none;
    animation: none;
    opacity: 1
}

.popup-btn:active .pbtn-h {
    -webkit-animation: none;
    animation: none
}

.popup-btn:active .pbtn-c {
    opacity: 1
}

.pbtn-n,
.pbtn-h,
.pbtn-c {
    position: absolute;
    top: 0;
    left: 0
}

.pbtn-h,
.pbtn-c {
    opacity: 0
}

.pbtn-h {
    -webkit-animation: opacity-animation 1s ease-in-out infinite;
    animation: opacity-animation 1s ease-in-out infinite
}

body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #000114 url("../images/bg.jpg") top center no-repeat;
    overflow-x: hidden
}

@media (max-width:1210px),
(max-height:830px) {
    body {
        background-size: 1728px auto
    }
}

@media (max-width:1090px),
(max-height:760px) {
    body {
        background-size: 1536px auto
    }
}

@media (max-width:970px),
(max-height:690px) {
    body {
        background-size: 1344px auto
    }
}

@media (max-width:850px),
(max-height:630px) {
    body {
        background-size: 1152px auto
    }
}

@media (max-width:725px) {
    body {
        background-size: 1440px auto
    }
}

@media (max-width:450px),
(max-height:660px) {
    body {
        background-size: 1248px auto
    }
}

@media (max-width:375px),
(max-height:565px) {
    body {
        background-size: 1056px auto
    }
}

.logo {
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.main-logo {
    top: 20px;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0
}

@media (max-width:375px),
(max-height:565px) {
    .main-logo {
        -webkit-transform: translateX(-50%) scale(.6);
        -ms-transform: translateX(-50%) scale(.6);
        transform: translateX(-50%) scale(.6);
        top: 10px
    }
}

.field-container {
    width: 1000px;
    height: 10px;
    position: absolute;
    top: 110px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0
}

@media (max-width:1210px),
(max-height:830px) {
    .field-container {
        -webkit-transform: translateX(-50%) scale(.9);
        -ms-transform: translateX(-50%) scale(.9);
        transform: translateX(-50%) scale(.9)
    }
}

@media (max-width:1090px),
(max-height:760px) {
    .field-container {
        -webkit-transform: translateX(-50%) scale(.8);
        -ms-transform: translateX(-50%) scale(.8);
        transform: translateX(-50%) scale(.8)
    }
}

@media (max-width:970px),
(max-height:690px) {
    .field-container {
        -webkit-transform: translateX(-50%) scale(.7);
        -ms-transform: translateX(-50%) scale(.7);
        transform: translateX(-50%) scale(.7)
    }
}

@media (max-width:850px),
(max-height:630px) {
    .field-container {
        -webkit-transform: translateX(-50%) scale(.6);
        -ms-transform: translateX(-50%) scale(.6);
        transform: translateX(-50%) scale(.6)
    }
}

@media (max-width:450px),
(max-height:660px) {
    .field-container {
        -webkit-transform: translateX(-50%) scale(.5);
        -ms-transform: translateX(-50%) scale(.5);
        transform: translateX(-50%) scale(.5)
    }
}

@media (max-width:375px),
(max-height:565px) {
    .field-container {
        top: 65px;
        -webkit-transform: translateX(-50%) scale(.42);
        -ms-transform: translateX(-50%) scale(.42);
        transform: translateX(-50%) scale(.42)
    }
}

.rewards-container {
    position: absolute;
    top: 225px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 936px
}

@media (max-width:725px) {
    .rewards-container {
        top: 655px;
        width: 438px;
        -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: translateX(-50%) scale(1.5);
        -ms-transform: translateX(-50%) scale(1.5);
        transform: translateX(-50%) scale(1.5)
    }
}

.reward {
    position: absolute;
    top: 0
}

.reward-left {
    left: 0
}

.reward-right {
    right: 0
}

.reward-border {
    position: absolute;
    top: 0;
    right: 13px;
    opacity: 0
}

.reward-border-animation {
    -webkit-animation: opacity-animation .5s ease-in-out infinite;
    animation: opacity-animation .5s ease-in-out infinite
}

.content-title {
    position: absolute;
    top: 144px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 387px;
    height: 44px
}

.title-animation {
    -webkit-animation: text-animation .75s ease-in-out infinite;
    animation: text-animation .75s ease-in-out infinite
}

.start-text-blink {
    width: 100px;
    height: 50px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(85%, #fff), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 85%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: translateX(-150px) skewX(-25deg);
    -ms-transform: translateX(-150px) skewX(-25deg);
    transform: translateX(-150px) skewX(-25deg)
}

.start-text-blink-animation {
    -webkit-animation: blink-animation 4s 1s ease-out infinite;
    animation: blink-animation 4s 1s ease-out infinite
}

.start-text-mask {
    -webkit-mask-image: url("../images/cont.png");
    mask-image: url("../images/cont.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: -10px -211px;
    mask-position: -10px -211px;
    width: 387px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: overlay
}

.content-btn {
    position: absolute;
    top: 416px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 348px;
    height: 97px;
    cursor: pointer
}

.content-btn:hover .btn-h {
    -webkit-animation: none;
    animation: none;
    opacity: 1
}

.content-btn:active .btn-h {
    -webkit-animation: none;
    animation: none
}

.content-btn:active .btn-c {
    opacity: 1
}

.btn-bg,
.btn-n,
.btn-h,
.btn-c {
    position: absolute;
    top: 0;
    left: 0
}

.btn-h,
.btn-c {
    opacity: 0
}

.btn-h {
    -webkit-animation: opacity-animation 1s ease-in-out infinite;
    animation: opacity-animation 1s ease-in-out infinite
}

.payments {
    position: absolute;
    top: 780px;
    width: 100%;
    text-align: center;
    opacity: .8
}

@media (max-width:1210px),
(max-height:830px) {
    .payments {
        top: 710px
    }
}

@media (max-width:1090px),
(max-height:760px) {
    .payments {
        top: 640px
    }
}

@media (max-width:970px),
(max-height:690px) {
    .payments {
        top: 580px
    }
}

@media (max-width:850px),
(max-height:630px) {
    .payments {
        top: 515px
    }
}

@media (max-width:725px) {
    .payments {
        top: 680px
    }
}

@media (max-width:450px),
(max-height:660px) {
    .payments {
        top: 580px
    }
}

@media (max-width:375px),
(max-height:565px) {
    .payments {
        top: 460px
    }
}

.pay {
    display: inline-block;
    margin: 10px
}

@media (max-width:725px) {
    .pay {
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7);
        margin: -2px
    }
}

.vol {
    display: block;
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

@media (max-width:450px),
(max-height:660px) {
    .vol {
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7);
        top: 10px;
        right: 10px
    }
}

.vol-bg {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #e00;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: .5;
    z-index: -1
}

.vol-bg-1 {
    -webkit-animation: volume-keys 2s ease-out infinite;
    animation: volume-keys 2s ease-out infinite
}

.vol-bg-2 {
    -webkit-animation: volume-keys 2s 1s ease-out infinite;
    animation: volume-keys 2s 1s ease-out infinite
}

@-webkit-keyframes opacity-animation {
    50% {
        opacity: 1
    }
}

@keyframes opacity-animation {
    50% {
        opacity: 1
    }
}

@-webkit-keyframes text-animation {
    50% {
        -webkit-transform: translateX(-50%) scale(.9);
        transform: translateX(-50%) scale(.9)
    }
}

@keyframes text-animation {
    50% {
        -webkit-transform: translateX(-50%) scale(.9);
        transform: translateX(-50%) scale(.9)
    }
}

@-webkit-keyframes blink-animation {
    0% {
        -webkit-transform: translateX(-150px) skewX(-25deg);
        transform: translateX(-150px) skewX(-25deg)
    }

    50% {
        -webkit-transform: translateX(410px) skewX(-25deg);
        transform: translateX(410px) skewX(-25deg)
    }

    100% {
        -webkit-transform: translateX(410px) skewX(-25deg);
        transform: translateX(410px) skewX(-25deg)
    }
}

@keyframes blink-animation {
    0% {
        -webkit-transform: translateX(-150px) skewX(-25deg);
        transform: translateX(-150px) skewX(-25deg)
    }

    50% {
        -webkit-transform: translateX(410px) skewX(-25deg);
        transform: translateX(410px) skewX(-25deg)
    }

    100% {
        -webkit-transform: translateX(410px) skewX(-25deg);
        transform: translateX(410px) skewX(-25deg)
    }
}

@-webkit-keyframes volume-keys {
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 0
    }
}

@keyframes volume-keys {
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 0
    }
}

.button {
       display: inline-block;
    width: 190px;
    height: 62px;
    line-height: 62px;
    /* vertical-align: middle; */
    background-color: #03c203;
    background: -webkit-gradient(linear, left top, right top, from(#03c203), color-stop(50%, #009d00), to(#03c203));
    background: linear-gradient(to right, #03c203 0%, #00bb00 50%, #03c203 100%);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 23px;
    font-weight: 900;
    /* color: inherit; */
    text-transform: uppercase;
    position: absolute;
    top: 354px;
    left: 30%;
    border: none;
    color: #fff;
    padding-left: 38px;
    text-decoration: none;
    border-radius: 6px;
    text-shadow: 3px 3px 0 rgba(0, 131, 1, 0.75);
    -webkit-box-shadow: 0 6px 0 #008301, 0 11px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 0 6px 0 #008301, 0 11px 0 rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.button:active {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-box-shadow: inset 0 0 15px #c1ff03, 0 2px 0 #008301, 0 7px 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 0 15px #c1ff03, 0 2px 0 #008301, 0 7px 0 rgba(0, 0, 0, 0.75);
}
.button:hover {
    -webkit-box-shadow: inset 0 0 15px #c1ff03, 0 6px 0 #008301, 0 11px 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 0 15px #c1ff03, 0 6px 0 #008301, 0 11px 0 rgba(0, 0, 0, 0.75);
}