input[type=range]       { -webkit-appearance: none; width: 100%; background-color: transparent; }
input[type=range]:focus { outline: none; }

input[type=range]::-webkit-slider-runnable-track       { cursor: pointer; width: 100%; height: 3px; }
input[type=range]::-webkit-slider-runnable-track       { background: #228dcf; box-shadow: 0 0 0 #fff; border: 0 solid #fff; }
input[type=range]::-webkit-slider-thumb                { height: 20px; width: 20px; border-radius: 25px; margin-top: -8.5px; -webkit-appearance: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb                { background: #228dcf; box-shadow: 0 0 2px #fff; border: 0 solid #fff; }
input[type=range]:focus::-webkit-slider-runnable-track { background: #228dcf; }

input[type=range]::-moz-range-track { cursor: pointer; }
input[type=range]::-moz-range-track { background: #228dcf; box-shadow: 0 0 0 #fff; width: 100%; height: 3px; }
input[type=range]::-moz-range-thumb { height: 20px; width: 20px; border-radius: 25px; cursor: pointer; }
input[type=range]::-moz-range-thumb { background: #228dcf; box-shadow: 0 0 2px #fff; border: 0 solid #fff; }

input[type=range]::-ms-track            { cursor: pointer; width: 100%; height: 3px; }
input[type=range]::-ms-track            { background: transparent; border-color: transparent; color: transparent; }
input[type=range]::-ms-thumb            { height: 20px; width: 20px; border-radius: 25px; cursor: pointer; }
input[type=range]::-ms-thumb            { background: #228dcf; box-shadow: 0 0 2px #fff; border: 0 solid #fff; }
input[type=range]::-ms-fill-lower       { background: #228dcf; }
input[type=range]::-ms-fill-upper       { background: #228dcf; }
input[type=range]:focus::-ms-fill-lower { background: #228dcf; }
input[type=range]:focus::-ms-fill-upper { background: #228dcf; }


/* hover effect on landing */

.lp-group5 ul li:hover input[type=range]::-webkit-slider-runnable-track       { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]::-webkit-slider-thumb                { background: #ffd900; border: 0 solid #ffd900; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.lp-group5 ul li:hover input[type=range]:focus::-webkit-slider-runnable-track { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]::-moz-range-track     { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]::-moz-range-thumb     { background: #ffd900; border: 0 solid #ffd900; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.lp-group5 ul li:hover input[type=range]::-ms-thumb            { background: #ffd900; border: 0 solid #ffd900; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.lp-group5 ul li:hover input[type=range]::-ms-fill-lower       { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]::-ms-fill-upper       { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]:focus::-ms-fill-lower { background: #ffd900; }
.lp-group5 ul li:hover input[type=range]:focus::-ms-fill-upper { background: #ffd900; }

/*
input[type=range]       { height: 27px; -webkit-appearance: none; margin: 10px 0; width: 100%; background-color: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track       { width: 100%; height: 3px; cursor: pointer; animate: 0.2s; box-shadow: 0 0 0 #000; background: #FFD900; border-radius: 0; border: 0 solid #000; }
input[type=range]::-webkit-slider-thumb                { box-shadow: 0 0 2px #000; border: 0 solid #000; height: 21px; width: 21px; border-radius: 11px; background: #ffd900; cursor: pointer; -webkit-appearance: none; margin-top: -9px; }
input[type=range]:focus::-webkit-slider-runnable-track { background: #FFD900; }
input[type=range]::-moz-range-track { width: 100%; height: 3px; cursor: pointer; animate: 0.2s; box-shadow: 0 0 0 #000; background: #FFD900; border-radius: 0; border: 0 solid #000; }
input[type=range]::-moz-range-thumb { box-shadow: 0 0 2px #000; border: 0 solid #000; height: 21px; width: 21px; border-radius: 11px; background: #ffd900; cursor: pointer; }
input[type=range]::-ms-track        { width: 100%; height: 3px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; }
input[type=range]::-ms-thumb        { margin-top: 1px; box-shadow: 0 0 2px #000; border: 0 solid #000; height: 21px; width: 21px; border-radius: 11px; background: #ffd900; cursor: pointer; }
input[type=range]::-ms-fill-lower   { background: #FFD900; border: 0 solid #000; border-radius: 0; box-shadow: 0 0 0 #000; }
input[type=range]::-ms-fill-upper   { background: #FFD900; border: 0 solid #000; border-radius: 0; box-shadow: 0 0 0 #000; }
input[type=range]:focus::-ms-fill-lower { background: #FFD900; }
input[type=range]:focus::-ms-fill-upper { background: #FFD900; }
*/