html { scroll-behavior: smooth; } .lead .wpcf7-form-control.wpcf7-submit { cursor: pointer; } .lead .wpcf7-form input:invalid { outline: 1px red solid; } .file-upload { display: inline-block; padding: 10px 10px; border: 1px solid; margin-right: 1em; cursor: pointer; text-align: center; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; word-wrap: break-word; max-width: 20em; } .file-upload:hover { background-color: #ececec; } .lead .wpcf7-form input[type="file"].overwritten { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* style used for screenreaders - same as bootstrap */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .lead { display: -ms-grid; display: grid; -ms-grid-columns: auto 40px 1fr 40px 1fr; grid-template-columns: auto 1fr 1fr; -ms-grid-rows: auto 0px auto 0px auto; grid-template-rows: auto auto auto; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "lead-image lead-content lead-content" "lead-image lead-form lead-form" ". . ."; margin: 30px 0 !important; padding: 40px 20px; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } .lead-image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: lead-image; } .lead-content { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 3; grid-area: lead-content; margin-bottom: 20px; } .lead-form { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; grid-area: lead-form; position: relative; } .lead .wpcf7-form-control.wpcf7-submit { outline: none !important;box-shadow: none !important;padding: 11px 40px 13px 40px; width: 161px; height: 48px; background: #FD1929; border-radius: 8px; border: none; color: #fff; font-size: 18px; margin-left: 24px; -webkit-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .lead form.submitting .wpcf7-form-control.wpcf7-submit { color: transparent; } .lead-content h3 { font-weight: 700; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #000000; } .lead-content p { font-weight: 400; font-size: 18px; line-height: 22px; color: #000000; } .lead-form input[name="your-email"] { width: 343px; height: 48px; border: 1px solid #DBDBDB; border-radius: 8px; line-height: 44px; height: auto; padding: 0 20px; color: #000; } .lead-form ::-webkit-input-placeholder { color: #848484; } .lead-form ::-moz-placeholder { color: #848484; } .lead-form :-ms-input-placeholder { color: #848484; } .lead-form ::-ms-input-placeholder { color: #848484; } .lead-form ::placeholder { color: #848484; } .lead-image img { height: 120px; width: auto; margin: 0 !important; } .lead .wpcf7 form:not(.sent) div.wpcf7-response-output { display: none !important; } .lead form { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; position: relative; } .lead form label { position: relative; height: 48px; } .lead form label input + span { position: absolute; top: calc(100% + 15px); font-size: 12px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .lead form:not(.submitting) .wpcf7-spinner { display: none; } .lead .c-form-sidebar__submit.uk-margin { margin: 0 !important; } .lead form.submitting .wpcf7-spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .lead .wpcf7 form.sent .wpcf7-response-output { position: absolute; top: 0; bottom: -1px; border-radius: 8px; left: 0; right: auto; margin: 0; width: 576px; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 20px; } @media (max-width: 860px) { .lead form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .lead form label { margin-top: 30px } .lead-form input[name="your-email"] { width: 100%; max-width: calc(100% - 42px); } .lead .wpcf7 form.sent .wpcf7-response-output { width: 100%; max-width: 450px; top: 30px; } } @media (max-width: 600px) { .lead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; margin: 15px 0 !important; padding: 20px 20px; } .lead-image { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: 20px auto 0 !important; } .lead-content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .lead-form { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .lead .c-form-sidebar__submit.uk-margin { margin: 0 auto !important; } .lead form label { margin-top: 15px; } .lead form { gap: 15px; } .lead .wpcf7 form.sent .wpcf7-response-output { top: 15px; } .lead .wpcf7 form.failed label, .lead .wpcf7 form.invalid label, .lead .wpcf7 form.unaccepted label { margin-bottom: 8px; } .lead-form input[name="your-email"] {text-align: center;}}