* {
    margin: 0;
    padding: 0;
}
body {
    position: relative;
}
.imgbox {
    display: grid;
    height: 100%;
}
.center-fit {
    image-rendering: optimizequality;
    max-width: 99%;
    max-height: 99vh;
    margin: auto;
}

.arrowpane {
    display:block;
    position:absolute;            
    width:10%;
    height:100%;
    top:0px;
    cursor:pointer;
    background-color:#000;
    opacity:0;
 }

.arrowpane:hover {
    opacity:0.2;
}

.arrowbox {
    display:block;
    position:absolute;            
    width:100%;
    height:100%;
    top:50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor:pointer;
}
.arrowbox .line {
    fill:none;
    stroke:#ccc;
    stroke-width:360;
    stroke-miterlimit:10;