html{font-size:1px}

@media(max-width:580px){
html{font-size:1px}
}

@media(min-width:2560px){
html{font-size:1px}
}

section.u4m-cards{
margin-top:100rem;
margin-bottom:100rem
}

section.u4m-cards.reverse-text h2.heading,
section.u4m-cards.reverse-text h3.subheading{
color:#fff
}

section.u4m-cards hr{
max-width:1330rem;
border-top:4px solid #f0f2f4;
margin-bottom:100rem
}


/* =========================================
   TOP CONTENT
   ========================================= */

section.u4m-cards .top-content{
float:none;
margin-left:auto;
margin-right:auto;
max-width:1340rem;
padding-left:20rem;
padding-right:20rem;
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:60rem
}

@media(max-width:768px){
section.u4m-cards .top-content{
flex-direction:column
}
}

section.u4m-cards .top-content .heading-content{
flex:0 0 44%;
margin-right:50rem
}

@media(max-width:768px){
section.u4m-cards .top-content .heading-content{
flex:0 0 100%;
margin-right:0
}
}

section.u4m-cards .top-content .heading-content .eyebrow{
color:gray;
font-family:"Nunito Sans",sans-serif;
font-size:14rem;
font-weight:800;
letter-spacing:2rem;
text-transform:uppercase;
display:block;
margin-bottom:10rem;
border-bottom:2rem solid #60bcff;
width:-moz-fit-content;
width:fit-content
}

@media(max-width:580px){
section.u4m-cards .top-content .heading-content .eyebrow{
font-size:12rem
}
}

section.u4m-cards .top-content .heading{
font-family:"Poppins",sans-serif;
font-size:50rem;
font-weight:bold;
letter-spacing:.63rem;
margin-bottom:0;
line-height:1.4
}

@media(max-width:580px){
section.u4m-cards .top-content .heading{
font-size:40rem;
margin-bottom:20rem
}
}

section.u4m-cards .top-content .subheading{
font-family:"Nunito Sans",sans-serif;
font-size:20rem;
line-height:1.7;
letter-spacing:.5rem;
margin-bottom:10rem
}

@media(max-width:580px){
section.u4m-cards .top-content .subheading{
font-size:16rem
}
}


/* =========================================
   TOP LINK
   ========================================= */

section.u4m-cards .top-content .link{
display:inline-block
}

section.u4m-cards .top-content .link a{
color:#000;
font-family:"Poppins",sans-serif;
font-weight:600;
font-size:20rem;
letter-spacing:.71px;
line-height:1.5;
cursor:pointer
}

section.u4m-cards .top-content .link a:after{
display:inline-block;
font-size:18rem;
color:#ff8396;
content:"";
font-family:"Font Awesome 5 Pro";
font-weight:400;
margin-left:5rem
}

section.u4m-cards .top-content .link a:hover,
section.u4m-cards .top-content .link a:focus{
color:#ff8396
}


/* =========================================
   CARD WRAPPER
   ========================================= */

section.u4m-cards .wrapper{
float:none;
margin-left:auto;
margin-right:auto;
max-width:1380rem;
padding-left:20rem;
padding-right:20rem;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:24rem
}

@media(max-width:580px){
section.u4m-cards .wrapper{
display:block;
gap:0
}
}


/* =========================================
   CARD
   ========================================= */

section.u4m-cards .wrapper div.card{
flex-basis:calc(33.333% - 40rem);
flex-grow:0;
flex-shrink:0;
display:flex;
flex-direction:column;
height:100%;
padding:0;
margin:0;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

@media(max-width:1024px){
section.u4m-cards .wrapper div.card{
flex-basis:calc(50% - 20rem)
}
}

@media(max-width:580px){
section.u4m-cards .wrapper div.card{
width:100%;
margin:0 0 30rem 0
}
}

section.u4m-cards .wrapper div.card:not(.no-image):hover{
transform:scale(1.025)
}


/* =========================================
   NO IMAGE CARD
   ========================================= */

section.u4m-cards .wrapper div.card.no-image{
position:relative;
background:#fff;
border:1rem solid #e5e9f0;
border-radius:10rem;
padding:34rem 32rem 30rem;
min-height:315rem;
overflow:hidden;
box-shadow:0 3rem 14rem rgba(20,35,60,.035)
}


/* GRADIENT BAR */

section.u4m-cards .wrapper div.card.no-image::before{
content:"";
display:block;
width:52rem;
height:4rem;
background:linear-gradient(
90deg,
#EC8747 0%,
#FF8396 20%,
#B92076 45%,
#016BD7 100%
);
border-radius:10rem;
margin-bottom:28rem
}


section.u4m-cards .wrapper div.card.no-image:hover{
transform:translateY(-5rem);
border-color:#d4dbe5;
box-shadow:0 16rem 35rem rgba(20,35,60,.08)
}

section.u4m-cards .wrapper div.card.no-image div.content{
padding:0;
margin:0;
display:flex;
flex-direction:column;
align-items:flex-start;
height:100%;
width:100%
}

section.u4m-cards .wrapper div.card.no-image div.content span.type{
color:#2864dc;
font-family:"Nunito Sans",sans-serif;
font-size:14rem;
font-weight:800;
letter-spacing:1.6rem;
text-transform:uppercase;
border-bottom:0;
margin-top:0;
margin-bottom:14rem
}

section.u4m-cards .wrapper div.card.no-image div.content span.title{
font-family:"Poppins",sans-serif;
font-size:24rem;
font-weight:600;
line-height:1.35;
color:#17243d;
margin-top:0;
margin-bottom:14rem
}

section.u4m-cards .wrapper div.card.no-image div.content span.teaser{
font-family:"Nunito Sans",sans-serif;
font-size:16rem;
line-height:1.7;
color:#687183;
margin-bottom:30rem
}

section.u4m-cards .wrapper div.card.no-image div.content span.cta,
section.u4m-cards .wrapper div.card.no-image div.content span.url{
margin-top:auto
}


/* =========================================
   NO IMAGE CARD LINKS
   ========================================= */

section.u4m-cards .wrapper div.card.no-image div.content span.cta a,
section.u4m-cards .wrapper div.card.no-image div.content span.url a{
color:#000;
cursor:pointer;
font-family:"Poppins",sans-serif;
font-size:16rem;
font-weight:600;
letter-spacing:.57rem;
line-height:1.5
}

section.u4m-cards .wrapper div.card.no-image div.content span.cta a:after,
section.u4m-cards .wrapper div.card.no-image div.content span.url a:after{
display:inline-block;
font-size:14rem;
color:#ff8396;
content:"";
font-family:"Font Awesome 5 Pro";
font-weight:400;
margin-left:5rem;
transition:transform .2s ease
}

section.u4m-cards .wrapper div.card.no-image:hover div.content span.cta a:after,
section.u4m-cards .wrapper div.card.no-image:hover div.content span.url a:after{
transform:translateX(5rem)
}

section.u4m-cards .wrapper div.card.no-image div.content span.cta a:hover,
section.u4m-cards .wrapper div.card.no-image div.content span.cta a:focus,
section.u4m-cards .wrapper div.card.no-image div.content span.url a:hover,
section.u4m-cards .wrapper div.card.no-image div.content span.url a:focus{
text-decoration:none;
color:#ff8396;
transition:.1s ease-in;
display:inline-block
}


/* =========================================
   CARD BUTTON
   ========================================= */

section.u4m-cards .wrapper div.card button{
color:#000;
font-family:"Poppins",sans-serif;
font-weight:600;
font-size:20rem;
letter-spacing:.71px;
line-height:1.5;
cursor:pointer
}

section.u4m-cards .wrapper div.card button:after{
display:inline-block;
font-size:18rem;
color:#ff8396;
content:"";
font-family:"Font Awesome 5 Pro";
font-weight:400;
margin-left:5rem
}

section.u4m-cards .wrapper div.card button:hover,
section.u4m-cards .wrapper div.card button:focus{
color:#ff8396
}


/* =========================================
   CARD IMAGE
   ========================================= */

section.u4m-cards .wrapper div.card div.image{
display:flex;
align-items:center;
width:100%;
background-size:cover;
background-position:50%
}

section.u4m-cards .wrapper div.card div.image a{
display:block;
margin:0 auto;
background-color:transparent;
box-shadow:none
}

section.u4m-cards .wrapper div.card div.image a:hover{
background-color:transparent
}

section.u4m-cards .wrapper div.card div.image img{
display:block;
margin:30rem auto 0 auto
}

section.u4m-cards .wrapper div.card div.image img.left{
margin:30rem auto 0 30rem
}

section.u4m-cards .wrapper div.card div.color-border{
height:5rem;
width:100%;
background-color:#9b72ff
}


/* =========================================
   CARD CONTENT
   ========================================= */

section.u4m-cards .wrapper div.card div.content{
padding:35rem 0;
display:flex;
flex-direction:column;
align-items:flex-start;
height:100%
}

@media(max-width:580px){
section.u4m-cards .wrapper div.card:not(.no-image) div.content{
margin-bottom:50rem
}
}

section.u4m-cards .wrapper div.card div.content span.url{
display:flex
}

section.u4m-cards .wrapper div.card div.content span.eyebrow,
section.u4m-cards .wrapper div.card div.content span.type{
color:gray;
font-family:"Nunito Sans",sans-serif;
font-size:14rem;
font-weight:800;
letter-spacing:2rem;
text-transform:uppercase;
display:block;
margin-bottom:10rem;
border-bottom:2rem solid #60bcff;
width:-moz-fit-content;
width:fit-content
}

@media(max-width:580px){
section.u4m-cards .wrapper div.card div.content span.eyebrow,
section.u4m-cards .wrapper div.card div.content span.type{
font-size:12rem
}
}

section.u4m-cards .wrapper div.card div.content span.title{
font-family:"Poppins",sans-serif;
font-size:24rem;
font-weight:500;
letter-spacing:0;
color:#3d3d3d;
line-height:1.375;
margin-top:5rem;
margin-bottom:15rem
}

section.u4m-cards .wrapper div.card div.content span.teaser{
font-family:"Nunito Sans",sans-serif;
font-size:16rem;
line-height:1.875;
letter-spacing:0;
color:gray;
display:block;
margin-bottom:0
}

@media(max-width:580px){
section.u4m-cards .wrapper div.card div.content span.teaser{
font-size:15rem
}
}

section.u4m-cards .wrapper div.card div.content span.cta,
section.u4m-cards .wrapper div.card div.content span.url{
margin-top:auto
}


/* =========================================
   CARD CONTENT LINKS
   ========================================= */

section.u4m-cards .wrapper div.card div.content span.cta a,
section.u4m-cards .wrapper div.card div.content span.url a{
color:#000;
font-family:"Poppins",sans-serif;
font-weight:600;
font-size:16rem;
letter-spacing:.57rem;
line-height:1.5;
cursor:pointer
}

section.u4m-cards .wrapper div.card div.content span.cta a:after,
section.u4m-cards .wrapper div.card div.content span.url a:after{
display:inline-block;
font-size:14rem;
color:#ff8396;
content:"";
font-family:"Font Awesome 5 Pro";
font-weight:400;
margin-left:5rem
}

section.u4m-cards .wrapper div.card div.content span.cta a:hover,
section.u4m-cards .wrapper div.card div.content span.cta a:focus,
section.u4m-cards .wrapper div.card div.content span.url a:hover,
section.u4m-cards .wrapper div.card div.content span.url a:focus{
color:#ff8396
}


/* =========================================
   IMAGE HEIGHTS
   ========================================= */

section.u4m-cards .wrapper div.card:nth-of-type(odd) div.image{
height:545rem
}

section.u4m-cards .wrapper div.card:nth-of-type(even) div.image{
height:495rem
}


/* =========================================
   LAYOUT TWO
   ========================================= */

section.u4m-cards .wrapper.layout-two div.card{
margin:5rem
}

section.u4m-cards .wrapper.layout-two div.card.no-image{
margin:5rem;
margin-top:0!important
}

section.u4m-cards .wrapper.layout-two div.card div.image{
height:450rem
}

section.u4m-cards .wrapper.layout-two div.card div.color-border{
display:none
}

section.u4m-cards .wrapper.layout-two div.card:not(.no-image) div.content{
max-width:330rem
}

section.u4m-cards .wrapper.layout-two div.card div.content span.title{
font-family:"Poppins",sans-serif;
font-size:30rem;
font-weight:500;
letter-spacing:0;
line-height:1.5;
margin-bottom:20rem
}

section.u4m-cards .wrapper.layout-two div.card.no-image div.content span.title{
font-size:24rem;
font-weight:600;
line-height:1.35
}

@media(max-width:580px){

section.u4m-cards .wrapper.layout-two div.card div.content span.title{
font-size:28rem;
margin-bottom:20rem
}

section.u4m-cards .wrapper.layout-two div.card.no-image div.content span.title{
font-size:22rem
}

}

section.u4m-cards .wrapper.layout-two div.card:nth-of-type(3n){
margin-top:100rem
}

section.u4m-cards .wrapper.layout-two div.card:nth-of-type(3n + 1){
margin-top:0
}

section.u4m-cards .wrapper.layout-two div.card:nth-of-type(3n + 2){
margin-top:50rem
}

@media(max-width:580px){
section.u4m-cards .wrapper.layout-two div.card{
margin-top:0!important
}
}


/* =========================================
   LAYOUT THREE
   ========================================= */

section.u4m-cards .wrapper.layout-three div.card div.image{
height:90rem;
width:90rem;
background-size:contain;
background-repeat:no-repeat
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n){
margin-top:160rem
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n).reset-card-height{
margin-top:-40rem
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n + 1){
margin-top:0
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n + 2){
margin-top:40rem
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n + 3){
margin-top:80rem
}

section.u4m-cards .wrapper.layout-three div.card:nth-of-type(5n + 4){
margin-top:120rem
}

section.u4m-cards .wrapper.layout-three div.card.no-image{
margin-top:0!important
}

@media(max-width:580px){
section.u4m-cards .wrapper.layout-three div.card{
margin-top:0!important
}
}


/* =========================================
   LAYOUT FOUR
   ========================================= */

section.u4m-cards .wrapper.layout-four div.card div.image{
height:90rem;
width:100%;
background-size:contain;
background-repeat:no-repeat
}

@media(max-width:580px){
section.u4m-cards .wrapper.layout-four div.card{
margin-top:0
}
}


/* =========================================
   CARDS PER ROW
   ========================================= */

section.u4m-cards .wrapper.layout-two.two div.card{
flex-basis:calc(50% - 10rem)
}

section.u4m-cards .wrapper.layout-two.three div.card{
flex-basis:calc(33.333% - 16rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.layout-two.three div.card{
flex-basis:calc(50% - 12rem)
}
}

section.u4m-cards .wrapper.layout-two.four div.card{
flex-basis:calc(25% - 18rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.layout-two.four div.card{
flex-basis:calc(50% - 12rem)
}
}

section.u4m-cards .wrapper.layout-two.five div.card{
flex-basis:calc(20% - 20rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.layout-two.five div.card{
flex-basis:calc(50% - 12rem)
}
}


section.u4m-cards .wrapper.two div.card{
flex-basis:calc(50% - 12rem)
}

section.u4m-cards .wrapper.three div.card{
flex-basis:calc(33.333% - 16rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.three div.card{
flex-basis:calc(50% - 12rem)
}
}

section.u4m-cards .wrapper.four div.card{
flex-basis:calc(25% - 18rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.four div.card{
flex-basis:calc(50% - 12rem)
}
}

section.u4m-cards .wrapper.five div.card{
flex-basis:calc(20% - 20rem)
}

@media(max-width:1024px){
section.u4m-cards .wrapper.five div.card{
flex-basis:calc(50% - 12rem)
}
}


/* =========================================
   MOBILE NO-IMAGE CARDS
   ========================================= */

@media(max-width:580px){

section.u4m-cards .wrapper div.card.no-image{
width:100%;
min-height:auto;
padding:28rem 24rem;
margin-bottom:20rem
}

section.u4m-cards .wrapper div.card.no-image::before{
width:44rem;
margin-bottom:22rem
}

section.u4m-cards .wrapper div.card.no-image div.content{
margin-bottom:0
}

section.u4m-cards .wrapper div.card.no-image div.content span.type{
font-size:12rem
}

section.u4m-cards .wrapper div.card.no-image div.content span.title{
font-size:22rem
}

section.u4m-cards .wrapper div.card.no-image div.content span.teaser{
font-size:15rem
}

}


/* =========================================
   BOTTOM CTA
   ========================================= */


section.u4m-cards .bottom-cta{
float:none;
margin-left:auto;
margin-right:auto;
max-width:1380rem;
padding-left:20rem;
padding-right:20rem;
margin-top:30rem;
display:flex;
justify-content:flex-end;
align-items:center
}

section.u4m-cards .bottom-cta>a,
section.u4m-cards .bottom-cta .hs-cta-node>a{
display:inline-block;
font-family:"Poppins",sans-serif;
color:#000;
background-color:#ff8396;
border:0;
border-radius:26rem;
padding:12rem 34rem;
margin:20rem;
font-size:18rem;
line-height:1.5;
letter-spacing:.64rem;
text-decoration:none;
cursor:pointer;
text-align:center;
font-weight:bold
}

/* Keep same appearance on hover/focus */
section.u4m-cards .bottom-cta>a:hover,
section.u4m-cards .bottom-cta>a:focus,
section.u4m-cards .bottom-cta .hs-cta-node>a:hover,
section.u4m-cards .bottom-cta .hs-cta-node>a:focus{
color:#000;
background-color:#ff8396;
text-decoration:none
}

@media(max-width:580px){

section.u4m-cards .bottom-cta{
margin-top:20rem;
padding-left:20rem;
padding-right:20rem
}

section.u4m-cards .bottom-cta>a,
section.u4m-cards .bottom-cta .hs-cta-node>a{
font-size:16rem;
margin:20rem 0
}

}

}