.calchead{
  font-size:20px;
  font-weight:bold;
  margin-bottom:20px;
  display: inline-block;
}

.calchead1{
  font-size:21px;
  font-weight:bold;
  display: inline-block;
}
.upgreen{
 color:#009999; 
 font-size:20px;
 margin-top:10px;
 margin-bottom:10px;
 display: inline-block;
    font-weight:bold;
}
.upgreen1{
 font-size:20px;
 margin-top:10px;
 margin-bottom:10px;
  font-weight:bold;
  display: inline-block;
}


#hidevars{
  display:none;
}
.bluesideheading{
  color:white;
  font-size:2rem;
  font-weight:bolder;
  line-height:2rem;
}


#linesz{
  height:2px;
  background:#005F87;
  width:100%;
  margin-top:1rem;
  margin-bottom:2rem;
}


#leftblue{
  width:100%;
  height:auto;
  padding-top:4rem;
  padding-bottom:4rem;
  padding-right:20px;
  position:relative;
  display:block;
  overflow:hidden;
  color:white;
}
.basebut{
  padding:12px;
  margin:14px;
  display:block;
  font-size:1.2rem;
  border-style: solid;
  border-width: 2px;
  cursor:pointer;
  text-align:center;
  background: #009999;
  color:white;
  border-color: #009999;
  text-decoration:none;

}
.basebut:hover{
  background: #009999;
  color:white;
  border-color: #009999;
  text-decoration:none;

}

/* -----CHART ---*/
#chartbox{
  width:110%;
  pointer-events: none;
  margin-left:-2rem;
  margin-right:-2rem;
  max-width:675px;
}
#legenda {
  font-size:16px;
  color:grey;
  text-align:right;
  padding-right:1.5rem;
  padding-left:0.5rem;
  display:inline-block;
  float:right;
}
#legenda1 {
  width:18px;
  height:11px;
  font-size:0.6rem;
  color:#B0B0B0;
  text-align:right;
  padding-right:1rem;
  margin-top:3px;
  display:inline-block;
  background:#50BED7;
  float:right;

}

#legenda2 {
  width:18px;
  height:11px;
  font-size:0.6rem;
  color:#B0B0B0;
  text-align:right;
  padding-right:1rem;
  margin-top:3px;
  display:inline-block;
  background:#AF235F;
  float:right;
}

#legenda3 {
  width:18px;
  height:11px;
  font-size:0.6rem;
  color:#B0B0B0;
  text-align:right;
  padding-right:1rem;
  margin-top:3px;
  display:inline-block;
  background:#009999;
  float:right;
}


/* -----DOLLAR SIGNS ---*/
#niceroishow {
  height:auto;
  width:100%;
  position:relative;
  color:#C3F0F0;
  font-size:4rem;
  text-align: center;
  font-weight:bolder;
}
#nicecostshow {
  height:auto;
  width:100%;
  position:relative;
  color:#C3F0F0;
  font-size:4rem;
  text-align: center;
  font-weight:bolder;  
}

#niceusershow {
  height:auto;
  width:100%;
  position:relative;
  color:#C3F0F0;
  font-size:4rem;
  text-align: center;
  font-weight:bolder;
}

#niceplanshow {
  height:auto;
  width:100%;
  position:relative;
  color:#50BED7;
  font-size:1.4rem;
  text-align: center;
  font-weight:lighter;
  padding-bottom:2rem;
}

#nicemonthlycostshow {
  height:auto;
  width:100%;
  position:relative;
  color:#50BED7;
  font-size:1.4rem;
  text-align: center;
  font-weight:lighter;
  padding-bottom:2rem;
  line-height:1.6rem;
}

#roiwrapper{
  width:100%;
  height: auto;
  padding-left:2%;
  padding-right:1%;
  padding-top:20px;
  padding-bottom:20px;
  
}
/* -----LEVELS ---*/

.levelno {
  font-size:2rem;
  padding-top:0.5rem;
}
#levelwrapper{
  width:100%;
  height:100px;
  background:#ebf0f5;
  position:relative;
  padding-bottom:2rem;
}
#level1{
  height:100px;
  width:25%;
  display:inline-block;
  text-align: center;
  z-index:2;
  position:absolute;
  left:0%;
  padding-top:0.8rem;
  text-decoration:none;
  color:#00374F;
  font-size: 1.1rem;
}

#level2{
  height:100px;
  width:25%;
  display:inline-block;
  text-align: center;
  z-index:2;
  position:absolute;
  left:25%;
  padding-top:0.8rem;
  text-decoration:none;
  color:#00374F;
  font-size: 1.1rem;  
}

#level3{
  height:100px;
  width:25%;
  display:inline-block;
  text-align: center;
  z-index:2;
  position:absolute;
  left:50%;
  padding-top:0.8rem;
  text-decoration:none;
  color:#00374F;
  font-size: 1.1rem;  
}

#level4{
  height:100px;
  width:25%;
  display:inline-block;
  text-align: center;
  z-index:2;
  position:absolute;
  left:75%;
  padding-top:0.8rem;
  text-decoration:none;
  color:#00374F;
  font-size: 1.1rem;
}

#levelhover{
  position:absolute;
  left:0%;
  height:100px;
  width:25%;
  background:#c7f0f0;
  display:inline-block;
  text-align: center;
  z-index:1;
  display:inline-block;
  border-bottom-style: solid;
  border-width: 3px;
  border-color: #009999;
}
#levelhover:after {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  bottom:-12px;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 10px solid #009999;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

#levelexpl1{
  padding-top:2rem;
  padding-bottom:2.5rem;
  padding-right:1rem;
  font-size:16px;
}

#levelexpl2{
  padding-top:2rem;
  padding-bottom:2rem;
  font-size:16px;
}

#levelexpl3{
  padding-top:2rem;
  padding-bottom:2rem;
  font-size:16px;
}

#levelexpl4{
  padding-top:2rem;
  padding-bottom:2rem;
  font-size:16px;
}

/* slider start here */

input[type=range]:focus {
  outline: none;
  border: none;
}

input[type=range] {
  outline: none;
  border: none;
  background:none;
  -webkit-appearance: none;
  border: 1px solid white;
  width: 80%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 0px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-top: -8px;
  border-radius: 50%;
  background: #009999;
  cursor: grab;
  -webkit-appearance: none;
  z-index:20;
  margin-left:2px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  border: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-top: -13px;
  border-radius: 50%;
  background: #009999;
  cursor: grab;
}

input[type=range]:-moz-focusring{
  outline: 0px none;
  outline-offset: -1px;
}

input[type=range]::-moz-focus-outer { 
  border: none; 
}

input[type=range]::-moz-range-progress {
  background-color: #009999;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  background: transparent;
  border-color: transparent;
  border-width: 14px 4px;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-top: -2px;
  border-radius: 50%;
  background: #009999;
  z-index:20;
}

input[type=range]:focus::-ms-fill-lower {
  background: #009999;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ddd;
}

/* Chrome progress bar Hack */
.rs-label {
  text-align:right;
  position: relative;
  width: 527px;
  height: 20px;
  background: none;
  line-height: 80px;
  font-weight: bold;
  box-sizing: border-box;
  border-bottom: 7px solid #009999;
  margin-bottom: -17px;
  margin-left: -533px;
  left: attr(value);
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  -webkit-user-select: none;
  display: none;
  z-index:2;
}
/* container for the slider */
#sliderbox{
  position:relative;
  overflow: hidden;  
  width:100%;
  height:60px;
  padding-top:10px;
  padding-right:0px;
  padding-left:20px;
}
.rs-label:not(*:root) { /* Show only WebKit browsers */
  display: block;
}

#countr{
  position:absolute;
  background:#fafafa;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  margin-left:-22px;
  z-index:20;
  border-bottom: 7px solid #009999;
  padding-bottom:5px;
  text-align:right;
  display:none;
}

#countr:not(*:root) { /* Show only WebKit browsers */
  display: block;
}

/* end of slider */
@media screen and (max-width: 767px) {
    #leftblue {
    padding-left: 2rem;
    padding-right: 2rem; 
    }