@import url('fonts/family.css');

:root {
    --bg: #0f0f0f;
    --card: #1a1a1a;
    --text: #b8b8a2;
    --text-light: #f9f5e1;
    --text-light2: #cdcdcd;
    --accent: #f0401e;
    --accent-yellow: #f9b723;
    --border: #7473734a;
    --hover: #2f2e2e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background: #0f0f0f;
	margin: 0;
	padding: 0;
	font-family: 'Roboto Condensed';
	display: flex;
	flex-direction: column;
	min-height: 100%;
	justify-content: space-between;
}

body.fixed {
	overflow: hidden;
}

.Regular {
	font-family: 'MTSans-RegularCondensed';
}
.Bold {
	font-family: 'MTSans-BoldCondensed';
}

a {
	text-decoration: none;
	transition: .3s;
}

input,
textarea {
	outline: none;
	resize: none;
	border: none;
}
button {
	font-family: 'Roboto Condensed';
	font-weight: 600;
    cursor: pointer;
    transition: .3s;
    font-size: .9rem;
}

.grid {
	display: grid;
}
.grid-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.flex {
	display: flex;
}
.gap-03 {
	gap: .3rem;
}
.gap-05 {
	gap: .5rem;
}
.gap-07 {
	gap: .7rem;
}
.gap-08 {
	gap: .8rem;
}
.gap-1 {
	gap: 1rem;
}
.gap-2 {
	gap: 2rem;
}
.gap-15 {
	gap: 3rem;
}
.gap-3 {
	gap: 3rem;
}














#header {
    width: 100%;
    background-color: var(--card);
    justify-content: center;
}
.header {
    width: 1250px;
    justify-content: space-between;
    align-items: center;
    height: 4.5rem;
}

.header>.left {
    align-items: center;
}
.header>.left>.logotype {
    transition: .3s;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--text);
}
.header>.left>.logotype>h1 {
    font-size: 1.5rem;
}
.header>.left>.logotype>h1>span:nth-last-child(1) {
    color: var(--accent);
}
.header>.left>.logotype:hover {
	color: #f0401e;
}
.header>.left>.menu {
}
.header>.left>.menu>a {
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
}
.header>.left>.menu>a>span {
}
.header>.left>.menu>a:hover {
    color: var(--accent-yellow);
}
.header>.right {
    align-items: center;
}
.header>.right>a {
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
}
.header>.right>a:hover {
    color: var(--accent-yellow);
}
.header>.right>.login-btn {
    position: relative;
    color: var(--text-light);
    text-transform: uppercase;
    background-color: #f0401e7d;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    padding: .8rem .7rem;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}
.header>.right>.login-btn>svg {
    z-index: 2;
    width: 1.4rem;
    height: 1.4rem;
    position: relative;
    top: -2px;
}
.header>.right>.login-btn:hover {
	background-color: var(--accent);
	color: var(--text-light);
	cursor: pointer;
}
.header>.right>.login-btn:before {
    content: "";
    position: absolute;
    top: 0;
    will-change: transform;
    -webkit-animation: blink-button 3s infinite ease;
    animation: blink-button 3s infinite ease;
    width: 100%;
    height: 100%;
    border-left: 48px solid #f0401eb3;
    left: 0;
}

@-webkit-keyframes blink-button {
    0% {
        -webkit-transform: translateX(-60px) skew(-32deg);
        transform: translateX(-60px) skew(-32deg)
    }

    50%,to {
        -webkit-transform: translateX(100%) skew(-32deg);
        transform: translateX(100%) skew(-32deg)
    }
}

.header>.right>.user-auth-block {
    display: flex;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--accent-yellow);
    padding: .8rem .7rem;
    gap: .8rem;
    align-items: center;
}
.header>.right>.user-auth-block>p {}
.header>.right>.user-auth-block>.login-profile {
    color: var(--accent-yellow);
    font-family: 'MTSans-BoldCondensed';
}
.header>.right>.user-auth-block>.login-profile:hover {
    transform: scale(1.05);
}
.header>.right>.user-auth-block>.login-exit {
    color: var(--accent-yellow);
}
.header>.right>.user-auth-block>.login-exit:hover {
    transform: scale(1.1);
}
.header>.right>.user-auth-block>.login-exit>svg {
    width: 1.1rem;
    height: 1.1rem;
}

.loadbox {
	flex: 1 0 auto;
}
.center {
	width: 1250px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0 auto;
}

.slider {
    width: 100%;
    backdrop-filter: blur(0.60313rem);
    height: 20rem;
    overflow: hidden;
    margin: 2rem 0rem;
}
.slider>button {
    width: 3rem;
    height: 3rem;
    border: none;
    color: rgb(255 255 255 / 34%);
    position: absolute;
    cursor: pointer;
    transition: .3s;
    z-index: 5;
    background: rgba(69,69,69,0.5);
    border-radius: .5rem;
}
.slider>button>svg {
    width: 2rem;
    height: 2rem;
}
.slider>.left {
    bottom: 1rem;
    left: 1rem;
    transform: rotate(180deg);
    top: 0;
    margin: auto 0;
}
.slider>.right {
    bottom: 1rem;
    right: 1rem;
    top: 0;
    margin: auto 0;
}
.slider>button:hover {
	color: var(--accent);
}
.slider>.box-animated {
    display: flex;
    width: 100%;
    height: 100%;
}
.slider>.box-animated>a {
    color: var(--text-light);
    flex-direction: column;
    height: 100%;
    min-width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: flex;
    justify-content: center;
    border-radius: 1rem;
}
.slider>.box-animated>a>.title {
	width: 60%;
	margin: 0 auto 0 auto;
}
.slider>.box-animated>a>.title>h2 {
	font-family: 'MTSans-BoldCondensed';
	text-transform: uppercase;
	font-size: 2.875rem;
	text-align: center;
	text-shadow: 2px 2px 0px rgb(15 15 15);
}
.slider>.box-animated>a>.title>p {
	font-family: 'MTSans-RegularCondensed';
	font-size: 1.2rem;
	text-transform: unset;
	text-align: center;
	text-shadow: 1px 1px 0px rgb(15 15 15);
}
.slider>.box-animated>a:hover {
	color: #ffffff;
}

.filter>.nation {
    border-radius: .5rem;
    background: var(--card);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    margin-bottom: 1rem;
}
.filter>.nation>button {
    flex-direction: column;
    align-items: center;
    padding: 0.6rem .3rem;
    border: none;
    background: transparent;
    color: var(--text);
}
.filter>.nation>button>img {
    width: 3rem;
    height: 2.2rem;
}
.filter>.nation>button:hover {
    background: #2f2e2e;
}

.filter>.type {
    border-radius: .5rem;
    background: var(--card);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    margin-bottom: 1rem;
}
.filter>.type>button {
    flex-direction: row;
    align-items: center;
    padding: 0.6rem .3rem;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    justify-content: center;
}
.filter>.type>button>svg {
    width: 1.1rem;
    height: 1.1rem;
}
.filter>.lavel {
    border-radius: .5rem;
    background: var(--card);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
}
.filter>.lavel>button {
    padding: 0.6rem .3rem;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.1rem;
}
.filter button:hover {
    background: #2f2e2e;
}
.filter button.selector {
    background: #2f2e2e;
    color: #ffffff;
}

.filter>.top {
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 1rem;
    align-items: center;
}
.filter>.top>h2 {
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--text);
}
.filter>.top>.search {
    position: relative;
}
.filter>.top>.search>svg {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    color: var(--text);
}
.filter>.top>.search>input {
    width: 25rem;
    height: 3rem;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    padding: .5rem 0.5rem .5rem 2.5rem;
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    color: var(--text);
}

.product-list {
    padding: 1rem 0rem;
}
.product-list>.item {
    position: relative;
    background: var(--card);
    border-radius: .5rem;
    height: 230px;
    background-image: url(https://tankistore.ru/template/images/fone_item.png);
    background-size: 100% 100%;
    background-position: center;
}
.product-list>.item:hover {
	transform: scale(1.05);
}
.product-list>.item>.images {
    position: absolute;
    right: .5rem;
    bottom: 1.9rem;
    align-items: center;
}
.product-list>.item>.images {
	width: 225px;
}
.product-list>.item:not(.technic)>.images {
	bottom: 1rem;
	width: 250px;
}
.product-list>.item:not(.technic)>.images>img {
    width: 250px;
}
.product-list>.item>.images>img {
    width: 225px;
}
.product-list>.item>.name {
    position: absolute;
    top: .9rem;
    left: 1rem;
    width: max-content;
    color: var(--text);
    font-size: 1.3rem;
}
.product-list>.item>.info {
    position: absolute;
    top: 2.9rem;
    left: 1rem;
    align-items: center;
}
.product-list>.item>.info>.lavel {
    text-transform: uppercase;
    color: var(--text);
    font-size: 1.1rem;
}
.product-list>.item>.info>.type {
	color: var(--text);
}
.product-list>.item>.info>.type>svg {
    width: .9rem;
    height: .9rem;
}
.product-list>.item>.info>.flag>img {
    width: 1.5rem;
    height: 1.1rem;
}
.product-list>.item>.cost {
    position: absolute;
    bottom: 4rem;
    left: 1rem;
}
.product-list>.item>.discount {
    position: absolute;
    right: .5rem;
    top: .5rem;
    background-color: var(--accent);
    color: var(--text-light);
    padding: .4rem;
    border-radius: .5rem;
    font-weight: 600;
}
.product-list>.item>.dope {
    position: absolute;
    top: 4.7rem;
    left: 1rem;
    color: var(--text);
    font-size: .8rem;
    font-weight: 600;
    width: 14rem;
    display: flex;
    flex-wrap: wrap;
}
.product-list>.item>.cost>span {
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--text);
}
.product-list>.item>.cost>span:nth-last-child(2) {
	text-transform: uppercase;
	font-size: 1.1rem;
	color: #b8b8a269;
	position: absolute;
	top: -16px;
	width: max-content;
	right: -22px;
	text-decoration: line-through #636363;
}
.product-list>.item>.link {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: var(--accent-yellow);
    border: none;
    color: var(--bg);
    border-radius: .5rem;
    padding: .6rem 2.5rem;
    height: 2.5rem;
    text-transform: uppercase;
    font-size: 1rem;
}
.product-list>.item>.link:hover {
    transform: scale(1.1);
}
.product-list>.item>.basket {
    cursor: pointer;
    position: absolute;
    bottom: 1rem;
    height: 2.5rem;
    width: 2.7rem;
    left: 9.5rem;
    background: var(--border);
    border: none;
    color: rgb(255 255 255 / 34%);
    border-radius: .5rem;
}
.product-list>.item>.basket>svg {
    width: 2rem;
    height: 2rem;
}
.product-list>.item>.basket:hover {
    transform: scale(1.1);
    color: #f7f7f7;
}
.product-list>.item>.basket[quary="select"] {
    background: #f9b723;
    color: #000;
}

.product-list>.clear-list {
	font-size: 1.2rem;
	grid-column: 1 / 4;
	text-align: center;
	background: #f4433642;
	padding: 1rem 3rem;
	color: #ffffff;
	border-radius: .5rem;
}

.paginated {
    justify-content: flex-end;
}
.paginated>div {
    background: var(--card);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .5rem;
    width: max-content;
}
.paginated>div>.page-link {
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
}
.paginated>div>.page-link:hover {
    background: var(--hover);
    color: #fff;
}
.paginated>div>.page-link.active {
    background: var(--border);
    color: var(--accent-yellow);
}
.paginated>div>.ellipsis {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8a2;
    font-weight: 600;
    font-size: 1.2rem;
}

.title-box {
    padding-top: 4rem;
}
.title-box>div>h1 {
    text-transform: uppercase;
    font-size: 1.8rem;
    color: var(--text);
}
.title-box>div>p {
    color: var(--text);
    line-height: 1.24;
    text-transform: unset;
    font-size: 1.3rem;
}
.title-box>div>ul {
    padding-left: 2rem;
}
.title-box>div>ul>li {
    color: var(--text);
    line-height: 1.24;
    text-transform: unset;
    font-size: 1.3rem;
}


footer {
    text-align: center;
    background: radial-gradient(127.55% 170.14% at 50% 170.59%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%), #0f0f0f;
    padding: 5rem 0rem 2rem 0rem;
}
footer>.box {
}
footer>.box>.copy {
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--text);
}
footer>.box>p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text);
}
footer>.box>.link {
    border-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, .1) 75%, transparent) 1;
    border-width: 1px;
    border-style: solid;
    padding: 1rem 0rem;
    margin: 1rem 0rem;
    justify-content: center;
}
footer>.box>.link>a {
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--text);
}
footer>.box>.link>a:hover {
    color: #fab81b;
}

.title-top {
    color: var(--text-light);
    padding: 2rem 0rem 2rem 0rem;
    background: var(--card);
    margin: 1.5rem 0rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.title-top>h1 {
    text-transform: uppercase;
    font-size: 2.175rem;
    margin: 0;
    text-align: center;
}
.title-top>p {
    font-size: 1.2rem;
    text-transform: unset;
    width: 50%;
}

.block-other>.box {
	border-radius: .5rem;
	border: 1px solid var(--border);
	padding: 1rem;
	flex-direction: column;
}
.block-other.faq>.box {
	height: max-content;
}
.block-other>.box>h2 {
	text-transform: uppercase;
    font-size: 1.5rem;
    color: var(--text);
}
.block-other>.box>p {
	color: var(--text);
    line-height: 1.24;
    text-transform: unset;
    font-size: 1.1rem;
}
.block-other>.box>ul {
	padding-inline-start: 1.5rem;
}
.block-other>.box>ul>li {
	color: var(--text);
	line-height: 1.24;
	text-transform: unset;
	font-size: 1.1rem;
}
.block-other>.box>ul>li>a {
	color: var(--accent-yellow);
}

.block-other>.reviews {
    grid-column: 1 / 3;
    padding: 0;
}
.block-other>.reviews>.block {
    flex-direction: column;
    width: 40rem;
}
.block-other>.reviews>textarea {
    width: 100%;
    padding: 1rem;
    border-radius: .5rem;
    background: var(--card);
    font-size: 1.1rem;
    color: var(--text);
    border: 1px solid var(--border);
}
.block-other>.reviews>.block>button {
    border: none;
    border-radius: .5rem;
    padding: .6rem 1.5rem;
    height: 2.5rem;
    text-transform: uppercase;
    font-size: 1rem;
    background-color: var(--accent);
    color: var(--text-light);
}
.block-other>.reviews>.block>button:hover {
    transform: scale(1.01);
}
.block-other>.reviews>.block>p {
	color: var(--text);
	font-size: 1.1rem;
	padding-bottom: .7rem;
}
.block-other>.box>.name {
	color: var(--text-light);
	font-size: 1.1rem;
}
.block-other>.box>.text {
	color: var(--text);
	font-size: 1.1rem;
}
.contact>p {
	color: var(--text);
	line-height: 1.24;
	text-transform: unset;
	font-size: 1.3rem;
	margin: 0 0 0.5rem 0;
	text-align: center;
}
.contact>.link {
    padding-top: .5rem;
    justify-content: center;
    text-transform: uppercase;
}
.contact>.link>a {
    align-items: center;
    background: var(--card);
    margin: 1.5rem 0rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    padding: 1rem;
}
.contact>.link>a>img {
    width: 3rem;
    border-radius: 1rem;
}
.contact>.link>a>p {
    font-size: 1.1rem;
    color: var(--text);
}
.contact>.link>a:hover {
    transform: scale(1.04);
}

.table {}
.table>p {
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--text);
    padding-bottom: .5rem;
}
.table>.header {
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 0.8rem 1rem;
	background: rgba(65, 63, 61, .5);
	box-sizing: border-box;
	border-radius: .5rem;
}
.table>.product {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    border-radius: .5rem;
    background: #282726a1;
    margin-top: .3rem;
    gap: 0;
}
.table>.product>.title-text {margin: 0 auto;color: var(--accent-yellow);padding: .5rem;font-size: 1.2rem;}
.table>.header>div {
    margin: 0;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: 'MTSans-BoldCondensed';
    color: var(--text);
}
.table>.header>.id, .table>.product>.id {
    width: 4rem;
}
.table>.header>.item, .table>.product>.item {
    width: 19rem;
}
.table>.header>.cost, .table>.product>.cost {
    width: 10rem;
}
.table>.header>.date, .table>.product>.date {
    width: 11rem;
}
.table>.header>.status, .table>.product>.status {
    width: 8rem;
}
.table>.product>.status.success {
    color: #2eaf18;
}
.table>.product>.status.error {
    color: #c12020;
}
.table>.header>.link, .table>.product>.link {
    width: 25rem;
}
.table>.product>div {
	color: var(--text);
}
.table>.product>.link>a {
    color: var(--accent-yellow);
    display: block;
}
.table>.product>.link>a:hover {
    transform: scale(1.05);
}

.form-search {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}
.form-search>p {
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--text);
    padding-bottom: .5rem;
}
.form-search>.block>input {
    width: 25rem;
    height: 3rem;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    padding: .5rem 0.5rem .5rem 1.5rem;
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    color: var(--text);
}
.form-search>.block>button {
    border: none;
    border-radius: .5rem;
    padding: .6rem 1.5rem;
    text-transform: uppercase;
    font-size: 1rem;
    background-color: var(--accent);
    color: var(--text-light);
}
.form-search>.block>button:hover {
	transform: scale(1.05);
}


.product {
    padding-top: 2rem;
    gap: 1rem 2rem;
}
.product>nav {
    grid-column: 1 / 3;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
}
.product>nav>a {
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
    font-family: 'MTSans-BoldCondensed';
}
.product>nav>p {
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
    font-family: 'MTSans-BoldCondensed';
}
.product>nav>a:hover, .product>nav>a.active {
    color: var(--accent-yellow);
}

.product>.left {}
.product>.left>.pr-name {
    color: #ebebeb;
    display: flex;
    gap: 1rem;
    padding-bottom: .5rem;
    text-transform: uppercase;
}
.product>.left>.pr-name>span {
    background: var(--card);
    font-size: 1.2rem;
    padding: .5rem;
    border-radius: .5rem;
    font-family: 'Roboto Condensed';
    font-weight: 500;
    color: var(--accent-yellow);
    white-space: nowrap;
    height: max-content;
}
.product>.left>.pr-bonuse {
    color: var(--text-light2);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.product>.left>.pr-bonuse>p {
    font-size: 1rem;
}
.product>.left>.pr-bonuse>img {
    width: 1.5rem;
}
.product>.left>.pr-sostav {flex-direction: column;}
.product>.left>.pr-sostav>h3 {
    font-size: 1rem;
    color: var(--text-light2);
    text-transform: uppercase;
    font-family: 'MTSans-BoldCondensed';
}
.product>.left>.pr-sostav>.box>span {
    padding: .5rem;
    width: max-content;
    background: var(--card);
    border-radius: .5rem;
    color: var(--text-light2);
}
.product>.left>.pr-text {
    padding-top: 2rem;
    color: var(--text-light2);
    text-transform: uppercase;
    font-size: 1.3rem;
}
.product>.left>.pr-text>b {
    color: var(--accent-yellow);
}
.product>.left>.pr-cost {
    padding: 1rem 0rem 1.5rem 0rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
}
.product>.left>.pr-cost>p {
    width: 9rem;
    height: 2.5rem;
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    border-radius: .5rem;
    font-weight: 600;
}

.product>.left>.pr-cost>.cost {
	height: 3rem;
	color: var(--accent-yellow);
	font-size: 1.3rem;
	width: max-content;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.product>.left>.pr-cost>.cost>span {
    background: var(--card);
    padding: 1rem;
    border-radius: .5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
	    font-weight: 600;
}
.product>.left>.pr-cost>.cost>.discount {
	background: var(--card);
	padding: 1rem;
	border-radius: .5rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product>.left>.pr-cost>.cost>.discount>.timer {
    border-left: 1px solid var(--border);
    margin-left: .5rem;
    padding-left: .5rem;
}
.product>.left>.pr-cost>.payer {
    border: none;
    border-radius: .5rem;
    padding: .6rem 2.5rem;
    height: 3rem;
    width: 11rem;
    text-transform: uppercase;
    font-size: 1.2rem;
    background-color: var(--accent);
    color: var(--text-light);
}
.product>.left>.pr-cost>.basket {
    cursor: pointer;
    background: var(--border);
    border: none;
    color: rgb(255 255 255 / 34%);
    border-radius: .5rem;
    padding: .6rem 2.5rem;
    height: 3rem;
    text-transform: uppercase;
    font-size: 1.2rem;
}
.product>.left>.pr-cost>.payer:hover, .product>.left>.pr-cost>.basket:hover {
    transform: scale(1.05);
}
.product>.left>.pr-cost.ds {
	
flex-direction: column;
}
.product>.left>.pr-description {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}
.product>.left>.pr-description>h2 {
    color: var(--text-light2);
    text-transform: uppercase;
    font-size: 1.3rem;
}
.product>.left>.pr-description>h2>b {
	color: var(--accent-yellow);
}
.product>.left>.pr-description>.box {
    border-radius: .5rem;
    margin-top: 1rem;
    color: var(--text-light2);
    font-size: 1rem;
    line-height: 1.3rem;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-color: #a9a8a85c transparent;
    scrollbar-width: thin;
    padding-right: .5rem;
}

.product>.left>.pr-description>.box>.tank-pros, .product>.left>.pr-description>.box>.tank-cons {
	padding-bottom: .7rem;
}
.product>.left>.pr-description>.box>.tank-pros>li {
	position: relative;
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
}
.product>.left>.pr-description>.box>.tank-pros>li:before {
	content: '';
    position: absolute;
    background: #27f756a1;
    font-size: 17px;
    line-height: 1;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    left: 0;
}
.product>.left>.pr-description>.box>.tank-cons>li {
	position: relative;
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
}
.product>.left>.pr-description>.box>.tank-cons>li:before {
	content: '';
    position: absolute;
    background: #27f756a1;
    font-size: 17px;
    line-height: 1;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    left: 0;
}

.product>.pr-haract {
	grid-column: 1 / 3;
}
.product>.pr-haract>h2 {
    color: var(--text-light2);
    text-transform: uppercase;
    font-size: 1.3rem;
    padding-top: 1rem;
}
.product>.pr-haract>h2>b {
	color: var(--accent-yellow);
}

.product>.pr-haract>.box {
    margin-top: 1rem;
}
.product>.pr-haract>.box>section {
    background: var(--card);
    padding: 1rem;
    border-radius: .5rem;
    height: max-content;
}
.product>.pr-haract>.box>section>h3 {
    color: #fffceb;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'MTSans-RegularCondensed';
    padding-bottom: .2rem;
    border-bottom: 1px solid #a9a8a85c;
    margin-bottom: .5rem;
}
.product>.pr-haract>.box>section>ul {
    list-style: none;
}
.product>.pr-haract>.box>section>ul>li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #a9a8a85c;
    padding-bottom: .1rem;
}
.product>.pr-haract>.box>section>ul>li>span {
    text-transform: none;
    color: #cdcdcd;
    font-size: .9rem;
    font-weight: 500;
    padding-top: .5rem;
}
.product>.pr-haract>.box>section>ul>li:last-child {
    border-bottom: none;
}

.product>.right>.slider-shop {
    width: 100%;
}
.product>.right>.slider-shop>.animated {
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: .5rem;
}
.product>.right>.slider-shop>.animated>.block {
    display: flex;
    width: 100%;
    border-radius: .5rem;
    box-shadow: 0 10px 50px rgb(35 34 34);
    height: 20rem;
    background: #141414;
}
.product>.right>.slider-shop>.animated>.block>.images {
    height: 100%;
    min-width: 100%;
    background-repeat: space;
    background-size: cover;
    background-position: center;
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button {
    position: absolute;
    background: #12121236;
    border: none;
    color: #1a1a1ac7;
    cursor: pointer;
    transition: .3s;
    z-index: 3;
    top: 0;
    height: 100%;
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button.left>svg {
    transform: rotate(180deg);
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button.left {
    left: 0;
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button.right {
    right: 0;
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button>svg {
    width: 3rem;
    height: 4rem;
    padding: .8rem;
}
.product>.right>.slider-shop>.animated>.btn-slider>.slider-button:hover {
    background: #12121285;
    color: #f9b723;
}
.product>.right>.slider-shop>h2, .product>.right>.video-shop>h2 {
    padding-bottom: 1rem;
    color: var(--text-light2);
    text-transform: uppercase;
    font-size: 1.3rem;
}
.product>.right>.slider-shop>h2>b, .product>.right>.video-shop>h2>b {
    color: var(--accent-yellow);
}
.product>.right>.slider-shop>.note, .product>.right>.video-shop>.note {
	color: #d5a844ad;
	padding-top: .5rem;
	font-size: .8rem;
}
.product>.right>.video-shop {
    padding-top: 2rem;
}
.product>.right>.video-shop>iframe {
	height: 343px;
    border: none;
    border-radius: .5rem;
    background: transparent;
	width: 100%;
}

.notifications {
    position: fixed;
    top: 0.8rem;
    right: 0;
    left: 0;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: center;
    width: max-content;
    margin: 0 auto;
    z-index: 6;
}
.notifications>.message {
    min-width: 20rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-weight: 600;
    border-radius: .5rem;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
}
.notifications>.message>div {
    height: 4rem;
    margin: 0 1rem 0 0;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem 0 0 0.5rem;
    color: #fff;
}
.notifications>.message>div>svg {
    width: 1.2rem;
    height: 1.2rem;
}
.notifications>.message.error {
    background: var(--card);
    color: #f04141;
    font-family: 'MTSans-BoldCondensed';
    text-transform: uppercase;
    border: 1px solid var(--border);
}
.notifications>.message.succes {
    background: var(--card);
    color: #ffffff;
    font-family: 'MTSans-BoldCondensed';
    text-transform: uppercase;
    border: 2px solid var(--border);
}
.notifications>.message.error>div {
    background: var(--not-error);
}
.notifications>.message.succes>div {
    background: var(--not-succes);
}
.notifications>.message.open {
    transform: translateY(-350%);
    animation: messageani .5s forwards;
    cursor: pointer;
}
@keyframes messageani {
	0% {transform: translateY(-350%);}
	100% {transform: translateY(0);}
}
.notifications>.message.reload {
    transform: translateY(0);
	animation: messageanim .5s forwards;
}
@keyframes messageanim {
	0% {transform: translateY(0);}
	100% {transform: translateY(-350%);}
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0f0f0fd9;
    z-index: 5;
}
.modal>.closed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal>.overlay {
    margin: 0 auto;
    position: relative;
    width: 30rem;
    top: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    border-radius: 1rem;
    padding: 1rem;

	animation: open_modal .5s forwards;
}
@keyframes open_modal {
    from { transform: translateY(-150%); }
    to   { transform: translateY(0); }
}
.modal.hidden>.overlay {
    transform: translateY(0);
	animation: hide_modal .5s forwards;
}
@keyframes hide_modal {
	from { transform: translateY(0%); }
    to   { transform: translateY(-150%); }
}
.modal>.overlay>.top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}
.modal>.overlay>.top>h2 {
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 1.3rem;
    font-family: 'MTSans-BoldCondensed';
    text-transform: uppercase;
}
.modal>.overlay>.top>.closed {
    background: transparent;
    border: none;
    color: var(--text);
    border-radius: 50%;
}
.modal>.overlay>.top>.closed:hover {}
.modal>.overlay>.top>.closed>svg {
    width: 1.8rem;
    height: 1.8rem;
}
.modal>.overlay>.body>.note {
    color: var(--text);
    padding-bottom: .8rem;
}
.modal>.overlay>.body>.email {
    position: relative;
}
.modal>.overlay>.body>.email>svg {width: 1.5rem;height: 1.5rem;position: absolute;left: .5rem;top: 0;bottom: 0;margin: auto 0;color: var(--text);}
.modal>.overlay>.body>.email>input {
    width: 100%;
    height: 3rem;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    padding: .5rem 0.5rem .5rem 2.5rem;
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    color: var(--text);
}
.modal>.overlay>.body>.email>input:focus {
	border: 1px solid #b8b8a2;
}
.modal>.overlay>.body>.dope {
    padding: 1rem 0rem 0rem 0rem;
    color: var(--text);
}
.modal>.overlay>.body>.dope>.list {
    border-radius: .5rem;
    display: grid;
    gap: .5rem;
    margin-top: .5rem;
}

.modal>.overlay>.body>.dope>.list>.checkbox {
    display: flex;
    gap: 0.5rem;
    background: var(--hover);
    padding: .5rem;
    border-radius: .5rem;
}
.modal>.overlay>.body>.dope>.list>.checkbox>input {
    display: none;
}
.modal>.overlay>.body>.dope>.list>.checkbox>input[type="checkbox"]:checked+label:before {
    background-size: 63%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLQodC70L7QuV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiNlYzVlMjkiIGNsYXNzPSJzdDAiIGQ9Ik02LjUsMTdsLTYuMi02LjJDMCwxMC42LDAsMTAuMSwwLjMsOS43YzAsMCwwLDAsMCwwbDEuMS0xLjFjMC4zLTAuMywwLjgtMC4zLDEuMSwwbDMuOSwzLjlsMTEtMTEKCWMwLjMtMC4zLDAuOC0wLjMsMS4xLDBjMCwwLDAsMCwwLDBsMS4xLDEuMUMyMCwzLDIwLDMuNSwxOS43LDMuOGMwLDAsMCwwLDAsMEw2LjUsMTd6Ii8+Cjwvc3ZnPgo=);
    background-position-y: 5px;
    background-position-x: 5px;
}
.modal>.overlay>.body>.dope>.list>.checkbox>input[type="checkbox"]+label:before {
    content: '';
    width: 23px;
    height: 23px;
    border-radius: 0.2rem;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    background-color: #232222;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
.modal>.overlay>.body>.dope>.list>.checkbox>label {
    padding-left: 2rem;
    position: relative;
    cursor: pointer;
}
.modal>.overlay>.body>.dope>.list>.checkbox>label>.polsovat-title {
    color: var(--text);
    font-size: .9rem;
    line-height: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.modal>.overlay>.body>.dope>.list>.checkbox>label>.polsovat-title>img {
   width: 2rem;
}




.modal>.overlay>.body>.amount {
    padding: .8rem 0;
    color: var(--text);
}
.modal>.overlay>.body>.amount>p {}
.modal>.overlay>.body>.amount>p>span {
	font-weight: 600;
}
.modal>.overlay>.body>.btn-payer {
    position: relative;
    color: var(--text-light);
    text-transform: uppercase;
    background-color: #f0401e7d;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    padding: .8rem .7rem;
    overflow: hidden;
    align-items: center;
    width: 100%;
    font-size: 1rem;
}
.modal>.overlay>.body>.btn-payer>p {
	position: relative;
    z-index: 2;
}
.modal>.overlay>.body>.btn-payer::before {
	content: "";
	position: absolute;
	top: 0;
	will-change: transform;
	-webkit-animation: blink-button 3s infinite ease;
	animation: blink-button 3s infinite ease;
	width: 100%;
	height: 100%;
	border-left: 96px solid #f15c3fb3;
	left: 0;
}
.modal>.overlay>.body>.btn-payer:hover {
    background: var(--accent);
}
.modal>.overlay>.body>.btn-payer:disabled {
    background-color: #1a1a1a;
    border: 1px solid var(--border);
    color: #f9f5e14f;
    cursor: no-drop;
}
.modal>.overlay>.body>.btn-payer:disabled::before {
    animation: none;
    border-left: 0 solid #f15c3fb3;
}

.payer-box {}

.payer-box[box-style="metod"] {}
.payer-box[box-style="metod"]>p {
    color: var(--text);
    padding-bottom: .8rem;
}
.payer-box[box-style="metod"]>.flex-metod {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.payer-box[box-style="metod"]>.flex-metod>.metod {
    padding: .5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    gap: .5rem;
    cursor: pointer;
    transition: .3s;
}
.payer-box[box-style="metod"]>.flex-metod>.metod>img {}
.payer-box[box-style="metod"]>.flex-metod>.metod>.title {
    display: flex;
    flex-direction: column;
}
.payer-box[box-style="metod"]>.flex-metod>.metod>.title>p {}
.payer-box[box-style="metod"]>.flex-metod>.metod>.title>span {
    font-weight: 300;
    font-size: .9rem;
}
.payer-box[box-style="metod"]>.flex-metod>.metod:hover, .payer-box[box-style="metod"]>.flex-metod>.metod.active {
    border: 1px solid #b8b8a2;
    background: var(--hover);
}
.payer-box[box-style="metod"]>.btn-metod-pay {
    background: var(--accent-yellow);
    border: none;
    color: var(--bg);
    border-radius: .5rem;
    padding: .6rem 2.5rem;
    height: 3rem;
    text-transform: uppercase;
    font-size: 1rem;
    width: 100%;
    margin-top: 1rem;
}
.payer-box[box-style="metod"]>.btn-metod-pay:not(:disabled):hover {
	transform: scale(1.02);
}
.payer-box[box-style="metod"]>.btn-metod-pay:disabled {
	background-color: #1a1a1a;
    border: 1px solid var(--border);
    color: #f9f5e14f;
    cursor: no-drop;
}

.payer-box[box-style="search"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 1rem;
}
.payer-box[box-style="search"]>.title {
    text-align: center;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 600;
}
.payer-box[box-style="search"]>.timer {
    width: 7rem;
    display: flex;
    align-items: center;
    background: #232222;
    justify-content: center;
    border-radius: 2rem;
    height: 3.5rem;
}
.payer-box[box-style="search"]>.timer>img {
    height: 40px;
    width: 40px;
}
.payer-box[box-style="search"]>.timer>.time {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--accent-yellow);
    width: 3rem;
    text-align: center;
}
.payer-box[box-style="search"]>.timer>.time>span {
    font-size: 1.3rem;
}
.payer-box[box-style="search"]>.text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    color: var(--text);
    font-size: 1rem;
}
.payer-box[box-style="search"]>.text>b {
    color: var(--text);
    font-size: 1.1rem;
}
.payer-box[box-style="success"] {
    padding: 1rem;
}
.payer-box[box-style="success"]>.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    padding-bottom: 1rem;
}
.payer-box[box-style="success"]>.icon>svg {
    color: #41D195;
    height: 4rem;
    width: 4rem;
}
.payer-box[box-style="success"]>.text {}
.payer-box[box-style="success"]>.text>h2 {text-align: center;color: var(--text);font-size: 1.2rem;font-weight: 600;}
.payer-box[box-style="success"]>.text>p {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    color: var(--text);
    font-size: 1rem;
}
.payer-box[box-style="success"]>.block-store {
    background: var(--hover);
    padding: 1rem;
    border-radius: .5rem;
    margin-top: 1.5rem;
    color: var(--text);
    display: grid;
    gap: .5rem;
}
.payer-box[box-style="success"]>.block-store>p {}
.payer-box[box-style="success"]>.block-store>.cent {
    text-align: center;
}
.payer-box[box-style="success"]>.block-store>ul {
    display: grid;
    gap: .3rem;
    background: #232222;
    padding: 1rem;
    border-radius: .5rem;
}
.payer-box[box-style="success"]>.block-store>ul>p {
    padding-bottom: .3rem;
}
.payer-box[box-style="success"]>.block-store>ul>li {
    list-style: auto;
    padding-left: .3rem;
    margin-left: 1rem;
}
.payer-box[box-style="success"]>.block-store>ul>li>a {}


.payer-box[box-style="error"]>.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    padding-bottom: 1rem;
}
.payer-box[box-style="error"]>.icon>svg {
    color: #FB6467;
    height: 4rem;
    width: 4rem;
}
.payer-box[box-style="error"]>.text {}
.payer-box[box-style="error"]>.text>h2 {
    text-align: center;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 600;
}
.payer-box[box-style="error"]>.text>p {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    color: var(--text);
    font-size: 1rem;
}
.payer-box[box-style="error"]>.cont {
    background: var(--hover);
    padding: 1rem;
    border-radius: .5rem;
    margin-top: 1rem;
}
.payer-box[box-style="error"]>.cont>.link {}
.payer-box[box-style="error"]>.cont>.link>p {
    color: var(--text);
    padding-bottom: .4rem;
}
.payer-box[box-style="error"]>.cont>.link>a {display: flex;align-items: center;gap: .3rem;background: #232222;padding: .2rem 0.8rem;color: var(--text);border-radius: .5rem;width: 100%;justify-content: center;height: 2.5rem;}
.payer-box[box-style="error"]>.cont>.link>a:hover {
    transform: scale(1.02);
}
.payer-box[box-style="error"]>.cont>.token {
    padding-top: .5rem;
    position: relative;
}
.payer-box[box-style="error"]>.cont>.token>p {
    color: var(--text);
    display: block;
    padding-bottom: .3rem;
}
.payer-box[box-style="error"]>.cont>.token>span {
    display: flex;
    border: none;
    background: #232222;
    padding: .5rem 0.7rem;
    border-radius: .5rem;
    color: var(--text);
    text-align: center;
    height: 2.7rem;
    align-items: center;
}
.payer-box[box-style="error"]>.cont>.token>button {
    width: 35px;
    height: 35px;
    border: none;
    position: absolute;
    right: 0;
    bottom: 5px;
    cursor: pointer;
    background: transparent;
    color: var(--text);
}
.payer-box[box-style="error"]>.cont>.token>button:hover {
    color: var(--accent-yellow);
}
.payer-box[box-style="error"]>.cont>.token>button>svg {
    width: 1.7rem;
    height: 1.7rem;
}

.payer-box[box-style="process"]>.requisite {}
.payer-box[box-style="process"]>.requisite>.time_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--hover);
    border: 1px solid var(--border);
}
.payer-box[box-style="process"]>.requisite>.time_box>.left {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.payer-box[box-style="process"]>.requisite>.time_box>.left>.icon {
    background: #b8b8a226;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text);
}
.payer-box[box-style="process"]>.requisite>.time_box>.left>.icon>svg {
    width: 1rem;
    height: 1rem;
}
.payer-box[box-style="process"]>.requisite>.time_box>.left>.text {
    color: var(--text);
    font-size: 0.9rem;
}
.payer-box[box-style="process"]>.requisite>.time_box>.time-pay {
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 800;
}
.payer-box[box-style="process"]>.requisite>.block-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payer-box[box-style="process"]>.requisite>.block-qr>img {
    box-shadow: 0px 12px 20px -4px #2f2e2e;
    padding: 1rem;
    width: 16rem;
    height: 16rem;
    margin: 0rem 1rem .5rem 1rem;
    border-radius: 1.5rem;
}
.payer-box[box-style="process"]>.requisite>.block-qr>p {
    color: var(--text);
}
.payer-box[box-style="process"]>.requisite>.block-qr>a {
    height: 3rem;
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: center;
    font-weight: 600;
    border-radius: .5rem;
    margin-top: 1rem;
    margin-bottom: .5rem;
    letter-spacing: 1px;
    background: var(--accent-yellow);
    border: none;
    color: var(--bg);
}
.payer-box[box-style="process"]>.requisite>.block-qr>a:hover {
    transform: scale(1.03);
}
.payer-box[box-style="process"]>.requisite>.cost-form {
    padding: 1rem;
    border-radius: 1rem;
    position: relative;
    margin-top: .5rem;
    background: var(--hover);
    border: 1px solid var(--border);
}
.payer-box[box-style="process"]>.requisite>.cost-form>.left {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.payer-box[box-style="process"]>.requisite>.cost-form>.left>svg {
    max-width: 2.3rem;
    max-height: 2.3rem;
    border-radius: 50%;
    color: var(--text);
    padding: .3rem;
    background: #b8b8a226;
}
.payer-box[box-style="process"]>.requisite>.cost-form>.left>.cost {}
.payer-box[box-style="process"]>.requisite>.cost-form>.left>.cost>p {
    color: #b8b8a2c7;
}
.payer-box[box-style="process"]>.requisite>.cost-form>.left>.cost>span {
    color: var(--text-light);
    font-size: 1.7rem;
    font-weight: 900;
    text-align: right;
}
.payer-box[box-style="process"]>.requisite>.cost-form>button {
    width: 2rem;
    height: 2rem;
    border: none;
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    cursor: pointer;
    background: transparent;
    color: var(--text);
}
.payer-box[box-style="process"]>.requisite>.cost-form>button:hover {
    color: var(--accent-yellow);
}
.payer-box[box-style="process"]>.requisite>.cost-form>button>svg {
    width: 1.5rem;
    height: 1.5rem;
}
.payer-box[box-style="process"]>.requisite>.cost-form>button>svg {}

.payer-box[box-style="process"]>.requisite>.cont {
    background: var(--hover);
    padding: 1rem;
    border-radius: .5rem;
    margin-top: 1rem;
}
.payer-box[box-style="process"]>.requisite>.cont>.link {}
.payer-box[box-style="process"]>.requisite>.cont>.link>p {
    color: var(--text);
    padding-bottom: .4rem;
}
.payer-box[box-style="process"]>.requisite>.cont>.link>a {display: flex;align-items: center;gap: .3rem;background: #232222;padding: .2rem 0.8rem;color: var(--text);border-radius: .5rem;width: 100%;justify-content: center;height: 2.5rem;}
.payer-box[box-style="process"]>.requisite>.cont>.link>a:hover {
    transform: scale(1.02);
}
.payer-box[box-style="process"]>.requisite>.cont>.token {
    padding-top: .5rem;
    position: relative;
}
.payer-box[box-style="process"]>.requisite>.cont>.token>p {
    color: var(--text);
    display: block;
    padding-bottom: .3rem;
}
.payer-box[box-style="process"]>.requisite>.cont>.token>span {
    display: flex;
    border: none;
    background: #232222;
    padding: .5rem 0.7rem;
    border-radius: .5rem;
    color: var(--text);
    text-align: center;
    height: 2.7rem;
    align-items: center;
}
.payer-box[box-style="process"]>.requisite>.cont>.token>button {
    width: 35px;
    height: 35px;
    border: none;
    position: absolute;
    right: 0;
    bottom: 5px;
    cursor: pointer;
    background: transparent;
    color: var(--text);
}
.payer-box[box-style="process"]>.requisite>.cont>.token>button:hover {
    color: var(--accent-yellow);
}
.payer-box[box-style="process"]>.requisite>.cont>.token>button>svg {
    width: 1.5rem;
    height: 1.5rem;
}

.payer-box[box-style="process"]>.requisite>.note {
    padding: 1rem;
    background: #ee323512;
    border-radius: .5rem;
    border: 1px solid #EE3235;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
}
.payer-box[box-style="process"]>.requisite>.note>svg {
    max-width: 2.2rem;
    max-height: 2.2rem;
    background: #ee32353d;
    border-radius: 50%;
    color: #EE3235;
}
.payer-box[box-style="process"]>.requisite>.note>p {
    color: #EE3235;
}
.payer-box[box-style="process"]>.requisite>.block-form {
    padding-bottom: .3rem;
}
.payer-box[box-style="process"]>.requisite>.block-form>p {
    color: var(--text);
    font-size: 1rem;
    height: 2rem;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.payer-box[box-style="process"]>.requisite>.block-form>.form {
    padding: 1rem;
    border-radius: 1rem;
    background: var(--hover);
    border: 1px solid var(--border);
}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input {display: flex;border-top: 2px solid #64748b17;padding-top: .5rem;margin-top: .5rem;position: relative;flex-direction: column;}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input:first-child {border-top: none;padding-top: 0;margin-top: 0;}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input>lable {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.8rem;
    font-weight: 500;
}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input>span {
    width: 100%;
    border: none;
    background: #232222;
    padding: .5rem 0.7rem;
    border-radius: .5rem;
    color: var(--text-light);
    font-weight: 800;
    font-size: 1.2rem;
}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input>button {width: 2rem;height: 2rem;border: none;position: absolute;right: 0;bottom: 5px;cursor: pointer;background: transparent;color: var(--text);}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input>button>svg {
	width: 1.5rem;
	height: 1.5rem;
}
.payer-box[box-style="process"]>.requisite>.block-form>.form>.input>button:hover {
	color: var(--accent-yellow);
}
.payer-box[box-style="process"]>.requisite>.block-link {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem 0;
    border: 1px solid var(--border);
}
.payer-box[box-style="process"]>.requisite>.block-link>p {
    text-align: center;
    color: var(--text);
    font-weight: 500;
}
.payer-box[box-style="process"]>.requisite>.block-link>p>b {}
.payer-box[box-style="process"]>.requisite>.block-link>a {
    height: 3rem;
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: center;
    font-weight: 600;
    border-radius: .5rem;
    margin-top: 1rem;
    margin-bottom: .5rem;
    letter-spacing: 1px;
    background: var(--accent-yellow);
    color: var(--bg);
}
.payer-box[box-style="process"]>.requisite>.block-link>a:hover {
    transform: scale(1.02);
}




.copy-input.act {
	position:relative;
}
.copy-input.act::before {
	content:attr(data-title);
	position: absolute;
	bottom: 94%;
	left: -1.6rem;
	margin: 0 auto;
	width: max-content;
	background: #2f2e2e;
	padding: .2rem;
	border-radius: .4rem;
	border: 1px solid var(--border);
}

.code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.code>h1 {
	text-transform: uppercase;
    font-size: 2.575rem;
    margin: 0;
    text-align: center;
    padding: 6rem 0rem 2rem 0rem;
    color: var(--text-light);
}
.code>.email-game {
    border-bottom: 1px solid var(--border);
    padding-bottom: .8rem;
    margin-bottom: .1rem;
}
.code>.email-game>input {
    width: 35rem;
    height: 3rem;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    padding: .5rem 0.5rem .5rem 0.5rem;
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    color: var(--text);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}
.code>.email-game>p {
    color: var(--text);
    padding-top: .6rem;
    text-align: center;
}
.code>.email-game>p>a {
    color: var(--accent);
    padding-top: .4rem;
    text-align: center;
}

.code>input {
    width: 35rem;
    height: 3rem;
    border-radius: .5rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 .5rem 1rem rgb(42 42 42 / 21%) !important;
    padding: .5rem 0.5rem .5rem 0.5rem;
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    color: var(--text);
    text-align: center;
    text-transform: uppercase;
	font-weight: 600;
}
.code>button {
    width: 35rem;
    height: 3rem;
    background: var(--accent-yellow);
    border: none;
    color: var(--bg);
    border-radius: .5rem;
    padding: .6rem 2.5rem;
    text-transform: uppercase;
    font-size: 1rem;
}
.code>button:hover {
	transform: scale(1.01);
}

.viewport {
    position:relative;
    width:min(100%,900px);
    height: 200px;
    margin:auto;
    overflow:hidden;
}
.pointer{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width: 2px;
    height:100%;
    background: var(--accent-yellow);
    z-index:10;
}
.roulets {
    display: flex;
    gap: 10px;
    align-items: center;
    transition: transform 5s cubic-bezier(.08, .72, .11, 1);
    height: 100%;
}
.roulets>.item {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--hover);
    color: #fff;
    align-items: center;
    justify-content: center;
}
.roulets>.item>span {
    width: 100%;
    text-align: center;
    font-size: .8rem;
    color: var(--text-light2);
}
.roulets>.item>img {
    width: 4rem;
}
.roulets>.item.win {
    border: 1px solid var(--accent-yellow);
    transform: scale(1.1);
    transition: .3s;
}
.win-block {
    position: absolute;
    top: 0;
    left: 0;
    background: #1a1a1a;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    gap: .5rem;
    padding: 0rem 3rem;
}
.win-block>h2 {
    text-align: center;
    color: var(--text-light2);
    font-family: 'MTSans-BoldCondensed';
    text-transform: uppercase;
    font-size: 1.3rem;
}
.win-block>h2>b {
    color: var(--accent-yellow);
}
.win-block>img {
    width: 6rem;
}
.win-block>p {
    text-align: center;
    color: var(--text-light2);
}
.win-block>p>b {
    color: var(--accent-yellow);
}
.page-404 {
    color: var(--text-light);
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: max-content;
    margin: 5rem auto 0 auto;
    padding: 2rem 3rem;
}
.page-404>h2 {
    text-transform: uppercase;
    font-size: 7.175rem;
    margin: 0;
    text-align: center;
}
.page-404>p {
    font-size: 2.2rem;
    text-transform: unset;
}
.page-404>a {
    font-family: 'MTSans-BoldCondensed';
    text-transform: uppercase;
    font-size: 1.2rem;
    color: #fab81b;
}
.page-404>a:hover {
    transform: scale(1.1);
}
#mobile {
	display: none;
}

	#mobile>.logotype, #mobile>.mobile-block>.top>.logotype {
		transition: .3s;
		text-transform: uppercase;
		font-size: 1.2rem;
		color: var(--text);
	}
	#mobile>.logotype>h1, #mobile>.mobile-block>.top>.logotype>h1 {
		font-size: 1.5rem;
		display: flex;
		gap: .3rem;
	}
	#mobile>.logotype>h1>span:nth-last-child(1), #mobile>.mobile-block>.top>.logotype>h1>span:nth-last-child(1) {
		color: var(--accent);
	}
	#mobile>button, #mobile>.mobile-block>.top>button {
		position: absolute;
		right: 1rem;
		background: transparent;
		border: none;
		color: var(--text);
	}
	#mobile>button:hover, #mobile>.mobile-block>.top>button:hover, #mobile>.mobile-block>.menu>a:hover {
		color: var(--accent-yellow);
	}
	#mobile>button>svg, #mobile>.mobile-block>.top>button>svg {
		width: 2rem;
		height: 2rem;
	}
	#mobile>.mobile-block.show {
		transform: translateX(-120%);
		animation: show_animated_mobile .5s forwards;
	}
	@keyframes show_animated_mobile {
		0% {transform: translateX(-120%);}
		100% {transform: translateX(0);}
	}
	#mobile>.mobile-block.hide {
		transform: translateX(0);
		animation: show_animated_mobile_closed .5s forwards;
	}
	@keyframes show_animated_mobile_closed {
		0% {transform: translateX(0);}
		100% {transform: translateX(-120%);}
	}
	#mobile>.mobile-block {
		position: fixed;
		background-color: var(--card);
		width: 100%;
		height: 100vh;
		z-index: 5;
		top: 0;
		left: 0;
		transform: translateX(-120%);
	}
	#mobile>.mobile-block>.menu {
		display: flex;
		flex-direction: column;
		width: 90%;
		gap: 1rem;
		margin: 0 auto;
	}
	#mobile>.mobile-block>.menu>.user-auth-block {
		display: flex;
		border-radius: .5rem;
		background: var(--card);
		border: 1px solid var(--accent-yellow);
		padding: .8rem .7rem;
		gap: .8rem;
		align-items: center;
		width: 100%;
		justify-content: center;
	}
	#mobile>.mobile-block>.menu>.user-auth-block>.login-profile {
		color: var(--accent-yellow);
		font-family: 'MTSans-BoldCondensed';
		font-size: 1.5rem;
	}
	#mobile>.mobile-block>.menu>.login-btn {
		display: flex;
		position: relative;
		color: var(--text-light);
		text-transform: uppercase;
		background-color: #f0401e7d;
		border: 1px solid var(--accent);
		border-radius: .5rem;
		padding: .8rem .7rem;
		justify-content: center;
		overflow: hidden;
		align-items: center;
		gap: .7rem;
		width: 100%;
	}
	#mobile>.mobile-block>.menu>.login-btn>svg {
		z-index: 2;
		width: 1.4rem;
		height: 1.4rem;
		position: relative;
		top: -1px;
	}
	#mobile>.mobile-block>.menu>.user-auth-block>.login-exit {
		color: var(--accent-yellow);
	}
	#mobile>.mobile-block>.menu>.user-auth-block>.login-exit>svg {
		width: 1.5rem;
		height: 1.5rem;
	}
	#mobile>.mobile-block>.menu>a {
		font-size: 1.5rem;
		color: var(--text);
		text-transform: uppercase;
		font-family: 'MTSans-BoldCondensed';
	}

@media (min-width: 1026px) and (max-width: 1440px){ }
@media (min-width: 1023px) and (max-width: 1025px){
	#header {
		display: none;
	}
	
	#mobile, #mobile>.mobile-block>.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 5rem;
		background: var(--card);
	}
	#mobile>.mobile-block {
		width: 50%;
	}
	#mobile>.mobile-block, #mobile>.mobile-block>.top {
		background-color: #202020;
	}
	.center {
		width: 95%;
	}
	.slider {
		height: 15rem;
	}
	.slider>.box-animated>a>.title {
		
	}
	.slider>.box-animated>a>.title>h2 {
	}
	.slider>.box-animated>a>.title>p {
	}
	.product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.product {
		display: flex;
		flex-direction: column;
	}
	.product>.right>.slider-shop>.animated>.block {
		height: 35rem;
	}
	.product>.right>.video-shop>iframe {
		height: 34rem;
	}
}
@media (min-width: 701px) and (max-width: 1023px){
	.center {
		width: 95%;
		margin: 0 auto;
	}
	#header {
		display: none;
	}
	
	#mobile, #mobile>.mobile-block>.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 5rem;
		background: var(--card);
	}
	.slider {
		height: 12rem;
	}
	.slider>.box-animated>a>.title {
		
	}
	.slider>.box-animated>a>.title>h2 {
	}
	.slider>.box-animated>a>.title>p {
	}
	.filter>.top>.search>input {
		width: 20rem;
	}
	.filter>.nation {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.title-top>p {
		width: 90%;
	}
	.form-search>.block>input {
		width: 18rem;
	}
	.product {
		display: flex;
		flex-direction: column;
	}
	.product>.right>.slider-shop>.animated>.block, .product>.right>.video-shop>iframe {
		height: 25rem;
	}
	.product>.pr-haract>.box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}
@media screen and (max-width: 700px){
	
	.center {
		width: 95%;
		margin: 0 auto;
	}
	#header {
		display: none;
	}
	
	#mobile, #mobile>.mobile-block>.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 5rem;
		background: var(--card);
	}
	.slider>.box-animated>a {
		background-size: auto;
	}
	.slider {
		height: 15rem;
	}
	.slider>.box-animated>a>.title {
		
	}
	.slider>.box-animated>a>.title>h2 {
	}
	.slider>.box-animated>a>.title>p {
	}
	.slider>.left {
		left: .5rem;
	}
	.slider>.right {
		right: .5rem;
	}
	.filter>.top {
		flex-direction: column;
		gap: 1rem;
	}
	.filter>.nation {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.filter>.type {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.filter>.top>.search, .filter>.top>.search>input {
		width: 100%;
	}
	.product-list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	footer {
		padding: 2rem 0rem 2rem 0rem;
	}
	footer>.box>.link {
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}
	.title-top {
		padding: 1rem;
	}
	.title-top>h1 {
		font-size: 1.875rem;
	}
	.title-top>p {
		width: 90%;
	}
	.block-other {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.contact>.link {
		flex-direction: column;
	}
	.contact>.link>a {
		margin: 0;
	}
	.block-other>.reviews {
        display: flex;
        flex-direction: column;
        grid-column: 1 / 2;
    }
	.block-other>.reviews>.block {
		width: 100%;
	}
	.form-search {
		flex-direction: column;
	}
	.form-search>.block {
		flex-direction: column;
		width: 100%;
	}
	.form-search>.block>input {
		width: 100%;
	}
	.form-search>.block>button {
		height: 3rem;
	}
	
	.table>.header {
		display: none;
	}
	.table>.product {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		align-items: center;
	}
	.table>.product>.id, .table>.product>.item, .table>.product>.cost, .table>.product>.date, .table>.product>.status, .table>.product>.link {
        font-size: 1.3rem;
        text-align: center;
        width: 100%;
    }
	.table>.product>.id {
        display: none;
    }
	.product {
        display: flex;
        flex-direction: column;
    }
	.pr-sostav>.box {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.product>.right>.slider-shop>.animated>.block {
		height: 12rem;
	}
	.product>.right>.video-shop>iframe {
		height: 209px;
	}
	.product>.pr-haract>.box {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.modal>.overlay {
		width: 100%;
		top: 0;
		height: 100%;
		border-radius: 0;
        padding-top: 1rem;
	}
	.modal>.overlay>.top {
		margin-bottom: 1.5rem;
	}
	.table>.product>.title-text {
		text-align: center;
	}
	
	.code>.email-game, .code>.email-game>input, .code>input, .code>button {
		width: 100%;
	}
	.code>h1 {
		padding: 2rem 0rem 2rem 0rem;
	}
	.viewport {