* {
    margin: 0;
    padding: 0;
}
.content {
    width: 100%;
    height: 100%;
    padding: 0px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.wrapper {
    /*width: 300%;*/
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transition: none;
}
.wrapper li {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0px 50px;
}
.wrapper li img {
    width: 100%;
    height: 100%;
}
.radius {
    height: 12px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}
.radius li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.6;
    margin: 0 3px;
    padding: 0;
    list-style: none;
}
.radius-active {
    opacity: 1 !important;
    border: 2px solid rgb(255, 255, 255, 0.5);
    background-clip: padding-box;
}
.prev {
    width: 51px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    left: 50px;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}
.next {
    width: 51px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    right: 50px;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}
.prev span, .next span {
    /*font-weight: bold;*/
    color: white;
    font-size: 40px;
}
.prev {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAADMCAYAAADeZZvmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDcyNDBERTg3NTFDMTFFN0FGMTdFMDc4MTM2NDFGN0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDcyNDBERTk3NTFDMTFFN0FGMTdFMDc4MTM2NDFGN0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENzI0MERFNjc1MUMxMUU3QUYxN0UwNzgxMzY0MUY3QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENzI0MERFNzc1MUMxMUU3QUYxN0UwNzgxMzY0MUY3QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt/X+BwAAAOmSURBVHja3NzbbuMgEAZgOtoHXKlXyQO2V5X6ds1VW7OSV67rA4Y5/P8gIeWAgS+ObQITP308HrdSymtJkGTKL1O+ZcGULCBZPKYHyeo5NUg2XqMFyc7rlCA5eI8OJCfvU4GkoQwNqGLes4Aq5jkLqGI+s4DmYyYFaHkCoAetz2bUoK1TMy1o7zpDCTq6aNKBzkYAVKCW4QwNSBrLUYDkQll4kFwsDw2Sjm1gQdK5HSRIBraFA8ng9lAgUagDBiRK9UCARLGucJAo1xcKEoO9HQYSo2MxBGSFCQFZYtxB1hhXkAfGDeSFcQF5YsxB3hhTUATGDBSFMQFFYtRB0RhVEAJGDYSCUQEhYYZBaJghECKmG/T08XgU4FQ/7Lcp/20oe5eSKEmWvTLlV8kCQd0zXRBETDcEDTMEQcIMQ1AwKhAEjBokGqMKicSoQ6IwJpAIjBnEG2MK8cSYQ7wwLhAPjBvEGuMKscS4Q6wwIRALTBhEGxMK0cSEQ7QwEBANDAxkFAMFGcHAQXoxkJAeDCzkKgYacgUDD2nFUEBaMDSQMwwV5AhDB9nDUEK2MLSQNYYassTQQ2ZECkjJBKmpRmh8ZYC0DmcoIC0YGsgZhgpyhKGD7GEoIVsYWsgaQw1ZYughMyYFZB4BlCTpliVGs0bPvkgWSOvYjALCjvkBYcb8grBiNiGMmF0IG+YQwoQ5hbBgmiBTepcskCk/SxbIlD8lCwT1mOmCIGK6IWiYIQgSZhiCglGBIGDUINEYVUgkRh0ShTGBRGDMIN4YU4gnxhzihXGBeGDcINYYV4glxh1ihQmBWGDCINqYUIgmJhyihYGAaGBgIKMYKMgIBg7Si4GE9GBgIVcx0JArGHhIK4YC0oKhgZxhqCBHGDrIHoYSsoWhhawx1JAlhh4yY1JArCY0QjE12PTeULb+LeUN+QOYO5YCtOwUPWjdIWrQVmdoQXsdoQQddYIOdNYBKlBL4zSg1oYpQFcahQddbRAa1NMYLKi3IUjQSCNwoNEGoEAalcOAtCqGAGlWGg7SrjAUZLG7w0BWB2MIyPJU6Q6yvpC5gjyGGW4gr0GgC8hziG4O8v4BZQqK+HlrBoqafDABRU4NqYOiJ+5UQQjTqmoglElvFRDSksQwCG3BaAiEuJzXDUJdbO0CIS+dXwYx3N6oOeiC5V5NaW470fyVYwo3OQWxxc4cghgDgXZBrFFNmyDmEK1fIPZ4sx+gDMFz/0F/So70726T3wIMAD4MynQL7bk1AAAAAElFTkSuQmCC) no-repeat;
    background-position: right bottom;
    width: 51px;
    height: 102px;
    position: absolute;
    left: 50px;
    top: 50%;
    margin-top: -51px;
    opacity: 0;
}
.next {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAADMCAYAAADeZZvmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDcyNDBERTg3NTFDMTFFN0FGMTdFMDc4MTM2NDFGN0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDcyNDBERTk3NTFDMTFFN0FGMTdFMDc4MTM2NDFGN0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENzI0MERFNjc1MUMxMUU3QUYxN0UwNzgxMzY0MUY3QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENzI0MERFNzc1MUMxMUU3QUYxN0UwNzgxMzY0MUY3QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt/X+BwAAAOmSURBVHja3NzbbuMgEAZgOtoHXKlXyQO2V5X6ds1VW7OSV67rA4Y5/P8gIeWAgS+ObQITP308HrdSymtJkGTKL1O+ZcGULCBZPKYHyeo5NUg2XqMFyc7rlCA5eI8OJCfvU4GkoQwNqGLes4Aq5jkLqGI+s4DmYyYFaHkCoAetz2bUoK1TMy1o7zpDCTq6aNKBzkYAVKCW4QwNSBrLUYDkQll4kFwsDw2Sjm1gQdK5HSRIBraFA8ng9lAgUagDBiRK9UCARLGucJAo1xcKEoO9HQYSo2MxBGSFCQFZYtxB1hhXkAfGDeSFcQF5YsxB3hhTUATGDBSFMQFFYtRB0RhVEAJGDYSCUQEhYYZBaJghECKmG/T08XgU4FQ/7Lcp/20oe5eSKEmWvTLlV8kCQd0zXRBETDcEDTMEQcIMQ1AwKhAEjBokGqMKicSoQ6IwJpAIjBnEG2MK8cSYQ7wwLhAPjBvEGuMKscS4Q6wwIRALTBhEGxMK0cSEQ7QwEBANDAxkFAMFGcHAQXoxkJAeDCzkKgYacgUDD2nFUEBaMDSQMwwV5AhDB9nDUEK2MLSQNYYassTQQ2ZECkjJBKmpRmh8ZYC0DmcoIC0YGsgZhgpyhKGD7GEoIVsYWsgaQw1ZYughMyYFZB4BlCTpliVGs0bPvkgWSOvYjALCjvkBYcb8grBiNiGMmF0IG+YQwoQ5hbBgmiBTepcskCk/SxbIlD8lCwT1mOmCIGK6IWiYIQgSZhiCglGBIGDUINEYVUgkRh0ShTGBRGDMIN4YU4gnxhzihXGBeGDcINYYV4glxh1ihQmBWGDCINqYUIgmJhyihYGAaGBgIKMYKMgIBg7Si4GE9GBgIVcx0JArGHhIK4YC0oKhgZxhqCBHGDrIHoYSsoWhhawx1JAlhh4yY1JArCY0QjE12PTeULb+LeUN+QOYO5YCtOwUPWjdIWrQVmdoQXsdoQQddYIOdNYBKlBL4zSg1oYpQFcahQddbRAa1NMYLKi3IUjQSCNwoNEGoEAalcOAtCqGAGlWGg7SrjAUZLG7w0BWB2MIyPJU6Q6yvpC5gjyGGW4gr0GgC8hziG4O8v4BZQqK+HlrBoqafDABRU4NqYOiJ+5UQQjTqmoglElvFRDSksQwCG3BaAiEuJzXDUJdbO0CIS+dXwYx3N6oOeiC5V5NaW470fyVYwo3OQWxxc4cghgDgXZBrFFNmyDmEK1fIPZ4sx+gDMFz/0F/So70726T3wIMAD4MynQL7bk1AAAAAElFTkSuQmCC) no-repeat;
    background-position: left top;
    width: 51px;
    height: 102px;
    position: absolute;
    right: 50px;
    top: 50%;
    margin-top: -51px;
    opacity: 0;
}