@charset "UTF-8";
/* CSS Document */

//SLIDER
$lighter-blue: #abe0ed
$light-blue: #46b7d5
$blue: #0085b2
$orange: #FD8521
$lightgray: #cccccc

main
  width: 70%
  margin: 8rem auto 0

h1
  font-weight: 800
  font-family: 'Open Sans', sans-serif
  color: $light-blue
.min
  padding-top: 5px
  padding-left: 10px
  color: $lightgray
.max
  padding-top: 5px
  padding-right: 10px
  color: $lightgray
#helper
  //float: left;
  //display: inline-block
  padding-top: 40px
  color: $light-blue
  font-style: italic
output
  display: inline-block
  font-size: fonem

/* original css */
.rangeslider,
.rangeslider__fill
  display: block
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3)
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3)
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3)
  -moz-border-radius: 10px
  -webkit-border-radius: 10px
  border-radius: 10px

.rangeslider
  background: #e6e6e6
  position: relative

.rangeslider--horizontal
  height: 20px
  width: 100%

.rangeslider--vertical
  width: 20px
  min-height: 150px
  max-height: 100%

.rangeslider--disabled
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40)
  opacity: 0.4

.rangeslider__fill
  background: -webkit-linear-gradient(left, $lighter-blue , $light-blue) /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, $lighter-blue, $light-blue) /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, $lighter-blue, $light-blue) /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, $lighter-blue , $light-blue) /* Standard syntax (must be last) */
  position: absolute
.rangeslider--horizontal .rangeslider__fill
  top: 0
  height: 100%
.rangeslider--vertical .rangeslider__fill
  bottom: 0
  width: 100%

.rangeslider__handle
  background: white
  color: $blue
  font-weight: bold
  font-size:18px
  border: 1px solid #ccc
  cursor: pointer
  display: inline-block
  width: 100px
  height: 40px
  line-height: 38px
  text-align: center
  position: absolute
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g')
  background-size: 100%
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)))
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1))
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1))
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1))
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
  -moz-border-radius: 22px
  -webkit-border-radius: 22px
  border-radius: 22px
.rangeslider__handle:after
  font-family: FontAwesome
  content: "\f0da"
  color: $lightgray
.rangeslider__handle:before
  font-family: FontAwesome
  content: "\f0d9"
  color: $lightgray

.rangeslider__handle:active
  background-img: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==")
  background-size: 100%
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)))
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12))
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12))
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12))
.rangeslider--horizontal .rangeslider__handle
  top: -10px
  touch-action: pan-y
  -ms-touch-action: pan-y
.rangeslider--vertical .rangeslider__handle
  left: -10px
  touch-action: pan-x
  -ms-touch-action: pan-x

input[type="range"]:focus + .rangeslider .rangeslider__handle
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9)
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9)
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9)