/* -------------------------- Inner fixed test banner area ----------------------------*/ .inner-fix-text-banner__wraper { padding: 4rem 1.5rem; position: relative; } .banner_for_custom_header { margin-top: 58px; } .inner-fix-text-banner__wraper::before { content: ""; background: url("../../images/vector-bg.svg") no-repeat center center; position: absolute; max-width: 100%; max-height: 100%; width: 100%; height: 88.4rem; margin: auto; left: 0; right: 0; top: -33rem; bottom: auto; z-index: -1; background-size: 100%; } .inner-fix-text-banner__title-wrapper { position: relative; text-align: center; } .inner-fix-text-banner__title-wrapper::before { content: ""; background: url("../../images/banner-bg-mid.png") no-repeat 0 0; background-size: cover; position: absolute; height: 50rem; width: 24rem; max-width: 100%; margin: auto; left: 0rem; right: 0; bottom: 0; z-index: -1; } .inner-fix-text-banner__title { position: relative; font-family: var(--open-sans); font-style: normal; font-weight: 900; font-size: 5rem; line-height: 5rem; text-align: center; letter-spacing: -0.05em; text-transform: uppercase; margin-bottom: 2rem; color: #e31112; z-index: 0; } .inner-fix-text-banner__title:before { position: absolute; content: attr(data-title); font-weight: 900; font-size: 5rem; line-height: 5rem; text-align: center; letter-spacing: -0.05em; text-transform: uppercase; -webkit-text-fill-color: #e31112; -webkit-text-stroke-width: 15px; -webkit-text-stroke-color: #ffffff; filter: drop-shadow(30px 39px 13px rgba(135, 20, 20, 0.25)); z-index: -1; margin: auto; left: 0; right: 0; } .inner-fix-text-banner__title-wrapper .since { text-align: center; padding-bottom: 58px; } .inner-fix-text-banner__title-wrapper .since p { font-family: var(--open-sans); font-style: normal; font-weight: 600; font-size: 12px; line-height: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: #15213d; background: #eaeaea; margin: 0 auto; width: 154px; padding: 5px 0px; margin-bottom: 0; } .inner-fix-text-banner__title-wrapper .since p > span { color: #e31112; right: -7px; letter-spacing: 0.6rem; display: inline-block; position: relative; } @media (min-width: 576px) { .inner-fix-text-banner__title { font-size: 9rem; line-height: 9rem; margin-bottom: 4rem; } .inner-fix-text-banner__title:before { font-size: 9rem; line-height: 9rem; -webkit-text-stroke-width: 30px; } .inner-fix-text-banner__wraper::before { top: -30rem !important; } } @media (min-width: 768px) { .inner-fix-text-banner__wraper { padding: 6rem 1.5rem; } .inner-fix-text-banner__wraper:before { top: -16rem !important; } } @media (min-width: 992px) { .inner-fix-text-banner__wraper::before { top: -43rem !important; } .inner-fix-text-banner__title { font-size: 10rem; line-height: 10rem; } .inner-fix-text-banner__title:before { font-size: 10rem; line-height: 10rem; -webkit-text-stroke-width: 30px; } .banner_for_custom_header { margin-top: 0px; } } @media (min-width: 1200px) { .inner-fix-text-banner__title-wrapper:before { width: 30rem; } } @media (min-width: 1680px) { .inner-fix-text-banner__wraper { padding: 9rem 1.5rem 8.5rem; } .inner-fix-text-banner__wraper::before { width: 1600px; } .inner-fix-text-banner__title { font-size: 12rem; line-height: 11.5rem; margin-bottom: 4rem; } .inner-fix-text-banner__title:before { font-size: 12rem; line-height: 11.5rem; -webkit-text-stroke-width: 30px; } } .inner-fix-text-banner__search-wraper { display: block; text-align: center; margin-top: -10px; } .inner-fix-text-banner__search-form::before { content: ""; position: absolute; background: url("../../images/dotted.png") no-repeat 0 0; background-size: 100%; z-index: -1; width: 100%; height: 40rem; } .inner-fix-text-banner__search-form:after { content: ""; background: url("../../images/dotted.png") no-repeat 0 0; position: absolute; background-size: 100%; z-index: -1; width: 100%; height: 40rem; } .inner-fix-text-banner__search-form { display: flex; flex-direction: column; background: #ffffff; border: 10px solid rgba(165, 165, 165, 0.1); box-shadow: 5px 9px 22px rgba(0, 0, 0, 0.03); border-radius: 3px; max-width: 84rem; margin: auto; position: relative; } .inner-fix-text-banner__search-form input { border: none; padding: 1.5rem; font-size: 1.6rem; line-height: 1.6rem; color: #798388; } .inner-fix-text-banner__search-form input:focus { outline-offset: 0px; outline: var(--secondary-color) auto 1px; } .email_input_group, .zipcode_input_group { position: relative; width: 100%; } input.input-email { width: 100%; border-radius: 0.3rem 0.3rem 0 0; border-bottom: 1px solid #e2e2e2; margin-bottom: 1px; } input.input-zip-code { width: 100%; } .btn-submit { background: #1267e5; border-radius: 0 0 0.3rem 0.3rem; min-width: 15rem; font-family: "Montserrat", sans-serif; color: #fff; font-weight: bold; font-size: 1.6rem; display: flex; align-items: center; text-align: center; text-transform: uppercase; border: none; justify-content: center; padding: 1rem; transition: all 0.5s ease; } .btn-submit:hover { background: #5897f5; } form[name='join-form'] label.error { display: block; text-align: left; font-size: 13px; color: red; margin-left: 12px; } @media (min-width: 768px) { .inner-fix-text-banner__search-form { flex-direction: row; } input.input-email { width: 99%; border-radius: 0.3rem 0 0 0.3rem; border-bottom: none; border-right: 1px solid #e2e2e2; } input.input-zip-code { width: 99%; } .email_input_group { width: 72%; } .zipcode_input_group { width: 25%; } .btn-submit { border-radius: 0 0.3rem 0.3rem 0; } .inner-fix-text-banner__search-form:after, .inner-fix-text-banner__search-form:before { width: 50rem; } form[name='join-form'] label.error { position: absolute; font-size: 14px; color: red; background: #e5e5e5; margin: 0; bottom: -33px; left: 0; line-height: 1; padding: 4px 5px; border-radius: 5px; z-index: 1; text-shadow: 0 0.3px black; } } @media (min-width: 1366px) { .inner-fix-text-banner__search-form input { padding: 2.5rem; } } @media (min-width: 992px) { .inner-fix-text-banner__search-wraper .inner-fix-text-banner__search-form::before { left: 0rem; top: -23rem; } .inner-fix-text-banner__search-form::after { right: 0rem; top: 0rem; } input.input-email { margin-right: 1px; margin-bottom: 0px; } } @media (min-width: 1200px) { .inner-fix-text-banner__search-form::before { left: -32rem; top: -23rem; } .inner-fix-text-banner__search-form::after { right: 0; transform: translateX(50%); top: 0rem; } }