/* The styles given to the associated form element in order to hide it */
.fd-form-element-hidden
        {
        display:none;
        }
/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider
        {
        width:100%;
        /* The height of the slider handle */
        height:20px;
        margin:0;
        }
/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider-vertical
        {
        /* The width of the slider handle */
        width:20px;
        /* Fill the available space */
        height:100%;
        /* Set a 10 pixel right and bottom margin */
        margin:0 10px 10px 0;
        /* You may wish to float the vertical sliders left or display:inline-block */
        /* float:left; */
        }
/* Shared rules - both horizontal & vertical sliders */
.fd-slider,
.fd-slider-vertical
        {
        /* display:block required as the wrapper element is a span */
        display:block;
        /* This lets us absolutely position the drag handle */
        position:relative;
        text-decoration:none;
        border:0 none;
        -moz-user-select:none;
        -khtml-user-select:none;
		  margin-top:1em;
        -webkit-touch-callout:none;
        user-select:none;
        }
.fd-slider-inner
        {
        /* Used by IE for the onfocus blur effect */
        display:none;
        }

/* The inner track bar */
.fd-slider-bar
        {
        position:absolute;
        display:block;
        z-index:2;
        height:5px;
        width:100%;
        margin:0;
        padding:0;
        overflow:hidden;
        line-height:4px;
        top:9px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #fff;
        }
/* The animated range bar */
.fd-slider-range
        {
        position:absolute;
        display:block;
        z-index:3;
        height:5px;
        margin:0;
        padding:0 2px 0 0;
        overflow:hidden;
        top:9px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color:#000000;
        box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #14171B;
  -webkit-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #14171B;
  -moz-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #14171B;
  -o-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #14171B;
  border-radius:4px;
        }
/* The drag handle */
.fd-slider-handle {
    position: absolute;
    display: block;
    padding: 0;
    border: 0 none;
    margin: 0 0 0 1px;
    z-index: 3;
    top: 4px;
    left: 0;
    width: 15px;
    height: 15px;
    line-height: 1px !important;
    outline: 0 none;
    background:#000000;
    border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -moz-user-focus: none;
    -moz-outline: 0 none;
    user-select: none;
    cursor: pointer;
}
/* Focus styles */
.fd-slider-handle:focus
        {
        outline:0 none;
        border:0 none;
        -moz-user-focus:normal;
        }
button.fd-slider-handle:focus::-moz-focus-inner
        {
        border-color: transparent;
        }

body.fd-slider-drag-vertical,
body.fd-slider-drag-vertical *
        {
        /* Stop text selection */
        -moz-user-select:none;
        -webkit-user-select:none;
        user-select:none;
        }
body.fd-slider-drag-horizontal,
body.fd-slider-drag-horizontal *
        {
        /* Stop text selection */
        -moz-user-select:none;
        -webkit-user-select:none;
        user-select:none;
        }
		
@media screen and (max-width: 1024px) {
	.fd-slider, .fd-slider-vertical {
		margin-top: 1em;
	}
}
@media screen and (max-width: 800px) {
.fd-slider, .fd-slider-vertical {
    margin-top: 0.5em;
}
}