/*** F1 Montreal 2026 CSS ***/

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

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

/* Breadcrumb */

div.breadcrumb {
   padding-left: 20px;
}

/* Hero Section */
#heroSectionContainer {
   padding: 80px 40px;
   background-color: #00175A;
   aspect-ratio: 320 / 117;
   width: 100%;
}

#clear_padding>.container>.row>.col-md-12>div>.grid:nth-child(1) {
   height: 0;
}

#langOptContainer {
   position: absolute;
   bottom: -44px;
   z-index: 5;
}

#langOptContainer .container {
   max-width: 99%;
}

#languageOptions {
   background-color: #00175A;
   display: block;
   padding: 10px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border-radius: 8px;
   width: 100%;
   max-width: 171px;
   float: right;
   text-align: center;
   line-height: 0;
}

#languageOptions a {
   color: #fff;
   text-align: center;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   padding: 0;
   justify-content: center;
}

#languageOptions a:focus {
   outline: 1px dashed #fff;
   outline-offset: 3px
}

#languageOptions a.activeLang {
   font-weight: 700;
}

.sep {
   width: 2px;
   color: #C8C9C7;
}

.heroLeft {
   width: 100%;
   max-width: 417px;
}

#logo {
   padding-bottom: 20px;
}

#logo img {
   width: 220px;
   height: 72px;
}

h1 {
   color: #FFF;
   font-family: BentonSansCond, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 40px;
   font-style: normal;
   font-weight: 700;
   line-height: 46px;
   /* 115% */
   text-transform: uppercase;
   padding-bottom: 8px;
}

#heroSectionContainer p {
   color: #FFF;
   font-family: BentonSans, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   /* 150% */
}

p.date {
   font-weight: 700 !important;
   padding-bottom: 20px;
}

#heroSectionContainer .overlayTxt p {
   position: relative;
   left: 50%;
   bottom: -68px;
   color: rgba(255, 255, 255, 0.70);
   font-family: BentonSans, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px;
   /* 171.429% */
}

@media (min-width: 4001px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -1020px;
   }
}

@media (min-width: 3201px) and (max-width: 4000px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -720px;
   }
}

@media (min-width: 2626px) and (max-width: 3200px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -520px;
   }
}

@media (min-width: 2181px) and (max-width: 2625px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -365px;
   }
}

@media (min-width: 1836px) and (max-width: 2180px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -235px;
   }
}

@media (min-width: 1576px) and (max-width: 1835px) {
   #heroSectionContainer .overlayTxt p {
      bottom: -145px;
   }
}

@media (min-width: 768px) and (max-width: 1023px) {
   #heroSectionContainer .card-img-bg.hidden-sm-down.hidden-lg-up {
      background-image: url('/content/dam/amex/en-ca/benefits/experiences/formula-1-montreal/images/f1-ca-Tablet.jpg') !important;
   }

   #clear_padding>.container>.row>.col-md-12>div>.grid:nth-child(1) {
      height: inherit;
   }

   #logo,
   #logo img {
      width: 220px;
      height: 72px;
      margin: 0 auto;
   }

   #heroSectionContainer {
      aspect-ratio: 768 / 487;
   }

   #heroSectionContainer .overlayTxt p {
      left: 0;
      bottom: 219px;
      color: rgba(255, 255, 255, 0.50);
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      /* 200% */
   }
}

@media (max-width: 1023px) {
   #breadC .container {
      max-width: 100%;
   }

   #breadC .col-md-12,
   div.breadcrumb {
      padding: 0;
   }

   #clear_padding>.container>.row>.col-md-12>div>.grid:nth-child(1) {
      height: 72px;
   }

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

   #languageOptions {
      justify-content: center;
      align-items: center;
      float: right;
      text-align: center;
      line-height: 0;
      height: 72px;
      display: flex;
   }

   #langOptContainer {
      bottom: 0;
      background-color: #00175A;
      max-width: 100%;
      height: 72px;
   }

   #logo {
      padding-bottom: 0;
      width: 134px;
      height: 44px;
   }

   #logo img {
      margin-top: 14px;
   }

   #heroSectionContainer {
      padding: 30px 20px;
   }

   #heroSectionContainer .container,
   #heroSectionContainer .row,
   #heroSectionContainer>.container>.row>.col-md-12>div,
   #heroSectionContainer .grid,
   #heroSectionContainer>.container>.row>.col-md-12>div>.grid>section,
   #heroInfoContainer,
   #heroInfoContainer>.container>.row>.col-md-6>.grid>section {
      height: 100%;
   }

   #heroInfoContainer .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
      height: 100%;
   }

   .heroLeft {
      max-width: 100%;
      position: absolute;
      top: 70%;
   }

   h1 {
      font-size: 30px;
      line-height: 35px;
      padding-bottom: 8px;
      text-align: center;
   }

   #heroSectionContainer p {
      text-align: center;
   }

   p.date {
      padding-bottom: 8px;
   }
}

@media (max-width: 767px) {
   #heroSectionContainer {
      aspect-ratio: 375 / 433;
   }

   #logo,
   #logo img {
      width: 134px;
      height: 44px;
      margin-right: auto;
   }

   .heroLeft {
      top: 62%;
   }

   #heroSectionContainer .overlayTxt p {
      left: 0;
      bottom: 0;
      color: rgba(255, 255, 255, 0.60);
      font-size: 12px;
      line-height: 24px;
      /* 200% */
   }

   #heroEventInfoContainer {
      padding: 0 0 0 24px;
   }
}

@media (max-width: 550px) {
   .heroLeft {
      top: 42%;
   }
}

@media (max-width: 456px) {
   #heroSectionContainer .overlayTxt p {
      bottom: 280px;
   }
}

@media (max-width: 432px) {
   #heroSectionContainer .overlayTxt p {
      bottom: 275px;
   }
}

@media (max-width: 410px) {
   #heroSectionContainer .overlayTxt p {
      bottom: 251px;
   }

   #heroSectionContainer {
      padding: 30px 13px;
   }
}

@media (max-width: 380px) {
   #heroSectionContainer .overlayTxt p {
      bottom: 235px;
   }
}

@media (max-width: 374px) {
   #heroSectionContainer .overlayTxt p {
      font-size: 10px;
   }
}

@media (max-width: 360px) {
   .heroLeft {
      top: 22%;
   }

   #heroSectionContainer .overlayTxt p {
      bottom: 0;
   }
}

@supports (-webkit-touch-callout: none) {

   /* CSS specific to iOS devices */
   #heroSectionContainer .overlayTxt p {
      position: relative;
      bottom: 0 !important;
   }

   @media (max-width: 456px) {
      h1 {
         line-height: 30px;
      }
   }
}

/* Take Your Perks Section */

#catchAllTheAction {
   padding: 80px 40px 48px;
   background-color: #00175A;
}

h2 {
   color: #FFF;
   font-family: BentonSansCond, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 40px;
   font-style: normal;
   font-weight: 700;
   line-height: 48px;
   /* 120% */
   text-transform: uppercase;
   padding-bottom: 16px;
}

#catchAllTheAction p,
#catchAllTheAction a {
   color: #EDF7FF;
   font-family: BentonSans, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
}

#catchAllTheAction p {
   padding-bottom: 56px;
}

/* Perk Cards */
.card-section {
   display: grid;
   gap: 16px;
   padding: 0;
}

/* Desktop (default) */
.card-section {
   grid-template-columns: repeat(3, 1fr);
}

/* Tablet */
@media (max-width: 1023px) {
   .card-section {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Mobile */
@media (max-width: 640px) {
   .card-section {
      grid-template-columns: 1fr;
   }
}

/* Card styles */
.card {
   background: #fff;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   padding: 24px 24px 44px;
   display: flex;
   flex-direction: column;
   min-height: 280px;
}

.card img {
   width: 32px;
   height: 32px;
   margin-bottom: 16px;
}

.card h3 {
   margin-bottom: 12px;
   color: #00175A;
   font-family: BentonSans, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
}

#catchAllTheAction .card p {
   color: #3D3D3D;
   font-family: Helvetica Neue, Helvetica, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
   /* 21px */
   padding-bottom: 20px;
}

#catchAllTheAction .card a {
   color: #006FCF;
   text-decoration: none;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   letter-spacing: 0.08px;
}

#catchAllTheAction .card:not(.two-col-span) a {
   position: absolute;
   bottom: 14px;
}

.card img.valign-middle.flex-inline {
   width: 16px;
   height: 16px;
   margin-bottom: 0;
}

.learnMoreTxt {
   padding-right: 4px;
}

/* Cards that span two columns on desktop and tablet */
.card.two-col-span {
   grid-column: span 2;
   padding: 24px;
}

.card.two-col-span .info-columns {
   display: flex;
   gap: 60px;
   flex-direction: row;
}

.card.two-col-span .info-columns > div {
    flex: 1 1 0px;
}

.card.two-col-span .info-columns .info-col-right p {
   padding-bottom: 0 !important;
   margin-bottom: 12px;
}

.card.two-col-span .info-columns .info-col-right p.bold {
   font-weight: 700 !important;
   margin-bottom: 7px;
}

.card.two-col-span .info-columns .info-col-right a {
   display: block;
   position: relative;
   padding: 0 25px 0 0;
   max-width: 430px;
}

.card.two-col-span .info-columns .info-col-right a img {
   width: 16px;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

/* Tablet */
@media (max-width: 1023px) {
   .card.two-col-span .info-columns {
      display: block;
   }
}

/* Mobile */
@media (max-width: 640px) {
   .card,
   .card:not(.two-col-span) {
      display: block;
      min-height: 0;
   }

   .card.two-col-span {
      grid-column: auto;
   }

   .card.two-col-span .info-columns {
      display: block;
   }
}


/* Map */

#fanExperiences {
   padding: 50px 0;
   background-color: #0971CE;
}

h4 {
   color: #FFF;
   font-family: BentonSansCond, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 49px;
   /* 120% */
   text-transform: uppercase;
   padding-bottom: 16px;
   text-align: center;
}

#fanExperiences p {
   color: #fff;
   font-family: "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   text-align: center;
}

.mapCa {
   max-width: 1112px;
   margin: 0 auto;
}

@media (max-width: 1023px) {
   #fanExperiences {
      padding: 20px;
   }

   h4 {
      font-size: 24px;
      line-height: normal;
      padding-bottom: 10px;
   }

   #fanExperiences p {
      font-size: 16px;
      line-height: 24px;
      padding-bottom: 20px;
   }
}

@media (max-width: 767px) {
   #catchAllTheAction {
      padding: 40px 20px;
   }

   h2 {
      font-size: 24px;
      line-height: normal;
      padding-bottom: 10px;
      text-align: center;
   }

   #catchAllTheAction p,
   #catchAllTheAction a {
      font-size: 16px;
      line-height: 24px;
      text-align: center;
   }

   #catchAllTheAction p {
      padding-bottom: 30px;
   }

   #fiveColumnContainer p,
   #fiveColumnContainer a {
      text-align: left;
   }

   .mapCa {
      width: 110%;
      margin: -20px;
   }
}


/* Maison Section */

#offTrack {
   padding: 32px;
}

.maiTwoCol .col-md-6:nth-child(2) {
   padding: 50px 60px !important;
}

h5 {
   font-family: BentonSansCond, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 40px;
   /* 120% */
   text-transform: uppercase;
   padding-bottom: 20px;
   color: #262626;
}

.maiTwoCol p {
   color: #262626;
   font-family: BentonSans, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   /* 150% */
}

.maiTwoCol p.addressMai {
   font-weight: 700 !important;
   padding-bottom: 20px;
}

.maiTwoCol p.maisonTitle {
   font-weight: 700 !important;
   padding-bottom: 20px;
   font-size: 20px;
   font-style: normal;
   line-height: 32px;
   text-transform: uppercase;
}

.maison {
   padding: 16px;
   background: #202456;
   aspect-ratio: 608 / 455;
   margin-right: 12px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.maiTwoCol .maison img {
   max-width: 536px;
   width: 100%;
}

@media (max-width: 1279px) {
   .maiTwoCol .col-md-6:nth-child(2) {
      padding: 20px 30px !important;
   }

   .maison {
      aspect-ratio: 100 / 100;
   }
}

@media (max-width: 1023px) {
   #offTrack {
      padding: 32px 32px 0;
   }

   #offTrack .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
   }

   .maiTwoCol .col-md-6:nth-child(2) {
      padding: 32px 28px !important;
   }

   .maison {
      aspect-ratio: 704 / 199;
      margin: 0 auto;
   }

   h5 {
      text-align: center;
   }

   .maiTwoCol p {
      text-align: center;
   }
}

@media (max-width: 767px) {
   #offTrack {
      padding: 0;
   }

   .maiTwoCol .maison img {
      max-width: 250px;
      width: 100%;
      padding-top: 0;
   }

   .maiTwoCol .col-md-6:nth-child(2) {
      padding: 15px 28px 50px !important;
   }
}

@media (min-width: 401px) {
   .hidden-threeSevenFive-up {
      display: none !important;
   }
}

/* F1 Journey Section */

#f1Journey {
   padding: 60px 100px;
}

#f1Journey h6 {
   font-family: BentonSansCond, "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 49px;
   /* 120% */
   text-transform: uppercase;
   padding-bottom: 10px;
   color: #fff;
   text-align: center;
}

#f1Journey p {
   color: #fff;
   font-family: "Helvetica Neue", Helvetica, fallbackBold, sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   text-align: center;
}

#rm-F1PartnershipsLearnMore {
   padding-top: 30px;
}

#btnExploreOurF1Partnership {
   margin-bottom: 0 !important;
   max-width: 351px;
   padding: 13px 0;
}

@media (max-width: 1023px) {
   #f1Journey {
      padding: 40px 20px;
   }

   #f1Journey h6 {
      font-size: 24px;
      line-height: normal;
      padding-bottom: 20px;
   }

   #rm-F1PartnershipsLearnMore {
      padding-top: 20px;
   }
}

@media (max-width: 767px) {
   #btnExploreOurF1Partnership {
      margin-bottom: 0 !important;
      max-width: 327px;
   }
}

/* Find the right Card Section */

#twoColumnSection {
   background: #F7F8F9;
}

#twoColumnSection {
   padding: 30px 0;
   flex-direction: column;
   align-items: center;
   align-self: stretch;
}

#twoColumnSectionContainer {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: stretch;
}

#twoColumnSectionContainer>div.container>div>div:nth-child(1),
#twoColumnSectionContainer>div.container>div>div.col-md-6:nth-child(2) {
   display: flex;
   flex-wrap: wrap;
   min-height: 640px;
   align-content: center;
}

#twoColumnSectionContainer>div.container>div>div:nth-child(1) {
   border-right: 1px solid #8E9092;
}

#twoColumnRightContainer {
   margin-left: 61px;
}

#twoColumnSectionContainer>div.container>div>div:nth-child(2) {
   border-right: none;
}

#twoColumnLeftContainer .fourCardsImg {
   /* padding-bottom: 30px; */
}

#twoColumnLeftContainer .fourCardsImg img {
   max-width: 313px;
   margin-left: -15px;
}

.sectionTitleDark h6 {
   font-family: 'BentonSansCond', 'Helvetica Neue', Helvetica, 'fallbackBold', sans-serif;
   font-size: 32px;
   line-height: 38px;
   font-weight: 700;
   color: #00175A;
   text-align: center;
   padding-bottom: 30px
}

.sectionTitleDark p {
   font-family: 'BentonSans', 'Helvetica Neue', Helvetica, 'fallbackBold', sans-serif;
   font-size: 16px;
   line-height: 22px;
   ;
   font-weight: 400;
   color: #333;
   text-align: center;
   margin: 0 auto;
   padding-bottom: 30px;
}

#twoColumnLeftContainer .sectionTitleDark h6 {
   max-width: 466px;
}

#twoColumnLeftContainer .sectionTitleDark p {
   max-width: 416px;
}

#twoColumnRightContainer {
   max-width: 510px;
}

#twoColumnRightContainer .sectionTitleDark h6 {
   text-align: center;
   max-width: 600px;
   margin: 0 auto;
   padding: 40px 0px 20px;
}

#twoColumnRightContainer .sectionTitleDark p {
   max-width: 600px;
   padding-bottom: 30px;
}

@media (max-width: 1023px) {
   #twoColumnSection {
      padding: 40px 20px;
   }

   #twoColumnLeftContainer .fourCardsImg {
      /* padding-bottom: 20px; */
   }

   #twoColumnSection .col-md-6 {
      flex: 0 0 100%;
      max-width: 100%;
   }

   #twoColumnSectionContainer>div.container>div>div:nth-child(1) {
      border-right: none;
      border-bottom: 1px solid #8E9092;
      padding-bottom: 40px;
   }

   #twoColumnSectionContainer>div.container>div>div:nth-child(1),
   #twoColumnSectionContainer>div.container>div>div.col-md-6:nth-child(2) {
      display: block;
      min-height: inherit;
   }

   #twoColumnLeftContainer .sectionTitleDark h6 {
      max-width: 466px;
      margin: 0 auto;
   }

   #twoColumnLeftContainer .sectionTitleDark p {
      max-width: 100%;
   }

   .sectionTitleDark h6 {
      font-size: 24px;
      line-height: normal;
      padding-bottom: 16px;
      background-size: 153px 36px;
      background-position: 15% top;
   }

   .sectionTitleDark p {
      font-size: 16px;
      line-height: 24px;
      padding-bottom: 16px;
   }

   #twoColumnRightContainer {
      max-width: 100%;
      padding: 40px 0;
   }

   #twoColumnRightContainer .sectionTitleDark h6 {
      text-align: center;
      max-width: 370px;
      margin: 0 auto;
      padding: 0 0 20px;
   }

   #twoColumnRightContainer .sectionTitleDark p {
      max-width: 100%;
      padding-bottom: 20px;
   }

   #twoColumnRightContainer {
      margin-left: 0;
   }
}

@media (max-width: 425px) {
   #twoColumnSection {
      padding: 40px 13px;
   }
}

/* FAQ */

#termsAndConditionSection {
   padding: 50px 180px;
}

#termsAndConditionSection h6,
#termsAndConditionSection ol,
#termsAndConditionSection p {
   color: #333;
   font-family: "Helvetica Neue", Helvetica, 'fallbackBold', sans-serif;
   font-size: 13px;
   font-style: normal;
   line-height: 18px;
}

#termsAndConditionSection ol li {
   padding-bottom: 15px;
}

#termsAndConditionSection h6 {
   text-transform: uppercase;
   font-weight: 700;
}

#termsAndConditionSection a i {
   display: none;
}

@media (max-width: 1023px) {
   #termsAndConditionSection {
      padding: 50px;
   }
}

@media (max-width: 767px) {
   #termsAndConditionSection {
      padding: 50px 20px;
   }
}