@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
	font-family: 'Archive';
	src: url('fonts/archive.eot'); /* IE 9 Compatibility Mode */
	src: url('fonts/archive.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/archive.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/archive.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('fonts/archive.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/archive.svg#archive') format('svg'); /* Chrome < 4, Legacy iOS */
}

:root {
	--live-bg: #161616;
	--live-orange: #DD3B1C;
	--live-dark: #676767;
	--live-light: #fff;
	--live-gold: #FF9600;
	
	--menu-a: #D1A452;
}

body {
    background-image: url(/site/img/bg.png);
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

body.raffles {
    background-image: url(/site/img/bg-gold.png);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #161616;
    margin: 0;
    padding: 0;
}

body.pay {
    background-color: #262625;
    background-image: none;
    margin: 0;
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

*::-webkit-scrollbar {
    height: 6px;
    width: 6px
}

*::-webkit-scrollbar-track {
    background-clip: content-box
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #d1a452;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #d1a452
}

*::-webkit-scrollbar-corner,*::-webkit-scrollbar-track {
    background-color: #161616;
}

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
	font-family: "Rubik", serif;
}
a {
    text-decoration: none;
    transition: .3s;
}
button {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: .3s;
}

input, textarea {
	outline:none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}



.live {
    width: 100%;
    height: 6rem;
    padding-top: .5rem;
    display: flex;
    gap: .5rem;
    overflow: hidden;
}
.live>.online {
    width: max-content;
    background: var(--live-bg);
    height: 100%;
    border-radius: 0 0.5rem 0.5rem 0;
}
.live>.online>.impulse {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 1rem;
}
.live>.online>.impulse>.animated {
    width: 3rem;
    display: flex;
    justify-content: center;
    padding-right: 1rem;
}
.live>.online>.impulse>.animated>div {
	display: flex;
	min-width: 2.1rem;
	min-height: 2.1rem;
	border-radius: 50%;
	position: relative;
	border: 0.5px solid var(--live-orange);
	align-items: center;
	justify-content: center;
}
.live>.online>.impulse>.animated>div::after {
	content: "";
	width: .7rem;
	height: .7rem;
	position: absolute;
	background: var(--live-orange);
	border-radius: 50%;
	animation: ripple 1s infinite alternate;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 19px 9px #dd3b1c
    }

    to {
        box-shadow: 0 0 33px 14px #dd3b1c
    }
}



.live>.online>.impulse>.check {
    text-align: center;
    line-height: 1.5rem;
    display: flex;
    flex-direction: column;
}
.live>.online>.impulse>.check>.count {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--live-orange);
}
.live>.online>.impulse>.check>.text {
    font-size: 1rem;
    color: var(--live-dark);
    font-weight: 200;
}
.live>.realtime {
    background: var(--live-bg);
    padding: .5rem;
    align-items: center;
    width: 2.3rem;
    display: flex;
    justify-content: center;
    border-radius: .5rem;
}
.live>.realtime>span {
	font-size: .9rem;
	color: var(--live-dark);
	font-weight: 200;
	text-transform: uppercase;
	display: block;
	position: relative;
	transform: rotate(-90deg);
	transform-origin: center center;
}
.live>.lenta {
    display: flex;
    gap: .5rem;
    min-width: 100%;
}
.live>.lenta>.box {
    background-color: var(--live-bg);
    padding: .5rem;
    border-radius: .5rem;
    display: block;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: .3s all;
    width: 137px;
    min-width: 137px;
    position: relative;
}

[data-country="us"] {
	background-image: url(/site/img/flag/flag-us.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="ru"] {
	background-image: url(/site/img/flag/flag-ru.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="fr"] {
	background-image: url(/site/img/flag/flag-fr.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="cn"] {
	background-image: url(/site/img/flag/flag-cn.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="sw"] {
	background-image: url(/site/img/flag/flag-sw.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="jp"] {
	background-image: url(/site/img/flag/flag-jp.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="cz"] {
	background-image: url(/site/img/flag/flag-cz.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="en"] {
	background-image: url(/site/img/flag/flag-en.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="pl"] {
	background-image: url(/site/img/flag/flag-pl.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="it"] {
	background-image: url(/site/img/flag/flag-it.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

[data-country="ge"] {
	background-image: url(/site/img/flag/flag-ge.webp);
	background-size: cover;
	background-repeat: no-repeat;
} 

.live>.lenta>.box:last-child {
    border-radius: 0.5rem 0 0 0.5rem;
}
.live>.lenta>.box:hover>.hover {
	animation: show_animated .5s forwards;
}

@keyframes show_animated {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.live>.lenta>.box>.hover {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	padding: .5rem;
	min-height: 100%;
	background: var(--live-bg);
	opacity: 0;
	box-shadow: 0px -10px 14px 0 rgb(221 59 28 / 33%) inset;
}
.live>.lenta>.box>.hover>.user {
	font-size: .7rem;
	padding-left: 2.5rem;
	padding-bottom: .3rem;
}
.live>.lenta>.box>.hover>.user>span {
    color: var(--live-light);
}
.live>.lenta>.box>.images {
    width: 100%;
    text-align: center;
}

.live>.lenta>.box>.images>img {
    height: 100%;
    margin: 0 auto;
    width: auto;
}
.live>.lenta>.box>.hover>.images {
    position: absolute;
    margin: auto 0;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.live>.lenta>.box>.hover>.images>img {
    width: 3rem;
    padding-left: .5rem;
}
.live>.lenta>.box>.hover>.name {
    color: #D1A452;
    font-size: .7rem;
    font-weight: 500;
    padding-left: 2.5rem;
    padding-right: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 116px;
    overflow: hidden;
    text-transform: uppercase;
}
.live>.lenta>.box>.hover>.gold {
    color: var(--live-light);
    font-size: .7rem;
    text-transform: uppercase;
    padding-top: 1.5rem;
    font-weight: 500;
    padding-left: 2.5rem;
}
.live>.lenta>.box>.hover>.gold>span {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.live>.lenta>.box>.hover>.gold>span>svg {
    width: .7rem;
    height: .7rem;
    color: var(--live-gold);
}

.menu {
	background: rgb(22 22 22 / 62%);
    margin: .5rem 0rem;
}
.menu>.center {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	width: 1300px;
	height: 5.5rem;
	display: flex;
	align-items: center;
}
.menu>.center>.logotype {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.menu>.center>.logotype>.name {
    position: relative;
    color: var(--live-light);
    font-family: Archive;
    font-size: 3.1rem;
    bottom: 3px;
	transition: .3s all;
}
.menu>.center>.logotype:hover >.name {
    color: var(--live-orange);
    filter: drop-shadow(0px 0px 7px #dd3b1c87);
}
.menu>.center>.logotype>.box {
    color: var(--live-light);
    background: var(--live-orange);
    border-radius: 1rem 0.3rem 0.3rem 0;
    position: relative;
    left: 5px;
    top: 0px;
    transition: .3s all;
    line-height: 1.9rem;
}
.menu>.center>.logotype>.box>span {
    display: block;
    z-index: 2;
    position: relative;
    font-family: Archive;
    font-size: 1.2rem;
    padding: 0 .5rem 0 0;
}
.menu>.center>.logotype>.box::after {
	content: "";
	position: absolute;
	left: -11px;
	height: 100%;
	width: 2rem;
	transform: skewX(-22deg);
	background: #dd3b1c;
	border-radius: .5rem .5rem .5rem 0;
	top: 0;
}
.menu>.center>.logotype:hover>.box {
    color: #ffffff;
    filter: drop-shadow(0px 0px 7px #dd3b1c87);
}
.menu>.center>ul {
    display: flex;
    gap: .3rem;
    padding-left: 2rem;
}
.menu>.center>ul>li>a {
    display: block;
    font-family: Archive;
    color: var(--live-light);
    font-size: 1rem;
    padding: .5rem .9rem;
    border: 2px solid transparent;
    transition: .3s;
    border-radius: .5rem;
    transform: skewX(-22deg);
}
.menu>.center>ul>li>a>span {
    display: block;
    transform: skewX(22deg);
    font-family: Archive;
}
.menu>.center>ul>li>.one {
    color: #101010;
    transition: .3s;
    background: var(--menu-a);
}
.menu>.center>ul>li>a:hover, .menu>.center>ul>li>a.active {
    color: var(--live-orange);
    border: 2px solid var(--live-orange);
    border-radius: .5rem;
}
.menu>.center>ul>li>.one:hover, .menu>.center>ul>li>.one.active {
    color: #000;
    border: 2px solid var(--menu-a);
    border-radius: .5rem;
    filter: drop-shadow(0px 0px 7px #D1A452);
}
.menu>.center>.user-login {
    display: flex;
    position: absolute;
    right: 0;
    gap: .4rem;
}
.user-login>a {
    color: var(--live-light);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    font-family: Archive;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 0 0 0.5rem .5rem;
}
.user-login>a>span {
    font-family: Archive;
    z-index: 3;
}
.user-login>a>svg {
    width: 1.5rem;
    height: 1.5rem;
    z-index: 3;
}
.user-login>.wg {
    background: var(--live-orange);
    border-radius: .5rem 0 0 0.5rem;
    padding: 0.8rem 0.2rem 0.8rem 1rem;
    margin-right: .9rem;
    z-index: 3;
}
.user-login>.wg:hover {
    filter: drop-shadow(0px 0px 7px var(--live-orange));
}
.user-login>.wg::after {
	content: "";
	position: absolute;
	right: -17px;
	height: 100%;
	width: 2.5rem;
	transform: skewX(22deg);
	background: #dd3b1c;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}
.user-login>.lesta {
	background: #0077FF;
	margin: 0rem 1rem 0rem 1.15rem;
	padding: .8rem .3rem;
}
.user-login>.lesta:hover {
    filter: drop-shadow(0px 0px 7px #0077FF);
}
.user-login>.lesta::after {
	content: "";
	position: absolute;
	left: -10px;
	height: 100%;
	width: 2.5rem;
	transform: skewX(22deg);
	background: #0077FF;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}
.user-login>.lesta::before {
	
	
	
	
	
	
	
	
	
	
	=: rotateY(180deg);
	content: "";
	position: absolute;
	right: -10px;
	height: 100%;
	width: 2.5rem;
	transform: skewX(-22deg);
	background: #0077FF;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}
.user-login>.vk {
    background: #0077FF;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-left: .9rem;
    padding: .8rem 1rem 0.8rem 0.2rem;
}
.user-login>.vk:hover {
    filter: drop-shadow(0px 0px 7px #0077FF);
}
.user-login>.vk::after {
	content: "";
	content: "";
	position: absolute;
	left: -16px;
	height: 100%;
	width: 2.5rem;
	transform: skewX(-22deg);
	background: #0077ff;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}

.user-logauth {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
}
.user-logauth>.balans-money {
    display: flex;
    align-items: center;
}
.user-logauth>.balans-money>.title {
	position: relative;
	display: flex;
	gap: .2rem;
	background: #121212;
	padding: 0.6rem .8rem 0.7rem 0.8rem;
	color: #ffffff;
	border-radius: .5rem 0 0 0.5rem;
	padding-right: 1rem;
	left: 12px;
}
.user-logauth>.balans-money>.title>span {
    font-family: 'Rubik';
    font-size: 1rem;
    font-weight: 500;
}
.user-logauth>.balans-money>.title>span:nth-child(2) {
    font-family: 'Rubik';
}
.user-logauth>.balans-money>a {
	display: flex;
	gap: .3rem;
	color: var(--live-light);
	background: var(--live-orange);
	font-size: .9rem;
	font-family: Archive;
	position: relative;
	transition: all 0.3s ease;
	align-items: center;
	border-radius: 1rem 0.5rem 0.5rem 0;
	margin-left: .9rem;
	padding: 0.9rem .6rem 0.9rem 0.2rem;
	height: 100%;
}
.user-logauth>.balans-money>a>span {
	color: var(--live-light);
	font-size: .9rem;
	font-family: Archive;
	z-index: 2;
}
.user-logauth>.balans-money>a::after {
	content: "";
	position: absolute;
	left: -11px;
	height: 100%;
	width: 2rem;
	transform: skewX(-22deg);
	background: #dd3b1c;
	border-radius: .5rem;
	top: 0;
}
.user-logauth>.balans-money>a:hover {
    filter: drop-shadow(0px 0px 7px var(--live-orange));
}
.user-logauth>.balans-gold {
    display: flex;
    align-items: center;
}
.user-logauth>.balans-gold>.title {
    position: relative;
    display: flex;
    gap: .2rem;
    background: #121212;
    padding: 0.6rem 1rem 0.7rem 0.8rem;
    color: #D1A452;
    border-radius: .5rem 0 0 0.5rem;
    padding-right: 1.3rem;
    left: 14px;
    align-items: center;
    min-width: 3rem;
}
.user-logauth>.balans-gold>.title>span {font-family: 'Rubik';font-size: 1rem;font-weight: 500;}
.user-logauth>.balans-gold>.title>svg {
    position: relative;
    width: .7rem;
    height: .9rem;
    top: 1px;
}
.user-logauth>.balans-gold>a {
    display: flex;
    gap: .3rem;
    color: #000;
    background: #D1A452;
    font-size: .9rem;
    font-family: Archive;
    position: relative;
    transition: all 0.3s ease;
    align-items: center;
    border-radius: .5rem 0.5rem 0.5rem 0;
    margin-left: .9rem;
    padding: 0.9rem .6rem 0.9rem 0.2rem;
    height: 100%;
}
.user-logauth>.balans-gold>a>svg {
    width: 1.1rem;
    height: 1rem;
    z-index: 2;
}
.user-logauth>.balans-gold>a::after {
	content: "";
	position: absolute;
	left: -11px;
	height: 100%;
	width: 2rem;
	transform: skewX(-22deg);
	background: #d1a452;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}
.user-logauth>.balans-gold>a:hover {
    filter: drop-shadow(0px 0px 7px #D1A452);
}

.user-logauth>.user {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}
.user-logauth>.user>.images {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121212;
    border-radius: 50%;
}
.user-logauth>.user>.images>img {
    width: 70%;
}
.user-logauth>.user>.user-name {
	padding: 0rem 1rem 0rem .5rem;
}
.user-logauth>.user>.user-name>a {
    color: hsl(0deg 0% 85%);
}
.user-logauth>.user>.user-name>a:hover {
	color: hsl(0deg 0% 100%);
}

.user-logauth>.exit-user {
    color: hsl(0deg 0% 85%);
    display: flex
;
    align-items: center;
}
.user-logauth>.exit-user>svg {
    width: 1.7rem;
    height: 1.7rem;
}
.user-logauth>.exit-user:hover {
    color: hsl(0deg 0% 100%);
}
.index {
    position: relative;
    box-sizing: border-box;
    margin: 1.5rem auto 1.5rem auto;
    width: 1300px;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0rem;
}
.index>.title>h1 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 2.3rem;
    font-weight: 300;
}
.index>.title>h2 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 1.3rem;
    font-weight: 300;
}
.index>.title>h2>span {
    font-family: Archive;
    color: var(--live-orange);
    font-size: 1.3rem;
    border: 2px solid transparent;
    font-weight: 300;
}
.index>.info {
    display: flex;
    gap: 1rem;
}
.index>.info>div {
    position: relative;
    background: rgb(22 22 22 / 62%);
    padding: .8rem 1.7rem .8rem 1.7rem;
    border-radius: .5rem;
    overflow: hidden;
}
.index>.info>div>span {
    font-family: Archive;
    color: #D1A452;
    font-size: 2rem;
    font-weight: 300;
}
.index>.info>div>p {
    font-family: Archive;
    color: #ffffffc4;
    font-size: 1rem;
    font-weight: 300;
    padding-top: .3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.index>.info>div>p>svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #D1A452;
}
.index>.info>.online>p::before {
	content: "";
	width: .7rem;
	height: .7rem;
	background: #D1A452;
	border-radius: 50%;
	animation: pulse 2.5s linear infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
    box-shadow: 0 0 0px 0px #D1A452;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px 2px #D1A452;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
    box-shadow: 0 0 0 0px #D1A452;
  }
}

.roulet {
    margin: 0 auto 0 auto;
    width: 1300px;
    display: flex;
    gap: 1.2rem;
}
.roulet>.main {
    width: 27%;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.roulet>.main>button {
    display: flex;
    height: 4.8rem;
    width: 100%;
    position: relative;
}
.roulet>.main>button {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9Ijc1IiB2aWV3Qm94PSIwIDAgMzM2IDc1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCA3Ljk5OTk5QzAgMy41ODE3MSAzLjU4MTcyIDAgOCAwSDcxLjE4NzdDNzYuNTY0NCAwIDgwLjQxMDQgNS4xOTc5MyA3OC44MzggMTAuMzM5Nkw2MC45MzExIDY4Ljg5MzlDNTkuOTAyNSA3Mi4yNTczIDU2Ljc5NzkgNzQuNTU0MyA1My4yODA4IDc0LjU1NDNIOC4wMDAwMUMzLjU4MTczIDc0LjU1NDMgMCA3MC45NzI2IDAgNjYuNTU0M1Y3Ljk5OTk5WiIgZmlsbD0iIzE2MTYxNiIvPgo8cGF0aCBkPSJNOTAuODMyMiA1Ljc4MzI5QzkxLjgxOTkgMi4zNTgzMiA5NC45NTQ0IDAgOTguNTE5IDBIMzI4QzMzMi40MTggMCAzMzYgMy41ODE3MiAzMzYgOFY2Ni41NTQzQzMzNiA3MC45NzI2IDMzMi40MTggNzQuNTU0MyAzMjggNzQuNTU0M0g4MS42MzNDNzYuMzA5OCA3NC41NTQzIDcyLjQ3MTMgNjkuNDUyNCA3My45NDYzIDY0LjMzNzZMOTAuODMyMiA1Ljc4MzI5WiIgZmlsbD0iIzE2MTYxNiIvPgo8L3N2Zz4K) no-repeat;
    background-repeat: no-repeat;
    border-radius: .5rem;
    background-size: 100% 100%;
}
.roulet>.main>button:not([disabled="disabled"]):hover, .roulet>.main>button.active {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9Ijc1IiB2aWV3Qm94PSIwIDAgMzM2IDc1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOCAxSDcxLjE4NzVDNzUuNzQ1IDEgNzkuMDQ1OCA1LjI2ODE1IDc3Ljk5NzEgOS42MjVMNzcuODgxOCAxMC4wNDY5TDU5Ljk3NDYgNjguNjAxNkM1OS4wNzQ2IDcxLjU0NDMgNTYuMzU4NSA3My41NTQ1IDUzLjI4MTIgNzMuNTU0N0g4QzQuMTM0MTMgNzMuNTU0NyAxLjAwMDE5IDcwLjQyMDUgMSA2Ni41NTQ3VjhDMSA0LjI1NDg2IDMuOTQxMTEgMS4xOTYzMyA3LjYzOTY1IDEuMDA4NzlMOCAxWiIgZmlsbD0iI0REM0IxQyIgZmlsbC1vcGFjaXR5PSIwLjMyIiBzdHJva2U9IiNERDNCMUMiIHN0cm9rZS13aWR0aD0iMiIvPgo8cGF0aCBkPSJNOTguNTE4NiAxSDMyOEMzMzEuODY2IDEgMzM1IDQuMTM0MDEgMzM1IDhWNjYuNTU0N0MzMzUgNzAuNDIwNSAzMzEuODY2IDczLjU1NDcgMzI4IDczLjU1NDdIODEuNjMyOEM3Ni45NzUxIDczLjU1NDUgNzMuNjE2NiA2OS4wODk2IDc0LjkwNzIgNjQuNjE0M0w5MS43OTMgNi4wNjA1NUM5Mi42NTcyIDMuMDYzODMgOTUuMzk5OCAxLjAwMDE4IDk4LjUxODYgMVoiIGZpbGw9IiNERDNCMUMiIGZpbGwtb3BhY2l0eT0iMC4zMiIgc3Ryb2tlPSIjREQzQjFDIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==) no-repeat;
    filter: drop-shadow(0px 0px 7px var(--live-orange));
    background-size: 100% 100%;
}
.roulet>.main>button.free:not([disabled="disabled"]):hover, .roulet>.main>button.free.active {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9Ijc1IiB2aWV3Qm94PSIwIDAgMzM2IDc1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOCAxSDcxLjE4NzVDNzUuNzQ1IDEgNzkuMDQ1OCA1LjI2ODE1IDc3Ljk5NzEgOS42MjVMNzcuODgxOCAxMC4wNDY5TDU5Ljk3NDYgNjguNjAxNkM1OS4wNzQ2IDcxLjU0NDMgNTYuMzU4NSA3My41NTQ1IDUzLjI4MTIgNzMuNTU0N0g4QzQuMTM0MTMgNzMuNTU0NyAxLjAwMDE5IDcwLjQyMDUgMSA2Ni41NTQ3VjhDMSA0LjI1NDg2IDMuOTQxMTEgMS4xOTYzMyA3LjYzOTY1IDEuMDA4NzlMOCAxWiIgZmlsbD0iIzU0NzAyMSIgZmlsbC1vcGFjaXR5PSIwLjMyIiBzdHJva2U9IiM1NDcwMjEiIHN0cm9rZS13aWR0aD0iMiIvPgo8cGF0aCBkPSJNOTguNTE4NiAxSDMyOEMzMzEuODY2IDEgMzM1IDQuMTM0MDEgMzM1IDhWNjYuNTU0N0MzMzUgNzAuNDIwNSAzMzEuODY2IDczLjU1NDcgMzI4IDczLjU1NDdIODEuNjMyOEM3Ni45NzUxIDczLjU1NDUgNzMuNjE2NiA2OS4wODk2IDc0LjkwNzIgNjQuNjE0M0w5MS43OTMgNi4wNjA1NUM5Mi42NTcyIDMuMDYzODMgOTUuMzk5OCAxLjAwMDE4IDk4LjUxODYgMVoiIGZpbGw9IiM1NDcwMjEiIGZpbGwtb3BhY2l0eT0iMC4zMiIgc3Ryb2tlPSIjNTQ3MDIxIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==) no-repeat;
    filter: drop-shadow(0px 0px 7px #547021);
    background-size: 100% 100%;
}
.roulet>.main>button>span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0rem 0 0rem 1rem;
    border-radius: .5rem 0 0 0.5rem;
    color: var(--live-light);
    position: relative;
}
.roulet>.main>button>span>svg {
    width: 2rem;
    height: 1.7rem;
    position: relative;
    left: 3px;
    transition: .3s;
}
.roulet>.main>button>p {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    padding: 1rem 1rem 1rem 1.5rem;
    margin-left: 2.3rem;
    border-radius: 0 .5rem .5rem 0;
    color: var(--live-light);
    justify-content: center;
    gap: .2rem;
}
.roulet>.main>button>p>span {
    font-family: Archive;
    font-size: 1.4rem;
}
.roulet>.main>button>p>span:last-child {
    font-size: 1.1rem;
}

.roulet>.main>button>.discaunt {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 1rem;
    position: relative;
}
.roulet>.main>button>.discaunt>.procent {
    border-radius: 2rem;
    border: 2px solid var(--live-orange);
    font-family: Archive;
    color: var(--live-orange);
    height: 2rem;
    width: 3.5rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    transition: .3s;
}
.roulet>.main>button:not([disabled="disabled"]):hover>.discaunt>.procent, .roulet>.main>button.active>.discaunt>.procent {
	color: var(--live-light);
	border: 2px solid var(--live-light);
}
.roulet>.main>button>.discaunt>.time {
    position: absolute;
    right: -6px;
    top: -9px;
    width: max-content;
    background: var(--live-orange);
    color: var(--live-light);
    padding: .3rem;
    border-radius: .3rem;
}
.roulet>.main>button[disabled="disabled"] {
	opacity: .7;
}
.roulet-box {
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.roulet-box>.roulet-buttons {
    min-height: 4.8rem;
	background: #161616;
	border-radius: .5rem;
}
.roulet-box>.roulet-buttons>.top {
    min-height: 4.8rem;
    display: flex;
    align-items: center;
    /* box-shadow: 0px 0px 17px 0px #dd3b1c2b inset; */
    position: relative;
}
.roulet-box>.roulet-buttons>.top>.text {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.roulet-box>.roulet-buttons>.top>.text>h2 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 1.2rem;
    font-weight: 300;
}
.roulet-box>.roulet-buttons>.top.all>.text>h2>span, .roulet-box>.roulet-buttons>.top.test>.text>h2>span {
	font-family: Archive;
    color: var(--live-orange);
}
.roulet-box>.roulet-buttons>.top.free>.text>h2>span {
	font-family: Archive;
    color: #A4DB41;
}
.roulet-box>.roulet-buttons>.top>.text>p {
    color: #ffffff85;
    font-size: .6rem;
    font-weight: 300;
}
.roulet>.main>button:not([disabled="disabled"]):hover>span>svg {
	transform: scale(1.2);
}

.roulet-box>.roulet-buttons>.top>.step {
    display: flex;
    padding-left: 2rem;
    gap: .4rem;
}
.roulet-box>.roulet-buttons>.top>.step>span {
    width: 3rem;
    padding: 0.28rem .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff2b;
    font-size: .7rem;
    cursor: default;
    background: #59595959;
    border-radius: .3rem;
    transform: skewX(-22deg);
    position: relative;
}
.roulet-box>.roulet-buttons>.top>.step>span>span {
    transform: skewX(22deg);
    z-index: 2;
}
.roulet-box>.roulet-buttons>.top>.step>.step-1, .roulet-box>.roulet-buttons>.top>.step>.step-5 {
    width: 2.6rem;
}
.roulet-box>.roulet-buttons>.top>.step>.step-1>span {
	position: relative;
	left: -2px;
}

.roulet-box>.roulet-buttons>.top>.step>.step-5>span {
    position: relative;
    right: -2px;
}
.roulet-box>.roulet-buttons>.top>.step>.step-1::after {
    content: "";
    position: absolute;
    left: -4px;
    height: 100%;
    width: 1.3rem;
    transform: skewX(22deg);
    background: #2d2d2d;
    border-radius: .3rem 0 0 .3rem;
    top: 0;
    z-index: 1;
}
.roulet-box>.roulet-buttons>.top>.step>.step-5::after {
    content: "";
    position: absolute;
    right: -4px;
    height: 100%;
    width: 1.3rem;
    transform: skewX(22deg);
    background: #2d2d2d;
    border-radius: 0 .3rem .3rem 0;
    top: 0;
    z-index: 1;
}
.roulet-box>.roulet-buttons>.top>.step>span[data-status="on"], .roulet-box>.roulet-buttons>.top>.step>span[data-status="on"]::after {
    background: #dd3b1c;
    color: #fff;
}

.roulet-box>.roulet-buttons>.top>.button {
    position: absolute;
    right: 0;
    padding-right: 1rem;
    display: flex;
    align-items: center;
}
.roulet-box>.roulet-buttons>.top.all>.button>button {
    display: flex;
    height: 100%;
    padding: .7rem 0;
    gap: .3rem;
    color: #ffffff;
    border-radius: .5rem;
    align-items: center;
    border: 2px solid transparent;
}
.roulet-box>.roulet-buttons>.top.all>.button>button>.name:hover {
	filter: drop-shadow(0px 0px 7px var(--live-orange));
}
.roulet-box>.roulet-buttons>.top.all>.button>button>.name {
    display: flex;
    gap: .3rem;
    color: var(--live-light);
    background: var(--live-orange);
    position: relative;
    transition: all 0.3s ease;
    align-items: center;
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.9rem .6rem 0.9rem 0.2rem;
    height: 100%;
    margin-left: 1rem;
}
.roulet-box>.roulet-buttons>.top.all>.button>button>.name>span {
	font-size: .9rem;
	font-family: Archive;
	z-index: 2;
	position: relative;
	left: -3px;
}
.roulet-box>.roulet-buttons>.top.all>.button>button>.name::after {
	content: "";
	position: absolute;
	left: -16px;
	height: 100%;
	width: 2rem;
	transform: skewX(-22deg);
	background: #dd3b1c;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
}
.roulet-box>.roulet-buttons>.top.all>.button>.cost {
	position: relative;
	display: flex;
	gap: .2rem;
	padding: 0.4rem 0.8rem 0.4rem 0.4rem;
	color: #D1A452;
	border-radius: .5rem;
	font-family: 'Rubik';
	font-size: 1.3rem;
	font-weight: 500;
	right: 5px;
}
.roulet-box>.roulet-buttons>.top.all>.button>.cost::before {
	content: attr(data-cost);
	top: -3px;
	right: -8px;
	position: absolute;
	font-size: 1rem;
	color: #ffffff61;
	font-weight: 300;
	font-style: italic;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #606060;
	height: 1px;
	width: 2.8rem;
}
.roulet-box>.roulet-buttons>.top.all>.button>.cost::after {
	position: absolute;
	width: 2.8rem;
	height: 1px;
	background: #606060;
	top: -5px;
	right: -2px;
}

.roulet-box>.roulet-buttons>.top.free>.button>button {
    display: flex;
    gap: .3rem;
    color: var(--live-light);
    background: #547021;
    font-size: 1rem;
    position: relative;
    transition: all 0.3s ease;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.9rem;
    height: 100%;
    margin-left: 1rem;
}
.roulet-box>.roulet-buttons>.top.free>.button>button>p {
    font-family: Archive;
}
.roulet-box>.roulet-buttons>.top.free>.button>button:hover {
    filter: drop-shadow(0px 0px 7px #547021);
}
.roulet-box>.roulet-buttons>.top.test>.button>button {
    display: flex;
    gap: .3rem;
    color: var(--live-light);
    background: var(--live-orange);
    font-size: 1rem;
    position: relative;
    transition: all 0.3s ease;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.9rem;
    height: 100%;
    margin-left: 1rem;
}
.roulet-box>.roulet-buttons>.top.test>.button>button>p {
    font-family: Archive;
}
.roulet-box>.roulet-buttons>.top.test>.button>button:hover {
    filter: drop-shadow(0px 0px 7px var(--live-orange));
}
.roulet-box>.roulet-buttons>.top>.button>.go {
    display: grid;
    gap: .3rem;
    justify-items: end;
}
.roulet-box>.roulet-buttons>.top>.button>.go>p {
    font-family: Archive;
    color: #ffffffc7;
    font-size: 1rem;
    font-weight: 300;
}
.roulet-box>.roulet-buttons>.top>.button>.go>span {
    color: #ffffff85;
    font-size: .7rem;
    font-weight: 300;
}

.roulet-box>.roulette {
    width: 100%;
    height: 100%;
    background: #161616;
    border-radius: .5rem;
    /* box-shadow: 0px 0px 17px 0px #dd3b1c2b inset; */
    padding: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.roulet-box>.roulette>.mix {
    position: relative;
    max-width: 100%;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
}
.roulet-box>.roulette>.mix>.box {
	position: relative;
	width: 25%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.roulet-box>.roulette>.mix>.box::before {
	content: "";
	width: 80%;
	height: 69%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.roulet-box>.roulette>.mix>.box.show::before {
	opacity: .3;
	translate: all .3s;
}
.roulet-box>.roulette>.mix>.box[data-id="1"]::before {
	background-image: url(/site/img/boxes-free.png);
}
.roulet-box>.roulette>.mix>.box[data-id="2"]::before {
	background-image: url(/site/img/boxes-star.png);
}
.roulet-box>.roulette>.mix>.box[data-id="3"]::before {
	background-image: url(/site/img/boxes-gold.png);
}
.roulet-box>.roulette>.mix>.box[data-id="4"]::before {
	background-image: url(/site/img/boxes-tanks.png);
}

.roulet-box>.roulette>.mix>.box>.item {
	display: none;
	position: absolute;
	top: 0rem;
	width: 80%;
}
.roulet-box>.roulette>.mix>.box>.item>.free {
    position: absolute;
    text-align: center;
    font-family: Archive;
    font-size: .8rem;
    color: #d1a452;
    width: 100%;
    top: 0.5rem;
}
.roulet-box>.roulette>.mix>.box>.item>.img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.roulet-box>.roulette>.mix>.box>.item>.img>img {
    width: 7rem;
}
.roulet-box>.roulette>.mix>.box>.item>.name {
    position: relative;
    text-align: center;
    color: #fff;
    padding-bottom: 0.5rem;
    top: -.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roulet-box>.roulette>.mix>.box>.item>.name>span {
    font-family: Archive;
    font-size: .8rem;
}
.roulet-box>.roulette>.mix>.box>.item>.gold {
	display: flex;
	gap: .3rem;
	align-items: center;
	color: #D1A452;
	justify-content: center;
	position: relative;
	top: -.7rem;
}
.roulet-box>.roulette>.mix>.box>.item>.gold>svg {
    height: 1rem;
    width: 1rem;
}
.roulet-box>.roulette>.mix>.box>.item>.gold>span {
    font-family: Archive;
}


.roulet-box>.roulette>.mix.mixing>.box {
	position: absolute;
	cursor: pointer;
}
.roulet-box>.roulette>.mix.choice>.box:hover {
	animation: shake 2s;
	animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg) scale(1.05); }
  10% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.05); }
  20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.1); }
  30% { transform: translate(3px, 2px) rotate(0deg) scale(1.1); }
  40% { transform: translate(1px, -1px) rotate(1deg) scale(1.1); }
  50% { transform: translate(-1px, 2px) rotate(-1deg) scale(1.1); }
  60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.1); }
  70% { transform: translate(3px, 1px) rotate(-1deg) scale(1.1); }
  80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.1); }
  90% { transform: translate(1px, 2px) rotate(0deg) scale(1.1); }
  100% { transform: translate(1px, -2px) rotate(-1deg) scale(1.1); }
}

.roulet-box>.roulette>.mix.choice>.box::after {
	content: url('/site/img/arrow-case.svg');
	position: absolute;
	width: 1.5rem;
	height: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	top: -1.1rem;
	background-image: url('/site/img/arrow-case.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 7px;
	filter: drop-shadow(0px 0px 7px #9C7F2F);
	animation: ripples .5s infinite alternate;
}

@keyframes ripples {
    0% {
        background-position-y: 15px;
    }

    100% {
       background-position-y: 7px;
    }
}

.roulet-box>.roulette>.mix>.box.choice {
    filter: drop-shadow(0 0 39px #D1A452);
	transition: .2s;
}

.item-box {
    margin: 0 auto 0 auto;
    width: 1300px;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
}
.item-box>h1 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 1.7rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.item-box>h1>svg {
    width: 1.2rem;
    height: 1.2rem;
    color: #dd3b1c;
}
.item-box>p {
    font-family: 'Rubik';
    color: var(--live-light);
    font-size: 1rem;
    font-weight: 300;
}
.item-box>.item {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    padding: 1rem 0rem;
}
.item-box>.item>.box {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    position: relative;
    background: #161616;
    border-radius: .5rem;
    overflow: hidden;
    /* box-shadow: 0px 0px 17px 0px #dd3b1c2b inset; */
    transition: .3s;
    cursor: pointer;
}
.item-box>.item>.box:hover {
    box-shadow: 0px 0px 28px 0px #dd3b1c6e inset;
}
.item-box>.item>.box>.img {
    position: absolute;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.item-box>.item>.box::after {
    z-index: 1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.item-box>.item>.box.us::after {
	background-image: url(/site/img/flag/flag-us.webp);
}
.item-box>.item>.box.ru::after {
	background-image: url(/site/img/flag/flag-ru.webp);
}
.item-box>.item>.box.fr::after {
	background-image: url(/site/img/flag/flag-fr.webp);
}
.item-box>.item>.box.cn::after {
	background-image: url(/site/img/flag/flag-cn.webp);
}
.item-box>.item>.box.sw::after {
	background-image: url(/site/img/flag/flag-sw.webp);
}
.item-box>.item>.box.jp::after {
	background-image: url(/site/img/flag/flag-jp.webp);
}
.item-box>.item>.box.cz::after {
	background-image: url(/site/img/flag/flag-cz.webp);
}
.item-box>.item>.box.en::after {
	background-image: url(/site/img/flag/flag-en.webp);
}
.item-box>.item>.box.pl::after {
	background-image: url(/site/img/flag/flag-pl.webp);
}
.item-box>.item>.box.it::after {
	background-image: url(/site/img/flag/flag-it.webp);
}
.item-box>.item>.box.sb::after {
	background-image: url(/site/img/flag/flag-sb.webp);
}
.item-box>.item>.box.ge::after {
	background-image: url(/site/img/flag/flag-ge.webp);
}
.item-box>.item>.box>.gold {
    position: absolute;
    right: 1rem;
    top: 1rem;
    color: var(--live-orange);););
    display: flex;
    align-items: center;
    gap: .3rem;
    z-index: 2;
}
.item-box>.item>.box>.gold>span {
    font-family: Archive;
    font-size: 1.1rem;
}
.item-box>.item>.box>.gold>svg {
    width: 1rem;
    height: 1rem;
}
.item-box>.item>.box>.name {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    font-family: 'Rubik';
    color: #fff;
    z-index: 2;
    font-size: .9rem;
}
.item-box>.item>.box>.level {
    position: absolute;
    width: max-content;
    font-family: 'Rubik';
    color: #ffffffb3;
    z-index: 2;
    left: 1rem;
    top: 1rem;
}

.footer-menu {
    background: rgb(22 22 22 / 62%);
    margin: 2rem 0rem 0 0rem;
}
.footer-menu>div {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    width: 1300px;
    height: 4.5rem;
    display: flex;
    align-items: center;
}
.footer-menu>div>ul {
    display: flex;
    gap: .3rem;
}
.footer-menu>div>ul>li>a {
    color: #a8a8a8;
    padding: .5rem;
    border: 2px solid transparent;
    transition: .3s;
    border-radius: .5rem;
    gap: .4rem;
    transform: skewX(-22deg);
    display: flex;
    align-items: center;
    font-weight: 500;
}
.footer-menu>div>ul>li>a>span {
	/* font-family: Archive; */
	font-size: 1rem;
	transform: skewX(22deg);
	display: flex;
	align-items: center;
	gap: .3rem;
}
.footer-menu>div>ul>li>a:hover, .footer-menu>div>ul>li>a.active {
    color: var(--menu-a);
    border: 2px solid var(--menu-a);
    border-radius: .5rem;
}
.footer-menu>div>ul>li>a>span>svg {
    width: 1.3rem;
    height: 1.3rem;
}
.footer-menu>div>.contact {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.footer-menu>div>.contact>a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: hsl(0deg 0% 85%);
    padding: .7rem 1rem;
    background: #121212;
    border-radius: .5rem;
    height: 2.7rem;
}
.footer-menu>div>.contact>a>span {
    z-index: 2;
}
.footer-menu>div>.contact>a>svg {
    width: 1.5rem;
    height: 1.5rem;
    z-index: 2;
}
.footer-menu>div>.contact>a:first-child::after {
	content: "";
	position: absolute;
	right: -9px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #121212;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
	transition: .3s;
}
.footer-menu>div>.contact>a:last-child::after {
	content: "";
	position: absolute;
	left: -9px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #121212;
	border-radius: .5rem;
	top: 0;
	z-index: 1;
	transition: .3s;
}
.footer-menu>div>.contact>a:hover {
    color: #101010;
    background: var(--menu-a);
}
.footer-menu>div>.contact>a:hover::after {
    background: var(--menu-a);
}
.raffle {
    margin: 0 auto 0 auto;
    width: 1300px;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
}
.raffle>.box {
    padding: 1.5rem;
    border-radius: 1rem;
}
.raffle>.box>h1 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 2rem;
    font-weight: 300;
    text-shadow: 0px 3px 3px #0000008a;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.raffle>.box>h1>span {
	font-family: Archive;
    color: var(--menu-a);
    font-size: 2.3rem;
    padding-top: .5rem;
}
.raffle>.box>.list-top {
    width: 70%;
    display: flex;
    margin: 0 auto;
    padding: 3rem 0 1.5rem 0;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}
.raffle>.box>.list-top>div {
    background: #161616;
    border-radius: .5rem;
    width: 11rem;
    height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--menu-a);
    box-shadow: 0px 2px 8px #0000008a;
}
.raffle>.box>.list-top>.top-1 {
}
.raffle>.box>.list-top>.top-2, .raffle>.box>.list-top>.top-3 {
    width: 10rem;
    height: 10rem;
}
.raffle>.box>.list-top>.top-4, .raffle>.box>.list-top>.top-5 {
    width: 9rem;
    height: 9rem;
}

.raffle>.box>.list-top>div>img {
    width: 7rem;
    height: 7rem;
    position: relative;
    top: -18px;
    z-index: 1;
}
.raffle>.box>.list-top>div>.count {
    position: absolute;
    bottom: 1rem;
    color: var(--menu-a);
    font-family: Archive;
}
.raffle>.box>.list-top>div>.number {
    position: absolute;
    width: 3rem;
    height: 2.8rem;
    background: var(--menu-a);
    font-size: 1.5rem;
    top: -24px;
    border-radius: .5rem;
    z-index: 2;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.raffle>.box>.list-top>div>.number::after {
    content: "";
    background: url(/site/img/corona.svg);
    width: 64%;
    height: 100%;
    top: -16px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
}
.raffle>.box>.body {
    width: 70%;
    display: flex;
    margin: 0 auto;
    padding: 3rem 0 1.5rem 0;
    align-items: end;
    justify-content: center;
    gap: 3rem;
}
.raffle>.box>.body>div>h2 {
	text-align: center;
	font-family: Archive;
	color: var(--live-light);
	font-size: 1.8rem;
	font-weight: 300;
	text-shadow: 0px 3px 3px #000000;
}
.raffle>.box>.body>div>.data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--menu-a);
    padding-top: .5rem;
}
.raffle>.box>.body>div>.data>svg {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    box-shadow: 0px 3px 3px #0000008a;
    margin-right: .5rem;
}
.raffle>.box>.body>div>.data>span {
    font-size: 3rem;
    font-family: Archive;
    text-shadow: 0px 3px 3px #0000008a;
}
.raffle>.box>.body>div>.data>span:nth-child(3) {
    animation: data_animated .5s infinite alternate;
    position: relative;
    top: -5px;
}
@keyframes data_animated {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.raffle>.box>.flex {
    width: 70%;
    display: flex;
    margin: 0 auto;
    padding: 2rem 0 1.5rem 0;
    align-items: flex-start;
    justify-content: space-between;
}
.raffle>.box>.flex>.right>h2 {
    font-family: Archive;
    color: var(--menu-a);
    font-size: 1.3rem;
    font-weight: 300;
    text-shadow: 0px 3px 3px #000000;
    padding-bottom: 1rem;
}
.raffle>.box>.flex>.right>.user {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}
.raffle>.box>.flex>.right>.user>section {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.raffle>.box>.flex>.right>.user>section>span {
    width: 3rem;
    height: 3rem;
    background: #161616;
    border: 2px solid var(--menu-a);
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0px 0px 25px 0px #d1a45273 inset;
}
.raffle>.box>.flex>.right>.user>section>div {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.raffle>.box>.flex>.right>.user>section>div>.name {
    color: var(--menu-a);
    font-size: 1.2rem;
    font-weight: 500;
    text-shadow: 0px 3px 3px #000000;
}
.raffle>.box>.flex>.right>.user>section>div>.gold {
    color: #fff;
    font-size: .8rem;
    text-shadow: 0px 3px 3px #000000;
}

.raffle>.box>.flex>.left>.top-button {
    display: flex;
    align-items: center;
}
.raffle>.box>.flex>.left>.top-button>.step {
    min-width: 4.5rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    cursor: default;
}
.raffle>.box>.flex>.left>.top-button>.step {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2MyA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfaV8xNjAxXzM0MSkiPgo8cGF0aCBkPSJNMTEuOTUgMy42QzEyLjU3MjIgMS40NjY2NyAxNC41Mjc4IDAgMTYuNzUgMEg1Ny4wMTE2QzYwLjM0ODcgMCA2Mi43NDkzIDMuMjA2NzggNjEuODA5MSA2LjQwODcxTDUwLjY1MDkgNDQuNDA4N0M1MC4wMjU3IDQ2LjUzNzcgNDguMDcyMyA0OCA0NS44NTM0IDQ4SDUuNjY2NjdDMi4zMzMzNCA0OCAtMC4wNjY2NjY2IDQ0LjggMC44NjY2NjcgNDEuNkwxMS45NSAzLjZaIiBmaWxsPSIjMTYxNjE2Ii8+CjwvZz4KPHBhdGggZD0iTTE2Ljc1IDFINTcuMDExN0M1OS41OTc5IDEuMDAwMDYgNjEuNDgwNyAzLjQwNzQ5IDYwLjkxMjEgNS44ODY3Mkw2MC44NDk2IDYuMTI2OTVMNDkuNjkxNCA0NC4xMjdDNDkuMTkxMyA0NS44MzAxIDQ3LjYyODYgNDcgNDUuODUzNSA0N0g1LjY2Njk5QzMuMDgzNzEgNDcgMS4yMDEwNiA0NC41OTc2IDEuNzY0NjUgNDIuMTIwMUwxLjgyNzE1IDQxLjg3OTlMMTIuOTEwMiAzLjg3OTg4QzEzLjQwOCAyLjE3MzMgMTQuOTcyMyAxIDE2Ljc1IDFaIiBzdHJva2U9IiNEMUE0NTIiIHN0cm9rZS13aWR0aD0iMiIvPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9pXzE2MDFfMzQxIiB4PSIwLjY2MzU3NCIgeT0iMCIgd2lkdGg9IjYxLjM1MTMiIGhlaWdodD0iNDgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjU4LjUiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjgxOTYwOCAwIDAgMCAwIDAuNjQzMTM3IDAgMCAwIDAgMC4zMjE1NjkgMCAwIDAgMC4yNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzE2MDFfMzQxIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	margin-left: -.5rem;
}
.raffle>.box>.flex>.left>.top-button>.step[data-step="1"] {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA1MCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfaV8xNjAxXzMyMCkiPgo8cGF0aCBkPSJNMCA1QzAgMi4yMzg1OCAyLjIzODU4IDAgNSAwSDQ0LjAxMTZDNDcuMzQ4NyAwIDQ5Ljc0OTMgMy4yMDY3OCA0OC44MDkxIDYuNDA4NzFMMzcuNjUwOSA0NC40MDg3QzM3LjAyNTggNDYuNTM3NyAzNS4wNzIzIDQ4IDMyLjg1MzQgNDhINS4wMDAwMUMyLjIzODU4IDQ4IDAgNDUuNzYxNCAwIDQzVjVaIiBmaWxsPSIjMTYxNjE2Ii8+CjwvZz4KPHBhdGggZD0iTTUgMUg0NC4wMTE3QzQ2LjU5NzkgMS4wMDAwNiA0OC40ODA3IDMuNDA3NDkgNDcuOTEyMSA1Ljg4NjcyTDQ3Ljg0OTYgNi4xMjY5NUwzNi42OTE0IDQ0LjEyN0MzNi4xOTEzIDQ1LjgzMDEgMzQuNjI4NiA0NyAzMi44NTM1IDQ3SDVDMi43OTA4NiA0NyAxIDQ1LjIwOTEgMSA0M1Y1TDEuMDA0ODggNC43OTM5NUMxLjExMjEyIDIuNjgwNTYgMi44NTk5NiAxIDUgMVoiIHN0cm9rZT0iI0QxQTQ1MiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2lfMTYwMV8zMjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI0OS4wMTQ5IiBoZWlnaHQ9IjQ4IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1OC41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44MTk2MDggMCAwIDAgMCAwLjY0MzEzNyAwIDAgMCAwIDAuMzIxNTY5IDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0MV9pbm5lclNoYWRvd18xNjAxXzMyMCIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	min-width: 4rem;
	padding-right: .5rem;
	margin-left: 0;
	margin-right: -.2rem;
}
.raffle>.box>.flex>.left>.top-button>button {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMTgwIDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9pXzE2MDFfMzIzKSI+CjxwYXRoIGQ9Ik0xMi41NTI5IDMuNTI4ODRDMTMuMTk4NyAxLjQzMTI1IDE1LjEzNjggMCAxNy4zMzE2IDBIMTc0LjE5OUMxNzcuNTcyIDAgMTc5Ljk3OCAzLjI3MTcyIDE3OC45NzEgNi40OTEzN0wxNjcuMDk2IDQ0LjQ5MTRDMTY2LjQ0NCA0Ni41Nzg4IDE2NC41MTEgNDggMTYyLjMyNCA0OEg1LjYzMjk1QzIuMjY4NiA0OCAtMC4xMzU2MzEgNDQuNzQ0MyAwLjg1NDI2NCA0MS41Mjg4TDEyLjU1MjkgMy41Mjg4NFoiIGZpbGw9IiMxNjE2MTYiLz4KPC9nPgo8cGF0aCBkPSJNMTcuMzMxOCAxSDE3NC4xOTlDMTc2LjgxMyAxIDE3OC43MDEgMy40NTYwOCAxNzguMDg1IDUuOTUxMTdMMTc4LjAxNyA2LjE5MzM2TDE2Ni4xNDIgNDQuMTkzNEMxNjUuNjIgNDUuODYzMiAxNjQuMDczIDQ3IDE2Mi4zMjQgNDdINS42MzI1N0MzLjAyNTQ0IDQ2Ljk5OTggMS4xMzk0MiA0NC41NTU3IDEuNzQzOSA0Mi4wNjQ1TDEuODEwMyA0MS44MjMyTDEzLjUwODUgMy44MjMyNEMxNC4wMjUyIDIuMTQ1MTcgMTUuNTc2IDEgMTcuMzMxOCAxWiIgc3Ryb2tlPSIjRDFBNDUyIiBzdHJva2Utd2lkdGg9IjIiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV8xNjAxXzMyMyIgeD0iMC42Mjk2MzkiIHk9IjAiIHdpZHRoPSIxNzguNTczIiBoZWlnaHQ9IjQ4IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1OC41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44MTk2MDggMCAwIDAgMCAwLjY0MzEzNyAwIDAgMCAwIDAuMzIxNTY5IDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0MV9pbm5lclNoYWRvd18xNjAxXzMyMyIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	width: 13rem;
	color: #fff;
	padding: 1rem;
	height: 100%;
	display: block;
	min-height: 3.5rem;
	margin-left: -.5rem;
}
.raffle>.box>.flex>.left:not([data-level="succes"])>.top-button>button:hover {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMTgwIDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9pXzE2MDFfMzIzKSI+CjxwYXRoIGQ9Ik0xMi41NTI5IDMuNTI4ODRDMTMuMTk4NyAxLjQzMTI1IDE1LjEzNjggMCAxNy4zMzE2IDBIMTc0LjE5OUMxNzcuNTcyIDAgMTc5Ljk3OCAzLjI3MTcyIDE3OC45NzEgNi40OTEzN0wxNjcuMDk2IDQ0LjQ5MTRDMTY2LjQ0NCA0Ni41Nzg4IDE2NC41MTEgNDggMTYyLjMyNCA0OEg1LjYzMjk1QzIuMjY4NiA0OCAtMC4xMzU2MzEgNDQuNzQ0MyAwLjg1NDI2NCA0MS41Mjg4TDEyLjU1MjkgMy41Mjg4NFoiIGZpbGw9IiMxNjE2MTYiLz4KPC9nPgo8cGF0aCBkPSJNMTcuMzMxOCAxSDE3NC4xOTlDMTc2LjgxMyAxIDE3OC43MDEgMy40NTYwOCAxNzguMDg1IDUuOTUxMTdMMTc4LjAxNyA2LjE5MzM2TDE2Ni4xNDIgNDQuMTkzNEMxNjUuNjIgNDUuODYzMiAxNjQuMDczIDQ3IDE2Mi4zMjQgNDdINS42MzI1N0MzLjAyNTQ0IDQ2Ljk5OTggMS4xMzk0MiA0NC41NTU3IDEuNzQzOSA0Mi4wNjQ1TDEuODEwMyA0MS44MjMyTDEzLjUwODUgMy44MjMyNEMxNC4wMjUyIDIuMTQ1MTcgMTUuNTc2IDEgMTcuMzMxOCAxWiIgc3Ryb2tlPSIjREQzQjFDIiBzdHJva2Utd2lkdGg9IjIiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV8xNjAxXzMyMyIgeD0iMC42Mjk2MzkiIHk9IjAiIHdpZHRoPSIxNzguNTczIiBoZWlnaHQ9IjQ4IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1OC41Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44NjY2NjcgMCAwIDAgMCAwLjIzMTM3MyAwIDAgMCAwIDAuMTA5ODA0IDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0MV9pbm5lclNoYWRvd18xNjAxXzMyMyIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0px 0px 7px var(--live-orange));
}


.raffle>.box>.flex>.left>.top-button>button>span {
	font-size: 1.2rem;
	font-family: Archive;
}
.raffle>.box>.flex>.left>.top-button>button[btn-step="3"]>span {
	font-size: .85rem;
}
.raffle>.box>.flex>.left>.step-text {
    padding-top: .7rem;
}
.raffle>.box>.flex>.left>.step-text>h2 {
    color: #fff;
    font-weight: 500;
}
.raffle>.box>.flex>.left>.step-text>p {
    color: #fff;
    padding-top: .3rem;
}
.raffle>.box>.flex>.left>.step-text>p>a {
    color: var(--menu-a);
}

.raffle>.box>.flex>[data-level="1"]>.top-button>[btn-step="2"],
.raffle>.box>.flex>[data-level="1"]>.top-button>[btn-step="3"],
.raffle>.box>.flex>[data-level="1"]>.top-button>[btn-step="4"],
.raffle>.box>.flex>[data-level="2"]>.top-button>[btn-step="1"],
.raffle>.box>.flex>[data-level="2"]>.top-button>[btn-step="3"],
.raffle>.box>.flex>[data-level="2"]>.top-button>[btn-step="4"],
.raffle>.box>.flex>[data-level="3"]>.top-button>[btn-step="1"],
.raffle>.box>.flex>[data-level="3"]>.top-button>[btn-step="2"],
.raffle>.box>.flex>[data-level="3"]>.top-button>[btn-step="4"],
.raffle>.box>.flex>[data-level="4"]>.top-button>[btn-step="1"],
.raffle>.box>.flex>[data-level="4"]>.top-button>[btn-step="2"],
.raffle>.box>.flex>[data-level="4"]>.top-button>[btn-step="3"],
.raffle>.box>.flex>[data-level="1"]>.step-text>[step-text="2"],
.raffle>.box>.flex>[data-level="1"]>.step-text>[step-text="3"],
.raffle>.box>.flex>[data-level="1"]>.step-text>[step-text="4"],
.raffle>.box>.flex>[data-level="2"]>.step-text>[step-text="1"],
.raffle>.box>.flex>[data-level="2"]>.step-text>[step-text="3"],
.raffle>.box>.flex>[data-level="2"]>.step-text>[step-text="4"],
.raffle>.box>.flex>[data-level="3"]>.step-text>[step-text="1"],
.raffle>.box>.flex>[data-level="3"]>.step-text>[step-text="2"],
.raffle>.box>.flex>[data-level="3"]>.step-text>[step-text="4"],
.raffle>.box>.flex>[data-level="4"]>.step-text>[step-text="1"],
.raffle>.box>.flex>[data-level="4"]>.step-text>[step-text="2"],
.raffle>.box>.flex>[data-level="4"]>.step-text>[step-text="3"],
.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="1"],
.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="2"],
.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="3"],
.raffle>.box>.flex>[data-level="succes"]>.top-button>[data-step="4"],
.raffle>.box>.flex>[data-level="succes"]>.step-text>[step-text="1"],
.raffle>.box>.flex>[data-level="succes"]>.step-text>[step-text="2"],
.raffle>.box>.flex>[data-level="succes"]>.step-text>[step-text="3"] {
	display: none;
}

.raffle>.box>.flex>[data-level="succes"]>.top-button>.step {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2MyA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfaV8xNjAxXzMwOSkiPgo8cGF0aCBkPSJNMTEuOTUgMy42QzEyLjU3MjIgMS40NjY2NyAxNC41Mjc4IDAgMTYuNzUgMEg1Ny4wMTE2QzYwLjM0ODcgMCA2Mi43NDkzIDMuMjA2NzggNjEuODA5MSA2LjQwODcxTDUwLjY1MDkgNDQuNDA4N0M1MC4wMjU3IDQ2LjUzNzcgNDguMDcyMyA0OCA0NS44NTM0IDQ4SDUuNjY2NjdDMi4zMzMzNCA0OCAtMC4wNjY2NjY2IDQ0LjggMC44NjY2NjcgNDEuNkwxMS45NSAzLjZaIiBmaWxsPSIjMTYxNjE2Ii8+CjwvZz4KPHBhdGggZD0iTTE2Ljc1IDFINTcuMDExN0M1OS41OTc5IDEuMDAwMDYgNjEuNDgwNyAzLjQwNzQ5IDYwLjkxMjEgNS44ODY3Mkw2MC44NDk2IDYuMTI2OTVMNDkuNjkxNCA0NC4xMjdDNDkuMTkxMyA0NS44MzAxIDQ3LjYyODYgNDcgNDUuODUzNSA0N0g1LjY2Njk5QzMuMDgzNzEgNDcgMS4yMDEwNiA0NC41OTc2IDEuNzY0NjUgNDIuMTIwMUwxLjgyNzE1IDQxLjg3OTlMMTIuOTEwMiAzLjg3OTg4QzEzLjQwOCAyLjE3MzMgMTQuOTcyMyAxIDE2Ljc1IDFaIiBzdHJva2U9IiM3Njk4MzgiIHN0cm9rZS13aWR0aD0iMiIvPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9pXzE2MDFfMzA5IiB4PSIwLjY2MzU3NCIgeT0iMCIgd2lkdGg9IjYxLjM1MTMiIGhlaWdodD0iNDgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjU4LjUiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjQ2Mjc0NSAwIDAgMCAwIDAuNTk2MDc4IDAgMCAwIDAgMC4yMTk2MDggMCAwIDAgMC40NiAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzE2MDFfMzA5Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.raffle>.box>.flex>[data-level="succes"]>.top-button>.step[data-step="1"] {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA1MCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfaV8xNjAxXzI4NykiPgo8cGF0aCBkPSJNMCA1QzAgMi4yMzg1OCAyLjIzODU4IDAgNSAwSDQ0LjAxMTZDNDcuMzQ4NyAwIDQ5Ljc0OTMgMy4yMDY3OCA0OC44MDkxIDYuNDA4NzFMMzcuNjUwOSA0NC40MDg3QzM3LjAyNTggNDYuNTM3NyAzNS4wNzIzIDQ4IDMyLjg1MzQgNDhINS4wMDAwMUMyLjIzODU4IDQ4IDAgNDUuNzYxNCAwIDQzVjVaIiBmaWxsPSIjMTYxNjE2Ii8+CjwvZz4KPHBhdGggZD0iTTUgMUg0NC4wMTE3QzQ2LjY4MTQgMS4wMDAwNiA0OC42MDE3IDMuNTY1NDQgNDcuODQ5NiA2LjEyNjk1TDM2LjY5MTQgNDQuMTI3QzM2LjE5MTMgNDUuODMwMSAzNC42Mjg2IDQ3IDMyLjg1MzUgNDdINUMyLjc5MDg2IDQ3IDEgNDUuMjA5MSAxIDQzVjVDMSAyLjg1OTk2IDIuNjgwNTYgMS4xMTIxMSA0Ljc5Mzk1IDEuMDA0ODhMNSAxWiIgc3Ryb2tlPSIjNzY5ODM4IiBzdHJva2Utd2lkdGg9IjIiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV8xNjAxXzI4NyIgeD0iMCIgeT0iMCIgd2lkdGg9IjQ5LjAxNDkiIGhlaWdodD0iNDgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjU4LjUiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjQ2Mjc0NSAwIDAgMCAwIDAuNTk2MDc4IDAgMCAwIDAgMC4yMTk2MDggMCAwIDAgMC40NiAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzE2MDFfMjg3Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="4"] {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk2IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMTk2IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9pXzE2MDFfMzM3KSI+CjxwYXRoIGQ9Ik0xMS40NzQ1IDMuNjQ2MjdDMTIuMDgxIDEuNDg5ODcgMTQuMDQ3NyAwIDE2LjI4NzcgMEgxOTFDMTkzLjc2MSAwIDE5NiAyLjIzODU4IDE5NiA1VjI0VjQzQzE5NiA0NS43NjE0IDE5My43NjEgNDggMTkxIDQ4SDUuNjAwMjNDMi4yODY5MyA0OCAtMC4xMTAwNzYgNDQuODM1OCAwLjc4Njk4NiA0MS42NDYzTDExLjQ3NDUgMy42NDYyN1oiIGZpbGw9IiMxNjE2MTYiLz4KPC9nPgo8cGF0aCBkPSJNMTYuMjg4MSAxSDE5MUMxOTMuMjA5IDEgMTk1IDIuNzkwODYgMTk1IDVWNDNDMTk1IDQ1LjIwOTEgMTkzLjIwOSA0NyAxOTEgNDdINS42MDA1OUMzLjAzMjggNDcgMS4xNTMwMSA0NC42MjQ1IDEuNjkwNDMgNDIuMTU2MkwxLjc1IDQxLjkxN0wxMi40Mzc1IDMuOTE2OTlDMTIuOTIyNyAyLjE5MTk0IDE0LjQ5NjEgMSAxNi4yODgxIDFaIiBzdHJva2U9IiM3Njk4MzgiIHN0cm9rZS13aWR0aD0iMiIvPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9pXzE2MDFfMzM3IiB4PSIwLjU5NzE2OCIgeT0iMCIgd2lkdGg9IjE5NS40MDMiIGhlaWdodD0iNDgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldC8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjU4LjUiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjQ2Mjc0NSAwIDAgMCAwIDAuNTk2MDc4IDAgMCAwIDAgMC4yMTk2MDggMCAwIDAgMC40NiAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzE2MDFfMzM3Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 14.5rem;
}
.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="4"]>span {
	font-family: Archive;
	color: #769838;
}
.raffle>.box>.flex>[data-level="succes"]>.top-button>.step, .raffle>.box>.flex>[data-level="succes"]>.step-text>h2[step-text="4"] {
	color: #769838;
}
.raffle>.box>.flex>[data-level="2"]>.top-button>[data-step="1"]::after,
.raffle>.box>.flex>[data-level="3"]>.top-button>[data-step="1"]::after,
.raffle>.box>.flex>[data-level="succes"]>.top-button>[data-step="1"]::after {
	content: "\2714";
	color: #a5db44;
	position: absolute;
	top: 2px;
	right: 9px;
	font-size: 1rem;
}
.raffle>.box>.flex>[data-level="3"]>.top-button>[data-step="2"]::after,
.raffle>.box>.flex>[data-level="succes"]>.top-button>[data-step="2"]::after,
.raffle>.box>.flex>[data-level="succes"]>.top-button>[data-step="3"]::after {
	content: "\2714";
	color: #a5db44;
	position: absolute;
	top: 2px;
	right: 6px;
	font-size: 1rem;
}

.raffle>.box>.flex>[data-level="succes"]>.top-button>[btn-step="4"]::after {
	content: "\2714";
	color: #a5db44;
	position: absolute;
	top: 2px;
	right: 9px;
	font-size: 1rem;
}

footer>.footer {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    width: 1300px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 0rem;
}
footer>.footer>h1 {
    font-family: Archive;
    color: #afafaf;
    font-size: .9rem;
    font-weight: 300;
}
footer>.footer>p {
    font-family: Archive;
    color: #afafaf;
    font-size: .8rem;
    font-weight: 300;
}
footer>.footer>.other-links {
    display: flex;
    gap: .5rem;
}
footer>.footer>.other-links>a {
    color: var(--menu-a);
	font-size: .8rem;
}
footer>.footer>.other-links>a:hover {
    color: #ffdc9d;
}



.notifi {
    position: fixed;
    bottom: 1.5rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    z-index: 10;
    align-items: flex-end;
}
.notifi .message {
    width: max-content;
    height: 4rem;
    display: flex;
    padding: 0.5rem 1.5rem 0.5rem 0.8rem;
    box-sizing: border-box;
    font-weight: 400;
    border-radius: .5rem;
    background: #262625;
    color: #ffffff;
    text-align: center;
    filter: drop-shadow(0px 0px 7px #000);
    transform:skewX(-22deg);
    align-items: center;
}
.notifi .message.error {
    #F94141
    color: #fe3f3f;
    border-left: 7px solid;
    color: #e53232;
}
.notifi .message.succes {
    
color: #33985C;
    
border-left: 7px solid;
}

.notifi .message.open {
    transform: translateX(200%);
    animation: messageani .5s forwards;
    cursor: pointer;
}
.notifi .message>p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4rem;
}
@keyframes messageani {
	0% {transform: translateX(200%);}
	80% {transform: skewX(-22deg);}
	100% {transform: translateX(0) skewX(0);}
}

.notifi .message.reload {
    transform: translateX(0);
	animation: messageanim .5s forwards;
}
@keyframes messageanim {
	0% {transform: translateX(0);}
	100% {transform: translateX(200%);}
}

.box-body {
	margin: 0 auto 0 auto;
	width: 1300px;
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
	flex: 1 0 auto;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-content: center;
}
.box-body.profile, .box-body.payment {
	align-content: normal;
}
.referal>.box-body {
	justify-content: space-between;
	flex-direction: row;
}
.box-body>.box {
	padding: 0 1.5rem 1.5rem 1.5rem;
	border-radius: 1rem;
	width: 100%;
}
.box-body>.box>h1 {
	font-family: Archive;
	color: var(--live-light);
	font-size: 1.5rem;
	font-weight: 300;
	text-shadow: 0px 3px 3px #0000008a;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}


.payment>section {
	display: flex;
	gap: 1rem;
}
.payment>section>.left {
    width: 62%;
}
.payment>section>.left>ul {
    display: flex;
    background: rgb(22 22 22 / 62%);
    width: max-content;
    gap: .3rem;
    border-radius: .8rem;
    padding: .5rem;
}
.payment>section>.left>ul>li {
    min-width: 6rem;
}
.payment>section>.left>ul>li>a {
    font-family: Archive;
    color: #ffffffb3;
    padding: .6rem 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: center;
    border-radius: .6rem;
    transition: .3s;
}
.payment>section>.left>ul>li>a>svg {
    width: 1rem;
    height: 1rem;
    color: #D1A452;
    transition: .3s;
}
.payment>section>.left>ul>li>a:hover, .payment>section>.left>ul>li>a.active {
    background: #D1A452;
    color: #000;
}
.payment>section>.left>ul>li>a:hover>svg, .payment>section>.left>ul>li>a.active>svg {
    color: #000;
}
.payment>section>.left>.metod {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem 0rem;
}
.payment>section>.left>.metod>.pay-box {
    background: rgb(22 22 22 / 62%);
    padding: 1.3rem 1rem 2.5rem 1rem;
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: #ffffff69;
    transition: .3s;
}
.payment>section>.left>.metod>.pay-box:hover, .payment>section>.left>.metod>.pay-box.active {
    background: rgb(0 0 0 / 62%);
    color: #fff;
}
.payment>section>.left>.metod>.pay-box>img {
    height: 2.7rem;
}
.payment>section>.left>.metod>.pay-box>span {
    position: absolute;
    bottom: 1rem;
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
}
.payment>section>.right {
    width: 54%;
    background: rgb(22 22 22 / 62%);
    padding: 1.5rem;
    border-radius: .7rem;
}
.payment>section>.right>.pay-form>h1 {
    font-family: Archive;
    color: var(--live-light);
    font-size: 1rem;
    text-align: center;
    font-weight: 300;
    padding-bottom: 1rem;
}
.payment>section>.right>.pay-form>h1>span {
    font-family: Archive;
}
.payment>section>.right>.pay-form>.form-box {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}
.payment>section>.right>.pay-form>.form-box>.block {
    position: relative;
    display: flex;
    align-items: center;
    left: 7px;
    width: 100%;
    background: #151515;
    border-radius: .5rem;
    transform: skewX(-22deg);
}
.payment>section>.right>.pay-form>.form-box>.block::after {
	content: "";
	position: absolute;
	left: -8px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #151515;
	border-radius: .5rem;
}
.payment>section>.right>.pay-form>.form-box>.block>.label {
    position: absolute;
    left: .8rem;
    color: #D1A452;
    transform: skewX(22deg);
    z-index: 1;
}
.payment>section>.right>.pay-form>.form-box>.block>.label>svg {
    width: 1.4rem;
    height: 1.4rem;
}
.payment>section>.right>.pay-form>.form-box>.block>input {
    width: 100%;
    background: transparent;
    padding: 0.9rem 0.7rem 0.9rem 2.7rem;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    color: #D1A452;
    font-weight: 500;
    font-family: Archive;
    transform: skewX(22deg);
}
.payment>section>.right>.pay-form>.form-box>.block>input::after {
    content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: .5rem;
	left: 0;
	top: 0;
	z-index: -1;
	background-repeat: no-repeat;
}
.payment>section>.right>.pay-form>.form-box>button {
    position: relative;
    padding: 0.7rem 1.1rem 0.7rem 1.6rem;
    border: none;
    color: #ffffffc9;
    font-family: Archive;
    border-radius: .5rem;
    right: 7px;
}
.payment>section>.right>.pay-form>.form-box>button:disabled {
    color: #75757552;
    cursor: default;
}
.payment>section>.right>.pay-form>.form-box>button::after {
	content: "";
	position: absolute;
	transform: skewX(-22deg);
	background: #151515;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: .5rem;
	transition: .3s;
}
.payment>section>.right>.pay-form>.form-box>button::before {
	content: "";
	position: absolute;
	background: #151515;
	width: 2rem;
	height: 100%;
	right: -7px;
	top: 0;
	border-radius: .5rem;
	transition: .3s;
}

.payment>section>.right>.pay-form>.form-box>button:not(:disabled):hover::after, .payment>section>.right>.pay-form>.form-box>button:not(:disabled):hover::before {
	background: #D1A452;
}
.payment>section>.right>.pay-form>.form-box>button:not(:disabled):hover {
	color: #000;
}
.payment>section>.right>.pay-form>.form-box>button>span {
	position: relative;
	font-family: Archive;
	z-index: 1;
}
.payment>section>.right>.pay-form>.form-box>.block>.promo-bonuse {
    transform: skewX(22deg);
    padding-right: 1rem;
}
.payment>section>.right>.pay-form>.form-box>.block>.promo-bonuse.hidden {
    display: none;
}
.payment>section>.right>.pay-form>.form-box>.block>.promo-bonuse>p {
    display: flex;
    font-size: .9rem;
    font-weight: 400;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    color: #33985C;
}
.payment>section>.right>.pay-form>.snoska {
	padding: 1rem 0;
}
.payment>section>.right>.pay-form>.snoska>span {
	color: #F94141;
}
.payment>section>.right>.pay-form>.form-box-all {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #151515;
    border-radius: .5rem;
}
.payment>section>.right>.pay-form>.form-box-all>.label {
    position: absolute;
    left: 1.4rem;
    color: #D1A452;
    z-index: 1;
}
.payment>section>.right>.pay-form>.form-box-all>.label>svg {
    width: .9rem;
    height: .9rem;
}
.payment>section>.right>.pay-form>.form-box-all>input {
	width: 100%;
	padding: 0.9rem 0.7rem 0.9rem 3.2rem;
	border: none;
	font-size: 1rem;
	color: #D1A452;
	font-weight: 500;
	font-family: Archive;
	background: #151515;
	border-radius: .5rem;
}
.payment>section>.right>.pay-form>.form-box>.block>input::placeholder, .payment>section>.right>.pay-form>.form-box-all>input::placeholder {
	color: #ffffff33;
}
.payment>section>.right>.pay-form>.button {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .5rem;
	padding: 1rem 6px;
}
.payment>section>.right>.pay-form>.button>div {
	transform: skewX(-22deg);
	background: #151515;
	width: 100%;
	height: 2.5rem;
	border-radius: 0.5rem;
	transition: .3s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffffc9;
	cursor: pointer;
	gap: .3rem;
}
.payment>section>.right>.pay-form>.button>div>span {
	transform: skewX(22deg);
	font-family: Archive;
	font-size: 1rem;
	z-index: 1;
	position: relative;
}
.payment>section>.right>.pay-form>.button>div>span:last-child {
	font-family: 'Rubik';
	font-weight: 500;
}

.payment>section>.right>.pay-form>.button>div:first-child::after {
	content: "";
	position: absolute;
	background: #151515;
	width: 2rem;
	height: 100%;
	left: -6px;
	top: 0;
	border-radius: 0.5rem 0 0 .5rem;
	transition: .3s;
	transform: skewX(22deg);
}
.payment>section>.right>.pay-form>.button>div:last-child::before {
	content: "";
	position: absolute;
	background: #151515;
	width: 2rem;
	height: 100%;
	right: -6px;
	top: 0;
	border-radius: 0.5rem;
	transition: .3s;
	transform: skewX(22deg);
}
.payment>section>.right>.pay-form>.button>div:first-child span {
	left: -4px;
}
.payment>section>.right>.pay-form>.button>div:last-child span {
	left: 5px;
}
.payment>section>.right>.pay-form>.button>div:hover {
	background: #D1A452;
	color: #000;
	filter: drop-shadow(0px 0px 7px #D1A452);
}
.payment>section>.right>.pay-form>.button>div:hover::after, .payment>section>.right>.pay-form>.button>div:hover::before {
	background: #d1a452;
}

.payment>section>.right>.pay-form>.form-box-all>.all-cost {
    width: 100%;
    padding: 0.9rem 0.7rem 0.9rem 1rem;
    border: none;
    font-size: 1rem;
    color: #757575;
    font-weight: 500;
    font-family: Archive;
    background: #151515;
    border-radius: .5rem;
    display: flex;
    gap: .3rem;
}
.payment>section>.right>.pay-form>.form-box-all>.all-cost span {
    font-family: Archive;
}
.payment>section>.right>.pay-form>.form-box-all>.all-cost span:last-child {
    font-family: 'Rubik';
}
.payment>section>.right>.pay-form>.form-box-all>.all-cost>.balans-plus {
    color: #33985C;
}
.payment>section>.right>.pay-form>.form-box-all>.all-cost>.balans-plus.hidden {
    display: none;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse {
    display: flex;
    gap: 1.3rem;
    position: relative;
    padding-right: 1rem;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.hidden {
    display: none;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.key>p {
    color: #D1A452;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.key::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background: #2b2b2b;
    right: -13px;
    border-radius: 50%;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.procent>p {
    color: #33985C;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box>p {
    display: flex;
    gap: .2rem;
    font-size: .7rem;
    font-weight: 400;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box>.info {
	cursor: pointer;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box>.info>svg {
    width: 1.5rem;
    height: 1.5rem;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box>.info::after {
	content: attr(data-title);
	display: none;
}
.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box>.info:hover::after {
	position: absolute;
	display: block;
	bottom: 130%;
	left: 0;
	white-space: nowrap;
	color: #fff;
	font-size: .9rem;
	background: #323232;
	padding: .5rem 0.5rem;
	border-radius: .5rem;
}
.payment>section>.right>.pay-form>.footer {
    padding-top: 2rem;
}
.payment>section>.right>.pay-form>.footer>p {
    position: relative;
    color: #fff;
    padding: 1rem 1rem 1rem .8rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.payment>section>.right>.pay-form>.footer>p::after {
	content: "";
	position: absolute;
	left: 0;
	width: .4rem;
	height: .4rem;
	background: #D1A452;
	border-radius: 50%;
}
.payment>section>.right>.pay-form>.footer>button {
    display: flex;
    justify-content: center;
    width: 100%;
    font-weight: 500;
    font-family: Archive;
    background: #151515;
    border-radius: .5rem;
    padding: 0.9rem 0.7rem 0.9rem 1rem;
    font-size: 1.1rem;
    gap: .3rem;
    color: #757575;
	cursor: default;
}
.payment>section>.right>.pay-form>.footer>button:not(:disabled) {
    color: #000;
    background: #D1A452;
    cursor: pointer;
}
.payment>section>.right>.pay-form>.footer>button:not(:disabled):hover {
	filter: drop-shadow(0px 0px 7px #D1A452);
}
.payment>section>.right>.pay-form>.footer>button>p {
    font-family: Archive;
}

.profile>.block {
    display: flex;
    gap: 1rem;
}
.profile>.block>.user {
    display: flex;
    gap: 1.5rem;
    background: rgb(22 22 22 / 62%);
    padding: 1.3rem;
    border-radius: 1rem;
}
.profile>.block>.user>.photo {
    width: 7rem;
    height: 6.5rem;
    background: rgb(18 18 18);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    color: #dd3b1cad;
}
.profile>.block>.user>.photo>svg {
    width: 3rem;
    height: 3rem;
}
.profile>.block>.user>.setting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.profile>.block>.user>.setting>.name {
    font-family: Archive;
    font-size: 1.2rem;
    color: #fff;
}
.profile>.block>.user>.setting>.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1rem;
    width: 100%;
}
.profile>.block>.user>.setting>.two>a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121212;
    width: 100%;
    height: 2.5rem;
    color: #fff;
    border-radius: .5rem;
}
.profile>.block>.user>.setting>.two>a>svg {
    width: 1.2rem;
    height: 1.5rem;
}
.profile>.block>.user>.setting>.two>a:hover {
    filter: drop-shadow(0px 0px 7px #000);
}
.profile>.block>.user>.setting>.two>.profile-link {
}
.profile>.block>.form-gold {
    grid-column: 3 / 7;
    background: rgb(22 22 22 / 62%);
    padding: 1.3rem 1.6rem 1.3rem 1.3rem;
    border-radius: 1rem;
    width: max-content;
}
.profile>.block>.form-gold>h1 {
    font-family: Archive;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 300;
}
.profile>.block>.form-gold>h1>span {
    font-size: .8rem;
}
.profile>.block>.form-gold>section {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    align-items: flex-end;
}
.profile>.block>.form-gold>section>.step>.label {
    padding-bottom: .3rem;
}
.profile>.block>.form-gold>section>.step>.label>span {
    font-family: Archive;
    font-size: .9rem;
    color: #ffffff96;
}
.profile>.block>.form-gold>section>.step>.input {
    position: relative;
    background: #151515;
    border-radius: .5rem;
    transform: skewX(-22deg);
    margin-left: 7px;
    height: 3rem;
}
.profile>.block>.form-gold>section>.step>.input>input {
    width: 100%;
    padding: 0.9rem;
    border: none;
    font-size: 1rem;
    color: #D1A452;
    font-weight: 500;
    font-family: Archive;
    background: transparent;
    border-radius: .5rem;
    transform: skewX(22deg);
    z-index: 1;
}
.profile>.block>.form-gold>section>.step>.input>a {
	
display: block;
	
transform: skewX(22deg);
	
position: absolute;
	
right: .8rem;
	
bottom: 13px;
}
.profile>.block>.form-gold>section>.step>.input>a>svg {
	width: 1.5rem;
    height: 1.5rem;
}
.profile>.block>.form-gold>section>.step>.input>a::after {
    content: attr(data-title);
	display: none;
}
.profile>.block>.form-gold>section>.step>.input>a:hover::after {
    position: absolute;
    display: block;
    bottom: 170%;
    left: -8rem;
    white-space: nowrap;
    color: #fff;
    font-size: .9rem;
    background: #323232;
    padding: .5rem 0.5rem;
    border-radius: .5rem;
}
.profile>.block>.form-gold>section>.step.left>.input>input {
    padding: 0.9rem 0.9rem 0.9rem 0.3rem;
}
.profile>.block>.form-gold>section>.step.left>.input:after {
	content: "";
	position: absolute;
	left: -8px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #151515;
	border-radius: .5rem;
	z-index: -1;
}
.profile>.block>.form-gold>section>.step.right>.label {
    padding-left: 1rem;
}
.profile>.block>.form-gold>section>button {
    position: relative;
    color: #000;
    background: #D1A452;
    padding: 1rem .8rem 1rem 1.5rem;
    border-radius: .5rem;
    transform: skewX(-22deg);
    margin-left: .5rem;
    display: flex;
    gap: .3rem;
}
.profile>.block>.form-gold>section>button::before {
	content: "";
	position: absolute;
	right: -8px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #d1a452;
	border-radius: .5rem;
	top: 0;
}
.profile>.block>.form-gold>section>button>span {
    position: relative;
    display: block;
    font-weight: 500;
    font-family: Archive;
    transform: skewX(22deg);
    left: 5px;
    padding-right: .3rem;
    top: 1px;
}
.profile>.block>.form-gold>section>button:hover {
    filter: drop-shadow(0px 0px 7px #D1A452);
}
.profile>.block>.form-gold>section>button>svg {
    width: 1.1rem;
    height: 1rem;
    transform: skewX(22deg);
}


.profile>.form-case {
    background: rgb(22 22 22 / 62%);
    padding: 1.3rem;
    border-radius: 1rem;
    margin-top: 2rem;
}
.profile>.form-case>h1 {
	font-family: Archive;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 300;
}
.profile>.form-case>section {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}
.profile>.form-case>section>.item {
    position: relative;
    background-color: #121212;
    padding: 2rem 1rem 1rem 1rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
	background-position-y: 1rem;
}
.profile>.form-case>section>.item>.name {
    color: #ffffff;
    font-weight: 400;
}
.profile>.form-case>section>.item>.img>img {
    width: 6rem;
    height: 6rem;
}
.profile>.form-case>section>.item>.gold {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    color: var(--live-orange);
    gap: .3rem;
}
.profile>.form-case>section>.item>.gold>span {
    font-family: Archive;
    font-size: 1.1rem;
}
.profile>.form-case>section>.item>.gold>svg {
    width: .85rem;
    height: .9rem;
}

.faq {
    width: 60%;
    margin: 0 auto;
    display: grid;
    gap: .5rem;
}
.faq>.block {
    background: #161616;
    border-radius: 1rem;
    cursor: pointer;
}
.faq>.block>.top {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem;
}
.faq>.block>.top>.box {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    background: #1c1c1c;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D1A452;
}
.faq>.block>.top>.box>span {
    font-size: 1.1rem;
    font-family: Archive;
}
.faq>.block>.top>h2 {
    color: hsl(0deg 0% 85%);
    font-family: Archive;
    font-weight: 300;
    font-size: 1.2rem;
}
.faq>.block>.top>button {
    position: absolute;
    background: #121212;
    border-radius: 50%;
    padding: .2rem;
    color: #75757552;
    right: 1rem;
}
.faq>.block>.top>button>svg {
    width: 2rem;
    height: 2rem;
    transform: rotate(45deg);
}
.faq>.block.show>.top>button {
    transform: rotate(45deg);
    color: #d1a452;
    background: #2f2f2f;
}
.faq>.block>.hidden {
    max-height: 0;
    transition: max-height .2s ease-in-out;
    overflow: hidden;
}
.faq>.block.show>.hidden {
	max-height: 800px;
    transition: max-height .2s ease-in-out;
}
.faq>.block>.hidden>.body {
    display: flex;
    padding: 1rem;
    color: hsl(0deg 0% 85%);
    flex-direction: column;
    gap: .2rem;
    cursor: default;
    background: #121212;
    margin-top: 1rem;
    border-radius: .5rem;
}
.faq>.block>.hidden>.body>ul {
    display: flex;
    gap: .3rem;
    flex-direction: column;
    padding-left: 1rem;
}
.faq>.block>.hidden>.body>ul>li {
    list-style-type: decimal;
    padding-left: .2rem;
    line-height: 1.3rem;
}
.faq>.block>.hidden>.body>ul>li>a {
    color: #d1a452;
}
.faq>.block>.hidden>.body>p {
    line-height: 1.3rem;
}
.faq>.block>.hidden>.body>p>a {
    color: #d1a452;
}
.referal {
}
.ref {
    width: 60%;
}
.ref>h1 {
    color: #ff4825;
    font-family: Archive;
    font-weight: 300;
    font-size: 2.3rem;
    width: max-content;
    background: rgb(22 22 22 / 62%);
    padding: 1rem;
    border-radius: .5rem;
}
.ref>h1>span {
    font-family: Archive;
    color: #ffffff;
}
.ref>p {
    color: #ffffff;
    background: rgb(22 22 22 / 62%);
    padding: 1rem;
    border-radius: .5rem;
    width: 75%;
    margin-top: 1rem;
}
.ref>span {
    display: block;
    padding-top: 1rem;
    color: #fff;
    padding-bottom: .3rem;
}
.ref>.copy-link {
    display: flex;
}
.ref>.copy-link>p {
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    color: #D1A452;
    font-weight: 500;
    font-family: Archive;
    transform: skewX(-22deg);
    background: #181818;
    margin-left: .5rem;
}
.ref>.copy-link>p>span {
    width: 100%;
    position: relative;
    display: block;
    transform: skewX(22deg);
    z-index: 1;
    left: -7px;
}
.ref>.copy-link>p::after {
	content: "";
	position: absolute;
	left: -8px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #181818;
	border-radius: .5rem;
	top: 0;
}
.ref>.copy-link>button {
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    color: #000000;
    font-weight: 500;
    font-family: Archive;
    transform: skewX(-22deg);
    background: #D1A452;
    margin-left: .5rem;
}
.ref>.copy-link>button>span {
    position: relative;
    display: block;
    z-index: 1;
    left: 7px;
    transform: skewX(22deg);
}
.ref>.copy-link>button::after {
	content: "";
	position: absolute;
	right: -9px;
	height: 100%;
	width: 2rem;
	transform: skewX(22deg);
	background: #D1A452;
	border-radius: .5rem;
	top: 0;
}
.ref>.copy-link>button:hover {
	filter: drop-shadow(0px 0px 7px #D1A452);
}
.ref>.copy-link>button.show:before {
	content: attr(data-title);
	font-family: "Rubik", serif;
	position: absolute;
	bottom: 110%;
	transform: skewX(22deg);
	right: 5%;
	background: #181818;
	padding: .5rem;
	border-radius: .5rem;
	text-transform: none;
	font-size: .8rem;
	color: #fff;
	font-weight: 300;
}
.ref>.stat {
    border-radius: 1rem;
    margin-top: 3rem;
}
.ref>.stat>p {
    color: #fff;
    padding-bottom: .3rem;
}
.ref>.stat>.list {
    display: flex;
    gap: 1rem;
}
.ref>.stat>.list>.box {
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 10rem;
}
.ref>.stat>.list>.box>h1 {
    color: #D1A452;
    display: flex;
    gap: .3rem;
    font-family: Archive;
    align-items: flex-end;
}
.ref>.stat>.list>.box>h1>span {
	font-size: 1.5rem;
    font-weight: 500;
}
.ref>.stat>.list>.box>p {
    color: #fff;
    height: 3rem;
}

.table-ref {
    background: rgb(22 22 22 / 62%);
    padding: 1rem;
    border-radius: .5rem;
    height: max-content;
}
.table-ref>h1 {color: #fff;font-family: Archive;font-weight: 300;font-size: 1.2rem;width: max-content;border-radius: .5rem;}
.table-ref>table {
    padding-top: 1rem;
    border-spacing: 0;
}
.table-ref>table>thead {
}
.table-ref>table>thead>tr {
    background: #181818;
}
.table-ref>table>thead>tr>th {
    white-space: nowrap;
    color: #fff;
    padding: 1rem;
    font-weight: 500;
}
.table-ref>table>thead>tr>th:first-child {
    border-radius: 10px 0 0 10px;
}
.table-ref>table>thead>tr>th:last-child {
  border-radius: 0 10px 10px 0;
}
.table-ref>table>tbody>tr>td {
    padding: .7rem 1rem;
    color: #fff;
    font-weight: 500;
}
.table-ref>table>tbody>tr {
	background: #181818;
	border-radius: 1rem;
}

.table-ref>table>tbody>tr:nth-child(odd) {
    background: transparent;
}

.table-ref>table>tbody>tr>td:nth-child(2) {
    text-align: center;
}

.table-ref>table>tbody>tr>td:first-child {
    border-radius: 10px 0 0 10px;
}
.table-ref>table>tbody>tr>td:last-child {
  border-radius: 0 10px 10px 0;
}

.step-ref {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.step-ref>h1 {
    text-align: center;
    color: #ffffff;
    font-family: Archive;
    font-weight: 300;
    font-size: 2rem;
    padding-bottom: 2rem;
}
.step-ref>.box {
    display: flex;
    justify-content: space-between;
}
.step-ref>.box>section {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    width: 30%;
    background: rgb(22 22 22 / 62%);
    padding: 1.5rem;
    border-radius: .5rem;
    backdrop-filter: blur(5px);
}
.step-ref>.box>section>svg {
    width: 3rem;
    height: 3rem;
    color: #D1A452;
    margin: .5rem 1rem 1.5rem 1rem;
}
.step-ref>.box>section>h3 {
    color: #D1A452;
    padding-bottom: .5rem;
    font-family: Archive;
    font-weight: 300;
}
.step-ref>.box>section>p {
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 1.1rem;
}
.step-ref>.box>section::after {
	position: absolute;
	top: 3%;
	z-index: -2;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	background: radial-gradient(circle at center, #d1a452, rgba(255, 255, 255, 0) 70%);
	content: '';
	filter: blur(25px);
}

.text-box {
    width: 1000px;
    margin: 0 auto;
    color: hsl(0deg 0% 85%);
    background: rgb(22 22 22 / 62%);
    padding: 1.5rem;
    border-radius: 1rem;
    font-size: .9rem;
}
.text-box>p {
    padding-bottom: 1rem;
}
.text-box ol, .text-box ul {
	counter-reset: li;
}
.text-box>ol li {
	margin-top: 18px;
}
.text-box ol li:before {
    content: counters(li, '.') '. ';
    counter-increment: li;
    color: #D1A452;
}
.text-box ul li:before {
    display: inline-block;
    margin-right: 8px;
    margin-left: 1rem;
    height: 5px;
    width: 5px;
    border-radius: 3px;
    background: #D1A452;
    transform: translateY(-3px);
    content: '';
}
.text-box ul li {
    margin-top: 10px;
}
.text-box a {
    color: #D1A452;
}
.text-box a:hover {
    color: #d7bf92;
}
.text-box>.date {
	width: 100%;
    text-align: right;
    padding-top: .5rem;
}

.mobile-menu {
    width: 100%;
}
.mobile-menu>.mini {
    display: flex;
    justify-content: space-between;
    /* padding: .3rem 0rem 1rem 0rem; */
    margin: 0 auto;
    width: 95%;
}
.mobile-menu>.mini>.left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mobile-menu>.mini>.left>.menu-open {
    color: var(--live-light);
}
.mobile-menu>.mini>.left>.menu-open>svg {
    width: 1.3rem;
    height: 1.3rem;
}
.mobile-menu>.mini>.left>.logotype {
    display: flex;
    position: relative;
    align-items: center;
    bottom: 2px;
    flex-direction: column;
}
.mobile-menu>.mini>.left>.logotype>.name {
    position: relative;
    color: var(--live-light);
    font-family: Archive;
    font-size: 1.8rem;
    transition: .3s all;
}
.mobile-menu>.mini>.left>.logotype>.box {
    color: #dd3b1c;
    border-radius: 1rem 0.3rem 0.3rem 0;
    position: absolute;
    transition: .3s all;
    line-height: 1.4rem;
    bottom: -13px;
    right: 0;
}
.mobile-menu>.mini>.left>.logotype>.box>span {
	display: block;
	z-index: 2;
	position: relative;
	font-family: Archive;
	font-size: .8rem;
}
.mobile-menu>.mini>.left>.logotype>.box::after {
	position: absolute;
	left: -6px;
	height: 100%;
	width: 2rem;
	transform: skewX(-14deg);
	background: #dd3b1c;
	border-radius: .5rem .5rem .5rem 0;
	top: 0;
}
.mobile-menu>.mini>.right {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.mobile-menu>.mini>.right>.user-login-mobile {
    background: var(--live-bg);
    padding: .6rem .9rem;
    border-radius: .8rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mobile-menu>.mini>.right>.user-login-mobile>span {
    font-family: Archive;
    font-size: .8rem;
    padding-right: .5rem;
    color: #828282;
}
.mobile-menu>.mini>.right>.user-login-mobile>a {
    color: #0077FF;
    background: #262624;
    padding: .3rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-menu>.mini>.right>.user-login-mobile>a.wg {
    color: var(--live-orange);
}
.mobile-menu>.mini>.right>.user-login-mobile>a.lesta {
    color: #fff;
}
.mobile-menu>.mini>.right>.user-login-mobile>a>svg {
	width: 1.2rem;
	height: 1.2rem;
}


.mobile-menu>.mini>.right>.user-auth {
    display: flex;
    align-items: center;
    background: var(--live-bg);
    padding: .6rem;
    border-radius: .8rem;
    gap: .5rem;
    height: 2.8rem;
}
.mobile-menu>.mini>.right>.user-auth>.balans {
    position: relative;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 500;
    height: 1.3rem;
    padding-left: 8px;
    left: -5px;
    font-size: .9rem;
}
.mobile-menu>.mini>.right>.user-auth>.balans::after {
    content: "";
    position: relative;
    width: 1px;
    height: 100%;
    background: #ffffff24;
    right: -4px;
}
.mobile-menu>.mini>.right>.user-auth>.balans>.one {
    background: var(--live-orange);
    display: flex;
    width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    border-radius: .3rem;
    font-weight: 600;
    line-height: 1rem;
}
.mobile-menu>.mini>.right>.user-auth>.gold {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: #D1A452;
    font-weight: 500;
    font-size: .9rem;
}
.mobile-menu>.mini>.right>.user-auth>.gold>.one {
    background: #d1a452;
    display: flex;
    width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    border-radius: .3rem;
    font-weight: 600;
    line-height: 1rem;
    color: #000;
}
.mobile-menu>.mini>.right>.user-auth>.gold>.tree>svg {
    width: .8rem;
    height: .8rem;
}
.mobile-menu>.mini>.right>.user {
    background: var(--live-bg);
    padding: .6rem;
    border-radius: .8rem;
    color: #d1a452;
    height: 2.8rem;
}
.mobile-menu>.mini>.right>.user>svg {
    width: 1.6rem;
    height: 1.6rem;
}

.mobile-menu {
	display: none;
}

.hidden-left {
    position: absolute;
    width: 70%;
    height: 100vh;
    z-index: 5;
    left: 0;
    top: 0;
    background: #121212;
    transform: translateX(-100%);
    transition-duration: .2s;
}
.hidden-left>.menu-open {
    color: #fff;
    padding: 3%;
}
.hidden-left>.menu-open>svg {
    width: 1.3rem;
    height: 1.3rem;
}
.hidden-left>.def-menu {
    background: #222222;
    margin: 0.5rem 0.5rem 0.5rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    padding: .7rem;
}
.hidden-left>.def-menu>.user-login-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.hidden-left>.def-menu>.user-login-mobile>span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Archive;
    color: #fff;
    grid-column: 1 / 4;
}
.hidden-left>.def-menu>.user-login-mobile>a {
    display: block;
    background: #161616;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}
.hidden-left>.def-menu>.user-login-mobile>a>svg {
    width: 2rem;
    height: 2rem;
}
.hidden-left>.def-menu>.user-login-mobile>a.wg {
    color: #dd3b1c;
}
.hidden-left>.def-menu>.user-login-mobile>a.lesta {
    color: #fff;
}
.hidden-left>.def-menu>.user-login-mobile>a.vk {
    color: #0077FF;
}
.hidden-left>.def-menu>.user-login {}
.hidden-left>.def-menu>.user-login>.name {
    background: rgb(22 22 22 / 62%);
    padding: .5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.hidden-left>.def-menu>.user-login>.name>svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.5rem;
    background: #161616;
    color: #d1a452;
    border-radius: .5rem;
}
.hidden-left>.def-menu>.user-login>.name>span {
    color: #d1a452;
    font-weight: 500;
    font-family: 'Rubik';
    font-size: .9rem;
}
.hidden-left>.def-menu>.user-login>.info {
    display: flex;
    padding: 1rem 0rem;
    gap: .3rem;
}
.hidden-left>.def-menu>.user-login>.info>.balans {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: rgb(22 22 22 / 62%);
    padding: .5rem;
    border-radius: .5rem;
    color: #fff;
    width: 40%;
    flex-direction: row;
    justify-content: center;
}
.hidden-left>.def-menu>.user-login>.info>.balans>.icon>svg {
    width: 1rem;
    height: .8rem;
}
.hidden-left>.def-menu>.user-login>.info>.balans>.amount {
    font-size: .85rem;
}
.hidden-left>.def-menu>.user-login>.info>.gold {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .3rem;
	background: rgb(22 22 22 / 62%);
	padding: .5rem;
	border-radius: .5rem;
	color: #d1a452;
	width: 40%;
	justify-content: center;
	font-size: .85rem;
}
.hidden-left>.def-menu>.user-login>.info>.gold>.icon>svg {
    width: .8rem;
    height: .8rem;
}
.hidden-left>.def-menu>.user-login>.info>.exit-user {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(22 22 22 / 62%);
    padding: .5rem;
    border-radius: .5rem;
    color: #cd454f;
    width: 3rem;
    height: 2.5rem;
}
.hidden-left>.def-menu>.user-login>.info>.exit-user>svg {
    width: 1.2rem;
    height: 1.2rem;
}
.hidden-left>.def-menu>.menu-2 {
    border-top: 1px solid #161616;
    display: flex;
    gap: .5rem;
    flex-direction: column;
    padding-top: 1rem;
}
.hidden-left>.def-menu>.menu-2>li {
}
.hidden-left>.def-menu>.menu-2>li>a {
    display: block;
    background: #161616;
    width: 100%;
    padding: .7rem 1rem;
    font-size: .8rem;
    border-radius: .5rem;
    color: #ffffff96;
    font-weight: 500;
}

.hidden-left.open {
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.mobile-menu>.mini>.hidden-right {
    position: absolute;
    z-index: 5;
    right: 5px;
    background: #212020;
    top: 0px;
    border-radius: .7rem;
    display: none;
}
.mobile-menu>.mini>.hidden-right>.user {
    padding: 0.5rem 0.3rem .9rem 0.9rem;
    background: #161616;
    border-radius: .7rem;
}
.mobile-menu>.mini>.hidden-right>.user>.name {
    display: flex;
    align-items: center;
}
.mobile-menu>.mini>.hidden-right>.user>.name>.title {
    padding-right: 6px;
    height: 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.mobile-menu>.mini>.hidden-right>.user>.name>.title>.name {
    display: block;
    text-overflow: ellipsis;
    width: 5.4rem;
    white-space: nowrap;
    overflow:hidden;
    color: #e2e2e2;
    font-size: .9rem;
}
.mobile-menu>.mini>.hidden-right>.user>.name>.title>.balans {
    display: block;
    color: #d1a452;
    font-size: .95rem;
    padding-top: .2rem;
    font-weight: 500;
}
.mobile-menu>.mini>.hidden-right>.user>.name>svg {
    background: #212121;
    padding: .6rem;
    border-radius: .8rem;
    color: #d1a452;
    height: 2.8rem;
    width: 2.8rem;
}
.mobile-menu>.mini>.hidden-right>.menu-2 {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1.2rem;
}
.mobile-menu>.mini>.hidden-right>.menu-2>li>a {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #a1a1a1;
}
.mobile-menu>.mini>.hidden-right>.menu-2>li>a>span>svg {
    width: 1rem;
    height: 1rem;
}
.mobile-menu>.mini>.hidden-right>.menu-2>li>a:hover {
    color: #fff;
}

.hidden-right.open {
	display: block !important;
}


@media (min-width: 1026px) and (max-width: 1440px){
	.menu>.center, .index, .roulet, .item-box, .footer-menu>div, footer>.footer, .box-body {
		width: 1200px;
	}
}
@media (min-width: 1023px) and (max-width: 1025px){
	.menu>.center, .index, .roulet, .item-box, .footer-menu>div, footer>.footer, .box-body {
		width: 980px;
	}
	.roulet>.main>button>span {
		padding: 0rem 0 0rem .5rem;
	}
	.roulet>.main>button>span>svg {
		width: 1.7rem;
		height: 1.5rem;
		left: 5px;
	}
	.roulet>.main>button {
		height: 3.6rem;
	}
	.roulet>.main>button>p>span {
		font-size: 1.1rem;
	}
	.roulet>.main>button>.discaunt>.procent {
		width: 3rem;
		font-size: .7rem;
	}
	.roulet>.main>button>p {
		padding: 1rem;
	}
	.item-box>.item {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.roulet-box>.roulet-buttons>.top>.text>h2 {
		font-size: 1rem;
	}
	.roulet-box>.roulet-buttons>.top>.text>p {
		font-size: .5rem;
	}
	.roulet-box>.roulet-buttons>.top>.step {
		padding-left: .5rem;
	}
	.roulet-box>.roulet-buttons>.top>.step>span, .roulet-box>.roulet-buttons>.top>.step>.step-1, .roulet-box>.roulet-buttons>.top>.step>.step-5 {
		width: 2rem;
	}
	.roulet-box>.roulette>.mix>.box::before {
		content: "";
		width: 100%;
		height: 88%;
	}
	.roulet-box>.roulette>.mix>.box>.item>.img>img {
		width: 4rem;
		padding-bottom: .5rem;
	}
	.roulet-box>.roulet-buttons>.top>.button>.go>p {
		font-size: .9rem;
	}
	.menu>.center>.logotype>.box>span {
		font-size: .9rem;
	}
	.menu>.center>.logotype>.name {
		font-size: 2.1rem;
	}
	.menu>.center>ul {
		padding-left: 1rem;
	}
	.profile>.block {
		width: 100%;
	}
	
	.profile>.form-case>section {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.profile>.form-case>section>.item>.img>img {
		width: auto;
		height: 4rem;
	}
	.faq {
		width: 80%;
	}
	.table-ref {
		width: 40%;
	}
	.table-ref>table>thead>tr>th {
		white-space: normal;
	}
	.step-ref>.box>section {
		width: 33%;
		backdrop-filter: none;
	}
	.step-ref>.box {
		gap: 1rem;
	}
	.step-ref>.box>section>h3 {
		text-align: center;
		font-size: 1rem;
	}
	.step-ref>.box>section>p {
		font-size: 1rem;
	}
	.payment>section>.left, .payment>section>.right {
		width: 60%;
	}
	.payment>section {
		flex-direction: column;
		align-items: center;
	}
	.payment>section>.left>.metod>.pay-box>img {
		height: 2.5rem;
	}
}
@media (min-width: 701px) and (max-width: 1023px){
	body {
		background-attachment: scroll;
		background-position: top;
	}
	.mobile-menu {
		display: block;
		padding: .5rem 0;
	}
	.menu {
		display: none;
	}
	.hidden-left {
		width: 20rem;
	}
	.mobile-menu>.mini>.right>.user-auth>.balans>.one, .mobile-menu>.mini>.right>.user-auth>.gold>.one {
		margin-right: .2rem;
	}
	.index, .item-box, .footer-menu>div, footer>.footer {
		width: 95%;
	}
	.index>.info {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.index>.info>div {
		padding: .8rem 1.1rem .8rem 1.1rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.index>.info>div>span {
		font-size: 1rem;
	}
	.index>.info>div>p>svg, .index>.info>.online>p::before {
		display: none;
	}
	.index>.title>h1 {
		font-size: 1.8rem;
	}
	.item-box>.item {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.roulet {
		width: 95%;
		display: flex;
		flex-direction: column;
	}
	.roulet>.main {
		width: 100%;
		flex-direction: row;
	}
	.roulet-box {
		width: 100%;
	}
	.roulet>.main>button {
		background: #161616;
		filter: none;
		height: 4rem;
		justify-content: center;
	}
	.roulet>.main>button.free:not([disabled="disabled"]):hover, .roulet>.main>button.free.active {
		background: #547021a1;
		filter: none;
	}
	.roulet>.main>button:not([disabled="disabled"]):hover, .roulet>.main>button.active {
		background: #dd3b1c7d;
		filter: none;
		justify-content: center;
	}
	.roulet>.main>button>p {
		margin: 0;
		padding: 1rem 1rem 1rem 1rem;
		align-items: center;
		width: max-content;
	}
	.roulet>.main>button>p>span {
		font-size: 1rem;
	}
	.roulet>.main>button>p>span:last-child {
		display: none;
	}
	.roulet>.main>button>.discaunt {
		position: absolute;
		top: -50%;
		right: -7px;
		padding-right: 0;
	}
	.roulet>.main>button>.discaunt>.procent {
		background: var(--live-orange);
		color: #fff;
		border: none;
	}
	.roulet>.main>button:not([disabled="disabled"]):hover>.discaunt>.procent, .roulet>.main>button.active>.discaunt>.procent {
		border: none;
	}
	.roulet>.main>button>span {
		padding: 0rem 0 0rem .5rem;
	}
	.roulet-box>.roulette {
		height: 13rem;
	}
	.roulet-box>.roulette>.mix.choice>.box::after {
		top: -.2rem;
	}
	.roulet-box>.roulet-buttons>.top>.step>.step-1, .roulet-box>.roulet-buttons>.top>.step>.step-5, .roulet-box>.roulet-buttons>.top>.step>span {
		width: 2.2rem;
	}
	.roulet-box>.roulet-buttons>.top>.text>h2 {
		font-size: .9rem;
	}
	.roulet-box>.roulet-buttons>.top>.text>p {
		font-size: .4rem;
	}
	.roulet-box>.roulet-buttons>.top>.step {
		padding-left: 1rem;
	}
	.hidden-left>.def-menu>.user-login>.info>.balans, .hidden-left>.def-menu>.user-login>.info>.gold, .hidden-left>.def-menu>.user-login>.info>.exit-user {
		height: 3rem;
	}
	.payment>section {
        flex-direction: column;
        margin: 0 auto;
    }
	.box-body.payment {
		width: 95%;
	}
	.payment>section>.left {
		width: 100%;
	}
	.payment>section>.right {
		width: 100%;
	}
	.box-body {
		width: 95%;
	}
	.faq {
		width: 90%;
	}
	.profile>.block {
		flex-direction: column;
	}
	.profile>.block>.form-gold {
		width: 100%;
	}
	.profile>.form-case>section>.item {
		padding: 1rem;
	}
	.profile>.form-case>section {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.text-box {
		width: 95%;
	}
	body.pay {
		background-image: none !important;
	}
	.ref {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.ref>h1, .ref>p {
		text-align: center;
		width: 80%;
	}
	.table-ref {
		width: 80%;
		margin: 2rem auto 0 auto;
	}
	.table-ref>table {
		width: 100%
	}
	.step-ref>.box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.step-ref>.box>section {
		width: 48%;
	}

	
}
@media screen and (max-width: 700px){
	body {
		background-attachment: fixed;
		background-position: inherit;
	}
	.mobile-menu {
		display: block;
		padding: .5rem 0;
	}
	.menu {
		display: none;
	}
	
	.live>.online>.impulse {
		flex-direction: column;
		align-items: center;
		padding: .5rem;
	}
	
	.live>.online>.impulse>.animated {
		width: 2rem;
		padding-right: 0;
		padding-bottom: .3rem;
	}
	.live>.online>.impulse>.animated>div {
		min-width: 1.5rem;
		min-height: 1.5rem;
	}
	.live>.online>.impulse>.animated>div::after {
		width: .4rem;
		height: .4rem;
	}
	.live>.online>.impulse>.check>.text {
		font-size: .7rem;
	}
	
	
	
	.index {
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		height: max-content;
	}
	.index>.title {
		width: 100%;
	}
	.index>.title>h1 {
		font-size: 1.7rem;
	}
	.index>.info {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		padding-top: 1rem;
		width: 100%;
	}
	.index>.info>div>span {
		font-size: 1rem;
	}
	.index>.info>div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column-reverse;
		width: 100%;
		gap: .3rem;
		padding: .8rem;
	}
	.index>.info>div>p>svg {
		display: none;
	}
	.index>.info>.online>p::before {
		display: none;
	}
	.roulet {
		width: 100%;
		flex-direction: column;
	}
	.roulet>.main {
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: .3rem;
		justify-content: center;
		margin: 0 auto;
	}
	.roulet>.main>button>p {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 0;
        padding: .5rem;
        width: max-content;
    }
	.roulet>.main>button>p>span, .roulet>.main>button>p>span:last-child {
		font-size: .9rem;
	}
	.roulet>.main>button>span {
		padding: 0;
	}
	.roulet>.main>button>span>svg {
		width: 1.4rem;
		height: 1.2rem;
		left: auto;
	}
	.roulet>.main>button {
		background: #161616;
		filter: none;
		height: 3.2rem;
		min-width: 3.5rem;
		width: max-content;
		display: flex;
		align-items: center;
		padding: .3rem;
		justify-content: center;
	}
	.roulet>.main>button.active {
		background: #161616;
		filter: none;
		height: 3.2rem;
		width: max-content;
		display: flex;
		align-items: center;
		padding: .3rem;
		border: 2px solid #dd3b1c;
	}
	.roulet>.main>button.free.active, .roulet>.main>button.active {
		background: #161616 !important;
		filter: none !important;
		min-width: 50%;
		display: flex;
	}
	.roulet>.main>button:not(.active)>p, .roulet>.main>button:not(.active)>.discaunt {
		display: none;
	}
	.roulet>.main>button>.discaunt {
		position: absolute;
		right: -4px;
		top: -60%;
		padding: 0;
	}
	.roulet>.main>button.active>.discaunt>.procent {
		background: #dd3b1c;
		border: none !important;
		font-size: .7rem;
		width: 2.3rem;
		height: 1.4rem;
		border-radius: .5rem;
	}
	.roulet-box {
		width: 95%;
		margin: 0 auto;
	}
	.roulet-box>.roulet-buttons>.top {
		display: flex;
		flex-direction: column;
		height: max-content;
		padding: 1rem 0rem;
	}
	.roulet-box>.roulet-buttons>.top>.button {
		position: relative;
	}
	.roulet-box>.roulet-buttons>.top>.text>h2 {
		text-align: center;
		line-height: 1.5rem;
	}
	.roulet-box>.roulet-buttons>.top>.step {
		padding-left: 0;
	}
	.roulet-box>.roulet-buttons>.top>.button {
        position: relative;
        flex-direction: column;
        padding-right: 0;
        padding-top: .5rem;
    }
	.roulet-box>.roulet-buttons>.top.all>.button>.cost {
		padding: .5rem;
		display: flex;
		align-items: center;
		font-size: 1.6rem;
	}
	
	.roulet-box>.roulet-buttons>.top.all>.button>.cost::before {
		display: none;
		
	}
	.roulet-box>.roulet-buttons>.top.all>.button>.cost::after {
		content: attr(data-cost);
		position: relative;
		font-size: 1rem;
		color: #ffffff61;
		font-weight: 300;
		font-style: italic;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.roulet-box>.roulet-buttons>.top.all>.button>button {
		padding: 0;
	}
	.roulet-box>.roulet-buttons>.top.all>.button>button>.name::after {
		display: none;
	}
	.roulet-box>.roulet-buttons>.top.all>.button>button>.name {
	    margin: 0;
	    padding: 1rem 1.8rem;
	    border-radius: .5rem;
	}
	.roulet-box>.roulet-buttons>.top.all>.button>button>.name>span {
		left: 0;
	}
	.roulet-box>.roulette {
		padding: 1.5rem;
	}
	.roulet-box>.roulette>.mix {
		height: 16rem;
		width: 100%;
		display: flex;
		gap: .5rem;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.roulet-box>.roulette>.mix>.box {
        width: 48%;
        height: 48%;
    }
	.roulet-box>.roulet-buttons>.top>.text {
		padding: 0rem 1rem 1rem 1rem;
	}
	.item-box {
		width: 95%;
	}
	.item-box>h1 {
		font-size: 1.3rem;
	}
	.item-box>p {
		font-size: .8rem;
		padding-top: .5rem;
	}
	.item-box>.item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-menu>div {
		display: flex;
		width: 100%;
		flex-direction: column;
		height: max-content;
	}
	.footer-menu {
		display: none;
	}
	footer {
		width: 95%;
		margin: 0 auto;
	}
	footer>.footer {
        width: 100%;
        background: rgb(22 22 22 / 62%);
        padding: 1rem;
        margin-top: 1rem;
        border-radius: .7rem;
    }
	footer>.footer>.other-links {
        display: none;
    }
	footer>.footer>h1 {
		text-align: center;
		padding-bottom: .2rem;
		width: 100%;
	}
	footer>.footer>p {
		text-align: center;
		padding-bottom: .2rem;
	}
	.roulet-box>.roulet-buttons>.top>.button>.go>span {
		width: 100%;
		text-align: center;
	}
	.roulet-box>.roulet-buttons>.top>.button>.go {
		padding-top: 1.5rem;
	}
	.box-body.payment {
		width: 95%;
	}
	.payment>section>.left>ul>li>a {
        font-family: 'Rubik';
        display: flex;
        flex-direction: column;
        font-size: .7rem;
        gap: .3rem;
        height: 100%;
        font-weight: 500;
        text-transform: uppercase;
    }
	.payment>section {
		display: flex;
		flex-direction: column;
	}
	.payment>section>.left {
		width: 100%;
	}
	.payment>section>.left>ul {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.payment>section>.left>ul>li>a:hover, .payment>section>.left>ul>li>a.active {
		height: 100%;
	}
	.payment>section>.left>ul>li {
		min-width: auto;
	}
	.payment>section>.left>.metod {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }
	.payment>section>.left>.metod>.pay-box>img {
		height: 2rem;
	}
	.payment>section>.right {
		width: 100%;
        padding: 1rem;
	}
	.payment>section>.right>.pay-form>.button>div>span {
		font-size: .8rem;
	}
	.payment>section>.right>.pay-form>.footer>p {
		padding: .5rem;
		font-size: .7rem;
	}
	.payment>section>.right>.pay-form>.footer {
		padding-top: .5rem;
	}
	.payment>section>.right>.pay-form>.snoska>span {
		font-size: .7rem;
	}
	.payment>section>.right>.pay-form>.snoska {
		padding: 1rem 0 .5rem 0;
	}
	.payment>section>.right>.pay-form>.form-box-all {
		flex-direction: column;
	}
	.payment>section>.right>.pay-form>.form-box-all>.all-cost {
		justify-content: center;
	}
	.payment>section>.right>.pay-form>.form-box-all>.bonuse {
		display: flex;
		gap: 1.3rem;
		position: relative;
		padding: 0;
	}
	.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box {
		padding-bottom: 1rem;
	}
	.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.key::after {
		height: 70%;
	}
	.payment>section>.right>.pay-form>.form-box-all>.label {
		top: 33%;
	}
	.box-body.profile {
		width: 95%;
	}
	.profile>.block {
		flex-direction: column;
	}
	.profile>.block>.form-gold>section {
		align-items: flex-start;
		flex-direction: column;
	}
	.profile>.block>.form-gold>h1 {
		display: flex;
		flex-direction: column;
		gap: .2rem;
	}
	.profile>.block>.form-gold {
		width: 100%;
	}
	.profile>.block>.form-gold>section>.step {
		width: 100%;
	}
	.profile>.block>.form-gold>section>.step.right>.input>input {
		padding: 0.9rem 0.9rem 0.9rem 0.3rem;
	}
	.profile>.block>.form-gold>section>.step.right>.input:after {
		display: none;
	}

	.profile>.block>.form-gold>section>button {
		width: 100%;
		justify-content: center;
		transform: none;
		margin-left: 0;
	}
	.profile>.block>.form-gold>section>button>span {
		transform: none;
	}
	.profile>.block>.form-gold>section>button>svg {
		transform: none;
	}
	.profile>.block>.form-gold>section>button::before {
		display: none;
	}
	.profile>.block>.form-gold>section>.step>.input>a:hover::after {
		left: auto;
		right: 0;
	}
	.profile>.block>.form-gold>section>.step.left>.input:after {
		display: none;
	}
	.profile>.block>.form-gold>section>.step>.input>input {
		transform: none;
		padding: 0.9rem !important;
	}
	.profile>.block>.form-gold>section>.step>.input {
		transform: none;
		margin-left: 0;
	}
	.profile>.block>.form-gold>section>.step>.input>a {
		transform: none;
	}
	.profile>.form-case>section {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.profile>.block>.user>.setting>.name {
		text-overflow: ellipsis;
		width: 11.4rem;
		white-space: nowrap;
		overflow: hidden;
	}
	.ref {
		width: 100%;
	}
	.ref>h1 {
		width: 100%;
		font-size: 2rem;
	}
	.box-body {
		width: 95%;
	}
	.ref>p {
		width: 100%;
	}
	.ref>span {
		text-align: center;
	}
	.ref>.copy-link {
		flex-direction: column;
		gap: .5rem;
	}
	.ref>.copy-link>p::after, .ref>.copy-link>button::after {
		display: none;
	}
	.ref>.copy-link>p, .ref>.copy-link>p>span, .ref>.copy-link>button, .ref>.copy-link>button>span, .ref>.copy-link>button.show:before {
		transform: none;
	}
	.ref>.stat>.list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.ref>.stat {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}
	.ref>.stat>.list>.box {
        width: 100%;
        display: flex;
        align-items: flex-start;
        min-width: auto;
    }
	.table-ref {
		width: 100%;
	}
	.table-ref>table>thead>tr>th {
		white-space: break-spaces;
	}
	.step-ref {
		padding-top: 2rem;
	}
	.step-ref>h1 {
		font-size: 1.5rem;
		padding-bottom: 1rem;
	}
	.step-ref>.box {
		flex-direction: column;
		gap: 1rem;
	}
	.step-ref>.box>section {
		width: 100%;
	}
	.box-body>.box {
		padding: 0 .5rem 0.5rem .5rem;
	}
	.box-body>.box>h1 {
		text-align: center;
		font-size: 1.3rem;
	}
	.faq {
		width: 100%;
	}
	.faq>.block>.top>h2 {
		font-size: 1rem;
		padding-right: 3rem;
	}
	.text-box {
		width: 95%;
	}
	.box-body {
        width: 95%;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
	.text-box>.date {
		text-align: left;
	}
	.payment>section>.right>.pay-form>.form-box>.block, .payment>section>.right>.pay-form>.form-box>button {
		height: 2.9rem;
	}
	.payment>section>.right>.pay-form>.button>div {
		gap: .1rem;
	}
	.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.key>.info:hover::after {
		left: 0;
		right: auto;
		font-size: .7rem;
	}
	.payment>section>.right>.pay-form>.form-box-all>.bonuse>.box.procent>.info:hover::after {
		left: auto;
		right: 0;
		font-size: .7rem;
	}
	.roulet-box>.roulette>.mix>.box::before {
		width: 100%;
		height: 90%;
	}
	.roulet-box>.roulette>.mix.choice>.box::after {
		height: 1.5rem;
		top: -.5rem;
	}
	.roulet-box>.roulette>.mix>.box>.item>.img>img {
		width: 5rem;
	}
	.roulet-box>.roulette>.mix>.box>.item>.name>span {
		font-size: .7rem;
	}
	.roulet-box>.roulette>.mix>.box>.item>.gold>span {
		font-size: .8rem;
	}
	.roulet-box>.roulette>.mix>.box>.item>.gold>svg {
		position: relative;
		height: .7rem;
		width: .7rem;
		top: 1px;
	}
	.hidden-left>.def-menu>.menu-2>li>a {
		font-size: 1rem;
	}
	.roulet-box>.roulette>.mix>.box>.item>.free {
		font-size: .6rem;
		top: 0;
	}
}