header .brand-logo{ width:13.3rem; height:auto; padding:1.5rem 0; } .top-promo{ background-color: #1D4321; padding:.5rem 0; position: sticky; top:0; z-index:1; } .top-promo-btn{ background:transparent; border:0; color: #B5F25B; text-align: center; font-family: Arial; font-size: 1rem; font-weight: 700; line-height: normal; text-transform: uppercase; padding:0; } .top-promo-btn .details{ color: var(--Text-text-White, #FFF); text-align: center; font-family: Arial; font-size: 0.75rem; font-weight: 400; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; text-transform: lowercase; } .hero{ padding-top:1.5rem; background-color:#FFFAF1; margin-bottom:1rem; } .hero .lead-in{ width:15.9375rem; height:auto; text-align: center; margin-bottom:1.5rem; } .hero h1{ color: #1D4321; font-family: Korolev; font-size: 3.5rem; font-weight: 900; text-transform: uppercase; text-align: center; margin-bottom:.5rem; } .hero h1 span{ display: block; font-size: 2rem; } .hero h2{ color: #1D4321; text-align: center; font-size: 1.375rem; line-height: 1.3; margin-bottom: 2.5rem; } .hero .bonus-free{ position: relative; padding: var(--Numbers-Spacing-16-px, 1rem); justify-content: space-between; align-items: flex-start; border-radius: var(--Numbers-Radius-Standard, 0.25rem); border: 1px solid var(--Colors-Brand-Dark-Green, #006B00); width:100%; margin-bottom:1.5rem; max-width:36.5rem; } .hero .on-border{ color: #1D4321; text-align: center; font-family: Korolev; font-size: 1.5rem; font-style: italic; text-transform: uppercase; position: absolute; top:-1.3rem; left:50%; transform: translateX(-50%); } .hero .on-border span{ background-color:#FFFAF1; padding: 0 1rem; } .hero .free{ color: #1D4321; text-align: center; font-family: Korolev; font-size: 1.375rem; line-height: 1; text-transform: uppercase; } .hero .free:nth-of-type(2){ margin-left:.5rem; } .hero .savings{ color: #1D4321; text-align: center; font-family: Korolev; font-size: 1.375rem; font-weight: 900; line-height: 1; margin-bottom:1.5rem; } .hero .savings span{ background-color: #B5F25B; padding:.25rem; } .hero .burst{ height: 7.5rem; width: 7.5rem; background-color: #1D4321; border-radius: 50%; padding:.75rem 0 0; position: absolute; bottom:4rem; right:5.5rem; } .hero .burst p{ font-size:2.25rem; line-height: 1; } .hero .burst p span{ font-size:1.25rem; } .quote1{ margin-bottom:1.5rem; } .quote1 .card{ background-color:#FFEDB9; display: flex; padding: var(--Numbers-Spacing-16-px, 1rem) var(--Numbers-Spacing-12-px, 0.75rem) var(--Numbers-Spacing-32-px, 2rem) var(--Numbers-Spacing-12-px, 0.75rem); justify-content: center; align-items: center; gap: var(--Numbers-Spacing-16-px, 1rem); border:0; } .quote1 img{ width:10.125rem; } .quote1 h3{ font-family: Korolev; font-size: 1.25rem; font-weight: 900; } .quote1 .qt-txt{ font-family: Korolev; font-size: 1.375rem; } .quote1 .claim{ font-family: Korolev; font-size: 1.25rem; font-weight: 900; line-height: 1; } .protein{ margin-bottom:3rem; } .protein h2{ color: #1D4321; font-size: 1.625rem; font-weight: 900; line-height: 1.1; } .protein h3{ color: #1D4321; font-size: 1.375rem; line-height: 1.3; } .protein h4{ color: var(--Text-text-brand_color, #006B00); font-size: 1.5rem; } .protein .img{ max-width:35.5rem; } .conv{ margin-bottom:1.5rem; } .conv h2{ color: #1D4321; font-size: 1.625rem; font-weight: 900; margin-bottom:1.5rem; } .conv .icon{ margin-bottom:.75rem; } .conv .icon-row p{ font-family: Korolev; font-size: 1.375rem; } .conv .card-wrap { overflow: auto; margin-bottom: 3.5em; } .conv .card { width: 16.5em; height: auto; flex-shrink: 0; border:0; } .conv .claim{ padding: .75rem .5rem; border-radius: var(--Numbers-Radius-2x, 0.5rem); background: #1D4321; color:#fff; } .conv .claim p{ font-family: Korolev; font-size: 1.125rem; } .conv .claim h4{ font-size: 1.25rem; font-weight: 900; line-height: 1.2; } .cust, .act{ margin-bottom:1.5rem; } .cust h2{ color: #1D4321; font-size: 1.875rem; font-weight: 900; margin-bottom:1.5rem; } .cust .quote{ display: flex; padding: 1rem 1rem 1.5rem 1rem; flex-direction: column; align-items: center; gap: 1.5rem; border:0; margin-bottom:1rem; } .cust .quote.lori{ border-radius: 0.5rem; border-bottom: 4px solid #DFA500; background: #FFEDB9; text-align: center; } .cust .qt-txt{ font-family: Korolev; font-size: 1.375rem; line-height: 1.3; } .cust .lost{ font-family: Korolev; font-size: 1.375rem; font-weight: 900; line-height: 1; } .cust .quote-body{ width:75%; margin:0 auto; } .cust .claim{ display: flex; flex-direction: row; padding: 1rem 1rem 1.5rem 1rem; align-items: center; gap: 1.5rem; border:0; justify-content: center; margin-bottom:1rem; } .cust .claim img{ width:6rem; height:auto; } .cust .claim.one{ border-radius: 0.5rem; border-bottom: 4px solid var(--Text-text-brand_color, #006B00); background: var(--Colors-Accent-Accent-Tea-Green, #CEEBB8); } .cust .claim.two{ border-radius: 0.5rem; border-bottom: 4px solid #0D4054; background: #D0F2FF; text-align: center; } .cust .claim.three{ border-radius: 0.5rem; border-bottom: 4px solid #DFA500; background: #FFEDB9; margin-bottom:0; } .cust .claim h4{ font-size: 2.125rem; font-weight: 900; } .cust .quote.melissa{ display:none; } .act h2{ color: #1D4321; text-align: center; font-size: 1.875rem; font-weight: 900; line-height: 1.1; margin-bottom:1.5rem; } .disclaimer{ margin-bottom:4.5rem; } .faq{ background-color:#FFFAF1; padding:2rem 0 3rem; } .faq h2{ text-align: center; font-size: 1.625rem; font-weight: 700; } .faq .accordion-button{ color: var(--Colors-Grays-Dark-Gray, #5D6669); font-family: Korolev; font-size: 1.125rem; font-weight: 500; line-height: 1.2; } .faq .accordion-button:focus { z-index: 3; border-color: #eff6e4; outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 107, 0, .25); background-color: #eff6e4; } .faq .accordion-button:not(.collapsed) { background-color: #eff6e4; } .info-lp-footer{ padding:1.5rem 0; } .info-lp-footer .brand-logo{ width:13.3rem; height:auto; margin-bottom:2rem; } .info-lp-footer .links a{ color: var(--Text-text-primary, #29353A); font-size: 0.6875rem; } .info-lp-footer .vr { opacity: 1; } .info-lp-footer p{ color: var(--Text-text-primary, #29353A); font-size: 0.625rem; } @media(max-width:330px){ .hero .burst{ bottom:3rem; } } @media(min-width:576px){ .top-promo-btn{ text-align:left; } .hero .burst { bottom: 8rem; right: 11rem; } } @media(min-width:768px){ .top-promo-btn{ margin:0 auto; font-size:1.125rem; } .hero .free { font-size: 2rem; } .hero .on-border { font-size: 2rem; top: -1.7rem; left: 50%; transform: translateX(-50%); } .hero .bonus-free { padding: 1.25rem 3rem; } .hero .burst { bottom: 12rem; right: 17rem; } .protein .info-txt{ order:2; } .protein .img{ order:1; } .protein .cta{ order:3; } .protein .info-txt, .protein .img{ width:48%; } } @media(min-width:992px){ header .brand-logo { width: 21.75rem; padding: 1.5rem 0; } .hero { padding-top: 2rem; margin-bottom: 2rem; } .hero .lead-in { width: 18.875rem; } .hero h1 { font-size: 6rem; } .hero h1 span { font-size: 2.875rem; } .hero h2 { font-size: 1.75rem; } .hero .savings { font-size: 2.875rem; margin-bottom:2rem; } .hero .bonus-free { margin-bottom:2rem; } .btn-default{ font-size:1.75rem; padding:.75rem auto; } .hero .burst { height: 10.4375rem; width: 10.4375rem; padding: .75rem 0 0; bottom: 17rem; right: 20rem; } .hero .burst p { font-size: 3.5rem; } .hero .burst p span { font-size: 1.75rem; } .quote1 { margin-bottom: 3rem; } .quote1 h3 { font-size: 1.375rem; } .quote1 .qt-txt, .quote1 .claim { font-size: 1.75rem; } .protein h2 { font-size: 2.875rem; } .protein h3 { font-size: 1.75rem; } .protein h4 { font-size: 1.75rem; } .protein .info-txt p{ font-size:1.125rem; } .conv h2{ font-size: 2.875rem; margin-bottom:3rem; } .conv .icon-row p { font-size: 1.75rem; } .conv .claim p, .conv .claim h4 { font-size: 1.75rem; } .cust h2, .act h2 { font-size: 2.875rem; margin-bottom: 3rem; } } @media(min-width:1200px){ .hero { background:url(/media/ns/info-lp/herobg-dt.webp)#FFFAF1 no-repeat top center; background-size: cover; padding:2rem 0 4rem; } .hero .burst { bottom: 22rem; right: 2rem; } .quote1 .card { padding: 1.5rem 4rem 2rem; gap:2rem; } .cust .claim { height:100% } .cust .quote { flex-direction: row; margin-bottom: 1.5rem; } .cust .quote.keishia { flex-direction: column; } .cust .quote.melissa { flex-direction: row-reverse; } .cust .quote-body { width: 13.4375rem; flex-shrink: 0; } .cust .quote.melissa { border-radius: 0.5rem; border-bottom: 4px solid #0D4054; background: #D0F2FF; text-align: center; } .cust .quote.keishia { border-radius: 0.5rem; border-bottom: 4px solid #1D4321; background: #CEEBB8; text-align: center; justify-content: center; height:100%; margin-bottom:0; } .cust .qt-txt, .cust .lost { font-size: 1.875rem; } .cust .card.claim p{ font-size:1.125rem; } .cust .quote.melissa{ display:flex; margin-bottom:0; } .conv, .cust { margin-bottom: 3rem; } .disclaimer{ margin-bottom:3rem; } } @media(min-width:1440px){ .hero .burst { bottom: 22rem; right: 4rem; } .conv .card { width: 16.875em; } } @media(min-width:1920px){ .hero { background-size: contain; } }