/* 2026 Coachella Splash CSS */

/* Clear Padding */
#clear_padding .container, #clear_padding .row, #clear_padding .col-md-12, #clear_padding .col-md-6, #clear_padding .col-md-4 {
    padding: 0;
    margin: 0 auto;
}

#clear_padding > .container {
   width: 100%; 
   max-width: 100%;
}

/* Applied to entire page */
p {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
}

/* Hero */

#hero {
  background: linear-gradient(
    to right,
    #F3DCCE 0%,
    #F3D3C2 50%,
    #E6CBC8 100%
  );
  padding-top: 118px;
}

.logo img {
  max-width: 255px;
  width: 100%;
  padding-bottom: 23px;
}

.photofan img {
  max-width: 1123px;
  width: 100%;
}

.photofan {
  padding-top: 56px;
}

h1 {
  color: #000;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 84px;
  font-style: normal;
  font-weight: 700;
  line-height: 86px; /* 102.381% */
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #hero {
    padding-top: 48px;
  }  
  .logo img {
    max-width: 236px;
    padding-bottom: 24px;
    /* margin-top: -10px; */
  }
  h1 {
    font-size: 28px;
    line-height: 34px; 
  }
}

/* On-Site Perks */

#main {
  background: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #FFFFFF 20%,
    #FBF8F3 40%,
    #F8F3E9 60%,
    #F8F3E9 80%,
    #EFEAE1 100%
  );
  padding-top: 62px;
  padding-bottom: 77px;
}

h2 {
  color: #000;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.perk_cards {
  padding: 57px 0;
}

.perk_cards #forceMinHeight.tracks {
  max-width: 379px;
  margin: 0 auto!important;
} 

.perk_cards #forceMinHeight .card-img-bg.dls-white-bg {
  border-radius: 16px;
  background: #FBF5E9!important;
}

.onsite_perks_img img {
  border-radius: 16px 16px 0 0;
}

#forceMinHeight .richtext {
  padding: 20px 27px 40px;
}

h3 {
  color: #1F0F0F;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; 
  text-transform:none!important;
  padding-bottom: 6px;
}

#forceMinHeight p {
  text-align: center;  
}

#main .cta {
   padding-bottom: 120px;
}

#main .cta a {
  width: 100%;
  max-width: 180px;
  font-weight: 500;
}

.exclusive_perks {
  border-radius: 16px;
  max-width: 1200px;
  aspect-ratio: 119/71;
  padding: 60px 110px 80px 110px;
  margin: 0 auto;
}

.exclusive_perks .card-img-bg {
  border-radius: 16px;
} 

.exclusive_perks .container {
  /* width: 100%; */
}

.exclusive_perks .col-md-6:first-child {
  padding-right: 2px!important;
}

.exclusive_perks .col-md-6:last-child {
  padding-left: 4px!important;
}

.exclusive_perks .col-md-6:last-child .richtext {
  margin-left: 18px;
}

h4 {
  color: #FFF;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.exclusive_perks p {
  padding-top: 13px;
  color: #fff;
  font-weight: 500;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .exclusive_perks {
    padding: 40px 60px;
  }  
  h4 {
    font-size: 34px;
  }
  .exclusive_perks p {
    padding-top: 10px;
  }
  .perk_cards #forceMinHeight.tracks {
    max-width: 290px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .exclusive_perks {
    padding: 40px;
  }  
  h4 {
    font-size: 30px;
  }
  .exclusive_perks p {
    padding-top: 0;
  }
  .perk_cards #forceMinHeight.tracks {
    max-width: 220px;
  }
  .perk_cards #forceMinHeight .richtext {
    padding: 20px 10px 40px;
  }
  .perk_cards h3 {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  #main {
    padding: 50px 0 0;
  }
  #main {
    background: linear-gradient(
      to bottom,
      #FFFFFF 0%,
      #F7F3E9 100%
    );
  }
  h2 {
    font-size: 24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .perk_cards {
    padding: 40px 24px 32px;
  }
  .perk_cards .col-md-4 {
    margin-bottom: 35px!important;
  }
  .perk_cards .col-md-4:last-child {
    margin-bottom: 0!important;
  }
  #main .cta {
     padding-bottom: 48px; 
  }
  .exclusive_perks {
    border-radius: 0;
    aspect-ratio: 59/87;
    padding: 158px 24px;
  }
  
  .exclusive_perks .card-img-bg {
    border-radius: 0;
  } 
  
  .exclusive_perks .col-md-6:first-child {
    padding-right: 0!important;
  }
  
  .exclusive_perks .col-md-6:last-child {
    padding-left: 0!important;
  }
  
  h4 {
    font-size: 34px;
    text-align: center;
  }
  
  .exclusive_perks p {
    padding-top: 24px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .exclusive_perks {
    padding: 108px 24px;
  }  
  h4 {
    font-size: 30px;
  }
}
@media (max-width: 459px) {
  .exclusive_perks {
    padding: 48px 24px;
  }
  
  h4 {
    font-size: 24px;
    text-align: center;
  }
  
  .exclusive_perks p {
    padding-top: 24px;
    text-align: center;
  }
}

/* AMEX Experiences */

#amex_exp_sect {
  background: #00175A;
  padding: 126px 0 85px;
}

#amex_exp_sect > .container > .row > .col-md-12 {
  max-width: 1091px;
}

.twoCards .card-img-bg {
  border-radius: 10px;  
}

.twoCards .col-md-6:first-child {
  padding-right: 20px!important;
}

.twoCards .col-md-6:last-child {
  padding-left: 20px!important;
}

.amexExpCards {
  padding-bottom: 30px;
}

.amexExpCards_img img {
  border-radius: 10px 10px 0 0;
}

#forceMinHeight.amexExpCards .richtext {
  padding: 30px 30px 30px;
}

.twoCards .col-md-6:last-child #forceMinHeight.amexExpCards .richtext {
  padding: 14px 30px 30px;
}

h5 {
  color: #00175A;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 116.667% */
  text-transform: uppercase;
  padding-bottom: 20px;
}

.heading-right .richtext {
  margin-top: -21px;
}

h5 .sub-heading {
  font-size: 16px;
  line-height: 32px; /* 200% */
}

.amexExpCards p {
  color: #333;
}

.amexExpCards .cta a {
  width: 100%;
  max-width: 466px;
  font-weight: 700;
}

.amexExp {
  padding-top: 73px;
}

h6 {
  color: #fff;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  padding-bottom: 10px;
  text-transform: none;
}

.amexExp p {
  color: #fff;
  padding-bottom: 30px;
}


.amexExp_img img {
  width: 100%;
  max-width: 414px;
}

.amexExp .cta a {
  width: 100%;
  max-width: 250px;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .amexExpCards .cta  {
    padding: 0 30px;
  }  
}

@media (max-width: 767px) {
  #amex_exp_sect {
    padding: 48px 16px;
  }
  .twoCards .col-md-6:first-child {
    padding-right: 0!important;
    margin-bottom: 24px!important;
  }
  
  .twoCards .col-md-6:last-child {
    padding-left: 0!important;
  }  
  .amexExpCards .cta  {
    padding: 0 30px;
  } 
  .amexExp h6 {
    text-align: center;
    font-size: 32px;
    line-height: 40px;
  }
  .amexExp p {
    text-align: center;
  }
  .amexExp .cta a {
    max-width: 250px;
    margin: 0 auto!important;
  }
  .text-align-right.amexExp_img {
    text-align: center !important;
  }
}

/* Find a Card */

#find_a_card_sect {
  padding: 80px 40px 46px;
}

.findACard_img img {
  width: 100%;
  max-width: 415px;
  padding-bottom: 40px;
}

#find_a_card_sect h6 {
  color: #262626;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  padding-bottom: 16px;
}

#find_a_card_sect p {
  color: #595959;
  text-align: center;
  font-family: BentonSans, Helvetica Neue, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 25.2px */
}

.catCTAs {
  padding-top: 56px;
}

.catCTAs .col-md-2 {
  flex: 0 0 18.3333333332%;
  max-width: 18.3333333332%;
}

.catCTAs .col-md-3 {
  flex: 0 0 26.6666666667%;
  max-width: 26.6666666667%;
}

#rm-MembershipRewardPointsCards.cta a {
  width: 100%;
  max-width: 290px;
}

.catCTAs .cta a {
  border-radius: 4px;
  border: 1px solid #B5D7F4;
  color: #006FCF;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.08px;
  background: #fff;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .catCTAs .cta a {
    font-size: 12px;
    padding: 13px 15px;
  }  
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .catCTAs .cta a {
    font-size: 10px;
    padding: 13px 5px;
  }  
}

@media (max-width: 767px) {
  .findACard_img img {
    padding-bottom: 32px;
  }
  #find_a_card_sect h6 {
    font-size: 24px;
    line-height: 130%; 
    padding-bottom: 8px;
  }
  #find_a_card_sect p {
    font-size: 16px;
  }

  .catCTAs {
    padding-top: 56px;
  }
   .catCTAs .col-md-2, .catCTAs .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #rm-MembershipRewardPointsCards.cta a, .catCTAs .cta a {
    width: 100%;
    max-width: 100%;
  }
  #find_a_card_sect {
    padding: 56px 16px;
  }
}

/* AMEX Logo */

.amex_logo_img img {
  width: 100%;
  max-width: 160px;
  margin-bottom: -18px;
  z-index: 10;
  position: relative;
}

/* Terms */

#terms {
  padding: 40px 40px 24px;
}

#terms .collapsible-caret::before {
    background-image: url(/content/dam/amex/en-us/campaigns/credit-cards/platinum-gold/image/Chevron_Down.svg);
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
    margin-top: 0px;
}

#terms .collapsible[aria-expanded="true"] .collapsible-caret::before
  {
    transform: rotate(0deg);
  }

#terms, #terms .accordion-content.dls-gray-01-bg, .border.bordered.dls-white-bg {
  background: #E0E0E0!important;
  border: none;
}

#terms .bordered-a>*, .bordered>:not(:last-child) {
    border: none;
}

#terms .collapsible {
    padding: 0;
    color: #262626;
    font-weight: 500;
}

#terms .collapsible[aria-expanded=true] {
    color: #262626;
}

#terms .pad {
    padding: 40px 0 0 !important;
}

#terms ol {
  font-weight: 700;
}

#terms li {
  padding-bottom: 20px;
}

#terms h3 {
  color: #262626;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.08px;
}