body, html{
  height:100%;
  margin: 0;
   padding: 0;
}


.wrap{
width: 100%;
height:100%;

}

a {transition:.2s;}

.calcDiv{
  background-color:#ff9000;
height:2px;
width:100%;
margin:10px auto;
clear:both;
}


/* ====== CALC CONTENT ======== */

#monthlyOption{
  /* background-color:#ff9000;E85D1C */
  background-color:#E85D1C;
  transition:.4s;
}

#cashOption{
  float:right;
  transition:.4s;
}

section.calc{
/* background-color:#E85D1C; */

background-color:#b25124;
  height:1025px;
  padding:0px;

}

.calcContain{
  margin:2% auto;

    max-width:900px;
  min-height:500px;
  height:70%;

  /*background-color:white;*/
  border-radius:10px;
  padding:10px 50px;
}

h1.calcHead{
  color:white;
font-family:Markazi text,georgia, serif;
  font-weight:100;
  text-transform:capitalize;
  text-align:center;
  max-width:800px;
  padding:20px;
  margin:0px auto;
  font-size:64px;
  line-height:1em;

}

.paymentMethod, .slider{

  float:left;
  width:50%;
  text-align:center;

}

.paymentMethod{
  width:100%;

  height:250px;
  text-align:center;

}


.paymentTypeContain{
  margin:0 auto;
  width:100%;
  height:220px;
}

.paymentType{
  color:white;
  font-family:source sans pro, arial, sans-serif;
  font-size:24px;
  line-height:1.2em;
  height:200px;

}

.paymentMethod img{
  width:90%;
  height:100%;
  display:none;
}

i.fa{
  font-size:90px;
  margin:0px 0;
    color:white;
}

i.fa-calendar{
  transform:scale(1,.75);

}

i.fa-money{
  font-size:90px;
  margin:0px 0 0px;

}

.total{outline:0px solid; margin-top:30px;}

.total h4{
  margin-top:10px;
   font-size:40px;
   font-family:source sans pro, arial, sans-serif;
}

.total h2, .total h2 span#grandTotal {
   font-size:120px;
}

.total h4, .total h2{
   color:white;
}

.paymentMethod h4{
  margin: 20px 0;
}

span.paymentType{

  display:block;
  float:left;
  margin:5px;
  width:48%;
  height:210px;
}

.slider{
  height:100px;

}

.slideContainer{
  color:white;
  text-align:center;
  font-size:24px;
  padding-top:20px;
  line-height:1.25em;
  font-weight:600;
  height:150px;
  }

span.sliderTitle{

  display:block;
  height:70px;
  }

.total{

  float:left;
  width:100%;
  text-align:center;
  height:100px;

}

.total h4{
  font-family: source sans pro,arial,sans-serif;
  font-weight:300;
  margin-top:50px;
}

.total h2{
  font-family: Markazi text, georgia, serif;
  font-weight:600;
  font-size: 60px;
  margin-top:-45px;
}

span.dollarsign{font-size: 110px;}

#cashOption, #monthlyOption{cursor:pointer; border:0px solid white; border-radius:10px;}
#cashOption:focus, #monthlyOption:focus{cursor:pointer; border:0px solid white; border-radius:10px;}




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

.payment{clear:both;margin-bottom:550px;}
span.paymentType{width:100%;}
h1.calcHead{font-size:48px; padding:15px; line-height:.85em;}
.sliderholder.left{ width:100%; float:none;}
section.calc{ height:100%; min-height:1360px;}
#cashOption {position:relative; left:5px;}
#monthlyOption {position:relative; left:-5px;}

.total h4{position:relative; top:-20px; font-size:36px;}
.total h2, .total h2 span#grandTotal {font-size:80px; position:relative; left:0px; top:-5px; font-size: 100px;}
span.dollarsign{font-size: 100px;margin-right:10px; position:relative; left:0px; top:-5px;}
.sliderTitle{font-size:20px; line-height:1.2em;}
.paymentType{font-size:22px; line-height:1.2em;}
}

@media only screen and (max-width:420px)
{
.total h4{position:relative; top:-20px; font-size:32px;}
.total h2, .total h2 span#grandTotal { position:relative; left:-6px; top:0px; font-size: 80px;}
span.dollarsign{font-size: 80px;margin-right:10px; position:relative; left:0px; top:0px;}
}

@media only screen and (max-width:350px)
{
.total h4{position:relative; top:-20px; font-size:30px;}
.total h2, .total h2 span#grandTotal { position:relative; left:-6px; top:7px; font-size: 68px;}
span.dollarsign{font-size: 68px;margin-right:10px; position:relative; left:0px; top:7px;}
}

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

}

.sliders{
  border-top:2px solid #ff9000;
  border-bottom:2px solid #ff9000;
  padding:10px 0 20px;
  margin-bottom:-50px;
clear:both;
  height:275px;

}

.sliders {
margin-top:0px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    margin:20px 0;
    border-radius:10px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.sliderholder.left{

    width:45%;
    float:left;
}

.sliderholder.right{

    width:45%;
    float:right;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius:50%;
    background: white;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius:50%;
    background: white;
    cursor: pointer;
}

#demo, #demo2, .demo{display: none;}


.steps, .sliderTitle{
    width:100%;
    text-align:center;
    color:white;
    line-height:1.25em;
    margin-bottom:0px;
    font-family:source sans pro, arial, sans-serif;
    color:yellow;
    font-weight:600;
    font-size:22px;
}



.sliderTitle{
    width:100%;
    text-align:center;
    color:white;
    line-height:1.25em;
    margin-bottom:0px;
    font-family:source sans pro, arial, sans-serif;
}



.steps span.sliderTitle{
    text-transform:uppercase;
    font-weight:600;
}


@media only screen and (max-width:620px)
{
.sliderholder.left, .sliderholder.right{

    width:100%;
    float:none;
}

.sliders {
margin-top:-125px;
}
}

.ticksContain{
    width:110%;
    float:right;
    height:20px;
    margin:0 auto;
    position:relative;
    top:0px;
    text-align:right;
}

.tickContain{
    width:16.5%;
    float:left;
    height:20px;
    margin:0 auto;
    position:relative;
    top:0px;
}

.tick{
    width:4px;
    height:12px;
    background-color:white;

    margin:0 0 0 90%;
}

.tick:last-child{
    margin-right:20%;
}

span.years{
    color:white;
    position:relative;
    left:26px;
    display:block;
    padding:10px;
    line-height:1em;
    text-align:center;
    font-size:14px;

}



/* MEDIA QUERIES FOR slider titles*/

@media only screen and (max-width:620px){
 .sliderTitle{
    margin-top:10px;
    margin-bottom:-35px;
}

.sliderholder{
    margin-bottom:70px;
}

@media only screen and (max-width:535px){
 .sliderTitle{
    margin-top:10px;
    margin-bottom:-20px;
}

@media only screen and (max-width:331px){
 .sliderTitle{
    font-size:18.5px;
}

.sliderholder{
    margin-bottom:60px;
outline:0px solid red;}
}

/* MEDIA QUERIES FOR TICK MARKS*/

@media only screen and (max-width:684px){
 .tick{
    margin-right:22.5%;
}
}

@media only screen and (max-width:620px){
 .tick{
    margin-right:23.8%;
}
}

@media only screen and (max-width:539px){
 .tick{
    margin-right:23.4%;
}
}

@media only screen and (max-width:429px){
 .tick{
    margin-right:23%;
}
}

@media only screen and (max-width:363px){
 .tick{
    margin-right:22.5%;
}
}

@media only screen and (max-width:310px){
 .tick{
    margin-right:22.25%;
}
}

@media only screen and (max-width:347px){
span.years{
    left:12px;
padding:10px;
font-size:12.5px;
}
}

/* SLIDER SEPARATION BARS */





@media only screen and (max-width:620px){
.sliders{
  border-top:2px solid #ff9000;
  border-bottom:2px solid #ff9000;
  padding:5px 0 10px;
  margin-bottom:-35px;
  clear:both;
  height:485px;
}
}}}}