.slider-wrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
	margin: 40px 0;
}

.slider-container
{
    position: relative;
    height:480px;
    /*left: 50%;*/
    cursor:grab;
}

.slider-navigator
{
	display:flex;
	height:2px;
	justify-content:center;
	width:90%;
	max-width:640px;
	margin:auto;
	margin-top:80px;
	margin-bottom: 16px;
	cursor:pointer;
	align-items: center;
}
.slider-navigator span {
	margin: 0 16px;
}

.slider-navigator-item
{
	height:100%;
	flex:1;
	background-color:#ddd;
}
.slider-navigator-item.selected
{
	background-color:#bbb;
}

.slider-arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	transform-origin: center; 
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: all 100ms ease;
	background-image: url("/images/svg/StrelicaSiva.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.arrow-left
{
    left: 16px;
}

.arrow-right
{
    right: 16px;
	transform: translateY(-50%) rotate(-180deg);
}

.slider-item {
	position: absolute;
    top: 16px;
    height: calc(100%);
    text-align: center;
    user-select:none;
    display:flex;
    align-items:center;
}
.slider-item.animated
{
    transition: all 200ms ease;
}

.slider-item-image {
	position: relative;
}
.slider-item .slider-item-image::after, .slider-item.active .slider-item-image::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 123%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--color-text), transparent);
    height: 16px;
    width: 50%;
    transition: all 400ms;
}
.slider-item.active .slider-item-image::after {
	opacity: 1;
}

.slider-item img {
	width: 100%;
	display:block;
	transition:all 400ms;
	opacity: 0.5;
}
.slider-item.active img
{
    transform: scale(1.5);
    transform-origin: center center;
	opacity: 1;
}

@media only screen and (max-width: 1800px) {
	.slider-arrow
	{
		top: auto;
		bottom: 32px;
		transform: translateY(0);
	}
	.arrow-left
	{
		left: 7%;
	}

	.arrow-right
	{
		right: 7%;
		transform: translateY(0) rotate(-180deg);
	}
}