.wrapper
{
    position: relative;
    width: 80vw;
    height: 51vw;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
    border: 7px solid #fff;
    overflow: hidden;
}
.wrapper .images
{
    height: 100%;
    width: 100%;
    display: flex;
}
.wrapper .images .img-1
{
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("images/hohenneuffen_raw.png") no-repeat;
    background-size: 80vw;
}
.wrapper .images .img-2
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background: url("images/hohenneuffen_constructed.png") no-repeat;
    background-size: 80vw;
}

/*Slider element which lays over whole image*/
.wrapper .slider
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 98;
    overflow: hidden;
}
.wrapper .slider input
{
    width: 100%;
    height: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
}

.slider input::-webkit-slider-thumb
{
    /*compensates the top border*/
    top: -7px;
    height: 51vw;
    width: 3px;
    background: none;
    -webkit-appearance: none;
    cursor: col-resize;
}

/*Vertical line separating the images*/
.slider .drag-line
{
    /*compensates the top border*/
    top: -7px;
    width: 3px;
    height: 51vw;
    position: absolute;
    left: 49.85%;
    pointer-events: none;
}

.slider .drag-line::before
{
    position: absolute;
    content: "";
    width: 100%;
    height: 51vw;
    background: #fff;
}
.slider .drag-line::before
{
    top: 0px;
}

/*handle*/
.slider .drag-line span
{
    background-color: rgba(0, 0, 0, .3);
    /*necessary for iOS*/
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    height: 46px;
    width: 46px;
    border: 3px solid #fff;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.slider .drag-line span::before,
.slider .drag-line span::after
{
    position: absolute;
    content: "";
    top: 50%;
    border: 10px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    transform: translate(-50%, -50%) rotate(45deg);
}
/*left arrow on handle*/
.slider .drag-line span::before
{
    left: 40%;
    border-left-color: #fff;
}
/*right arrow on handle*/
.slider .drag-line span::after
{
    left: 60%;
    border-top-color: #fff;
}