img {
	max-width: 100%;
}

.page-content {
	padding: 0px 40px;
}

.local-title {
	font-size: 14px;
	font-weight: 700;
	color: #6ec9eb;
	margin-bottom: 20px;
}

.box-item {
	width: 135px;
	min-width: 135px;
	height: 160px;
	background-color: #0b1721;
	padding: 5px;
	margin: 1px;
	display: inline-block;
	transition: 0.3s;
}
.box-item:hover .hv-img {
	display: block;
}
.box-item:hover .st-img {
	display: none;
}
.box-item-block {
	border: 1px solid #234645;
	height: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(#223245, #0b1721);
}
.box-item-block img {
	position: relative;
	z-index: 10;
}
.variable-width {
	margin-bottom: 25px;
}

.variable-width .slick-arrow {
	position: absolute;
	width: 30px;
	height: 20px;
	font-size: 0px;
	top: 50%;
	transition: 0.3s;
	opacity: 0.7;
}
.variable-width .slick-arrow:hover {
	opacity: 1;
	filter: drop-shadow(0px 0px 10px rgba(98, 132, 194, 0.2));
}
.variable-width .slick-prev {
	background: url(../images/slick-arrow.png) no-repeat;
	left: -35px;
	transform: rotate(-180deg);
}
.variable-width .slick-next {
	background: url(../images/slick-arrow.png) no-repeat;
	right: -35px;
}
.box-items-scroll {
	position: relative;
}
.box-items-scroll:after {
	content: '';
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 50px;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(14, 22, 29, 0.9)
	);
	z-index: 11;
}
.box-item-legendary {
	box-shadow: inset 0px 0px 7px 1px rgba(94, 94, 59, 1);
}
.box-item-legendary .box-item-block {
	border: 1px solid #fbe66b;
}
.box-item-rare {
	box-shadow: inset 0px 0px 7px 1px #082262;
}
.box-item-rare .box-item-block {
	border: 1px solid #003bf7;
}
.box-item-epic {
	box-shadow: inset 0px 0px 7px 1px #5c1169;
}
.box-item-epic .box-item-block {
	border: 1px solid #f306ee;
}
.box-item-open-legendary:hover .box-item-block {
	background: radial-gradient(#898652, #0b1721);
}
.box-item-open.box-item-block img {
	width: 120%;
	max-width: 120%;
}
.box-item-open-epic:hover .box-item-block {
	background: radial-gradient(#861893, #0b1721);
}
.box-item-open-rare:hover .box-item-block {
	background: radial-gradient(#10369c, #0b1721);
}
.slick-slide .hv-img {
	display: none;
}
.miniBoxes {
	background: #031018;
	margin-bottom: 20px;
	margin-left: -40px;
	margin-right: -40px;
	padding: 0px 40px;
}

.miniBoxes-flex {
	flex-wrap: wrap;
	margin-top: 5px;
	gap: 2px;
}
.miniBox {
	padding: 0px 20px 0px 0px;
	height: 60px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: 0.3s;
	width: 220px;
}
.miniBox:hover {
	margin-top: -10px;
}
.miniBox-legendary .miniBox-text {
	color: #fbe66b;
}
.miniBox-text {
	font-weight: bold;
	font-size: 16px;
	padding-left: 5px;
}
.miniBox-text p {
	text-transform: uppercase;
	color: #1e2e3f;
	margin-bottom: 8px;
}

.miniBox-text p {
	text-transform: uppercase;
}
.miniBox-legendary {
	background: linear-gradient(to top, rgba(116, 112, 63, 0.5), #0e161d);
}
.miniBox-legendary:hover {
	box-shadow: 0px 0px 10px 2px rgba(116, 112, 63, 1);
}
.miniBox-legendary .miniBox-text span {
	color: #fbe66b;
}
.miniBox-epic {
	background: linear-gradient(to top, rgba(110, 15, 117, 0.5), #0e161d);
}
.miniBox-epic:hover {
	box-shadow: 0px 0px 10px 2px rgba(110, 15, 117, 1);
}
.miniBox-epic .miniBox-text span {
	color: #f306ee;
}
.miniBox-rare {
	background: linear-gradient(to top, rgba(8, 38, 123, 0.5), #0e161d);
}
.miniBox-rare:hover {
	box-shadow: 0px 0px 10px 2px rgba(8, 38, 123, 1);
}
.miniBox-rare .miniBox-text span {
	color: #003bf7;
}
.miniBox-common {
	background: linear-gradient(to top, rgba(11, 111, 121, 0.5), #0e161d);
}
.miniBox-common:hover {
	box-shadow: 0px 0px 10px 2px rgba(11, 111, 121, 1);
}
.miniBox-common .miniBox-text span {
	color: #06daf3;
}
.miniBox-quest {
	background: linear-gradient(to top, rgba(116, 14, 18, 0.5), #0e161d);
}
.miniBox-quest:hover {
	box-shadow: 0px 0px 10px 2px rgba(116, 14, 18, 1);
}
.miniBox-quest .miniBox-text span {
	color: #f30606;
}
.miniBoxes-buttons {
	width: 100%;
	justify-content: center;
	padding-bottom: 20px;
}
.miniBoxes-buttons .button {
	margin: 10px;
	margin-top: 30px;
	text-transform: uppercase;
}

.box-title {
	position: relative;
	text-align: center;
	margin-bottom: 60px;
}
.box-title span {
	position: relative;
	z-index: 3;
	color: #6ec9eb;
	font-weight: 4000;
	font-size: 14px;
	display: inline-block;
	text-transform: uppercase;
	padding: 10px;
}
.boxPrice {
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}
.boxPrice-block {
	text-align: center;
	margin-bottom: 50px;
}
.boxPrice-block_img {
	transition: 0.3s;
	position: relative;
	top: 0px;
}
.boxPrice-block:hover .boxPrice-block_img {
	top: -15px;
}
.boxPrice-block_title {
	color: #ffffff;
	font-weight: bold;
	font-size: 16px;
}
.boxPrice-block_coins {
	margin-bottom: 20px;
}
.boxPrice-block_coins a {
	display: inline-block;
	background: url(../images/loot-box/button-coin.png) no-repeat;
	width: 180px;
	height: 62px;
	line-height: 62px;
	color: #bffb30;
	font-size: 20px;
	text-shadow: 0px 0px 10px #bffb30;
	text-align: center;
}
.boxPrice-block_coins a:hover {
	filter: brightness(120%);
}
.boxPrice-block_coins a b {
	font-size: 26px;
}
.boxPrice-block_coins span {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin-right: 10px;
	text-transform: uppercase;
}
.boxPrice-block_text {
	font-size: 18px;
	text-transform: uppercase;
}
.boxPrice-block-legendary .boxPrice-block_text {
	color: #fbe66b;
}
.boxPrice-block-epic .boxPrice-block_text {
	color: #f306ee;
}
.boxPrice-block-rare .boxPrice-block_text {
	color: #6ec9eb;
}
.cards {
	position: relative;
	overflow: hidden;
	margin-bottom: 50px;
}
.cards:before {
	content: '';
	position: absolute;
	background: linear-gradient(
		to left,
		rgba(23, 41, 52, 0),
		rgba(23, 41, 52, 1) 80%
	);
	top: 0px;
	left: 0px;
	height: 100%;
	width: 20%;
	z-index: 15;
}
.cards:after {
	content: '';
	position: absolute;
	background: linear-gradient(
			to right,
			rgba(23, 41, 52, 0),
			rgba(23, 41, 52, 1)
		)
		80%;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 20%;
	z-index: 15;
}
.cardList {
	height: 210px;
	width: 1200px;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	padding: 0px;
	margin: 0 auto;
	margin-left: -110px;
}
.card {
	display: inline-block;
	text-align: center;
	height: 210px;
	width: 190px;
	background-color: #0b1721;
	margin: 0 auto;
	padding: 10px;
}
.cardBlock {
	background: radial-gradient(#28444f, #0b1721);
	border: 1px solid #264c49;
	height: 100%;
	position: relative;
}
.cardBlock-chance {
	position: absolute;
	top: 15px;
	right: 10px;
	color: #6ec9eb;
	font-weight: 400;
	font-size: 13px;
}
.cardBlock-img {
	height: 135px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cardBlock-name {
	color: #fff;
	font-size: 14px;
	margin-bottom: 12px;
	text-transform: uppercase;
}
.cardBlock-rarity {
	color: #3a555b;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}
.card-legendary {
	box-shadow: inset 0px 0px 7px 3px #7f824f;
}
.card-legendary .cardBlock-rarity {
	color: #574d32;
}
.card-epic {
	box-shadow: inset 0px 0px 7px 3px #7a1988;
}
.card-epic .cardBlock-rarity {
	color: #824281;
}
.card-rare {
	box-shadow: inset 0px 0px 7px 3px #123d94;
}
.card-rare .cardBlock-rarity {
	color: #263d85;
}

.wrapper-cards {
	position: relative;
}
.loot-arrow {
	content: '';
	width: 42px;
	height: 46px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.loot-arrow.top {
	background: url(../images/loot-box/loot-arrow-top.png) no-repeat;
	top: -35px;
}

.loot-arrow.bottom {
	background: url(../images/loot-box/loot-arrow-bottom.png) no-repeat;
	bottom: -35px;
}
.controls {
	display: none;
}
.cardsBlock-title {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 60px;
}
.cardsBlock-title span {
	color: #fbe66b;
	display: inline-block;
	font-size: 36px;
}
.cardsBlock-img {
	text-align: center;
	margin-bottom: 40px;
}
.bts {
	text-align: center;
	margin-bottom: 50px;
}
.bts p {
	padding: 10px 0px;
}
.bts p:last-child {
	margin-bottom: 0px;
}
.bts .button {
	margin: 0 auto;
	text-transform: uppercase;
}
.chance {
	text-align: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 50px;
}
.chance span {
	color: #ff06fb;
	display: inline-block;
}
.preco {
	position: relative;
	margin-left: -30px;
}
.box-title-box {
	margin-bottom: 25px;
}

@media (min-width: 1200px) {
	.boxPrice-block {
		width: 33.3%;
	}
}