html{
            font-family: sans-serif;
        }
        
    #calculator{
        display: block;
        width: 720px;
        margin: 0 auto;
    }
        
    @media (max-width:767px){
        #calculator{
            width: 100%;
        }
    }

/* HubSpot Template Hero */

.header-container .header-text-wrap h1 {
     font-size: 60px;
    line-height: 64px;
    margin-bottom: 20px !important;

}

@media(max-width:767px){
    .header-container .header-text-wrap h1 {
        font-size:28px;   
        line-height: 32px;
    }
}

@media(min-width:768px) and (max-width:1000px){
    .header-container .header-text-wrap h1 {
        font-size:38px;
        line-height: 42px;
    }
}


.header-container .header-text-wrap h2 {
    font-size: 18px;
}
        
    #calculator h2{
        text-align: center;
    }
        
    /* Next Back Contorls */    
    .controls{
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        margin-top: 85px;
        
    }

    /* Reset Calculator Container */
    #hubspot-form--container .controls{
        margin-top: 0;
    }
    
    .controls span{
        border: 1px solid #e5e5e5;           
        display: inline-block;
        padding: 6px;   
        padding: 13px 20px;
        font-size: 14px;
        margin: 0 25px;
        background-color: transparent;
        background-repeat: no-repeat;
        transition: color .2s ease-out,
                    background-color .2s ease-out;
    }

    .controls span:hover{
        background-color: #089bbf;
        color: #fff;
        cursor: pointer;   
    }

    .controls span.roi_next{
        background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/arrow--next.png);
        padding-right: 60px;
        background-position: right 2px;
        background-repeat: no-repeat;
    }

    .controls span.roi_next:hover{
         background-position: right -47px;
    }

.controls span.roi_prev,
.controls span.roi_em_prev{
        background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/arrow--prev.png);
        padding-left: 60px;
        background-position: left 2px;
        background-repeat: no-repeat;
    }

    .controls span.roi_prev:hover,
.controls span.roi_em_prev:hover{
         background-position: left -47px;
    }

    /* Reset Calculator Button */
    #hubspot-form--container .controls span{
        margin-top: 0;
    }

@media(max-width:480px){
       .controls span{
            margin-bottom: 30px;   
       }
}
        
   
    /* Error Styles */    
    label.error-output{
            background-image: url("//www.rfcode.com/hubfs/images/savings-calculator/error.png");
            background-position: 4% center;
            background-repeat: no-repeat;
            border: 1px solid red;
            color: red;
            display: block;
            padding: 14px 14px 14px 9%;
            width: 83.75%;
    }
        
     /* Mobile Error Styles */
    @media (max-width:750px){
        label.error-output{
            width: 84%;
            margin-right: 5%;
            margin-left: 0;
            padding: 3% 3% 3% 10%;
        }
    }
        
    /* Education Content Styles */

   .calculator-education-row{
        color: #fff;
       background: #666666;
       padding: 14px 8px 14px 14px;
       margin-top: 10px;
       overflow: auto;
       display: none;
       /*width: 92.6%;*/
        width: 91.6%;
       border: 1px solid #666;
   }
        
    /* Mobile Error Styles */
    @media (max-width:750px){
        .calculator-education-row{
            width: 91%;
            margin-right: 5%;
            margin-left: 0;
            padding: 3%;
        }
    }
        
    .education-info{
        display: inline-block;
        float: left;
        width: 95%;
    }
        
    .education-close{
        float: right;
        display: inline-block;
        width: 5%;
        background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/close.png);
        background-repeat: no-repeat;
        height: 16px;
        background-position: right;
    }
        

    .education-close:hover{
        cursor: pointer;
    }
        
              
    /* Question Styles */
     .calculator-question{
        margin-top: 40px;   
        display: block;
    }
    
    /* Label Styles */
    .calculator-question label{
        font-size: 14px;
        line-height: 24px;
    }
        
        
    .calculator-error-row{
        margin-top: 10px;   
    }
        
    .calculator-question-row{
        display: table-row;
        
    }
        
    .calculator-label{
        display: table-cell;
        width: 359px;
        padding-right: 6%;
        vertical-align: middle;
    }
        
        
    .calculator-input{
        display: table-cell;
        width: 47%;
        vertical-align: middle
    }
        
    
    /* Input Styles */    
    .calculator-input input{
        width: 90%;
        font-size: 14px;
        padding: 8px 10px;
        border: 1px solid #e5e5e5;
        color: #555555;
        border-radius: 4px;
        
    }
    
        /* Trigger Wrapper */
    .calculator-more-info{
         display: table-cell;
        width: 3%;
        vertical-align: middle;
        text-align: center;
    }
    
    .more-info--trigger{
        background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/more-info.png);
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        display: block;
    }

    .more-info--trigger:hover{
        cursor: pointer;
    }
     
    /* Mobile Question Styles */
    @media (max-width:750px){
        .calculator-question-row,
        .calculator-label,
        .calculator-input,
        .calculator-more-info
        {
            width: 100%;
            display: inline-block;
            padding-right: 0;
            margin-top: 12px;
        }
        
        .calculator-input{
            width: 90%;
            display: inline-block;
            float: left;
            
        }
        
        .calculator-more-info{
            width: 10%;   
            display: inline-block;
            float: left;
            text-align: center;
            margin-top: 15px;
        }
    }
    
    /* Question Seven Styles */
        
        
    .calculator-question--seven input#q_seven{
        margin-bottom: 12px;   
    }
        
    .calculator-question--seven .calculator-more-info{
        vertical-align: top;
    }
        
    .calculator-question--seven .more-info--trigger{
        padding-top: 6px;
        display: inline-block;
    }
        
    /* Toggle Controls */    
        
    label.toggle-label{
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 6px;
        display: inline-block;
        float: left;
        
    }
    
    label.toggle-label--left{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
        
    label.toggle-label--right{
         border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
        
    /* Hide radio input field */
     #calculator input[type="radio"].toggle {
        display: none;
    }

    #calculator input[type="radio"].toggle:checked + label {
        /* Do something special with the selected state */
        border-color: #cecece;
        background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(217,217,217,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(217,217,217,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(217,217,217,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9d9d9',GradientType=0 ); /* IE6-9 */
    }
        
     /* All Steps */
        
    .calculator-step{
        width: 100%;   
    }

/* Step Zero  - step--path */


    .step--path .controls{
        margin-top: 40px;   
    }

    .step--path span{
        color: #000;
        background-color: transparent;
        transition: color .2s ease-out,
                    background-color .2s ease-out;
        margin-bottom: 30px;
        width: 80%;
        text-align: center;
    }

    .step--path span:hover{
        cursor: pointer;
        color:#fff;
        background-color: #089bbf;
    }
        
    @media(max-width:480px){
        .step--path .controls span.roi_next{
            background-image: none;
            margin: 20px 0;
            padding: 10px;
        }
    }
        
    /* Step Three */
        
        #chart_container{
            width: 100%;
            display: block;
        }

        .highcharts-legend{
            display: none;
            visibility:hidden;
        }


    @media(max-width:480px){
        .highcharts-data-labels{
            display: none;
            visibility: hidden;
        }
        
        .highcharts-legend{
            display: block;
            visibility: visible;
        }
    }
        
    /* Step Four */
        
        .value-output{
            color: blue;
        }

        table.calculation-table{
            width: 100%;   
             border-collapse: collapse;
            
        }

        .calc-citation--row td{
            border-bottom: 1px solid #000;
            padding-bottom: 20px;
        }

        table.calculation-table strong{

        }

         table.calculation-table tr.total-row strong{

        }


    /* Step Six */
    #hubspot-form--container{
        display: none;
    }

/* Report Steps */

.report-image,
.report step h2,
.report-step h3{
    text-align: center;
}

/* Savings Report Page */

.savings-calculator--report .header-container-wrapper{
    background: #fff;
    background-image: none;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: none;
}

.landing-page.savings-calculator--report .controls{
    display: none;
}

.savings-calculator--report h2,
.savings-calculator--report h3{
    text-align: center;
}

/* Calculations Table */

.calc-table--description{
    width: 65%;   
}

 table.calculation-table strong{
    font-weight: 500;
     color:#555;
     font-size: 18px;
 }

.calc-table--operator{
    width:10%;
}

 table.calculation-table .calc-table--operator strong{
    font-size: 30px;
    font-weight: 400;
}

 table.calculation-table tr.total-row td{
     border-top: 1px solid black;
     padding: 20px 0;
     font-size: 24px;
 }

#overview-calculations{}

@media (max-width:767px){
 table.calculation-table tr.total-row td,
 table.calculation-table td,
    .calc-table--description,
    .calc-table--operator,
    .calc-table--result{
     width: 100%;
     text-align:center;
     display: block;
 }
    
    
     table.calculation-table tr.total-row td{
         border-top: none;
     }
    
     table.calculation-table tr.total-row td:first-child{
        border-top: 1px solid black;
         padding-bottom: 0;
     }
    
    table.calculation-table .table-spacer-row td{
        display: none;
    }
    
    table.calculation-table .table-spacer-row td:first-child{
        display: block;
    }
    
    table.calculation-table tr.total-row td:nth-child(2){
        display: none;
    }
}

/* HS Template */

.home-clients,
.body-container .home-clients .content-pad
{
    padding-top: 0;
}

.body-container ul, .body-container ol{
    max-width: 100%;   
}

.home-clients h2{
    font-size: 24px;
    line-height: 28px;
}

.web-report .home-clients a{
    display: inline-block;
    text-align: center;
}

.home-clients a img{
    clear: both;
    padding: 20px 20px 0;
    display: block;
}

/* View Case Study Link Text */
.web-report .home-clients a span{
    display: none;
    width: 100%;
}

.pdf-report .home-clients p a{
    display: inline-block;
    text-align: center;
    width: 33%;
}

.pdf-report .home-clients a img{
    display: inline-block;
}

.pdf-report .home-clients a span{
    display: inline-block;
    width: 100%;
}


#hubspot-form--container h2{
    text-align: center;
}

#hubspot-form--container .hs-form.stacked label {
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    font-size: 18px;
    font-family: "Raleway",sans-serif;
}

.header-container, .body-container .content-pad, .footer-container
{
    padding: 30px 40px;
}

#hubspot-form--container .hs-form.stacked .actions {
  /*margin-left: -20px;
  padding-left: 20px;*/
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Form Submit */

.interior-page .hs-form .hs_submit .hs-button.primary.large,
.landing-page .hs-form .hs_submit .hs-button.primary.large {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  color: #555;
  cursor: pointer;
  font-family: "Raleway",Arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 0 auto;
  transition: background-color 0.2s linear;
    text-shadow: none;
    background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/arrow--next.png);
        padding: 20px 60px 20px 25px;
        background-position: right 2px;
        background-repeat: no-repeat;
}


.interior-page .hs-form .hs_submit .hs-button.primary.large:hover, 
.landing-page .hs-form .hs_submit .hs-button.primary.large:hover {
    transition: background-color 0.2s linear 0s;
  background-color: #089bbf;
  background-image: url(//www.rfcode.com/hubfs/images/savings-calculator/arrow--next.png);
  border-color: #089bbf;
  color: #fff;
    box-shadow: none;
     background-position: right -47px;
background-repeat: no-repeat;
}

#submit-success{
    display: none;
    text-align: center;
}