.superblockslider {
	position: relative;
}
.superblockslider__window, .superblockslider__track {
	height: 100%;
}
/* window */
.superblockslider__window {
	width: 100%;
	overflow: hidden;
}
/* track */
.superblockslider__track {
	width: 100%;
	display: flex;

	transition: all .7s ease-in-out;
}

.superblockslider__controls {
	display: flex;
	justify-content: space-between;
}
.superblockslider__buttons {
    position: absolute;
	z-index: 2;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
	align-items: center;
	min-height: 2rem;

	display: flex;
    width: 100%;
    justify-content: center;
}
.slide__button {
	display: inline-block;
}


.superblockslider__navigation {
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);

	width: 100%;
	pointer-events: none;
}

.superblockslider__button, .superblockslider__button__navigation {
	height: 100%;
	background-color: transparent !important;
	border: none;
	cursor: pointer;

	&:focus {
		outline-style: none;
	}
}
.superblockslider__button__title {
	margin: .5rem;
	line-height: 1em;
}
/* navigation arrows */
.superblockslider__button__navigation {
	width: 45px;
	aspect-ratio: 1 / 1;

	opacity: .5;
	transition: all .5s;

	pointer-events: all;
	
	svg {
		transition: all .5s;
		width: 100%;
		height: 100%;
	}
	&:hover {
		opacity: 1;
	}
}

/* slide buttons */
.superblockslider__button {
	padding: 0;
	opacity: .5;
	transition: all .5s;
	min-width: 2.6rem;
	cursor: pointer;

	span {
		transition: all .5s;
		display: flex;
    	justify-content: center;
		word-break: break-word;
	}
	svg {
		transition: all .5s;
		width: 1rem;
		height: 1rem;
	}
	&--active, &:hover {
		opacity: 1;
		svg {
			width: 1.5rem;
			height: 1.5rem;
		}
	}
}
/* slide */
.superblockslider__slide {
	position: relative;
	width: 100%;
	overflow: hidden;

	&.is-vertical-center {
		.superblockslider__slide_inner {
			justify-content: center;
		}
	}
	&.is-not-horizontal-center {
		.superblockslider__slide_inner {
			justify-content: initial;
		}
	}
	&.is-vertical-bottom {
		.superblockslider__slide_inner {
			justify-content: flex-end;
		}
	}
}
/* fade slider */
.superblockslider[data-transition-effect='fade'] .superblockslider__slide {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;

	opacity: 0;

	&.superblockslider__slide--active {
		z-index: 1;
		opacity: 1;
	}
}
.superblockslider__slide__bg, .superblockslider__slide__overlay {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;

	& > img {
		height: 100%;
    	width: 100%;
		-webkit-backface-visibility: hidden;
	}
}
.superblockslider__slide_inner {
	position: absolute;
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;
	
	overflow: hidden;

	box-sizing: border-box;

	padding: 0 45px;
}
.inner-blocks {
	overflow: auto;
	width: 100%;
}

.superblockslider__slide__link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* responsive */
.visible--md,
.visible--lg,
.visible--xl
{
	display: none;
}

.visible--sm,
.visible--md.visible--sm {
	display: block;
}

@media (min-width: 768px) {
	.visible--sm,
	.visible--lg,
	.visible--xl,
	.visible--xl.visible--lg {
		display: none;
	}

	.visible--md,
	.visible--md.visible--lg {
		display: block;
	}

	.superblockslider__buttons {
		bottom: 2.5%;
	}

	.superblockslider__button__navigation {
		width: 60px;
	}
	.superblockslider__slide_inner {
		padding: 0 60px;
	}
}
@media (min-width: 1024px) {
	.visible--sm,
	.visible--md,
	.visible--xl,
	.visible--md.visible--sm
	{
		display: none;
	}

	.visible--lg,
	.visible--lg.visible--md,
	.visible--xl.visible--lg {
		display: block;
	}

	.superblockslider__buttons {
		bottom: 2%;
	}
	.superblockslider__button__navigation {
		width: 60px;
	}
	.superblockslider__slide_inner {
		padding: 0 60px;
	}
}

@media (min-width: 1280px) {
	.visible--sm,
	.visible--md,
	.visible--lg,
	.visible--lg.visible--md
	{
		display: none;
	}
	.visible--xl,
	.visible--xl.visible--lg {
		display: block;
	}

	.superblockslider__buttons {
		bottom: 3%;
	}
}