body{font-family: 'Roboto', sans-serif; color:#000; background-color:#fff;} input, select, textarea {font-family: 'Roboto', sans-serif;} a {text-decoration:none; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;} a:hover {text-decoration:none;} a:focus {outline: none; text-decoration: none;} ul {margin:0; padding:0; list-style:none;} h1,h2,h3,h4,h5,h6,p{margin: 0;} .container{width: 100%;display: block ; max-width: 1200px;} img{max-width:100%} .clearfix:after, .clearfix:before{position: relative;display: block;content: "";width: 100%;clear: both;} input:focus, textarea:focus {outline: none;} section.section { overflow: hidden;} section.section.one {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#01a4cb+0,56c7e1+50,cbf1fb+100 */ background: #01a4cb; /* Old browsers */ background: -moz-linear-gradient(left, #01a4cb 0%, #56c7e1 50%, #cbf1fb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #01a4cb 0%,#56c7e1 50%,#cbf1fb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #01a4cb 0%,#56c7e1 50%,#cbf1fb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01a4cb', endColorstr='#cbf1fb',GradientType=1 ); /* IE6-9 */} .sliderSectn {overflow: hidden; position: relative;} .sliderSectn .imageBox {float: right; width: 100%; position: relative;} .sliderSectn .imageBox:before {position: absolute; right: 0; top: 0; width: 50%; height: 100%; content: ""; background: rgba(0,0,0,0.5);z-index: 9;} .sliderSectn .Slide-txt { position: absolute; height: 100%; width: 50%; right: 0; top: 0; z-index: 99; transform: none;} .logoBox { padding: 12px 0 13px 0; } .logoBox img {display: block; margin: 0 auto;} .sliderSectn .Slide-txt .insdTxt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 450px; width: 100%;} .sliderSectn .Slide-txt .insdTxt p {font-size: 40px; font-weight: 600; color: #fff; line-height: 50px;} .sliderSectn .Slide-txt .insdTxt p i {font-style: normal; color: #ff9600; } .sliderSectn .Slide-txt .insdTxt h3 {font-size: 24px; font-weight: 500; color: #fff; margin: 28px 0 0 0;} .sliderSectn .Slide-txt .insdTxt h5 {font-size: 18px; font-weight: 500; color: #fff; margin: 12px 0 0 0;} .sliderSectn .Slide-txt .insdTxt span {position: relative;} .sliderSectn .Slide-txt .insdTxt span.first:before {position: absolute; left: -45px; top: -13px; width: 39px; height: 29px; content: ""; background: url('https://homesolarus.com/googlenew2/images/quotes-icon.png') no-repeat center center;} .sliderSectn .Slide-txt .insdTxt span.last:after {position: absolute; right: -43px; bottom: -12px; width: 39px; height: 29px; content: ""; background: url('https://homesolarus.com/googlenew2/images/quotes-icon2.png') no-repeat center center;} section.section .owl-nav {position: absolute; bottom: 52px; right: 69px; display: none;} section.section .owl-nav .owl-prev {background: #fff url('https://homesolarus.com/googlenew2/images/left-arow.png') no-repeat center center; width: 50px; height: 50px; font-size: 0; float: left; margin: 0 15px 0 0; border-radius: 50%; box-shadow: 0 0 32px -11px #000; transition: all 0.3s ease;} section.section .owl-nav .owl-prev:hover {background: #16448a url('https://homesolarus.com/googlenew2/images/left-arow-hover.png') no-repeat center center;} section.section .owl-nav .owl-next {background: #fff url('https://homesolarus.com/googlenew2/images/right-arow.png') no-repeat center center; width: 50px; height: 50px; font-size: 0; float: left; border-radius: 50%; box-shadow: 0 0 32px -11px #000; transition: all 0.3s ease;} section.section .owl-nav .owl-next:hover {background: #16448a url('https://homesolarus.com/googlenew2/images/right-arow-hover.png') no-repeat center center;} .solarSave-box {overflow: hidden; height: 100%;} .solarSave-box .leftBar {height: 100%; width: 50%; float: left; position: relative; background: url('https://homesolarus.com/googlenew2/images/image-new.jpg') no-repeat center center; background-size: cover; } .solarSave-box .crclSection {position: absolute; left: 50%; top: 50%; transform: translate(-23%, -50%);} .solarSave-box .crclSection .circleBox {overflow: hidden; width: 360px; margin: 0 0 35px;} .solarSave-box .crclSection .circleBox .img {float: left; width:100px;} .solarSave-box .crclSection .circleBox .txt {float: left; width: 240px; padding: 12px 0 0 12px;} .solarSave-box .crclSection .circleBox .txt p {font-size: 20px; color: #fff;} .rightBar {height: 100%; width: 50%; float: left; position: relative; background: #fff;} .solarSave-box .rightBar .crclSection .circleBox .txt p {color: #000;} .rightBar .crclSection {transform: translate(-68%, -56%); width: 370px;} .rightBar .crclSection h1 {font-size: 40px; color: #3b3b3b; font-weight: 600; line-height: 50px; margin: 0 0 40px; } .rightBar .crclSection a.butn { display: block; width: 170px; height: 50px; line-height: 48px; font-size: 18px; color: #16448a; font-weight: 500; text-align: center; border: 2px solid #16448a; position: relative; top: 27px;} .rightBar .crclSection a.butn:hover {background: #16448a; color: #fff;} .section.section.three {position: relative;} .section.section.three:before {position: absolute; left: 0; top: 0; height: 100%; width: 426px; content: ""; background: url('https://homesolarus.com/googlenew2/images/patches.jpg') no-repeat left top; background-size: cover; } .capitalSection .title { width: 100%; display: block; max-width: 1120px; position: relative; margin: 0 auto;} .capitalSection .title h1 {font-size: 50px; color: #3b3b3b; font-weight: 600; line-height: 53px; } .capitalSection {position: relative;} .capitalSection .title h2 {font-size: 20px; color: #3b3b3b; font-weight: 400; margin: 10px 0 0 0; position: relative;} .capitalSection .title h2:before {position: absolute; bottom: -20px; left: 0; right: 0; margin: 0; width: 150px; height: 7px; background: #ff9600; content: "";} .capitalSection .listBox {margin: 90px 0 100px 0;} .capitalSection .capital-block h3 {font-size: 24px; color: #002266; font-weight: 600; margin: 0 0 16px; position: relative; transition: all 0.5s ease;} .capitalSection .capital-block { background: #fff; max-width: 342px; width: 100%; height: 300px; box-shadow: 0 0 28px -11px #ccc; padding: 30px 20px 0 20px; margin: 0 auto 19px; transition: all 0.5s ease; cursor: pointer; } .capitalSection .capital-block h3:before {position: absolute; top: -10px; left: 0; width: 40px; height: 4px; transition: all 0.5s ease; background: #ff9600; content: "";} .capitalSection .capital-block p {font-size: 17px; color: #000; line-height: 24px; transition: all 0.5s ease; transition: all 0.5s ease;} .capitalSection .capital-block:hover {background: #0a2e74;} .capitalSection .capital-block:hover h3, .capitalSection .capital-block:hover p {color: #fff;} .capitalSection .capital-block:hover h3:before {background: #fff;} .section.section.four .factSection { position: relative;} .factSection .insd-facts {position: relative; height: 304px; background: url('https://homesolarus.com/googlenew2/images/get-image.jpg') no-repeat center center; background-size: cover; } .factSection .insd-facts .getBox { width: 500px; height: 280px; background: #ff9600; float: right; margin: 5% 11% 0 0; padding: 47px 36px 0 38px;} .factSection .insd-facts .getBox h4 {font-size: 40px; color: #fff; font-weight: 600;} .factSection .insd-facts .getBox a.butn { border: 0; display: block; background: #fff url(https://homesolarus.com/googlenew2/images/butn-arrow-mbl1.png) no-repeat 80% center; font-size: 16px; color: #ff9600; text-align: center; font-weight: 400; height: 45px; line-height: 45px; padding: 0 26px 0 0;margin: 24px 0 34px 0; position: relative; border-radius: 50px; width: 200px; box-shadow: 0 6px 20px -12px #000; top: 0;} .factSection .insd-facts .getBox a.butn:hover {background: #fff url(https://homesolarus.com/googlenew2/images/butn-arrow-mbl1.png) no-repeat 88% center;} .factSection .policyBox { width: 100%; height: 50px; border-top: 1px solid #e4e4e4; padding: 15px 0 0 45px; margin: 120px 0 0 0; } .factSection .policyBox ul {overflow: hidden;} .factSection .policyBox ul li {float: left; padding: 0 7px 0 0;} .factSection .policyBox ul li a {color: #000; font-size: 16px; color: #323232;} .factSection .policyBox ul li a:hover {color: #143981;} .butn-controller {position: fixed; z-index: 999; right: 30px; bottom: 39px;} .butn-controller li a {display: block; width: 60px; height: 60px; background: #fff url('https://homesolarus.com/googlenew2/images/up-arrow.png') no-repeat center center; border-radius: 50%; box-shadow: 0 0 32px -11px #000; } .butn-controller li a.move_down {background: #fff url('https://homesolarus.com/googlenew2/images/down-arrow.png') no-repeat center center;} .butn-controller li {margin: 10px 0 0 0;} .sliderSectn .butn {display: none;} .capitalSection .capital-block .icons {display: none;} /* new */ .topHdr {background: #fff;} .frontSlider {overflow: hidden; position: relative;} .frontSlider .solarSave {float: left; width: 50%; position: absolute; left: 0; top: 0;z-index: 99; height: 100%; background: rgba(47,192,223,0.8);} .frontSlider .slideSection {float: right; width: 100%; position: relative;} .frontSlider .insdSolarSave {width: 580px; margin: 0; text-align: left; position: relative; transform: translate(-50%, -50%); left: 50%; top: 50%;} .frontSlider .insdSolarSave h2 {font-size: 45px; color: #fff; max-width: 339px; width:100%; margin: 0; padding: 0 0 50px; font-weight: 600; } .frontSlider .insdSolarSave ul {text-align: center; overflow: hidden;} .frontSlider .insdSolarSave ul li {float: left; width: 50%; padding: 0 46px 0 0; height: 94px; margin: 0 0 14px;} .frontSlider .insdSolarSave .img { padding: 0; float: left; width: 42px;} .frontSlider .insdSolarSave .img img {width: auto;} .frontSlider .insdSolarSave p {font-size: 18px; color: #fff; font-weight: 400; float: left; width: 78%; text-align: left; margin: 0 0 0 10px; line-height: 21px;} .frontSlider .insdSolarSave .butn {border: 0; display: block; background: #ff9600 url(https://homesolarus.com/googlenew2/images/butn-arrow-mbl.png) no-repeat 80% center; font-size: 16px; color: #fff; text-align: center; font-weight: 400; height: 45px; line-height: 45px; padding: 0 26px 0 0; text-shadow: 0 0px 1px #000; margin: 4px 0 34px 15px; position: relative; border-radius: 50px; width: 210px; box-shadow: 0 2px 9px -5px #000; top: 0;} .frontSlider .insdSolarSave .butn:hover {background: #d78003 url(https://homesolarus.com/googlenew2/images/butn-arrow-mbl.png) no-repeat 88% center;} .capitalSection {transform: none; left: 0; top: 0; margin: 82px 0 0 0;} .mobileTxt {display: none;} .stepPopup-container {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; transition: all 0.3s ease; opacity: 0; visibility: hidden; margin: 0 0 0 18px; } .openPopup .stepPopup-container {opacity: 1; visibility: visible; overflow-y: scroll; } .scrollOverlay .stepPopup-container {opacity: 1; visibility: visible; overflow-y: scroll; } body.openPopup {overflow: hidden;} .successPop .stepPopup-container {opacity: 1; visibility: visible;} .stepPopup-container:before {position: fixed; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0,0,0,0.6); transition: all 0.3s ease; } .stepPopup-body {max-width: 790px; width: 100%; height: auto; background: none; position: absolute; left: 0; top: 30px; border-radius: 8px; transition: all 0.6s cubic-bezier(.25,.75,.5,1.25); right: 0; margin: 0 auto 26px; padding: 0 0 30px; transform: scale(0); } .openPopup .stepPopup-body {transform: scale(1)} .successPop .stepPopup-body { height: auto !important; padding: 0;} .stepPopup-body .closePopup { position: absolute; border-radius: 3px; top: -18px; right: -13px; background: #097054; width: 35px; height: 35px; z-index: 9; transition: all 0.5s cubic-bezier(.22,.68,0,1.71);} .stepPopup-body .closePopup:before {position: absolute; left: 0; right: 0; margin: 0 auto; top: 11px; content: ""; background: url('https://homesolarus.com/googlenew2/images/cross-ico.png') no-repeat; width: 13px; height: 13px; transition: all 0.5s ease;} .stepPopup-body .closePopup:hover:before {transform: rotate(90deg);} .stepPopup-body .leftSide-form {background: #0396da url('https://homesolarus.com/googlenew2/images/left-bg.png') no-repeat center bottom; max-width: 250px; width: 100%; float: left; height: 600px; border-radius: 8px; padding: 48px 0 0 70px; transition: all 0.5s cubic-bezier(.22,.68,0,1.71); } .stepPopup-body .leftSide-form li a {display: block; font-size: 14px; color: #5dccff; cursor: text;} .stepPopup-body .leftSide-form li {padding: 0 0 0; min-height: 50px; position: relative;} .stepPopup-body .leftSide-form .insdSelft {position: relative;} .stepPopup-body .leftSide-form li span { position: absolute; top: 1px; left: -37px; transition: all 0.3s ease; } .stepPopup-body .leftSide-form li span i { position: absolute; top: 0; width: 18px; height: 18px; background: #5dccff; border-radius: 68%; left: 0; transition: all 0.3s ease; } .stepPopup-body .leftSide-form li span:before {position: absolute; left: 8px; top: 18px; content: ""; width: 1px; background: #5dccff; height: 33px; transition: all 0.3s ease;} .stepPopup-body .leftSide-form li:last-child span:before {display: none;} .stepPopup-body .leftSide-form li.active a {color: #ffffff; font-size: 16px; } .stepPopup-body .leftSide-form li.active i {opacity: 0;} .stepPopup-body .leftSide-form li cite {position: absolute; left: -5px; top: -6px; width: 28px; height: 28px; background: #0396da; border: 2px solid #fff; border-radius: 50%; transition: all 0.3s ease; opacity: 0; transform: scale(0); } .stepPopup-body .leftSide-form li.active cite {opacity: 1; transform: scale(1);} .stepPopup-body .leftSide-form li span:after {position: absolute; left: 8px; top: 22px; content: ""; width: 1px; background: #0f8a69; height: 0; transition: all 0.8s ease;} .stepPopup-body .leftSide-form li.menuAnim.on span:after {height: 33px;} .stepPopup-body .insd-stepPopup-cntr {float: right; max-width: 538px; background: #fff; width: 100%; border-radius: 8px; position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(.22,.68,0,1.71);} .stepPopup-body .txt-container {width: auto; height: 544px; position: relative; margin: 56px 35px 0 35px;} .stepPopup-body .txt-container .radioBlock-cntr h3 {font-size: 13px; color: #565656; font-weight: 400; padding: 0 0 5px 1px; } .txt-container .radioBlock-cntr .radioRow {overflow: hidden; margin: 0 0 29px;} .txt-container .radioBlock-cntr .radioRow .radioColm {float: left; width: 50%; padding-right: 13px;} .txt-container .radioBlock-cntr .radioColm .inputFld {border: 1px solid #d9d9d9; display: block; height: 50px; border-radius: 4px; padding: 0; margin: 0; cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0, 0.34, 0.2, 1.09); background: #fff url('https://homesolarus.com/googlenew2/images/home-icon-hover.png') no-repeat left 10px; overflow: hidden; } .txt-container .radioBlock-cntr .radioRow .radioColm:last-child {padding-right: 0; padding-left: 13px;} .txt-container .radioBlock-cntr .radioColm .inputFld.active {border: 1px solid #f29f00;} .txt-container .radioBlock-cntr .radioColm .inputFld span {display: block; font-weight: 400; color: #565656; float: left; line-height: 50px; padding: 0 0 0 15px; position: relative; } .txt-container .radioBlock-cntr .radioColm .inputFld.active span { color: #fff;} .txt-container .radioBlock-cntr .radioColm .inputFld input[type="radio"] {float: right; opacity: 0;} .txt-container .radioBlock-cntr .radioColm .inputFld:after {position: absolute; right: 12px; top: 15px; width: 19px; height: 19px; border: 1px solid #d9d9d9; content: ""; background: #fff; border-radius: 50%; transition: all 0.1s cubic-bezier(0, 0.34, 0.2, 1.09); } .txt-container .radioBlock-cntr .radioColm .inputFld.active:after {transform: scale(0);} .txt-container .radioBlock-cntr .radioColm .inputFld i {position: absolute; right: 12px; top: 15px; width: 19px; height: 19px; content: ""; background: #fff url('https://homesolarus.com/googlenew2/images/tick.png') no-repeat center center; border-radius: 50%; transition: all 0.2s ease; transform: scale(0);} .txt-container .radioBlock-cntr .radioColm .inputFld.radioCheck i {animation: radioBounce 0.5s; transform: scale(1);} .txt-container .radioBlock-cntr .radioColm .inputFld:before {position: absolute; left: 0; bottom: 0; width: 0%; height: 100%; content: ""; background: #f29f00 url('https://homesolarus.com/googlenew2/images/home-icon.png') no-repeat center 10px; transition: all 0.3s cubic-bezier(0, 0.34, 0.2, 1.09); right: 0; margin: 0 auto; } .txt-container .radioBlock-cntr .radioColm .inputFld.active:before {width: 100%;} .txt-container .radioBlock-cntr .radioRow .txtFld .fld { transition: all 0.5s cubic-bezier(0, 0.34, 0.2, 1.09); border: 1px solid #d9d9d9; display: block; height: 50px; border-radius: 4px; width: 100%; padding: 0 0 0 17px} .txt-container .radioBlock-cntr .radioRow .txtFld .fld:focus {border: 1px solid #f29f00;} .txt-container .radioBlock-cntr .radioRow.fourClm .radioColm:nth-child(2) {padding-right: 0; padding-left: 13px;} .txt-container .radioBlock-cntr .radioRow.fourClm .radioColm {margin: 0 0 20px;} .txt-container .radioBlock-cntr .butnBox {overflow: hidden;} .txt-container .radioBlock-cntr .butnBox .butn { display: block; height: 45px; line-height: 45px; text-align: center; color: #565656; float: left; background: #ebebeb; padding: 0 32px; border-radius: 50px;} .txt-container .radioBlock-cntr .butnBox .butn .txt-container .radioBlock-cntr .butnBox .butn:hover {background: #cccccc;} .txt-container .radioBlock-cntr .butnBox .next {float: right; background: #0f8a69 url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 82% center; color: #fff; padding-right: 42px; padding-left: 22px; } .securityBox {position: absolute; bottom: 28px; left: 5px; background: url('https://homesolarus.com/googlenew2/images/secure.png') no-repeat center left; padding: 11px 0 9px 49px; } .txt-container .radioBlock-cntr .butnBox .next:hover {background: #074f3c url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 82% center;} .securityBox p {font-size: 16px; color: #131313; } .securityBox p span {color: #f29f00;} .txt-container .radioBlock-cntr h1 { font-size: 18px; color: #808080; margin: 0 0 18px; } .txt-container .steps {position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; width: 100%; height: 100%; background: #fff; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .txt-container .steps.two {} .txt-container .steps.three {} .txt-container .steps.four {z-index: 1;} .stepPopup-body .txt-container:before {position: absolute; top: 0; left: 0; width: 100%; content: "";} .txt-container .steps.active {opacity: 1; z-index: 9; opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .txt-container .radioBlock-cntr .radioRow .radioColm {margin-bottom: 13px;} .txt-container .radioBlock-cntr .radioRow .radioColm:nth-child(2n+2) { padding-right: 0; } .txt-container .radioBlock-cntr .radioColm .inputFld span { display: block; font-weight: 400; color: #565656; float: left; line-height: normal; font-size: 11px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 30px 0 15px; } .txt-container .radioBlock-cntr .butnBox .next.nextDisable {pointer-events: none; background:#999 url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 82% center;} #ElecticityProvidersList {height: 258px; overflow-y: scroll;} .txt-container .radioBlock-cntr #ElecticityProvidersList .radioColm:last-child {padding-left: 0;} /* added css for select */ .selectBoxS{ float:left; width:100%; margin-bottom:27px;} .selectBoxS .btn-group.bootstrap-select{width: 100%!important; } .selectBoxS .bootstrap-select .dropdown-toggle { border: 1px solid #ddd!important; height: 50px; width: 100%; border-radius: 4px; background: #fff!important; outline: 0!important; box-shadow: inherit;} .selectBoxS .bootstrap-select .dropdown-toggle:focus, .selectBoxS .bootstrap-select .dropdown-toggle:hover{outline: 0!important; } .selectBoxS .dropdown-menu{ padding:0;} .selectBoxS .dropdown-menu>li>a { padding: 8px 15px;border-top: 1px solid #ddd;} .selectBoxS .dropdown-menu>li:first-child>a{ border-top: none;} .txt-container .radioBlock-cntr .butnBox .finish {float: right; background: #0f8a69 url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 82% center; color: #fff; padding-right: 42px; padding-left: 22px; } .securityBox {position: absolute; bottom: 28px; left: 5px; background: url('https://homesolarus.com/googlenew2/images/secure.png') no-repeat left 1px; padding: 11px 0 9px 49px; } .txt-container .radioBlock-cntr .butnBox .finish:hover {background: #074f3c url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 82% center;} .successCntr {background: #0396da url('https://homesolarus.com/googlenew2/images/left-bg.png') no-repeat center bottom; background-size: cover; height: 100%; width: 100%; border-radius: 0; text-align: center; position: absolute; bottom: 0; transform: scale(1,1);} .successCntr .thumbIcon {padding:6% 0 0 0;} .successCntr .cntnt h1 { font-size: 50px; color: #fff; font-weight: 400; margin: 13px 0 23px; } .successCntr .cntnt p {font-size: 20px; color: #fff; font-weight: 300;} .successCntr .cntnt {margin: 0 auto; max-width: 63%;} .successCntr.active { transform: scale(1,1);} .stepPopup-body.success-active {transform: scale(0); opacity: 0; } .stepPopup-body.success-active .insd-stepPopup-cntr { } /* .stepPopup-body.success-pop .successCntr {transform: scale(1,1); z-index: 99;} */ .mobileHead {display: none;} a.mobileBack {display: none;} /* @keyframes ButtnFomrBounce { 0% { transform: translate(0, 0); } 50% { transform: translate(20px, 0); } 100% { transform: translate(-142px, 0); } } @keyframes leftFomrBounce { 0% { transform: translate(0, 0); } 50% { transform: translate(-5%, 0); } 100% { transform: translate(101%, 0) scale(0.7); } } @keyframes rightFomrBounce { 0% { transform: translate(0, 0); } 50% { transform: translate(5%, 0); } 100% { transform: translate(-26%, 0); } } */ @keyframes radioBounce { 0% { transform: scale(0); } 50% { transform: scale(1.26); } 100% { transform: scale(1); } } @media (min-width:768px) and (max-width:5000px) { .owl-carousel.owl-theme.capitalSlider {display: block;} .owl-carousel.owl-theme.capitalSlider .item {width: 33.333%; float: left; padding: 0 10px;} } @media (min-width:1025px) and (max-width:1200px) { .frontSlider .insdSolarSave {width: 490px;} .frontSlider .insdSolarSave ul li {padding: 0 22px 0 0; height: 118px;} .frontSlider .insdSolarSave p {width: 73%;} .frontSlider .insdSolarSave .butn {margin: -31px 0 34px 0;} .frontSlider .insdSolarSave h2 {font-size: 40px;} .sliderSectn .Slide-txt .insdTxt { max-width: 393px} .capitalSection .title {padding: 0 25px;} } /* added css for small devices */ @media (min-width:768px) and (max-width:1024px) { .sliderSectn .Slide-txt .insdTxt { transform: translate(-42%, -50%); max-width: 300px;} .sliderSectn .Slide-txt .insdTxt p {line-height: 35px; font-size: 29px;} .solarSave-box .crclSection { transform: translate(-42%, -50%);} .solarSave-box .crclSection .circleBox .txt { width: 208px; padding: 6px 0 0 12px;} .rightBar .crclSection h1 {margin: 0 0 28px; font-size: 25px; line-height: 28px;} .solarSave-box .rightBar .crclSection { transform: translate(-39%, -55%);} .capitalSection .listBox {margin: 31px 0 0 0; padding: 0 0 46px;} .capitalSection .title h2:before {bottom: -28px;} .capitalSection .capital-block h3 { font-size: 20px;} .capitalSection .title h1 {font-size: 32px; line-height: 40px;} .capitalSection {transform: none; position: static; margin: 50px 0 0 0;} .capitalSection .capital-block {height: 400px; padding: 29px 15px 18px 18px;} section.section {height: auto;} .scroll-wrapper {height: auto;} .capitalSection .title h2 { font-size: 20px;} .capitalSection .title {margin: 0 0 85px; padding: 0 25px;} .section.section.four .factSection {height: auto;} .butn-controller {display: none;} .factSection .insd-facts {transform:none; position: static; height: 247px;} .factSection .policyBox {position: static; margin: 141px 0 0 0;} section.section.two { height: 100vh;} .factSection .policyBox ul {float: left;} .section.section.three { clear: both;} section.section.two {height:auto;} .solarSave-box .crclSection {transform: none; position: static; margin: 124px 0 0 38px;} .solarSave-box .rightBar .crclSection {transform: none; position: static;} .rightBar .crclSection a.butn {top: 0;} .solarSave-box .leftBar {height: 460px;} .solarSave-box .rightBar {height: 460px;} .solarSave-box .rightBar .crclSection {margin: 41px 0 0 38px;} .solarSave-box .crclSection .circleBox {margin: 0 0 20px;} .capitalSection .capital-block:hover {background: #fff;} .capitalSection .capital-block:hover h3 {color: #002266;} .capitalSection .capital-block:hover h3:before {background: #ffd201;} .capitalSection .capital-block:hover p {color: #000;} .factSection .insd-facts .getBox {height: 255px;} section.section .owl-nav {bottom: 30px; right: 28px;} .frontSlider .insdSolarSave {width: 90%; margin: 0 auto 40px;} .logoBox {padding: 7px 0 15px 17px;} .frontSlider .insdSolarSave h2 {font-size: 28px; max-width: 300px; padding: 0 0 30px;} .frontSlider .insdSolarSave p {font-size: 16px;} .frontSlider .insdSolarSave ul {padding: 0 6px;} section.section.one {background: none;} .frontSlider .solarSave {background: #56c7e1; min-height: 580px;} .frontSlider .slideSection {min-height: 580px;} .frontSlider .owl-carousel .imageBox {min-height: 580px;} .frontSlider .owl-carousel .owl-item img {transform: scale(1.9);} .frontSlider .insdSolarSave ul li {margin:0 0 20px; width: 80%; padding: 0; height: auto;} .sliderSectn .Slide-txt .insdTxt h5 { font-size: 16px;} .stepPopup-container {margin: 0;} .stepPopup-body {max-width: 700px;} .stepPopup-body .insd-stepPopup-cntr {max-width: 448px;} .stepPopup-body.success-active .closePopup {transform: translate(-117px, 0);} } @media (min-width:320px) and (max-width:767px) { .logoBox {padding: 8px 0 15px 0; width: 225px; margin: 0 auto;} .logoBox img {display: block; margin: 0 auto;} section.section .owl-nav {top: -36px; right: 16px;} .sliderSectn .imageBox {box-shadow: none;} .sliderSectn .imageBox {width: 100%; height: 330px; overflow: hidden;} .sliderSectn .imageBox:before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0,0,0,0.6);} .sliderSectn .imageBox img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(2);} .sliderSectn .butn { display: block; background: #fa9301 url('https://homesolarus.com/googlenew2/images/arro-mobile.png') no-repeat 79% 16px; border-bottom: 4px solid #ce7900; font-size: 18px; color: #fff; text-align: center; font-weight: 500; height: 45px; line-height: 45px; padding: 0 10px 0 0; text-shadow: 0 0px 1px #000; margin: 25px auto 0; position: relative; border-radius: 3px; width: 250px; box-shadow: 0 2px 9px -5px #000;} .sliderSectn .butn:before {position: absolute; width: 48px; height: 46px; background: #e6be06 url(https://homesolarus.com/googlenew2/images/butn-arrow.png) no-repeat center center; content: ""; left: 1px; top: 1px; } .sliderSectn .butn:before {display: none;} section.section {height: auto;} .scroll-wrapper {height: auto; overflow: scroll;} .solarSave-box .crclSection {position: static; width: 100%; transform: none; overflow: hidden;} .solarSave-box .leftBar {width: 100%; background: none; margin: 0 0 35px;} .solarSave-box .rightBar {width: 100%;} .solarSave-box .rightBar h1 {display: none;} section.section.two h1.solrHdng {text-align: center; font-size: 24px; color: #3b3b3b; font-weight: 600; position: relative;} section.section.two h1.solrHdng:before {position: absolute; bottom: -15px; left: 0; right: 0; margin: 0 auto; height: 5px; background: #ffd201; content: ""; width: 90px;} section.section.two {margin: 25px 0 0; background: url('https://homesolarus.com/googlenew2/images/solar-img.png') no-repeat center -40px; } .solarSave-box {padding: 52px 13px 35px 11px;} .solarSave-box .leftBar .crclSection .circleBox img {display: none;} .solarSave-box .leftBar .crclSection .circleBox:nth-child(1) img {display: none;} .solarSave-box .leftBar .crclSection .circleBox:nth-child(2) img {display: none;} .solarSave-box .leftBar .crclSection .circleBox:nth-child(1) .img {background: url('https://homesolarus.com/googlenew2/images/icon1blue.png') no-repeat center center; width: 96px; height: 96px; float: none; display: block; margin: 0 auto;} .solarSave-box .leftBar .crclSection .circleBox:nth-child(2) .img {background: url('https://homesolarus.com/googlenew2/images/icon2blue.png') no-repeat center center; width: 96px; height: 96px; float: none; display: block; margin: 0 auto;} .solarSave-box .crclSection .circleBox .txt {width: 100%; text-align: center; padding: 0;} .solarSave-box .crclSection .circleBox .txt p {color: #16448a; font-weight: 600; font-size: 18px; line-height: 21px; margin: 12px 5px 0;} .solarSave-box .crclSection .circleBox {overflow: hidden; width: 50%; margin: 0; float: left;} .solarSave-box .crclSection .circleBox .img { float: none; width: 100%;} .solarSave-box .crclSection .circleBox .img img {display: block; margin: 0 auto;} .solarSave-box .rightBar .crclSection .circleBox .txt p {color: #16448a; font-weight: 600; font-size: 18px; line-height: 21px; margin: 18px 0 0;} .rightBar .crclSection a.butn {clear: both; display: block; background: #caa601; border: 1px solid #e0d18f; font-size: 20px; color: #fff; text-align: center; font-weight: 500; height: 50px; line-height: 50px; padding: 0 0 0 40px; text-shadow: 0 0px 1px #000; margin: 0 auto 0; position: relative; border-radius: 3px; width: 215px; top: auto;} .rightBar .crclSection a:before {position: absolute; width: 44px; height: 46px; background: #e6be06 url(https://homesolarus.com/googlenew2/images/butn-arrow.png) no-repeat center center; content: ""; left: 1px; top: 1px; } .rightBar .crclSection a.butn:hover { background: #caa601;} .solarSave-box .rightBar .circleBox {margin: 0 0 25px;} .section.section.three:before {display: none;} .capitalSection {transform: none; position: static; margin: 0;} .capitalSection .title {padding: 24px 19px 20px; text-align: center;} .capitalSection .title h1 { color: #000; font-size: 24px; line-height: 27px;} .capitalSection .title h1 br {display: none;} .capitalSection .title h2 {color: #000; font-size: 18px; margin: 15px 0 0 0;} .capitalSection .title h2:before {display: none;} .capitalSection .listBox {margin: 0;} .capitalSection .capital-block {padding: 0; box-shadow:none; height: auto; text-align: left; padding: 0; transition: none; background: #002266; border-radius: 4px; padding: 0 20px; margin: 0 auto 10px; min-width: 90%; width: 100%;} .capitalSection .capital-block:hover {background: #002266;} .capitalSection .capital-block .icons {display: none;} .capitalSection .capital-block .icons img {width: auto; display: block; margin: 0 auto; display: none;} .capitalSection .capital-block h3 {color: #fff; font-size: 18px; margin: 0; transition: none; font-weight: 400; padding: 10px 10px 10px 0; position: relative; line-height: 23px;} .capitalSection .capital-block h3:after {position: absolute; right: -8px; top: 18px; width: 13px; height: 3px; background: #fff; content: ""; transform: rotate(90deg); transition: all 0.5s ease;} .capitalSection .capital-block h3.active:after {transform: rotate(0);} .capitalSection .capital-block h3:before {position: absolute; right: -8px; top: 18px; width: 13px; height: 3px; background: #fff !important; content: ""; left: auto;} .capitalSection .capital-block p {font-size: 15px; line-height: 20px; color: #fff; transition: none; display: none; padding: 0 0 16px;} section.section .capitalSlider .owl-nav {top: 40%; right: 0; width: 100%;} section.section .capitalSlider .owl-nav .owl-prev {background: url('https://homesolarus.com/googlenew2/images/mobile-left-aro.png') no-repeat center center; width: 33px; height: 63px; float: left; margin: 0 0 0 -5px;} section.section .capitalSlider .owl-nav .owl-next {background: url('https://homesolarus.com/googlenew2/images/mobile-right-aro.png') no-repeat center center; width: 33px; height: 63px; float: right; margin: 0 -5px 0 ;} .section.section.four .factSection {height: auto;} .factSection .insd-facts {height: auto; transform: none; position: static; background: #e6e6e6; overflow: hidden; margin: 25px 0 0 0;} .factSection .policyBox {position: static; height: 50px; padding: 15px 0 0 0; margin: 0;} .factSection .insd-facts .getBox {margin: 0; padding: 33px 23px 7px; width: 100%; height: auto; background: none;} .factSection .insd-facts .getBox h4 {font-size: 26px; color: #3b3b3b; text-align: center; margin: 0 0 20px;} .factSection .insd-facts .getBox a.butn {border: 0; display: block; background: #fa9301 url('https://homesolarus.com/googlenew2/images/arro-mobile.png') no-repeat 79% 16px; border-bottom: 4px solid #ce7900; font-size: 18px; color: #fff; text-align: center; font-weight: 500; height: 45px; line-height: 45px; padding: 0 10px 0 0; text-shadow: 0 0px 1px #000; margin: 4px auto 34px; position: relative; border-radius: 3px; width: 250px; box-shadow: 0 2px 9px -5px #000; top: 0;} .factSection .policyBox ul li {float: none; display: inline-block;} .factSection .policyBox ul {text-align: center;} .frontSlider .mobileTxt {display: block; background: url('https://homesolarus.com/googlenew2/images/mobile-slide.png') no-repeat center center; background-size: cover; height: 300px; text-align: center; position: relative; display: none; } section.section.one {background: none;} .frontSlider .slideSection {display: block;} .frontSlider .solarSave {width: 100%; background: #02a9d1; position: static;} .sliderSectn .Slide-txt {width: 100%; text-align: center;} .mobileTxt.sliderSectn .Slide-txt { width: 100%; transform: translate(-50%, -50%);} .mobileTxt.sliderSectn .Slide-txt i {font-style: normal; color: #ff9600;} .sliderSectn .Slide-txt .insdTxt p {line-height: 27px; font-size: 22px;} .sliderSectn .Slide-txt .insdTxt {padding: 0 0 0 12px; width: 264px; } .sliderSectn .Slide-txt .insdTxt h3 {font-size: 17px; margin: 19px 0 0 0;} .sliderSectn .Slide-txt .insdTxt h5 {font-size: 16px;} .frontSlider .insdSolarSave {width: 100%; margin: 9% auto 0; text-align: center; transform: none; position: static;} .frontSlider .insdSolarSave h2 {font-size: 27px; max-width: 280px; margin: 0 auto; padding: 0 0 25px;} .sliderSectn .Slide-txt .insdTxt span.first:before {background-size: 100%; width: 23px; left: -27px; height: 17px; top: -7px;} .sliderSectn .Slide-txt .insdTxt span.last:after {background-size: 100%; width: 23px; right: -27px; height: 17px; bottom: -7px;} .frontSlider .insdSolarSave ul li {width: 100%; height: auto; overflow: hidden; position: relative; padding: 0 11px 13px; margin: 0 0 11px;} .frontSlider .insdSolarSave ul li::before {position: absolute; left: 13px; bottom: 0; right: 0; margin: 0; content: ""; width: 100%; height: 1px; background: url('https://homesolarus.com/googlenew2/images/border.png') repeat-x; width: 301px; height: 2px; } .frontSlider .insdSolarSave .img img {display: none;} .frontSlider .insdSolarSave .img {width: 43px; height: 56px; float: left; padding: 0; } .frontSlider .insdSolarSave ul li:nth-child(1) .img {background: url('https://homesolarus.com/googlenew2/images/mob-icon-new.png') no-repeat center center;} .frontSlider .insdSolarSave ul li:nth-child(2) .img {background: url('https://homesolarus.com/googlenew2/images/mob-icon-new2.png') no-repeat center center;} .frontSlider .insdSolarSave ul li:nth-child(3) .img {background: url('https://homesolarus.com/googlenew2/images/mob-icon-new3.png') no-repeat center center;} .frontSlider .insdSolarSave ul li:nth-child(4) .img {background: url('https://homesolarus.com/googlenew2/images/mob-icon-new4.png') no-repeat center center; } .frontSlider .insdSolarSave ul li:nth-child(4):before {display: none;} .frontSlider .insdSolarSave p { float: left; text-align: left; width: 80%; font-weight: 400; font-size: 16px; padding: 5px 0 0 5px; } .frontSlider .insdSolarSave ul {width: 312px; margin: 0 auto;} .frontSlider .insdSolarSave .butn { border: 0; display: block; background: #fa9301 url('https://homesolarus.com/googlenew2/images/arro-mobile.png') no-repeat 79% 16px;border-bottom: 4px solid #ce7900; font-size: 18px; color: #fff; text-align: center; font-weight: 500; height: 45px; line-height: 45px; padding: 0 10px 0 0; text-shadow: 0 0px 1px #000; margin: 4px auto 34px; position: relative; border-radius: 3px; width: 250px; box-shadow: 0 2px 9px -5px #000;} .frontSlider .insdSolarSave .butn:before { display: none; } .section.section.three .owl-carousel {display: block;} /* added css for steps responsive */ .stepPopup-body .leftSide-form{ height: 80px; overflow: hidden; float: none; width: 100%; max-width: inherit; position: absolute; z-index: 1; background: none; padding: 0; border-radius: 0;} .stepPopup-container{ margin:0;} .stepPopup-body { max-width: 93%;} .stepPopup-body .txt-container{margin: 95px 10px 0 10px; height: auto; transition: all 0.5s ease-in-out;} .txt-container .radioBlock-cntr .radioRow .radioColm{ padding-right: 6px;} .txt-container .radioBlock-cntr .radioRow .radioColm:last-child, .txt-container .radioBlock-cntr .radioRow.fourClm .radioColm:nth-child(2) { padding-left: 6px;} .txt-container .radioBlock-cntr .radioRow{ margin-bottom:15px;} .stepPopup-body .txt-container .radioBlock-cntr h3{ padding-bottom:9px;} .txt-container .radioBlock-cntr h1{ text-align:center; display: none;} .stepPopup-body .leftSide-form li {display: inline-block; height: auto; min-height: 0; position: absolute; width: 100%; height: 70px; left: 0; text-align: center;} .stepPopup-body .leftSide-form .insdSelft {text-align: center;} .stepPopup-body .leftSide-form li span {display: none;} .stepPopup-body .leftSide-form li a {color: #00a6cc; font-size: 20px; position: absolute; width: 100%; left: 0; opacity: 0; top: 40px;} .stepPopup-body .leftSide-form li.active a {opacity: 1; color: #00a6cc; font-size: 20px;} .stepPopup-body .leftSide-form li:before {position: relative; display: inline-block; background: #cccccc; width: 8px; height: 8px; content: ""; border-radius: 50%; top: 15px; } .stepPopup-body .closePopup {right: -6px;} .stepPopup-body .leftSide-form li.oneMenu:before {transform: translate(-32px, 0);} .stepPopup-body .leftSide-form li.twoMenu:before {transform: translate(-11px, 0);} .stepPopup-body .leftSide-form li.threeMenu:before {transform: translate(10px, 0);} .stepPopup-body .leftSide-form li.fourMenu:before {transform: translate(32px, 0);} .stepPopup-body .leftSide-form li.active:before {background: #00a6cc;} .stepPopup-body .leftSide-form li a:before { content: ""; position: absolute; height: 3px; width: 30px; border-radius: 50px; background: #00a6cc; bottom: -6px; left: 0; right: 0; margin: 0 auto;} .txt-container .radioBlock-cntr .radioColm .inputFld span {font-size: 12px; padding: 0 0 0 9px;} .txt-container .radioBlock-cntr .butnBox {overflow: visible; position: absolute; left: -10px; bottom: 0; width: calc(100% + 20px);} .txt-container .radioBlock-cntr .butnBox .next { background: #097054 url(https://homesolarus.com/googlenew2/images/butn-arow.png) no-repeat 63% center; width: 100%; border-radius: 0; height: 40px; padding: 0; font-size: 16px; line-height: 42px; } .securityBox { position: static; background-size: 24px; padding: 6px 0 9px 28px; margin: -6px 0 0 0; clear: both;} .txt-container .steps.two .radioBlock-cntr .radioRow .radioColm {width: 97%; padding: 0 6px 0 0; margin: 0 0 10px;} .securityBox p {font-size: 12px;} .txt-container .radioBlock-cntr .butnBox .next:hover {background: #097054 url(https://homesolarus.com/googlenew2/images/butn-arow.png) no-repeat 63% center;} .txt-container .radioBlock-cntr .butnBox .finish { background: #097054; width: 100%; border-radius: 0; height: 40px; padding: 0; font-size: 16px; line-height: 42px; } .txt-container .radioBlock-cntr .butnBox .butn.back {display: none;} .txt-container .radioBlock-cntr .radioRow.fourClm .radioColm { margin: 0 0 9px;} .mobileBack {position: fixed; top: -82px; width: 22px; left: 6px; opacity: 0;} .stepPopup-body .leftSide-form li.threeMenu a, .stepPopup-body .leftSide-form li.fourMenu a {font-size: 0;} .stepPopup-body .leftSide-form li .mobileHead {font-size: 20px;} .securityBox p {font-size: 12px; line-height: 15px;} .stepPopup-body.success-active .insd-stepPopup-cntr { transform: translate(0, 0);} .stepPopup-body.success-active .closePopup {transform: translate(0, 0);} .stepPopup-body.success-active .leftSide-form {display: none} .securityBox p.securityBoxP {line-height: 11px;} .successCntr .thumbIcon {width: 63px; margin: 0 auto;} .successCntr .cntnt h1 { font-size: 39px; margin: 8px 0 14px;} .successCntr .cntnt p { font-size: 15px;} .mobileHead {display: block;} a.mobileBack {display: block;} .steps.active .mobileBack {opacity: 1;} .successCntr .cntnt { max-width: 85%;} .txt-container .radioBlock-cntr .butnBox .next.nextDisable {pointer-events: none; background:#999 url('https://homesolarus.com/googlenew2/images/butn-arow.png') no-repeat 63% center;} .stepPopup-body .txt-container.maxHeight #ElecticityProvidersList{padding:0 20px 0 0;} span.inputElecticityProvidersErrorIn { position: relative; display: block; margin: -20px 0 26px 3px; } @keyframes ButtnFomrBounce { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } @keyframes rightFomrBounce { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } #ElecticityProvidersList {margin: 0 0 0 0; overflow: unset; height:auto;} .electricContainer {height: 258px; overflow: auto; margin:0 0 10px;} } @media (min-width:375px) and (max-width:767px) { .sliderSectn .Slide-txt .insdTxt {width: 315px;} .sliderSectn .imageBox {height: 390px;} .sliderSectn .Slide-txt .insdTxt p { line-height: 32px; font-size: 28px;} .sliderSectn .Slide-txt .insdTxt h3 {font-size: 20px;} .frontSlider .mobileTxt {height: 348px;} .frontSlider .insdSolarSave ul {width: 338px;} } @media (min-width:500px) and (max-width:767px) { .sliderSectn .Slide-txt .insdTxt {width: 400px;} .sliderSectn .Slide-txt .insdTxt p {line-height: 36px; font-size: 32px;} .sliderSectn .Slide-txt .insdTxt h3 { font-size: 24px;} .frontSlider .insdSolarSave h2 {font-size: 33px; max-width: 307px;} .frontSlider .insdSolarSave p {font-size: 18px; padding: 12px 0 0 5px;} .frontSlider .insdSolarSave ul {width: 400px;} .frontSlider .insdSolarSave ul li {padding: 0 0 11px;} .frontSlider .insdSolarSave ul li::before {left: 9px; right: auto; width: 355px;} .capitalSection .title {padding: 34px 50px 20px;} .capitalSection .title h1 { font-size: 30px; line-height: 35px;} .capitalSection .title h2 {font-size: 22px;} .capitalSection .capital-block {max-width: 400px;} .capitalSection .capital-block h3 {font-size: 20px; padding: 17px 0; line-height: 25px;} .capitalSection .capital-block p { font-size: 18px; line-height: 25px;} .capitalSection .capital-block h3:before {top: 27px;} .capitalSection .capital-block h3:after {top: 27px;} .sliderSectn .imageBox {height: 446px; } .sliderSectn .imageBox img { transform: translate(-50%, -50%) scale(1.9);} .sliderSectn .Slide-txt .insdTxt span.first:before {left: -45px; top: -13px; width: 39px; height: 29px;} .sliderSectn .Slide-txt .insdTxt span.last:after { right: -43px; bottom: -12px; width: 39px; height: 29px;} }