/* Newlanding page */

.widthForConatin{ width:650px; margin: 0 auto;}
html, body { position: relative; height: 100%; }
body.hide-header-footer header, .hide-header-footer footer { display: none; }
.swiper-slide { display: flex; height: 100vh; justify-content: center; align-items: center; } 
script + img {  display: none!important;}  
.wrapper-bg-fixed {  position:relative;width: 100%; height: 100%;  padding: 0; margin: 0; background-repeat: no-repeat; background-image: url('/images/banner/darkhouse.jpg'); background-size: cover; background-position: center 25%; }
.container-global { width: 100%; height: 100%; padding: 0; margin: 0; background-repeat: no-repeat; background-size: cover; background-position: top center; } 
.swipe-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } 
.swipe-container { width: 100%; height: 100%; } 
.swipe-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex;transition-property: -webkit-transform; transition-property: transform; 
transition-property: transform, -webkit-transform; box-sizing: content-box; }
.swipe-container-free-mode>.swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; }
.swipe-container-vertical>.swiper-wrapper { flex-direction: column; } 
.swipe-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; text-align: center; font-size: 18px; } 
.intro-slide { background-size: cover; background-repeat: no-repeat; background-position: center 25%; }
.position-vertical-center { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
 .title-heading-top { font-weight: 600; line-height: 1.2; color: #fff; font-size: 40px; } 
.para-intro { text-align: center; margin: 0 auto; width: 100%; color: #fff; } 
.btn-large { cursor: pointer; background-color: #04ade5; color: #ffffff !important; padding: 12px 25px; border: 0px; font-size: 16px;  font-weight: 600; font-family: 'Open Sans', sans-serif;  border-radius: 100px;max-width: 250px; min-width: 100px; margin: 0 auto; text-decoration: none; display: inline-block; text-transform: uppercase; }
.btn-large:hover, .btn-small:hover { background-color: #66ccff; transition: all 0.3s ease 0s; }

/* Start Section 2  Price range slider */
.progress-holder {  width: 100%; text-align: center;} 
.progress-number { font-size: 56px; font-weight: 600; text-align: center; border-top-right-radius: 50%; display: inline-block; width: 75px; height: 75px; line-height: 75px; position: relative; color: #fff; background-color: #3db63d; border: 2px solid #fff; border-bottom-left-radius: 50%; }
/*.progress-number:before, .progress-number:after {  content: ''; display: block;  position: absolute; width: 65px; height: 1px; background-color: #04ade6; top: 16px; }
.progress-number:before { left: 50px; } 
.progress-number:after { right: 50px; }
*/

.clear { clear: both;  }
.rangeslider-holder { max-width: 600px; width:100%; margin: 0 auto; margin-top: 30px; text-align: left; }
.rangeslider-tooltip { font-size: 13px; font-weight: 700; background-color: #ffffff; color: #000; padding: 10px; border-radius: 12%; margin-bottom: 30px; display: block;
padding-right: 0; margin: 20px auto; text-align: center; width: 70px; }
.rangeslider { background: #ffffff; position: relative; }
.rangeslider--horizontal { height: 10px; width: 100%; } 
.rangeslider__fill { background: #04ade5; position: absolute; } 
.rangeslider, .rangeslider__fill { display: block; border-radius: 10px; }
.rangeslider--horizontal .rangeslider__fill { top: 0; height: 100%; }
.rangeslider__handle { background: white; border: 1px solid #04ade5; cursor: pointer; display: inline-block; width: 30px; height: 30px; position: absolute; box-shadow: 0 0 8px rgb(0 0 0 / 30%);  border-radius: 50%; background-color: #04ade5; }
.rangeslider--horizontal .rangeslider__handle { top: -11px; touch-action: pan-y; -ms-touch-action: pan-y; }
.rangeslider__handle:after { content: ""; display: block; width: 18px;height: 18px; margin: auto; position: absolute; Top: 0;  right: 0;bottom: 0;left: 0; border-radius: 50%; }
.rangeslider-tooltip input { background-color: transparent; border: none; width: 50px; }

p[class^='sliderLegendItem'], p[class*=' sliderLegendItem'] { display: block; position: absolute; top: 15px; padding-top: 27px; font-weight: 700; font-size: 24px; color: #fff; }
p[class^='sliderLegendItem']:before, p[class*=' sliderLegendItem']:before { content: "";  display: block;height: 28px; width: 2px; background-color: #fff;  position: absolute; top: -5px; }
.sliderLegendItem--start { left: 0; }
.sliderLegendItem--end { right: 0; }
.sliderLegendItem--end:before { right: 0; }
h2.title-heading{ font-size: 50px; padding: 20px 0; letter-spacing: 1px; font-weight: 600; width: 80%; margin-left: 10%; line-height: 1.3; color: #fff; }

.para-intro { max-width: 650px;  font-size: 25px; margin-bottom: 30px; }
.icon-residential, .icon-commercial { display: inline-block; } 
.rangeslider__handle { width: 45px; height: 45px; }
.rangeslider--horizontal .rangeslider__handle { top: -20px; } 

p[class^='sliderLegendItem'], p[class*=' sliderLegendItem'] {  padding-top: 20px;} 
p.sliderLegendItem--start {  text-indent: -23px;} 
p[class^='sliderLegendItem']:before, p[class*=' sliderLegendItem']:before { height: 20px; }
p.sliderLegendItem--end { right: -25px; text-indent: -33px; }
.sliderLegendItem--end:before { right: 100%; }
.address-map { padding-top: 50px;  padding-bottom: 50px; }
.address-map input { max-width: 550px; }
input.text-field  { max-width: 550px; }
.fineprint { max-width: 600px; margin-left: auto; margin-right: auto;  line-height: inherit; }

/* Range slider */
.sliderLegend { margin: 0 auto; max-width: 600px; width:100%; position: relative; } 
/* End Section 2  Price range slider */

/* Start Section 3 */
.icons-holder { width: 100%; margin: 0 auto;font-size: 19px;  text-align: center; display: flex; justify-content: center; max-width: 500px; }
.icon-residential { display: inline-block; margin-right: 25px; color: #fff; flex-wrap: wrap; flex-direction: column; } 
.icon-commercial { display: block; margin-left: 25px; color: #fff; flex-wrap: wrap; flex-direction: column; } 
.icons-holder label input {  visibility: hidden; position: absolute;} 
.icon-residential img, .icon-commercial img { cursor: pointer; padding-bottom: 12px; max-width: 170px; width:100%; vertical-align: middle; } 
.icon-residential .label-title, .icon-commercial .label-title { display: block; } 
#residential, #commercial { -webkit-filter: brightness(0) invert(0); filter: brightness(0) invert(1); } 
#residential:hover, #commercial:hover { -webkit-filter: none; filter: none; }

/* End Section 2 */
.errortext { margin-top: 0px; display: block; /*color: #721c24;*/ color: #f00; /* background-color: #f8d7da; border-color: #f5c6cb;*/ margin-left: auto; margin-right: auto;
width: max-content; padding-left: 15px; padding-right: 15px; font-size: 14px; } 
/* Start section 3 */
.address-map { margin: 0 auto; width: 80%; flex: 1; background-color: #fff; background-image: url(/images/googlemap1.jpg); background-repeat: no-repeat; background-size: cover;
background-position: center; margin-top: 50px; } 
.map-pin { width: 32px; height: 45px; margin: 0 auto; margin-bottom: 20px; background-image: url(https://solar-california.org/assets/images/180131/icon_commercial_1-0949eb5e.png); background-repeat: no-repeat; background-size: cover; }
.address-map input { border: 2px solid #203447;  width: 100%; height: 55px; line-height: 55px; text-align: center; 
    font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; display: block; margin: 3px auto;  }
.checkValidation { max-width: 100px; } 
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none;  margin: 0;} 
/* Firefox */
input[type=number] { -moz-appearance: textfield; }

/* End section 3 */
/* Start section 4 */
input.text-field { width: 80%; height: 65px; border: 2px solid #cccccc; text-align: center;  font-size: 24px;font-family: 'Open Sans', sans-serif;  font-weight: 600;display: block;
margin: 25px auto; }
/* End section 4 */


/* Start section 6 */
.icon-phone { width: 57px;  height: 57px; margin: 0 auto; background-image: url(../images/phone.png); background-repeat: no-repeat;  background-size: cover; margin-top: 50px;
margin-bottom: 20px; }
/* End section 6 */

/* Start section 7 */
.icon-email { margin: 0 auto; width: 53px;  height: 35px; background-image: url(../images/envalope.png); background-size: cover; background-repeat: no-repeat; margin-bottom: 20px; }
.fineprint {  margin-top: 6%; font-size: 10px; color: #fff; line-height: inherit; }
/* End section 7 */

/* Media screen Min-Width */
@media screen and (max-width: 1500px){
.address-map {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 0px;
}

}

/* Media max-width */

@media screen and (max-width: 1170px){
.title-heading-top { font-size: 32px; }  
.para-intro { font-size: 20px; }
h2.title-heading { font-size: 32px; } 
.address-map {margin-top: 0px;}
h2.title-heading {font-size: 25px;}
.address-map {
    padding-top: 40px;
    padding-bottom: 40px;
}
}

@media screen and (min-width: 768px) and (max-width: 800px)  {
.widthForConatin {
    width: 520px;
}
}

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

.title-heading-top { font-size: 30px; }
.para-intro { font-size: 18px; }
h2.title-heading { font-size: 30px; }
.icon-residential img, .icon-commercial img { max-width: 100px; }
.address-map { width: 100%; padding: 15px; }
}

@media screen and (max-width: 767px){
.address-map {
    margin-top: 15px;
}
h2.title-heading {font-size: 28px;}
.map-pin {width: 25px;height: 37px;margin-bottom: 11px;}
.address-map input{margin: 0px auto;height: 32px;line-height: 32px; font-size: 13px;}
.widthForConatin {width: 100%;}
.top-header ul { display: block !important; }
.title-heading-top { font-size: 26px;  } 
.para-intro {  font-size: 16px; } 
h2.title-heading { font-size: 26px; } 
input.text-field { font-size: 16px; height: 50px; }
.rangeslider-holder { width: 80%; }
.mobilenavigationhide { display: none; }
.top-header ul {  display: flex; }
.top-header ul li a { padding: 0 10px; }
a.sitelogo { max-width: 200px; float: left; }
h2.title-heading {font-size: 20px; margin-bottom: 0px; }
.progress-number { font-size: 30px; width: 50px; height: 50px; line-height: 50px; }
.para-intro { font-size: 14px; margin: 0; line-height: 18px; padding: 0 10px; }
.swipe-slide { padding: 20px 0; }
.wrapper-bg-fixed, .swiper-container, .swiper-wrapper, .swiper-slide { min-height: 500px; max-height: 600px; }

}

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

.wrapper-bg-fixed, .swiper-container, .swiper-wrapper, .swiper-slide, .position-vertical-center {  min-height: 400px; }

}