#form-wrapper.newsletter-signup, #form-wrapper.vertical-style { padding-top: 5rem; padding-bottom:5rem; background-position: 50% 0; background-repeat:no-repeat} #form-wrapper {background-color:#101010; padding:3rem 0 3.5rem} #form-wrapper > .container { max-width: 980px; } #form-wrapper h2 { color: #44d62c; letter-spacing: 0.0625rem; text-align:center; text-transform: uppercase; margin-bottom:2rem; font: 600 1.75rem/1.875rem 'RazerF5', Arial, Helvetica, sans-serif; } #form-wrapper h2:empty {margin:0; } #form-wrapper h2 span { font-family: 'roboto'; font-size: 18px; color: #999; font-weight: 300; text-transform: none; line-height: 20px; display: inline-block; margin-top: 12px;} #razer-form { color:#888; text-align:center; font: 300 1rem/normal 'Roboto', Arial, Helvetica, sans-serif;} .nice-select { display:none; } #f_fields { display:grid; margin:0 auto; text-align:left; position: relative; } #f_fields input[type="checkbox"] { visibility:visible; margin-left: 0; } #f_fields input[type="checkbox"]:focus-visible { outline: auto; } #f_fields input[type="text"], #f_fields input[type="email"] { color:#fff; } #f_fields input[type="text"], #f_fields input[type="email"], #f_fields select { display:inline-block; font-size:1rem; padding:5px 10px; width:100%; background-color:#222; border:1px solid transparent; border-radius:3px; color:#999; height:40px; -webkit-appearance: none;} #f_fields select { background-image: url("data:image/svg+xml;utf8,"); background-position: 95% 60%; background-repeat: no-repeat; padding-right: 1.5em;} #f_fields select option { color:#fff; } #country {display:block !important; } #success-msg { } #success-msg, #error-msg {color:#44d62c; margin:0.5rem auto} #f_other p {margin:0; text-align:center; font-size:14px; } #form-wrapper .extra-infos { font-size: 0.875rem } #form-wrapper .extra-infos a { margin-bottom: 10px; display: inline-block; } #f_chkbox label { display:flex; align-items: center; margin-bottom: 0; font-size:14px; cursor:pointer;} #f_chkbox input { margin-right:10px; outline:0; outline-offset: 2px; position:unset; width:unset; height:unset; -moz-appearance:checkbox; } #f_chkbox p { margin-bottom: 0 } #f_cta { text-align:center; } #f_cta img { margin:0 auto;} #btn_submit { height: 2.5rem; min-height: 2.5rem; padding: .725rem 1.625rem; letter-spacing: .05em; } #form-wrapper.newsletter-signup, #form-wrapper.vertical-style {background-color:black} #form-wrapper.newsletter-signup > .container , #form-wrapper.vertical-style > .container {max-width:610px} #form-wrapper.newsletter-signup #f_fields input[type="text"], #form-wrapper.newsletter-signup #f_fields input[type="email"], #form-wrapper.vertical-style #f_fields input[type="text"], #form-wrapper.vertical-style #f_fields input[type="email"], #form-wrapper.newsletter-signup select, #form-wrapper.vertical-style select { height:46px; color:#fff; color:#fff; padding:5px 14px; font-size:1rem; border-color:#888; background-color:rgba(0,0,0,0.5); } #form-wrapper.newsletter-signup option , #form-wrapper.vertical-style option { background-color: #101010 } @media (max-width:767px) { #form-wrapper:not('.newsletter-signup') {background-image:none!important; } .f_item { margin-bottom: 1rem } #f_cta { margin-top:1.1rem} #btn_submit { width: 100% } #f_fields select:invalid { color:#888; } } @media (min-width:768px) { #f_fname { grid-area: fname; } #f_lname { grid-area: lname; } #f_email { grid-area: email; } #f_location { grid-area: location; } #f_cta { grid-area: cta; } #f_chkbox { grid-area: chkbox; } #f_other { grid-area: other; } #f_field1 { grid-area: field1; } #f_fields .show-required-fields-text{ grid-area: frequired; } #f_chkbox label { min-height: 40px; } .default #f_fields {grid-template-columns: repeat(3,1fr); grid-template-areas: 'frequired frequired' 'fname location chkbox' 'lname email cta' 'other other other'; gap: 20px 40px; } .default #f_cta button { width: 100% } .vertical-style #f_fields { grid-template-areas: 'frequired frequired' 'fname fname' 'email email' 'field1 field1' 'chkbox chkbox' 'cta cta' 'other other'; gap: 0 15px; } .vertical-style #f_location, .vertical-style #f_field_2 {display:none!important} .newsletter-signup #f_fields { grid-template-areas: 'frequired' 'email' 'location' 'chkbox' 'cta' 'other'; gap: 0; } .vertical-style .f_item, .newsletter-signup .f_item{ margin-bottom: 1rem } .vertical-style #f_chkbox label, .newsletter-signup #f_chkbox label { min-height: auto;} .horizontal-2col #f_fields { grid-template-areas: 'frequired frequired' 'fname lname' 'location email' 'chkbox chkbox' 'cta cta' 'other other'; gap: 0 40px; grid-template-columns: repeat(2,1fr);} .horizontal-2col .f_item { margin-bottom: 2rem } .vertical-style #f_cta, .horizontal-2col #f_cta { margin-bottom: 0.5rem; margin-top: 1rem } #f_other.f_item { margin-bottom: 0; } #form-wrapper select:invalid {color:#888} #form-wrapper.newsletter-signup select:invalid , #form-wrapper.vertical-style select:invalid {color:#777} } #f_fields .show-required-fields-text:before{ color: inherit; display: inline-block; margin: 5px 0; height: 1em; font-size: 12px; position: absolute; right: 0; top: -30px; white-space: nowrap; } html:not(.razer-rtl) #f_fields .show-required-fields-text:before{ left: 0; right: auto; } [lang|="en"] #f_fields .show-required-fields-text:before {content: "* Required fields";} #f_fields .show-required-fields-text.no-translate:before {content: "* Required fields";} [lang="zh-CN"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* 必填字段";} [lang="zh-HK"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* 必填欄位";} [lang="zh-TW"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* 必填欄位";} [lang|="fr"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* Champs obligatoires";} [lang|="de"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* Erforderliche Felder";} [lang|="it"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* Campi obbligatori";} [lang|="ja"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* 必須項目";} [lang|="ko"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* 필수 필드";} [lang|="es"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* Campos obligatorios";} [lang|="pt"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* Os campos obrigatórios";} [lang|="ar"] #f_fields .show-required-fields-text:not(.no-translate):before {content: "* الحقول المطلوبة";}