:root{ --pg-blue: #2581fe; --pg-blue-dark: #025c98; --pg-blue-darker:#0062cc; --pg-blue-accent:#278bed; --footertext:#16243d; --text: #4f4747; --text-primary: #12266d; --pg-accent: #e2f1fd; --pg-grey: #bfbfbf; --pg-succes: #016c3a; --pg-succes-bg:#effff8; --cta:#f7782b } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}img{margin:0;padding:0;border:0;outline:0;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}a:focus{outline:0;text-decoration:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease}a:hover{text-decoration:none}::-webkit-input-placeholder{opacity:1}:-moz-placeholder{opacity:1}::-moz-placeholder{opacity:1}:-ms-input-placeholder{opacity:1}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} a{color: #3262ff; font-weight: 400} body { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.428571429; color:var(--text-primary); background-color: #f9f9fb; min-width: 320px; overflow-x: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } nav{ background: #fff; max-width: 100%; padding:15px 0 0; z-index: 99999; position: relative; -moz-box-shadow:0 0 16px rgba(23,31,43, .3);-webkit-box-shadow:0 0 16px rgba(23,31,43, .3);box-shadow:0 0 16px rgba(23,31,43, .3);} .logo{max-height: 60px; width: auto} .progress_box{padding:20px 15px;text-align: center ; background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);} .progress_box h2 {font-size: 1.125rem; font-weight: 700; margin-bottom: 1.25rem} .progress{background: #ddd; height: 10px;border-radius: 20px; max-width: 820px; margin-bottom: 1rem; overflow: visible} .progress-bar{background: var(--text-primary);position: relative; border-radius: 20px; } .progress-bar:after{content: ""; width:40px; height: 40px; position: absolute;right: 0; background-image: url("../img/exp6/car.svg"); background-repeat: no-repeat; background-position: center; background-size: contain;} .progress-val{ text-align: right;white-space: nowrap; font-size: 1rem; padding: 0 5px 0 15px} .form fieldset:not(:first-of-type) { display: none; } .step-title { font-size: 1.5rem; line-height: 2rem;margin-top : 1.5rem;margin-bottom: 2rem; font-weight:700;text-align: center } .formSection{padding:0;} .formSection.container{max-width: 100%!important} .form-cont {max-width: 820px; margin-left: auto; margin-right: auto } .sm{max-width: 300px;} .form .form-control { font-size: 1.125rem ; line-height: 60px; padding: 0 25px; border: solid 1px var(--pg-grey); margin-bottom: 1rem; border-radius: 4px; background-color: white; color: black; } .form .form-control:active,.form .form-control:focus { background-color: white; outline: 0; box-shadow: #0000001a 0px 4px 10px; } .form select.form-control {height: 60px !important; line-height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23696e77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: center right 15px;-moz-appearance: none;appearance: none; background-repeat: no-repeat; background-size: 15px; margin-left: auto; margin-right: auto} .label{font-weight: 700; margin-bottom: .5rem; font-size: 1rem; color: var(--text); display: block; text-align: left} .radio-btn label {position: relative; transition: all .15s linear; white-space: normal; margin-bottom: 15px; line-height: 1;cursor: pointer;display: flex; flex-direction: row; align-items: center; border-radius: 5px;padding:0px 15px; height: 60px; width: 100%; background-color: white; border: solid 1px var(--pg-grey); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: .9rem } .radio-btn label span {text-align: center; width: 100%} .checkbox input[type=checkbox], .radio-btn input{margin:0;padding:0;-webkit-appearance:none !important;-moz-appearance:none !important; appearance:none !important;position:absolute;top:0;left: 0;border: none !important;opacity: 0 !important; width: 1px; height: 1px; } .radio-btn.col.apcy{min-width: 200px; max-width: 210px;} .radio-btn input:checked~label{ border-color: #777777; font-weight: 700; color: #777777;} .radio-btn label:hover { background: var(--pg-accent)} .home-insurance #current_insurer .radio-btn input:checked~label, [id*="step-driver_"] .radio-btn input:checked~label, #step-coverage-length .radio-btn input:checked~label, .autoInsurers .radio-btn input:checked~label, .radio-btn-2 .radio-btn input:checked~label{border-color: var(--pg-blue-accent)!important;color: var(--text-primary);background: var(--pg-accent)} .home-insurance #current_insurer .radio-btn label span, [id*="step-driver_"] .radio-btn label span, #step-coverage-length .radio-btn label span, .autoInsurers .radio-btn label span, .radio-btn-2 .radio-btn label span{text-align: left!important; position: relative; padding-left: 20px} .home-insurance #current_insurer .radio-btn label span:before , #step-coverage-length .radio-btn label span:before , .autoInsurers .radio-btn label span:before , .radio-btn-2 .radio-btn label span:before {content:" ";background-color: #fff;pointer-events: none;height: 18px;width: 18px; transition: border ease .15s; display: block; position: absolute; right: 0; top: 50%; margin-top: -8px; -webkit-border-radius:50%;border-radius:50%; -webkit-box-shadow: 0 0 0 2px #d6d7d9;box-shadow: 0 0 0 2px #d6d7d9;border: 2px solid #fff;} .home-insurance #current_insurer .radio-btn input:checked~label span:before , [id*="step-driver_"] .radio-btn input:checked~label span:before , #step-coverage-length .radio-btn input:checked~label span:before , .autoInsurers .radio-btn input:checked~label span:before , .radio-btn-2 .radio-btn input:checked~label span:before {background:var(--pg-blue); -webkit-box-shadow: 0 0 0 2px var(--pg-blue); box-shadow: 0 0 0 2px var(--pg-blue);} .form-btns {max-width: 620px; margin-left: auto; margin-right: auto; margin-top: 1rem} .form .form-btn{font-style:normal;font-weight:600;font-size:1.125rem;padding:0 10px;position:relative; -webkit-transition:all .15s linear; -o-transition:all .15s linear; transition:all .15s linear;width:100%;background-color:var(--cta);border: none; color: #fff; margin-bottom: 20px;border-radius: 4px; margin-top: 1rem; display: flex; flex-direction: row; align-items: center; height: 60px; justify-content: center} .form .btn-text {position: relative; transition:all .15s linear;} .two_col {margin-left: -5px; margin-right: -5px; justify-content: center} .two_col > [class*="col-"] , .two_col > .col{padding-left: 5px; padding-right: 5px;} .two_col .radio-btn label {padding-top: 16px; padding-bottom: 16px} .two_col .radio-btn {max-width: 120px !important} .icon {display: block; width: 70px; height: 70px; margin-left: auto; margin-right: auto; margin-bottom: 1rem} #step-coverage-length .row, .birth > .no-gutter , [id*="step-vehicle_"] .no-gutter{margin-left: -5px !important; margin-right: -5px ;} #step-coverage-length .row > .col, .birth > .no-gutter > .col, .birth > .no-gutter> [class*="col-"] , [id*="step-vehicle_"] .no-gutter > .col, [id*="step-vehicle_"] .no-gutter > [class*="col-"] { padding: 0 5px !important;text-align: center; } [id*="step-vehicle_"] .radio-btn label span {padding-left: 0px; width: 100%;} [id*="step-vehicle_"] .radio-btn label:before{display: none} [id*="vehicle_make"] .radio-btn label{height: 90px;} [id*="vehicle_make"] .radio-btn label img {height: 50px; width: auto !important} [id*="vehicle_make"] .radio-btn.col-6 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%; max-width: 33.333333%;} #step-coverage-length .col{-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} #step-coverage-length .two_col .radio-btn {max-width: initial !important} .insurer-logo {max-width: 100%!important; height: auto} .help {width: 100%; margin-top: 15px; max-width: 320px} .help img{margin-right: 10px; } .help p{padding-left: 22px;background-image:url("data:image/svg+xml; utf8, "); background-position: center left; background-repeat: no-repeat; font-size: 15px; font-weight: 400; color: #4f4747; font-style: italic} /*VALIDATION*/ div.error,.form-error-message {color: red;font-size: 12px;margin-bottom:0;display: none; text-align: left; margin-top: -5px;} .form .form-control.error{background-color: #fff5f7; background-repeat: no-repeat; background-position: right 15px center; box-shadow: none;s border: 1px solid #df2732;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23df2732' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");} #tcpa_cont { padding-bottom: 25px;} #tcpa_label {font-size: 13px; color: #000; max-width: 590px; margin-top: 25px; margin-left: auto; margin-right: auto; display: block;text-align: justify;} .carrier {font-weight: 600;color: #b7b7b7} .carrier h3 {text-transform: uppercase; font-weight: 400; text-align: center; font-size: 1.125rem; margin-bottom: 1rem} footer{font-size:1rem; color: var(--footertext); background: var(--footer); text-justify: inter-character; text-align: center; padding-bottom: 30px; border-top: solid 1px #e5e7eb; padding-top:30px; } .footer-menu {gap:30px; margin-top: 1rem; margin-bottom: 2rem} .footer-menu a:not(:last-of-type):after{content: " "; display: inline-block; margin: 0 15px; color: var(--footertext); font-size: .9rem} footer .disclosure p{font-size: .7rem; color: black;font-weight: 300} .footer-menu a{color: var(--pg-blue-dark); font-size: 0.813rem} @media (max-width: 768px) { header img {max-width: 200px !important} .progress_box h2 {font-size:1.125rem } .form select.form-control{max-width: 100%!important} .birth > .no-gutter > .col{min-width: 100%} .step-title:not(.last){font-size: 1.625rem} #current_insurer .col{-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .carrier .row {gap:15px !important} } .autocomplete-item { padding: 6px; display: flex; cursor: pointer; font-size: 13px; color: #14274d; align-items: center; border-bottom: 1px solid #ececec; } .autocomplete-item__label { margin-left: 6px; } .loading-text{display:block; width:100%; text-align: center !important} .step-desc{font-size: 1.1em;margin-bottom: 2rem; font-weight:400;text-align: center } #step-zip{padding: 3rem 1rem;background-image: radial-gradient(73.05% 73.05% at 50% 50%, #b8d2fb 0, #3eb0f7);background-repeat: no-repeat; background-size: cover} #step-zip h1{font-size: 2rem; margin-bottom: 2.5rem;} .zip-content{ background-color: #d6e4f4; padding: 1.5625em 1.5em;position: relative; text-align: center; max-width: 430px; border-radius: 0.313rem; margin-left: auto; margin-right: auto} .zip-content .step-title{font-size: 1.125rem;margin-bottom: 1rem; text-align: center; line-height: 1; font-weight: 700; } .btn-text, .btn-arrow span{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E"); background-position: right center; background-repeat: no-repeat; padding-right: 40px;} .carriers{ padding-top: 1.5rem;padding-bottom: 1.5rem; text-align: center; max-width: initial } .carriers h3 {font-size: 1rem!important; text-transform: uppercase; margin-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; color: var(--text);} .howitworks , .testimonials {padding: 3rem 1rem 6rem;background: #eceff3;background-repeat: no-repeat; background-size: cover} .howitworks h1, .testimonials h1{color:var(--pg-text); margin-top: 1rem; margin-bottom: 4rem } .testimonial-box{max-width: 1900px;background: #fff;border-radius: 2rem; margin-left: auto; margin-right: auto; padding: 2rem;} .testimonial { max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .testimonial .quote-pic { width: 250px; border-radius:1rem; } .quote-pic img{border-radius: 1rem; margin-left: auto; margin-right: auto} .quote { flex: 1; } .name { font-weight: bold; } .quote-text{font-size: 1.5rem; margin-bottom: 2rem; text-align: left;color: var(--text);} .quote-name{ color: rgb(51, 51, 51); font-size: 1rem; font-weight: 700; text-align: right;} .quote-name span{display: block} .carousel-control-next-icon, .carousel-control-prev-icon { width: 30px; height: 30px; } .carousel-control-prev-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") } .carousel-control-next-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") } body.on header nav{box-shadow: 0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a} .info-box{ display: flex;max-width: 800px;border:solid 1px var(--pg-succes); border-radius:10px; background: var(--pg-succes-bg); color: var(--pg-success); justify-content: center; gap: 20px; margin: 0 auto 2rem; padding: 1rem; } .two_col.autoInsurers .radio-btn{max-width: 50%!important;flex: 0 0 50%;} .form-group + .form-btns {margin-top:2rem} .hiw_desc{margin-bottom: 4rem} .hiw_box{border: solid 1px #e5e7eb; border-radius: .5rem; background: #fff; padding: 2rem; height: 100%; text-align: center} .hiw_box h3 {font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem} .hiw_box svg {max-width: 100px;display: block;margin-left: auto; margin-right: auto; margin-bottom: 1rem } .hiw_box svg .st0 {color:#073581; stroke-width:5px;} .hiw_box svg .st1 {color: #02baeb; stroke-width:5px;} @media (max-width:768px) { .testimonials h1,.hero h1{font-size: 1.5rem;} .testimonial-box{padding: 2rem 1rem; max-width: calc(100% - 60px)} .testimonial {flex-direction: column} .testimonial .quote-pic{text-align: center} .quote-pic img {max-width: 160px;} .quote-text{text-align: center; font-size: 1rem} .carousel-control-next, .carousel-control-prev{width: auto!important} .carrier-logo .col{max-width: 120px; min-width: 120px;} .formSection fieldset{padding-left: 20px; padding-right: 20px} } @media (max-width:576px) { .two-radio-btn .col, .two-radio-btn .col-6{ flex: 0 0 100%; max-width: 100%;} [id*="incidents"] .radio-btn.col, [id*="tickets"] .radio-btn.col, [id*="education"] .radio-btn.col-6, [id*="occupation"] .radio-btn.col-6, [id*="gender"] .radio-btn.col, [id*="relation"] .radio-btn.col-6, #step-driver_1_gender .radio-btn.col, #step-drivers .radio-btn.col, #step-coverage-length .two_col .col-6, #current_insurer.autoInsurers .col{ flex: 0 0 100%!important; max-width: 100%!important;} .radio-btn.col.apcy { min-width: 100px; max-width: inherit; } } .home-insurance #current_insurer .col{ flex: 0 0 50%!important; max-width:50%!important;} .home-insurance .progress-bar:after{background-image: url("../img/exp6/shield.svg"); background-position:center right -3px} input[name="roof"]~label, input[name="property_type"]~label {height: auto; padding-top: 10px; padding-bottom: 10px;} input[name="property_type"]~label i {display: block; width: 100%; margin-bottom: .5rem} input[name="property_type"]~label i img{ height: 40px!important; object-fit: contain;} input[name="roof"]~label i {display: block; width:calc(100% - 30px); height: 60px; margin-left: auto; margin-right: auto; margin-bottom: .5rem; background-size:150px; position: relative; transition: all .5s linear; border-radius: .5rem} input[name="roof"][value="asphalt"] + label i { background-image: url(../img/exp6/roof-asphalt.jpg) } input[name="roof"][value="tile"] + label i { background-image: url(../img/exp6/roof-tile.jpg) } input[name="roof"][value="metal"] + label i { background-image: url(../img/exp6/roof-metal.jpg) } input[name="roof"][value="wood"] + label i { background-image: url(../img/exp6/roof-wood.jpg) } input[name="roof"][value="other"] + label i { background-color:#d7e0e8; text-align: center; line-height: 60px;font-size: 2rem; color: white; font-style: normal; font-weight: 700 } input[name="roof"][value="slate"] + label i { background-image: url(../img/exp6/roof-slate.jpg) } @media (max-width:576px) { .home-insurance #current_insurer .col{ flex: 0 0 100%!important; max-width: 100%!important;} .howitworks .col {min-width: 100%; margin-bottom: 2rem} } .btn-back{display: flex; height: 50px; align-items: center; gap:5px; justify-content: center} .btn-back {color:#767475!important; font-weight: 500!important} .btn-back:before{content:"";background-position: center ; width: 20px; height: 20px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); }