:root {
/*
  --main-color: #00539C;
  --secondary-color: #FFB81C;
  --tertiary-color: #E87722;
  --dark-color: #333333;
  --light-color: #F4F4F4;
  --font-family: 'Arial', sans-serif; 
*/


/* TEMPORARY COLOURS */
  --primarycolor-100: #e8edf4;
  --primarycolor-400: #282561;
  --secondarycolor-100: #e9f4f4;
  --secondarycolor-200: #acd6d3;
  --secondarycolor-400: #00a79d;
  --secondarycolor-600: #25749f;
  --tertiarycolor-100: #fbf4f4;
  --tertiarycolor-400: #b9245e;
  --tertiarycolor-600: #a81b51;

  --font-size-base: 16px;
  --line-height-base: 1.5;
  
  --font-size-xl: calc(var(--font-size-base) + 8px); /* 24px, 1.5rem  */
  --font-size-lg: calc(var(--font-size-base) + 4px); /* 20px, 1.25rem */
  --font-size-md: var(--font-size-base); /* 16px, 1rem */
  --font-size-sm: calc(var(--font-size-base) - 2px); /* 14px, 0.875rem */
  --font-size-xs: calc(var(--font-size-base) - 4px); /* 12px, 0.75rem */

  --line-height-xl: calc((var(--line-height-base) * 1.4) * 1rem); /* 2.1 */
  --line-height-lg: calc((var(--line-height-base) * 1.2) * 1rem); /* 1.8 */
  --line-height-md: calc((var(--line-height-base) * 1) * 1rem); /* 1.5 */
  --line-height-sm: calc((var(--line-height-base) * 0.9) * 1rem); /* 1.35 */
  --line-height-xs: calc((var(--line-height-base) * 0.8) * 1rem); /* 1.2 */

  --border-radius: 5px;
  --transition-speed: 0.3s;

  --logo-width-dh: 260px;
  --logo-width-nec: 75px;

  --lineclamp: 6;
}
body.diversity-hub {height: initial;}

.bg-primarycolor-100 {background: var(--primarycolor-100);}
.bg-primarycolor-400 {background: var(--primarycolor-400);}
.bg-secondarycolor-100 {background: var(--secondarycolor-100);}
.bg-secondarycolor-200 {background: var(--secondarycolor-200);}
.bg-secondarycolor-400 {background: var(--secondarycolor-400);}
.bg-secondarycolor-600 {background: var(--secondarycolor-600);}
.bg-tertiarycolor-100 {background: var(--tertiarycolor-100);}
.bg-tertiarycolor-400 {background: var(--tertiarycolor-400);}
.bg-tertiarycolor-600 {background: var(--tertiarycolor-600);}

/* Proper display for nested ordered lists */
ol {counter-reset: item; list-style: none; padding-left: 1.5em;}
ol > li {counter-increment: item; margin: 0.4em 0;}
ol > li::before {content: counters(item, ".") ": ";}
li > ol {counter-reset: item;}

.snav > [role="navigation"] [role="navigation"] > li > a::before {content: none;}

.diversity-hub .header.grid {grid-template-columns: var(--logo-width-dh) auto var(--logo-width-nec); align-items: center; column-gap: 20px;}
.diversity-hub .header-wrap .header .left, .header-wrap .header .right {top:unset; display: grid; width:100%;}
.diversity-hub .header-wrap .header .left .logo, .header-wrap .header .right .logo {width: var(--logo-width-dh); height: auto; display: block; margin: 0}
.diversity-hub .header-wrap .header .left .logo a {align-items: center; display: flex; gap: 10px;}
.diversity-hub .header-wrap .header .left .logo a:hover {text-decoration: none;}
.diversity-hub .header-wrap .header .left .logo .logo-name {font-size: 1.6rem; font-weight: 700; margin: 0; padding: 0; color: black;}
.diversity-hub .header-wrap .header .left .logo .logo-name {display: flex; flex-direction: column; gap: 0;}
.diversity-hub .header-wrap .header .left .logo .logo-name span {font-size: 1rem; color: var(--secondarycolor-600); margin: 0 0 -10px}
.diversity-hub .header-wrap .header .left .logo img {width: 60px;}
.diversity-hub .header-wrap .header .right {justify-items: end;}
.diversity-hub .header-wrap .header .right .logo.circuit img {max-height: 60px;}
.diversity-hub .footer-wrap .footer {font-size: var(--font-size-sm); line-height: var(--line-height-sm);}
.diversity-hub .footer-wrap .footer .address, .footer-wrap .footer .phone, .footer-wrap .footer .email {margin-bottom: 10px;}


.grid-links {margin-bottom: 30px;}
.grid-links div::after {content: unset;}
.grid-links.list-style {margin: 0 0 30px 0; padding: 0;}
.grid-links.list-style li {list-style-image: none; margin: 0 0 10px 0; padding:0;}
.grid-links.list-style a[rel="noopener noreferrer"]::after {content: '\f35d'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin-left: 0.3em; font-size: 0.8rem;}

.grid-links.grid-style img, .grid-links.grid-style .overlay {border-radius: var(--border-radius);}
.grid-links.grid-style .overlay {position: relative; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; background: rgba(0, 0, 0, 0.3);}
.grid-links.grid-style .overlay .name {margin-bottom: 5px; color: var(--white); font-weight: 700; transition: all var(--transition-speed) ease;}
.grid-links.grid-style .overlay .desc {color: var(--white); animation: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-sm); line-height: var(--line-height-sm); max-height: 2.8rem; transition: max-height var(--transition-speed) ease;}
.grid-links.grid-style a:hover {text-decoration: none;}
.grid-links.grid-style img {width: 100%; height: auto; object-fit: cover; max-height: 200px;}
.grid-links.grid-style a:hover .overlay {background: rgba(0, 0, 0, 0.5); transition: all var(--transition-speed) ease;}
.grid-links.grid-style a:hover .overlay .desc {-webkit-line-clamp: var(--lineclamp); line-clamp: var(--lineclamp); max-height: 100%; overflow: hidden; transition: max-height var(--transition-speed) ease;}
.grid-links.grid-style a[rel="noopener noreferrer"] .name::after {content: "\f35d"; font-family: "Font Awesome 5 Free"; display: inline-block; margin-left: 0.3em; font-size: 0.8rem; visibility: visible; position: absolute; top: 10px; right: 15px;}

.featuredcontentsection .featuredcontent .content {background: transparent;}
.featuredcontent .content {align-items: center; column-gap: 60px;}
.featuredcontent .content .text {padding-right: 30px;}
.featureimage {padding-block: 40px; position: relative; padding-right: 80px;}
.featureimage:before {width: 50%; height: 60%; background: url(../images/arrow.svg) no-repeat left center; background-size: auto 100%; content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 3; transform: translate(-60%, -50%); -webkit-transform: translate(-60%, -50%); -moz-transform: translate(-60%, -50%); -ms-transform: translate(-60%, -50%); -o-transform: translate(-60%, -50%);}
.featureimage::after {width: 46%; height: 100%; background: url(../images/icon1-gridbox.svg) no-repeat right center; background-size: auto 100%; content: ""; display: block; position: absolute; top: 0; right: 0; visibility: visible;}
.featureimage img {border-radius: 20px; position: relative; z-index: 2;}
.featuredcontentsection .featuredcontent:nth-child(even) .content .text {order: -1; padding-left: 30px; padding-right: 0;}
.featuredcontentsection .featuredcontent:nth-child(even) .featureimage {padding-left: 80px; padding-right: 0;}
.featuredcontentsection .featuredcontent:nth-child(even) .featureimage::after {transform: rotate(180deg); right: auto; left: 0; visibility: visible;}
.featuredcontentsection .featuredcontent:nth-child(even) .featureimage:before {transform: translate(60%, -50%) rotate(180deg); -webkit-transform: translate(60%, -50%) rotate(180deg); -moz-transform: translate(60%, -50%) rotate(180deg); -ms-transform: translate(60%, -50%) rotate(180deg); -o-transform: translate(60%, -50%) rotate(180deg); right: 0; left: auto;}
.featureimage.video {padding: 0;}
.featureimage.video:before, .featureimage.video::after {display: none;}
.featuredcontentsection .featuredcontent.bg-primarycolor-400 .content *, .featuredcontentsection .featuredcontent.bg-secondarycolor-400 .content * {color: var(--white);}


/* Quicklinks */
.footer-wrap .footer .col4 .quicklinks {-webkit-column-count: unset; -moz-column-count: unset; column-count: unset;}
.footer-wrap .footer .col4 .quicklinks ul {padding: 0; margin: 0; list-style: none;}
.quicklinks a[rel="noopener noreferrer"]::after {content: '\f35d'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin-left: 0.5em; font-size: 0.6rem;}

/* Social Links */
.sociallinks {margin-top: 20px; }
.sociallinks p {font-weight: 700;}
.sociallinks .sociallinks-inner {padding: 0; color: #3b3b3b; font-weight: 700; display: flex; gap: 5px; align-items: center;}
.sociallinks .sociallinks-inner a {color: #3b3b3b; text-decoration: none; display: inline-block; margin: 0 0 0 20px; border-radius: 100vw; width: 30px; height: 30px; margin: 0; display: grid; justify-content: center; align-items: center;  -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.sociallinks .sociallinks-inner a:hover {transition: all 0.2s ease;}
.sociallinks .sociallinks-inner a.fb:hover {background: #29487d; color: var(--white)}
.sociallinks .sociallinks-inner a.ig:hover {background: linear-gradient(115deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(98, 40, 215)); --contrast-color: #ffdcff; color: var(--white)}
.sociallinks .sociallinks-inner a.li:hover {background: #0077B5; color: var(--white)}
.sociallinks .sociallinks-inner a.tw:hover {background: #1da1f2; color: var(--white)}
.sociallinks .sociallinks-inner a.yt:hover {background: #ff0033; color: var(--white)}

/* Navigation Dropdowns */
.nav li {font-size:100%; }
.nav .dropdown-wrap {background: rgba(75, 37, 104, 0.9); position: absolute; top: 100%; left: 0; width: 100%; z-index: 20; padding: 0 20px; box-sizing: border-box; display: none;}
.nav li:hover .dropdown-wrap {display: block; border: 2px solid #fff; border-top-width: 0; border-radius: 10px;}
.nav .dropdown {max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 20px 0;}
.nav .dropdown .links {float: left; width: 560px; min-height: 5px;}
.nav .dropdown img {width: 100%;}
.nav .dropdown li a, .nav li:hover .dropdown li a, .nav li.selected .dropdown li a {color: #ffffff;}
.nav .dropdown li.selected a, .nav .dropdown li:hover a, .nav li:hover .dropdown li:hover a, .nav li.selected .dropdown li:hover a, .nav li:hover .dropdown li.selected a, .nav li.selected .dropdown li.selected a {color: #f3d876;}
.nav .dropdown ul {margin: 0; padding: 0; width: 100%; display: block; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
.nav .dropdown li {display: block; text-align: left; background: none; margin-bottom: 10px;}
.nav .dropdown li a {text-align: left; text-decoration: none; color: #ffffff; display: block; padding: 0; font-weight: 700; font-size: 90%;}
.nav-wrap li:has(.dropdown-wrap) > a::after {content: "\f078"; font-family: "Font Awesome 5 Free"; display: inline-block; position: relative; margin-left: 3px; transition: transform 0.3s ease;}
.nav .inner >ul> li:hover {border-radius: 10px; background: rgba(75, 37, 104, 0.9);}
.nav .inner >ul> li:has(.dropdown-wrap):hover {border-radius: 10px 10px 0 0;}
.nav li:hover a {color: #ffffff;}

.slidedown ul li, .slidedown ul li:hover, .slidedown ul .selected, .slidedown ul .selected a {background-color: transparent; color: var(--white);}
.slidedown ul li a, .slidedown ul li:hover a {color: var(--white);}
.slidedown ul li a:hover {color: #f3d876;}
.slidedown ul.subpages {margin-left: 20px;}

@media screen and (max-width: 1520px) {
  .featuredcontentsection .featuredcontent:nth-child(even) .featureimage:before {content: none;}
}
@media screen and (max-width: 960px) {
  .grid-halves {grid-template-columns: 1fr; }
  .grid-thirds {grid-template-columns: 1fr; row-gap:10px;}
  
  .featuredcontent .content {flex-direction: column; row-gap: 20px; }
  .featuredcontent .content .text {padding: 15px; }
  .featuredcontentsection .featuredcontent:nth-child(even) .content .text {order: 0; }
  .featuredcontentsection .featuredcontent .content .text {padding: 0 30px;}
}

@media screen and (max-width: 320px) {
  .grid-links.grid-style a:hover .overlay .desc {--lineclamp: 5;}
}