@media only screen and (min-width: 1171px) {
  #ContentWrapper:has(#chameleonBanner.normal) [id$="paginationLinks"] {
    position: relative;
    left: calc(-76% * 0.032);
  }
  #ContentWrapper:has(#chameleonBanner.wide) [id$="paginationLinks"] {
    position: relative;
    left: calc(-76% * 0.074);
  }
}

#chameleonBanner {
  /* Begin editable */

  --promo-color: #92c03c;
  --discount-text-color: #92c03c;
  --promo-text-color: #fff;
  --brand-text-color: #303030;
  --banner-bg-color: #1cb8d1;

  --banner-bg: url("/images/LPA/chameleon_bg_q1.jpg");
  --banner-bg-wide: url("/images/LPA/chameleon_bg_bogo_q1.jpg");
  --accent-bg: url("/images/LPA/chameleon_accent_q1.png");
  --accent-mm-bg: url("/images/LPA/chameleon_accent_mm_q1.png");

  /*--badge-banner-bg-img: url("/images/lpa/summer_cyber.jpg");*/
  --badge-banner-background-placement: unset;
  --badge-banner-bg-color: #2b3531;
  --badge-promo-bg-color: #92c03c;
  --badge-discount-text-color: #fff;
  --badge-brand-text-color: #fff;
  --badge-badge-font: normal min(17px, 1.8vw) / 1.3 "Edu SA Beginner", cursive;
  --badge-badge-text-transform: none;
  --badge-badge-text-color: #fff;
  --badge-promo-text-color: #fff;
  --badge-badge-border: none;
  /*--accent-mm-bg: url("/images/LPA/chameleon_accent_mm_jan24.png");*/

  /* End editable */

  --banner-discount-font-size: min(56px, 5vw);
  --banner-brand-font-size: min(30px, 3vw);
  --banner-brand-font-size_f1: min(20px, 1.65vw);
  --banner-bg-placement: 50% 95%;
  --banner-bg-size: cover;
  --accent-placement: 97.5% 20%;
  --accent-size: 6.5%;
  --promo-font-size: min(18px, 1.6vw);
}

[id="chameleonBanner"] {
  background: var(--accent-bg) no-repeat var(--accent-placement) /
      var(--accent-size),
    var(--banner-bg) no-repeat var(--banner-bg-placement) /
      var(--banner-bg-size);
  box-sizing: border-box;
  height: min(130px, 12.69vw);
  margin-bottom: 4px;
  max-height: 130px;
  overflow-y: hidden;
  padding: 0 12%;
  position: relative;
  width: 100%;
}

[id="chameleonBanner"].burst {
  background: var(--banner-bg) no-repeat var(--banner-bg-placement) /
    var(--banner-bg-size);
}

[id="chameleonBanner"].badge {
  /* background: var(--banner-bg-color) var(--badge-bg) no-repeat var(--badge-bg-placement);*/
  background: var(--badge-banner-bg-color);
  padding: 0 8%;
}

[id="chameleonBanner"].badge.special,
[id="chameleonBanner"].badge.special.bogo {
  background: var(--badge-special-banner-bg-color) !important;
  padding: 0 8%;
}

[id="chameleonBanner"].bogo {
  --banner-discount-font-size: min(56px, 5vw);
}

[id="chameleonBanner"].bogo,
[id="chameleonBanner"].wide {
  background: var(--accent-bg) no-repeat var(--accent-placement) /
      var(--accent-size),
    var(--banner-bg-wide) no-repeat var(--banner-bg-placement) /
      var(--banner-bg-size);
}

[id="chameleonBanner"].mm-bogo {
  background: var(--banner-bg-wide) no-repeat var(--banner-bg-placement) /
    var(--banner-bg-size);
}

[id="chameleonBanner"].mm-bogo,
[id="chameleonBanner"].wide {
  padding: 0 10%;
}

[id="chameleonBanner"].f1 {
  font-size: min(26px, 2.5vw);
  padding: 0 10%;
}

.badge.wide [id="bannerOffer"] {
  left: -7.4%;
  position: relative;
}

[id="burstSpot"],
[id="badgeSpot"] {
  display: none;
  position: absolute;
}
.badge #badgeSpot,
.burst #burstSpot,
.mm-bogo #burstSpot {
  display: block;
}

[id="chameleonBanner"].badge.wide [id="badgeSpot"],
[id="chameleonBanner"].badge.mm-bogo [id="badgeSpot"],
[id="chameleonBanner"].badge.bogo [id="badgeSpot"] {
  left: 7%;
}

[id="chameleonBanner"].burst.wide,
[id="chameleonBanner"].burst[class*="bogo"] {
  background: var(--banner-bg-wide) no-repeat var(--banner-bg-placement) /
    var(--banner-bg-size);
}

[id="chameleonBanner"].badge.f1,
[id="chameleonBanner"].badge.f2,
[id="chameleonBanner"].badge.f3,
[id="chameleonBanner"].badge.wide,
[id="chameleonBanner"].badge[class*="bogo"],
[id="chameleonBanner"].badge.burst {
  background-color: var(--badge-banner-bg-color);
  background-image: var(--badge-banner-bg-img);
  background-repeat: no-repeat;
  background-position: var(--badge-banner-bg-placement);
  /*padding: 0 4% 18px;*/
  font-size: min(26px, 2.5vw);
}

[id="chameleonBanner"] [id="badgeSpot"] {
  bottom: -18.2%;
  left: 16%;
  width: min(105px, 10.3vw);
  height: min(105px, 10.3vw);
  /*border: 2px solid #fff;
  border-radius: 100%;*/
  padding: 3px;
}

[id="chameleonBanner"].special.badge [id="badgeSpot"] {
  bottom: -14%;
  border-radius: 100%;
  padding: 0;
}

[id="chameleonBanner"].f1 [id="badgeSpot"] {
  left: 5%;
}

.special [id="badgeSpot"] {
  background: var(--badge-special-badge-bg-color)
    var(--badge-special-badge-bg-img) no-repeat 50% 50% / contain;
  border: var(--badge-special-badge-border);
  border-radius: 100%;
}

[id="badgeSpot"] span {
  display: block;
  font: var(--badge-badge-font);
  color: var(--badge-badge-text-color);
  width: 100%;
  height: 100%;
  background: var(--badge-badge-bg-color);
  border: var(--badge-badge-border);
  border-radius: 100%;
  /*background: var(--badge-badge-bg-img) no-repeat 50% 50% / contain;*/
  padding-top: 28%;
  text-align: center;
  box-sizing: border-box;
  text-shadow: var(--badge-badge-text-shadow);
  text-transform: var(--badge-badge-text-transform);
}

.burst [id="burstSpot"],
.mm-bogo [id="burstSpot"] {
  height: min(150px, 12vw);
  width: min(150px, 12vw);
  background: var(--burst-bg-color);
  top: max(-51px, -3.6vw);
  right: min(40px, 2.7vw);
  border-radius: 100%;
  font: normal min(28px, 2.5vw) / 1.2 "Edu SA Beginner", cursive;
  color: var(--burst-text-color);
  flex-flow: column wrap;
  justify-content: center;
  text-align: center;
  padding-top: min(60px, 4.3vw);
  box-sizing: border-box;
}

.mm-bogo [id="burstSpot"] {
  background: var(--accent-mm-bg) no-repeat 50% 50%/80%;
  height: min(110px, 12vw);
  width: min(110px, 12vw);
  right: min(40px, 3.9vw);
  top: 0;
}

[id="bannerContents"] {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  color: var(--discount-text-color);
  font-family: "Roboto Slab", serif;
  line-height: 1;
  height: min(130px, 12.69vw);
}

.badge [id="bannerContents"] {
  color: var(--badge-discount-text-color);
  height: min(130px, 12.69vw);
}

.badge.special [id="bannerContents"] {
  color: var(--badge-special-discount-text-color);
}

[id="bannerContents"] [id="bannerOffer"] {
  padding-top: 2%;
  height: 100%;
  text-align: center;
  margin: auto 0;
  width: min(1024px, 100vw);
  left: -3.2%;
  position: relative;
}

.no-code [id="bannerOffer"],
.badge [id="bannerOffer"],
[class*="bogo"] [id="bannerOffer"] {
  position: static;
}

.wide [id="bannerOffer"],
.f3.f2 [id="bannerOffer"] {
  left: -7.4%;
}

.f3.f1 [id="bannerOffer"] {
  left: -5.5%;
}

.no-code [id="bannerOffer"],
.badge [id="bannerOffer"],
[class*="bogo"] [id="bannerOffer"],
.no-code.f3 [id="bannerOffer"],
.wide.no-code [id="bannerOffer"] {
  left: 0;
}

.f1 [id="bannerContents"] [id="bannerOffer"],
.bogo.badge [id="bannerOffer"] {
  padding-top: 3%;
}

[id="bannerOffer"] .banner-discount {
  font-weight: bold;
  font-size: var(--banner-discount-font-size);
  margin-bottom: 6px;
}

.two-line [id="bannerOffer"] .banner-discount {
  margin-bottom: -0.05em;
}

.two-line [id="bannerOffer"] .banner-discount span {
  font-size: 40%;
  width: 100%;
  display: block;
  position: relative;
  font-weight: normal;
}

.f3 .banner-discount {
  font-size: min(40px, 4.2vw);
  margin-top: 10px;
}

.badge[class*="bogo"] .banner-discount {
  font-size: min(42px, 3.2vw);
}

.f3.f2.f1 .banner-discount {
  margin-top: 13px;
}

.burst.wide [id="bannerOffer"] .banner-discount,
.burst[class*="bogo"] [id="bannerOffer"] .banner-discount {
  font-size: min(45px, 4.3vw);
}

[id="bannerOffer"] .banner-brand {
  color: var(--brand-text-color);
  font-size: var(--banner-brand-font-size);
  max-width: unset;
  margin: 0 auto !important;
}

.no-code [id="bannerOffer"] .banner-brand {
  max-width: 75%;
}

.badge [id="bannerOffer"] .banner-brand {
  color: var(--badge-brand-text-color);
}

.badge.special [id="bannerOffer"] .banner-brand {
  color: var(--badge-special-brand-text-color);
}

.bogo [id="bannerOffer"] .banner-brand {
  font-size: min(28px, 3vw);
  margin-top: 6px;
}

.f1 [id="bannerOffer"] .banner-brand {
  font-size: var(--banner-brand-font-size_f1);
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  line-height: 1;
  top: -0.45em;
  position: relative;
}

.f2 [id="bannerOffer"] .banner-brand {
  font-size: min(20px, 1.9vw);
  line-height: 0.9em;
}

.f3.f2.f1 [id="bannerOffer"] .banner-brand {
  font-size: min(20px, 1.9vw);
}

html:not(.phone) .two-line [id="bannerOffer"] .banner-brand {
  font-size: min(24px, 2.34vw);
}

[id="bannerContents"] [id="promoDetail"] {
  align-items: center;
  text-align: center;
  position: absolute;
  width: min(18vw, 186px);
  height: min(130px, 12.69vw);
  background: var(--promo-color);
  color: var(--promo-text-color);
  font-family: Helvetica, Arial, Roboto, sans-serif;
  line-height: 1.4;
  font-size: var(--promo-font-size);
  padding: 0;
  margin-right: -4px !important;
  display: flex;
  justify-content: space-around;
  cursor: copy;
}

#promoDetail .save-promo br {
  display: block;
}

.badge [id="promoDetail"] {
  background: var(--badge-promo-color);
  color: var(--badge-promo-text-color);
}

.badge.special [id="promoDetail"] {
  background: var(--badge-special-promo-bg-color);
  color: var(--badge-special-promo-text-color);
}

[class*="bogo"] #promoDetail,
.no-code #promoDetail {
  display: none;
}

#chameleonBanner + .endecaDisclaimer {
  margin-bottom: 10px !important;
  float: right;
}

/* Tablet */

/* BF-CM*/
.tablet [id="chameleonBanner"].badge {
  padding: 0 5% 0 0;
}
.tablet [id="chameleonBanner"].badge[class*="bogo"] {
  padding: 0;
}
.tablet .badge [id="bannerOffer"] {
  left: -8px;
  position: relative;
}
.tablet .badge[class*="bogo"] [id="bannerOffer"] .banner-brand {
  font-size: min(3.2vh, 2.2vw);
}
/* /BF-CM*/

.tablet .badge #badgeSpot {
  bottom: -17.2%;
  left: 7%;
}

.tablet .badge.f2 .banner-brand {
  max-width: 41vw;
}

.tablet .f3 [id="bannerOffer"] {
  padding-top: 1.9%;
}

.tablet [class*="bogo"] [id="bannerOffer"] {
	padding-top: 4%;
  left: 0;
}

.tablet .f3 [id="bannerContents"] [id="bannerOffer"] {
  padding-top: 0;
}


.tablet [id="chameleonBanner"].badge.wide [id="badgeSpot"],
.tablet [id="chameleonBanner"].badge.mm-bogo [id="badgeSpot"],
.tablet [id="chameleonBanner"].badge.bogo [id="badgeSpot"] {
  left: 7%;
}

.tablet .f2.f3.wide [id="bannerOffer"]{
    left: -16.4%;
    width: min(500px, 50vw);
    top: 24px;
}
.tablet .no-code.f2.f3.wide [id="bannerOffer"] {
    left: -5.4%;
    width: min(500px, 50vw);
    top: 18px;
    position: relative;
}

.tablet .f2.f3.wide [id="bannerOffer"] .banner-discount {
   font-size: min(24px, 2.2vw); 
}
.tablet .f2.f3.wide #promoDetail {
    margin-right: -56px!important;
    
}

@media all and (orientation: portrait) {
  .tablet [class="mm-bogo"] [id="bannerContents"] {
    padding-top: 1.9%;
  }

  .tablet [class*="bogo"] .banner-discount {
    font-size: min(26px, 4vw);
  }
  
 
  .tablet .burst [id="burstSpot"] {
    line-height: 1;
    padding-top: 4.8vw;
  }
  .tablet #promoDetail {
    margin-right: -20px!important;
    
}
}

@media all and (orientation: landscape) {
  .tablet [class*="bogo"] [id="bannerContents"] {
    padding-top: 1.9%;
  }

  .tablet [class*="bogo"] .banner-discount {
    font-size: min(32px, 4vw);
  }
}

/* END TABLET */

#divCoupon br {
  display: block;
}
