.card-linear,
body {
    -webkit-box-sizing: border-box
}

.count-wrap li,
.count-wrap-hero li {
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 700
}

.percent-bar,
.wrapper {
    white-space: nowrap;
    overflow: hidden
}

body {
    background: url('../img/bg-pattern.svg') 0 0/100vw 100vh no-repeat fixed #434558;
    box-sizing: border-box;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}

* {
    scroll-behavior: smooth
}

* ::-webkit-scrollbar {
    width: 2px;
    background-color: #000
}

* ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #fff
}

.bg-light-blue,
.element {
    background-color: rgba(0, 174, 239, .2)
}

.title-hero {
    font-size: 72px;
    line-height: 72px;
    font-weight: 700
}

.text-total-prize {
    font-size: 72px;
    font-weight: 700
}

.font-14 {
    font-size: 14px!important
}

.font-18 {
    font-size: 18px!important
}

.element {
    -webkit-box-shadow: 0 8px 32px 0 rgba(223, 223, 223, .37);
    box-shadow: 0 8px 32px 0 rgba(223, 223, 223, .37);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18)
}

.div-text .btn-linear::before,
.div-text .btn-outline-custom::before,
.wrap-hompage .btn-homepage::before {
    opacity: 1;
    border-radius: 4px;
    right: 0;
    content: "";
    left: 0
}

.div-text,
.wrap-hompage {
    position: relative;
    overflow: hidden;
    padding: 5px
}

.div-text .btn-outline-custom,
.wrap-hompage .btn-homepage {
    position: relative;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: .5s;
    transition: .5s;
    letter-spacing: 4px;
    overflow: hidden;
    z-index: 99;
    -webkit-animation: 1s linear infinite animate;
    animation: 1s linear infinite animate
}

.div-text .btn-outline-custom::before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(45deg, #4ec959, #35af3f, #3bc347, #35af3f, #4ec959);
    background-size: 400%;
    color: #fff;
    -webkit-animation: 5s linear infinite animate;
    animation: 5s linear infinite animate;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

@-webkit-keyframes animate {
    0% {
        background-position: 0
    }
    100% {
        background-position: 400%
    }
}

.div-text .btn-linear:hover,
.div-text .btn-outline-custom:hover,
.wrap-hompage .btn-homepage:hover {
    color: #050801
}

.div-text .btn-linear {
    position: relative;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
    -webkit-animation: 1s linear infinite animates;
    animation: 1s linear infinite animates
}

.div-text .btn-linear::before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(45deg, #fc532d, #fc752d, #fc982d, #fc532d, #fc752d);
    background-size: 400%;
    color: #fff;
    -webkit-animation: 5s linear infinite animates;
    animation: 5s linear infinite animates;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

@-webkit-keyframes animates {
    0% {
        background-position: 0
    }
    100% {
        background-position: 400%
    }
}

.div-text span,
.wrap-hompage span {
    position: absolute;
    display: block
}

.count-wrap li,
.count-wrap-hero li,
.random-token li,
.shine,
.social-icons a,
.social-icons li {
    display: inline-block
}

.div-text span:first-child {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#3bc347));
    background: linear-gradient(90deg, transparent, #3bc347);
    -webkit-animation: 1s linear infinite animate1;
    animation: 1s linear infinite animate1
}

@-webkit-keyframes animate1 {
    0% {
        left: -100%
    }
    100%,
    50% {
        left: 100%
    }
}

.div-text span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#3bc347));
    background: linear-gradient(180deg, transparent, #3bc347);
    -webkit-animation: 1s linear .25s infinite animate2;
    animation: 1s linear .25s infinite animate2
}

@-webkit-keyframes animate2 {
    0% {
        top: -100%
    }
    100%,
    50% {
        top: 100%
    }
}

.div-text span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(transparent), to(#3bc347));
    background: linear-gradient(270deg, transparent, #3bc347);
    -webkit-animation: 1s linear .5s infinite animate3;
    animation: 1s linear .5s infinite animate3
}

@-webkit-keyframes animate3 {
    0% {
        right: -100%
    }
    100%,
    50% {
        right: 100%
    }
}

.div-text span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#3bc347));
    background: linear-gradient(360deg, transparent, #3bc347);
    -webkit-animation: 1s linear .75s infinite animate4;
    animation: 1s linear .75s infinite animate4
}

@-webkit-keyframes animate4 {
    0% {
        bottom: -100%
    }
    100%,
    50% {
        bottom: 100%
    }
}

.wrap-hompage .btn-homepage::before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: 0 0/400% #fc642d;
    color: #fff;
    -webkit-animation: 5s linear infinite animate;
    animation: 5s linear infinite animate;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

.wrap-hompage span:first-child {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#fff));
    background: linear-gradient(90deg, transparent, #fff);
    -webkit-animation: 1s linear infinite animate1;
    animation: 1s linear infinite animate1
}

@keyframes animate1 {
    0% {
        left: -100%
    }
    100%,
    50% {
        left: 100%
    }
}

.wrap-hompage span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
    background: linear-gradient(180deg, transparent, #fff);
    -webkit-animation: 1s linear .25s infinite animate2;
    animation: 1s linear .25s infinite animate2
}

@keyframes animate2 {
    0% {
        top: -100%
    }
    100%,
    50% {
        top: 100%
    }
}

.wrap-hompage span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(transparent), to(#fff));
    background: linear-gradient(270deg, transparent, #fff);
    -webkit-animation: 1s linear .5s infinite animate3;
    animation: 1s linear .5s infinite animate3
}

@keyframes animate3 {
    0% {
        right: -100%
    }
    100%,
    50% {
        right: 100%
    }
}

.wrap-hompage span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#fff));
    background: linear-gradient(360deg, transparent, #fff);
    -webkit-animation: 1s linear .75s infinite animate4;
    animation: 1s linear .75s infinite animate4
}

@keyframes animate4 {
    0% {
        bottom: -100%
    }
    100%,
    50% {
        bottom: 100%
    }
}

.blue {
    color: #0086ff!important
}

.light-blue {
    color: #00aeef!important
}

.content .nav-pills .nav-link.active,
.purple {
    color: #662d91
}

.bg-light-blue-solid {
    background: #00aeef
}

.bg-purple,
.content .nav-pills .nav-link.active {
    background-color: rgba(102, 45, 145, .2)
}

.border-light-blue {
    border: 1px solid #00aeef
}

.border-lightblue2 {
    border: 2px solid #00aeef
}

.border-left-lightblue5 {
    border-left: 5px solid #0af
}

.border-left-yellow5 {
    border-left: 5px solid #ffb708
}

.border-left-green5 {
    border-left: 5px solid #01a69a
}

.border-left-orange5 {
    border-left: 5px solid #fc642d
}

.border-right-red20 {
    border-right: 20px solid #ff033e
}

.border-purple {
    border: 1px solid #662d91
}

.border-purple2 {
    border: 2px solid #662d91
}

.bg-purple-solid {
    background-color: #662d91
}

.brown {
    color: #3f0711
}

.border-brown {
    border: 1px solid #3f0711
}

.border-brown2 {
    border: 2px solid #3f0711
}

.orange {
    color: #fc642d
}

.bg-orange {
    background-color: rgba(252, 100, 45, .2)
}

.bg-orange-solid {
    background: #fc642d
}

.border-orange {
    border: 1px solid #fc642d
}

.border-orange2 {
    border: 2px solid #fc642d
}

.yellow {
    color: #ffb708
}

.yellow:hover {
    color: #ffb708!important
}

.bg-yellow2 {
    background-color: rgba(255, 183, 8, .2)
}

.border-yellow2 {
    border: 2px solid #ffb708
}

.red {
    color: #d31925
}

.bg-red {
    background-color: rgba(211, 25, 37, .2)
}

.border-red {
    border: 1px solid #d31925
}

.border-red2 {
    border: 2px solid #d31925
}

.green {
    color: #01a69a
}

.bg-green {
    background-color: rgba(1, 166, 154, .2)
}

.bg-green-solid {
    background-color: #01a69a
}

.border-green {
    border: 1px solid #01a69a
}

.border-green2 {
    border: 2px solid #01a69a
}

.border-white {
    border: 1px solid #fff
}

.bg-white-02 {
    background-color: rgba(255, 255, 255, .2)
}

.bg-yellow {
    background: linear-gradient(45deg, #fc532d, #fc752d)
}

.card-img-video-custom {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.card-header-custom {
    border-radius: 20px 20px 0 0
}

.card-focus::after,
.card-focus::before {
    content: '';
    width: 30%;
    border: 8px solid #ac1f40;
    right: 0;
    position: absolute
}

.card-focus::after {
    bottom: 0
}

.card-focus::before {
    top: 0
}

.line-height-24 {
    line-height: 24px!important
}

.line-height-34 {
    line-height: 34px!important
}

.circle-logo,
.countdown.flip-clock-wrapper ul li {
    line-height: 50px
}

.shine {
    background: 0 0/100% 100% no-repeat #f6f7f8;
    background-image: -webkit-gradient(linear, left top, right top, from(#f6f7f8), color-stop(20%, #edeef1), color-stop(40%, #f6f7f8), to(#f6f7f8));
    background-image: linear-gradient(to right, #f6f7f8 0, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    position: relative;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeholderShimmer;
    -webkit-animation-timing-function: linear
}

@-webkit-keyframes placeholderShimmer {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

.font-weight-6 {
    font-weight: 600!important
}

.btn-light {
    background: linear-gradient(to bottom, #94d402 0, #507301 100%);
    color: #fff;
    box-shadow: #94d402 0 0 5px 0;
    padding: 8px 12px
}

.btn-light:hover {
    box-shadow: #94d402 0 0 20px 0
}

.btn-outline-light {
    background: linear-gradient(to bottom, rgb(21 129 157) 0, #0a5568 100%);
    color: #fff;
    padding: 8px 12px;
    box-shadow: rgb(17 113 137) 0 0 5px 0;
    box-shadow: rgb(17 113 137) 0 0 20px 0
}

.btn-light-blue {
    background-color: #00aeef;
    color: #fff
}

.btn-light-blue:hover {
    color: #fff;
    background: #0089bc
}

.btn-purple {
    background-color: #662d91;
    color: #fff
}

.btn-purple:hover {
    color: #fff;
    background: #4b216a
}

.btn-orange {
    background-color: #fc642d;
    color: #fff
}

.btn-orange:hover {
    color: #fff;
    background: #f34303
}

.btn-green {
    background-color: #01a69a;
    color: #fff
}

.btn-green-outline:hover,
.btn-green:hover {
    color: #fff;
    background: #01736b
}

.btn-green-outline {
    border: 2px solid #01a69a;
    color: #01a69a
}

.btn-white-outline {
    border: 2px solid #fff;
    color: #fff
}

.btn-white-outline:hover {
    color: #333;
    background: #e6e6e6
}

.btn-red {
    background-color: #ac1f40;
    color: #fff
}

.btn-red:hover {
    color: #fff;
    background: #811730
}

.border-radius-10 {
    border-radius: 10px!important
}

.border-radius-20 {
    border-radius: 20px!important
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    33% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    33% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

.btn-pulse .btn-danger-custom {
    color: #ac1f40;
    -webkit-transition: background .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    transition: background .3s, transform .3s, box-shadow .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    will-change: transform;
    border: 2px solid #ac1f40
}

.btn-pulse .btn-danger-custom:hover {
    -webkit-box-shadow: 0 4px 17px rgba(0, 0, 0, .2);
    box-shadow: 0 4px 17px rgba(0, 0, 0, .2);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0)
}

.btn-pulse .btn-danger-custom:active {
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0)
}

.btn-pulse .pulse,
.wrap-pulse .pulse {
    position: relative;
    overflow: hidden
}

.btn-pulse .pulse:after,
.btn-pulse .pulse:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(251, 30, 68, .3);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    opacity: 0;
    margin: auto
}

.wrap-pulse .pulse1:after,
.wrap-pulse .pulse1:before,
.wrap-pulse .pulse:after,
.wrap-pulse .pulse:before {
    top: 0;
    right: 0;
    background-color: rgba(251, 30, 68, .1);
    border-radius: 50%;
    margin: auto;
    left: 0;
    content: "";
    bottom: 0;
    opacity: 0
}

.btn-pulse .pulse:before {
    -webkit-animation: 5.5s linear infinite pulse;
    animation: 5.5s linear infinite pulse
}

.btn-pulse .pulse:after {
    -webkit-animation: 2s linear .4s infinite pulse;
    animation: 2s linear .4s infinite pulse
}

.btn-pulse .pulse:hover:after,
.btn-pulse .pulse:hover:before,
.content-countdown,
.wrap-pulse .pulse1:hover:after,
.wrap-pulse .pulse1:hover:before,
.wrap-pulse .pulse:hover:after,
.wrap-pulse .pulse:hover:before {
    display: none
}

.wrap-pulse {
    position: relative;
    -webkit-transition: background .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    transition: background .3s, transform .3s, box-shadow .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    will-change: transform
}

@-webkit-keyframes pulse-ampau {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    33% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@keyframes pulse-ampau {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    33% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

.wrap-pulse .pulse:after,
.wrap-pulse .pulse:before {
    position: absolute;
    width: 250px;
    height: 250px
}

.wrap-pulse .pulse1:before,
.wrap-pulse .pulse:before {
    -webkit-animation: 6.5s linear infinite pulse-ampau;
    animation: 6.5s linear infinite pulse-ampau
}

.wrap-pulse .pulse1:after,
.wrap-pulse .pulse:after {
    -webkit-animation: 2s linear .4s infinite pulse-ampau;
    animation: 2s linear .4s infinite pulse-ampau
}

.hover-btn:hover~.img-zoom,
.wrap-pulse .pulse1 {
    position: relative
}

.wrap-pulse .pulse1:after,
.wrap-pulse .pulse1:before {
    position: absolute;
    width: 130px;
    height: 130px
}

.muncul {
    background: rgba(255, 255, 255, .35);
    -webkit-box-shadow: 0 -16px 32px 0 rgba(0, 0, 0, .37);
    box-shadow: 0 -16px 32px 0 rgba(0, 0, 0, .37);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .18)
}

.img-prize {
    height: 120%;
    bottom: -20%;
    right: -18%
}

.stars {
    position: absolute;
    width: 100%;
    height: 120%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    overflow: hidden
}

.star {
    --star-color: var(--primary-color);
    --star-tail-length: 6em;
    --star-tail-height: 2px;
    --star-width: calc(var(--star-tail-length) / 6);
    --fall-duration: 9s;
    --tail-fade-duration: var(--fall-duration);
    position: absolute;
    top: var(--top-offset);
    left: 0;
    width: var(--star-tail-length);
    height: var(--star-tail-height);
    color: #ffb708;
    background: linear-gradient(45deg, currentColor, transparent);
    border-radius: 50%;
    -webkit-filter: drop-shadow(0 0 6px currentColor);
    filter: drop-shadow(0 0 6px currentColor);
    -webkit-transform: translate3d(104em, 0, 0);
    transform: translate3d(104em, 0, 0);
    -webkit-animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite
}

.btn-linear-bluelight,
.card-linear {
    color: #fff;
    background-size: 400%;
    z-index: 1;
    text-align: center
}

@media screen and (max-width:750px) {
    .star {
        -webkit-animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
        animation: fall var(--fall-duration) var(--fall-delay) linear infinite
    }
}

.star:first-child {
    --star-tail-length: 6.44em;
    --top-offset: 67.66vh;
    --fall-duration: 7.587s;
    --fall-delay: 2.086s
}

.star:nth-child(2) {
    --star-tail-length: 5.01em;
    --top-offset: 78.01vh;
    --fall-duration: 10.071s;
    --fall-delay: 3.285s
}

.star:nth-child(3) {
    --star-tail-length: 7.06em;
    --top-offset: 27.44vh;
    --fall-duration: 11.244s;
    --fall-delay: 0.375s
}

.star:nth-child(4) {
    --star-tail-length: 5.24em;
    --top-offset: 81.73vh;
    --fall-duration: 6.422s;
    --fall-delay: 5.208s
}

.star:nth-child(5) {
    --star-tail-length: 6.19em;
    --top-offset: 8.96vh;
    --fall-duration: 10.806s;
    --fall-delay: 9.043s
}

.star:nth-child(6) {
    --star-tail-length: 7.24em;
    --top-offset: 48.26vh;
    --fall-duration: 6.534s;
    --fall-delay: 1.407s
}

.star:nth-child(7) {
    --star-tail-length: 5.44em;
    --top-offset: 16.59vh;
    --fall-duration: 11.217s;
    --fall-delay: 0.626s
}

.star:nth-child(8) {
    --star-tail-length: 6.82em;
    --top-offset: 58.51vh;
    --fall-duration: 9.704s;
    --fall-delay: 0.828s
}

.star:nth-child(9) {
    --star-tail-length: 6.27em;
    --top-offset: 12.82vh;
    --fall-duration: 10.633s;
    --fall-delay: 2.335s
}

.star:nth-child(10) {
    --star-tail-length: 6.87em;
    --top-offset: 15.14vh;
    --fall-duration: 8.428s;
    --fall-delay: 2.502s
}

.star:nth-child(11) {
    --star-tail-length: 5.98em;
    --top-offset: 95.51vh;
    --fall-duration: 10.12s;
    --fall-delay: 1.429s
}

.star:nth-child(12) {
    --star-tail-length: 6.24em;
    --top-offset: 95.16vh;
    --fall-duration: 10.927s;
    --fall-delay: 1.031s
}

.star:nth-child(13) {
    --star-tail-length: 6.63em;
    --top-offset: 55.86vh;
    --fall-duration: 9.881s;
    --fall-delay: 2.325s
}

.star:nth-child(14) {
    --star-tail-length: 6.33em;
    --top-offset: 36.44vh;
    --fall-duration: 11.012s;
    --fall-delay: 1.745s
}

.star:nth-child(15) {
    --star-tail-length: 5.36em;
    --top-offset: 88.3vh;
    --fall-duration: 10.513s;
    --fall-delay: 9.045s
}

.star:nth-child(16) {
    --star-tail-length: 6.92em;
    --top-offset: 13.87vh;
    --fall-duration: 8.742s;
    --fall-delay: 7.32s
}

.star:nth-child(17) {
    --star-tail-length: 5.81em;
    --top-offset: 0.66vh;
    --fall-duration: 7.284s;
    --fall-delay: 3.965s
}

.star:nth-child(18) {
    --star-tail-length: 7.03em;
    --top-offset: 11.36vh;
    --fall-duration: 6.879s;
    --fall-delay: 1.179s
}

.star:nth-child(19) {
    --star-tail-length: 7.5em;
    --top-offset: 37.17vh;
    --fall-duration: 8.876s;
    --fall-delay: 8.759s
}

.star:nth-child(20) {
    --star-tail-length: 7.22em;
    --top-offset: 49.58vh;
    --fall-duration: 7.706s;
    --fall-delay: 3.694s
}

.star:nth-child(21) {
    --star-tail-length: 5.74em;
    --top-offset: 7.34vh;
    --fall-duration: 8.734s;
    --fall-delay: 5.834s
}

.star:nth-child(22) {
    --star-tail-length: 6.39em;
    --top-offset: 71.9vh;
    --fall-duration: 9.981s;
    --fall-delay: 4.177s
}

.star:nth-child(23) {
    --star-tail-length: 5.35em;
    --top-offset: 60.84vh;
    --fall-duration: 7.444s;
    --fall-delay: 5.25s
}

.star:nth-child(24) {
    --star-tail-length: 6.28em;
    --top-offset: 78.65vh;
    --fall-duration: 6.774s;
    --fall-delay: 3.693s
}

.star:nth-child(25) {
    --star-tail-length: 5.7em;
    --top-offset: 33.77vh;
    --fall-duration: 8.707s;
    --fall-delay: 5.42s
}

.star:nth-child(26) {
    --star-tail-length: 6.1em;
    --top-offset: 53.71vh;
    --fall-duration: 10.779s;
    --fall-delay: 5.541s
}

.star:nth-child(27) {
    --star-tail-length: 5.47em;
    --top-offset: 17.59vh;
    --fall-duration: 10.854s;
    --fall-delay: 2.041s
}

.star:nth-child(28) {
    --star-tail-length: 5.32em;
    --top-offset: 5.81vh;
    --fall-duration: 7.877s;
    --fall-delay: 9.578s
}

.star:nth-child(29) {
    --star-tail-length: 5.41em;
    --top-offset: 2.8vh;
    --fall-duration: 8.668s;
    --fall-delay: 3.007s
}

.star:nth-child(30) {
    --star-tail-length: 7.11em;
    --top-offset: 0.69vh;
    --fall-duration: 11.736s;
    --fall-delay: 9.723s
}

.star:nth-child(31) {
    --star-tail-length: 6.84em;
    --top-offset: 66.65vh;
    --fall-duration: 8.653s;
    --fall-delay: 4.647s
}

.star:nth-child(32) {
    --star-tail-length: 5.45em;
    --top-offset: 87.51vh;
    --fall-duration: 10.465s;
    --fall-delay: 9.327s
}

.star:nth-child(33) {
    --star-tail-length: 5.43em;
    --top-offset: 80.67vh;
    --fall-duration: 9.074s;
    --fall-delay: 9.76s
}

.star:nth-child(34) {
    --star-tail-length: 6.43em;
    --top-offset: 44.78vh;
    --fall-duration: 8.262s;
    --fall-delay: 9.284s
}

.star:nth-child(35) {
    --star-tail-length: 6.26em;
    --top-offset: 89.64vh;
    --fall-duration: 7.433s;
    --fall-delay: 2.841s
}

.star:nth-child(36) {
    --star-tail-length: 5.75em;
    --top-offset: 15.08vh;
    --fall-duration: 7.231s;
    --fall-delay: 4.457s
}

.star:nth-child(37) {
    --star-tail-length: 6.06em;
    --top-offset: 13.38vh;
    --fall-duration: 7.741s;
    --fall-delay: 4.484s
}

.star:nth-child(38) {
    --star-tail-length: 5.26em;
    --top-offset: 60.4vh;
    --fall-duration: 7.575s;
    --fall-delay: 4.151s
}

.star:nth-child(39) {
    --star-tail-length: 7.31em;
    --top-offset: 40.09vh;
    --fall-duration: 9.881s;
    --fall-delay: 0.748s
}

.star:nth-child(40) {
    --star-tail-length: 6.4em;
    --top-offset: 29.75vh;
    --fall-duration: 9.062s;
    --fall-delay: 1.693s
}

.star:nth-child(41) {
    --star-tail-length: 5.19em;
    --top-offset: 79.85vh;
    --fall-duration: 11.751s;
    --fall-delay: 2.498s
}

.star:nth-child(42) {
    --star-tail-length: 6.45em;
    --top-offset: 59.7vh;
    --fall-duration: 9.763s;
    --fall-delay: 4.054s
}

.star:nth-child(43) {
    --star-tail-length: 5.52em;
    --top-offset: 79.12vh;
    --fall-duration: 11.219s;
    --fall-delay: 3.142s
}

.star:nth-child(44) {
    --star-tail-length: 5.52em;
    --top-offset: 90.01vh;
    --fall-duration: 9.134s;
    --fall-delay: 7.906s
}

.star:nth-child(45) {
    --star-tail-length: 6.88em;
    --top-offset: 2.82vh;
    --fall-duration: 9.801s;
    --fall-delay: 3.814s
}

.star:nth-child(46) {
    --star-tail-length: 5.77em;
    --top-offset: 97.88vh;
    --fall-duration: 8.675s;
    --fall-delay: 6.936s
}

.star:nth-child(47) {
    --star-tail-length: 5.07em;
    --top-offset: 95.47vh;
    --fall-duration: 6.652s;
    --fall-delay: 0.722s
}

.star:nth-child(48) {
    --star-tail-length: 5.53em;
    --top-offset: 45.42vh;
    --fall-duration: 9.157s;
    --fall-delay: 2.747s
}

.star:nth-child(49) {
    --star-tail-length: 5.32em;
    --top-offset: 64.35vh;
    --fall-duration: 9.846s;
    --fall-delay: 8.839s
}

.star:nth-child(50) {
    --star-tail-length: 6.67em;
    --top-offset: 5.27vh;
    --fall-duration: 8.494s;
    --fall-delay: 0.836s
}

.star::after,
.star::before {
    position: absolute;
    content: "";
    top: 0;
    left: calc(var(--star-width)/ -2);
    width: var(--star-width);
    height: 100%;
    background: linear-gradient(45deg, transparent, currentColor, transparent);
    border-radius: inherit;
    -webkit-animation: 2s linear infinite blink;
    animation: 2s linear infinite blink
}

.star::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.star::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.card-img-overlay-center {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.card-img-overlay-left {
    position: absolute;
    left: 10%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.card-img-overlay-minleft-20 {
    position: absolute;
    left: -20%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@-webkit-keyframes fall {
    to {
        -webkit-transform: translate3d(-30em, 0, 0);
        transform: translate3d(-30em, 0, 0)
    }
}

@keyframes fall {
    to {
        -webkit-transform: translate3d(-30em, 0, 0);
        transform: translate3d(-30em, 0, 0)
    }
}

@-webkit-keyframes tail-fade {
    0%,
    50% {
        width: var(--star-tail-length);
        opacity: 1
    }
    70%,
    80% {
        width: 0;
        opacity: .4
    }
    100% {
        width: 0;
        opacity: 0
    }
}

@keyframes tail-fade {
    0%,
    50% {
        width: var(--star-tail-length);
        opacity: 1
    }
    70%,
    80% {
        width: 0;
        opacity: .4
    }
    100% {
        width: 0;
        opacity: 0
    }
}

@-webkit-keyframes blink {
    50% {
        opacity: .6
    }
}

@keyframes blink {
    50% {
        opacity: .6
    }
}

.card-linear {
    width: 100%;
    box-sizing: border-box
}

.card-linear:hover,
.swiper-slide small,
marquee {
    color: #fff
}

@keyframes animate {
    0% {
        background-position: 0
    }
    100% {
        background-position: 400%
    }
}

.card-linear::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(45deg, #28bcd3, #289fd3, #2883d3, #289fd3, #28bcd3);
    background-size: 400%;
    opacity: 1;
    color: #fff;
    border-radius: 0 0 4px 4px;
    -webkit-animation: 8s linear infinite animate;
    animation: 8s linear infinite animate;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

.btn-linear-bluelight {
    position: relative;
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.btn-linear-bluelight:hover {
    color: #333
}

@keyframes animates {
    0% {
        background-position: 0
    }
    100% {
        background-position: 400%
    }
}

.btn-linear-bluelight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(45deg, #28bcd3, #289fd3, #2883d3, #289fd3, #28bcd3);
    background-size: 400%;
    opacity: 1;
    border-radius: 4px;
    -webkit-animation: 8s linear infinite animates;
    animation: 8s linear infinite animates;
    -webkit-filter: blur(0px);
    filter: blur(0px)
}

.content,
.content-guide {
    height: auto;
    margin: 0 auto
}

.content .nav-pills .nav-link {
    text-align: center;
    border: 2px solid #662d91
}

.content .tab-content {
    height: 100%;
    background: #fff;
    color: #000
}

.content-guide .nav-pills .nav-link {
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .3);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    line-height: 43px
}

.content-guide .nav-pills .nav-link.active {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
    height: 60px;
    width: 60px;
    border: 2px solid #fff
}

.content-guide .tab-content {
    height: 100%
}

.count-wrap li {
    font-size: 1em;
    text-align: center
}

.count-wrap li span {
    display: block;
    font-size: 4rem
}

.count-wrap-hero li {
    font-size: .8em;
    text-align: center
}

.count-wrap-hero li span {
    display: block;
    font-size: 2rem
}

.random-token li {
    margin: 0 8px;
    font-size: 4rem;
    font-weight: 700
}

.language .active {
    color: #fff!important;
    background: #3bc347;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-radius: 4px;
    line-height: 14px
}

.kotak {
    -webkit-box-shadow: 4px 5px 9px #dedede;
    box-shadow: 4px 5px 9px #dedede;
    padding: 15px 8px;
    font-weight: 500;
    -webkit-transition: 1s;
    transition: 1s
}

.kotak:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 1s;
    transition: 1s
}

.countdown.flip-clock-wrapper ul {
    height: 50px;
    margin: 0 5px;
    width: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: none
}

.countdown.flip-clock-wrapper ul li a div div.inn {
    background-color: #0af;
    color: #fff;
    font-size: 30px;
    font-family: "Chakra Petch", sans-serif;
    text-shadow: none;
    border-radius: none
}

.countdown.flip-clock-wrapper ul li a div.down {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.countdown.flip-clock-wrapper ul li a div.up:after {
    top: 24px
}

.countdown .flip-clock-dot.top {
    top: 20%
}

.countdown .flip-clock-dot.bottom {
    bottom: 20%
}

.countdown .flip-clock-dot {
    height: 10px;
    left: 0;
    right: 0;
    width: 10px;
    background: #662d91;
    -webkit-box-shadow: none;
    box-shadow: none
}

.countdown .flip-clock-divider {
    height: 50px;
    width: 10px
}

.countdown .flip-clock-divider:first-child {
    width: 0
}

.countdown .flip-clock-divider .flip-clock-label {
    color: #662d91;
    font-size: 12px;
    font-family: "Chakra Petch", sans-serif;
    width: 80px;
    font-weight: 600
}

.countdown .flip-clock-divider.minutes .flip-clock-label,
.countdown .flip-clock-divider.seconds .flip-clock-label {
    right: -90px
}

.neons h1 {
    font-size: 3rem;
    text-align: center;
    font-weight: 700;
    -webkit-animation: 2s ease-in-out infinite alternate glow;
    animation: 2s ease-in-out infinite alternate glow
}

@-webkit-keyframes glow {
    from {
        color: #fc532d;
        text-shadow: 0 0 0 #00aeef00
    }
    to {
        color: #fb1e44;
        text-shadow: 0 0 2px #fc532d33, 0 0 4px #fc532d66, 0 0 6px #fc532d8c
    }
}

.accordion .card {
    margin-bottom: .75rem;
    -webkit-box-shadow: 0 1px 15px 1px rgba(230, 234, 236, .35);
    box-shadow: 0 1px 15px 1px rgba(230, 234, 236, .35);
    border-radius: none
}

.accordion .card:first-of-type {
    border-bottom: 0;
    border-radius: 0
}

.accordion .card .card-header {
    background-color: transparent;
    color: #333;
    border-bottom: none
}

.accordion .card .card-header a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    position: relative;
    -webkit-transition: color .5s;
    transition: color .5s;
    padding-right: 1.5rem
}

.accordion .card .card-header a:before {
    position: absolute;
    right: 15px;
    top: 30%;
    font-family: FontAwesome;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #0af
}

.accordion .card .card-header a[aria-expanded=false]:before {
    content: "\f067"
}

.accordion .card .card-header a[aria-expanded=true]:before {
    content: "\f068"
}

.card-header:first-child {
    border-radius: 0
}

.bg-gradient-orange {
    background: #feae62
}

.circle-logo {
    padding: 10px;
    border-radius: 50%;
    height: 72px;
    -webkit-box-shadow: rgba(100, 100, 111, .5) 0 7px 29px 0;
    box-shadow: rgba(100, 100, 111, .5) 0 7px 29px 0
}

.circle-card {
    border-radius: 50%;
    height: 500px;
    width: 500px;
    -webkit-box-shadow: 0 0 10px #01a69a;
    box-shadow: 0 0 10px #01a69a
}

.bg-glass,
.bg-glass-swipper {
    border: 1px solid rgba(255, 255, 255, .3)
}

.content,
.size1,
.wrapper {
    width: 100%
}

.circle-card img {
    height: 500px;
    width: 500px;
    -o-object-fit: cover;
    object-fit: cover
}

.bg-glass-modal {
    background: rgba(255, 255, 255, .3);
    -webkit-box-shadow: 0 0 0 .5px inset #fff;
    box-shadow: 0 0 0 .5px inset #fff;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    -webkit-animation: 1s cubic-bezier(.075, .82, .165, 1) forwards;
    animation: 1s cubic-bezier(.075, .82, .165, 1) forwards
}

.bg-glass,
.bg-glass-swipper,
.social-icons a:before {
    background: rgba(255, 255, 255, .2)
}

.bg-glass,
.bg-glass:hover {
    -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box
}

.bg-glass {
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-sizing: border-box
}

.bg-glass:hover {
    background: rgba(137, 139, 213, .2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(137, 139, 213, .3)
}

.bg-blur,
.bg-glass-swipper {
    -webkit-box-sizing: border-box
}

.bg-glass-swipper {
    -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(5px);
    box-sizing: border-box
}

.bg-linear-green {
    background: linear-gradient(184.82deg, #29a69e 3.89%, #75d1cc 96.11%)
}

.bg-linear-red {
    background: linear-gradient(209.21deg, #d75141 13.57%, #d74165 98.38%)
}

.bg-linear-purple-light {
    background: linear-gradient(209.21deg, #3c0b8c 13.57%, #e3a6fe 98.38%)
}

.bg-linear-blue {
    background: linear-gradient(209.21deg, #0c1097 13.57%, #0085af 98.38%)
}

.bg-blur {
    background: rgba(15, 14, 71, .3);
    border: .5px solid rgba(255, 255, 255, .2);
    box-sizing: border-box;
    -webkit-box-shadow: 0 50px 100px, #000;
    box-shadow: 0 50px 100px, #000;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border-radius: 20px
}

.bg-shadow-white {
    -webkit-box-shadow: rgba(255, 255, 255, .2) 0 1px 18px 0;
    box-shadow: rgba(255, 255, 255, .2) 0 1px 18px 0
}

.animation-tes {
    -webkit-animation: 1.2s linear infinite alternate fadeToggle;
    animation: 1.2s linear infinite alternate fadeToggle
}

.animation-tes1 {
    -webkit-animation: 2s linear infinite alternate slideUp;
    animation: 2s linear infinite alternate slideUp
}

.animation-updown {
    -webkit-animation: 2s linear infinite alternate slideUpDown;
    animation: 2s linear infinite alternate slideUpDown
}

.animation-tes2 {
    -webkit-animation: 5s infinite alternate bounceTop;
    animation: 5s infinite alternate bounceTop
}

.zoom-in-box1 {
    -webkit-animation: .6s zoom-in-zoom-out;
    animation: .6s zoom-in-zoom-out
}

.zoom-in-box2 {
    -webkit-animation: .8s zoom-in-zoom-out;
    animation: .8s zoom-in-zoom-out
}

.zoom-in-box3 {
    -webkit-animation: 1s zoom-in-zoom-out;
    animation: 1s zoom-in-zoom-out
}

.zoom-in-box4 {
    -webkit-animation: 1.2s zoom-in-zoom-out;
    animation: 1.2s zoom-in-zoom-out
}

.zoom-out-box {
    -webkit-animation: .5s zoom-in-zoom-out-box;
    animation: .5s zoom-in-zoom-out-box;
    opacity: 0
}

@-webkit-keyframes zoom-in-zoom-out {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0
    }
    50% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }
}

@keyframes zoom-in-zoom-out {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0
    }
    50% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }
}

@-webkit-keyframes zoom-in-zoom-out-box {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }
    50% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0
    }
}

@keyframes zoom-in-zoom-out-box {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }
    50% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0
    }
}

@-webkit-keyframes fadeToggle {
    0% {
        opacity: .5;
        -webkit-transform: translateY(30%) scale(.9);
        transform: translateY(30%) scale(.9)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(30%) scale(1);
        transform: translateY(30%) scale(1)
    }
}

@keyframes fadeToggle {
    0% {
        opacity: .5;
        -webkit-transform: translateY(30%) scale(.9);
        transform: translateY(30%) scale(.9)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(30%) scale(1);
        transform: translateY(30%) scale(1)
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
    to {
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }
}

@keyframes slideUp {
    0% {
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
    to {
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }
}

@-webkit-keyframes slideUpDown {
    0% {
        -webkit-transform: translate3d(0, 1%, 0);
        transform: translate3d(0, 1%, 0)
    }
    to {
        -webkit-transform: translate3d(0, -1%, 0);
        transform: translate3d(0, -1%, 0)
    }
}

@keyframes slideUpDown {
    0% {
        -webkit-transform: translate3d(0, 1%, 0);
        transform: translate3d(0, 1%, 0)
    }
    to {
        -webkit-transform: translate3d(0, -1%, 0);
        transform: translate3d(0, -1%, 0)
    }
}

.timeline {
    position: relative;
    padding-left: 4rem;
    margin: 0 0 0 30px
}

.timeline:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 100%;
    background: #ac1f40
}

.timeline .timeline-container {
    position: relative;
    margin-bottom: 2.5rem
}

.timeline .timeline-container .timeline-icon {
    position: absolute;
    left: -88px;
    top: 4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    font-size: 2rem;
    border: 2px solid #ac1f40;
    background: #fff
}

.timeline .timeline-container .timeline-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ac1f40;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.timeline .timeline-container .timeline-body {
    background: #fff;
    border: 2px solid #ac1f40;
    border-radius: 3px;
    padding: 20px 20px 15px;
    -webkit-box-shadow: 1px 3px 9px rgba(0, 0, 0, .1);
    box-shadow: 1px 3px 9px rgba(0, 0, 0, .1)
}

.timeline .timeline-container .timeline-body .timeline-subtitle {
    font-weight: 300;
    font-style: italic;
    opacity: .4;
    margin-top: 16px;
    font-size: 11px
}

.notification {
    position: fixed;
    bottom: 2%;
    right: .5rem;
    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: end;
    -ms-flex-align: end;
    align-items: flex-end;
    color: #333;
    overflow-x: hidden
}

@-webkit-keyframes swingBody {
    25% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
}

@keyframes swingBody {
    25% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
}

@-webkit-keyframes swingClapper {
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    30% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
    80% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

@keyframes swingClapper {
    5% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    30% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
    80% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

.notification__message {
    background: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .1);
    border-left: .5rem solid #fff;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    transition-property: transform, opacity, visibility, -webkit-transform;
    -webkit-transition-duration: .7s;
    transition-duration: .7s;
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.notification__message p {
    max-width: 320px;
    grid-column: 1/-1
}

.notification.received .notification__message {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible
}

.message--success {
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: 100% 100%
}

.gradient-border {
    --border-width: 3px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background: #20272a;
    border-radius: 10px
}

.active-animatioon,
.active-animatioon-white {
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top
}

.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(60deg, rgb(21 129 157), rgb(70 102 174), rgb(132 79 151), #5ff2f0);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: 10px;
    -webkit-animation: 4s infinite alternate moveGradient;
    animation: 4s infinite alternate moveGradient
}

@-webkit-keyframes moveGradient {
    50% {
        background-position: 100% 50%
    }
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%
    }
}

.active-animatioon {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #d31925), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #d31925), color-stop(50%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, #d31925), color-stop(50%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, #d31925), color-stop(50%, transparent));
    background-image: linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(0deg, #fff 50%, transparent 50%), linear-gradient(0deg, #fff 50%, transparent 50%);
    -webkit-animation: 1s linear infinite border-dance;
    animation: 1s linear infinite border-dance
}

.active-animatioon-white {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, #fff), color-stop(50%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, #fff), color-stop(50%, transparent));
    background-image: linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(90deg, #fff 50%, transparent 50%), linear-gradient(0deg, #fff 50%, transparent 50%), linear-gradient(0deg, #fff 50%, transparent 50%);
    -webkit-animation: 1s linear infinite border-dance;
    animation: 1s linear infinite border-dance
}

@-webkit-keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top
    }
    100% {
        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px
    }
}

@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top
    }
    100% {
        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px
    }
}

.social-icons {
    padding: 0;
    list-style: none
}

.social-icons li {
    margin: .2em;
    position: relative;
    font-size: 1.4em
}

.social-icons i {
    color: #fff;
    position: absolute;
    top: 14px;
    left: 14px;
    -webkit-transition: 265ms ease-out;
    transition: 265ms ease-out
}

.social-icons a:before {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    content: " ";
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: block;
    -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 265ms ease-out;
    transition: 265ms ease-out
}

.card,
.card-content {
    border: none;
    position: relative
}

.social-icons a:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 265ms ease-in;
    transition: 265ms ease-in
}

.social-icons a:hover i {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    color: #fff;
    background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: 265ms ease-in;
    transition: 265ms ease-in
}

@-webkit-keyframes slidebar {
    from {
        background-position: 3rem 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes slidebar {
    from {
        background-position: 3rem 0
    }
    to {
        background-position: 0 0
    }
}

.logo-center {
    text-align: center;
    padding-bottom: 25px
}

.content {
    float: none;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%
}

@media screen and (min-device-width: 200px) and (max-device-width: 290px) {
    .img-idnslot {
        height: 47px!important;
    }
}

@media screen and (min-device-width: 300px) and (max-device-width: 350px) {
    .img-idnslot {
        height: 78px!important;
    }
}

@media screen and (min-device-width: 351px) and (max-device-width: 375px) {
    .img-idnslot {
        height: 95px!important;
    }
}

@media screen and (min-device-width: 412px) and (max-device-width: 419px) {
    .img-idnslot {
        height: 107px!important;
    }
}

@media screen and (min-device-width: 420px) and (max-device-width: 425px) {
    .img-idnslot {
        height: 108px!important;
    }
}

@media screen and (min-device-width: 500px) and (max-device-width: 525px) {
    .img-idnslot {
        height: 132px!important;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 900px) {
    .img-idnslot {
        height: 213px!important;
    }
}

@media screen and (min-device-width: 901px) and (max-device-width: 915px) {
    .img-idnslot {
        height: 256px!important;
    }
}

@media (max-width:900px) {
    .img-idnslot {
        height: 107px;
    }
}

@media (max-width:992px) {
    .card {
        width: 33.3%!important
    }
}

.card {
    float: left;
    width: 20%;
    background: 0 0;
    text-align: center
}

.card-content {
    margin: 5px;
    color: #fff;
    font-size: 12px;
    overflow: hidden;
    filter: drop-shadow(0px 0px 5px black)
}

.percent p,
.play-btn {
    color: #000;
    text-align: center
}

.play-btn {
    font-size: 15px;
    text-decoration: none;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    display: block;
    margin: 42% 30px;
    background: linear-gradient(to bottom, #94c9ff 0, #1667b8 88%);
    border-radius: 18px;
    transition: .3s
}

.play-btn:hover {
    background: linear-gradient(to top, #94c9ff 0, #1667b8 88%)
}

.wrapper {
    padding: 0;
    position: relative;
    z-index: 0
}

.hover-btn,
.percent p {
    position: absolute;
    width: 100%
}

.hover-btn {
    opacity: 0;
    background-color: rgba(0, 0, 0, .9);
    transition: .1s ease-in-out;
    z-index: 10;
    height: 87%;
    border-radius: 20px
}

.percent,
.swiper-slide,
.swiper-wrapper,
.swp-sld {
    position: relative
}

@media(max-width:992px) {
    .hover-btn:hover~.img-zoom {
        position: relative
    }
    .hover-btn {
        display: none
    }
}

.green {
    background-color: #28a745
}

.yellow {
    background-color: #ffc107
}

.red {
    background-color: #dc3545
}

.percent p {
    z-index: 15;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(14px)
}

p {
    margin: 0
}

.percent {
    display: flex;
    height: 27px;
    display: flex;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    z-index: 1;
    border-radius: 18px;
    width: 90%;
    margin: 0 auto
}

.percent-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    transition: width .6s;
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes;
    z-index: 10
}

.img-zoom {
    transition: .45s ease-in-out
}

.ygg-img {
    border: 5px solid #2f2f2f
}

.hover-btn:hover {
    opacity: 100%
}

.swiper-button-next:after,
.swiper-button-prev:after {
    background: rgba(255, 255, 255, .2);
    padding: 12px;
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    border-radius: 100px;
    height: 32px;
    top: 0;
    line-height: 10px
}

.swiper-slide:hover small {
    color: #89c401
}

.swiper-slide:hover img {
    transform: scale(.9)
}

.swiper-wrapper {
    -webkit-transition-timing-function: linear!important;
    transition-timing-function: linear!important
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    overflow: hidden
}

.text-shadow {
    text-shadow: -1px 1px 0 #313131, -2px 2px 0 rgb(88 88 88)
}

.fa-bullhorn:before {
    content: "\f0a1"
}

.modal-footer {
    display: unset
}

.text-h2 {
    font-size: 28px
}

.swp-sld {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 165px;
    overflow: hidden;
    height: 100%;
    flex-shrink: 0
}

.text-footer {
    font-size: 18px
}

.h2-center {
    text-align: center
}

.p-justify {
    text-align: justify
}

.logo {
    width: 25%;
}

@media screen and (min-device-width: 200px) and (max-device-width: 900px) {
    .logo {
        width: 70%;
    }
}