.card-grid{display: flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:1.5rem;margin-bottom:2rem;}
.card-grid.full-grid{row-gap:2rem;justify-content:flex-start;}
/*#content .card-grid.col4 .card{width:calc(25% - 1.125rem);} */ /*DEFAULT LEAVE COMMENTED*/
#content .card-grid.col3 .card{width: calc(33.33% - 1rem);}
#content .card-grid.col2 .card{width: calc(50% - 1rem);}
/*BASIC CARDS*/
#content .card{width:calc(25% - 1.125rem);border:1px solid #ddd;/*padding:1rem;padding-top:0;padding-bottom:2.5rem;*/padding:0 1rem 2.5rem 1rem;text-align:left;position:relative; background-color: #fff;box-shadow: 1px 1px 8px rgba(0,0,0,.15);}
#content .card a:not(.arrow){display:block;}
#content .card img{position:relative;display:block;width:calc(100% + 2rem);left:-1rem;margin-bottom:1rem;}
#content .card p{display:block;margin:0 0 .5rem 0;}

#content .card p.eyebrow, #content .card.resource a:first-child + p{text-transform: uppercase;font-size:1rem;font-weight:700;letter-spacing:2px;line-height:1;color:#004667;margin-bottom:.25rem !important;}
#content .card p.title, #content .card p.title a{color:#004677;font-size:1.25rem;font-weight:300;line-height:1.25;text-decoration:none;}
#content .card p.title a:hover{text-decoration:underline;}

#content .card a.readmore{display: block;background-color: #f2f2f2;padding: 0px 8px;line-height: 32px;font-size:.95rem;font-weight: bold;color: #002449;margin-bottom: 0px;transition: all .25s ease-in-out;position: absolute;bottom: 0px;left: 0px;width: 100%;text-decoration: none;}
#content .card a.readmore:hover{color:#004677;color:#fff;background-color:#004677;}
#content .card a.readmore:after {content: '\25b8';position: absolute;top: 0px;right: 8px;font-size: 1.1875rem;display: block;line-height: 32px;}


/*SOLUTION CARDS*/
#content .card.solution{padding-top:1rem;} /*changed this as this is uncommon as most start with images*/
#content .card.solution a:first-child{max-width:320px;}
#content .card.solution a:first-child{display: block;height: auto;margin-bottom: .5rem;}
#content .card.longlogo a:first-child{padding-top:6px;}
#content .card.solution a:first-child + p{margin-bottom:2rem;}
#content .card.solution a.arrow{position:absolute;bottom:1rem;} /*ADJUSTED SO ONLY AFFECTED BY SOLUTIONS*/


/*DOWNLOAD READMORE BUTTON CARDS*/
#content .card.download a.readmore:after {content: ''; position: absolute; display: block; width: 16px; height: 16px; top: 1px; right: 10px;color: #002449;}  
#content .card.download a.readmore:after {content:url('data:image/svg+xml,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.61"><path style="fill:%23002449;" d="M84.58,46.74c2.97-3.06,7.85-3.13,10.9-.16s3.13,7.85.16,10.9c-.09.09-.17.17-.26.26l-29.29,28.88c-3,2.95-7.82,2.95-10.82,0l-28.87-28.51c-3.04-2.99-3.08-7.87-.09-10.9,2.99-3.04,7.87-3.08,10.9-.1l15.89,15.75.16-55.47C53.45,3.13,57.05-.18,61.31,0c4.05.18,7.27,3.45,7.38,7.51l-.15,55,16.04-15.78ZM0,113.22l.1-30.18c-.11-4.26,3.26-7.81,7.52-7.92,4.26-.11,7.81,3.26,7.92,7.52,0,.18,0,.36,0,.54l-.07,22c30.67.06,61.3.06,91.91,0l.07-22.12c.04-4.26,3.53-7.69,7.79-7.65s7.69,3.53,7.65,7.79l-.1,30h-.09c-.19,4.09-3.54,7.33-7.64,7.36-35.82.07-71.61.07-107.38,0-4.1-.01-7.48-3.24-7.67-7.34Z"/></svg>')} 
#content .card.download a.readmore:hover::after {content:url('data:image/svg+xml,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.61"><path style="fill:%23FFFFFF;" d="M84.58,46.74c2.97-3.06,7.85-3.13,10.9-.16s3.13,7.85.16,10.9c-.09.09-.17.17-.26.26l-29.29,28.88c-3,2.95-7.82,2.95-10.82,0l-28.87-28.51c-3.04-2.99-3.08-7.87-.09-10.9,2.99-3.04,7.87-3.08,10.9-.1l15.89,15.75.16-55.47C53.45,3.13,57.05-.18,61.31,0c4.05.18,7.27,3.45,7.38,7.51l-.15,55,16.04-15.78ZM0,113.22l.1-30.18c-.11-4.26,3.26-7.81,7.52-7.92,4.26-.11,7.81,3.26,7.92,7.52,0,.18,0,.36,0,.54l-.07,22c30.67.06,61.3.06,91.91,0l.07-22.12c.04-4.26,3.53-7.69,7.79-7.65s7.69,3.53,7.65,7.79l-.1,30h-.09c-.19,4.09-3.54,7.33-7.64,7.36-35.82.07-71.61.07-107.38,0-4.1-.01-7.48-3.24-7.67-7.34Z"/></svg>')}


/*  digital ads page Button Style */
#content  .btn {display: inline-block;padding: 0 1.5rem;background: linear-gradient(45deg, rgba(0, 33, 67, 1) 0%, rgba(0, 36, 73, 1) 33.3%, rgba(0, 70, 119, 1) 100%);color: #fff;font-weight: 600;line-height: 3rem;letter-spacing: 2px;text-decoration: none;width: 100%;transition: all .25s ease-in-out;outline: 2px solid #004677;text-align: center;}
#content  .btn:hover {background: #ffffff;color: #002449;}


/*MODAL CARDS*/
#content .card.modal a.popup{display:block;}
#content .card.modal a.popup:before{content:'+';display:block;height:48px;width:48px;border-radius:50%;background-color:#002449;position:absolute;top:8px;right:8px;font-family:Montserrat, Arial;font-weight:bold;text-align:center;line-height:48px;color:rgba(255,255,255,.9);font-size:32px;transition:all .25s ease-in-out;text-indent:-1px; z-index: 99;}
#content .card.modal a.popup:hover:before{background-color:#009DDB;color:#ffffff;}


/*MODAL POPUPS*/
.card-modal{background-color:#002449;color:#fff;max-width:600px;padding:32px;margin:0px auto;position:relative;display:block;}
.card-modal img {width:100%;height:auto;display:block;margin-bottom:1rem;}
.card-modal h2{font-size:1.25rem;font-weight:500;margin-botom:.5rem;}
.card-modal p{font-size:1rem;margin-bottom:1rem;}
.card-modal p.arrow{margin-top:3rem;}
.card-modal p.arrow a{font-family: Montserrat;text-decoration: none;font-weight: 600;font-size: 1.175rem;letter-spacing: 1px;text-transform:uppercase;position: relative;line-height: 1;color: #ffffff;}
.card-modal p.arrow a:before {content: '';display: block;width: 0%;left: 50%;background-color: #009DDB;transition: all .25s ease-in-out;position: absolute;bottom: -0.25rem;height: 2px;}
.card-modal p.arrow a:hover:before {width: calc(100% - 27px);left: 0px;}
.card-modal p.arrow a:after{content: '\279E'; position: relative;top: 2px;white-space: nowrap;height: 16px;width: 16px;display: inline-block;font-weight: 500; margin-left: 10px;transition: all .25s ease-in-out;}
.card-modal p.arrow.download a:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path style="fill:%23FFFFFF;" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z"/></svg>')} 
.card-modal p:last-of-type{margin-bottom:0px;}
.card-modal .mfp-close{background-color:#002449;padding-left:1px;color:#fff !important;height:32px;width:32px;text-align:center;line-height:28px;border-radius:50%;border:2px Solid #fff;font-size:28px;font-family:Montserrat, Arial;right:16px;top:16px;transition:all .25s ease-in-out;}
.card-modal .mfp-close:hover{background-color:#fff;color:rgba(31,43,74,1) !important;}
.card-modal .mfp-close:active{top:8px;}


/* MODAL VIDEO CARDS */ 
#content .card.modal.video > a:first-child{position:relative;} /*TO CORRECT CENTERING */
#content .card.modal.video > a:first-child:after {content: '';height: 64px;width: 64px;background-color: #002449;border-radius: 50%;color: #fff;position: absolute;top: 50%;left: 50%;margin-left: -32px;margin-top: -32px;transition: all .25s ease-in-out;}
#content .card.modal.video > a:first-child:after{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' style='fill:%23fff;'%3E%3Cpolygon points='22.8,16.2 22.8,47.8 46.8,32 '/%3E%3C/svg%3E");}
#content .card.modal > a:first-child:hover:after{background-color:#009DDB;color:#ffffff;}


/* EVENT CARDS */ 
#content .card.event{padding-bottom:3rem;}
#content .card.event a.arrow, #content .card.bs a.arrow{position:absolute;bottom:1rem;}
#content .card.event .date{font-size:1rem;}


/*SVG COLORS */
svg .sol-ltblue {fill: #009ddb;}
svg .sol-dkblue {fill: #004677;}
svg .sol-navy {fill: #002449;}
svg .sol-nofill {fill: none;}
svg .sol-teal{fill:#007c82;}
svg .sol-wl-navy {fill:#333d47;}
svg .wl-grey {fill: #333D47;}

/* RESPONSIVE*/
@media (max-width:950px) {
   #content .card-grid .card{width:calc(33.33% - 1rem);}
   /*FOR SINGLE ROW CARD LIST SO DESIGN IS NOT FUNKY*/
   #content .card-grid:not(.full-grid).col4 .card:last-child{display:none;} 
}

@media (max-width:800px) {
   #content .card-grid.col4 .card:last-child{display:block;}
   #content .card-grid .card{width:calc(50% - 1rem) !important;}
}

@media (max-width:480px) {
   #content .card-grid{display:block;margin-bottom:1.5rem;}
   #content .card-grid .card{width:100% !important;margin-bottom:1.5rem;}
}


/* ### CODE BELOW IS FOR THE SOLUTIONS SECTION AND NEEDS TO BE CLEANED UP AND VERIFIED IF BEING USED ##### */
/*FOR SOLUTIONS WITHOUT BANNER H1*/
#content h1.small {color: #004677; font-family: Montserrat;font-size: 2.25rem; font-weight: 300; line-height: 1.25; margin-bottom: 16px;}		
@media (max-width: 1024px){ #content  h1.small {font-size: 2rem; } }		
@media (max-width: 760px){ #content h1.small {font-size: 1.75rem; }	}

/* SOLUTIONS BANNERS
.banner.solution .logo:first-child svg .sol-ltblue,
.banner.solution .logo:first-child svg .sol-dkblue,
.banner.solution .logo:first-child svg .sol-navy,
.banner.solution .logo:first-child svg .wl-teal,
.banner.solution .logo:first-child svg .wl-grey,
.banner.solution .logo:first-child svg{fill:#fff;}
.banner.solution .container .logo:first-child svg {height: 64px;margin:48px 0;display:block;}
.banner.solution {padding-top: 112px;}
.banner.solution .container {display:flex; align-items: center; flex-direction:row;position:relative;}
.banner.solution .logo + h1{font-family: Montserrat;font-weight: 300;font-size: 2rem;color:#fff;text-transform: none;padding-left:2rem;margin-left:2rem;}
.banner.solution .logo + h1:before {content: '';display: block;width: 1px;height: 80px;background-color: #fff;position:absolute;top:50%;transform: translateY(-50%);margin-left:-2rem;}
.banner.solution .logo.longlogo + h1{font-size:1.5rem;} */


@media (max-width: 1112px){
	.banner.solution .container{padding:0 18px;} 
	.banner.solution .container .logo.longlogo:first-child svg {height: 48px;margin:54px 0;}
}

@media (max-width: 1024px){	
	.banner.solution {padding-top:0px;margin:0;} 
}

@media (max-width: 960px){
	.banner.solution .logo + h1{font-size:1.5rem;}
	.banner.solution .logo + h1 br{display:none;}
}

@media (max-width: 760px){
	.banner.solution .container {display:block;padding:3rem 1rem;margin-top:0px !important;}
	.banner.solution .logo + h1:before{display:none;}
	.banner.solution .logo + h1{display:block;font-size: 1.25rem;text-align:center;padding:0;margin:0px auto;margin-top:1rem;}
	.banner.solution .container .logo:first-child svg{display:block;margin:0px auto;max-width:100%;}
	.banner.solution .container .logo.longlogo:first-child svg {display:block;margin:0px auto;height: 64px;}
}