pre + section > input[type=range] + label,
pre + section > div + label,
#changeLabels,
#doubleHandleLabels {
    display: inline-block;
    vertical-align: top;
    margin-left: 1em;
    color: white;
}
#changeLabels label,
#doubleHandleLabels label {
    cursor: inherit;
}
#changeLabels label:before,
#doubleHandleLabels label:before {
    content: 'onChange:';
    width: 7em;
    display: inline-block;
}
#changeLabels label:last-child:before {
    content: 'onFinalChange:';
}
#doubleHandleLabels label:first-child:before {
    content: 'first handle:';
}
#doubleHandleLabels label:last-child:before {
    content: 'second handle:';
}

.slider img {
    vertical-align: middle;
}

code {
    background-color: #555;
    padding: 0 .5em;
    border-radius: 1em;
}

pre span {
    font-weight: bold;
}

pre mark {
    color: grey;
    background-color: inherit;
    font-style: italic;
    font-weight: normal;
}

#o1 input[type=range] {
    width: 400px;
}

#o3 input[type=range] {
    width: 40px;
    height: 300px;
}

#o1, #o2, #o3, #o4, #o5 {
    margin-top: 1em;
}

aside.opt1 ~ #o1,
aside.opt2 ~ #o2,
aside.opt3 ~ #o3,
aside.opt4 ~ #o4,
aside.opt5 ~ #o5 {
    display: block !important;
}

#custom + .range,
#custom ~ .handle .range {
    background: -moz-linear-gradient(left, red 0%, green 100%);
    background: -webkit-linear-gradient(left, red 0%, green 100%);
    background: linear-gradient(to right, red 0%, green 100%);
}
#custom ~ .handle {
    top: 80% !important;
    height: 200% !important;
}
#custom ~ .handle svg {
    top: 35% !important;
}
#custom ~ .handle .range {
    top: 32% !important;
}
#custom ~ .handle label {
    position: absolute;
    bottom: .3em;
    left: 0;
    right: 0;
    line-height: 1em;
    text-align: center;
    font-family: monospace;
    font-size: .9em;
    letter-spacing: .15em;
    color: white;
    text-shadow: 0.0625em 0.0625em 0.0625em #777,
                 -0.0625em -0.0625em 0.0625em #777,
                 0.0625em -0.0625em 0.0625em #777,
                 -0.0625em 0.0625em 0.0625em #777;
}

.resize {
    width: 50%;
    height: 30vw;
    position: relative;
}

.resize .sliderlens {
    margin: 2% 0;
    vertical-align: top;
}

.resize .sliderlens.horiz {
    width: 100% !important;
    height: 15% !important;
}

.resize .sliderlens.vert {
    width: 3em;
}

.resize .sliderlens.vert.fixed {
    margin-left: 4em;
}

.resize .vert {
    width: 15% !important;
    height: 40% !important;
}

#cssfun1,
#cssfun2,
#cssfun3,
#cssfun4,
#cssfun5 {
    display: inline-block;
    margin: 0 0 5em 4em;
    vertical-align: top;
}

#cssfun1 .slider {
    color: #a9a94d;
    font-family: monospace;
    text-align: center;
    font-size: .8em;
    display: inline-block;
}

#cssfun1 .slider {
    text-shadow: 0.1em 0.1em black;
}

#cssfun1:before,
#cssfun2:before,
#cssfun1 > label,
#cssfun4:before {
    display: block;
    font-size: .8em;
    font-family: monospace;
    color: rgb(186, 186, 186);
}

#cssfun1 > label {
    width: 5em;
    line-height: 1.5em;
}

#cssfun1:before {
    content: 'Speed';
}

#cssfun1 .sliderlens > .handle:before {
    border-bottom-color: #a9a94d;
}

#cssfun2:before {
    content: 'Temperature';
    margin-left: 7em;
}

#cssfun4:before {
    content: 'Your Feedback?';
    margin-bottom: 1em;
}

#cssfun2 .sliderlens > .handle1:before,
#cssfun2 .sliderlens > .handle2:before {
    background: #525252;
}

#cssfun2 .sliderlens > .handle1 svg,
#cssfun2 .sliderlens > .handle1 .range,
#cssfun2 .sliderlens > .handle2 svg,
#cssfun2 .sliderlens > .handle2 .range {
    display: none !important;
}

#cssfun2 .sliderlens > .handle1:after,
#cssfun2 .sliderlens > .handle2:after {
    content: 'min';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: .6em;
    line-height: .6em;
    color: rgb(186, 186, 186);
    text-align: center;
    background: none;
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -ms-transform: translateY(40%);
    -o-transform: translateY(40%);
    transform: translateY(40%);
}

#cssfun2 .sliderlens > .handle2:after {
    content: 'max';
}

#cssfun2 .sliderlens > .handle1 {
    border-radius: 2em 0 0 2em;
}

#cssfun2 .sliderlens > .handle2 {
    border-radius: 0 2em 2em 0;
}

#cssfun2 > label {
    display: inline-block;
    font-family: monospace;
    width: 5em;
    font-size: .8em;
    margin: 0;
}

#cssfun2 > label:first-child {
    text-align: right;
}

#cssfun2 > label:last-child {
    text-align: left;
}

#cssfun2 .sliderlens > .handle1:after,
#cssfun2 > label:first-child {
    color: #7FB3D5;
}

#cssfun2 .sliderlens > .handle2:after,
#cssfun2 > label:last-child {
    color: #D98880;
}

#cssfun1 {
    float: left;
    width: auto;
}

#cssfun3 {
    margin-left: 5.5em;
    margin-top: 1.5em;
}

#cssfun3 .sliderlens > .handle {
    border-radius: .5em;
}

#cssfun3 ul {
    color: #a9a94d;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: .8em;
    text-align: center;
}

#cssfun3 ul li {
    font-family: monospace;
    font-size: .6em;
    display: inline-block;
    padding: .25em;
    width: 5em;
}

#cssfun3 figure {
    display: block;
    height: 140px;
    opacity: 0;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: opacity 100ms, -webkit-transform 100ms;
    -ms-transition: opacity 100ms, -ms-transform 100ms;
    -moz-transition: opacity 100ms, -moz-transform 100ms;
    -o-transition: opacity 100ms, -o-transform 100ms;
    transition: opacity 100ms, transform 100ms;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 2.5em 0 0;
}

#cssfun3 figure.phone0,
#cssfun3 figure.phone1,
#cssfun3 figure.phone2,
#cssfun3 figure.phone3,
#cssfun3 figure.phone4,
#cssfun3 figure.phone5,
#cssfun3 figure.phone6 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

#cssfun3 figure.phone0 {
    background-image: url('phone0.png');
}

#cssfun3 figure.phone1 {
    background-image: url('phone1.png');
}

#cssfun3 figure.phone2 {
    background-image: url('phone2.png');
}

#cssfun3 figure.phone3 {
    background-image: url('phone3.png');
}

#cssfun3 figure.phone4 {
    background-image: url('phone4.png');
}

#cssfun3 figure.phone5 {
    background-image: url('phone5.png');
}

#cssfun3 figure.phone6 {
    background-image: url('phone6.png');
}

#cssfun4 .range,
#cssfun4 .handle:before,
#cssfun4 .handle svg > g {
    display: none !important;
}

#cssfun4 .handle {
    width: 30% !important;
    height: 18% !important;
}

#cssfun4 .handle:after {
    background:
        -moz-radial-gradient(center, ellipse cover, rgba(60, 60, 60, 0.05) 0%, rgba(60, 60, 60, 0.4) 30%, rgba(60, 60, 60, 0.8) 70%),
        -moz-linear-gradient(top, rgba(169, 169, 169, 0.95) 0%, rgba(169, 169, 169, 0.25) 30%, rgba(56, 56, 56, 0.25) 70%, rgba(56, 56, 56, 0.95) 100%);
    background:
        -webkit-radial-gradient(center, ellipse cover, rgba(60, 60, 60, 0.05) 0%, rgba(60, 60, 60, 0.4) 30%, rgba(60, 60, 60, 0.8) 70%),
        -webkit-linear-gradient(top, rgba(169, 169, 169, 0.95) 0%, rgba(169, 169, 169, 0.25) 30%, rgba(56, 56, 56, 0.25) 70%, rgba(56, 56, 56, 0.95) 100%);
    background:
        radial-gradient(ellipse at center, rgba(60, 60, 60, 0.05) 0%, rgba(60, 60, 60, 0.4) 30%, rgba(60, 60, 60, 0.8) 70%),
        linear-gradient(to bottom, rgba(169, 169, 169, 0.95) 0%, rgba(169, 169, 169, 0.25) 30%, rgba(56, 56, 56, 0.25) 70%, rgba(56, 56, 56, 0.95) 100%);
}

#cssfun4 svg > g > text {
    font-size: .8em;
    font-family: monospace;
    letter-spacing: .1em;
}

p.cssfun {
    margin: 0 0 3em 0;
}

#cssfun5 {
    text-align: center;
}

#cssfun5 .sliderlens {
    border: none;
    background-color: inherit;
}

#cssfun5 .slider {
    display: block !important;
    color: #ddd;
}

#cssfun5 .handle .slider {
    color: white;
}

#cssfun5 .sliderlens:before,
#cssfun5 .sliderlens .handle:before {
    display: none;
}

#cssfun5 .sliderlens:after {
    box-shadow: inset 0 6em 4em -3em #454545, inset 0 -6em 4em -3em #454545;
    border: none;
}

#cssfun5 .handle:after {
    background: none;
}

#cssfun5 .handle {
    box-shadow: 0 0 0.3125em -0.03125em #333;
}

 .sliderlens {
     opacity: .8;
     cursor: pointer;
}
 .sliderlens.focus {
     opacity: 1;
}
 .sliderlens .range {
     background-color: #050505;
     border-width: 0.0625em;
     border-style: solid;
     -webkit-border-image: -webkit-linear-gradient(top,#121212,#787878) 1;
     -moz-border-image: -moz-linear-gradient(top,#121212,#787878) 1;
     -o-border-image: -o-linear-gradient(top,#121212,#787878) 1;
     -ms-border-image: -ms-linear-gradient(top,#121212,#787878) 1;
     border-image: linear-gradient(to bottom,#121212,#787878) 1;
}
 .sliderlens .range > div {
     background-color: #313131;
}
 .sliderlens .range.drag > div {
     cursor: ew-resize;
}
 .sliderlens .range.drag.dragging > div {
     cursor: none;
}
 .sliderlens > .handle, .sliderlens > .handle1, .sliderlens > .handle2 {
     border-radius: 3em/.75em;
     cursor: ew-resize;
     background-color: #454545;
     box-shadow: 0 0 0.3125em -0.03125em #000000;
     border: 0 solid #787878;
     border-bottom-color: #121212;
     border-width: 0.0625em 0;
}
 .sliderlens > .handle:before, .sliderlens > .handle:after, .sliderlens > .handle1:before, .sliderlens > .handle1:after, .sliderlens > .handle2:before, .sliderlens > .handle2:after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}
 .sliderlens > .handle.dragging, .sliderlens > .handle1.dragging, .sliderlens > .handle2.dragging {
     box-shadow: 0 0 0.3125em -0.0625em #000000;
}
 .sliderlens > .handle .range, .sliderlens > .handle1 .range, .sliderlens > .handle2 .range {
     -webkit-border-image: -webkit-linear-gradient(top,#121212,#d1d1d1) 1;
     -moz-border-image: -moz-linear-gradient(top,#121212,#d1d1d1) 1;
     -o-border-image: -o-linear-gradient(top,#121212,#d1d1d1) 1;
     -ms-border-image: -ms-linear-gradient(top,#121212,#d1d1d1) 1;
     border-image: linear-gradient(to bottom,#121212,#d1d1d1) 1;
}
 .sliderlens > .handle:before {
     right: 50%;
     bottom: 55%;
     border-right: 0.0625em solid rgba(186,186,186,0.6);
     z-index: 1;
}
 .sliderlens > .handle:after {
     background: -webkit-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -moz-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -o-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -ms-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: linear-gradient(to right,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
}
 .sliderlens > .handle1 {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}
 .sliderlens > .handle1:after {
     background: -webkit-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -moz-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -o-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -ms-linear-gradient(left,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: linear-gradient(to right,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
}
 .sliderlens > .handle2 {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}
 .sliderlens > .handle2:after {
     background: -webkit-linear-gradient(left,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -moz-linear-gradient(left,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -o-linear-gradient(left,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -ms-linear-gradient(left,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: linear-gradient(to right,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
}
 .sliderlens svg > path {
     stroke: red;
}
 .sliderlens svg > g > text {
     fill: rgba(186,186,186,0.6);
     font-size: .5em;
}
 .sliderlens.vert > .handle, .sliderlens.vert > .handle1, .sliderlens.vert > .handle2 {
     cursor: ns-resize;
     border-radius: 3em/.75em;
}
 .sliderlens.vert > .handle .range, .sliderlens.vert > .handle1 .range, .sliderlens.vert > .handle2 .range {
     -webkit-border-image: -webkit-linear-gradient(top,#121212,#787878) 1;
     -moz-border-image: -moz-linear-gradient(top,#121212,#787878) 1;
     -o-border-image: -o-linear-gradient(top,#121212,#787878) 1;
     -ms-border-image: -ms-linear-gradient(top,#121212,#787878) 1;
     border-image: linear-gradient(to bottom,#121212,#787878) 1;
}
 .sliderlens.vert > .handle:before {
     right: 55%;
     bottom: 50%;
     border-right: none;
     border-bottom: 0.0625em solid rgba(186,186,186,0.6);
}
 .sliderlens.vert > .handle:after {
     background: -webkit-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -moz-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -o-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: -ms-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
     background: linear-gradient(to bottom,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 50%,rgba(56,56,56,0.25) 50%,rgba(56,56,56,0.95) 100%);
}
 .sliderlens.vert > .handle1 {
     border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}
 .sliderlens.vert > .handle1:after {
     background: -webkit-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -moz-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -o-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: -ms-linear-gradient(top,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
     background: linear-gradient(to bottom,rgba(69,69,69,0.95) 0%,rgba(120,120,120,0.25) 100%);
}
 .sliderlens.vert > .handle2 {
     border-top: none;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
 .sliderlens.vert > .handle2:after {
     background: -webkit-linear-gradient(top,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -moz-linear-gradient(top,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -o-linear-gradient(top,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: -ms-linear-gradient(top,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
     background: linear-gradient(to bottom,rgba(56,56,56,0.25) 0%,rgba(56,56,56,0.95) 100%);
}
 .sliderlens.fixed {
     border-width: 0.0625em;
     border-style: solid;
     -webkit-border-image: -webkit-linear-gradient(top,#121212,#787878) 1;
     -moz-border-image: -moz-linear-gradient(top,#121212,#787878) 1;
     -o-border-image: -o-linear-gradient(top,#121212,#787878) 1;
     -ms-border-image: -ms-linear-gradient(top,#121212,#787878) 1;
     border-image: linear-gradient(to bottom,#121212,#787878) 1;
     background-color: #383838;
     cursor: ew-resize;
}
 .sliderlens.fixed:before, .sliderlens.fixed:after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border-width: 0 0 0.0625em 0;
     border-style: solid;
     pointer-events: none;
     -webkit-border-image: -webkit-linear-gradient(top,#050505,#5f5f5f) 1;
     -moz-border-image: -moz-linear-gradient(top,#050505,#5f5f5f) 1;
     -o-border-image: -o-linear-gradient(top,#050505,#5f5f5f) 1;
     -ms-border-image: -ms-linear-gradient(top,#050505,#5f5f5f) 1;
     border-image: linear-gradient(to bottom,#050505,#5f5f5f) 1;
}
 .sliderlens.fixed:after {
     border-width: 0 0.0625em;
     box-shadow: inset 1em 0 1.25em -0.5em #000000, inset -1em 0 1.25em -0.5em #000000;
}
 .sliderlens.fixed.vert {
     cursor: ns-resize;
}
 .sliderlens.fixed.vert:before {
     border-width: 0 0.0625em;
}
 .sliderlens.fixed.vert:after {
     border-width: 0 0 0.0625em 0;
     box-shadow: inset 0 1em 1.25em -0.5em #000000, inset 0 -1em 1.25em -0.5em #000000;
}
 .sliderlens.fixed > .handle {
     border-radius: 0;
     border: none;
}
 .sliderlens.vert .range.drag > div {
     cursor: ns-resize;
}
 .sliderlens.dragging {
     cursor: none;
}
 .sliderlens.dragging > .handle, .sliderlens.dragging > .handle1, .sliderlens.dragging > .handle2 {
     cursor: none;
}