@charset "utf-8";
/* CSS Document */



    /**  testing code to clean up scaled images  **/
    img {
      
        max-width: 100%;
    }

    /** end testing code  **/

    /**  hiding breadcrumb but keeping spacing  **/
    .jpmc-breadcrumbs {
        visibility: hidden !important;
    }


    .nowrap {
        white-space: nowrap;
    }























    /** adding arrow to teal text links **/

    a.primary.link {
        color: #1a7b99;
        font-size: 14px;
        font-weight: 400;
        font-family: "Amplitude";
        line-height: 24px;
        letter-spacing: 2.3px;
    }

    a.primary.link:hover {
        text-decoration: underline;
    }

    a.primary.link:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #1a7b99;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 12px;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    a.primary.link:hover::after {

        /**
        transform: translateX(50%);
        right: 2px;
        transition: 0.6s ease-in-out;
        -o-transition: 0.6s ease-in-out;
        -ms-transition: 0.6s ease-in-out;
        -moz-transition: 0.6s ease-in-out;
        -webkit-transition: 0.6s ease-in-out;
}
        **/

        animation: slide 2s ease-in-out infinite;
        /*margin-left: 3px;*/
    }

    @keyframes slide {

        0%,
        100% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(10px, 0);
        }
    }


    a.primary.link.white,
    a.primary.link.white:after {

        color: #ffffff;
    }

    a.primary.link.white:hover,
    a.primary.link.white:hover::after {

        color: #D6B89C;
    }

    /**  one sided container **/

    .container-right-main {
        /*  padding-left: 6em; */
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }



    .container-right {
        padding: 0 0 0 1em;
        width: auto;
        margin-left: 0;
    }

    .container-right-padding-mobile {}

    @media (max-width:991px) {
        .container-right {
            margin-right: 0;
            margin-left: 0;
            padding: 0;
            /*margin-left: calc(50vw - 375px);*/

        }

        .container-right-padding-mobile {
            padding-left: 1em;
        }
    }

    /*
@media (min-width:992px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 485px);
  }
}
*/

    @media (min-width:1200px) {
        .container-right {
            margin-right: 0;
            margin-left: calc(50vw - 609px);
        }
    }

    .container-left {
        padding-right: 1em;
        width: auto;
        margin-right: 0;
    }

    @media (max-width:991px) {
        .container-left {
            margin-left: 0;
            /*margin-left: calc(50vw - 375px);*/

        }
    }

    /*
@media (min-width:992px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 485px);
  }
}
*/

    @media (min-width:1200px) {
        .container-left {
            margin-left: 0;
            margin-right: calc(50vw - 609px);
        }
    }


    /** end one sided container **/

    /** putting image flush right **/
    .extend-image-right {
        z-index: 0;
        background-color: #000000;
        margin-left: 0;
    }

    .extend-image-right:before {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/2022_director_advisor_services_1440x1920.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        width: 50em;
        /* allow for bootstrap column padding */
        top: 0;
        left: -15px;
        bottom: 0;
    }

    .extend-image-right::after {
        content: "";
        height: 8px;
        width: 80em;
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/2022_director_advisor_services_bronze_bar.svg);
        background-repeat: repeat-x;
        display: block;
        position: absolute;
        left: -15px;
        bottom: 0;
    }

    @media only screen and (min-width: 2000px) {
        .extend-image-right::before {
            width: 76em;
        }

        .extend-image-right::after {
            width: 999em;
        }

    }

    @media only screen and (min-width: 3000px) {
        .extend-image-right::before {
            width: 100em;
        }
    }

    .extra-padding {
        padding: 3rem 2rem;
    }



    /** quote section **/
    .box__title {
        font-weight: bold;
        margin-top: 20px;
    }

    .box__subtitle {
        line-height: 1.1;
    }

    .profile-description {
        color: #565A5D;
        font-family: "Amplitude-Medium";
        line-height: 1.3;
        margin: 0;
    }

    .img-word-director {
        max-width: 120px;
        margin-bottom: 20px;
    }




    .bg-image-right {
        background: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/WTD_podcast_art_RVSD-01.png) no-repeat !important;

        background-size: cover !important;
    }




    /**  End of custom code ak **/
    html,
    :root {
        scroll-behavior: smooth;
    }



    body {

        background-color: #FFF;
        /*max-width:87.5em;*/
        margin: 0 auto;
        color: #31373d;
        font-family: "Amplitude", "Amplitude Regular", "Amplitude Medium", "Amplitude Light", Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.02em;
        overflow-x: hidden;


    }



   

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    b,
    th,
    label {
        
        letter-spacing: 0.02em;
        color: #31373d;
    }

    /****** Fonts ******/
    .section--font-black h2,
    .section--font-black h3,
    .section--font-black h4,
    .section--font-black h5,
    .section--font-black h6,
    .section--font-black p,
    .section--font-black p a,

    .section--font-black form {
        color: #31373D;
        letter-spacing: .02em;

    }

    .section--font-white h2,
    .section--font-white h3,
    .section--font-white h4,
    .section--font-white h5,
    .section--font-white h6,
    .section--font-white p,
    .section--font-white p a,
    .section--font-white li,
    .section--font-white form {
        color: #ffffff;
        letter-spacing: .02em;

    }

    .section--font-gray h2,
    .section--font-gray h3,
    .section--font-gray h4,
    .section--font-gray h5,
    .section--font-gray h6,
    .section--font-gray p,
    .section--font-gray p a,

    .section--font-gray form {
        color: #31373D;
        letter-spacing: .02em;


    }

    section .section--background-white .content-wrap p a {
        /**   font-family: "Amplitude-Medium"; **/
        text-decoration: underline;
    }

    .underline {

        text-decoration: underline;
    }


    section .section--background-white .content-wrap-intro p a {
        /**   font-family: "Amplitude-Medium"; **/
        text-decoration: underline;
    }

    section .content-wrap p a {
        color: #008297;
    }

    section .content-wrap-intro p a {
        color: #008297;
    }



h2.section__header {
        
        font-weight: 500;
        line-height: 1.37;
        font-size: 32px;
        color: #31373D;
        letter-spacing: 0.01em;
        margin-bottom: 1em;
        text-transform: uppercase;
        padding-top: 30px;


    }

    


 

    .header-40px {
        font-size: 2.5em;
        font-weight: 300;
        line-height: 1.1;
        color: #31373D;
        
        text-transform: none;
        
        margin: .5em 0;
    }

    .header-40px  span {
        color: #936846;
    }

    .subheader-40px {
        font-size: 2.5em;
        font-weight: 300;
        line-height: 1.1;
        color: #31373D;
        text-align: left;
        text-transform: none;
        
        margin: .5em 0;
    }

  


    span.stat {
        font-size: 1.3em;
    }


    h3.section__sub-header {
        font-weight: 500;
        font-size: 1.8em;
        text-align: center;
        margin: 1.5em auto 1.2em;
        max-width: 800px;
    }

    h3.section__description {
        font-family: "Amplitude-Light";
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 2em;
    }







    .content-wrap p a {
        font-weight: 500;
        text-decoration: underline;
    }

    .content-wrap-intro p a {
        font-weight: 500;
        text-decoration: underline;
    }

    .content-wrap-intro {
        max-width: 850px;
        width: 100%;
        padding: 5em 0 5em;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    .content-wrap {
        max-width: 1150px;
        width: 100%;
        padding: 2em 0 2em;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }



    small {
        font-size: .8em;
    }

    


    /****** General ******/
    .content-section__wrap {
        max-width: 1000px;
        width: 100%;
        margin: 1% auto;
    }

    /*General: to be used on J.P. Morgan, Product names, etc*/
    .no-wrap {
        white-space: nowrap;
    }

    .cover {
        z-index: 2;
    }


    /****** Content Sections  ******/
    section.section {
        padding: 40px 4%;
        position: relative;

        margin: 0;
    }

/*  -- trying to add margins to only Unbound p tags --  */
section.section p, .container-fluid p {
    margin-bottom: 40px;
}


    section.section-2 {
        padding: 4em 10% 6em;
        position: relative;
        max-width: 2650px;
        margin: auto;
    }



    /*BEM styling*/
    .section--background-white {
        background: #fff;
    }

    .section--background-marble {
        background: #f5f7f8;
        color: #31373D;
        

    }

    .section--background-gray-text {
        background: #f5f7f8;
        color: #31373D;
        

    }

    .section--image-black {
        background: #ffffff;
        color: #31373D;
        padding-right: 0 !important;

        text-align: right;

    }

    .section--background-tan {
        background: #faf8f2;


    }

    .section--background-jet {
        background: #101820;
    }

    .section--background-jet a {
        color: #ffffff;
    }

    .section--background-jet a:hover {
        text-decoration: underline;
    }

    .section--background-black {
        color: #f5f7f8;
        background: #31373D;
        
       
        
    }

    .section--slant::before {
        background: inherit;
        top: 0;
        content: '';
        display: block;
        height: 6.2em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(1.75deg);
        transform-origin: 100%;
        z-index: 2;
    }

    /* .hero-2::before {
        background: inherit;
        top: 0;
        content: '';
        display: block;
        height: 6.2em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(1.75deg);
        transform-origin: 100%;
        z-index: 2;
        }
    
    */

    .section--slant-after::after {
        background: inherit;
        bottom: -84px;
        content: '';
        display: block;
        height: 6.2em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(1.75deg);
        transform-origin: 100%;
        z-index: 2;
    }

    .border-box {
        margin: 2em;
        border: 3px solid;
        padding: 25px;
        text-align: center;
    }

    .border-box p {
        margin: 0;
        line-height: 1.3;
    }

    .border-box--teal {
        border-color: #008297;
    }

    .border-box--orange {
        border-color: #CC440D;
    }

    .border-box--green {
        border-color: #24874B;
    }



    /****** Responsive Media Queries  ******/

    /* Media Query - Tablet  */
    @media only screen and (max-width: 1200px) {
       

        section.section {
            padding: 60px ;
        }
    }



    @media only screen and (min-width: 575px) and (max-width: 900px) {

        section.section {
            padding: 2em;
            position: relative;
           
            margin: 0;
        }


        .section--background-gray-text {

            padding-left: 0em !important;

        }

        /*

        h2.section__header,
        h2.section__header {
            font-size: 2.7em;
        }

        */

        .section--slant::before {
            height: 4.2em;
        }

        .section--slant-after::after {
            height: 4.2em;
        }

        h3.section__sub-header {
            font-size: 1.4em;
        }
    }

    /* Media Query - Mobile  */
    @media only screen and (min-width: 300px) and (max-width: 576px) {

        section.section {
            padding: 40px 20px;
            position: relative;
            max-width: 2650px;
            /* margin: auto; */
            margin: 0;
        }

        .section--background-gray-text {

            padding-left: 0em !important;

        }

       

        h3.section__sub-header {
            font-size: 1.3em;
        }

        .overlapping-elements__text-box-mobile a {
            font-size: 0.7em !important;

        }

        .core__link .arrow {
            background-image: url("data:image/svg+xml,%3Csvg height='16px' version='1.1' viewBox='0 0 26 16' width='26px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E %3Cg id='Artboard' stroke='%2300477B' stroke-width='3' transform='translate(-666.000000, -6507.000000)'%3E %3Cg id='Group' transform='translate(667.000000, 6508.000000)'%3E %3Cpath d='M0.5,7.5 L21.5,7.5' id='Line-13'%3E%3C/path%3E %3Cpath d='M16.5,0.5 L23.0192024,7.01920241' id='Line-14'%3E%3C/path%3E %3Cpath d='M16.5,6.5 L23.0192024,13.0192024' id='Line-14' transform='translate(20.000000, 10.000000) scale(1, -1) translate(-20.000000, -10.000000) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
            width: 15px !important;
            height: 10px !important;
            position: absolute;
            background-repeat: no-repeat;
            background-size: 100%;
            margin-left: 12px;
            margin-top: 7px;
        }

    }


    /*********   start  --  main column container  ***********/

    #main-content, #main-content2, #main-content3 {

        display: flex;
        /* Required in case of using an infinite scroll */
        align-items: flex-start;
    }

    #main-col-container,
    #main-col-container2,
    #main-col-container3 {
        
        margin-bottom: 6em;
        position: relative;
        max-width: 1800px;
        padding: 1em 10%!important;

    }
.main-content-article {
    padding: 0 2em;
}
  

    #sidebar-mobile, #sidebar-mobile2  {
        margin-top: -6px;
        padding: 4em 1em;

    }


    .sticky-sidebar-container {
        

    
    }

  



    
    .sticky-sidebar {
        width: 100%;
        
        
        padding: 1em 1em 1em;
        color: #31373d;
        
        /**
        background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume2/banner-body-article3-2x.jpg');
        background-position: top right;
        
        background-repeat: no-repeat;
        background-size: contain;

        **/
    }




    .side-scroll-header {
        color: #8253bb;
        font-family: "Amplitude";
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        margin: 40px 0;
        text-transform: uppercase;
    }

    .side-scroll-blurb {
        font-size: 14px;
        font-family: "Amplitude Medium";
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.4;
        color: #31373d;
        margin-bottom: 30px;
    }

    .side-scroll-subhead {
        font-size: 16px;
        font-family: "Amplitude Regular";
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.4;
        color: #31373d;
        margin-bottom: 20px;
    }



    .sticky-sidebar p {
        font-size: 14px;
        font-family: "Amplitude";
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .sticky-sidebar nav ul {
        line-height: 3;
        margin-top: 2em;
    }

    .side-scroll-bottom-image {
        margin: 40px auto;
        display: block;
        max-width: 200px;
        width: 100%;
    }

    .side-scroll-full-image {
        width: 100%;
    }

    /**
    .sticky-sidebar nav ul li {
        border-left:1px solid #474C50;
        padding-left: 30px;


    }

    .sticky-sidebar nav ul li.current {
        border-left: 2px solid #936846;
    }
    **/

    /* Only stick if you can fit */
    @media (min-height: 300px) {
        .sticky-sidebar nav ul {
            position: sticky;
            top: 0;

        }
    }

    /* Only stick if you can fit */
    @media only screen and (max-width: 901px) {
        .sticky-sidebar nav ul {

            position: relative;

        }
    }

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

     #main-col-container,
    #main-col-container2,
    #main-col-container3 {
        
        margin-bottom: 10px;
        
        

        }
    }


    .sticky-sidebar nav ul li a {
        display: block;
        padding: 0.5rem 1rem;
        color: #31373d;
        text-decoration: none;
    }

    .sticky-sidebar nav ul li a {
        border-left: 1px solid #474c50;
        padding-left: 30px;
    }

    .sticky-sidebar nav ul li a.current {
        border-left: 4px solid #936846;
        font-weight: bold;
    }

    .sticky-sidebar nav ul li a:hover {
        font-weight: bold;
    }


.article-subheader {
    font-weight: 700;
}
p strong .article-color, .article-subheader {
    font-size: 18px;
}


   .article-mid-image {
        margin: 50px 0 80px;
    }
    
.sticky-sidebar-spacer {
    display: block;
    height: 120px;
}
    
    .sticky-image {
        opacity: .66;
        border-radius: 30px;
        max-height: 370px;
        width: 100%;
            height: auto;
        max-width: 370px;
        filter: brightness(88%);
    
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
        
    }
    
    
    /* once pinned */
.sticky-sidebar.Zebra_Pin .sticky-image {
    
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    opacity: 1;
    
    
    filter: brightness(100%);
}



    /**social sharing **/

  



/*********start  submenu styling **************/

#wired-header-submenu {
    background-color: #121B1F;
    min-height: 60px;
    
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;

    margin-left: auto;
    padding: 0 60px;
}
    
    .sticky-top{
    position:-webkit-sticky;
position:sticky;
top:56px;
z-index:1020;
}
    
    

#wired-header-submenu  > a {
    color: #ffffff;
}



#wired-header-submenu  .navbar-nav .nav-item  a:hover {
    
    text-decoration: underline;
}

#wired-header-submenu  .navbar-nav .nav-item  a.dropdown-toggle:hover {
    
    text-decoration: none;
}




#wired-header-submenu  .navbar-nav .nav-item  {
    padding: 10px 20px;
    
}

#wired-header-submenu  .navbar-nav .nav-link  {
    color: #ffffff;
    
}

#wired-header-submenu  .dropdown-menu {
    background-color: #121B1F; 
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #101820;
}

#wired-header-submenu  .dropdown-menu a {
    padding: 6px;
    color: #ffffff;
}

#wired-header-submenu  .dropdown-menu .dropdown-item:hover,
#wired-header-submenu  .dropdown-menu .dropdown-item:hover a {
    background-color: #ffffff; 
    
    color: #121B1F;
    
    
    text-decoration: none!important;
}


#wired-header-submenu .back-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 60px;
    border-right: solid 1px #474c50;
    width: 200px;

}
#wired-header-submenu .back-button a {
    color: #ffffff;
}

#wired-header-submenu .navbar-brand {
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 20px 20px;

}

#wired-header-submenu .navbar-brand img {
    width: 265px;
    height: 30px;
}

.navbar-toggler-text {
    color: #ffffff;
}

 span.navbar-toggler-text-open {
     display: none;
  }




 .navbar-toggler-text-close {
    display: inline;
  }


 /********** start -- Hero header styling ***********/

 .hero-overlay-logo {
     background: rgba(0,0,0, .80);
     height: 50px;
     min-width: 100%;
     width: 100%;
     text-align: center;
     position: absolute;
     top: 0;
     padding: 10px 0;
     z-index: 9;
 }

 .hero-overlay-logo  img {
     height: 30px;
     width: 151px;
     margin: 0 auto;
 }

    .section-hero {
    background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-3/articles/background-article-desktop.jpg'),   linear-gradient(to bottom, #121b1f 600px, #704578 600px 720px, #ffffff 720px );
    background-repeat: no-repeat;
    background-position: top center, center center;
    background-size: 100% 600px, cover;
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    margin-bottom: 60px;
        height: 900px;
}

    .hero-row-text {
        height: 270px;
        text-align: center;
    }
    
    .hero-text-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .hero-row-image {
        height: 630px;
        text-align: center;
        padding: 10px 80px;
    }
    
    .hero-row-image img {
        max-height: 600px;
        height: auto;
        width: auto;
        text-align: center;
        object-fit: contain;
    }


.lockup {
    margin-bottom: 30px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1.28px;
}

    .lockup  img{
        height: 22px;
    }



.readTime {
    margin-top: 30px;
    color: #ffffff;
    font-family: "Amplitude";
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.02em;
}







    .hero {
        padding: 0 0 3em 1.5em;
        width: auto;
        margin-left: 0;

        display: flex;
        max-width: 1200px;
        height: 700px;
        position: relative;
        align-items: flex-end;
    }

    @media only screen and (max-width:2000px) {
        #client-story-header {
            margin: 0;
            padding: 24em 0 0 10em;
        }


    }





    @media only screen and (max-width:1600px) {
        #client-story-header {
            margin: 0;
            padding: 18em 0 0 10em;
        }


    }

    @media only screen and (max-width:991px) {
        .hero {
            margin-right: 0;
            margin-left: 0;

            /*margin-left: calc(50vw - 375px);*/

        }
        
        .section-hero {
    background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-3/articles/background-article-desktop.jpg'),   linear-gradient(to bottom, #121b1f 420px, #704578 420px 540px, #ffffff 540px );
    background-repeat: no-repeat;
    background-position: top center, center center;
    background-size: 100% 420px, cover;
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    margin-bottom: 60px;
        height: 760px;
}
        
        .hero-row-image {
        height: auto;
        text-align: center;
        padding: 20px;
    }
        
        .sticky-image {
        opacity: 1;
            filter: brightness(100%);
    }
        
        .sticky-sidebar-spacer {
            display: none;
        }


      
     #wired-header-submenu {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px;
}
.navbar-dark .navbar-toggler {
    text-align: center;
    font-size: 16px;
    color: rgba(245, 245, 245, .9);
    margin: 6px 0 6px;
}
body:not(.wealth-management) .marketo-form .mktoForm {
    margin-right: 0;
}

#wired-header-submenu .navbar-brand {
    width: 60%;
}
#wired-header-submenu .navbar-brand img {
    width: 100%;
    height: auto;
}
    .sticky-top {
        top: 50px;
    }
    

    }

    #client-story-header-padding {
        padding: 2em;
    }


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


        #client-story-header {
            padding: 10em 0 0 2em;
        }
    }








    @media only screen and (min-width:1200px) {
        .hero {
            margin-right: 0;
            margin-left: calc(50vw - 609px);

        }
    }




    /** .hero {
        padding: 4em 15px;
        display: flex;
        width: 1200px;
        height: 600px;
        position: relative;
        align-items: center;
        /**
        background-image: url(/content/dam/jpm/commercial-banking/insights/leadership/mmbs-guide-to-growth-ebook-hero-image-1440x810.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        **/

    /**
        z-index: 1;
        overflow: hidden !important;

        margin: auto;
    }
**/


 



    /**
    .video-container > video-js {
	position: absolute;
	right: 0;
	top: -1em;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -2;
	background-size: cover;
	overflow: hidden;
}
**/



    

    body>section.section.section--slant.section--background-white.section--font-black.pb-0.section--background-picture::before {
        background: #FFF !important;

    }

    @media only screen and (max-width: 576px) {
        .section--background-video {
            height: 500px;
        }


        .content-wrap {
            padding: 2em 0em 2em;
        }
    }

    .hero .hero__bg-video-button {
        width: 50px;
        height: 50px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        z-index: 3;
        right: 20px;
        top: 20px;
        outline: none;
    }


    /**
    .hero .hero__bg-video-button  a:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #ffffff;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 1.4rem;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    **/

    .hero .js-play-button {
        display: none;
    }

    .bc-player-default_default .vjs-big-play-button {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /**display: none !important;**/
    }




    .section-hero  h1 {
        color: #ffffff;
        text-transform: uppercase;
        font-size: 40px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: 0.4px;
    }


    .hero__letter {
        position: absolute;
        z-index: 2;
        width: 641px;
        height: 680px;
        left: -50px;
        top: 0;
    }

    .hero__eyebrow {
        font-family: "Amplitude Regular";
        font-size: 1em;
        border: none;
        margin-bottom: .5em;
        padding: 0.25em 0.65em;
        text-transform: uppercase;
        cursor: pointer;
    }

   


    .hero--subtitle h1.hero__title {
        font-family: "Amplitude-Light";
        font-size: 4em;
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 2.5%;
        z-index: 5;
        max-width: none;
        text-align: inherit;
        text-transform: none;
        color: #ffffff;
        margin-left: 0;
    }

    .hero--subtitle h1.hero__title-2 {
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        font-size: 3em;
        line-height: 1.2;
        margin-bottom: 2.5%;
        z-index: 5;
        max-width: none;
        text-align: inherit;
        text-transform: none;
        color: #fff;
    }


    .hero__content {
        /**
        margin-top: -100px;
        max-width: 660px;

        **/

        max-width: 75vw;
        width: 100%;
        padding: 0;
    }

    .hero__content--background-white {
        background-color: #fff;
    }

    .hero__content--background-green {
        background-color: #008297;
    }

    .hero__header {
        position: relative;
        z-index: 2;

    }

    .hero__white-block {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 26em;
        background: white;
        z-index: 1
    }


  












   .hero__logos__individual {
    display: flex;
    text-align: center;
    align-content: center;
        flex-wrap: wrap;
        height: 80px
}
.hero__logos__individual svg, .hero__logos__individual img {
    margin: auto;
    display: block;
}

@media only screen and (max-width: 901px) {
.hero__logos {
    height: 6em;
    padding: 1em;
}
.hero__logos__individual svg, .hero__logos__individual img {
 /*   width: 80%; */
    height: auto;
}
}

@media only screen and (max-width: 576px) {
.hero__logos__individual svg, .hero__logos__individual img {
    /*   width: 80%; */
    height: auto;
}
}






    /* Media Query - Laptop */
    @media only screen and (min-width: 901px) and (max-width: 1350px) {
        .hero--subtitle h1.hero__title {
            font-size: 3.5em;
        }


    }


    .hero--subtitle .hero__header {
        max-width: 696px;
        width: 100%;
        padding: 2em 0;
    }


    h2.hero__subtitle {
        max-width: none;
        text-transform: none;
        letter-spacing: initial;
        text-align: left;
        padding: 0 .5em;
        font-family: "Amplitude Medium";
        font-size: 1.3em;
        margin: 0;
        color: #000;
    }


    h2.hero__subtitle-2 {
        max-width: none;
        text-transform: none;
        letter-spacing: initial;
        text-align: left;
        padding: 0 .5em;
        font-family: "Amplitude Medium";
        font-size: 1.3em;
        margin: 0;
        color: #fff;
    }

    h2.hero__subtitle-2:before {
        content: none;
    }


    h2.hero__subtitle:before {
        content: none;
    }

    .hero__text {
        color: #ffffff;
        font-size: 1.2em;
        line-height: 1.6;
        font-weight: 400;
        font-family: "Amplitude Regular", Arial, Helvetica, sans-serif;
    }

    .hero__watch__video-button-redesign-container {
        align-items: center;
    }

    .hero__watch__video-button-redesign {

        font-weight: 700;
        letter-spacing: 2.25px;
        text-transform: uppercase;
        align-items: center;
        color: #ffffff;
        cursor: pointer;
        background: transparent;
    }

    .hero__watch__video-button-redesign span {
        font-family: "Amplitude Regular", Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 700;
        align-items: center;
        line-height: 24px;
        letter-spacing: 2.25px;
        text-transform: uppercase;

        color: #ffffff;
    }

    .hero__watch__video-button-redesign:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #ffffff;
        font-weight: 700;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 2rem;
        font-size: .8rem;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    .hero__watch__video-button-redesign:hover::after {
        animation: slide 2s ease-in-out infinite;
        /*margin-left: 3px;*/
    }



    .header-video__cta {
        font-size: 1.4em;
        color: white;
    }



    .header-video__cta:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #ffffff;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 1.4rem;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    .header-video__cta .cta-arrow {
        stroke: white;
    }

    /* Media Query - Tablet  */
    @media only screen and (min-width: 575px) and (max-width: 900px) {
        .hero--subtitle h1.hero__title {
            font-size: 2.3em;
        }

        .hero__content {
            max-width: 75vw;
            padding: 2em 0;
        }
    }


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

        .hero--subtitle h1.hero__title {
            font-size: 2em;
        }

        .hero__content {
            max-width: 85vw;
        }

        .hero--subtitle .hero__header {
            padding: 0;
        }

        .video-container,
        .hero .hero__bg-video-button-wrap {
            display: none;
        }

        .hero--subtitle h1.hero__title-2 {
            font-family: "AmplitudeWide Bold", "Amplitude Medium";
            font-size: 2em;
            line-height: 1.2;
            margin-bottom: 2.5%;
            z-index: 5;
            max-width: none;
            text-align: inherit;
            text-transform: none;
            color: #fff;
        }



    }


    /**  trying 2021 ma outlook video hero code **/

    .hero .header-video-button {
        width: 50px;
        height: 50px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        z-index: 3;
        right: 20px;
        top: 20px;
        outline: none;
        padding: 0;
        margin-top: 2em;
    }

    /* .hero .header-video-button svg,
        .hero .header-video__popup svg {
            width: 100%;
            height: 100%;
        } */

    .hero .header-video__popup {
        /* width: 80px;
            height: 80px; */
        background-color: #008297;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 1em;
        margin-top: 1em;
    }

    .hero #play-button {
        display: none;
    }

    .hide {
        display: none;
    }



    #header-video__close-button {
        position: absolute;
        top: -14px;
        right: 0px;
        width: 35px;
        height: 35px;
        background: #31373d;
        opacity: 1;
        z-index: 2;
        padding: 0;
        color: #fff;
    }

    .close {
        position: relative;
        height: 22px;
        opacity: 0.3;
    }

    .close:hover {
        opacity: 1;
    }

    .close:before,
    .close:after {
        position: absolute;
        left: 18px;
        top: 8px;
        content: ' ';
        height: 22px;
        width: 2px;
        background-color: #fff;
    }

    .close:before {
        transform: rotate(45deg);
    }

    .close:after {
        transform: rotate(-45deg);
    }

    .accessibility__buttons {
        margin-top: 0.5em;
    }

    .accessibility__buttons button {
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        margin: 0 25px;
    }

    .accessibility__buttons svg {
        width: 30px;
        height: 30px;
    }

    #lorealVideo__transcript {
        display: none;
        margin: auto;
        padding: 1em;
        max-height: 300px;
        overflow-y: scroll;

    }

    div#headerVideo__transcript p,
    div#headerVideo__transcripth1 p,
    div#headerVideo__transcripth2 p,
    div#headerVideo__transcripth3 p,
    div#headerVideo__transcripth4 p,
    div#headerVideo__transcripth5 p {
        color: black;

    }



    .modal-video {
        width: 95%;
        max-width: 800px;
        margin: 4em auto 0;
    }

    /** end hero video **/

    /********** end -- Hero header styling ***********/

    /*~*~*~*~*~*~*  start -- body styling *~*~*~*~*~*~*/




    /** Discover Payments section  **/

    #discover-payments-left {
        padding: 4em 8em 4em 0;
    }

    @media only screen and (max-width: 901px) {
        #discover-payments-left {
            padding: 1em;
        }
    }

    #discover-payments-left svg {
        max-height: 65px;
        text-align: left;
    }

    #discover-payments-left h3 {

        font-family: "Amplitude", "Amplitude Regular", Arial, Helvetica, sans-serif;

    }


    #payments-animation .col-12 {


        margin-bottom: 1em;
    }


    .payments-animate {
        opacity: 0;
    }


    .payments-animate-text {
        font-size: 1.4em;
        line-height: 1.6;
        font-weight: 400;
        text-align: center;
    }

    #payments-animation svg {
        max-height: 80px;
    }

    #payments-animation .smaller-svg {
        max-height: 60px;
    }

    #payments-animation #payments-background svg {
        max-height: 300px;
    }


    #payments-animation .payments-svg-right {
        text-align: right;
    }

    @media only screen and (max-width: 901px) {
        #payments-animation .justify-content-end {
            justify-content: center;
        }

        .payments-animate {
            margin-bottom: 1em;
        }

        #payments-animation svg {
            margin-top: 2em;
        }



    }

    @media only screen and (max-width: 767px) {
        #payments-animation .payments-svg-right {
            text-align: center;
        }
    }


    #payments-background {
        /** background-image: url(/content/dam/jpm/cib/complex/content/treasury-services/payments-landing-page/Payments.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center center;
        **/
        /**
        min-height: 300px;
        **/
        margin-top: -20px;
        margin-bottom: 20px;
    }

    @media only screen and (max-width: 1200px) {
        #payments-background {
            height: auto;
            min-height: 120px;
        }
    }

    /**
    #discover-payments-left a.primary.link {
        color: #1a7b99;
        font-weight: 400;
    }

    #discover-payments-left a.primary.link:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #1a7b99;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 1.4rem;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    **/

    #discover-payments-stats {
        padding: 4em 6em 1em;
        background-color: #faf8f2;
        text-align: center;
    }

    #discover-payments-stats svg {
        margin-bottom: 20px;
    }

    #discover-payments-stats .stats-small {
        max-width: 200px;
    }

    #discover-payments-stats .stats-medium {
        max-width: 270px;
    }

    #discover-payments-stats .stats-large {
        max-width: 300px;
    }

    #discover-payments-stats .stats-text {
        text-align: left;
        width: 96%;
        margin-top: 10px;
    }

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

        #discover-payments-stats {
            padding: 4em 3em 1em;
        }
    }


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

        #discover-payments-stats {
            padding: 4em 10em 1em;
        }

        #discover-payments-stats .stats-small {
            max-width: 200px;
        }

        #discover-payments-stats .stats-medium {
            max-width: 270px;
        }

        #discover-payments-stats .stats-large {
            max-width: 300px;
        }

    }


    @media only screen and (max-width: 576px) {
        #discover-payments-stats {
            padding: 3em;
        }


    }

    #discover-payments h4 {
        font-size: 1.5em;
        line-height: 1.5;
        font-family: "Amplitude", "Amplitude Regular";
        font-weight: 300;
    }





    #discover-payments-stats hr {
        width: 80%;
        margin: 4em auto;
        color: #474c50;
    }

    #discover-payments-stats .st0 {
        fill: #2B9AB3;
    }

    #discover-payments-stats .st1 {
        fill: #31373D;
    }

    #discover-payments-stats:after {
        content: "";
        display: block;
        height: 6px;
        background: linear-gradient(90deg, #573614 -0.62%, #BA8E6E 29.38%, #79583A 67.41%, #AE8361 106.06%);
        transform: matrix(1, 0, 0, -1, 0, 0);
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    #discover-payments-stats .bronze-border {
        height: 6px;
        overflow: hidden;
        background: linear-gradient(89.99deg, #573614 -11.05%, #BA8E6E 21.89%, #79583A 63.63%, #AE8361 106.06%);
        padding-bottom: 6px;
    }


    /** end Discover Payments **/

    /**  End-to-end section  **/

    #end-to-end {
        background-color: #101820;
        padding: 4em 0;
    }

    #end-to-end h4 {
        font-size: 1.5em;
        line-height: 1.5;
        font-family: "Amplitude Regular";
        font-weight: 300;
    }

    #end-to-end .powered-by {

        font-family: "Amplitude-Light", Arial, Helvetica, sans-serif;
        font-weight: 300;
        line-height: 1.1;
        font-size: 2.5em;
        color: #ffffff;
        margin-top: 0;


    }



    .button-brown-outline {
        border: 1px solid #936846;
        border-radius: 60px;
        padding: 8px 16px;
        color: #333333;
        letter-spacing: 0.02em;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        display: inline-block;
        margin-right: 1em;
        margin-bottom: 1em;
    }

    .button-brown-outline:hover, .button-brown-outline:focus-visible {
        text-decoration: underline;
        color: #ffffff;
        background-color: #936846;

    }


    .button-wrapper {
        margin-top: 1.5em;
    }

    .topaz-button,
    body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton {
        background: #008297;
        color: white !important;
        font-family: "Amplitude Bold", "Amplitude Bold4";
        font-size: 14px;
        line-height: 2;
        font-weight: 400;
        padding: .6em 4.2em;
        letter-spacing: 2.25px;
        text-transform: uppercase;
        border-radius: 3px;
    }




    .topaz-button:hover,
    .topaz-button:focus,
    a:focus .topaz-button,
    button:focus,
    body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton:focus,
    body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton:hover {
        background-color: #005075 !important;
    }


    body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton {
        background: #008297 !important;
        border-color: transparent;
    }

    body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton:hover {
        border-color: transparent !important;
        background-color: #005075 !important;
        text-decoration: none;

    }

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

        .topaz-button,
        body:not(.wealth-management) .marketo-form .mktoForm .mktoButtonRow .mktoButton {

            padding: .6em 1.2em;

        }

    }




    /**  end of end-to-end section  **/

    /** award winning products section  **/

    #related-insightss .card-deck .card {
        margin-right: 0;
        background-color: #101820;
        color: #ffffff;
        padding-top: 2em;
    }


    #related-insightss .card-deck .card .card-body {

        color: #ffffff;
        padding: 1em 3em;
    }

    #related-insightss .card-deck .card .card-body .card-body-image {
        background-color: transparent;
    }

    #related-insightss .card-deck .card .card-img-top {

        width: auto;
        height: 70%;
        max-height: 300px;

        /**height: 20vw;
    object-fit: cover;
        **/

        object-fit: cover;
        object-position: bottom;

    }

    @media only screen and (max-width: 1200px) {
        #related-insightss .card-deck .card .card-img-top {
            max-height: 200px;
        }
    }


    #related-insightss .card-deck .card .card-title {
        font-size: 1.2em;
        font-weight: 400;
        font-family: "Amplitude Light";
        line-height: 1.5;
    }

    #related-insightss .card-deck .card .card-subtitle {
        font-size: .8em;
        font-family: "Amplitude Light";
        margin-bottom: 2em;
    }

    #related-insightss .card-deck .card .card-text {
        font-size: 1em;
    }

    #related-insightss .card-deck .card .card-footer {
        padding: 2em 3em;
    }

    #related-insightss .card-deck .card .card-footer a:hover {
        text-decoration: none;
    }

    #related-insightss a.card-link {
        color: #ffffff;

    }

    #related-insightss a.card-link:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #ffffff;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: .8rem;
        width: 1rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }

    /**   may need a carousel for cards  **/
    .carousel-item {
        margin-right: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    @media (min-width: 768px) {

        /* show 3 items */
        .carousel-inner .active,
        .carousel-inner .active+.carousel-item,
        .carousel-inner .active+.carousel-item+.carousel-item {
            display: block;
        }

        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
            transition: none;
            margin-right: initial;
        }

        .carousel-inner .carousel-item-next,
        .carousel-inner .carousel-item-prev {
            position: relative;
            transform: translate3d(0, 0, 0);
        }

        .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
            position: absolute;
            top: 0;
            right: -33.3333%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

        /* left or forward direction */
        .active.carousel-item-left+.carousel-item-next.carousel-item-left,
        .carousel-item-next.carousel-item-left+.carousel-item,
        .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
        .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
            position: relative;
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }

        /* farthest right hidden item must be abso position for animations */
        .carousel-inner .carousel-item-prev.carousel-item-right {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            visibility: visible;
        }

        /* right or prev direction */
        .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
        .carousel-item-prev.carousel-item-right+.carousel-item,
        .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
        .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
            position: relative;
            transform: translate3d(100%, 0, 0);
            visibility: visible;
            display: block;

        }

    }

    /** end Award winning products  **/


    /**  Onyx section  **/

    #onyx {
        padding: 3em 0 0;
    }

    .onyx-padding {
        padding: 2em 5em;
    }

    @media only screen and (max-width: 900px) {
        .onyx-padding {
            padding: 1em;
        }
    }


    #onyx svg {
        max-height: 80px;
        margin-bottom: 30px;
    }

    /** end Onyx  **/

    #offsetLearnMore {
        background-color: #f5f7f8;
    }

    #stay-informed-section {
        background-color: #f5f7f8;
        padding: 4em;
    }

    #stay-informed-section .insights-phone img {
        max-height: 666px;
        height: auto;
        max-width: 100%;
        
    }

    .animate-third-party, .animate-stay-informed {
        max-width: 800px;
        
    }


    

    #third-party-section .third-party-image {
        max-height: 700px;
        width: auto;
    }

 @media only screen and (min-width:900px) and  (max-width: 1200px) {
        

        #third-party-section {
            padding: 4em 0 4em 4em;
        }
    }

@media only screen and (min-width: 1201px) {
#third-party-section {
        padding: 4em 0 0 4em;
    }

}




    @media only screen and (min-width: 2200px) {
        #offsetLearnMore .col-12.offset-xl-5 {
            margin-left: 33%;
        }
    }



    #related-insights-container {
        background: linear-gradient(90deg, #ffffff 75%, #f5f7f8 25%);
        padding: 1em 12em;
        margin: 4em 0 0;
    }

    @media only screen and (max-width: 1500px) {
        #related-insights-container {
            background: #ffffff;
            padding: 1em 2em;
            margin: 4em 0 0;
        }
    }

    @media only screen and (max-width: 767px) {
        #related-insights-container {
            background: #ffffff;
            padding: 0;
            margin: 0;
        }
    }


    /** client cards  **/

    #related-insights {
        margin: 0;
        padding: 6em 16em;
        background-color: #f5f7f8;
    }

    @media only screen and (max-width: 1500px) {
        #related-insights {
            padding: 4em 4em;
        }
    }

    @media only screen and (max-width: 767px) {
        #related-insights {
            padding: 1em;
        }
    }



    #related-insights .card {
        height: 100%;
        background-color: #ffffff;
        color: #31373D;
    }

    #related-insights .card-image-background {
        background-image: linear-gradient(to bottom left, rgba(0, 0, 0, .06), 66%, rgba(0, 0, 0, .30)), url('/content/dam/jpm/cib/complex/content/treasury-services/payments-client-story-loreal/related-insight-clickbank.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        object-position: bottom;
        color: #ffffff;
    }

    #related-insights .card-image-background   .card-img-top {
        visibility: hidden;
    }


    #related-insights .card-image-background .card-tag
    {
        color: #ffffff;
    }

    #related-insights .card.card-image-background .card-footer {
        padding: 1em 3em 2em;
        background-color: transparent;
        border-top: 0;
    }

    #related-insights .card.card-image-background .card-footer a, #related-insights .card.card-image-background .card-footer a::after {
        color: #ffffff;
    }

    #related-insights .card.card-image-background .card-footer a:hover {
        color: #ffffff;
    }


    #related-insights .card a {
        color: #31373d;
    }

    #related-insights .card .card-body {
        padding: 1em 3em;
    }


    #related-insights .card .card-title {
        font-size: 22px;
        font-weight: 400;
        font-family: "Amplitude";
        line-height: 1.5;
    }

    #related-insights .card .card-title a.primary.link {
        letter-spacing: .25px;
        font-size: inherit;
        font-weight: 400;
        font-family: "Amplitude Light";
        line-height: 1.5;
    }

    #related-insights .card .card-title a.primary.link::after {
        color: #31373d;
    }

    #related-insights .card-deck .card .card-subtitle {
        font-size: .8em;
        font-family: "Amplitude Light";
        margin-bottom: 2em;
    }

    #related-insights .card .card-text {
        font-size: 1em;
    }

    #related-insights .card .card-footer {
        padding: 1em 3em 2em;
        background-color: #ffffff;
        border-top: 0;
    }



    #related-insights .card-subtitle {
        font-size: .8em;
        text-transform: uppercase;
        margin-top: 0;
    }




    #related-insights button {
        margin-top: 2em;
        margin-bottom: 5em;
    }

    #related-insights .card .card-footer a {
        color: #1a7b99;
        
    }

   


    #related-insights .card .card-footer a,
    #chaselink,
    #menuModal a.primary.link.card-link,
    #award-winning-products a.primary.link.card-link {
        font-weight: 400 !important;
        font-family: "Amplitude", "Amplitude Regular", "Amplitude Light" !important;
        letter-spacing: 0.02em;

    }


    #related-insights .card .card-footer a:after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        color: #1a7b99;
        font-weight: 400;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 1.4rem;
        width: 2rem;
        margin-right: -2.5rem;
        margin-left: 0.5rem;
    }


    #related-insights .card .card-tag
    {
        color: #936846;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        margin-top: 2em;


    }




    /**  //  Quotes section //  **/

    #quote-container {
        padding: 4em 0;
        background-color: #ffffff;
    }

    .quote-text-container .quote-name {
        font-size: 1em;
        font-weight: 400;
        
    }


    .quote-text-container .quote-title {
        font-size: .8em;
    }



    .quote-text {
        font-family: CelestePro, CelesteOT, Times, serif;
        font-weight: 400;
        border-left: 6px solid #2B9AB3;
        font-size: 48px;
        padding-left: 36px;
        font-style: italic;
        color: #31373D;
        letter-spacing: 0.48px;
        line-height: 1.16;
    }

.quote-text.red {
    border-left: 6px solid #C45C54;
}

    .quote-image-container {
        padding-left: 50px;
        padding-right: 0;
    }

    .quote-image-container img {
        border-radius: 50%;
    }


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

        .quote-image-container {
            padding-left: 15px;
        }



    }

.rounded-image {
    border-radius: 30px;
}
 


    /**  //  Cutting Edge section //  **/


    #cutting-edge {
        padding-top: 6em;
        padding-bottom: 6em;
    }

    #cutting-edge img {
        width: 100%;
        height: auto;
    }

    #cutting-edge #payments-eating-world {
        background-image: url(/content/dam/jpm/cib/complex/content/treasury-services/payments-landing-page/payments-are-eating-the-world.png);
        background-position: center center;
        background-size: cover;
        color: #ffffff;
        padding: 3em;
    }

    #cutting-edge #payments-eating-world h3,
    #cutting-edge #payments-eating-world p,
    #cutting-edge #payments-eating-world i,
    #cutting-edge #payments-eating-world a {
        color: #ffffff;
    }

    #cutting-edge #payments-eating-world .spotlight {
        color: #ffffff;
        font-size: .8em;
        font-weight: 500;
        line-height: 1.8;
    }

    #cutting-edge #payments-eating-world .spotlight .star-spotlight {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #FFFFFF;
        stroke: #FFFFFF;
        stroke-width: 0.2;
    }

    #cutting-edge #payments-eating-world .spotlight svg {
        width: 12px;
        height: 12px;
    }

    #cutting-edge #payments-eating-world .spotlight i.icon-spotlight {
        content: "\f666";
        font-family: "Font Awesome 5 Pro";
        color: #ffffff;
        font-weight: 700;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.7rem;
        font-size: 1rem;
        width: 1.5em;
        height: 1.5em;

    }



    #gray-bottom-border {
        border-bottom: 1px solid rgba(71, 76, 80, 0.3);
    }

    #mta-photo-container {
        display: inline-block;
        overflow: hidden;
    }

    #mta-photo:afterrr {
        content: "";
        display: block;
        height: 6px;
        background: linear-gradient(90deg, #573614 -0.62%, #BA8E6E 29.38%, #79583A 67.41%, #AE8361 106.06%);
        transform: matrix(1, 0, 0, -1, 0, 0);
        position: absolute;

        bottom: 0;
        width: 100%;
    }


    #mta-photo
    /**{
        text-align: right;
        overflow: hidden;
        background: linear-gradient(89.99deg, #573614 -11.05%, #BA8E6E 21.89%, #79583A 63.63%, #AE8361 106.06%);
        padding-bottom: 6px;
    }
    **/

        {


        border-top: 0;
        border-image-slice: 6;
        border-width: 6px;
        border-left: 0;
        border-right: 0;
        border-bottom: 6px solid;
        border-image-source: linear-gradient(89.99deg, #573614 -11.05%, #BA8E6E 21.89%, #79583A 63.63%, #AE8361 106.06%);
    }

    #mta-photo img {
        height: 100%;
        width: auto;
    }


    .hide-under-768 {
        overflow: hidden;
    }

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

        #mta-photo,
        #mta-photo img {
            width: 100%;

        }

        .hide-under-768 {
            display: none !important;
        }
    }



    /**  end client stories **/




    .section__chunk {
        margin: 5em auto 0;
    }

    /*** end -- section video  ***/

    /*** start -- pull quote  ***/

    .pull-quote svg {
        max-height: 700px;
        width: 100%;
    }

    .intro-pull-quote svg {
        max-height: 350px;
    }


    @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {

        .pull-quote svg,
        .intro-pull-quote svg {
            min-height: 375px;
        }

        #map-container svg {
            min-height: 750px;
        }

        .graph svg {
            min-height: 477px;
        }
    }

    /*** end -- pull quote  ***/

    @media only screen and (max-width: 2000px) {
        #map-background {
            width: 1400px;
            top: -47px;
        }

        #stimulus-intro {
            height: 1200px;
        }

    }


    /*** end -- map background  ***/

    /*** end -- graph  ***/
    .graph {
        max-width: 800px;
        margin: 3em auto 2em;
    }


    /*** end -- graph  ***/












    /**    Adding insights with extra S here  **/

    /* related insights */


    .insight-card__text {
        position: relative;
        padding: 2em;
    }

    .insight-card__text::before {
        background: inherit;
        top: -11px;
        content: '';
        display: block;
        height: 3em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(3.5deg);
        transform-origin: 100%;
    }


    .insight-card:nth-child(odd) .insight-card__text {
        background: #31373D;
        color: white
    }

    .insight-card:nth-child(even) .insight-card__text {
        background: #ECEFF1;
        color: black;
    }


    .insight-card:nth-child(odd) .insight-card__cta {

        color: #42b7ff;
    }

    .insight-card:nth-child(even) .insight-card__cta {

        color: #0066cc;
    }


    /**  Dupe area?   **/

    .insight-card__image {
        width: calc(100%-1px);
        background-size: cover;
        background-position: 50% 99%;
        min-height: 250px;
        background-repeat: no-repeat;
    }

    .insight-card:first-child .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/esg-insights.jpg);
    }

    .insight-card:nth-child(2) .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/sustainability.jpg);
    }

    .insight-card:nth-child(3) .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/development_finance_insights.jpg);
    }


    .insight-card__title {
        font-family: "Amplitude-Medium", "Amplitude Medium";
        font-size: 1.5em;
        margin-bottom: .5em;
        line-height: 1.2;
        overflow: hidden;
        height: 2.5em;
    }

    .insight-card__subtitle {
        font-family: "Amplitude-Light";
        font-size: 1.2em;
        margin-bottom: .75em;
        line-height: 1.2;
        overflow: hidden;
        height: 110px;
    }

    .insight-card__cta {
        font-size: 1.5em;
        color: #0066CC;
    }

    .insight-card__cta-arrow {
        stroke: #0066CC;
    }

    .on-dark-gray.insight-card__cta {
        color: #42B7FF !important;
    }

    .on-dark-gray.insight-card__cta .insight-card__cta-arrow {
        stroke: #42B7FF !important;
    }


    .card {
        border: none;
    }





    /**  Dupe area?   **
.insights-card-wrap {
    width: 950px;
}
.insights-card-wrap .card {
  color: white;
  height:100%;
  min-height: 293px;
  overflow:hidden;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,0.075);
}

.insights-card-wrap .card .card-body {
  background:#31373D;
  position: relative;
  padding: 2em;
}

.insights-card-wrap .card .card-body p{
    font-size: 16px;
    line-height: 1.1;
}

.insights-card.bg-white .card-body {
	background:#fff;
}
.insights-card.bg-gray .card-body {
	background:#ECEFF1 !important;
}

.insights-card.bg-dark-gray .card-body {
	background:#31363D; !important;
}

.insights-card.bg-dark-gray .card-body .card-title{
	color: #ffffff;
	font-size: 1.3em;
}


.insights-card.bg-white .card-body .card-title,
.insights-card.bg-gray .card-body .card-title{
	color: #000000;
	font-size: 1.3em;
}

.insights-card-wrap .card .card-body:before {

  top: -11px;
  content: '';
  display: block;
  height: 3em;
  left: 0;
  position: absolute;
  right:0;
  transform: skewY(3.5deg);
  transform-origin: 100%;
}

.insights-card-wrap .card .card-title {
    font-family: "Amplitude-Medium";
    font-size:1.3em;
    margin-bottom: .5em;
    line-height: 1.2;
    color: white;
}

.insights-card-wrap .card .card-text {
    font-family: "Amplitude-Light";
    font-size:1.2em;
    padding-bottom: 1.4em;
    line-height: 1.2;
    color: white;
}

.insights-card-wrap .card .card-img-top{
   transition: transform 2s, filter 2s ease-in-out;
   filter: brightness(95%);
   height: 250px;
 }

 @media only screen and (max-width:650px) {
    .insights-card-wrap .card .card-img-top {
        height: 200px;
    }
 }
 

 .insights-card-wrap .card:hover {
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
  }

  .insights-card-wrap .card:hover .card-img-top {
   filter: brightness(100%); 
   transform: scale(1.1);
 }


 .insights-card-wrap .card-cta {
    font-size: 1.4em;
    color:  #0066CC;
    position: absolute;
    bottom: 20px;
}
.insights-card-wrap .card-over-image{
	position: absolute;
    width: 70%;
    height: 100%;
    bottom: 0;
    left: 0;
}
.insights-card-wrap .card-over-image .insights-card{
	    max-height: 293px;
    min-height: 220px;
}
.insights-card-wrap .card-over-image.right{
	right: 0;
	left: initial
}
.insights-card .card-body.bg-image-left .card-title, .insights-card .card-body.bg-image-right .card-title {
    color: #000000;
}
.insights-card-wrap .align-card-right {
    position: absolute;
    right: 0;
    height: inherit;
}
.insights-card-wrap .align-card-right .card.insights-card{
	min-height: 260px;
}

.insight-card__text::before {
    background: inherit;
    top: -11px;
    content: '';
    display: block;
    height: 3em;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(
3.5deg
);
    transform-origin: 100%;
}
.insights-card .card-body.development_finance {
	background: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/development_finance_mobile.jpg) no-repeat !important;
  
	background-size: cover !important;	
}
.insights-card .card-body.esg-investing{
	background: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/esg_mobile.jpg) no-repeat !important;
  
	background-size: cover !important;	
}
.bg-image-left{
	background: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/climate_spending.jpg) no-repeat !important;
  
	background-size: cover !important;
}
.bg-image-right{
	background: url(/content/dam/jpm/cib/complex/content/investment-banking/center-for-carbon-transition/electric.jpg) no-repeat !important;
  
	background-size: cover !important;
}
/** end Insights with 'S' area **/







    /* related insight */

    .insight-card {
        margin: 1em 0;
    }

    .insight-card__text {
        position: relative;
        padding: 2em;
    }

    .insight-card__text::before {
        background: inherit;
        top: -11px;
        content: '';
        display: block;
        height: 3em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(3.5deg);
        transform-origin: 100%;
    }


    .insight-card:nth-child(odd) .insight-card__text {
        background: #000e33;
        color: white
    }

    .insight-card:nth-child(even) .insight-card__text {
        background: #F7F7F7;
        color: black;
    }

    .insight-card:nth-child(odd) .insight-card__cta .insight-card__cta-arrow {
        stroke: #42B7FF;
    }

    .insight-card:nth-child(even) .insight-card__cta .insight-card__cta-arrow {
        stroke: #0066cc;
    }

    .insight-card__image {
        width: calc(100%-1px);
        background-size: cover;
        background-position: 50% 99%;
        min-height: 250px;
        background-repeat: no-repeat;
    }

    .insight-card:first-child .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/ri-1.png);
    }

    .insight-card:nth-child(2) .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/related_insights_esg_315x177.jpg);
    }

    .insight-card:nth-child(3) .insight-card__image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/ri-3.png);
    }

    .insight-card__title {
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        font-size: 1.5em;
        margin-bottom: .5em;
        line-height: 1.2;
        overflow: hidden;

    }

    @media only screen and (max-width:1175px) {
        .insight-card__title {
            /*  height: 5em;*/
        }
    }

    @media only screen and (max-width:1075px) {
        .insight-card__title {
            /*   height: 7em;*/
        }
    }

    @media only screen and (max-width:991px) {
        .insight-card__title {
            height: inherit;
            font-size: 1.2em;
        }
    }

    .insight-card__subtitle {
        font-family: "Amplitude-Light";
        font-size: 1.2em;
        margin-bottom: .75em;
        line-height: 1.2;

        height: 190px;
    }

    .insight-card__cta {
        font-size: 1.5em;
    }

    .insight-card a:hover {
        text-decoration: none;
    }

    /* form */
    #contact {
        max-width: 500px;
    }

    .box-sub {
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        font-size: 1.8em;
        color: #008297;
        background: transparent;
        border: 0px;
        margin: 0;
    }


    /* back to top button */
    #back-to-top-button {
        position: fixed;
        width: auto;
        right: 1%;
        bottom: 3%;
        display: none;
        z-index: 999;
        cursor: pointer;
    }

    #back-to-top-button .back-to-top-background {
        fill: #1A7B99;
    }


    #back-to-top-focus:focus .back-to-top-background,
    #back-to-top-focus:hover .back-to-top-background {
        fill: #005075;
        color: #005075;
    }




    @media only screen and (max-width: 577px) {
        #back-to-top-button {
            transform: scale(0.6);
            transform-origin: right;
        }
    }

    /*  Tablet View   */

    @media only screen and (min-width: 578px) and (max-width: 850px) {
        #back-to-top-button {
            transform: scale(0.7);
            transform-origin: right;
        }
    }

    @media only screen and (min-width: 850px) and (max-width: 1200px) {
        #back-to-top-button {
            transform: scale(0.9);
        }
    }

    /* 
  @media only screen and (min-width: 876px) {
    section.section {
    padding: 1em 10% 2em;
    position: relative;
    max-width: 2650px;
    /* margin: auto; */
    /*margin: 5%;
    }

}*/
    .footnote {
        overflow-wrap: break-word;
    }

    .footnote p {
        margin-bottom: 0;
    }

    .footnote a p {
        color: #007bff;
    }

    /*right hand rail css  */

    #research-link {
        position: fixed;
        z-index: 999;
        right: -500px;
        top: 47%;
        width: 205px;
        border-left: 5px solid #008297;
        background: #F9F9F9;
        box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        transition: 1s;
    }



    #research-link.active {
        right: 0;
    }

    #research-link div {
        padding: 0 1em 1em 1em;
    }

    #research-link a {
        text-decoration: none;
        cursor: pointer;
        color: #008297;
    }

    .close-button {
        position: relative;
        height: 35px;
        width: 35px;
        opacity: 0.3;
        border: none;
        cursor: pointer;
    }

    .close-button:hover {
        opacity: 1;
    }

    .close-button:before,
    .close-button:after {
        position: absolute;
        left: 15px;
        top: 10px;
        content: ' ';
        height: 22px;
        width: 2px;
        background-color: #008297;
    }

    .close-button:before {
        transform: rotate(45deg);
    }

    .close-button:after {
        transform: rotate(-45deg);
    }


    #research-link p {
        font-size: .97em;
        line-height: normal;
        font-family: "Amplitude-Light";
        font-weight: 700;
        color: #000;
    }

    #research-link strong {
        font-family: "Amplitude Bold", "Amplitude Bold4";
        padding-bottom: 6px;
        display: inline-block;
        font-size: 1.06em
    }

    @media only screen and (max-width: 900px) {
        #research-link {
            top: inherit;
            bottom: -500px;
            right: 0;
            width: 100%;
            border-left: inherit;
            border-top: 5px solid #008297;
            box-shadow: -5px -7px 10px 0px rgba(0, 0, 0, 0.1);
            background: rgba(245, 245, 245, .9);
        }

        #research-link a div {
            padding: 0;
            text-align: center;
        }

        #research-link.active {
            bottom: 0;
        }
    }


    #research-link #sign-up {
        color: #008297;
        font-size: 1.1em;
        font-family: "Amplitude-Medium", "Amplitude Medium";
    }


    /*   hans css*/
    .first-graph_svg {
        width: 100%;
        margin-top: 4em;
    }

    .sub__header_lrg {}

    .bolder {


        font-weight: bold !important;
    }

    #graph-market-asssets {}

    .button__wrapper {
        margin: 10em auto 4em;
        text-align: center;
        padding-left: 1em;
        background: #008297;
        max-width: 250px;
        padding: 2em;
    }


    /** // hiding button hover arrow --
    .btn:after,
    .moduleCTA:after {
        content: "\00a0\f105";
        font-family: FontAwesome;
        visibility: hidden;
    }


    .btn:hover::after {

        content: "\00a0\f105";
        font-family: FontAwesome;
        visibility: visible;

    }

**/

    .btn:after,
    .moduleCTA:after {
        display: none;
        visibility: hidden;
    }

    .btn[href^="http"]:after,
    .pageCTAbody a[href^="http"]:after,
    .moduleCTA[href^="http"]:after,
    .header-abstract a[href^="http"]:after,
    .btn[target="_blank"]:after,
    .pageCTAbody a[target="_blank"]:after,
    .moduleCTA[target="_blank"]:after,
    .header-abstract a[target="_blank"]:after,
    .bodyContent a[target="_blank"]:after {
        display: none;
        content: none;
    }

    .panel-group .panel {
        border: none;
    }

    .panel-default>.panel-heading {
        background-color: #7EC1C9;
        padding: 30px 35px;
        text-align: center;
        cursor: pointer;
        color: #ffffff !important;
        display: flex;
        height: 115px;
        align-items: center;
        justify-content: space-between;
    }

    .panel-default>.panel-heading2 {
        background-color: #7EC1C9;
        padding: 30px 35px;
        text-align: center;
        cursor: pointer;
        color: #000 !important;
        display: flex;
        height: 115px;
        align-items: center;
        justify-content: space-between;
    }

    .panel__body {
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease opacity;
        height: 0;
    }

    .panel-title2,
    h4.panel-title2 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.5em;
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        width: 82%;
        text-align: left;
        color: #000;
    }

    .panel__body.\--grey {
        background-color: #F5F5F5;
    }

    .panel__body.show {
        opacity: 1;
        visibility: visible;
        height: auto;
        padding: 5%;
    }

    .panel-title,
    h4.panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.5em;
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        width: 82%;
        text-align: left;
        color: #000;
    }

    #accordion {


        padding-top: 3em;
        padding-bottom: 3em;

    }

    .bodyContent li {

        font-family: "Amplitude Light";
    }

    .toggle__icon {
        content: '';
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDdweCIgaGVpZ2h0PSI1NHB4IiB2aWV3Qm94PSIwIDAgNDcgNTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA3PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkFJX2V4cGFuZGVkLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTEwLjAwMDAwMCwgLTgzMzUuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjMiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUxMS4wMDAwMDAsIDgzMzYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC41LDI1LjUgTDQ0LjUsMjUuNSIgaWQ9IkxpbmUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy41LDAuNSBMMjMuNSw1MC41Mzk5ODQiIGlkPSJMaW5lLTIiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
        width: 30px;
        height: 35px;
        background-size: 100%;
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    .toggle__icon2 {
        content: '';
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzRweCIgaGVpZ2h0PSIzOXB4IiB2aWV3Qm94PSIwIDAgMzQgMzkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5Hcm91cCAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRGSS1Bbm5vdW5jZW1lbnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzEyLjAwMDAwMCwgLTgwMDYuMDAwMDAwKSIgc3Ryb2tlPSIjMDA4Mjk3IiBzdHJva2Utd2lkdGg9IjMiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcxNC4wMDAwMDAsIDgwMDguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC4zMzMzMzMzMzMsMTcuNSBMMjkuNjY2NjY2NywxNy41IiBpZD0iTGluZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE1LDAuMzQzMTM3MjU1IEwxNSwzNC42ODQzMDI4IiBpZD0iTGluZS0yIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
        width: 30px;
        height: 35px;
        background-size: 100%;
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }


    .toggle__icon.minus {
        width: 30px;
        height: 35px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDdweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA0NyAzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TGluZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgIDxnIGlkPSJBSV9leHBhbmRlZC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUxMC4wMDAwMDAsIC03NDEwLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIzIj4KICAgICAgICAgICAgPHBhdGggZD0iTTE1MTEuNSw3NDExLjUgTDE1NTUuNSw3NDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    .toggle__icon2.minus {
        width: 30px;
        height: 35px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCAzNCAzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1NC4xICg3NjQ5MCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+R3JvdXAgNDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJERkktQW5ub3VuY2VtZW50IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc5Mi4wMDAwMDAsIC04MDI2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc5NC4wMDAwMDAsIDgwMDguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzAiIGhlaWdodD0iMzUiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03Ljk5MzYwNTc4ZS0xNCwxOS41IEwzMCwxOS41IiBpZD0iTGluZSIgc3Ryb2tlPSIjMDA4Mjk3IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    @media only screen and (max-width: 810px) {
        h4.panel-title {
            font-size: 1.2em !important;
            width: 85% !important;
        }

        .panel-default>.panel-heading {
            height: auto;
        }


        .teal_box {
            background-color: #008297;
            color: white;
            max-width: 90% !important;
            width: 420px;
            margin: 3em auto;
        }


    }

    .stand_out {


        font-size: 1.5em;
        color: #008297;
        font-family: "Amplitude-Medium", "Amplitude Medium";


    }

    .dot_size {

        font-size: 2.5em;

    }

    ul.list_effect {

        list-style-type: square;

        color: #008297 !important;
        font-size: 1em;

    }


    .teal_box {

        background-color: #008297;
        color: white;
        max-width: 60%;
        width: 420px;
        margin: 3em auto;


    }

    .teal_box svg {


        width: 100%;



    }

    .last-descrip_txt {


        padding-top: 2em;
    }


    /* video section */


    #cory-video .img__background {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/pelio-image.png);
    }

    #lisa-video .img__background {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/pelio-image.png);
    }

    .img__background {
        background-size: cover;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
        position: absolute;
        overflow: hidden;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .video__wrapper {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center bottom;
        position: relative;
        overflow: hidden;
        margin: 1em auto 0;
        max-width: 900px;
    }

    .hero-txt-2 {
        width: 100%;
        background: #31363D;
        border-style: solid;
        border-width: 0 1px 50px 0;
        border-color: transparent transparent #31363D transparent;
        line-height: 0px;
        _border-color: #000000 #000000 #00477b #000000;
        _filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000');
        position: absolute;

        left: 0;
        padding: 8% 5%;
        bottom: 0;
        color: white;
        transition: all .6s ease-out;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
        z-index: 2;
    }

    .hero-txt-2:before {
        background: #31363D;
        top: -11px;
        content: '';
        display: block;
        height: 8em;
        left: 0;
        position: absolute;
        right: 0;
        transform: skewY(3.5deg);
        transform-origin: 100%;
    }


    .play-button-mobile {
        display: none;
    }

    .video__info {
        display: flex;
        z-index: 4;
        bottom: 6%;
        justify-content: center;
        position: absolute;
        /** height: 270px; **/
        width: 100%;
        color: #ffffff;
        padding: 8em 0 0;
        left: -30px;
        margin-bottom: 1em;

    }

    .video__info-mobile {
        display: none;
    }

    .play__button {
        padding-left: 2em;
        cursor: pointer;
    }

    .video__text {
        padding: 0 2em;
        width: 75%;
        text-align: left;
    }

    h4.video__title,
    .video__title {
        font-size: 1.5em;
        font-family: "AmplitudeWide Bold", "Amplitude Medium";
        text-align: left;
        color: #ffffff;
        line-height: 1;
        padding: 0;
        text-transform: none;
        margin-bottom: 0.5em;
        margin-top: 0;
    }

    .video__text .video__description {
        font-size: 1.16em;
        display: block;
        font-family: "Amplitude-Light";

        overflow: hidden;
        color: #ffffff;
        line-height: 1;
    }

    .video__text .video__description-mobile {

        color: #000000;

    }

    .video-js {
        padding-bottom: 56.25%;
        width: 100%;
        /**
        height: 0;
        **/
    }

    #challenge .bc-player-default_default, #challenge .bc-iframe, .bc-iframe body, #challenge .bc-player-default_default, #challenge .bc-player-default_default .vjs-poster {
        background-color: #ffffff;
    }





    @media only screen and (min-width:900px) and  (max-width: 1200px) {
        

        #challenge {
            padding: 4em 0 4em 4em;
        }
    }

@media only screen and (min-width: 1201px) {
#challenge {
    padding: 2em 0 2em 10em;
}

}




#challenge  .video-flush-right {
        width: 100%;
        padding: 0em;
       /** background-color: #f5f7f8; **/
    }


#challenge .video-title {
    font-size: 24px;
    font-family: "Amplitude Light";
    font-weight: 300;
    line-height: 1.3;

}



    .transcript {
        max-width: 900px;
        margin: auto;

    }

    .transcript {
        padding: 1rem;

        max-height: 260px;
        overflow-y: scroll;

    }

    .transcript p {
        line-height: 1.2;
        font-size: .9em;
    }


    button.ada__button {
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 6;
        margin-left: 0;
        margin-top: 0;
    }

    .overlapping-elements__text-box-mobile {
        display: none;
    }


    @media only screen and (max-width: 1500px) {
        .hero-txt-2 {
            height: 33%;

        }

        button.ada__button {
            margin-top: 2em;
        }

        .insights-card-wrap .card .card-text {

            padding-bottom: 3.2em;
        }

        .insights-card-wrap .card .card-body {
            padding: 1em;
        }

        .video__info {
            margin-bottom: 0;
        }

    }

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


        .insights-card-wrap .card .card-text {

            padding-bottom: 3.2em;
        }

        button.ada__button {
            margin-top: 6em;
        }



    }


    @media only screen and (max-width: 1250px) {
        .hero-txt-2 {
            display: none;
        }

        .overlapping-elements__text-box-desktop {
            display: none;
        }

        #transcript {
            stroke: #1a7b99;
        }

        .video__info {
            display: none;
        }

        .play-button-mobile {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
        }

        .play-button-mobile.play__button {
            padding-left: 0;
        }

        .video__info-mobile {
            display: block;
            margin: 1em 0;
        }

        .video__info-mobile .video__text {
            width: 100%;
        }

        .video__info-mobile .video__text h4.video__title {

            color: #000000 !important;
        }



        .video__wrapper {
            margin: 2em auto;
        }

        .video__description {
            width: 100%;

        }

    }

    @media only screen and (max-width: 1250px) {
        button.ada__button {

            margin-top: 1em;
        }

    }


    @media only screen and (min-width: 700px) and (max-width: 929px) {

        .text__wrapper {
            width: 71vw;
        }

        .ad-button svg,
        .transcript__btn svg {
            width: 25px;
        }
    }

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


        .text__wrapper {
            width: auto;
        }

        .video__control {
            margin-top: -90px;
            padding-right: 1em;
            align-self: unset;
        }

        span.play__button svg {
            width: 60px;
        }

        .ad-button svg,
        .transcript__btn svg {
            width: 25px;
        }
    }


    /**   end video styling  **/




    /*MENU STYLING*/
    .toggle-datatype {
        width: 50%;
        color: black;
        font-weight: 600;
        margin: 0 auto;
        margin-top: 15%;
        border-bottom: 1px solid black;
    }

    .datatype {
        width: 50%;
        height: 50px;
        text-align: center;
        position: relative;
    }

    .datatype .label {
        position: absolute;
        width: 50%;
        margin: 0 auto;
        font-size: 18px;
        padding: 15px 0px;
        font-family: 'Amplitude-Light';
        left: 0;
        right: 0;
        bottom: -3px;
        border-bottom: 5px solid transparent;
    }

    .datatype.active .label {
        border-bottom: 5px solid #008297;
    }

    @media screen and (max-width: 767px) {
        .toggle-datatype {
            width: 100%;
        }

        .data-tiles {
            flex-wrap: wrap;
        }

        div#feature-and-capabilities .mobile-reverse {
            flex-direction: column-reverse;
        }

        div#feature-and-capabilities img {
            margin: 0 0 20px 0 !important;
        }

        div#feature-and-capabilities>div.row {
            margin-bottom: 30px;
        }

        .quote-svg {
            width: 100%;
        }
    }

    .data-tiles-wrapper {
        display: none;
    }

    .data-tiles-wrapper.active {
        display: block !important;
    }

    /*END MENU STYLING*/

    /*CARD IMAGE SYTLING*/


    .overlapping-elements {
        position: relative;
    }

    .overlapping-elements__text-box-desktop {
        position: absolute;
        z-index: 2;
        padding: 1.5em;
        right: -44%;
        top: 9%;
        width: 92%;
    }

    .overlapping-elements__text-box-desktop h4 {
        font-family: "Amplitude-Medium", "Amplitude Medium";
        font-style: normal;
        margin-bottom: .5em;
        font-size: 1.7em;
    }

    .overlapping-elements__text-box-desktop p {
        font-size: 1.25em;
        font-family: "Amplitude-Light";

    }

    .overlapping-elements__text-box-desktop a {
        font-size: 1.5em;
    }

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

        .overlapping-elements__image {
            width: 100%;
        }

        .overlapping-elements__image img {
            width: 100%;
        }

        .overlapping-elements__text-box-mobile {
            display: block;
            position: relative;
            margin: 1em auto 0;
            width: 100%;
            /* right: 0% !important;  */
            padding: 1.5em;
        }

        .overlapping-elements__text-box-mobile a {
            font-size: 0.7em !important;
        }

        .core__link .arrow {
            background-image: url("data:image/svg+xml,%3Csvg height='16px' version='1.1' viewBox='0 0 26 16' width='26px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E %3Cg id='Artboard' stroke='%2300477B' stroke-width='3' transform='translate(-666.000000, -6507.000000)'%3E %3Cg id='Group' transform='translate(667.000000, 6508.000000)'%3E %3Cpath d='M0.5,7.5 L21.5,7.5' id='Line-13'%3E%3C/path%3E %3Cpath d='M16.5,0.5 L23.0192024,7.01920241' id='Line-14'%3E%3C/path%3E %3Cpath d='M16.5,6.5 L23.0192024,13.0192024' id='Line-14' transform='translate(20.000000, 10.000000) scale(1, -1) translate(-20.000000, -10.000000) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
            width: 20px !important;
            height: 20px !important;
            position: absolute;
            background-repeat: no-repeat;
            background-size: 100%;
            margin-left: 12px;
            margin-top: 7px;
        }

    }

    /*iPAD STYLING */
    @media only screen and (min-width: 800px) and (max-width: 1370px) {
        .overlapping-elements__image {
            width: 100%;
        }

        .overlapping-elements__text-box-desktop {
            display: none;
        }

        .overlapping-elements__text-box-mobile {
            display: block;
            position: relative;
            margin: 1em auto 0;
            width: 100%;
            padding: 1.5em;
        }

    }


    .text-box--gray {
        background: #f5f7f8;
    }

    .text-box--gray h4,
    .text-box--gray p {
        color: #31373d;
        line-height: initial;
    }

    .section__content-wrap {
        max-width: 1200px;
        margin: 0 auto;
    }

    .core__link .arrow {
        background-image: url("data:image/svg+xml,%3Csvg height='16px' version='1.1' viewBox='0 0 26 16' width='26px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E %3Cg id='Artboard' stroke='%2300477B' stroke-width='3' transform='translate(-666.000000, -6507.000000)'%3E %3Cg id='Group' transform='translate(667.000000, 6508.000000)'%3E %3Cpath d='M0.5,7.5 L21.5,7.5' id='Line-13'%3E%3C/path%3E %3Cpath d='M16.5,0.5 L23.0192024,7.01920241' id='Line-14'%3E%3C/path%3E %3Cpath d='M16.5,6.5 L23.0192024,13.0192024' id='Line-14' transform='translate(20.000000, 10.000000) scale(1, -1) translate(-20.000000, -10.000000) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
        width: 30px;
        height: 20px;
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-left: 12px;
        margin-top: 7px;
    }

    .core__link.arrow-text::after {
        content: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3BsaXQtY3RhIiBoZWlnaHQ9IjI0cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDM4IDI0IiB3aWR0aD0iMzhweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgICAgICAgICAgICAgPHRpdGxlPjwvdGl0bGU+DQogICAgICAgICAgICAgICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+IA0KPGcgZmlsbD0ibm9uZSAiIGZpbGwtcnVsZT0iZXZlbm9kZCAiIGlkPSJQYWdlLTEgIiBzdHJva2U9Im5vbmUgIiBzdHJva2UtbGluZWNhcD0icm91bmQgIiBzdHJva2UtbGluZWpvaW49InJvdW5kICIgc3Ryb2tlLXdpZHRoPSIxICI+IDxnIGlkPSJBcnRib2FyZCAiIHN0cm9rZT0iIzM1ZThmZSAiIHN0cm9rZS13aWR0aD0iMw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NjYuMDAwMDAwLCAtNjUwNy4wMDAwMDApICI+IDxnIGlkPSJHcm91cCAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY2Ny4wMDAwMDAsIDY1MDguMDAwMDAwKSAiPiA8cGF0aCBkPSJNMC41LDcuNSBMMjEuNSw3LjUgIiBpZD0iTGluZS0xMyAiPjwvcGF0aD4gPHBhdGggZD0iTTE2LjUsMC41IEwyMy4wMTkyMDI0LDcuMDE5MjAyNDEgIiBpZD0iTGluZS0xNA0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiPjwvcGF0aD4gPHBhdGggZD0iTTE2LjUsNi41IEwyMy4wMTkyMDI0LDEzLjAxOTIwMjQgIiBpZD0iTGluZS0xNCAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjAwMDAwMCwgMTAuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC0yMC4wMDAwMDAsIC0xMC4wMDAwMDApICI+PC9wYXRoPiA8L2c+IDwvZz4gPC9nPg0KDQogPC9zdmc+);

        margin-left: 10px;
    }



    .diver {
        display: none;
    }

    /**
    .background-right-image {
        background-image: url(/content/dam/jpm/cib/complex/content/investment-banking/director-advisory-services/2022_director_advisor_services_600x800.jpg);
        background-repeat: no-repeat;
        background-position: right;

    }

    **/


    /** testing hero video background  **/
    .back-vid {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
        min-height: 900px;
        width: 100%;

    }

    .video-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }

    .video-container>video-js {
        position: absolute;
        top: -4em;
        bottom: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
        z-index: -2;
        object-fit: cover;
        overflow: hidden;
    }





    #content {
        border: 2px dotted green;
        padding: 18px;
        margin-left: 215px;
        min-height: 2000px;
        color: darkgrey;
    }

    .adam-smith-award-container {
        display: flex;
        align-items: center;
        margin-top: 1em;
    }

    .adam-smith-award-container svg {
        margin-right: 1em;
    }


    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }

        .modal-content {
            padding: 1em;
        }
    }


/**  trying hover effect on next article  **/

    .footer-next-article-container, .footer-previous-article-container, .footer-articles-link-container {
    /**    -webkit-transition: border-color 0.1s;
    transition: border-color 0.1s;
    **/
    overflow: hidden;
    cursor: pointer;
    max-height: 425px;
    height: 100%;
    width: 100%;
    min-height: 80px;
    
    }

    


    .footer-next-article {
        overflow: hidden;
        height: 100%;
        text-align: right;
        position: relative;
        max-width: 600px;
        min-width: 450px;
        
    }

    .footer-next-article-text {
        position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

        -webkit-transition: all 0.4s ease-in-out ;
        transition: all 0.4s ease-in-out ;
        opacity: .9;
        z-index: 3;

    }

    .footer-next-article-container:hover .footer-next-article-text  {
        
        left: 60%;

/*
      animation: slideRight 2s ease-in-out ;
      animation-direction: reverse;
        
        */
    }

    /*

    @keyframes slideRight {

        0%
         {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(40px, 0);
        }
    }

    */


    .footer-next-article-image {
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        opacity: .9;
        right: 0;
        max-height: 425px;
        height: 100%;

    }

    .footer-articles-link-image {
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        opacity: .9;
        
        
        width: 20px;
        height: 20px;

    }

    .footer-next-article-container:hover .footer-next-article-image,
    .footer-articles-link-container:hover .footer-articles-link-image  {
            -webkit-transform: scale(1.15) rotate(0.01deg);
            transform: scale(1.15) rotate(0.01deg);
            opacity: 1;
        }




    


.footer-previous-article {
        overflow: hidden;
        height: 100%;
        text-align: right;
        position: relative;
        max-width: 600px;
        min-width: 450px;
        
    }


    .footer-previous-article-text {
        position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

        -webkit-transition: all 0.4s ease-in-out ;
        transition: all 0.4s ease-in-out ;
        opacity: .9;
        z-index: 3;

    }

    .footer-previous-article-container:hover .footer-previous-article-text  {
        
        left: 48%;

/*
      animation: slideRight 2s ease-in-out ;
      animation-direction: reverse;
        
        */
    }

@media (max-width: 991px) {
         .footer-next-article-container img, .footer-previous-article-container img {
                 display: none;
                 padding: 2em 1em;
             }

              .footer-next-article-container, .footer-previous-article-container {
                  overflow: visible;}

                  .footer-next-article, .footer-previous-article {
                      text-align: center;
                      min-width: 160px;
                      width: 100%;
					  white-space: nowrap;
                  }

                  .footer-articles-link-container {
                      display: none;
                  }

             
         }


    /**   Adding new dividers here   **/

    .section--background-vid-divider {
    background-image: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/divider-black-desktop.svg');
    background-size: auto 59px;
    background-repeat: repeat no-repeat;
    position: relative;
    padding: 0;
    margin: 0;
    height: 80px;
}
	   
	   
	   .hero-bottom-divider-full {
    background-image: url(/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume2/divider-bottom-full-width-white.svg);
    background-repeat: repeat-x;
    background-position: bottom;
    position: absolute;
    min-width: 100%;
    bottom: 0;
    padding: 0;
    margin: 0;
    height: 60px;
}

.overlay-hero-bottom {
    margin-top: -200px;
    position: relative;
    z-index: 2;
    min-height: 200px;
}

.hero-jet-divider {
    background-color: #101820;
    min-height: 260px;
    color: #ffffff;
    font-family: "Amplitude Light";
    font-size: 24px;
    padding: 2% 8%;
}

.hero-bottom-divider {
    background-image: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume2/divider-bottom-full-width-white.svg');
    background-size: cover;
    background-repeat: no-repeat;
    position: center bottom;
    padding: 0;
    margin: 0;
    height: 260px;
    border-bottom: 140px solid #ffffff;

    
}



/*
#section-blurb {
  
}


#section-blurb .intro  {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.24px;

}

#section-blurb .section__header {
    font-size: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid #31373d;
    text-transform: uppercase;
    font-family: "Amplitude";
    font-weight: 500;
}

#section-blurb .section__header-large {
        
        font-weight: 500;
        line-height: 1.37;
        font-size: 32px;
        color: #31373D;
        
        margin-bottom: 1em;
        text-transform: uppercase;
        padding-top: 30px;


    }

*/


.section-blurb {
  /**  padding-bottom: 60px; **/
}


.section-blurb .intro  {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.01em;

    }
    .section-blurb .section-blurb-logo {
        margin-right: auto;
        width: 180px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        
    }

.section-blurb .logos {
    display: flex;
    margin: 0 auto;
}
    
    .section-blurb .section-blurb-time {
        
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 16px;
        letter-spacing: 0.32px;
        
    }

.section-blurb .section__header {
    font-size: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid #474C50;
    text-transform: uppercase;
    
    font-weight: 500;
    margin-bottom: 30px;
}


.section__header-large {
        
        font-weight: 500;
        line-height: 1.37;
        font-size: 32px;
        color: #31373D;
        
        margin-bottom: 1em;
        text-transform: uppercase;
        padding-top: 30px;


    }
    
    .section-blurb .section-blurb-row {
        margin-bottom: 80px;
        padding-bottom: 20px;
    border-bottom: 1px solid #474C50;
    }

.section-blurb .author {
    font-size: 16px;
    
    
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.section-blurb .author .name {
    color: #31373d;
    font-weight: 400;
    margin-bottom: 20px;
}


.section-blurb .author-image {
    max-width: 160px;
    width: 100%;
    margin: 10px;
    text-align: right;
}
    
    
    .emphasis-text {
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.32px;
        padding: 30px 0;
        line-height: 1.8;
        
    }
    
    .first-letter::first-letter {
        color: #1E5073;

font-family: Amplitude;
font-size: 130px;
font-style: normal;
font-weight: 300;
line-height: 103px; /* 79.231% */
letter-spacing: 2.6px;
        float: left;
        margin: 0 .1em 0 0;
        
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


/**    ----  article modal styling ----  **/

/**    ----  article modal styling ----  **/

.modal-xl {
    max-width: 96%;
}
.modal, .sidepanel {
    z-index: 9999999;
}
#menuModal {
    z-index: 9999999;
}
.modal-backdrop {
    z-index: 9999998;
}
#menuModal .modal-content, #menuModal .modal {
    background: rgba(16, 24, 32, 0.94);
    color: #ffffff;
}
#menuModal .nav-tabs .nav-link.active, #menuModal .nav-tabs .nav-link:focus-visible, #menuModal .nav-tabs .nav-link:not(.empty):hover, #menuModal .nav-tabs .nav-link:not(.empty):focus {
border: none;
border-bottom: 1px solid #D6B89C;
color: #D6B89C;
background-color: transparent;
}
#menuModal .modal-title {
    font-size: 40px;
    color: #ffffff;
    font-weight: 300;
}
#menuModal .modal-header {
    border-bottom: none;
    margin-left: 120px;
    margin-top: 18px;
}
#menuModal .modal-footer {
    border-top: none;
}
#menuModal a {
    color: #ffffff;
}
#menuModal a:hover {
    text-decoration: none;
    color: #D6B89C;
}
#menuModal > .tab-pane, #solutionsBlack .tab-pane {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    padding-right: -17px;
    max-height: 660px;
    box-sizing: content-box;
}
#solutionsBlack ul.nav-tabs {
    border-bottom: none;
}
#solutionsBlack a {
    background-color: transparent;
    margin-bottom: 36px;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    text-align: left;
    font-size: 16px;
}
#solutionsBlack a:hover {
    color: #D6B89C;
    
}
#solutionsBlack .nav-tabs .show>.nav-link {
    background-color: transparent;
}
#solutionsBlack .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    padding-bottom: 10px;
    text-align: center;
}
#solutionsBlack .nav-tabs .nav-link.empty {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-color: transparent;
    color: #ffffff;
    cursor: default;
    outline: none;
    padding-bottom: 10px;
    text-align: center;
    font-size: 16px;
}
#solutionsBlackLeftContainer {
    border-right: 1px solid #333333;
}
#solutionsBlack .nav-tabs .nav-link.active, #solutionsBlack .nav-tabs .nav-link:focus-visible, #solutionsBlack .nav-tabs .nav-link:not(.empty):hover, #solutionsBlack .nav-tabs .nav-link:not(.empty):focus {
border: none;
border-bottom: 1px solid #D6B89C;
color: #D6B89C;

font-weight: 500;
}
#solutionsBlack .nav-tabs .nav-link.empty:hover {
    color: #ffffff;
}
#menuModal .card, #section--list-hero .card {
    height: 100%;
}
#menuModal img, #section--list-hero img {
    width: 100%;
    height: auto;
}
#menuModal .card .card-title {
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    min-height: 80px;
    
}
#menuModal .card .card-footer {
    padding: 1.25em;
    background-color: transparent;
    border-top: 0;
    margin-bottom: 20px;
    bottom: 0;
}
#menuModal .card-dark {
    background-color: transparent;
    color: #ffffff;
}
#menuModal .card .card-tag {
    color: #ffffff;
    line-height: 24px;
    margin-top: 24px;
    
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}
#menuModal .card-dark .card-tag-dark, #menuModal .card-dark p {
    background-color: transparent;
    color: #ffffff;
}
#menuModal .card .card-img-top-container {
    /** transition: height 0.3s ease-out; **/
    filter: brightness(80%);
    height: 260px;
    max-height: 300px;
    overflow: hidden;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#menuModal .card .card-img-top {
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    opacity: .6;
    width: 100%;
    object-fit: cover;
}
#menuModal .card:hover .card-img-top-container {
    /**
     -webkit-transform: scaleY(1.25) rotate(0.01deg);
            transform: scaleY(1.25) rotate(0.01deg);
            **/
    opacity: 1;
    height: 280px;
    filter: brightness(100%);
}
#menuModal .card:hover .card-img-top {
    object-fit: cover;
    opacity: 1;
}
    
    #menuModal .card .card-link.white {
    color: #ffffff;
}
    
    .link.white, .link.white:after {
    color: #ffffff;
}
    
    .half-text .link.white {
        font-weight: 700;
        letter-spacing: 2.25px;
        text-transform: uppercase;
        
    }
    
    
    #menuModal .card:hover .card-link {
        text-decoration: underline;
    }
    
    #menuModal  .closebtn {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
    font-size: 48px;
    z-index: 9;
    background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/icon-close-white.svg') no-repeat scroll 0 0 transparent;
}
#menuModal .closebtn:hover {
    color: #000;
    
    z-index: 9;
    background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/icon-close-white-hover.svg') no-repeat scroll 0 0 transparent;
}
    
 

    
    
    .overlay-cta-button-right-3  {
        color: #ffffff;
        background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-3/landing/side-button-shape.svg'); 
     background-color: #121B1F;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
  position: fixed;
  top: 50%;
  right: -68px;
        z-index: 4;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.125);
  padding: 10px 20px;
    }
    
    .overlay-cta-button-right-3-text {
        font-size: 18px;
        font-weight: 400;
  
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
  transform: rotate(90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);
  
}

 .overlay-cta-button-right  {
        color: #ffffff;
    /*    background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-3/landing/side-button-shape.svg'); */
     background-color: #121B1F;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
  position: fixed;
  top: 50%;
  right: -68px;
  
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 4;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.125);
  padding: 10px 20px;
  transform: rotate(90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);
  
}

.overlay-cta-button-right .arrow {
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 3px;
}

.overlay-cta-button-right .up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.overlay-cta-button-right a {
    color: #ffffff;
    text-decoration: none;
}

.overlay-cta-button-right:hover {

box-shadow: .25rem .25rem 1rem .25rem rgba(255,255,255,0.25);
background-color: #005075 !important;

}

@media  only screen and (max-width: 768px) {
    .overlay-cta-button-right {
        display: none;
    }
    
    .section-blurb .logos {
    max-width: 90%;
}
}