.headline { font-size: 3.4rem; color: #f6416f; font-weight: 500;}
.sub-headline { color: #54008f; font-style: italic; }
h2 { font-size: 2.8rem; font-weight: 300; }
h3 { font-size: 2.2rem; font-weight: 300; line-height: 1.6; }

.page { position: relative; }
.page:before { content: ''; opacity: 0.3; position: absolute; width: 100%; height: 100%; background: url(./../images/bg-texture.webp) top right no-repeat; background-size: cover; transform: scaleX(-1); }

.optin-wrap { max-width: 1200px; margin: 0 auto; display: flex; height: 100%; gap: 30px; justify-content: center; }
.optin { max-width: 780px; width: 100%; position: relative; z-index: 0; flex-grow: 1; padding: 20px 0 20px 20px; }
.optin-bg { width: 910px; background: url(./../images/woman-back-pain.webp) top center no-repeat; background-size: auto 100%; background-clip: content-box; margin-right: -500px; position: relative; flex-shrink: 0; }

#step-1, #step-2 { width: 100%; flex-shrink: 0; }
#step-1.hide { animation: slideOut 0.4s ease-in-out forwards; position: absolute; overflow: hidden; }
#step-2 { display: none; }
#step-2.show { animation: slideIn 0.5s ease-in-out forwards; display: block; }

.opt-in-btn { display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 2.2rem; max-width: 395px; width: 100%; padding: 10px; border: none; outline: none; color: #333; background: #ffffff; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; line-height: 1.4; cursor: pointer; position: relative; z-index: 0; transition: 0.3s ease-in-out; }
.opt-in-btn > span:last-child { display: flex; align-items: center; justify-content: center; margin-left: -28px; opacity: 0; transition: all 0.5s ease; }
.opt-in-btn svg {  width: 32px; height: 32px; fill: #f6416f; margin-top: -2px; }
.opt-in-btn:before { content: ''; background: linear-gradient(45deg, #FF0000, #FF7000, #FF00FE, #3FF4EB, #9E00FF, #00BEFF, #FF00DD, #FF0000); position: absolute; top: -1px; left:-1px; background-size: 400%; z-index: -1; filter: blur(2px); width: calc(100% + 2px); height: calc(100% + 2px); animation: glowing 20s linear infinite; opacity: 1; transition: opacity .3s ease-in-out; }
.opt-in-btn:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #ffffff; left: 0; top: 0; }

.opt-in-btn:hover > span:last-child { margin-left: 0; opacity: 1; }

.emailbox { max-width: 395px; width: 100%; font-size: 2.2rem; padding: 12px 15px; margin: 0; position: relative; z-index: 8; border: 3px solid #fff; box-shadow: 0px 0px 3px 0px #ababab; background: #f7f7f7; box-sizing: border-box; display: block; }

.w-680 { max-width: 680px;  }
.w-600 { max-width: 600px;  }
.w-580 { max-width: 580px;  }
.w-480 { max-width: 480px;  }
.w-450{ max-width: 450px;  }

.pink { color: #f6416f; }
.purple { color: #54008f; }

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes slideOut {
    0% { opacity: 1; transform: translateX(0); }
    99% { opacity: 0; transform: translateX(-50%); width: 100%; }
    100% { opacity: 0; transform: translateX(-100%); width: 0%; }
}

@keyframes slideIn {
    0% { opacity: 0; transform: translateX(60%); }
    99% { opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 2300px) {
    .optin-wrap { max-width: 100%; overflow: hidden; }
    .optin-bg { width: 740px; margin-right: 0; background-size: cover; }
    .optin-wrap { justify-content: flex-end; }
}
@media screen and (max-width: 1700px) {
    .optin-bg { width: 640px; }
}
@media screen and (max-width: 1400px) {
    .optin-bg { width: 520px; }
}
@media screen and (max-width: 1000px) {
    #step-1 { padding: 0; }
    .optin-wrap { position: relative; }
    .optin { max-width: 520px; width: 100%; margin-left: auto; margin-right: auto; position: relative; z-index: 1; padding: 0 15px; }
    .opt-in-btn svg {  margin-top: -1px; }
    .optin-bg { position: absolute; width: 100%; left: 0; top: 0; height: 100%; opacity: 0.15; background-size: cover; z-index: 0; }
    .page:before { display: none; }
}
@media screen and (max-width: 1000px) {
    .headline { font-size: 2.6rem; }
    h2, .sub-headline { font-size: 2.2rem; }
    h3 { font-size: 1.8rem; }
    .emailbox { font-size: 1.8rem; }
    .opt-in-btn svg { width: 30px; height: 30px; }
    .opt-in-btn { font-size: 1.8rem; padding: 7px; }
}