/*--RESIDENTIAL PLAN CALCULATORS--*/
.residential-plans {padding-top: 20px; width: 100%; min-height:200px;}
.residential-plans .container {width: 100%;}
.residential-plans h2 {font-size: 22px; font-weight: 700; color: #707070;}
.residential-plans h2 img {max-width: 38px; vertical-align: middle; margin-right: 10px;}
.plan-details-content {margin-bottom: 40px;}
.plan-details-content p {text-align: left; margin: 30px 0;}
.plan-detail-features {max-width: 470px; margin: 40px auto 0;}
.plan-details-content .plan-detail-features p {margin: 20px 0;}
.plan-details-feature {font-weight: 700; padding-left: 25px; background: url('../images/check-mark.png') no-repeat left 5px;}
.plan-details-right {margin: 0 auto; max-width: 455px;}
.plan-details-right img {display: block; position: relative; border-radius: 8px; margin: 0 auto;}
.plan-details-prices {display: flex; justify-content: space-around; max-width: 375px; margin: 0 auto;}
.plan-details-prices p {font-size: 14px; text-transform: uppercase; color: #707070; font-weight: 700; text-align: center; line-height: 50%; margin: 0;}
.start-up-fee, .monthly-charge {margin: 0 5px; padding: 5px 0;}
.start-up-fee p:last-of-type, .monthly-charge p:last-of-type {font-size: 45px; font-weight: 700; color: #545456; margin-top: 15px;}
.start-up-fee p sup, .monthly-charge p sup {font-size: 28px;}
.monthly-charge p span {font-size: 18px; font-weight: 400;}
.plan-details-prices .border-div {display: block; position: relative; height: auto; width: 2px; background: #B5B5B5;}
.pricing-disclaimer {font-size: 12px; text-align: left;}
.plan-details-cta {margin-bottom: 45px;}
.mobile-sq-feet {display: none;}
.mobile-sq-feet {text-align: center; font-size: 14px; margin-top: 30px;}
.residential-plans .section-divider {margin: 110px auto 50px;}

.residential-plans h2.Green span, .residential-plans.Green .plan-details-content strong, .residential-plans.Green .interior-content-cta a[href^="tel"]:hover {color: #81BD41;}
.residential-plans.Green .interior-content-cta .button {color: #81BD41; border-color: #81BD41;}
.residential-plans.Green .interior-content-cta .button:hover {color: #fff; background: #81BD41;}

.residential-plans h2.Blue span, .residential-plans.Blue .plan-details-content strong, .residential-plans.Blue .interior-content-cta a[href^="tel"]:hover {color: #005CB9;}
.residential-plans.Blue .interior-content-cta .button {color: #005CB9; border-color: #005CB9;}
.residential-plans.Blue .interior-content-cta .button:hover {color: #fff; background: #005CB9;}

.residential-plans h2.Platinum span {color: #000;}
.residential-plans.Platinum .plan-details-content strong,.residential-plans.Platinum .interior-content-cta a[href^="tel"]:hover {color: #ED8123;}
.residential-plans.Platinum .interior-content-cta .button {color: #ED8123; border-color: #ED8123;}
.residential-plans.Platinum .interior-content-cta .button:hover {color: #fff; background: #ED8123;}

.residential-plans h2.PlatinumPlus span {color: #000;}
.residential-plans.PlatinumPlus .plan-details-content strong,.residential-plans.Platinum .interior-content-cta a[href^="tel"]:hover {color: #ED8123;}
.residential-plans.PlatinumPlus .interior-content-cta .button {color: #ED8123; border-color: #ED8123;}
.residential-plans.PlatinumPlus .interior-content-cta .button:hover {color: #fff; background: #ED8123;}

.plan-calculator {padding-top: 20px; width: 100%; max-width: 800px; margin: 0 auto;}


.rangeslider__fill {background: #B5B5B5 !important;}
.rangeslider, .rangeslider__fill {display: block; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.rangeslider {background: #B5B5B5 !important; position: relative !important; height: 10px !important;}
.rangeslider__handle {transition: background-color .2s; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #fff; touch-action: pan-y; cursor: pointer; display: inline-block; position: absolute; z-index: 50; top: -6px;}
.rangeslider__labels {position: absolute; width: 100%; z-index: 2; display: flex; justify-content: space-between;}
.rangeslider__labels__label {font-size: 16px; position: relative; padding-top: 50px; color: #3f3f3f; text-align: center; cursor: pointer;}
.rangeslider__labels__label:before {position: absolute; top: -10px; left: 50%; transform: translateX(-50%); content: ""; width: 30px; height: 30px; border-radius: 50%; background-color: #B5B5B5; cursor: pointer;}
.rangeslider__labels .rangeslider__labels__label:first-of-type:before {left: 0; transform: none;}
.rangeslider__labels .rangeslider__labels__label:last-of-type:before {left: unset; right: 0; transform: none;}
.rangeslider__labels__label:first-of-type {left: -4px;}
.rangeslider__labels__label:nth-of-type(2) {left: 3px;}
.rangeslider__labels__label:nth-of-type(3) {left: -3px;}
.rangeslider__labels__label:last-of-type {left: 4px;}
.rangeslider__labels__label span {display: none;}

.residential-plans.Green .rangeslider__handle {background: #81BD41;}

.residential-plans.Blue .rangeslider__handle {background: #005CB9;}

.residential-plans.Platinum .rangeslider__handle {background: #ED8123;}

.residential-plans.PlatinumPlus .rangeslider__handle {background: #ED8123;}


@media screen and (min-width: 768px) {
    /*--RESIDENTIAL PLAN CALCULATORS--*/
    .residential-plans .container {max-width: 812px;}
    .residential-plans h2 {font-size: 32px;}
    .residential-plans h2 img {max-width: 50px;}
    .plan-details-content p {margin: 40px 0;}
    .pricing-disclaimer {font-size: 14px;}
    .mobile-sq-feet {display: none;}
    .rangeslider__labels__label span {display: inline-block;}
    .plan-details-cta {margin: 150px 0 75px;}

    .rangeslider__labels__label:first-of-type {left: -41px;}
    .rangeslider__labels__label:nth-of-type(2) {left: -14px;}
    .rangeslider__labels__label:nth-of-type(3) {left: 14px;}
    .rangeslider__labels__label:last-of-type {left: 41px;}
    .rangeslider__labels .rangeslider__labels__label:first-of-type::before {left: 50%; transform: translateX(-50%);}
    .rangeslider__labels .rangeslider__labels__label:last-of-type::before {left: 50%; transform: translateX(-50%); right: unset;}
} 

@media screen and (max-width: 768px) {
    .mobile-sq-feet {display: inline-block;}
}