@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600); body { background: #434d5a; font-family: "Roboto"; } h1 { color: #7e8c9f; padding: 0; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; text-align: center; } p { color: #c7cdd5; text-align: center; margin: 0.5em 1em; font-weight: 300; font-size: 1.3em; } p:nth-of-type(1) { margin-top: 3em; } p:last-child { font-weight: 100; font-size: 1em; } p:last-child a { font-weight: 300; } .stuff { padding: 50px 50px 50px; max-width: 900px; margin: auto; } /* #flat-slider .ui-slider-handle, #flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line, #flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line, #flat-slider .ui-slider-range { background-color: #25daa5 } #flat-slider-vertical-1 .ui-slider-handle, #flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line, #flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line, #flat-slider-vertical-1 .ui-slider-range { background-color: #f27793 } #flat-slider-vertical-2 .ui-slider-handle, #flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line, #flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line, #flat-slider-vertical-2 .ui-slider-range { background-color: #bd77f2 } #flat-slider-vertical-3 .ui-slider-handle, #flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line, #flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line, #flat-slider-vertical-3 .ui-slider-range { background-color: #67c3ec } [id*=flat-slider].ui-slider { background: #e8e2d3; border: none; border-radius: 0 } [id*=flat-slider].ui-slider .ui-slider-handle { width: 20px; height: 20px; border-radius: 50% 50% 0; border-color: transparent; transition: border .4s ease } [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active, [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus, [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover { border-color: #172f38 } [id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line { background: #e8e2d3; transition: all .4s ease } [id*=flat-slider].ui-slider.ui-slider-horizontal { height: 6px } [id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-handle { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); top: -25px; margin-left: -10px } [id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip { top: 10px } [id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line { width: 2px; height: 10px; margin-left: -1px } [id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line { height: 20px } [id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line { height: 12px } [id*=flat-slider].ui-slider.ui-slider-vertical { width: 6px; height: 125px; display: inline-block; margin: 0 15% } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle { -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); left: -25px; margin-bottom: -10px } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip { left: 10px } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line { height: 2px; width: 10px; margin-top: -1px } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line { width: 20px } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line { width: 12px } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip, [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip { visibility: visible; opacity: 1; border: none; background: 0 0; left: 50%; width: 30px; margin-left: -15px; text-align: center; color: #fff; font-weight: 400; top: 10px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before, [id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before { display: none } [id*=flat-slider].ui-slider, [id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line { background: #7e8c9f; } [id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after { border-left-color: #434d5a; } [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover, [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus, [id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active { border-color: white; } .ui-widget-content .ui-slider-handle.ui-state-focus { outline: 0; border-color: #434d5a } *, :after, :before { box-sizing: border-box } */