.sliderWrapper {
    position: relative;
    z-index: 4;
}

.sliderItem {
    opacity:0;
    position: absolute;
    top: 0;
    transition: transform 0.5s ease;
    transform: scale(.7) translateX(200%);
}

.sliderItem.active {
    display: block;
    position: relative;
    z-index: 4;
    transform: translateX(0);
    opacity:1;
}

.sliderItem.wasActive {
    transform: translateX(-120%);
    opacity:1;
    z-index: 4;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.sliderItem.snd {
    display: block;
    opacity:1;
    z-index:5;
    transform: scale(.9) translateX(80%);
}

.sliderControls {
    position: absolute;
    display: inline-block;
    bottom: 45px;
    right: 70px;
    z-index: 10;
}

.sliderControls .leftArrow {
    vertical-align: top;
    display: inline-block;
    position: relative;
    z-index: 3;
}

.sliderControls .rightArrow {
    vertical-align: bottom;
    display: inline-block;
    position: relative;
    z-index: 3;
}

.sliderControls .leftArrow svg, .sliderControls .rightArrow svg {
    fill: #bcbcbc;
}

.noTouch .sliderControls .leftArrow:hover svg, .noTouch .sliderControls .rightArrow:hover svg {
    fill: #ffffff;
    cursor: pointer;
}

.sliderControls .separator {
    width: 48px;
    height: 47px;
    background-image: url("../images/ui/separator.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: -18px;
    margin-right: -18px;
}

.sliderControls.relativeControls {
    position: relative;
    bottom: unset;
    right: unset;
}

.slideNumber {
    font-size: 25px;
    font-weight: 300;
    color: #bcbcbc;
    text-align: right;
    margin-bottom: 5px;
}

.noTouch .sliderControls.blackHover .leftArrow:hover svg, .noTouch .sliderControls.blackHover .rightArrow:hover svg {
    fill: #000000;
    cursor: pointer;
}