/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.calc-box {
    background: white;
    position: relative;
    left: -15%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
  text-align: center;
}
.header-box {
    padding: 1.5em;
    background: #3f77e0;
}
.body-box {
    padding: 2em;
}

.calc-container {
    display: flex;
}
.calc-container img{
    width: 45%;
}
.saving-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.saving-box span:nth-child(3){
  padding-left: 2.5em;
}

.calc-box p{
    font-size: .8em ;
    padding: 1em 0.7em 0.7em ;
}
.calc-box h5:first-child {
    text-align: left;
    font-weight: 200;
    color: white;
    padding: 0;
    margin: 0;
}
.calc-box h5:first-child span{
  font-weight: 700;
}

.savings-row {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
.savings {
    background: #dce8f1;
    padding: 0.5em 1.5em;
    font-size: 1.7em;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    justify-content: center;

}
#money, #time {
    width: 170px;
    margin: 0em 0.2em 0em 0.2em;
}
}

.saving-box span:nth-child(2), .saving-box span:nth-child(3){
  width: 45%;
  font-weight: 700;
}

 #range-bar[type="range"] {
	 border-radius: 500px;
	 width: 100%;	
	 transition: box-shadow 0.2s ease-in-out;
}
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
	 #range-bar[type="range"] {
		 overflow: hidden;
		 height: 35px;
		 -webkit-appearance: none;
		 background-color: #ddd;
	}
	 #range-bar[type="range"]::-webkit-slider-runnable-track {
		 height: 35px;
		 -webkit-appearance: none;
		 color: #444;
		 transition: box-shadow 0.2s ease-in-out;
	}
	 #range-bar[type="range"]::-webkit-slider-thumb {
		 width: 35px;
		 -webkit-appearance: none;
		 height: 35px;
		 cursor: ew-resize;
		 background: #fff;
		 box-shadow: -340px 0 0 320px #3F77E0, inset 0 0 0 40px #fff;
		 border-radius: 50%;
		 transition: box-shadow 0.2s ease-in-out;
		 position: relative;
     border: solid 1px #d5d7dc;
	}
	 #range-bar[type="range"]:active::-webkit-slider-thumb {
		 background: #fff;
		 box-shadow: -340px 0 0 320px #1babe2, inset 0 0 0 3px #fff;
	}
}
 #range-bar[type="range"]::-moz-range-progress {
	 background-color: #43e5f7;
}
 #range-bar[type="range"]::-moz-range-track {
	 background-color: #9a905d;
}
 #range-bar[type="range"]::-ms-fill-lower {
	 background-color: #43e5f7;
}
 #range-bar[type="range"]::-ms-fill-upper {
	 background-color: #9a905d;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 1.5em;
}

.slider {
  width: 100%;
  margin: 0;
  padding: 0;
}

.underlay {
    display: flex;
    height: 10px;
    justify-content: space-between;
    left: 0;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1;
    padding: 0 1em;
    height: 6px;
}

.underlay div:nth-child(1),
.underlay div:nth-child(5),
.underlay div:nth-child(9) {
  height: 12px;
}

.breakpoint {
 /* width: Calc(100%/10 */
}

.breakpoint {
  border-left: 1px solid #dadada;
}

.amounts {
    display: flex;
    justify-content: space-between;
    width: 110%;
    left: -5%;
    position: relative;
}

.amounts p, .amounts + p {
    font-weight: 700;
  font-size: 0.7em;
}


.calc-box a.button--primary {
    margin: 1em 0;
}

.hero>div:nth-child(2n) {
    padding-left: 0em;
}
.mobile-screen{
  display: none;
}

@media only screen and (max-width: 1560px) {

}


@media only screen and (max-width: 1245px) {
    #ninthLottie {
    opacity: 0;
}
  .calc-box{
    width: 1500px;
    left: -22%
  }
  .hero>div:nth-child(odd) {
    padding-right: 7em;
}
  .hero h2{
      font-size: 2em;
  }
  .hero h1{
    font-size: 1em;
  }
}

@media only screen and (max-width: 858px) {
  .calc-box{
    left: -13%;
  }
      #ninthLottie {
    display: none;
   } 

}

@media only screen and (max-width: 767px) {

  .hero--right-column.full-bleed{
   display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .calc-container {
    display: flex;
    width: 100%;
  }
    .calc-box{
    left: 0%; 
  }
    .hero>div:nth-child(odd) {
    padding-right: 0em;
  }
  .body-box{
    padding: 2em 4em 2em 4em;
  }
}

@media only screen and (max-width: 720px) {
    .calc-box{
  /*    left: -16%; */
  }

}
@media only screen and (max-width: 663px) {
    .calc-box{
 /*   left: -15%; */
  }
      .body-box{
    padding: 2em;
  }
}
@media only screen and (max-width: 633px) {
    .calc-box{
  /*  left: -13%; */
  }
}

@media only screen and (max-width: 606px) {
    .calc-box{
  /*  left: -4%; */
  }
}

@media only screen and (max-width: 523px) {
  .amounts p:nth-child(2), 
.amounts p:nth-child(4) {
  display: none;
  }
  .hero>div:nth-child(2n){
    padding-top: 2em;
  }
  .mobile-screen{
    display:block;
  }
  .saving-box > span{
    display: none;
  }
  .savings-row{
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  #time, #money {
    width: 170px;
    margin-bottom: 0.2em;
  }
  span.mobile-screen {
    margin-bottom: 0.5em;
  }
  .calc-box{
   /* left: -5%; */
  }
}

@media only screen and (max-width: 390px) {
    .calc-box{
   /* left: -6%; */
  }
}

@media only screen and (max-width: 355px) {
    .calc-box{
  /*  left: -7%; */

  }
}

@media only screen and (max-width: 324px) {
   .calc-box {
  /*  left: -10%; */
  }
}

@media only screen and (max-width: 306px) {
  .calc-box{
  /*  left: -13%; */
  }
}

@media only screen and (max-width: 284px) {
  .calc-box{
  /*  left: -15%; */
  }
}