body {
    margin: 0;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    background: #000;
}

#pan1,
#pan2 {
    box-sizing: border-box;
    position: absolute;
	border-radius:5px;
    z-index: 1;
    top: .25em;
    padding: 0.5em 1em;
    background: #262626;
    color: #aaa;
    text-align: center;
    font: 1em trebuchet ms, verdana, sans serif;
    transition: opacity 0.5s;
    opacity: 0;
}

#pan1 {
    left: .25em;
}

#pan2 {
    right: .25em;
}

#pan1:hover,
#pan2:hover {
    transition: opacity 0.5s;
    opacity: 1;
}

.block {
    display: block;
}


/* -------- Range input -------- */

input[type='range'] {
    display: inline-block;
    margin: .25em auto 0;
    padding: 0;
    width: 10em;
    height: 1.75em;
    background: none;
    font-size: 1em;
    cursor: pointer;
}

input[type='range']
/*input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb*/ {
    -webkit-appearance: none;
}

/*input[type='range']::-webkit-slider-runnable-track {
    width: 10em;
    height: 0.25em;
    background: #aaa;
}*/

input[type='range']::-moz-range-track {
    width: 10em;
    height: 0.25em;
    background: #aaa;
}

/*input[type='range']::-ms-track {
    border: none;
    width: 10em;
    height: 0.25em;
    background: #aaa;
    color: transparent;
}*/

input[type='range']::-moz-range-progress {
    height: 0.25em;
    background: white;
}

/*input[type='range']::-ms-fill-lower {
    background: white;
}*/

/*input[type='range']::-webkit-slider-thumb {
    margin-top: -0.5em;
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: white;
}*/

input[type='range']::-moz-range-thumb {
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: white;
}

/*input[type='range']::-ms-thumb {
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: white;
}*/

/*input[type='range']::-ms-tooltip {
    display: none;
}*/

input[type='range'] + label {
    display: inline-block;
}

input[type='range']:focus {
    outline: none;
}

input[type='range']:focus + label {
    color: white;
}