
.slidecontainer {
  margin-top:30px !important;
  margin-bottom: 20px !important;
  position:relative;
  width:100%;
  height: 100px;
  padding:20px;
}
.calculator .button {
  background:gray;
  cursor:pointer;
  display:block;
  margin:auto;
  padding:15px;
  width:auto
}
.calc-page {
  background:#fff;
  margin:50px auto !important;
  padding:50px !important;
  border-radius:10px;
  width: 90%;
  position: relative;
  left: 0;
  min-width: 340px;
}

.wrapper.dp-calc{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-page h3{
  font-size: 20px !important;
}

.wrapper.dp-calc > h2{
color:white;
  margin:50px !important;
  margin-bottom: 10px !important;
  text-align:center;
  font-size:40px !important;
}

.slider {
  -webkit-appearance:none;
  background:#e4edf7;
  background: linear-gradient(-8deg, rgba(122,163,214,1) 0%, rgba(145,201,101,1) 100%);
  border-radius:50px;
  height:20px;
  outline:none;
  width:100%
}
#one-hund {
  left:calc(50% - 40px);
}
#one-fifty {
  left:calc(75% - 48px);
}
#fifty-thou {
  left:calc(25% - 25px);
}
.slidecontainer p {
  margin-top:30px !important;
  display: block;
  position: relative;
  font-size: 15px !important;

}

.slidecontainer p > *{
  font-size: 15px;
}

.slidecontainer input{
  border: solid 1px #c2c2c2 !important;
  margin:5px !important;
}

.slidecontainer input.slider{
  border:none !important;
}

.slidecontainer input#myFees, .slidecontainer input#myVol{
  margin 0 !important;
}

.map {
  display:flex;
  height:20px;
  justify-content:center;
  position:relative;
  left: 0;
  width:100%;
  margin-bottom: 60px!important;
  height:auto;
}

.slidecontainer ~ div{
  margin-top: 50px !important;
}

.map{
  z-index: 1;
}

.dollars,
.map {
  overflow:visible
}
.dollars {
  position:absolute;
  text-align:center;
  top:55px;
  font-weight: bolder;
  font-size: 15px;
  z-index: 0;
}
#two-hund {
  display:block;
  right:20px;
  width:auto
}
#two-hund:before {
  left:calc(100% - 5px);
}
.dollars:before {
  content:"|";
  left:50%;
  position:absolute;
  top:calc( -100% - 10px);
}
#zero:before {
  left:-0px;
}
#zero {
  left:20px;
  width:auto
}
#myVol,
#zero {
  display:block
}
#myVol {
  width:100%
}
.slider:hover {
  opacity:1
}
.slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  background:#3a5daa;
   border:5px solid #fff;
  border-radius:50%;
  cursor:pointer;
  height:25px;
  width:25px;
    -webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
  -moz-box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
  box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
}
.slider::-moz-range-thumb, .slider::-webkit-slider-thumb {
  background:#3a5daa;
  border:5px solid #fff;
  border-radius:50%;
  -webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
  -moz-box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
  box-shadow:1px 1px 5px 0 rgba(0,0,0,.35);
  cursor:pointer;
  height:25px;
  width:25px
}
.calculator {
  background:#fff;
  display:flex;
  flex-wrap:wrap;
  width:100%;
  padding:50px;
}

.calc-page .savings-results p span{
color:#a33a96 !important;
}

.calc-page p{
  font-size: 15px !important;
}

.wrapper .savings-results p{
font-size: 18px !important;
  font-weight:bold !important;
}

.wrapper .savings-results p i{
  font-weight: normal !important;
  font-size: 14px !important;
}

@media(max-width:685px){
  #one-fifty {
 display: none;
}
  #fifty-thou{
    display: none;
  }
  
  .calc-page{
    max-width: 100%;
  }
  

}

@media(max-width:480px){
  #one-hund{
    display: none;
  }
  
  .dp-calc.wrapper{
    width: 100% !important;
    margin:0 !important;
    left: 0;
    position: relative;
    max-width: unset !important;
  }
}
