/* BENTONSANS LIGHT (100) */
@font-face {
    font-family: BentonSansLt;
    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-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-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-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-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");
}

/* #amex-header,
#amex-footer {
    display: none !important;
} */

div#axp-global-header-menu-modal {
    z-index: 99999 !important;
}

body,
html {
    margin: 0;
    padding: 0;
}

.root *,
.root *:before,
.root *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    color: #3D3D3D;
    /* transition: all .4s ease; */
}

.max-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

.body-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.screen {
    position: relative;
    height: 100vh;
}

.screen.mask {
    overflow: hidden;
}

.no-scroll {
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .screen {
        height: auto;    
    }

    .max-container {
        padding: 0 20px;
    }

    .body-container {
        padding: 0 16px;
    }
    
}




/* ----------------------------------------------------------------------------------------------------------------- */
/* TYPOGRAPHY ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------- */

.root h1, 
.root h2, 
.root h3, 
.root p {
    margin: 0;
    padding: 0;
}

.root h1 {
    font-family: BentonSansLt, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 56px;
    line-height: 64px;
    /* color: #ffffff; */
    margin: 0;
    padding: 0;
}

.root h1 span.bold {
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.root h2 {
    font-family: BentonSansLt, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
}

.root h3 {
    font-family: BentonSansMd, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #595959;
}

/* h4 {
    font-family: BentonSansMd, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #595959;
    margin: 0 0 5px;
} */

.anim-frame-2 h4{
    font-size: 18px;
    line-height: 24px;
}

.root .anim-frame-2 h3{
    font-size: 18px !important;
    line-height: 24px !important;
    font-family: BentonSansLt, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin-bottom: 15px;
}

.root p {
    font-family: BentonSansLt, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 32px;
}

.root p span.bold {
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

a.text-link {
    padding: 0 !important;
}

.frame-content .col-1 p span.bold{
    font-weight: 500;
}

.hero p {
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.hero p span.bold {
    font-family: BentonSansMd, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 500;
}

p.text-small {
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

p.text-small span.bold {
    font-family: BentonSansMd, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.text-light {
    color: #ffffff;
}

.super {
    font-size: 16px;
    line-height: 0;
    vertical-align: super;
}

@media screen and (max-width: 768px) {
    .root h1 {
        font-size: 35px;
        line-height: 42px;
    }

    /* h1 span.bold {
        font-family: BentonSansLt, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 300;
    } */

    .root h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .root p {
        font-size: 16px;
        line-height: 24px;
    }

    .footer-amex-ribbon{
        width: 174px !important;
        bottom: -45px !important;
    }
}




/* ----------------------------------------------------------------------------------------------------------------- */
/* BUTTONS --------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

a[data-class='cta-btn business'],
a[data-class='cta-btn platinum'],
a[data-class='cta-btn'],
.faux-btn {
    display: block !important;
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background: #006FCF;
    border-radius: 8px;
    padding: 12px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

a[data-class='cta-btn business'] i,
a[data-class='cta-btn platinum'] i,
a[data-class='cta-btn'] i,
.faux-btn i {
    display: none;
}

a[data-class='cta-btn business']:hover,
a[data-class='cta-btn platinum']:hover,
a[data-class='cta-btn']:hover {
    color: #ffffff;
    background: #0264af;
}

a[data-class='cta-btn business']:hover .caret:before,
a[data-class='cta-btn platinum']:hover .caret:before,
a[data-class='cta-btn']:hover .caret:before {
    transform: translateX(2px);
}

a[data-class='cta-btn business']:hover .caret:after,
a[data-class='cta-btn platinum']:hover .caret:after,
a[data-class='cta-btn']:hover .caret:after {
    transform: translateX(2px);
}

a[data-class='cta-btn business']:hover .caret:after,
a[data-class='cta-btn platinum']:hover .caret:after,
a[data-class='cta-btn']:hover .caret:after {
    border-left-color: #0264af;
}

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

.tabscomp a:focus,
.collapsible-panel a:focus,
.persistent-ctas-fixed a:focus,
.tabscomp a.text-link:focus,
.collapsible-panel a.text-link:focus,
.persistent-ctas-fixed a.text-link:focus {
    outline: 1px dashed #3D3D3D !important;
    outline-offset: 3px !important;
}

.caret {
    position: relative;
    margin-left: 10px;
}

.caret:before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    border-left: 11px solid #ffffff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transition: all 0.3s ease;
}

.caret:after {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    border-left: 10px solid #006FCF;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transition: all 0.3s ease;
}

@media screen and (max-width: 650px) {

    /* a[data-class='cta-btn business'],
    a[data-class='cta-btn platinum'],
    a[data-class='cta-btn'],
    .faux-btn {
        padding: 12px;
    } */

    .gallery-wrap{
        display: none !important;
    }

     .first-collage-img{
        display: block !important;
    }
    
}






#loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #404347;
    overflow: hidden;
    z-index: 9999;
}

#loading-mask img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
}




/* ----------------------------------------------------------------------------------------------------------------- */
/* SECTION: HERO --------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

.hero {
    background: #3e4143;
}

.hero .max-container {
    height: 8000px;
}

.hero * {
    color: #ffffff;
    text-align: left;
}

/* .anim-frame-1 .frame-content {
    position: fixed;
    top: 50%;
    transform: translateY(-200px);
    background: turquoise;
} */

.hero .anim-frame-1 {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    overflow: hidden;
    height: 100vh;
    z-index: 1000;
}

.hero .anim-frame-1 .frame-content {
    position: absolute;
    top: 45%;
    /* transform: translateY(calc(-50% - 200px)); */
    transform: translateY(-50%);
}

.hero .anim-frame-1 .frame-content .anim-text-1,
.hero .anim-frame-1 .frame-content .anim-text-2 {
    display: block;
}

.hero .max-container {
    position: relative;
}

.hero .anim-frame-2 {
    position: fixed;
    top: 50%;
    transform: translate(200px, -50%);
    width: 390px;
    z-index: 9999;
    left: 55%;
    opacity: 0;
    /* pointer-events: none; */
}

/* .hero .anim-frame-2 {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    overflow: hidden;
    height: 100vh;
    z-index: 9999;
}

.hero .anim-frame-2 .body-container {
    display: flex;
    justify-content: flex-end;
}

.hero .anim-frame-2 .frame-content {
    position: absolute;
    top: 50%;
    transform: translateX(2000px) translateY(-50%);
    width: 440px;
    padding: 32px;
} */

.hero h1 {
    color: #ffffff;
}

.hero h2 {
    margin-bottom: 15px;
}

.hero p {
    margin-bottom: 50px;
}

.hero p a {
    min-height: 0 !important;
    padding: 0 !important;
}

.hero p a:hover {
    color: #b6b6b6;
}

.hero a[data-class='cta-btn platinum'] {
    margin-bottom: 5px;
}

.br-mobile {
    display: none;
}

.video-container-mobile {
    display: none;
    height: 2500px;
}

@media screen and (max-width: 1100px) {
    .hero h1 {
        max-width: 400px;
    }
}

@media screen and (max-width: 1000px) {
    .hero .anim-frame-2 {
        width: 40%;
    }
}

@media screen and (max-width: 650px) {
    .hero .anim-frame-1 .frame-content .anim-text-1,
    .hero .anim-frame-1 .frame-content .anim-text-2 {
        display: inline;
    }

    .br-mobile {
        display: inline;
    }

    .br-desktop {
        display: none;
    }

    .video-container-mobile {
        display: block;
    }

    .hero .max-container {
        height: 3500px;
        padding: 0 30px;
    }

    .hero .anim-frame-2 {
        width: calc(100% - 48px);
        margin-top: 50px;
    }
    
    .hero .anim-frame-1 .body-container,
    .hero .anim-frame-2 .body-container {
        padding: 0;
    }

    .hero .anim-frame-1 .frame-content {
        /* transform: translateY(calc(-50% - 200px)); */
        transform: none;
        top: 100px;
    }

    .hero .anim-frame-1 {
        overflow: initial;
    }

    .hero .anim-frame-2 {
        top: 0;
        left: 0;
        transform: translate(0, 50vh);
        opacity: 0;
        width: 100%;
        padding: 0 32px;
        margin-top: 250px;
    }

    .hero p {
        margin-bottom: 30px;
    }

    .hero a[data-class='cta-btn platinum'] {
        margin-bottom: 10px;
    }

    /* .hero .max-container {
        height: auto;
    }

    .hero .body-container {
        padding: 0;
    }

    .hero .anim-frame-1 {
        position: relative;
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .hero .anim-frame-1 .frame-content {
        position: relative;
        transform: none;
    }

    .hero h1 {
        max-width: 100%;
    }

    .hero .anim-frame-2 {
        position: relative;
        transform: none;
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .hero .anim-frame-2 .body-container {
        display: block;
    }

    .hero .anim-frame-2 .frame-content {
        position: relative;
        width: 100%;
        transform: none;
        padding: 0;
    }

    .video-container {
        position: static;
        height: auto;
        transform: none;
    }

    .video-background {
        position: static;
        transform: none;
    } */
}




/* ----------------------------------------------------------------------------------------------------------------- */
/* SECTION: BENEFITS ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

.white-bg {
    position: relative;;
    background: #ffffff;
    padding-top: 100px;
    overflow: hidden;
    z-index: 1001;
}

.benefit {
    padding-top: 40px;
}

#benefit-1 {
    padding-bottom: 200px;
}

.benefit-image {
    width: 10vw;
    height: 62vh;
    margin: 0 auto;
    opacity: .2;
    transition: height .4s ease;
}

.benefit-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-image img.mobile {
    display: none;
}

.benefit-copy {
    position: relative;
    width: 590px;
    min-height: 400px;
    background: #ffffff;
    padding: 32px;
    transform: translateY(-140px);
    z-index: 200;
}

.benefit-copy h3 {
    margin-bottom: 15px;
}

.benefit-copy p:not(:last-child) {
    margin-bottom: 20px;
}

.benefit-location {
    position: relative;
    top: 4px;
    padding-left: 23px !important;
}

.benefit-location img {
    position: absolute;
    top: -4px;
    left: 0;
    width: 18px;
    transform: translateY(4px);
    margin-right: 4px;
    vertical-align: unset;
}

@media screen and (max-width: 1024px) {
    .benefit {
        padding-top: 0;
        margin-bottom: 100px;
    }

    .benefit-image {
        height: 50vh;
    }

    .benefit-copy {
        width: 100%;
        min-height: 0;
        transform: translateY(-60px);
    }
}

@media screen and (max-width: 768px) {
    .white-bg {
        padding-top: 20px;
    }

    #benefit-1 {
        padding-bottom: 0;
    }

    .benefit {
        margin-bottom: 0;
    }

    .benefit-image {
        height: 400px;
        width: 100%;
        opacity: 1;
    }

    .benefit-image img.desktop {
        display: none;
    }

    .benefit-image img.mobile {
        display: block;
    }

    .benefit-copy {
        padding: 16px;
        margin-bottom: -15px;
    }
}




/* ----------------------------------------------------------------------------------------------------------------- */
/* PERSISTENT CTAS ------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

.persistent-ctas {
    position: absolute;
    top: 66.5vh;
    left: 50%;
    transform: translate(calc(100% - 80px), -48px);
    width: 270px;
    z-index: 1000;
    padding-top: 135px;
    opacity: 0;
    visibility: visible;
    z-index: 199;
}

.persistent-ctas .card-images,
.persistent-ctas-fixed .card-images {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% - 8px));
    width: 170px;
    /* height: 93px; */
}

.persistent-ctas .card-images img,
.persistent-ctas-fixed .card-images img {
    width: 172px;
    transform: translate(-6px, -4px)
}

.persistent-ctas .card-images .business,
.persistent-ctas-fixed .card-images .business {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 110px; */
    height: 70px;
    border-radius: 2px;
    transition: transform .3s ease-out;
}

.persistent-ctas .card-images .platinum,
.persistent-ctas-fixed .card-images .platinum {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(24px, 23px);
    /* width: 110px; */
    height: 70px;
    border-radius: 2px;
    transition: transform .3s ease-out;
}

.persistent-ctas-fixed a[data-class='cta-btn platinum'] {
    margin-bottom: 5px;
}

.persistent-ctas-fixed:hover a[data-class='cta-btn platinum']:hover ~ .card-images .platinum,
.persistent-ctas-fixed:hover a[data-class='cta-btn business']:hover ~ .card-images .business {
    transform: translate(24px, 23px);
    z-index: 500;
}

.persistent-ctas-fixed:hover a[data-class='cta-btn business']:hover ~ .card-images .platinum {
    transform: translate(0, 0);
    z-index: 499;
}

.persistent-ctas-fixed {
    position: fixed;
    width: 270px;
    /* top: 100%; */
    top: calc(62vh + 40px);
    /* top: calc(62.5vh - 40px); */
    left: 50%;
    padding-top: 135px;
    opacity: 1;
    z-index: 9998;
    transform: translate(calc(100% - 80px), 0);
    /* visibility: visible; */
    margin-top: 50vh;
}

.persistent-ctas-mobile {
    /* display: none; */
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 112px;
    background: #ffffff;
    padding: 25px 10px 10px 108px;
    z-index: 800;
    transform: translateY(112px);
}

.persistent-ctas-mobile.visible {
    transform: translateY(-112px);
}

.persistent-ctas-mobile img {
    position: absolute;
    width: 75px;
    top: 30px;
    left: 20px;
}

.persistent-ctas-mobile a {
    display: block !important;
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0066BE;
    text-decoration: none;
    padding: 0 !important;
    min-height: auto !important;
}

.persistent-ctas-mobile a:first-of-type {
    margin-bottom: 15px;
}

.persistent-ctas-mobile .caret {
    position: relative;
    margin-left: 10px;
    top: 2px;
}

.persistent-ctas-mobile .caret:before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    border-left: 8px solid #ffffff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    transition: all 0.3s ease;
    left: -3px;
    z-index: 10;
}

.persistent-ctas-mobile .caret:after {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    border-left: 7px solid #006FCF;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    transition: all 0.3s ease;
}

.persistent-ctas-mobile a i {
    display: none;
}

@media screen and (min-width: 1350px) {
    .persistent-ctas-fixed {
        left: calc(75% - 135px);
        transform: none;
    }
}

@media screen and (min-width: 1600px) {
    .persistent-ctas-fixed {
        left: 50%;
        transform: translate(calc(100% - 10px), 0);
    }
}

@media screen and (max-width: 1024px) {

    .persistent-ctas {
        display: block;
        top: 330px;
        visibility: hidden;
        opacity: 0;
    }

}




/* ----------------------------------------------------------------------------------------------------------------- */
/* SECTION: FORM FACTOR -------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

.ff {
    background: #404347 linear-gradient(314deg, #0D1614 9%, #404347 54%) no-repeat bottom right;
    background-size: 800px 800px;   
    /* min-height: 200vh; */
    padding-top: 20vh;
    padding-bottom: 190px;
    /* margin-bottom: 500px; */
}

.ff * {
    color: #ffffff;
}

.ff h2 {
    margin-bottom: 17px;
}

.ff p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

.ff .anim-frame-1 {
    padding-bottom: 40vh;
}

.ff .anim-frame-1 .frame-content {
    display: flex;
    gap: 9%;
    flex-direction: row;
}

.ff .anim-frame-1 .frame-content .col-1 {
    flex: 0 0 390px;
    width: 390px;
    padding: 32px 10px 32px 32px;
    margin-left: 80px;
    margin-left: 0;
    padding-left: 0;
}

.ff-cards-mobile {
    display: none;
    max-width: 100%;
    width: 300px;
    margin: 0 auto 105px;
}

.ff .anim-frame-2 .frame-content {
    display: flex;
    gap: 30px;
    flex-direction: row;
}

.ff .anim-frame-2 .frame-content .col-1 {
    padding: 20px 30px 0 0;
    width: 32%;
    flex: 0 0 32%
}

.ff .frame-content .cta-images {
    position: relative;
    margin-bottom: 55px;
    background: #ffffff;
    width: 100%;
    padding-top: 66%;
}

.ff .frame-content h4{
    margin-bottom: 24px;
}
.ff .frame-content h3{
    margin-bottom: 24px;
}

.ff .frame-content .cta-images .cta-image-full {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 101%;
    height: 100%;
    overflow: hidden;
    transition: all .2s ease;
}

.ff .frame-content .cta-image-full img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    transition: all .2s ease;
}

.ff .frame-content .cta-images .cta-image-full:before,
.ff .frame-content .cta-images .cta-image-full:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 8px;
    background: #ffffff;
    transition: all .2s ease;
}

.ff .frame-content .cta-images .cta-image-full:before {
    top: -8px;
    z-index: 10;
}

.ff .frame-content .cta-images .cta-image-full:after {
    bottom: -8px;
    z-index: 11;
}

.ff .frame-content .cta-images:hover .cta-image-full:before {
    top: 0;
}

.ff .frame-content .cta-images:hover .cta-image-full:after {
    bottom: 0;
}

.ff .frame-content .cta-images:hover .cta-image-full {
    width: calc(100% - 16px);
}

.ff .frame-content .cta-images .cta-image-card {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    pointer-events: none;
}

.ff .frame-content .cta-images .cta-image-card img {
    width: 100%;
    max-width: none;
    pointer-events: none;
}

.ff .anim-frame-2 .frame-content .col-2,
.ff .anim-frame-2 .frame-content .col-3 {
    text-align: center;
    width: 31.5%;
    flex: 0 0 31.5%;
}

.ff .anim-frame-2 .frame-content a,
.ff .anim-frame-2 .frame-content a {
    max-width: 180px;
    margin: 0 auto;
}

.ff .anim-frame-2 .frame-content a:hover{
    color: #b6b6b6;
}

@media screen and (max-width: 1024px) {

    .ff {
        min-height: auto;
        padding: 80px 0 40px;
    }

    .ff .body-container {
        padding: 0 24px;
    }

    .ff .anim-frame-1 {
        margin-bottom: 70px;
        padding-bottom: 0;
    }

    .ff .anim-frame-1 .frame-content {
        display: block;
        width: 100%;
        padding: 0;
        margin-left: 0;
    }

    .ff .anim-frame-1 .frame-content .col-1 {
        padding: 0;
        margin-left: 0;
    }

    .ff-cards-mobile {
        display: block;
    }

    .ff .anim-frame-2 .frame-content {
        display: block;
        padding-bottom: 75px;
    }

    .ff .anim-frame-2 .frame-content .col-1 {
        width: 100%;
        padding: 0;
        margin-bottom: 65px;
    }

    .ff .anim-frame-2 .frame-content .col-2 {
        width: 100%;
        max-width: 500px;
        padding: 0;
        margin: 0 auto 60px;
    }

    .ff .anim-frame-2 .frame-content .col-3 {
        width: 100%;
        max-width: 500px;
        padding: 0;
        margin: 0 auto;
    }

    .ff .frame-content .cta-images {
        margin-bottom: 78px;
    }
}

@media screen and (max-width: 650px) {
    .ff .anim-frame-1 .frame-content .col-1 {
        width: 100%;
    }

    .ff .anim-frame-1 .frame-content .col-2 {
        display: none;
    }
}












@media (prefers-reduced-motion: reduce) {
    .root *,
    .root *:before,
    .root *:after {
        transition: none !important;
    }

    .persistent-ctas .card-images .business {
        transition: none !important;
    }
}






/* FOOTER */


@media screen and (max-width: 768px){

    .sigma-footer-accordion{
        margin: 0px !important;
        margin-top: 64px !important;
    }

    .panel-section-container{
        padding-top: 50px !important;
    }

    .panel-section-container .tab-content{
        padding: 48px 16px 100px 16px !important;
    }

    .panel-section-container .tabs label{
        padding: 0px !important;
        padding-bottom: 10px !important;
        padding-right: 12px !important;
    }

    .panel-section-container .body-container{
        padding: 0px !important;
    }

    .panel-section-container .tabs label{
        padding: 0px !important;
        padding-left: 16px !important;
    }

    .panel-section-container #tab1:checked ~ label[for="tab1"] span, .panel-section-container #tab2:checked ~ label[for="tab2"] span{
        padding-bottom: 2px !important;
    }

    .sigma-footer-accordion .accordion-content{
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 32px !important;
    }

    .sigma-footer-accordion .accordion-header{
        padding: 0px !important;
    }

    .panel-section-container .tabs label{
        font-size: 14px !important;
    }

}

.panel-section-container .tabs {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* Hide radio buttons */
.panel-section-container .tabs input[type="radio"] {
    display: none;
}

/* Style labels (tabs) */
.panel-section-container .tabs label {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: -4px;
    /* border: 1px solid #ccc; */
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 10px 40px;
    color: #404347;
    margin-bottom: 0px;
}

/* Active tab styling */
.panel-section-container #tab1:checked ~ label[for="tab1"],
.panel-section-container #tab2:checked ~ label[for="tab2"]{
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}

.panel-section-container #tab1:checked ~ label[for="tab1"] span,
.panel-section-container #tab2:checked ~ label[for="tab2"] span{border-bottom: 4px solid #006FCF;padding-bottom: 10px;color: #000000;}


.panel-section-container .tab-content {
    display: none;
    padding: 64px 40px;
    background-color: #F4F4F4;
    border-top: 1px solid #BDBDBD;
}

/* Show the active tab content */
.panel-section-container #tab1:checked ~ #content1,
.panel-section-container #tab2:checked ~ #content2,
.panel-section-container #tab3:checked ~ #content3 {
    display: block;
}
.panel-section-container{
    background-color: #F4F4F4;
    padding: 100px 0px 30px;
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000000;
    font-size: 16px;
}
.panel-section-container p{
    font-size: 14px;
    line-height: 22px;
    padding: 0px;
    font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #3d3d3d;
        margin: 10px 0px;
}

.panel-section-container .tab-header{
    font-weight: bold;
        margin-top: 40px;
}

.panel-section-container .para-bold{
    font-weight: bold;
}

.footer-amex-ribbon{
    width: 365px;
    position: relative;
    bottom: -64px;
    margin: 0 auto;
    left: 0;
    right: 0;
    display: block;
}

.panel-section-container sup{
    font-size: 10px;
}


/*Accordion css starts*/
    .sigma-footer-accordion {
      /* width: 100%; */
      margin: 64px 40px;
      border-radius: 5px;
      background-color: #ffffff;
      font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 22px;
    }
    .sigma-footer-accordion .accordion-header {
        font-family: BentonSansBold, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 16px;
        padding: 15px;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        color: #000000;
    }
    .sigma-footer-accordion .accordion-header::before {
     
      content: url('https://qwww.americanexpress.com/content/dam/amex/en-us/campaigns/ob-sandbox/sigma-aurora/images/chevron-down.png');
      font-size: 16px;
      transition: transform 0.3s;
      padding-right: 10px;
     margin-top: 0px;
    }
    .sigma-footer-accordion .accordion-header.collapsed::before {
      transform: rotate(-90deg); /* Rotates to look like ">" */
          margin-top: -10px;
    }
    .sigma-footer-accordion .accordion-content {
      padding: 15px;
      display: block; /* Open by default */
    }
    .sigma-footer-accordion .accordion-header.collapsed + .accordion-content {
      display: none;
    }

    .sigma-footer-accordion p{
        font-size: 14px;
        line-height: 22px;
        color: #3D3D3D;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 400;
    }

    .sigma-footer-accordion .terms-header{
        font-weight: 700;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    }





    .sigma-card-tabs .tabs .tab-menu .tab-link[aria-selected=true]:after{
        background: none;
    }

    .sigma-card-tabs .tabs .tab-menu .tab-link[aria-selected=true]{
        /* border: 0px; */
        /* border-bottom: 4px solid #006FCF; */
        color: #000000;
        font-weight: 500;
        background-color: #F4F4F4;
        font-family: BentonSansBold, Helvetica Neue, Helvetica, Arial, sans-serif;
        /* padding-bottom: 11px; */
    }

    .sigma-card-tabs .tab-link span{
        color: #404347;
    }

    .sigma-card-tabs .tabs .tab-menu .tab-link[aria-selected=true] span{
        font-family: BentonSansBold, Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #000000;
        border-bottom: 4px solid #006FCF;
    }

    .sigma-card-tabs .tabs .tab-menu .tab-link *{
            padding-bottom: 10px;
    }

    .sigma-card-tabs .tabs .tab-menu button{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #404347;
        border: 0px;
        padding-bottom: 0px;
    }

    .sigma-card-tabs .tabs .tab-menu{
        display: inline-block;
    }

    .sigma-card-tabs .tabs .tab-menu .tab-link{
        background: none;
        float: left;
        /* padding-bottom: 11px; */
        margin-bottom: 7px;
        border-bottom: 4px solid transparent;
    }

    .sigma-card-tabs .tabs.border{
        border: 0px;
    }

    .sigma-card-tabs {
        background-color: #F4F4F4;
        padding: 100px 0px 30px;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #000000;
        font-size: 16px;
        padding: 100px 0px 30px;
    }

    .sigma-card-tabs .tabs .tab-content, .sigma-card-tabs .tabs .tab-menu .tab-link[aria-selected=true]:focus, .sigma-card-tabs .tabs .tab-menu .tab-link[aria-selected=true]:hover{
        background-color: #F4F4F4;
    }

    .sigma-card-tabs .tabs .tab-content{
        border-top: 1px solid #BDBDBD;
        position: relative;
        top: -17px;
        padding: 64px 20px !important;
    }

    .sigma-card-tabs .tabs .tab-content p{
        font-size: 14px;
        line-height: 22px;
        padding: 0px;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        color: #3d3d3d;
        margin: 10px 0px;
    }

    .sigma-card-tabs .tabs .tab-content p.tab-header{
        font-weight: bold;
        margin-top: 40px;
    }

    .sigma-tandc{
        margin-bottom: 64px;
        margin-top: 80px;
    }

    .sigma-tandc button{
        font-family: BentonSansBold, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 16px;
        padding: 15px;
        cursor: pointer;
        font-weight: bold;
        color: #000000;
    }

    .sigma-tandc button span{
        font-family: BentonSansBold, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 16px;
        cursor: pointer;
        font-weight: bold;
        color: #000000;
    }

    .sigma-tandc .collapsible[aria-expanded=true], .collapsible[aria-expanded=true] .icon{
        color: #000000;
    }

    .sigma-tandc .collapsible[aria-expanded=true] .collapsible-caret:before{
        transform: rotate(0deg);
        background-image: url(https://qwww.americanexpress.com/content/dam/amex/en-us/campaigns/ob-sandbox/sigma-aurora/images/chevron-down.png);
    }

    .sigma-tandc .collapsible-caret:before{
        background-image: url(https://qwww.americanexpress.com/content/dam/amex/en-us/campaigns/ob-sandbox/sigma-aurora/images/chevron-down.png);
         transform: rotate(270deg);
    }

    .sigma-tandc .collapsible:hover:not(.expandable-link){
        background: none !important;
    }

    .sigma-tandc .dls-gray-01-bg, .dls-gray-01-bg-hvr:hover{
        background: none !important;
    }

    .sigma-tandc .dls-white-bg, .dls-white-bg-hvr:hover{
        background: none;
        border: 0px;
    }

    .sigma-tandc .border-t, .border-tb{
        border: 0px !important;
    }

    .sigma-tandc .bordered-a>*, .bordered>:not(:last-child){
        border: 0px !important;
    }

    .sigma-tandc .border-t, .border-tb{
        background: none !important;
        border: 0px;
    }

    .sigma-tandc p.terms-header{
        font-weight: 700;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .sigma-tandc p{
        font-size: 14px;
        line-height: 22px;
        color: #3D3D3D;
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 400;
    }

    /* New Tab & terms & conditions content styling starts */

    .sigma-card-tabs .tabs .tab-content p.tab-header-text{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 20px;
        line-height: 28px;
        font-weight: 400;
        color: #3D3D3D;
        margin: 0px;
    }

    .sigma-card-tabs .tabs .tab-content p.tab-header-text .tab-header-text-bold{
        font-weight: 700;
        color: #3D3D3D;
    }

    .sigma-card-tabs .tabs .tab-content p.tab-heading{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 22px;
        font-weight: 700;
        color: #3D3D3D;
        margin: 24px 0px;
    }

    .sigma-card-tabs .tabs .tab-content p.tab-sub-head{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #3D3D3D;
    }

    .sigma-card-tabs .tabs .tab-content p.tab-sub-head span.tab-sub-head-bold{
        font-weight: 700;
        color: #3D3D3D;
    }

    .sigma-card-tabs li{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        color: #3D3D3D;
        margin-left: 5px;
    }

    .sigma-card-tabs li span.list-desc{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        color: #3D3D3D;
        display: block;
    }

    .sigma-card-tabs .tab-sub-head a{
        color: #006FCF;
        text-decoration-line: underline;
    }

    .sigma-card-tabs .tabs .tab-content{
        padding-bottom: 0px !important;
    }

    
    .sigma-tandc p.terms-heading{
        font-family: BentonSans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: #3D3D3D;
        padding-top: 20px;
    }

    .terms-header-desc a{
        color: #006FCF;
        text-decoration-line: underline;
    }

    .sigma-tandc p.terms-header-first{
        padding-top: 32px;
    }

    .sigma-tandc p.terms-heading-sec{
        padding-bottom: 5px;
    }

    .sigma-tandc p.terms-header-desc{
            padding-bottom: 25px;
    }

    .sigma-tandc p.terms-header-desc-subhead{
        padding-bottom: 10px;
    }

    .sigma-card-tabs a{
        color: #006FCF;
        text-decoration-line: underline;
    }

    .sigma-card-tabs a:hover{
        color: #006FCF;
        text-decoration-line: underline;
    }

    .tandc-card-list a{
        color: #006FCF;
        text-decoration-line: underline;
    }
    .tandc-card-list a:hover{
        color: #006FCF;
        text-decoration-line: underline;
    }


    /* New Tab content styling ends */

    @media screen and (max-width: 768px){

        .sigma-card-tabs .tabs .tab-menu .tab-link {
            background: none;
            float: left;
            width: auto;
            padding: 0px !important;
            padding-right: 30px !important;
            font-size: 14px !important;
        }

        .sigma-card-tabs .tabs .tab-content{
                top: -17px;
                padding: 48px 16px 10px 16px !important;
        }

        .sigma-card-tabs{
                padding-top: 50px !important;
        }

        .sigma-card-tabs .tabs .tab-menu{
                padding-left: 16px !important;
        }

        .sigma-card-tabs .container{
                max-width: 100%;
                padding: 0px;
        }

        .sigma-card-tabs > .container > .row {
            margin: 0 !important;
        }

    }







/* CANVAS */

canvas#video-canvas-desktop {
  /* position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  display: block; */
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1600px;
    height: auto;
    display: block;
    left: 50%;
    max-width: 100%;
}

canvas#video-canvas-mobile {
    position: fixed;
    top: 50px;
    width: calc(100% - 60px);
    height: auto;
    display: none;
    max-width: 90%;
}

@media screen and (max-width: 650px) {
    canvas#video-canvas-desktop {
        display: none;
    }

    canvas#video-canvas-mobile {
        display: block;
    }
}









.white-bg {
    overflow: visible;
}

.screen.collage-container {
    height: auto;
    min-height: 100vh;
}

.collage-scroll {
    /* background: pink; */
    position: relative;
    height: 2000px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.collage-final-state {
    position: fixed;
    /* width: 366px; */
    /* height: 201px; */
    width: 100%;
    height: 62vh;
    max-width: 1600px;
    /* height: 62vh; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    margin-top: 100vh;
}

.collage-final-state img.mobile {
    display: none;
}

@media screen and (max-width: 1024px) {
    .collage-final-state {
        width: calc(100% - 40px);
        height: 400px;
        margin-top: calc(100vh + 50px);
    }
}

@media screen and (max-width: 650px) {
    .collage-final-state {
        width: calc(100% - 40px);
        height: 400px;
    }

    .collage-final-state img.mobile {
        display: block;
    }

    .collage-final-state img.desktop {
        display: none;
    }    
}

.box-container {
    position: fixed;
    /* background: lightgrey; */
    width: 366px;
    height: 201px;
    /* border: 3px solid red; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 100vh;
}

.collage-item {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.collage-item-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 101%;
    height: 101%;
    transform: translate(-50%, -50%);
}

.collage-item-top {
    position: absolute;
    bottom: 107%;
    left: 0;
    width: 435px;
    height: 232px;
}

.collage-item-left {
    position: absolute;
    right: 104%;
    bottom: 0;
    width: 269px;
    height: 322px;
}

.collage-item-right {
    position: absolute;
    left: 104%;
    bottom: 0;
    width: 321px;
    height: 201px;
}

.collage-item-bottom-center {
    position: absolute;
    top: 107%;
    left: 19%;
    width: 404px;
    height: 226px;
}

.collage-item-bottom-left {
    position: absolute;
    top: 107%;
    right: 86%;
    width: 404px;
    height: 226px;
}

#benefit-1 .benefit-image {
    width: 100%;
    opacity: 0;
}

#benefit-1 .benefit-image {
    overflow: hidden;
}

#benefit-1 .benefit-image img {
    position: relative;
    top: 50%;
    left: 50%;
    width: 101%;
    height: 101%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}