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

img {
max-width: 100%;
}

p a { color: #005075;
    
}

p {
margin-bottom: 2rem;
}

p a:hover {
    text-decoration: none;
}


    
    /*********   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: 10px 60px;
        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;

        **/
    }

a.info-box-link {
    text-decoration: none;
}

.info-box {
    
    border-radius: 4px;
border: 1px solid #3DA1B7;
background: url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-4/bck-plus-pattern.svg')  repeat,  radial-gradient(1763.69% 375.5% at 33.88% 35.82%, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(255, 255, 255, 0.40);
background-blend-mode: overlay, normal, normal;
backdrop-filter: blur(25px);
    margin: 80px 0;
    padding: 25px;
    text-decoration: none!important;
}



a > .info-box:hover {
    text-decoration: underline;
}

.info-box-header {
   

font-family: Amplitude;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
letter-spacing: 1.12px;
text-transform: uppercase;
    margin: 6px;
    text-decoration: none!important;
}

.info-box-title {
    
font-family: 'Open Sans',  'Open Sans Medium';
font-size: 16px;
font-style: normal;
font-weight: 750;
line-height: normal;
letter-spacing: 0.16px;
    margin: 10px 0 15px;
    
}



.info-box-info {
    
    
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
    opacity: 0.8;
    border-left: 1px solid #3DA1B7;
padding-left: 14px;
    text-decoration: none!important;
}

.info-box-info::after {
    
  
    background-image: none;
    
    content: "\f08e";
    font-family: "Font Awesome 6 Pro";
    font-size: 12px;
    line-height: 12px;
    color: #31373d;
    margin-left: 8px;
}
    
  
a.info-box-link:hover .info-box-title {
    text-decoration: underline;
}

a.info-box-link:hover .info-box-info {
    opacity: 1;
}



    .side-scroll-header {
        color: #500E51;
        
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        margin: 40px 0;
        letter-spacing: 1.28px; 
        text-transform: uppercase;
    }

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

    .side-scroll-subhead {
        font-size: 16px;
        font-family: 'Open Sans',  'Open Sans Medium';
        font-weight: 750;
        letter-spacing: 0.02em;
        line-height: 1.4;
        color: #31373d;
        margin-bottom: 20px;
    }


.gotham28 
    {
        font-size: 28px;
        font-family: 'Open Sans',  'Open Sans Medium';
        font-weight: 750;
        line-height: normal;
        color: #31373d;
        margin-bottom: 20px;
    
}

.subhead {

    color: #3A5178;
    font-family: 'Open Sans',  'Open Sans Medium';
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 40px;
    line-height: normal;
    
    }
    
    .subhead.larger {
    font-size: 32px;
    }




.related-content {
	background-color: #f5f7f8;
	padding: 60px 120px;
	border-radius: 15px;
	margin: 15px;
}


.related-content h2 {
    color: #31373d;
    font-family: 'Open Sans',  'Open Sans Medium';
    font-weight: 700;
    font-size: 32px;
    
    line-height: normal;
	font-style: normal;
	margin-bottom: 50px;
    
    }

.related-content .related-title  {
        font-size: 28px;
        font-family: 'Open Sans',  'Open Sans Medium';
        font-weight: 750;
        line-height: normal;
        color: #31373d;
        
}
.related-content.related-content-two .related-title {
	font-size: 20px;
}


.related-content .related-image  {
	
	overflow: hidden;
}

.related-content .related-image img {
	object-fit: cover;
	width: 100%;
	border-radius: 8px;
}

.related-content .related-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.related-content .related-tag {
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.28px;
}

.related-content .related-time {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16px;
	font-family: 'Open Sans',  'Open Sans Medium';
}

.related-content a {
	text-decoration: none;
}

.related-content a:hover .related-title {
	text-decoration: underline;
}

.related-content .related-arrow {
	width: 49px;
	height: 49px;
	min-width: 49px;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.related-content a:hover .related-arrow {
	
	-webkit-transform: scale(1);
	transform: scale(1);
	
}


    .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-right:  auto;
        display: block;
        max-width: 90px;
        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 only screen and (max-width: 901px) {
        .sticky-sidebar nav ul {

            position: relative;

        }
        
        .sticky-sidebar {
            text-align: center;
            margin-bottom: 40px;
        }
    }

@media only screen and (max-width: 991px) {
	
	.related-content {
	background-color: #f5f7f8;
	padding: 20px;
	}

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

        }
	
	.emptyContainer {
		display: none;
	}
    }


    .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;
    }
    
    .bold-body-subhead {
    font-size: 18px;
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 2px;
    }
	
	.bold-body-name {
    font-size: 18px;
    font-weight: 500;
    margin-top: 40px;
    
    }
    
    .bold-body-text,
    .sticky-sidebar p.bold-body-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.33;
    margin: 10px 0;
    }


.article-subheader {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 40px;
}
p strong .article-color, .article-subheader {
    font-size: 18px;
}


   .article-mid-image {
        margin: 50px 0 80px;
    }
    
.sticky-sidebar-spacer {
    display: block;
    height: 148px;
}
    
    .sticky-image {
        
        border-radius: 30px;
        max-height: 370px;
        width: 100%;
            height: auto;
        max-width: 370px;
        filter: brightness(88%);
        margin-bottom: 30px;
    
    -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%);
}



 .overlay-cta-button-right  {
        color: #ffffff;
        font-family: "Amplitude";
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
  position: fixed;
  top: 50%;
  right: -68px;
  background-color: #101820;
  
  z-index: 4;
  border-radius: 0 0 8px 8px;
  
  padding: 26px 16px 6px;
  transform: translate(0%, -50%) rotate(90deg);
transition: .2s ease;

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

  /* Safari */
  -webkit-transform: translate(0%, -50%) rotate(90deg);
  /* Firefox */
  -moz-transform: translate(0%, -50%) rotate(90deg);

  /* IE */
  -ms-transform: translate(0%, -50%) rotate(90deg);
  
}



.overlay-cta-button-right::before {
  content: "";
  position: absolute;
  
  background-color: transparent;
  right: -50px;
  height: 25px;
  width: 50px;
  top: 0;
  border-top-left-radius: 25px;
  box-shadow: -25px 0 0 0 #101820;
}

.overlay-cta-button-right::after {
  content: "";
  position: absolute;
  
  background-color: transparent;
  left: -50px;
  height: 25px;
  top: 0;
  width: 50px;
  border-top-right-radius: 25px;
  box-shadow:  25px 0  0 0 #101820;
}



.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);
right: -62px;
text-decoration: underline;



}











    
/**  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;
        background: transparent;
        border-radius: 54px;

    }

    .footer-next-article-container:hover .footer-next-article-text  {
        
        left: 60%;
        background: rgba(255,255,255, 0.9);
        font-weight: 500;

/*
      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;
        
        */
    }


.footer-back-home, .digital-exclusive {
    display: flex;
	position: relative;
padding: 0px 274px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
    border-radius: 4px;
border: 1px solid #3DA1B7;
background: #FFF;
    font-size: 12px;
	line-height: 24px;
    font-weight: 500;
    text-transform: uppercase;
	letter-spacing: 0.08em;
	border-image: 
    linear-gradient(to right, 
		rgba(61, 161, 183, 0.5),
		rgba(71, 56, 155, 0.5) 48%,
		rgba(165, 49, 175, 0.5) 100%) 1;
    
}

.footer-back-home {
	background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, rgba(61, 161, 183, 0.5),
		rgba(71, 56, 155, 0.5) 48%,
		rgba(165, 49, 175, 0.5) 100%) border-box;
  border-radius: 0.5em;
  border: 1px solid transparent;
	
}



.footer-back-home a, .digital-exclusive a {
    text-decoration: none;
	line-height: 24px;
}
.footer-back-home a::after, 
.digital-exclusive a::after {
    
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    color: #31373d;
    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;
    font-size: 8px;
    width: 2rem;
    margin-right: -2.5rem;
    margin-left: 0.5rem;
    
}
.digital-exclusive a::after {
    
   
content: "\f33d";
}


.footer-back-home a:hover::after {
animation: slide 2s ease-in-out infinite;
    transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
}

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

.footer-next-article-container:hover .footer-next-article-text  {
        background: transparent;
        }
    
    .overlay-cta-button-right {
        display: none;
    }
         .footer-next-article-container img, .footer-previous-article-container img {
                 
                 padding: 2em 1em;
             }

              .footer-next-article-container, .footer-previous-article-container {
                  overflow: visible;
    font-size: 1px;
    color: transparent;}

    
    .footer-back-home, .digital-exclusive {
    
padding: 4px 20px;
        
    }
                  .footer-next-article, .footer-previous-article {
                      text-align: center;
                      min-width: 160px;
                      width: 100%;
					  white-space: nowrap;
                  }

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

             
         }





section.section {
    padding: 44px 0;
}

         

.section-blurb {
  padding-top: 60px; 
}


.section-blurb .intro  {
    color: #31373D;
font-family: 'Open Sans',  'Open Sans Medium';
font-size: 32px;
font-style: normal;
font-weight: 750;
line-height: normal;
    margin: 80px 0;

    }

.intro-small {
    font-size: 12px;
    
}
    .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-title {
        text-transform: uppercase;
        font-weight: 500;
        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-family: Amplitude;
    letter-spacing: 1.28px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 50px;
}


.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.section-blurb-pu6  .author .name {
	font-weight: 500;
	line-height: 1.2;
}


.section-blurb .author-image {
    max-width: 160px;
    width: 100%;
    margin: 10px;
    text-align: right;
}
    

.margin-80 {
    margin: 80px 0;
}

.padding-60 {
	padding-top: 60px;
	padding-bottom: 60px;
}
    
    .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: -2px -2px 0 0;
        
    }
    
    
    
    



    /**  //  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: 32px;
        padding-left: 36px;
        font-style: italic;
        color: #31373D;
        letter-spacing: 0.48px;
        line-height: 1.16;
        margin-top: 80px;
        margin-bottom: 80px;
    }

.quote-text-large {
    font-size:  48px;
}

.quote-text-small {
    font-size:  32px;
}

.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: 767px) {
		 
		

		 
		 .footer-previous-article-text {
			 font-size: 0;
		 }
      

.footer-previous-article-text img,
.footer-next-article-text img {
width: 34px;

}


    }


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

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




    }

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

.author-footer {
    margin: 80px 0;
    text-transform: uppercase;
}


.large-punctiation  {
		color: var(--accentcolor);
		font-size: 80px;
		line-height: .8;
	}
	
	.row .author-acq .author {
		font-weight: 500;
	}
	
	 .author-acq .name.article-color {
		color: var(--accentcolor);
	}
	
	 .author-acq .name {
		font-size: 20px;
	}
	
	 .author-acq.first {
		border-right: 1px solid #474c50;
	}
    

 /********** start -- Hero header styling ***********/
 
 /***  vol 3  ***/
 
 .unbound-vol-3 .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;
 }

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

 .unbound-vol-3   .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;
}

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


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

 .unbound-vol-3   .lockup  img{
        height: 22px;
    }



.unbound-vol-3 .readTime {
    margin-top: 30px;
    color: #ffffff;
    font-family: 'Open Sans',  'Open Sans Medium';
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.02em;
}


.unbound-vol-3 .text-right {
text-align: right;
}




  .unbound-vol-3  .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;
    }
    
    /**  end vol 3  **/

 .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 {
    position: relative;
}

.section-hero::before, .section-hero::after {
    z-index: 0;
}

   
.hero-overlay-gradient-top {

    background: linear-gradient(180deg, #0C0D1B 0%, rgba(12, 13, 27, 0.00) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    height: 150px;
    z-index: 3;
}


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

    .lockup  img{
        height: 22px;
    }



.readTime {
    margin-top: 55px;
    color: #ffffff;
    font-family:  'Open Sans Medium', 'Open Sans';
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
}



.hero {
    min-height: 660px;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

    .section-hero  h1 {
        color: #ffffff;
        font-family: 'Open Sans',  'Open Sans Medium';
        font-size: 60px;
        line-height: 1.2;
        font-weight: 750;

        letter-spacing: 0.4px;
    }

.hero__content {
    padding-left: 18%;
    padding-right: 9%;
    z-index: 9;
    
}


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

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

.hero-archive-container .hero-text-link a {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2.25px;
	text-transform: uppercase;
}

.breadcrumbs {
    color: #ffffff;
    margin-bottom: 85px;
    font-size: 14px;
    font-weight: 400;
}

.breadcrumbs a {
    color: #ffffff;
    
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    margin-right: 20px;
	text-decoration: underline;
    
}

.breadcrumbs a:hover {
    text-decoration: none;
}

.breadcrumbs a::after {
    content: "\f054";
    font-family: "Font Awesome 6 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: 14px;
    font-size: 8px;
    width: 2rem;
    margin-right: -2.5rem;
    margin-left: 0.5rem;
}

 .section-hero-right {

      

        background:url('/content/dam/jpm/cib/complex/content/treasury-services/payments-unbound/volume-4/magazine/articles/5/article5-banner.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        min-height: 660px;
     height: 100%;
        
        position: relative;

        overflow: hidden !important;
    }


    @media only screen and (max-width:991px) {
		
		
		.col.d-flex.justify-content-center.flex-column .text-center.small {
			display: none;
			
		}
		
		.related-content .related-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
			margin-bottom: 40px;
}
		
		
		.margin-80 {
    margin: 30px 0;
}
		
    
    /** vol 3  **/
    
     .unbound-vol-3    .hero {
            margin-right: 0;
            margin-left: 0;

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

        }
        
   .unbound-vol-3     .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;
}
        
     .unbound-vol-3   .hero-row-image {
        height: auto;
        text-align: center;
        padding: 20px;
    }
        
   .unbound-vol-3     .sticky-image {
        opacity: 1;
            filter: brightness(100%);
    }
        
    .unbound-vol-3    .sticky-sidebar-spacer {
            display: none;
        }


/**  end vol 3 **/
    
    .hero {
    min-height: unset;
    }
    
     .section-hero-right {

        min-height: 440px;
        
        }
        
        .author-footer {
    margin: 40px 0;
        }

        
        .hero {
            margin-right: 0;
            margin-left: 0;

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

        }
        
        .quote-text {
        
        font-size: 32px;
        }
        
        section.section {
    padding: 40px 20px;
}
        
        .section-hero  h1 {
        
        font-size: 44px;
        }
        
   .hero__content {
    
    padding:50px 25px;
}
        
        .sticky-image {
        opacity: 1;
            filter: brightness(100%);
    }
        
        .sticky-sidebar-spacer {
            display: none;
        }  
    
    
    }

@media only screen and (max-width:575px) {
       
        
        .section-hero  h1 {
        
        font-size: 32px;
        }
        
   .hero__content {
    
    padding:50px 25px;
}
    
}

.greenX {
		color: #22AF8B;
	}