#calculator-body h3 {
  text-align: center;
  text-transform: uppercase;
  font-weight: lighter;
  margin: 40px 0;
}

#calculator-body h2 {
  line-height: 1em;
  text-transform: uppercase;
  font-size: 16px;
  color: #748199;
  font-weight: lighter;
  text-align: center;
}

#calculator-body hr {
  background-color: #748199;
  height: 3px;
  margin-bottom: 0;
}

#calculator-body .row {
  padding: 40px 20px;
  border-top: 3px solid #748199;
}

#calculator-body .column {
  padding: 20px;
}

.add {
    -webkit-appearance: none;
    width: 100%;
    height: 30px;
    border-radius: 25px;
    background: #d3d3d3;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border: 1px solid #3d4554;
}

input[type="range"] {
  overflow: hidden;
  width: 93%;
  -webkit-appearance: none;
  background-color: #fff;
}

.add::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3d4554;
    cursor: pointer;
    box-shadow: -400px 0 0 390px #748199;
}

.add::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #3d4554;
    cursor: pointer;
}

.add::-ms-fill-lower {
    background: #748199;
}

.daily, .sub-total {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 15px;
}

.sub-total {
  text-transform: uppercase;
  width: 80%;
}

.sub-total strong {
  text-transform: none;
}

.daily {
  padding-right: 7%;
  width: 15%;
  text-align: right;
}

#total-usage {
  width: 20%;
  background-color: #ebebeb;
  padding: 20px 10px;
  color: #3d4554;
  display: inline-block;
  text-align: center;
  position: relative;
}
.total {
  font-size: 22px;
  padding: 20px;
}


/* ---------------- */
/* ---------------- */
/* ---------------- */
/* ---------------- */
/* ---------------- */
/* Josh starts here */

.slider {
  height: 110px;
}

.progress-bar {
  background: #eee;
  border: 1px solid #3d4554;
  border-radius: 5px;
  height: 600px;
  margin: 0 50px;
  overflow: hidden;
  position: relative;
}

.progress-ticks .label {
  background: white;
  border: 1px solid #ccc;
  bottom: 0;
  font-size: 12px;
  padding: 3px 10px;
  position: absolute;
  right: 0;
}

.progress-ticks .twenty-five {
  bottom: 11%;
}

.progress-ticks .fifty {
  bottom: 22%;
}

.progress-ticks .one-fifty {
  bottom: 63.5%;
}

.progress {
  background: #748199;
  height: 60px;
  position: absolute;
  width: 100%;
}

/* Josh ends here */
/* -------------- */
/* -------------- */
/* -------------- */
/* -------------- */
/* -------------- */

.service-button {
  background: #3d4554;
  border-radius: 25px;
  padding: 15px 30px;
  text-transform: uppercase;
  color: #fff;
  margin: 20px;
}

.service-button:hover {
  color: #3d4554;
  background-color: #fff;
}

.row {
  width: 100%;
}

.two-column .column {
  width: 78%;
  display: inline-block;
}