:root{ --base: #252b31; --text: #525f6f; --text2: #6a748b; --blue: #3262ff; --dblue: #051634; --grey: #d7e0e8; --green: #0aa937; } 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} body { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.428571429; color: var(--base); background-color: #fff; 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; } .top-banner{background: var(--blue); color:white; padding: .5rem; text-align: center; } .top-banner { position:relative; left: 0; right: 0; width: 100%; transition: all 0.5s; font-weight: 400 } .top-banner b {font-weight: 800} header{ background: #fff; max-width: 100%; padding:0; z-index: 999; position: relative; -moz-box-shadow:0 0 16px rgba(23,31,43, .2); -webkit-box-shadow:0 0 16px rgba(23,31,43, .2); box-shadow:0 0 16px rgba(23,31,43, .2); position: relative;} .header-txt{font-size:16px;font-weight:500;text-align:right; color: #444;} nav {max-width: 1140px;} .call-now{background: var(--dblue); display: flex; flex-direction: row;align-items:center; font-weight: 600; font-size: 1.25rem; color: #fff;border-radius: 30px; padding: 4px 14px;} .phone-icon{background: var(--blue);; width: 20px; height:20px; transform: scale(2.2,2.2); border-radius: 20px;position: absolute;margin-left: -10px; } .phone-icon svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} .call-now span{padding-left: 25px;} .hero_image img{height: 300px; object-fit: cover; width: 100%; border-radius: .75rem; overflow: hidden;} .formSec{ background-color: #f3f5f7; background-repeat: no-repeat; overflow: hidden; position: relative; padding-right: 15px; padding-left: 15px; padding-bottom: 2rem; padding-top: 2rem; transform-style: preserve-3d; padding-bottom:10rem } .formSec:after{content: ""; width: 100%; height: 60%; background: rgb(255,255,255); z-index: 2; background: linear-gradient(0deg, rgba(243,245,247,0) 10%, rgba(243,245,247,1) 100%); display: block; position: absolute; left: 0; right: 0; top: auto; bottom: 0;transform: translateZ(-1px); z-index: -1 !important;} .formSec:before{content: ""; width: 100%; height: 60%; display: block;position: absolute; left: 0; right: 0; top: auto; bottom: 0; background-image: url("../img/hero.jpg"); background-size: 50%; opacity: .08; transform: translateZ(-1px); z-index: -1 } .formSec > .container {max-width: 1200px;} .content{padding-right: 2rem} .col-content h1{ font-family: 'Merriweather', sans-serif; font-size: 2.8rem; font-weight: 900; margin-bottom: 1rem} .col-content h3 {color:var(--blue);font-size: 1.125rem;font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem} .col-content h5 {color: var(--text); font-size: 1.5rem;font-family: 'Merriweather', sans-serif; font-style: italic; font-weight: 400;margin-bottom:1rem} .widget ul li {font-size: 1.25rem;font-weight: 600; position: relative; padding-left: 35px;} .widget ul li:before, .widget ul li:after {content:""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%)} .widget ul li:before{ background-image:url("data:image/svg+xml,%3Csvg height='30px' width='30px' version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' fill='%233262ff'%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg%3E%3Cpath class='st0' d='M469.402,35.492C334.09,110.664,197.114,324.5,197.114,324.5L73.509,184.176L0,254.336l178.732,222.172 l65.15-2.504C327.414,223.414,512,55.539,512,55.539L469.402,35.492z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: contain; width: 25px;height: 25px;margin-top: -4px;margin-left: 4px; background-position: center; background-repeat: no-repeat } .widget ul li:after{content:""; display: block; width: 25px; height: 25px; background: #3262ff42; border-radius: 50%; } #widget-mob .widget{max-width: max-content; margin: 2rem auto 0; padding: 0 1rem} .widget ul li:not(:last-of-type){margin-bottom: 1rem;} .form_box{background: #fff; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); border-radius: 5px;min-height: 200px; padding: 1.5rem; position: relative; border: solid 2px var(--grey) } .form fieldset:not(:first-of-type) { display: none; } .form_box-question{ font-family: 'Merriweather', sans-serif; font-weight: 700;font-size: 1.25rem;margin-bottom: 1rem;} .col-form{max-width: 550px;} .form fieldset .form_box-question:not(:first-of-type){margin-top: 2rem} .form .form-control{font-size: 16px;line-height:50px; padding:0 15px; font-weight:500;border: solid 1px (--grey); -webkit-border-radius: 0; -moz-border-radius: 0;border-radius: 0;} .form .form-control:active,.form .form-control:focus{border-color: var(--base)} .form .form-control.valid{border-color: var(--blue);outline: 0; } .form .form-btn{font-style:normal;font-weight:700;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-size:20px;letter-spacing:.8px;position:relative;text-transform:uppercase;transition:all .15s linear;width:100%;border: none; background-color: #ff7d00; border-color: #ff7d00; color: #fff; padding:15px 0; background:-webkit-linear-gradient(90deg,#ff6100 0,#ff8900 100%);background:-moz-linear-gradient(0deg,#ff6100 0,#ff8900 100%);background:linear-gradient(0deg,#ff6100 0,#ff8900 100%);background-position:50% 50%;-webkit-background-origin:padding-box;background-origin:padding-box;-webkit-background-clip:border-box;background-clip:border-box;-webkit-background-size:auto auto;background-size:auto auto; border:none; border-bottom: solid 2px #e14e00;} .form .form-btn:active,.form .form-btn:focus,.form .form-btn:hover{outline: 0; transform: translateY(-2px); box-shadow: 0 10px 10px -5px #00000040;} .form .btn.btn-next 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"); padding-right: 30px; background-position: right center; background-repeat: no-repeat} .progress_box{margin-bottom: 1.5rem} .progress{border-radius: 0; height: 7px; } .progressbar-title{color: var(--base); font-weight: 600; font-size: .75rem; text-transform: uppercase;} .progressbar-title strong{color: var(--blue); float: right} .progress-bar {background-color: var(--blue)} div.error,.form-error-message {color: red;font-size: 12px;margin-bottom:0;display: none; text-align: center} .radio-btns label{font-size: 1rem; font-weight: 700; color: var(--text)} .radio-btns label {cursor: pointer;display: block;position: relative; transition: all .15s linear; white-space: nowrap;font-weight: 700; display: flex; flex-direction: row; align-items: center; line-height: 1; } .radio-btns label:before { content:" ";background-color: #fff;pointer-events: none;height: 24px;width: 24px; max-width: 24px; transition: border ease .15s; display: block; border-radius:50%;border: 1px solid var(--grey); } .radio-btns label span{padding-left:.75rem} .radio-btns input:checked~label:before {background:var(--blue);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='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 16px; background-repeat: no-repeat; background-position: center; border-color: var(--blue); border-width: 2px;} .address_string {margin-top: .5rem ; 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='%23525f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); padding-left: 20px; background-position: center left; background-repeat: no-repeat; background-size:1rem;} .property_type, .materials {margin-left: -5px; margin-right: -5px;} .property_type > [class*="col-"], .materials .col {padding-left: 5px; padding-right: 5px;} .property_type label, .materials label {white-space: normal; cursor: pointer; display: block; border: 1px solid var(--grey); width: 100%; text-align: center; box-shadow: -5px 5px 0 #dbdbe878; text-align: center; padding-top: .25rem; padding-bottom: .25rem; font-weight: 600; font-size: .75rem} .materials label i {display: block; width:calc(100% - 10px); height: 50px; margin-left: auto; margin-right: auto; margin-bottom: .25rem; background-size:200px; position: relative; transition: all .5s linear;} .materials label i:before{content:""; width: 100%; height: 100%; display: block; position: absolute; background-color:white; 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='%233262ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); transition: all .5s linear; opacity: 0; background-repeat: no-repeat; background-position: center; background-size: 40px} input[name="material"][value="asphalt"] + label i { background-image: url(../../img/exp5/material-asphalt.jpg) } input[name="material"][value="clay"] + label i { background-image: url(../../img/exp5/material-clay.jpg) } input[name="material"][value="metal"] + label i { background-image: url(../../img/exp5/material-metal.jpg) } input[name="material"][value="wood"] + label i { background-image: url(../../img/exp5/material-wood.jpg) } input[name="material"][value="other"] + label i { background-color:var(--grey); text-align: center; line-height: 50px;font-size: 2rem; color: white; } input[name="material"][value="slate"] + label i { background-image: url(../../img/exp5/material-slate.jpg) } .property_type input:checked~label, .materials input:checked~label{border-color: var(--blue); border-width: 2px; color: var(--blue)} .materials input:checked~label i:before{opacity: 1} .num_windows{border: solid 1px var(--grey); border-radius: 5px;box-shadow: -5px 5px 0 #dbdbe878; overflow: hidden} .num_windows .col:not(:last-child){border-right: solid 1px var(--grey)} .num_windows label {width: 100% ;text-align: center; line-height: 50px; font-weight: 600; color: var(--text); transition: all .3s ease; cursor: pointer} .num_windows input:checked~label {background: var(--blue); color: #fff;} .property_type label i {display: block} .property_icon {fill: none;stroke: var(--text);stroke-linecap: round;stroke-linejoin: round;stroke-width: 1px; width: 40px; height: auto} .property_icon circle {fill: #fff;} .property_type input:checked~label svg {stroke: var(--blue);} .checkbox label:before , .radio-btns label:before , .form .form-control, .materials label{box-shadow: -5px 5px 0 #dbdbe878;} .time{display: flex; margin-left: auto; margin-right: auto; justify-content: center; font-weight: 500; font-size: .75rem; align-items: center; margin-top: 1rem} .time span{padding-left: 10px;} .time:before{content: ""; width: 20px; height: 20px; max-width: 20px; max-height: 20px; 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' class='injected-svg'%3E%3Cpath d='M2 22H13C17.9706 22 22 17.9706 22 13C22 8.02944 17.9706 4 13 4C8.36745 4 4.49744 7.50005 4 12' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M18.5 5.5L19.5 4.5M5.5 4.5L6.5 5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M16.5001 9.00003L13.5608 11.9394M13.5608 11.9394C13.2893 11.6679 12.9143 11.5 12.5001 11.5C11.6717 11.5 11.0001 12.1716 11.0001 13C11.0001 13.8285 11.6717 14.5 12.5001 14.5C13.3285 14.5 14.0001 13.8285 14.0001 13C14.0001 12.5858 13.8322 12.2108 13.5608 11.9394Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M12.5 3.5V2' stroke='%23000' stroke-width='1.5' stroke-linecap='round' strokeload-linejoin='round'%3E%3C/path%3E%3Cpath d='M10.5 2H14.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M2 15H5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M2 19H7' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E"); background-size: 100%; background-repeat: no-repeat} .checkbox label {display: inline-block;padding-left: 30px;position: relative;width: 100%; line-height:24px; cursor: pointer;font-weight: 400 !important} .checkbox label:before { content:" ";background-color: #fff; border: 1px solid #dcdcdc; pointer-events: none;height:24px;width:24px; -webkit-transition: border ease .15s; -o-transition: border ease .15s; transition: border ease .15s; display: block; position: absolute; left: 0;border-radius:2px;} .checkbox input:checked~label:before {border-colorvar(--blue); background-color:var(--blue); 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='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 16px; background-position: center ; background-repeat: no-repeat;} .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; } #step-loader h2{font-family: 'Merriweather', sans-serif; font-weight: 700} #step-loader .headline{margin-bottom: 2rem ;text-align: center} #step-loader .headline p {font-size: 1.5rem; } .loader{max-width: max-content; margin: 1rem auto 0} .loading_box{background: white; box-shadow: 0px 4px 20.37px 0.63px rgba(84, 110, 122, 0.43); padding: 2rem; border-radius: .5rem; max-width: 800px; margin-left: auto; margin-right: auto;} .loader svg{width: 30px; height: 30px; color: var(--grey) ; margin-top: 6px;} .loader li {display: flex;position: relative; margin-bottom: 1rem; align-items: center; } .loader-text{text-align: left; color: var(--grey); font-weight: 400; padding-left: 1rem} .loader-icon{width: 50px; height: 50px; min-width: 50px; min-height: 50px; text-align: center ; border: solid 2px var(--grey) ; border-radius: 50%; position: relative} .loader-text h5 {font-weight:700; font-size: 1.5rem; color: var(--grey);} .loader li.active .loader-icon{border-color: var(--blue)} .loader li.active .loader-icon:before{content:""; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; border: solid 2px var(--blue); animation: ping 1s cubic-bezier(0,0,.2,1) infinite} .loader li.active .loader-text h5{color: var(--blue)} .loader li.active .loader-text p{color: var(--text)} .loader li.active .loader-icon svg {stroke:var(--blue); } .loader li.done .loader-text h5, .loader li.done .loader-text p{color: var(--base)} .loader li.done .loader-icon{ background-color: var(--grey)} .loader li.done .loader-icon svg {stroke:var(--base); fill:var(--grey)!important } .loader svg {stroke:var(--grey); stroke-width:6px; stroke-linecap: round; fill:none } #load_map, .construction-hat-base{fill:#fff;} .loader li.active #load_map-pin {animation: load_map 1000ms linear infinite normal forwards; position: relative; } .loader li.active #load_map-circ { animation: load_map-circ 1000ms linear infinite normal forwards; } .loader li.active .load_construction-body { animation: construction-body 1000ms linear infinite normal forwards; } .loader li.active #load_construction-head { animation: load_construction-head 1000ms linear infinite normal forwards; } .loader li.active .load_construction-head-ro{ animation: load_construction-head-ro 1000ms linear infinite normal forwards; transform-origin : center center; } .loader li.active .construction-hat-line{animation: construction-hat-line 1000ms linear infinite normal forwards;} .loader li.active #loader-price {animation: loader-price 1000ms linear infinite normal forwards;} .loader li.active .loader-price-target {animation: loader-price-target 1000ms linear infinite normal forwards; transform-origin: center center; } .loader li.active .loader-price-symb {animation: loader-price-symb 1000ms linear infinite normal forwards; transform-origin: center center; } .loader li.active #load_wrench { animation: load_wrench 1000ms linear infinite normal forwards;transform-origin: top right -5px;} .last_step {justify-content: center} .last_step .col-content{order:1; background: var(--blue); border-top-right-radius: .5rem;border-bottom-right-radius: .5rem; max-width: 450px; color: white; text-align: center; padding-top: 3rem; padding-right: 2rem; padding-left: 2rem} .last_step .col-form{ border-top-left-radius: .5rem;border-bottom-left-radius: .5rem;} .last_step .form_box{border: none;} .last_step .label {font-family: 'Merriweather', sans-serif; font-weight: 700; margin-bottom: .5rem} .last_step-title {display: flex; justify-content: center; font-size: 1.275rem; margin-bottom: 2rem; border-bottom: solid 2px var(--grey); padding-bottom: .5rem; font-family: 'Merriweather', sans-serif; gap:15px;} .last_step-title:before { content: 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=\'%233262ff\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M12 5v13M5 12l7 7 7-7\'/%3E%3C/svg%3E'); display:block; animation: shake-vertical 3s ease-in infinite alternate both; } .last_step .col-content h2 {font-family: 'Merriweather', sans-serif; font-weight: 900; margin-bottom: .5rem} .last_step .col-content p {font-weight: 600} footer {padding: 25px 0; font-size: 14px; line-height: 20px; color:var(--base); background: var(--grey);} footer .small {font-size: 11px; line-height: 1.4; margin-top: 25px;} footer li a {color: var(--blue); } footer .copy {margin-bottom: 25px;} footer .copy a {color:white} .search-box{width: 100px; margin-left: auto; margin-right: auto} .arrow-box {width: 90px; margin-left: -60px; position: absolute; left: 0; top: 0; animation:rotateBox 2s linear alternate infinite; } #arrow{ fill:none; stroke:var(--blue); stroke-linecap: round;stroke-miterlimit:12;stroke-width: 6px; } #arrow path{ stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-arrow 5s linear infinite ; } /* nav.on .navbar-brand{margin-left: auto; margin-right: auto} .formSec.on .container{max-width:720px;} .formSec.on form{border-radius: 30px; padding: 40px 30px;}*/ .form-control::-webkit-input-placeholder { color: #969fab; font-weight: 500;} .form-control::-moz-placeholder { color: #969fab; font-weight: 500;} .form-control:-ms-input-placeholder { color: #969fab; font-weight: 500;} .form-control::-ms-input-placeholder { color: #969fab; font-weight: 500;} .form-control::placeholder { color: #969fab; font-weight: 500;} .form-control:-ms-input-placeholder {color: #969fab; font-weight: 500;} .form-control:-ms-input-placeholder { color: #969fab; font-weight: 500;} .form-control::-ms-input-placeholder { color: #969fab; font-weight: 500;} #tcpa_cont { padding-bottom: 25px;} #tcpa_label {font-size: 12px; color: #000; font-weight: 300; max-width: 590px; margin-top: 50px; margin-left: auto; margin-right: auto; display: block;text-align: justify;}*/ footer { font-size: 14px; line-height: 20px; color:#000; padding-top: 50px; padding-bottom: 2rem} footer .small {font-size: 11px; line-height: 1.4; margin-top: 25px; text-align: justify} footer li a {color: #3262ff; } footer .copy {margin-bottom: 25px;} footer .copy a {color:#3262ff;} .no-gutter {margin-left: -5px!important; margin-right: -5px!important;} .no-gutter > .col, .no-gutter > [class*="col-"] { padding-right: 5px!important; padding-left: 5px!important; } .grad{ background: -webkit-linear-gradient(0deg, #3262ff 0, #893be8 100%), -webkit-linear-gradient(-180deg, #3262ff 0, #893be8 100%); background: -moz-linear-gradient(90deg, #3262ff 0, #893be8 100%), -moz-linear-gradient(270deg, #3262ff 0, #893be8 100%); background: linear-gradient(90deg, #3262ff 0, #893be8 100%), linear-gradient(270deg, #3262ff 0, #893be8 100%); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; } @media (min-width:980px){ } @media (max-width: 768px) { .formSec{padding: 0 } .formSec > .container {padding: 0} .formSec:before{ background-size: 200%;} .col-content{min-width: 100%; text-align: center} .col-content h1 {font-size: 1.75rem} .header-txt{display: none} .col-content h3{display: none} .arrow-box{right: 0; left: auto; margin-left: 0; margin-top: -90px; margin-right: -40px;} #arrow{transform: rotate(100deg);} .col-content h5 {font-size: 1rem} .content{padding: 0} .navbar{padding: 0} .navbar-brand img {height: 25px;} .materials label i{height: 25px; background-size: cover} input[name="material"][value="other"] + label i {line-height: 25px; font-size: 1rem} .form fieldset .form_box-question:not(:first-of-type) {margin-top: 1rem} .radio-btns label {font-size: .95rem; margin-bottom: .5rem} .radio-btns label:before {width: 20px; height: 20px;} .hero_image img{height: 150px; border-radius: .25rem} .radio-btns input:checked~label:before {background-size: 13px;} .widget ul li {font-size: 1rem} form fieldset:first-of-type, #step-loader{padding: 1rem} #step-loader h2 {font-size: 1.25rem} #step-loader .headline p{font-size: .75rem} .loading_box {padding-top: 1rem; padding-bottom: 1rem} .loader-text h5 {font-size: 1rem} .loader-text {font-size: .75rem} .last_step-title{display: none} .last_step .col-content{order: initial; border-radius: 0; padding-bottom: .5rem; padding-top: .5rem} .last_step .col-content h2 {font-size: 1.25rem} .col-content h4 {font-size: 1rem} .last_step .col-content p {font-size: .75rem; font-weight: 400} svg#confetti-icon {height: 50px!important;} .widget{display: none} } @media (max-width: 576px) { .materials .col{min-width: 65px; margin-bottom: .5rem; max-width: 33.333333%; flex: 0 0 33.333333%;} .col-content h1 {font-size: 1.25rem; margin-bottom: .5rem} .col-content h5 {font-size: .75rem} .form_box-question{font-size: 1rem} .form_box{padding-top: 1rem} } .v2 header{background: #f3f5f7; box-shadow: none} .v2 .fieldset_cont{background: #fff; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); border-radius: 0; border: solid 2px var(--grey); border-radius: 5px; overflow: hidden} .v2 .formSec {padding-top: 0} .v2 .content {padding-right: 0!important} .v2 .col-content{background-size: cover; background-position: center top; max-width: 500px;} .v2 .content{display: flex; flex-direction: column; justify-content: end; height: 100%} .v2 .col-form{max-width:initial !important} .v2 .col-form .form_box{max-width: 550px; margin-left: auto; margin-right: auto} .v2 .widget{background: var(--blue); padding: 2rem 1.5rem} .v2 .widget ul li {color:white} .v2 .widget ul li:before{ background-image:url("data:image/svg+xml,%3Csvg height='30px' width='30px' version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' fill='%23ffffff'%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg%3E%3Cpath class='st0' d='M469.402,35.492C334.09,110.664,197.114,324.5,197.114,324.5L73.509,184.176L0,254.336l178.732,222.172 l65.15-2.504C327.414,223.414,512,55.539,512,55.539L469.402,35.492z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 20px; margin-top: 0; } .v2 .widget ul li:after{display: none!important} .form_box{background: #fff; box-shadow: none; border-radius: 5px;min-height: 200px; border:none } .v2 .arrow-box{display: none} .v2 .headline{text-align: center; margin-bottom: 2rem} .v2 .headline p {font-size: 1.5rem; color: var(--blue)} .v2 fieldset:first-of-type .form_box-question:first-of-type span{display: block; font-weight: 400; color: var(--gray); font-size: 1.125rem; } .v2 .progress{height: 4px;} .v2 #step-loader .headline{margin-top: 2rem} @media (max-width: 768px) { .v2 .widget{display: block!important} .v2 .widget ul li{text-align: left} .v2 .headline{padding-left: 1rem; padding-right: 1rem} .v2 .headline h1 {font-size: 1.8rem} .top-banner {font-size: 0.75rem} .v2 .headline p {font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 400} .v2 form fieldset{padding-left: 0 !important; padding-right: 0!important; padding-bottom: 0} .v2 .fieldset_cont{border: none;border-radius: 0} .v2 form fieldset:first-of-type .form_box-question:first-of-type{display: none} .v2 form fieldset:last-of-type .headline{display: none;} .v2 .loading_box{max-width: calc(100% - 40px)} .v2 #step-loader .headline{margin-top: 0} } @media (max-width: 768px) { .v2 .headline h1 {font-size: 1.25rem} .v2 .headline p {letter-spacing: 1px; text-transform: capitalize} } .v3 .progress_box {margin-bottom: .5rem} .v3 .progress_box p {font-size: 0.813rem; color: var(--text2); font-weight: 500;text-align: center; margin-top: .5rem; text-transform: capitalize} .progress_list {list-style-type: none;margin: 0 auto;padding: 0 ;display: flex;justify-content: center;width: calc(100% + 3rem); margin-left: -1.5rem} .progress_list li {width: 100%;font-size: 0px;height: 7px;background-color: var(--grey)} .progress_list li:nth-child(3){width: 1px;margin-right: 0!important} .progress_list li.active {background-color: var(--blue);} .progress_list li:not(:last-child) {margin-right: 5px;} .progress_list li.done{background-color: var(--green);} .progress_list li.active {box-shadow: 0 0 10px var(--main);} .v3 .form-head{width: 100%; position: relative; z-index: 9;} .v3 .form-head h5 {margin-left: auto; display: block; width: 100%; max-width: 450px; background: rgba(0,0,0,0.5); color: #fff;; text-align: center; padding:.5rem; border-radius: 5px; margin-bottom: 1rem} .v3 .form_box{padding-top: 0!important; overflow: hidden; min-width: 450px; box-shadow: 0px 1px 20px rgb(0 0 0 / 52%);max-width: 450px; } .v3 .form-container{background: var(--blue); display: flex; justify-content: end; padding: 2rem; border-radius: 10px;position: relative;overflow: hidden; z-index: 99; flex-wrap: wrap;} .v3 .form-container:before, .v3 .form-container:after {content: "";position: absolute;left: 0;right: 0; bottom: 0;top: 0;width: 100%;height: 100%; transform-style: preserve-3d;} .v3 .form-container:before{ background: linear-gradient(90deg, rgba(50,98,255,0.5) 40%, #3262ff 60%); } .v3 .form-container:after{z-index: -1; transform: translateZ(-1px); opacity: 1; background-repeat: no-repeat; background-size: cover} .v3.roofing .form-container:after{background-image:url('../img/exp7/roofing.webp'); background-position: center left -370px} .v3.windows .form-container:after{background-image:url('../img/exp7/windows.jpg'); background-position: center left -370px} .v3.bathroom .form-container:after{background-image:url('../img/exp7/bathroom.jpeg'); background-position: center left -370px} .v3 .arrow-box{display: none} .v3 .headline{margin-bottom: 1rem} .v3 .headline h1 {font-weight: 900; color: var(--text)} .v3 .form_box-question {font-size: 1rem} .v3 h2.form_box-question {font-size: 1.5rem; text-align: center} .v3 br {width: 100%; content: "";display: block; background: var(--grey); height: 5px; margin-bottom: 1.5rem; max-width: 80px; margin-bottom: 1rem; margin-left: auto; margin-right: auto} .v3 .form-btns:before, .v3 .form-group:after{content: "";display: table;clear: both;margin-bottom: .5rem;} .v3 .form-btns:before{margin-bottom:1rem} .v3 .form fieldset .form_box-question:not(:first-of-type){margin-top: 1.5rem} .v3 #formSec.on .form-container{justify-content: center; background: none;} .v3 #formSec.on .form-container:before, .v3 #formSec.on .form-container:after {display: none} .v3 #formSec.on .form_box{width: 100%; max-width: 800px;box-shadow: 0 5px 20px rgb(0 0 0 / 10%); padding-bottom: 3rem} .v3 #formSec.on fieldset{max-width: 500px; margin-left: auto; margin-right: auto} .v3 #formSec.on .form-head{display: none} .v3 #formSec.on .topHead, .v3 #formSec.on .mobHead{display: none} .v3 .form_box-question.last{font-weight: 800; font-size: 1.5rem; text-align: center; margin-bottom: .5rem; color: var(--blue)} .v3 .form_box-desc{text-align: center; font-weight: 500; font-size: 1.125rem; margin-bottom: 1rem} .v3 .loading_box{box-shadow: none} .v3 #step-loader .headline{margin-top: 1rem} .v3 #formSec.on ~ section { display: none; } .v3 .mobHead h1{color: white!important; font-weight: 700; font-size: 2rem!important; margin-bottom:0!important} .v3 .mobHead.headline{margin-bottom: 0!important} section.content{padding-top: 3rem; padding-bottom: 3rem; position: relative; } section.content h2{margin-bottom: 2rem} section.content p:not(:first-of-type){margin-top: 1rem} .feature{text-align: center} .feature i{display: block; height: 69px;background-size: auto 69px; margin-bottom: 1rem; background-position: center;background-repeat: no-repeat;} .feature h5 {margin-bottom: 1rem; max-width: 260px; margin-left: auto; margin-right: auto; font-weight:600} .feature i.wallet { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='wallet' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67.52 66.85'%3E%3Cline x1='17.65' y1='64.85' x2='44.04' y2='2' style='fill: none; stroke: %23cbd6ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpolygon points='47.33 30.24 40.87 37.48 47.33 44.73 65.52 44.73 65.52 30.24 47.33 30.24' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M32.07,13.55H6.14c-2.29,0-4.14-1.85-4.14-4.14h0c0-2.29,1.85-4.14,4.14-4.14h29.95' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M49.36,5.28h5.03c1.43,0,2.59,1.16,2.59,2.59v5.69h-10.41' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M2,9.42v44.21c0,4.3,3.49,7.79,7.79,7.79h2.13' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M56.99,13.55h2.65c1.43,0,2.59,1.16,2.59,2.59v14.1' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M62.23,44.73v14.09c0,1.43-1.16,2.59-2.59,2.59H26.67' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Ccircle cx='49.9' cy='37.35' r='1.26' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3C/svg%3E"); } .feature i.clock {background-image: url("data:image/svg+xml,%3Csvg id='clock' data-name='clock' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.02 69'%3E%3Cpath d='M42.56,26.57l-8.45,8.45c-.65-.65-1.56-1.04-2.47-1.04-1.95,0-3.51,1.56-3.51,3.51s1.56,3.51,3.51,3.51,3.51-1.56,3.51-3.51c0-.91-.39-1.82-.91-2.47' style='fill: none; stroke: %23cbd6ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Ccircle cx='31.51' cy='37.49' r='29.51' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='8.11' y1='37.49' x2='10.71' y2='37.49' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='52.31' y1='37.49' x2='54.91' y2='37.49' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='31.51' y1='58.29' x2='31.51' y2='60.89' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='16.82' y1='52.18' x2='15' y2='54' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='48.15' y1='54' x2='46.33' y2='52.18' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='16.82' y1='22.8' x2='15' y2='20.98' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M47.24,21.89c-4.03-4.03-9.49-6.5-15.6-6.5' style='fill: none; stroke: %23cbd6ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='10.71' y1='16.56' x2='7.46' y2='13.44' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='55.69' y1='13.44' x2='52.44' y2='16.56' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='31.51' y1='7.98' x2='31.51' y2='2' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='26.18' y1='2' x2='36.97' y2='2' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='5.25' y1='15.91' x2='10.06' y2='11.1' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='57.9' y1='15.91' x2='53.09' y2='11.1' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3C/svg%3E");} .feature i.pig { background-image: url("data:image/svg+xml,%3Csvg id='pig' data-name='pig' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70.93 69'%3E%3Cpath d='M31.4,58.49v8.51h-3.87c-1.81,0-3.35-1.55-3.35-3.35v-4.64c0-.26-.13-.52-.39-.52-3.35-1.03-9.93-9.16-9.93-18.96,0-7.61,5.16-17.8,17.67-20.89' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M48.3,12.7c2.71-1.55,5.8-2.06,9.16-1.68.26,0,.39.13.52.39s0,.52-.26.64c-3.1,2.45-4.38,5.55-4.13,8.9,0,.26.26.64.52.77,3.74,2.19,6.84,5.55,9.03,10.96.13.39.52.64.9.64h1.55c1.81,0,3.35,1.55,3.35,3.35v4.64c0,1.81-1.55,3.35-3.35,3.35h-.9c-.39,0-.77.26-.9.64-1.81,6.19-5.67,10.58-11.09,13.41v8.12h-3.74c-1.81,0-3.35-1.55-3.35-3.35v-5.93' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cline x1='31.4' y1='61.97' x2='45.46' y2='61.97' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M14.64,33.47h-4.9c-2.71,0-4.64-3.35-4.64-5.29,0-1.81,1.42-3.35,3.35-3.35s3.35,1.42,3.35,3.35-1.55,3.22-3.35,3.22H2' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Ccircle cx='52.56' cy='29.73' r='1.42' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Ccircle cx='38.5' cy='11.8' r='9.8' style='fill: none; stroke: %23cbd6ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3Cpath d='M30.89,23.92c5.16-1.03,10.19-1.16,15.22,0' style='fill: none; stroke: %233262ff; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 4px;'/%3E%3C/svg%3E"); } .testi-hero img{box-shadow: -15px 19px 0 #dbdbe878; border-radius: 10px; overflow: hidden; object-fit: cover} .content.about{max-width: 1200px; margin-left: auto; margin-right: auto; border-radius: 1rem; margin-bottom: 2rem; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); } .about:before{content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.5) 20%, rgba(255,255,255,1) 50%);} .roofing .about{background-image: url("../img/exp8/about-roof.jpg"); background-size:auto 250%; background-repeat: no-repeat; background-position:left -300px } .windows .about{background-image: url("../img/exp7/about-windows-2.jpeg"); background-size:60%; background-repeat: no-repeat;background-position: left center} .bathroom .about{background-image: url("../img/exp7/about-bathroom-2"); background-size:60%; background-repeat: no-repeat;background-position: left center} @media (max-width: 768px) { .v3 .form_box{min-width: initial !important; max-width: 100%} .v3 .form-container{border-radius: 0; justify-content: center; padding-left: 1rem; padding-right: 1rem} .v3 .form-head h5{margin-left: auto; margin-right: auto; padding: 0; background: none} .v3 .topHead {display: none} .v3 .mobHead{display: block!important} .v3 .form-container:before{background: linear-gradient(360deg, rgba(50, 98, 255, 0.5) 60%, #3262ff 100%);} .v3 .widget{display: block!important;margin-bottom: 2rem} .content.about{border-radius: 0; margin-bottom: 0; padding-top: 250px; background-size: 100% auto; background-position: top center} .about:before{background:linear-gradient(180deg, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 1) 80%)!important} } @media (max-width: 576px) { .v3 .materials .col{max-width: 33.333333%!important; } .v3 fieldset {padding: 0!important;} .v3 h2.form_box-question {font-size:1.125rem} } svg#confetti-icon #b1,svg#confetti-icon #b2,svg#confetti-icon #b3,svg#confetti-icon #b4,svg#confetti-icon #b5{animation:1.2s ease-out infinite confb}svg#confetti-icon #c1,svg#confetti-icon #c2,svg#confetti-icon #c3,svg#confetti-icon #c4{animation:1.2s ease-out infinite confc}svg#confetti-icon #d1,svg#confetti-icon #d2,svg#confetti-icon #d3{animation:1.2s ease-out infinite confd}svg#confetti-icon{animation-fill-mode:infinite;height:150px;width:auto}svg#confetti-icon .conf0{fill:#002CB9}svg#confetti-icon .conf1{fill:#ef3c8a}svg#confetti-icon .conf2{fill:#fff}svg#confetti-icon .conf3{fill:#6287ff}svg#confetti-icon .conf4{fill:#3cbecd}svg#confetti-icon .conf5{fill:#813bbe}svg#confetti-icon .conf6{fill:#00ff00}svg#confetti-icon .conf7{display:none;fill:none;stroke:#000000;stroke-miterlimit:10}svg#confetti-icon .conf8{fill:none;stroke:#f9b732;stroke-width:9;stroke-linecap:round;stroke-miterlimit:10}svg#confetti-icon .confetti-cone{transform-origin:200px 50px;animation:1.2s infinite confetti-cone1}svg#confetti-icon #yellow-strip{fill:none;stroke:#00ff00;stroke-width:9;stroke-linecap:round;stroke-miterlimit:10;animation:1.2s infinite confdash}svg#confetti-icon #a2{transform-origin:310.9px 241px;animation:1.2s ease-out infinite confa}svg#confetti-icon #a1{transform-origin:276px 246px;animation:1.2s ease-out infinite confa}svg#confetti-icon #b1{transform-origin:195.2px 232.6px}svg#confetti-icon #b2{transform-origin:230.8px 219.8px}svg#confetti-icon #b3{transform-origin:222.8px 190.6px}svg#confetti-icon #b4{transform-origin:262px 188.5px}svg#confetti-icon #b5{transform-origin:282.3px 170.6px}svg#confetti-icon #c1{transform-origin:174.8px 183.4px}svg#confetti-icon #c2{transform-origin:178.9px 156.2px}svg#confetti-icon #c3{transform-origin:206.7px 140px}svg#confetti-icon #c4{transform-origin:213.5px 120.2px}svg#confetti-icon #d1{transform-origin:127px 176px}svg#confetti-icon #d2{transform-origin:133px 118px}svg#confetti-icon #d3{transform-origin:152px 100px} @keyframes load_wrench{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0,0,0.58,1)}24%{transform:rotate(10.827828deg);animation-timing-function:cubic-bezier(0,0,0.58,1)}85%{transform:rotate(-10.206403deg);animation-timing-function:cubic-bezier(0,0,0.58,1)}100%{transform:rotate(0)}}@keyframes loader-price-symb{0%,60%{transform:scale(1,1)}50%{transform:scale(1.5,1.5);stroke-width:4px}}@keyframes loader-price-target{28%,74%{transform:rotate(0)}50%{transform:rotate(-73.14124deg)}}@keyframes loader-price{0%{transform:translateY(0);animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95)}50%{transform:translateY(10%);animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95)}100%{transform:translateY(0)}}@keyframes construction-hat-line{0%,100%,24%,76%{transform:translateX(0)}34%,63%{transform:translateX(-7%)}}@keyframes load_construction-head-ro{0%,100%,76%{transform:rotate(0)}23%,50%{transform:rotate(15deg)}}@keyframes load_construction-head{0%{transform:translateY(-5%)}50%{transform:translateY(0)}100%{transform:translateY(-10%)}}@keyframes construction-body{0%,100%{transform:translate(0)}76%{transform:translate(2px,-5%)}}@keyframes load_map-circ{0%,100%,50%,74%{transform:translateY(0)}62%{transform:translateY(-8px)}}@keyframes load_map{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-15%)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes rotateBox{0%{transform:rotate(10deg)}100%{transform:rotate(-10deg)}}@keyframes draw-arrow{0%{stroke-dashoffset:1000}100%,99.99%{stroke-dashoffset:0}}#arrow polyline{stroke-dasharray:200;stroke-dashoffset:200;animation:5s linear infinite draw-polyline}@keyframes draw-polyline{0%,5%{stroke-dashoffset:200}100%{stroke-dashoffset:0}} @keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}20%,40%,60%{-webkit-transform:translateY(8px);transform:translateY(8px)}80%{-webkit-transform:translateY(6.4px);transform:translateY(6.4px)}90%{-webkit-transform:translateY(-6.4px);transform:translateY(-6.4px)}}@keyframes confetti-cone1{0%{transform:translate(40px,95px) rotate(45deg) scale(1,1)}15%{transform:translate(10px,145px) rotate(45deg) scale(1.1,.85)}100%{transform:translate(40px,105px) rotate(45deg) scale(1,1)}}@keyframes confd{0%{opacity:.7;transform:translate(-20px,20px) rotate(0)}18%{opacity:1;transform:translate(-5px,-10px) rotate(60deg)}76%{opacity:1;transform:translate(-8px,-18px) rotate(180deg)}100%{opacity:0;transform:translate(-10px,-23px) scale(.5) rotate(230deg)}}@keyframes confc{0%{opacity:.7;transform:translate(-30px,20px) rotate(0)}18%{opacity:1;transform:translate(5px,-10px) rotate(60deg)}76%{opacity:1;transform:translate(13px,-18px) rotate(180deg)}100%{opacity:0;transform:translate(17px,-23px) scale(.5) rotate(230deg)}}@keyframes confa{0%{opacity:0;transform:translate(-30px,20px) rotate(0)}15%{opacity:1;transform:translate(25px,-10px) rotate(60deg)}80%{opacity:1;transform:translate(33px,-18px) rotate(180deg)}100%{opacity:0;transform:translate(37px,-23px) scale(.5) rotate(230deg)}}@keyframes confdash{0%,2%{stroke-dasharray:1000;stroke-dashoffset:500;transform:translate(-30px,30px);opacity:0}35%{stroke-dasharray:1000;stroke-dashoffset:900;transform:translate(-2px,0);opacity:1}85%{stroke-dasharray:1000;stroke-dashoffset:1000;transform:translate(1px,-5px);opacity:1}90%{stroke-dashoffset:1000;stroke-dashoffset:1000;transform:translate(2px,-8px);opacity:0}100%{stroke-dashoffset:1000;stroke-dashoffset:500;transform:translate(2px,-8px);opacity:0}}@keyframes confb{0%{opacity:0;transform:translate(-30px,20px) rotate(0)}12%{opacity:1;transform:translate(25px,-10px) rotate(60deg)}76%{opacity:1;transform:translate(33px,-18px) rotate(180deg)}100%{opacity:0;transform:translate(37px,-23px) scale(.5) rotate(240deg)}}