@charset "UTF-8";

/* CSS Document */
:root {
  color-scheme: only light;
}
/* fonts */
/* BentonSans Font */
/* BENTONSANS LIGHT (100) */
@font-face {
  font-family: BentonSansLt;
  font-font-style: normal;
  font-display: swap;
  src: url('https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansLt.woff')
    format('woff');
}

/* BENTONSANS BOOK (300)  */
@font-face {
  font-family: BentonSansBook;
  font-font-style: normal;
  font-display: swap;
  src: url('https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansBook.woff')
    format('woff');
}

/* BENTONSANS (400)  */
@font-face {
  font-family: BentonSans;
  font-font-style: normal;
  font-display: swap;
  src: url('https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSans.woff')
    format('woff');
}

/* BENTONSANS MD (500)  */
@font-face {
  font-family: BentonSansMd;
  font-font-style: normal;
  font-display: swap;
  src: url('https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansMd.woff')
    format('woff');
}

/* BENTONSANS BOLD (600)  */
@font-face {
  font-family: BentonSansBold;
  font-font-style: normal;
  font-display: swap;
  src: url('https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/2.18.0/package/dist/fonts/BentonSansBold.woff')
    format('woff');
}

/* BentonSanCond Font */
@font-face {
  font-family: 'BentonSans-CondMd';
  src: local('Benton Sans Condensed Medium');
  src: url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot');
  src: url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-2.eot?')
      format('embedded-opentype'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-3.woff')
      format('woff'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-1.ttf')
      format('truetype'),
    url('https://www.aexp-static.com/nav/ngn/fonts/66edbae4-0c00-4453-9c58-c0c4cb412064-4.svg#web')
      format('svg');
  font-style: normal;
  font-weight: normal;
}

/* .btn {
  color: #ffffff !important;
} */

a.link-underlined {
  text-decoration: none;
}

a.text-link:focus {
    outline: 1px dashed #53565a!important;
    outline-offset: 3px!important;
}

.accordion-content .stack a.text-link {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#btnPersonal a:hover {
  color: #ffffff;
}

.nowrap {
  white-space: nowrap;
}

.mobile-off {
  display: block !important
}

/* remove arrow from automatically showing for a link to a new tab */
/* .links-item i {
  display: none !important;
} */

html {
  overscroll-behavior: none;
}
#amex-footer {
  position: relative !important;
}
.pause {
  display: block !important;
}

.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* .col, [class*=" col-"], [class^=col-] {
  padding-left: 0px;
  padding-right: 0px;
} */

/* body > div.container-fluid.pad-0-lr > div > div {
  background-color: #00175a;
} */

#blueSectionContainer {
  width: 100%;
}

#blueSectionContainer > .container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

#heroSection {
  /* width: 100%; */
  /*min-height: 860px;*/
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  align-items: center;
  background-color: #006FCF;
  /* max-width: 1514px; */
  margin: 0 auto;
  /*border: 60px solid #006FCF;*/
  padding: 46px 0px;
}

#heroSection > .container {
  /* max-width: 100%; */
  width: 100%;
  /* padding: 7.7% 15%; */
  /* padding: 83px 205px; */
}

.heroImgMob {
  display: none;
}

#blueSectionContainer > div.container > div > div {
  padding: 0px;
}

.heroCTA {
  max-width: 200px;
  width: 100%;
  height: 48px;
  border-radius: 4px;
  background-color: #FFFFFF;
  margin: 12px 0 0;
  /* padding: 12px 0; */
  text-align: center;
}

.heroCTA a {
  font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  color: #006fcf !important;
  text-align: center;
  display: block;
  font-weight: 500;
  width: 100%;
  height: 48px;
}

.heroCTA a:focus {
  border: 1px solid #006fcf;
  border-radius: 4px;
}

@media (min-width: 768px) {
  #heroContent {
    display: flex;
    align-items: center;
  } 
  
  #heroCopyContainer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #summerEventsSection .col-md-6:nth-child(2) > div .richtext {
    display: flex;
    align-items: center;  
  }
  
  #summerEventsSection .col-md-6:nth-child(2) > div .richtext > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);  
  }
}

.heroHeaderCopy.heroTopCopy {
  width: 100%;
  min-width: 485px;
  /* margin: 0 auto; */
  margin-left: -115px;
  padding: 0 0 16px 0;
}

#heroCopyContainer h1 .heading-7-g {
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
  color: #ffffff;
}

#heroCopyContainer p .heading-4-g{
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #ffffff;
}

@media (min-width: 1280px) {
  #heroSection .col-md-8 {
    flex: 0 0 64.6666666667%;
    max-width: 64.6666666667%;
  }
  
  #heroSection .col-md-4 {
    flex: 0 0 35.3333333333%;
    max-width: 35.3333333333%;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .heroHeaderCopy.heroTopCopy {
    min-width: 400px;
    margin-left: -80px;
  }
  #heroCopyContainer h1 .heading-7-g {
    font-size: 42px;
    line-height: 50px;
  }
  
  #heroCopyContainer p .heading-4-g{
    font-size: 16px;
    line-height: 24px;
  }
}

#summerEventsSection {
  background-color: #F4F4F4;
  /* padding: 80px 0; */
}

#summerEventsSection > .container {
  max-width: 792px;
  margin: 0 auto;
  padding: 80px 0 40px;
  width: 100%;
}

#summerEventsSection h2 .heading-4 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  color: #00175a;
}
#summerEventsSection p {
  padding: 12px 0 24px;
}
#summerEventsSection p .heading-4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #3D3D3D;
  /*max-width: 840px;
  margin: 0 auto;*/
}

#summberEventsContaner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: self-start;
  padding: 30px 40px 0;
}

.summerEvent {
  width: 31%;
  height: auto;
  padding: 40px 0 0 0;
}

.summerEvent img {
  padding: 0 0 30px 0;
}

#summberEventsContaner h3 {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 23px;
  line-height: 32px;
  font-weight: 700;
  color: #fbfbfb;
  padding: 0 0 10px 0;
  text-align: center;
  margin: 0 auto;
}

#summberEventsContaner p {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #ffffff;
  padding: 0 0 20px 0;
  text-align: center;
  margin: 0 auto;
}

.summberEventCTA {
  max-width: 200px;
  /* width: 100%; */
  height: 48px;
  border-radius: 4px;
  background-color: #006fcf;
  /* margin: 0 auto; */
  /* padding: 12px 0; */
  text-align: center;
}

.summberEventCTA a {
  font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  color: #ffffff !important;
  text-align: center;
  font-weight: 500;
  /* padding: 13px 30px; */
  display: block;
  width: 100%;
  height: 48px;
}

.summberEventCTA a:focus {
  border: 1px solid #ffffff;
  border-radius: 4px;
}

#findYourCardSection {
  background-color: #f4f4f4;
}

#findYourCardSection > .container {
  margin: 0 auto;
  padding: 40px 0 80px;
  width: 100%;
}

#findYourCardSection img {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 32px;
}

#findYourCardSection h2 {
  padding: 0 40px 16px;
  text-align: center;
}
#findYourCardSection h2 .heading-4 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  color: #00175a;
}

#findYourCardSection p {
  font-family: 'BentonSans', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #3d3d3d;
  text-align: center;
  margin: 0 auto;
  padding: 0 40px 16px;
}

#findYourCardSection p.terms {
  padding: 16px 0 0 0;
}

.findYourCardCTA {
  max-width: 280px;
  width: 100%;
  height: 48px;
  border-radius: 4px;
  background-color: #006fcf;
  margin: 0 auto;
  /* padding: 12px 0; */
  text-align: center;
}

.findYourCardCTA a {
  font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
  font-size: 16px;
  color: #ffffff !important;
  text-align: center;
  font-weight: 500;
  display: block;
  width: 100%;
  height: 48px;
}

.findYourCardCTA a:focus {
  border: 1px solid #FFFFFF;
  border-radius: 4px;
}

#routine a {
  font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
  font-weight: 500;
  color: #FBFBFB;
}

#notACardmember {
  padding: 80px 0;
}

#notACardmember h2 {
  padding: 0 20px 10px;
  text-align: center;
}

#notACardmember h2 .heading-4 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  color: #FBFBFB;
}
#notACardmember h3 {
  padding: 0 20px 30px;
  text-align: center;
}
#notACardmember h3 .heading-4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #FBFBFB;
}

#notACardmember p .heading-4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #FBFBFB;
  padding: 0 20px;
  text-align: center;
}

#notACardmember a {
  font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
  font-weight: 500;
  color: #006fcf;
}

#socialLinksSection {
  padding: 80px 0 40px 0;
}

  #heroCopyContainer {
    /* top: 18%;
    left: -46px; */
  }

  #heroCopyContainer h1 {
    /* font-size: 46px; */
    /* line-height: 43px; */
  }

  #heroCopyContainer h2 {
    font-size: 27px;
    line-height: 28px;
  }

  #heroCopyContainer p {
    /* font-size: 20px; */
    /* line-height: 27px; */
  }

  #summberEventsContaner h3 {
    font-size: 21px;
    line-height: 30px;
  }

  #summerEventsSection .summerEvent p {
    height: 160px;
  }
}

@media (max-width: 1099px) {
  #summberEventsContaner h3 {
    font-size: 19px;
    line-height: 27px;
  }
}

/* Adjusting margins based on varing widths */
@media (max-width: 1023px) {
  #heroCopyContainer h2 {
    font-size: 27px;
    line-height: 28px;
  }
  
  #summerEventsSection > .container {
    max-width: 840px;
  }

  .summerEvent {
    width: 45%;
    height: auto;
  }

  #summberEventsContaner {
    justify-content: space-around;
    align-items: self-start;
  }

  #summerEventsSection .summerEvent p {
    height: 140px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .heroHeaderCopy.heroTopCopy {
    min-width: 350px;
    margin-left: -70px;
    padding-bottom: 5px;
  }
  #heroCopyContainer h1 .heading-7-g {
    font-size: 34px;
    line-height: 40px;
  }
  
  #heroCopyContainer p .heading-4-g{
    font-size: 12px;
    line-height: 18px;
  }  
  .heroCTA {
    max-width: 150px;
    width: 100%;
    height: 34px;
    border-radius: 4px;
    background-color: #FFFFFF;
    margin: 12px 0 0;
    /* padding: 12px 0; */
    text-align: center;
  }
  
  .heroCTA a {
    font-family: 'BentonSansMd', Helvetica Neue, Helvetica, sans-serif !important;
    font-size: 16px;
    color: #006fcf !important;
    text-align: center;
    display: block;
    font-weight: 500;
    width: 100%;
    height: 34px;
    line-height: 16px;
    padding: 10px 0;
  }
}
@media (max-width: 1023px) {
  /* #heroCopyContainer {
    position: absolute;
    top: 7%;
    left: -26px;
    max-width: 300px;
  } */
  
  #summberEventsContaner > div:nth-child(3) > p {
    height: 130px;
  }
}

@media (max-width: 829px) {
  #summerEventsSection .summerEvent p {
    height: 160px;
  }
}
/* Adjusting margins based on varing widths */
@media (max-width: 767px) {
  .mobile-off {
    display: none !important
  }

  .btn {
    max-width: 100%;
    width: 280px;
  }

  #blueSectionContainer > div.container {
    padding: 0px !important;
  }
  
  #heroSection {
    /* height: 835px !important; */
  }

  #heroSection > .container {
    max-width: 352px;
    padding: 0;
  }
  #heroSection .col-md-8, #heroSection .col-md-4 {
    padding: 0;
  }
  
  #heroSection {
    /* width: 100%; */
    /*min-height: 860px;*/
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
    background-color: #006FCF;
    /* max-width: 1514px; */
    margin: 0 auto;
    /*border: 60px solid #006FCF;*/
    padding: 32px 24px 40px;
  }
  
  #heroSection > .container {
    /* max-width: 100%; */
    width: 100%;
    /* padding: 7.7% 15%; */
    /* padding: 83px 205px; */
  }
  .heroImgDsk {
    display: none;
  }
  .heroImgMob {
    display: block;
  }
  .heroHeaderCopy.heroTopCopy {
    margin-left: 0;
    min-width: 0;
    margin-top: -28px;
    padding-bottom: 10px;
  }
  #heroCopyContainer h1 .heading-7-g {
    font-size: 44px;
    line-height: 44px;
    font-weight: 300;
  }
  
  #heroCopyContainer p .heading-4-g{
    font-size: 16px;
    line-height: 24px;
  }
 
  #heroContent h1, #heroCopyContainer p {
    text-align:center ;
  } 
  
  #heroContent img {
    width: 288px !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
  }

  .heroCTA {
    margin: 12px auto;
 }
  
  #expImg img, #summerEventsSection .col-md-6:nth-child(2) > div .richtext {
    /* max-width: 343px; */
  }
  
  #summerEventsSection > .container {
    padding: 32px 16px 48px;
    max-width: 400px;
  }

  #summerEventsSection h2, #summerEventsSection p {
   text-align: center;
  }

  #summerEventsSection h2, #summerEventsSection p {
     padding-top: 18px;
  }
  
  #summerEventsSection h2 .heading-4 {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
  }
  
  #summerEventsSection p {
    padding: 18px 0;
  }
  
  .summberEventCTA {
    max-width: 311px;
    /* width: 100%; */
    margin: 0 auto;
  }

  .summerEvent {
    width: 100%;
  }

  .summerEvent img {
    padding: 0 0 20px 0;
  }

  #summberEventsContaner p, #summerEventsSection .summerEvent p {
    height: auto !important;
    padding: 10px 0px 20px;
  }

  #findYourCardSection > .container {
    margin: 0 auto;
    padding: 10px 20px;
    width: 100%;
  }

  #findYourCardSection img {
    padding: 0 0 32px;
  }

  #findYourCardSection h2 .heading-4{
    font-size: 24px;
    line-height: 32px;
  }

  #findYourCardSection p {
    padding: 0 0 16px;
  }

  body > div.container-fluid.pad-0-lr > div > div > div:nth-child(3),
  body > div.container-fluid.pad-0-lr > div > div > div:nth-child(4) {
    padding: 0 8px;
  }

  #notACardmember {
    padding: 40px 0px;
  }
  
  #notACardmember h2 .heading-4{
    font-size: 24px;
    line-height: 32px;
    padding: 0 2px 10px;
  }
  
  #notACardmember h3 .heading-4{
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding: 0 2px 30px;
  }

  #socialLinksSection {
    padding: 40px 0 0 0;
  }

  #socialLinksSection .container {
    padding: 0 
  }

  #rm-Facebook > a > img, #rm-X > a > img, #rm-Instagram > a > img {
    width: 40px !important;
    height: 40px !important;
  } 

  body > div.container-fluid.pad-0-lr > div > div > div:nth-child(7) > section > div > div.container > div > div > div > div > section > div > div.container > div > div.col-md-2.col-md-offset-3.margin-0-tb,
  body > div.container-fluid.pad-0-lr > div > div > div:nth-child(7) > section > div > div.container > div > div > div > div > section > div > div.container > div > div:nth-child(2),
  body > div.container-fluid.pad-0-lr > div > div > div:nth-child(7) > section > div > div.container > div > div > div > div > section > div > div.container > div > div:nth-child(3) {
    flex: auto;
  }
}