/* 
Changelog for custom css
- changelog-01 change the top margin for footer menu to become 8px; firdaus 20200508
- changelog-02 change the margin, set the top margin for each ul in footer menu; firdaus 20200508
- changelog-03 change the css for company title footer
- changelog-04 change the margin bottom for header title (40 px to 16px)
- changelog-05 change the ournewsletter title margin-top footer
- changelog-06 change Subscribe for the latest News from buySolar margin footer
- changelog-07 change commercial page button margin to unset if in mobile ver; Ngiap 20200508
- changelog-08 making the residential align center in home
- changelog-09 making the commercial align center in home
- changelog-10 making the login welcome back center in mobile
- changelog-11 add in new class for make home page word even smaller in mobile
- changelog-12 add in new class for slider button; npapaudzi 20210527  
- changelog-13 remove force capitalize for .h1, h1 ; NIsa 20211221  
- changelog-14 template changes for Joomla 4
*/

a {
    color: #464e73;
}

.sp-scroll-up {
  /*display:none !important;*/
  bottom: 100px !important;
  font-size: 25px;
  background-color: #ffca1c;
  color: #464e73;
  cursor: pointer;
  border-radius: 40px;
  box-shadow: 2px 2px 2px #999;
  transition: 1s;
}

.sp-megamenu-parent>li:before {
content: '[';
position: absolute;
right: 50%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 0;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

body.ltr .sp-megamenu-parent>li.sp-has-child>a:after,
body.ltr .sp-megamenu-parent>li.sp-has-child>span:after {
font-family: "Font Awesome 5 Free";
content: "\f107";
float: right;
margin-left: 7px;
font-weight: 900;
}

.sp-megamenu-parent>li:after {
content: ']';
position: absolute;
left: 50%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 0;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


.sp-megamenu-parent>li:hover:before,
.sp-megamenu-parent>li.active:before {
content: '[';
position: absolute;
right: 85%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 1;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


.sp-megamenu-parent>li:hover:after,
.sp-megamenu-parent>li.active:after {
content: ']';
position: absolute;
left: 85%;
color: #fff;
font-size: 20px;
opacity: 1;
top: 25px;
font-weight: 400;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

.sp-megamenu-parent>li.active>a {}

/*changelog-06*/
#sppb-addon-1588573739975{
  margin: 33px 0px 10px 0px !important;
}

#sp-top-bar {
  display: none;
}

/*changelog-14*/
#sp-header.header-with-modal-menu a:hover,
#sp-header.header-with-modal-menu a:focus, 
#sp-header-topbar a:hover,
#modal-menu .sp-megamenu-parent > li:hover > a,
#modal-menu .sp-megamenu-parent > li:hover > span,
#modal-menu .sp-megamenu-parent > li.active > a,
#modal-menu .sp-megamenu-parent > li.active > span,
#modal-menu .modules-wrapper a:hover,
#modal-menu .modules-wrapper a:focus,
.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #00aeef !important;
}
.sp-profile-wrapper .sp-profile-dropdown {
  padding: 10px 15px !important;
}

@keyframes audioWave {
  25% {
    background: linear-gradient(#00aeef, #00aeef) 0 50%,
      linear-gradient(#00aeef, #00aeef) 0.625em 50%,
      linear-gradient(#00aeef, #00aeef) 1.25em 50%,
      linear-gradient(#00aeef, #00aeef) 1.875em 50%,
      linear-gradient(#00aeef, #00aeef) 2.5em 50%;
  }
  37.5% {
    background: linear-gradient(#00aeef, #00aeef) 0 50%,
      linear-gradient(#00aeef, #00aeef) 0.625em 50%,
      linear-gradient(#00aeef, #00aeef) 1.25em 50%,
      linear-gradient(#00aeef, #00aeef) 1.875em 50%,
      linear-gradient(#00aeef, #00aeef) 2.5em 50%;
  }
  50% {
    background: linear-gradient(#00aeef, #00aeef) 0 50%,
      linear-gradient(#00aeef, #00aeef) 0.625em 50%,
      linear-gradient(#00aeef, #00aeef) 1.25em 50%,
      linear-gradient(#00aeef, #00aeef) 1.875em 50%,
      linear-gradient(#00aeef, #00aeef) 2.5em 50%;
  }
  62.5% {
    background: linear-gradient(#00aeef, #00aeef) 0 50%,
      linear-gradient(#00aeef, #00aeef) 0.625em 50%,
      linear-gradient(#00aeef, #00aeef) 1.25em 50%,
      linear-gradient(#00aeef, #00aeef) 1.875em 50%,
      linear-gradient(#00aeef, #00aeef) 2.5em 50%;
  }
  75% {
    background: linear-gradient(#00aeef, #00aeef) 0 50%,
      linear-gradient(#00aeef, #00aeef) 0.625em 50%,
      linear-gradient(#00aeef, #00aeef) 1.25em 50%,
      linear-gradient(#00aeef, #00aeef) 1.875em 50%,
      linear-gradient(#00aeef, #00aeef) 2.5em 50%;
  }
}
.sp-pre-loader .sp-loader-clock {
  border: 3px solid #00aeef;
}
.sp-pre-loader .sp-loader-clock:after, 
.sp-pre-loader .sp-loader-clock:before, 
.sp-pre-loader .sp-loader-circle:after, 
.sp-pre-loader .sp-loader-bubble-loop, 
.sp-pre-loader .wave-two li {
  background-color: #00aeef;
}

.sp-pre-loader .sp-loader-circle {
  border: 3px solid fade(#00aeef, 70%);
}

.sp-pre-loader .sp-loader-bubble-loop:before,
.sp-pre-loader .sp-loader-bubble-loop:after {
  background-color: rgba(0, 174, 239, 0.5);
}

.sp-pre-loader .circle-two > span,
.sp-pre-loader .circle-two > span:before,
.sp-pre-loader .circle-two > span:after {
  border: 2px solid #00aeef;
}
.sp-pre-loader .sp-loader-audio-wave {
  background: linear-gradient(#00aeef, #00aeef) 0 50%,
    linear-gradient(#00aeef, #00aeef) 0.625em 50%,
    linear-gradient(#00aeef, #00aeef) 1.25em 50%,
    linear-gradient(#00aeef, #00aeef) 1.875em 50%,
    linear-gradient(#00aeef, #00aeef) 2.5em 50%;
 }
.sp-pre-loader .sp-loader-with-logo .line {
  background: #00aeef;
}

@media (max-width: 575px) {
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span {
    line-height: 45px;
  }
  #sp-header {
    height: 45px;
  }
  #sp-header-topbar .container-inner > .row {
    min-height: 45px;
  }
  #modal-menu {
    top: 45px;
  }
}

/*end changelog-14*/

/*changelog-05*/
#sppb-addon-1588573286687{
 margin-top: 33px  !important;
}

/*changelog-03*/
#sppb-addon-1573050273641{
  margin-top: 33px  !important;
}

/*changelog-08*/
#column-wrap-id-1588658552233{
  padding: 0;
  text-align: center
}

/*id for menu on footer - changelog-01*/
#sppb-addon-1573045381972{
  margin-top: 8px !important;
}

/* double incentive button margin */
#column-wrap-id-1588835106761 {
  margin-left: -42px !important;
}

/*changelog-09*/
#column-wrap-id-1588658552234{
  padding: 0;
  text-align: center;
}

.col-getintouch-sticky{
  position: fixed !important;
    top: 47px;
    z-index: 9 !important;
    width: 100%;
}

#column-wrap-id-1588835106761 {
    margin-left: -42px;
}

@font-face {
font-family: gotham-book;
font-display: swap;
src: local('Gotham-Book');
src: url(fonts/Gotham-Book.otf);
}

@font-face {
font-family: gothamrd-bold;
font-display: swap;
src: local('Gothamrd-Bold');
src: url(fonts/GothamRnd-Bold.otf);
}

@font-face {
font-family: gothamrd-medium;
font-display: swap;
src: local('Gothamrd-Medium');
src: url(fonts/GothamRnd-Medium.otf);
}

@font-face {
font-family: opensans-bold;
font-display: swap;
src: local('OpenSans-Bold');
src: url(fonts/OpenSans-Bold.ttf);
}

body {
font-family: gotham-book;
font-size: 13.5px;
color: #464e73;
}

p {
color: #464e73;
line-height: 25px;
}

h1, h2, h3 {
font-family: gothamrd-bold;
}

h4, h5, h6 {
font-family: gothamrd-medium;
}

.h1, h1 {
font-size: 35px;
line-height: 40px;
/* text-transform: capitalize !important; */
}

.h2, h2 {
font-size: 30px;
line-height: 35px;
/* text-transform: capitalize !important; */
}

.h3, h3 {
font-size: 25px;
line-height: 28px;
text-transform: capitalize !important;
}

.h4, h4 {
font-size: 20px;
line-height: 23px;
text-transform: capitalize !important;
}

.h5, h5 {
font-size: 17px;
line-height: 20px;
text-transform: capitalize !important;
}


#mod-ifaq-search-searchword {
font-size: 12px;
padding: 13px 20px;
}

.faqtab-wrapper {
background: #fff;
padding: 20px 10px;
margin: 50px 0;
border-radius: 5px;
}

.faq {
padding: 70px !important;
}

.faq i {
font-size: 70px;
margin-bottom: 20px;
}

.faqbtn-title {
font-family: gothamrd-bold;
font-size: 15px;
}

.faqbtn-wrapper {
text-align: center;
background: #fff;
padding: 50px;
margin: 50px 0;
border-radius: 5px;
}

.faqsearch input {
padding: 15px 35px !important;
}

.ifaq-category-title {
font-size: 18px;
font-family: gothamrd-bold;
}

.ifaq-item-header {
font-family: gothamrd-medium;
font-size: 13px;
line-height: 19px;
text-transform: none !important;
margin-bottom: 15px;
}

.ifaq-tpl-basic .ifaq-container-open {
background-color: transparent;
background-image: 0 0;
background-position: 0 0 0 100%;
background-repeat: no-repeat;
background-size: 100% 10px;
color: #464e73;
}

.ifaq-tpl-basic .blog {
padding-bottom: 20px;
border-bottom: 1px solid #d2d2d2;
}

.ifaq-panel {
display: block;
padding: 5px 0 30px;
font-style: italic;
}

.ifaq-panel p.readmore {
margin-bottom: 0;
}

.ifaq-faqtitle {
margin-bottom: 20px;
border-bottom: 2px solid #d2d2d2;
padding-bottom: 20px;
display: none;
}

.ifaq-panel .btn {
font-size: 13px;
border: 1px solid #d2d2d2;
border-radius: 20px;
margin-top: 10px;
padding: 7px 25px;
font-style: normal;
font-family: gothamrd-medium;
text-transform: capitalize;
}

.ifaq-panel .btn:hover {
background: #464e73;
border: 1px solid #464e73;
color: #ffffff !important;
}

.ifaq-container a:hover, .ifaq-container a:focus, .ifaq-container a:active {
color: #464e73;
}

.hightlight-text {
font-family: gothamrd-medium;
color: #464e73;
}

#btn200 {
min-width: 200px;
text-align: center;
}

.custom-bracket:hover:before{
  right:95% !important;
}

.custom-bracket:hover:after{
  left:95% !important;
}

input{
border-radius: 25px !important;
}

.calcnum-big {
font-family: gothamrd-bold;
display: block;
width: 100%;
font-size: 35px;
line-height: 35px;
padding-bottom: 5px;
border-bottom: 2px solid;
margin: 5px 0 10px;
}

.calcnum-big small {
font-size: 50%;
}

.calcnum-mini {
font-family: gothamrd-medium;
font-size: 13px;
}

.calcu-ico tr td:first-child {
width: 35%;
}

.calcu-ico tr td img {
width: 100%;
}

.calcu-ico tr td {
padding: 3px;
}

.calcu-ico {
width: 85%;
float: left;
}


.equal {
display: inline-block;
float: left;
width: 15%;
text-align: right;
font-size: 30px;
line-height: 120px;
}

.equal i {
margin-right: -10px;
}

.estimated-calculation {
margin-bottom: 50px;
}

.estimated-calculation-wrap {
padding: 0 0 30px 0;
border: 1px solid #d2d2d2;
border-radius: 30px;
}

.estimated-calculation-wrap .row {
padding: 30px 20px 0 20px;
}

.estimated-calculation-heading {
background: #FFCA1C;
padding: 20px;
text-align: center;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

.estimated-calculation-heading h2 {
line-height: 30px;
margin-bottom: 0;
}

.category-desc img {
float: left;
width: 50px;
height: auto;
}

.category-desc h2 {
margin-bottom: 20px;
border-bottom: 2px solid #d2d2d2;
padding-bottom: 15px;
line-height: 50px;
padding-left: 65px;
}

.white-small {
font-family: gotham-book;
font-size: 25px;
}

.white-mobile-small {
font-family: gotham-book;
font-size: 22px;
}


.white-small2 {
font-family: gotham-book;
font-size: 18px;
}


.equal-ico  {
font-family: gothamrd-medium;
font-size: 45px;
color: #fff;
font-weight: 600;
}

.num-btmtext p {
font-family: gothamrd-medium;
color: #fff;
line-height: 16px;
}

.num-equal {
text-align: center;
padding: 30px 0px;
}

.blue-small {
font-family: gotham-book;
font-size: 25px;
color: #464e73;
}

.yellow-small {
font-family: gotham-book;
font-size: 25px;
color: #fab200;
}

#column-wrap-id-1568172655746, #column-wrap-id-1568172655749, #column-wrap-id-1569220536363 {
width: 4% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
}

#column-wrap-id-1568172655740, #column-wrap-id-1568172655747, #column-wrap-id-1569220536361, #column-wrap-id-1569220536364 {
width: 9% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
}

#column-wrap-id-1568172655745, #column-wrap-id-1568172655748, #column-wrap-id-1569220536362, #column-wrap-id-1569220536365 {
width: 13% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
}

.sppb-animated-number-title {
font-size: 14px;
line-height: 20px;
color: #FFCA1C;
}


.number-row .sppb-animated-number {
font-family: gothamrd-bold;
font-size: 60px !important;
line-height: 65px !important;
}


.parthership-heading {
  padding-top: calc(50% - 60px);
}


td.feat-ico {
min-width: 50px;
}

td.feat-text {
padding-left: 10px;
}

td.feat-text h5 {
margin-bottom: 2px;
}

td.why-ico {
width: 65px;
}

td.why-text {
padding-left: 15px;
}

.featmarg50 {
margin-bottom: 50px;
}

.whyus table td {
padding-bottom: 10px;
}

.cta-row p {
margin-bottom: 0;
}

.cta-row {
background: rgba(100,170,214,1);
background: -moz-linear-gradient(top, rgba(100,170,214,1) 0%, rgba(93,151,205,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(100,170,214,1)), color-stop(100%, rgba(93,151,205,1)));
background: -webkit-linear-gradient(top, rgba(100,170,214,1) 0%, rgba(93,151,205,1) 100%);
background: -o-linear-gradient(top, rgba(100,170,214,1) 0%, rgba(93,151,205,1) 100%);
background: -ms-linear-gradient(top, rgba(100,170,214,1) 0%, rgba(93,151,205,1) 100%);
background: linear-gradient(to bottom, rgba(100,170,214,1) 0%, rgba(93,151,205,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64aad6', endColorstr='#5d97cd', GradientType=0 );
}

.cta-row h1, .cta-row p {
color: #fff;
}

.article-info {
display: block;
width: 100%;
}

.article-header h2 a{color: #464e73 !important;}
.article-header h2 a:hover {color: #044cd0 !important;}

.solarecsbtn-primary {
display: inline-block;
background: #ffca1c !important;
padding: 10px 25px;
border-radius: 25px;
margin: 10px 2.5px 0px 2.5px;
text-transform: capitalize;
font-family: gothamrd-medium;
font-size: 13px;
line-height: 19px;
text-align: center;
color:#464e73;
min-width: 200px;
border-color: #ffca1c;
text-decoration: none;
}

/*changelog-12*/
.btn-primary, .sppb-btn-primary, .sppb-sp-slider-button .sp-slider-btn-text{
display: inline-block !important;
background: #ffca1c !important;
border: none;
box-shadow: none !important;
padding: 10px 25px;
border-radius: 25px;
text-transform: capitalize;
font-family: gothamrd-medium;
font-size: 13px;
line-height: 19px;
min-width: 200px;
color: #464e73 !important;
margin: 10px 5px 5px 0px;
}

.btn-primary:hover, .sppb-btn-primary:hover, .solarecsbtn-primary:hover, .solarecsbtn-secondary:hover, .btn-yellow:hover {
background: #464e73 !important;
border-color: #464e73 !important;
color: #fff !important;
cursor: pointer;
}

.solarecsbtn-secondary {
display: inline-block !important;
background: #ffffff;
border: 1px solid #464e73;
padding: 9px 25px;
border-radius: 25px;
margin-top: 10px;
text-transform: capitalize;
font-family: gothamrd-medium;
font-size: 13px;
line-height: 19px;
min-width: 200px;
color: #464e73 !important;
}

.solarecsbtn-third {
display: inline-block !important;
background: transparent;
border: 1px solid #ffca1c;
padding: 10px 25px;
border-radius: 25px;
margin-top: 10px;
text-transform: capitalize;
font-family: gothamrd-medium;
font-size: 14px;
line-height: 20px;
color: #ffca1c !important;
width: 100%;
}

.solarecsbtn-third:hover {
display: inline-block !important;
background: #ffca1c;
border: 1px solid #ffca1c;
text-transform: capitalize;
color: #fff !important;
}

.solarecsbtn-4th {
display: inline-block !important;
background: #ffffff;
border: 1px solid #ffca1c;
padding: 7px 15px;
border-radius: 25px;
margin-top: 10px;
text-transform: capitalize;
font-family: gothamrd-medium;
font-size: 12px;
line-height: 15px;
color: #464e73 !important;
}

.solarecsbtn-4th:hover {
background: #ffca1c;
color: #464e73 !important;
}

.tncbox {
display: inline-block;
text-align: left;
}

#tncwrapper {
text-align: center;
}

.login-col {
width: 300px;
text-align: center;
margin: auto;
}

.login-col h1 {
color: #ffffff;
}

#nominwidth {
min-width: auto;
text-transform: capitalize;
}

.sp-organic-life-layout h1.sp-title {
display: none !important;
}

.sp-organic-life-layout h2.sp-posttitle {
margin: 10px 0 30px;
}

.sp-organic-life-layout h2.sp-posttitle, .sp-organic-life-layout .sp-slider-content .sp-introtext {
font-size: 24px;
line-height: 24px;
color: #fff;
text-transform: capitalize;
}

.sp-organic-life-layout .sp-slider-content .sp-introtext {
font-family: gothamrd-bold;
font-size: 35px;
line-height: 38px;
}

.sp-organic-life-layout .sp-slider-item .container .sp-slider-content {
display: table;
/*width: 50%; removed because of the word in slider going down -firdaus*/ 
}

.sp-organic-life-layout .sp-slider-item .container .sp-slider-content .blue {
color: #464e73;
}

.sp-organic-life-layout .sp-slider-item .container .sp-slider-content .yellow {
color: #fab200;
}


#sp-smart-slider.sp-organic-life-layout, .sp-organic-life-layout .sp-slider-item {
min-height: calc(100vh - 80px);
}

.sp-organic-life-layout .controller-prev i:hover, .sp-organic-life-layout .controller-next i:hover {
background: transparent;
}

.sp-organic-life-layout .controller-prev i, .sp-organic-life-layout .controller-next i {
background: transparent;
}


.sp-organic-life-layout .controller-next i {
right: 20px;
}

.sp-organic-life-layout:hover .controller-next i {
right: 20px;
}

.sp-organic-life-layout .controller-prev i {
left: 20px;
}


.sp-organic-life-layout:hover .controller-prev i {
left: 20px;
}

.sp-organic-life-layout .controller-prev i, .sp-organic-life-layout .controller-next i {
font-size: 40px;
color: #ffca1c;
}

.sp-organic-life-layout .controller-prev i:hover, .sp-organic-life-layout .controller-next i:hover {
color: #fab745;
}

.sliderwave {
    position: absolute !important;
    bottom: 0 !important;
}

.ctabtn-col {
text-align: right;
}

.steps-num {
font-family: gothamrd-bold;
font-size: 125px;
position: absolute;
left: -57px;
line-height: 115px;
top: 25px;
color: #464e73;
}


.steps-num#steps-no1 {
left: -25px;
}


.stepwrap {
display: inline-block;
border: 2px solid #ffca1c;
border-radius: 100%;
width: 165px;
position: relative;
height: 165px;
text-align: center;
font-family: gothamrd-medium;
font-size: 18px;
padding: 22px 0;
}

.stepwrap img {
margin: auto;
}

.steps-text {
line-height: 19px;
color: #464e73;
margin-top: 10px;
font-size: 16px;
}

.footer-contactinfo td {
padding-right:10px;
vertical-align: top;
}

.contact-large td {
font-size: 130%;
font-family: opensans-bold;
}


.aligncenter {
text-align: center;
}

.steps-icorow {
padding: 0 10% !important;
}

.estimatesliderinput {
-webkit-appearance: none;
width: 70%;
height: 12px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.estimatesliderinput:hover {
opacity: 1;
}

.estimatesliderinput::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 27px;
background: url('images/pointer.png');
cursor: grab;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}

.estimatesliderinput::-moz-range-thumb {
width: 12px;
height: 27px;
border: 0;
background: url('images/pointer.png');
cursor: grab;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}

.estimateslider {
text-align: center;
margin-top: 20px;
}

#getcost-btn {
margin-top: 30px;
}


.estimatevalue {
color: #464e73;
font-size: 29px;
font-family: gothamrd-medium;
}


.estimatevalue small {
font-size: 14px;
}

.mysolarecs-header, .page-header, .fullarticle-header {
color: #464e73;
position: relative;
text-align: center;
padding-bottom: 0;
}


.mysolarecs-header h1, .page-header h1, .fullarticle-headerh1 {
margin: 0px 0px 50px 0px !important;
}


.mysolarecs-header:before, .page-header:before, .fullarticle-header:before {
content: '';
background: #ffca1c;
display: inline-block;
height: 3px;
width: 140px;
position: absolute;
left: calc(50% - 70px);
bottom: -20px;
}

.fullarticle-header {
margin-bottom: 75px;
}

.mysolarecs-headerleft {
color: #464e73;
position: relative;
}

.mysolarecs-headerleft h2 {
margin-bottom: 40px !important;
text-align: left;
text-transform: capitalize !important; 
}

.mysolarecs-headerleft:before {
content: '';
background: #ffca1c;
display: inline-block;
height: 3px;
width: 70px;
position: absolute;
left: 0;
bottom: -20px;
}


.review-header h1 {
margin-bottom: 0px !important;
}

.review-header {
margin-bottom: 40px;
}


.review-header {
text-align: left;
}


.review-header:before {
left: 0;
bottom: -10px;
}

.customcontact-info {
background: #fff url(images/contactbg-left.jpg);
background-repeat: no-repeat;
background-size: cover;
}

.customcontact-info-wrap {
padding: 10% 50px 50px 12vw;
padding-top: calc(50% - 135px);
}

.customcontact-info .thumbnail {
max-width: 250px;
}

.footer-header {
position: relative;
}

/*changelog-04*/
.footer-header h5 {
margin-bottom: 50px !important;
}

.footer-header:before {
content: '';
background: #ffca1c;
display: inline-block;
height: 3px;
width: 90px;
position: absolute;
left: 0;
bottom: -20px;
}

.company-menu li:before {
content: '';
position: absolute;
border-right: 1.5px solid #ffffff;
border-bottom: 1.5px solid #ffffff;
width: 8px;
height: 8px;
top: calc(50% - 0px);
left: 0px;
transform: translateY(-50%) rotate(-45deg);
}

/* changelog-2*/
#sp-footer ul.menu li {
display: inline-block;
margin: 6px 20px 0px 0px;
width: 40%;
position: relative;
padding-left: 20px;
}

#sp-footer ul.menu li a {
display: block;
color: #fff;
}

.fluid-textleft  {
padding: 50px 15% 50px 25%;
}

.sp-megamenu-parent > li {
display: inline-block;
position: relative;
padding: 10px 5px;
}

.sp-megamenu-parent > li a:hover, .sp-megamenu-parent > li:hover a {
color: #ffffff;
}

/*  
.sp-megamenu-parent > li:before{
content: '[';
position: absolute;
right: 50%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 0;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


.sp-megamenu-parent > li:after {
content: ']';
position: absolute;
left: 50%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 0;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


.sp-megamenu-parent > li:hover:before, .sp-megamenu-parent > li.active:before {
content: '[';
position: absolute;
right: 85%;
color: #fff;
font-size: 20px;
font-weight: 400;
opacity: 1;
top: 25px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


.sp-megamenu-parent > li:hover:after, .sp-megamenu-parent > li.active:after  {
content: ']';
position: absolute;
left: 85%;
color: #fff;
font-size: 20px;
opacity: 1;
top: 25px;
font-weight: 400;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
*/  

.sp-megamenu-parent > li > a {
font-family: opensans-bold;
color: #fff;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 10px !important;
    line-height: 60px;
    font-size: 13px;
    margin: 0;
  }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
color: #878787;
padding: 0;
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 15px 20px;
cursor: pointer;
width: 100%;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
background: #fff;
border-radius: 15px;
padding: 0;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
background: #FFCA1C;
color: #464E73;
font-family: gothamrd-medium;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:first-child > a:hover {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:last-child > a:hover {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: #ffffff;}

.logo-image {
height: 65px !important;
/*width: 100%;*/
}

#sp-header {
	height: 80px !important;
	background: #64abd6;
	padding-top: 10px;
}

#sp-header .logo {
padding: 7px 0;
}

#sp-main-body {
background: #f6f6f6;
padding: 0px !important; 
}

.getestimatedcost {
background: #f6f6f6;
padding: 75px 12vw 50px 50px;
}

.progress-wrap {
margin-bottom: 50px;
display: block;
overflow: auto;
}

.quotation-map {
padding: 0;
}

option:disabled { color: #ccc }

.contact-address {
color: #ffffff;
margin-top: 20px;
}

.contact-address td {
vertical-align: top;
padding: 5px;
}

.showpassword {
line-height: 38px;
margin-left: -30px;
}

.old-quote {
color: #adadad;
font-size: 95%;
font-style: italic;
}

input[type="text"].search-quotation {
padding: 9px 20px;
border-radius: 30px;
margin-top: -5px;
}

.compare-quotation td {
text-align: center;
padding: 13px;
font-family: gothamrd-bold;
border-right: 1px solid #D2D2D2;
vertical-align: top;
font-size: 15px;
}

.compare-quotation tr td:first-child {
text-align: right;
padding: 13px 30px;
}

.compare-quotation tr td:last-child {
border-right: 0px solid #D2D2D2;
}

.compare-quotation tr:first-child td {
border-top: 1px solid #D2D2D2;
border-bottom: 1px solid #D2D2D2;
padding: 30px;
}

.compare-quotation tr:last-child td {
font-size: 125%;
}

.compare-quotation td img {
margin: 15px auto;
}

.compare-quotation {
width: 100%;
}

.dashboard-btnwrap {
margin: 20px -15px;
font-family: gothamrd-bold;
}

.dashboard-btnwrap img {
margin: auto;
}

.dashboard-btn {
display: block;
border: 1px solid #d2d2d2;
text-align: center;
padding: 30px;
border-radius: 15px;
color: #464e73;
background: #fff;
}

.dashboard-btn:hover {
background: #ffca1c;
color: #464e73;
}

#dashboardbg .quotation-mainwrap-header{
color: #ffffff;
}

#dashboardbg {
background: #64ABD6;
}

.suplylist-submit {
text-align: center;
margin-top: 30px;
}

.progressbar li {
display: inline-block;
font-family: gothamrd-medium;
color: #464e73;
}

.progressbar {
float: none;
display: flex;
justify-content: space-between;
padding: 0 10%;
}

span.progress-no {
display: inline-block;
width: 20px;
border-radius: 100%;
height: 20px;
text-align: center;
margin-left: -15px;
}

.progress-checked .progress-no {
color: #464e73;
background: #ffca1c;
font-size: 10px;
line-height: 22px;
}

.progress-current .progress-no {
background: #464e73;
color: #ffca1c;
}

.progress-grey .progress-no {
color: #464e73;
background: transparent;
border: 1px solid #464e73;
}

.progress-grey {
opacity: 0.5;
}

.howsolarwork-text li, .howsolarwork-text h1 {
color: #fff;
}

.howsolarwork-text li {
margin-bottom: 20px;
list-style: none;
}

.howsolarwork-text ol {
margin-top: 30px;
}

.solarworksli {
font-family: gothamrd-medium;
display: inline-block;
background: #ffca1c;
color: #464e73;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
margin-left: -40px;
margin-right: 15px;
}

.noaccount-wrapper {
margin-top: 30px;
text-align: center;
}

.noaccount-wrapper ul {
padding: 0;
}

.noaccount-wrapper li {
display: inline-block;
margin: 0 15px;
font-family: gothamrd-medium;
}

.padtop50 {
padding-top: 50px;
}


.dashboard-wrap #sp-left {
background: #ffffff;
padding-top: 50px;
}

#sp-left .sp-module {
    border: none;
    padding: 0px; 
}

#sp-left .sp-module ul>li>a{
color: #464e73;
}

.article-details .article-info {
font-size: 110%;
margin-bottom: 5px;
display: block;
text-align: center;
overflow: auto;
font-family: gothamrd-medium;
text-transform: uppercase;
}

.sppb-article-info-wrap {
margin-top: 20px;
}

.sppb-article-info-wrap h3, .article-list .article .article-header h1, .article-list .article .article-header h2 {
font-size: 20px;
min-height: 50px;
color: #464e73;
}

.sppb-readmore, div.readmore a {
border-bottom: 2px solid #ffca1c;
padding-bottom: 5px;
color: #464e73;
}
.sppb-readmore:hover{ color: #044cd0;}

span.published {
color: #888888;
}

span.category-name {
margin-right: 10px;
}

.blogitem-info {
display: block;
width: 100%;
overflow: auto;
margin-bottom: 5px;
}

.article-padding {
padding: 50px 0;
}

.subheading {
font-family: gotham-book;
font-size: 24px;
line-height: 30px;
}

.whyus-textcol {
padding: 50px 12vw 50px 50px;
}

.products-list input[type="text"], .products-list select {
border: 1px solid #D2D2D2;
border-radius: 15px;
}

.estimatecostheaderwrap .page-header {
margin-bottom: 45px;
text-align: center;
color: #ffffff;
}

.estimatecostheaderwrap {
text-align: center;
color: #ffffff;
background: #64ABD6;
padding: 50px 0 200px;
}

.estimate-col, .estimate-col-yellow {
text-align: center;
font-size: 16px;
padding: 20px 20px;
min-height: 350px;
}

.estimate-col h1, .estimate-col-yellow h1 {
margin-bottom: 15px;
margin-top: 10px;
}

.estimate-col img, .estimate-col-yellow img {
margin: auto;
}

.estimate-colwrap {
margin-top: -150px;
}

.estimate-col {
border: 1px solid #D2D2D2;
background: #fff;
border-radius:20px;
}

.estimate-col-yellow {
border: 1px solid #FFCA1C;
background: #FFCA1C;
border-radius:20px;
}

.estimate-bottom {
text-align: center;
margin: 50px 0px;
}

.estimate-bottom h1 {
font-size: 50px;
line-height: 55px;
}

.quotation-table {
margin-top: 0px;
width: 100%;
}

.quotation-table .quotation-list:first-child td {
border-top: 0px solid #d2d2d2 !important;
}

.quotation-header th {
font-family: gothamrd-bold;
text-align: left;
color: #464e73;
padding: 5px 5px 15px 5px;
}

.quotation-header th.align-center {
text-align: center;
}

.quotation-list td  {
text-align: left;
padding: 10px 5px;
border-top: 1px solid #d2d2d2;
}

.quotation-list .solarecsbtn-primary {
margin-top: 0;
padding: 7px 25px;
}

.quotation-list td i {
font-size: 13px;
border: 1px solid #464e73;
padding: 3px 8px;
border-radius: 100%;
}

.quotation-list td.align-center {
text-align: center;
}

#subquote td {
padding: 10px 15px;
border-top: 0px solid #d2d2d2;
font-size: 95%;
}

.quotation-search {
text-align: right;
}

.quotation-search input[type="text"] {
width: 200px;
border-radius: 25px;
float: right;
}

.product-table {
width: 100%;
margin-top: 30px;
}

.product-table th, .total td {
font-family: gothamrd-bold;
text-align: left;
color: #464e73;
padding: 5px;
text-align: right;
}

.products-list td {
text-align: right;
}

.products-list td {
padding: 5px;
}

tr.products-list td:first-child {
text-align: left;
}

.services-icon div.sppb-addon-text {
min-height: 60px;
}

#sp-footer, #sp-bottom {
    background: rgba(100,170,214,1) !important;
    color: #FFFFFF !important;
}

#promo-desc{ color: #464e73; margin-top: 5px;}
#promo-desc:hover { color: #044cd0; }

#article-para{
font-size: 12pt;
text-align: justify;
}


.pagenavigation>span a{
    display: inline-block;
    background: #ffca1c;
    padding: 10px 25px !important;
    border-radius: 25px;
    border: 0px solid #fff;
    color: #464e73 !important;
}

.pagination > li > a, .pagination > li > span {
    color: #252525;
}

@media only screen and (min-width: 992px){
#sp-header {padding-top: 0px;}
}


@media only screen and (max-width: 990px){
.quotation-filter select {
width: inherit;
display: inline-block;
}
}


@media only screen and (max-width: 768px) {
  
/*home residential and commercial mobile*/  
  
  #sppb-addon-wrapper-1588660062388{
    height:100px;
  }
  
  #sppb-addon-wrapper-1588658552237{
    height:100px;
  }
  
  /*changelog-10*/
  .login-col{
    width:276px;
  }
 
  
   #sppb-addon-wrapper-1588660062413{
    height:100px;
  }
  
  #sppb-addon-wrapper-1588660062419{
    height:100px;
  }
  

  /* to move the button back to center 08 May 2020*/
  #column-wrap-id-1588835106761 {
    margin-left: unset !important;
  }
  /* end home residential and commercial mobile */
  
.sp-organic-life-layout .sp-slider-item .container .sp-slider-content {
width: 100%;
text-align: center;
padding: 0 25px;
}

.yellow-small, .white-small, .blue-small {
font-size: 20px;
}

.white-small2 {
font-size: 13px;
}

.white-mobile-small {
font-size: 13px;
}


#sp-smart-slider.sp-organic-life-layout, .sp-organic-life-layout .sp-slider-item {
min-height: auto;
}

.sp-organic-life-layout .sp-slider-content .sp-introtext {
font-family: gothamrd-bold;
font-size: 21px;
line-height: 24px;
}

.accountform-group input[type="password"],.accountform-group input[type="email"],.accountform-group input[type="text"]  {
width: 65%;
border: 1px solid #D2D2D2;
border-radius: 10px;
float: left;
}

.accountform-group label {
float: left;
width: 35%;
display: inline-block;
font-family: gothamrd-medium;
color: #878787;
margin-bottom: 0;
padding: 9px 0;
}

.parthership-heading {
padding: 50px 10px;
}

.sliderwave {
margin-top: -30px !important;
}

.cta-row {
text-align: center;
}

.fluid-textleft {
padding: 20px 15px;
}

.fa-arrow-up:before {
    content: "\f062";
}

.sp-scroll-up {
    /*display:none !important;*/
    position: fixed;
    bottom: 25px !important;
    left: 10px;
    z-index: 20;
    font-size: 25px;
    border: none;
    outline: none;
    background-color: #ffca1c;
    color: #464e73;
    cursor: pointer;
    /*padding: 5px 13px;*/
    border-radius: 40px;
    box-shadow: 2px 2px 2px #999;
    transition: 1s;
}
.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
    background-color: #464e73;
    color: white;
}

#offcanvas-toggler > .fa {
color: #fff;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
float: right;
margin-left: 20px;
}

.ctabtn-col {
text-align: center;
margin-top: 20px;
}

.bt-cs .bt-row {
width: 50% !important;
}

.services-icon .sppb-addon-wrapper {
width: 50% !important;
float: left;
margin-bottom: 20px;
padding: 0 5px 0 5px;
}


.progressbar {
float: none;
display: block;
justify-content: inherit;
padding: 0;
text-align: center;
}

.progressbar li {
display: inline-block;
font-family: gothamrd-medium;
color: #464e73;
margin: 5px 20px;	/* ~ 20191108 change from 5px 3px */
}

.quotation-mainwrap {
background: #fff;
padding: 20px 20px;
border-radius: 8px;
border: 1px solid #d2d2d2;
margin-bottom: 50px;
}

.estimate-col, .estimate-col-yellow {
margin-bottom: 20px;
}

.summary-table td {
padding: 5px 10px;
font-size: 14px;
color: #464e73;
vertical-align: top;
}

input[type="text"].search-quotation {
padding: 9px 20px;
border-radius: 30px;
margin-top: 5px;
float: none !important;
width: 100% !important;
}

.quotation-map iframe {
height: 350px !important;
}

.signupform .quotation-form-fieldgroup {
width: 90%;
margin: 0 auto 25px;
}

.google-signup, .facebook-signup {
margin: 10px 15px;
}

.offcanvas-inner .menu li {
margin-bottom: 10px !important;
}

.offcanvas-inner .menu li a,
.offcanvas-menu .offcanvas-inner ul.menu li.active a,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent.menu-parent-open>a>.menu-toggler:after,
body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler {
color: #fff !important;
opacity: 1 !important;
}

.offcanvas-menu {
background-color: #64abd6;
color: #252525;
}

.table-wrapper {
width: 100%;
overflow-x: scroll;
}


.table-wrapper table {
min-width: 800px;
}

.myquotation-submit  {
text-align: center;
}

.comparebtn-wrap {
text-align: center;
}

.solarecsbtn-primary, #btn200 {
min-width: 100px;
}

.quotation-filter, .quotation-search{
text-align: center;
margin: 5px 0;
}

.summary-data select {
width: auto;
min-width: auto;
}

.btn-col {
margin-bottom: 20px;
}

.quotation-search input[type="text"] {
width: 200px;
border-radius: 25px;
float: none;
margin: auto;
}

.orderwrap {
overflow-x: scroll;
}

.orderwrap table {
min-width: 800px;
}


#column-wrap-id-1568172655740, #column-wrap-id-1568172655747, #column-wrap-id-1569220536361, #column-wrap-id-1569220536364 {
width: 30% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
float: none;
}

#column-wrap-id-1568172655745, #column-wrap-id-1568172655748, #column-wrap-id-1569220536362, #column-wrap-id-1569220536365 {
width: 50% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
float: none;
}


#column-wrap-id-1568172655746, #column-wrap-id-1568172655749, #column-wrap-id-1569220536363 {
width: 20% !IMPORTANT;
display: inline-block;
flex: none;
padding-left: 5px;
padding-right: 5px;
line-height: 50px;
}


#column-wrap-id-1568172655746 .num-equal, #column-wrap-id-1568172655749 .num-equal, #column-wrap-id-1569220536363 .num-equal {
padding: 30px 0px;
}

.profileform-group label {
font-size: 80%;
}

}

#sppb-addon-1567672694249 .sppb-addon-single-image-container, #sppb-addon-1566282783002 .sppb-addon-single-image-container {
    width: 100%;
}

#sppb-addon-1567672694249 .sppb-img-responsive, #sppb-addon-1566282783002 .sppb-img-responsive {
    width: 100%;
    max-width: none !important;
}


#sppb-addon-1566282783002 {
    margin-bottom: 0 !important;
}


/**Loan section Css**/

.loantab ul {
    text-align: center;
    border-bottom: 0px solid;
}

.loantab li {
    display: inline-block;
    float: none;
}


.loantab li a {
    display: inline-block;
    background: #fff;
    padding: 8px 25px;
    border-radius: 25px;
    margin: 0 10px;
    text-transform: capitalize;
    font-family: gothamrd-medium;
    font-size: 13px;
    line-height: 19px;
    text-align: center;
    color: #464e73;
    min-width: 150px;
    border: 1px solid #d2d2d2;
    text-decoration: none;
}

.sppb-nav-tabs>li.active>a, .sppb-nav-tabs>li.active>a:focus, .sppb-nav-tabs>li.active>a:hover {
    border: 1px solid #ffca1c;
    background: #ffca1c;
}

.sppb-nav>li>a:focus, .sppb-nav>li>a:hover {
    text-decoration: none;
    background: #ffca1c;
}

.loantab .sppb-tab-content {
    margin-top: 35px;
}

.logo-col {
    margin-bottom: 30px;
}

.logo-wrap {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #d2d2d2;
}

.logo-wrap:hover {
    background: #f2f2f2;
}

.deactive img {
   filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.loanheading-logo {
    text-align: center;
}

.loanheading-logowrap {
    display: inline-block;
    position: relative;
}

.loanheading-logo img {
    margin: auto;
}

.loanheading-logowrap:before {
    content: '';
    background: #ffca1c;
    display: inline-block;
    height: 3px;
    width: 90px;
    position: absolute;
    left: 0;
    bottom: 20px;
    left: calc(50% - 45px);
}

.loanmainwrap {
    background: #fff;
    padding: 30px 50px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    margin-bottom: 50px;
}

.loantable {
    width: 100%;
}


.loantable tr:nth-child(odd) td {
    background: #f6f6f6;
}

#yellowtable tr:first-child td {
    background: #ffca1c !important;
}

#bluetable tr:first-child td {
    background: #64abd6 !important;
    color: #ffffff !important;
    /* background: #464e73 !important;
    color: #ffca1c !important; */
}



.loantable tr:first-child td {
    font-size: 130%;
    font-family: gothamrd-bold;
}

.loantable tr td:first-child {
    font-family: gothamrd-bold;
    text-align: right;
    width: 25%;
}

.loantable tr:first-child td {
    text-align: center !important;
}

.loantable td {
    vertical-align: top;
    padding: 12px 20px;
    font-size: 115%;
}

.loantable td ul {
    padding: 0 20px;
}

.offcanvas-active .burger-icon>span, .burger-icon>span{
background-color: #ffffff;
height: 3px;
} 
.offcanvas-active .burger-icon>span:nth-child(1){
transform: translate(0, 11px) rotate(-45deg);
}

@media only screen and (max-width: 767px) {
.loanmainwrap {
    background: #fff;
    padding: 20px 10px;
    border-radius: 8px;
    border: 1px solid #d2d2d2;
    margin-bottom: 50px;
}

.loantable tr td, .loantable tr {
    display: block;
    width: 100%;
}

.loantable tr td:first-child {
    font-family: gothamrd-bold;
    text-align: center;
}

.loantable tr td, .loantable tr {
    display: block;
    width: 100% !important;
    text-align: left;
}

.loantable tr:nth-child(odd) td {
    background: inherit;
}

.loantable tr td:first-child {
    background: #f6f6f6;
}

.loantab li {
    display: inline-block;
    float: none;
    margin: 5px 0;
}
}
/**End loan section Css**/