.hs-richtext { font-family: "Brix Sans Light", Arial, sans-serif; text-transform:none; font-size: 19px; line-height: 30px; color:#666; marign:25px 0px; } .hs-input { display: inline-block !important; min-width: 100% !important; } /* Form Field */ body .hs-form-field { margin-bottom: 15px; } /* Descriptions */ body .hs-field-desc { } /* Labels */ .hbspt-form label { display: inline-block !important; min-width: 150px !important; font-family: 'Brix Sans Black', arial !important; font-size: 12px; line-height: 16px; letter-spacing: 0.12em; color: #000; text-transform: uppercase; margin-bottom: 20px; } .input { display: inline-block; width: calc(100% - 150px); } body label.hs-form-booleancheckbox-display span { font-family: 'Brix Sans Light', arial; text-transform: none; font-size: 18px; color: #666; letter-spacing: 0; width: calc(100% + 92px); } label.hs-form-booleancheckbox-display { width: 100%; } body .hs-form-field > label { } /* One Line Inputs */ .hs-fieldtype-textarea label { float: left; margin-top: 5px; } input.hs-input, .legal-consent-container input[type="text"], .legal-consent-container input[type="password"], .legal-consent-container input[type="datetime"], .legal-consent-container input[type="datetime-local"], .legal-consent-container input[type="date"], .legal-consent-container input[type="month"], .legal-consent-container input[type="time"], .legal-consent-container input[type="week"], .legal-consent-container input[type="number"], .legal-consent-container input[type="email"], .legal-consent-container input[type="url"], .legal-consent-container input[type="search"], .legal-consent-container input[type="tel"], .legal-consent-container input[type="color"], .legal-consent-container input[type="file"], body textarea { font-family: "Brix Sans Light", Arial, sans-serif; font-size: 19px; width: 100%; height: 48px; padding: 13px 19px 12px; margin: 0; color: #000; background-color: transparent; background-image: none; border: 1px solid #aeb6bb; outline: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } body select { display: inline-block; width: 100%; height: 48px; margin: 0; padding: 0 55px 0 20px; color: #000; background-color: transparent; border: 1px solid #aeb6bb; border-radius: 0; cursor: pointer; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Brix Sans Black", arial; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; line-height: 48px; white-space: nowrap; } input.hs-input:focus, .legal-consent-container input[type="text"]:focus, .legal-consent-container input[type="password"]:focus, .legal-consent-container input[type="datetime"]:focus, .legal-consent-container input[type="datetime-local"]:focus, .legal-consent-container input[type="date"]:focus, .legal-consent-container input[type="month"]:focus, .legal-consent-container input[type="time"]:focus, .legal-consent-container input[type="week"]:focus, .legal-consent-container input[type="number"]:focus, .legal-consent-container input[type="email"]:focus, .legal-consent-container input[type="url"]:focus, .legal-consent-container input[type="search"]:focus, .legal-consent-container input[type="tel"]:focus, .legal-consent-container input[type="color"]:focus, .legal-consent-container input[type="file"]:focus, body textarea:focus, body select:focus { box-shadow: 0 0 5px #156c9c; } .legal-consent-container input[type="file"], body select { font-size: 12px; } .hs-fieldtype-select select option { font-family: 'Brix Sans Medium'; } ::placeholder { color:#ced2d5; font-size:21px; } /* Placeholder Text */ ::-webkit-input-placeholder { /* Webkit Browsers */ /* color: #555; color:#ced2d5; font-size:21px; opacity: 1; */ } :-moz-placeholder { /* Firefox 18- */ /* color: #555; color:#ced2d5; font-size:21px; opacity: 1; */ } ::-moz-placeholder { /* Firefox 19+ */ /* color: #555; color:#ced2d5; font-size:21px; opacity: 1; */ } :-ms-input-placeholder { /* IE10 */ /* color: #555; color:#ced2d5; font-size:21px; opacity: 1; */ } /* Separate Styles for Multiple Line Inputs */ body textarea { min-height: 200px; } body textarea:focus { } /* Separate Styles for Drop Downs */ body select { margin-bottom: 8px; } body select:focus { } /* Multiple Selection Inputs */ body form.hs-form .hs-form-field ul.inputs-list { list-style: none; padding: 0; } body form.hs-form .hs-form-field ul.inputs-list li input { } /* ========================================================================== Radios & Checkboxes ========================================================================== */ .legal-consent-container [type="radio"]:checked, .legal-consent-container [type="radio"]:not(:checked), .legal-consent-container [type="checkbox"]:checked, .legal-consent-container [type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } .legal-consent-container [type="radio"]:checked + span, .legal-consent-container [type="radio"]:not(:checked) + span { position: relative; padding-left: 82px; cursor: pointer; line-height: 60px; display: inline-block; } .legal-consent-container [type="checkbox"]:checked + span, .legal-consent-container [type="checkbox"]:not(:checked) + span { position: relative; padding-left: 72px; cursor: pointer; display: inline-block; margin: 28px 0px 0px; font-family: 'Brix Sans Light'; font-size: 18px; line-height: 28px; text-transform: none; padding-top: 7px; } .legal-consent-container [type="radio"]:checked + span:before, .legal-consent-container [type="radio"]:not(:checked) + span:before, .legal-consent-container [type="checkbox"]:not(:checked) + span:before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; background: #ced2d5; } .legal-consent-container [type="checkbox"]:checked + span:before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border: 14px solid #ced2d5; background: #fff; box-shadow: 0 0 5px #156c9c; } .legal-consent-container [type="radio"]:not(:checked) + span:after { content: ''; width: 20px; height: 20px; background: #fff !important; position: absolute; top: 14px; left: 14px; border-radius: 100%; } .legal-consent-container [type="checkbox"]:not(:checked) + span:after { content: ''; width: 20px; height: 20px; background: #fff !important; position: absolute; top: 14px; left: 14px; } .legal-consent-container [type="radio"]:checked + span:after { content: ''; width: 8px; height: 8px; background: #000; position: absolute; top: 14px; left: 14px; border-radius: 100%; border: 6px solid #fff; } .legal-consent-container [type="checkbox"]:checked + span:after { content: ''; width: 12px; height: 12px; background: url("https://cdn2.hubspot.net/hubfs/2936738/cd/check.png") no-repeat; background-size: contain; position: absolute; top: 19px; left: 18px; } .legal-consent-container [type="radio"]:not(:checked) + span:after, .legal-consent-container [type="radio"]:checked + span:after,.legal-consent-container [type="checkbox"]:not(:checked) + span:after, .legal-consent-container [type="checkbox"]:checked + span:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* don't display the radio-button and checkbox label */ .hs-fieldtype-checkbox label span, .hs-fieldtype-select label, .hs-fieldtype-radio label span { display: none; } /* Radio Button Label fix*/ .hs-fieldtype-radio, .hs-fieldtype-checkbox .input ul li { margin-left: -150px; } /* Required */ .legal-consent-container input:focus:required:invalid, .legal-consent-container textarea:focus:required:invalid, .legal-consent-container select:focus:required:invalid { color:#e01b22; } .legal-consent-container input:focus:required:invalid:focus, .legal-consent-container textarea:focus:required:invalid:focus, .legal-consent-container select:focus:required:invalid:focus { } .legal-consent-container input.invalid.error { border: 1px solid #e01b22; } ul.hs-error-msgs > li > label, .hs-fieldtype-text label span > input.invalid.error { color: #e01b22; } /* ========================================================================== Button ========================================================================== */ .legal-consent-container input[type="submit"], .legal-consent-container input[type="button"], .hs-button, input[type="submit"].hs-button.primary.large { text-decoration: none; height: 48px; font-size: 12px; line-height: 12px; letter-spacing: 0.12em; font-family: "Brix Sans Black", Arial, sans-serif; padding: 0 20px; padding-right: 46px; color: #fff; background: url("https://cdn2.hubspot.net/hubfs/2936738/cd/arrow.png") no-repeat #000; background-position: 87% center; background-size: 16px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; position: relative; overflow: hidden; border: 0; outline: 0; cursor: pointer; text-transform: uppercase; transition: -webkit-box-shadow 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition: -moz-box-shadow 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); transition: box-shadow 0.15s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-box-shadow 0.15s cubic-bezier(0.39, 0.575, 0.565, 1); } body .hs-button.primary:hover, .legal-consent-container input[type="submit"]:hover, .legal-consent-container input[type="button"]:hover, .hs-button:hover, .input[type="submit"].hs-button.primary.large:hover, .hs-button.primary:focus, .legal-consent-container input[type="submit"]:focus,.legal-consent-container input[type="button"]:focus, .hs-button:focus, .input[type="submit"].hs-button.primary.large:focus { -webkit-box-shadow: inset 0px -4px 0px 0px rgba(255,255,255,0.4); -moz-box-shadow: inset 0px -4px 0px 0px rgba(255,255,255,0.4); box-shadow: inset 0px -4px 0px 0px rgba(255,255,255,0.4); } .hs_submit.hs-submit{ text-align:right; } /* ========================================================================== GDPR ========================================================================== */ .legal-consent-container { margin-bottom: 20px; width: 100%; } .legal-consent-container [type="checkbox"]:checked + span, [type="checkbox"]:not(:checked) + span { font-size: 19px !important; } .hs-form-required { color: #e01b22 !important; } /* ========================================================================== Mobile ========================================================================== */ @media screen and (max-width:736px) { .hbspt-form label { display: block !important; width: 100%; } .legal-consent-container input, .input { display: block !important; width: 100%; } }