/* hero slider */
.hero-bg-skew {
    transform: skewX(20deg);
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari and Chrome */
    width: 60%;
    height: 100%;
    border-right: 12px solid rgba(0, 0, 0, 0.35);
    border-left: 12px solid rgba(0, 0, 0, 0.35);
		z-index: 2;
		left: 30%;
    right: auto;
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.hero-bg-skew-img {
    content: "";
    transform: skewX(-20deg);
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari and Chrome */
    background-repeat: no-repeat;
    background-position: top left;
    position: absolute;
		background-size: cover;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 130%;
    height: 100%;
}
@media (max-width: 767.98px) {
	.hero-bg-skew{
		transform: skewX(15deg);
    -ms-transform: skewX(15deg); /* IE 9 */
    -webkit-transform: skewX(15deg); /* Safari and Chrome */
		width: 80%;
		left: 25%;
	}
	.hero-bg-skew-img{
		transform: skewX(-15deg);
    -ms-transform: skewX(-15deg); /* IE 9 */
    -webkit-transform: skewX(-15deg); /* Safari and Chrome */
	}
}
@media (max-width: 991.98px){
	.swiper_wrapper .slider-caption h2{font-size: 3rem;}
}
@media (max-width: 767.98px){
	.swiper_wrapper .slider-caption h2{font-size: 2rem;}
}
@media (max-width: 359.98px){
	.swiper_wrapper .slider-caption h2{font-size: 1.5rem;}
}

.slider-caption.slider-caption-center{max-width: 1200px;}

/* sliders */
.swiper-button-container{
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  row-gap:1rem;
}
@media (min-width: 576px){
  .swiper-button-container{flex-direction: row;}
}
.swiper-slide-bg {background-position: center center;}
.block-slider-2.slider-element { background-color: var(--c4); }

.block-slider-2 .swiper-pagination {
	--color: #FFF;
	--gap: 10px;
	--line-width: 50px;
	display: flex;
	width: auto;
	justify-content: center;
	counter-reset: item;
		bottom: 50px !important;
		transform: translateX(-50%);
		align-items: center;
}

.block-slider-2 .swiper-pagination,
.block-slider-2 .swiper-pagination::before,
.block-slider-2 .swiper-pagination::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.block-slider-2 .swiper-pagination::before {
	content: "";
	width: var(--line-width, 50px);
	height: 1px;
	background-color: var(--color, #FFF);
}

.block-slider-2 .swiper-pagination span::before {
	content: "0" counter(item);
	counter-increment: item;
	font-weight: 700;
	color: var(--color, #FFF);
}

.block-slider-2 .swiper-pagination::after {
	content: attr(swiper-slides-total);
	left: calc(50% + var(--gap, 10px) + var(--line-width, 50px));
	font-weight: 700;
	color: var(--color, #FFF);
	opacity: 0.6;
}

.block-slider-2 .swiper-pagination span {
	position: absolute;
	left: calc(50% - var(--gap, 10px) - var(--line-width, 50px));
	width: auto;
	height: auto;
	margin: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.block-slider-2 .swiper-pagination span:not(.swiper-pagination-bullet-active) {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
}

.block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
}

.block-slider-2 .swiper-pagination span,
.block-slider-2 .swiper-pagination span:hover,
.block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active {
	background-color: transparent !important;
	border: 0;
}

.gamearrow-right::after,.gamearrow-left::after{
    content: "";
    position: absolute;
    height: 100px;
    width: 82px;
    z-index: 10;
}
.gamearrow-left::after {background-image: url('../game/images/ui/arrowleft.webp');}
.gamearrow-right::after {background-image: url('../game/images/ui/arrowright.webp');}
.gamearrow-right:hover::after,.gamearrow-left:hover::after{filter: brightness(1.5);}
.slider-arrow-right.gamearrow-right,.slider-arrow-left.gamearrow-left{height: 100px;width: 82px;background-color: transparent;}