<!--FILTEREFFECT VOOR DISCO FRAME!!-->


body {
 
 overflow: hidden;
 color: white;
 
}

#resetAll{
 position: absolute;
 top: 550px;
 left: 50px;
 padding: 5px;
 padding-left: 10px;
 padding-right: 10px;
 background-color: #000000;
 border: 1px solid #212121;
 text-transform: uppercase;
 transform: translate(-50%, 0);
 font-family: monospace!important;
 font-size: 8px;
 opacity: 0.3;
 border:0-moz-border-radius: 12px;
 border-radius: 12px;
 cursor: pointer;
 color: #fff;
}
#resetAll:focus,
#resetAll:hover{
 background-color: crimson;
}
.image {
 position: absolute;
 top: -6px;
 left: -100px;
 height: 100%;
 width: 200%;
 overflow: hidden;
}
img {
 position: absolute;
 top: 0%;
 left: -1.2%;
 transform: translate(-0%, -0%);
 width: 100%;
 height: 100%;
}

.singleSlider {
 width: 0vw;
 padding: 9;
 opacity: 0.3;
}
.slider {
 position: relative;
 width: 12vh;
 top: -0.25vh;
 transform-origin: 0 0;
 
}
label {
 position: relative;
 font-family: monospace;
 text-transform: uppercase;
 opacity: 0.5;
}
.val {
 position: relative;
 display: block;
 font-family: monospace;
 height: 21px;
 width: 100%;
 text-align: right;
 visibility: hidden;
 
}
input[type="range"] {
 -webkit-appearance: none;
 background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
}
input[type="range"]:focus {
 outline: none;
}
input[type="range"]::-ms-track {
 cursor: pointer;
 background: transparent;
 border-color: transparent;
 color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
 height: 2px;
 cursor: pointer;
 background: crimson;
 margin-top: 10px;
}
input[type="range"]::-webkit-slider-thumb {
 height: 20px;
 width: 20px;
 border-radius: 10px;
 background: #212121;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -9px;
 
}
 
input[type="range"]::-moz-range-track {
 width: 100%;
 height: 0px;
 cursor: pointer;
 background: #fff;
 opacity: 0.1;
}
input[type="range"]::-moz-range-thumb {
 height: 10px;
 width: 20px;
 border-radius: 20px;
 background: #212121;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -9px;
 
}
input[type="range"]::-ms-track {
 width: 100%;
 height: 2px;
 cursor: pointer;
 background: #fff;
 
}
input[type="range"]::-ms-thumb {
 height: 20px;
 width: 20px;
 border-radius: 20px;
 background: #212121;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: 0px;
 
}