@charset "UTF-8";

/*fonts*/
/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Martel:wght@200;300;400;600;700;800;900&display=swap"); /*font-family: 'Martel', serif;*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"); /*quote*/

@font-face {font-family: "Museo W01_700"; src: url("../fonts/13012335-73ef-44f0-b295-7b83041355af.woff2") format("woff2"), url("../fonts/28d74e9b-4ea9-4e3c-b265-c67a72c66856.woff") format("woff");}

@font-face {font-family: "Museo W01_700 Italic"; src: url("../fonts/739e4f17-c4aa-4db3-9bbb-150afd3be4c5.woff2") format("woff2"), url("../fonts/e971d9dd-4d24-4c3e-b863-898a551d55c9.woff") format("woff");}

/*colours*/
/* stylelint-disable */
:root {
  --lightblue: #3db5e6;
  --midblue: #0076a9;
  /* --darkblue: #003595; */
  --darkblue: #22387d;
  --twitterblue: #1da1f2;
  --linkedinblue: #0077b5;
  --youtubered: #ff0000;
  --turquoise: #3cbfae;
  --orange: #ee7624;
  --red: #e1261c;
  --pink: #e41e93;
  --purple: #8f489a;
  --white: #ffffff;
  --light: #f0f0f0;
  --dark: #333333;
  --black: #000000;
  --pinkgradient: linear-gradient(26deg, rgba(228, 30, 146, 0.8) 16%, rgba(143,72,154,0.8) 100%);
  --bluegradient: linear-gradient(40deg, var(--lightblue) 16%, var(--turquoise) 100%);
  --bannergradient: linear-gradient(to right, rgba(228, 30, 146, 0.8), rgba(143,72,154,0.8), rgba(228, 30, 146, 0.8));

  --blank: yellow;
  /*for no colour*/
  --fontTitle: "Museo W01_700";
  --fontHeading: "Martel";
  --fontBody: "Calibri", sans-serif;
  --quote: "Space Grotesk", sans-serif;
  --container: 1440px;
}
/* stylelint-enable */

* {box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; line-height: 120%;}
html {width: 100%; height: 100%; scroll-behavior: smooth;}
body {font-family: var(--fontBody); font-weight: 400; font-size: 120%; width: 100%; height: 100%; margin: 0; padding: 0; color: var(--darkblue);}

h1, h2, h3, h4, h5, h6 {font-family: var(--fontHeading); margin: 0 0 10px 0;  line-height: calc(1em + 0.5rem); font-weight: 700;}
h1 {font-size: 220%; font-family: var(--fontTitle); font-weight: 400;}
h2 {font-size: 200%; color: var(--darkblue); font-family: var(--fontTitle); font-weight: 400;}
h3 {font-size: 160%; color: var(--pink);}
h4 {font-size: 140%;}

ul {margin: 0 0 20px 20px; padding: 0;}
li {margin: 0 0 5px 0; line-height: 150%; font-size: 1.1rem;}
ul:not([class]) {margin: 0 0 20px 0px; padding: 0; list-style-type: none;}
ul:not([class]) li {padding: 0 0 0 20px; background: url(../images/svgs/blobone.svg) no-repeat left top 5px; background-size: 14px; margin: 0 0 10px; line-height: 140%;}
hr {width: 100%; height: 1px; background: #cccccc; border: none; margin: 10px auto; clear: both;}
strong {font-weight: 700;}
a {text-decoration: none; cursor: pointer; color: var(--pink);}
a:hover, a:focus {color: var(--purple);}
div {display: block;}
p {margin: 0 0 10px 0; line-height: 150%; font-size: 1.1rem;}
p:last-child {margin: 0;}
.awesomeicon {font-family: "Font Awesome 5 Free"; font-weight: 900;}
div:after, form:after, ul:after, input:after, section:after, article:after, header:after, footer:after, nav:after, aside:after, hgroup:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
svg {width: 0; height: 0; position: absolute;}

img, picture, video {display: block; margin: 0; outline: none; padding: 0; max-width: 100%; width: auto;}
iframe {display: block; margin: 0; outline: none; padding: 0; max-width: 100%; }
img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: inline-block; margin: 0 0 20px 0!important;}
img.seecmsimageleft, img.seecmsimageleftundefined {float: left; margin: 0 20px 20px 0!important;}
img.seecmsimageright, img.seecmsimagerightundefined {float: right; margin: 0 0 20px 20px!important;}
img.seecmsimagecentre, img.seecmsimagecentreundefined {display: block; margin: 0 auto;}

p:last-child img.seecmsimagedefault, p:last-child img.seecmsimagedefaultundefined, p:last-child img.seecmsimageleft, p:last-child img.seecmsimageleftundefined, p:last-child img.seecmsimageleft, p:last-child img.seecmsimagerightundefined, p:last-child img.seecmsimagecentre, p:last-child img.seecmsimagecentreundefined {margin-bottom: 0!important;}

p.seeformerrors {color: var(--red);}
.required {font-weight: 500; margin-left: 8px; color: var(--red);}

.editable div[class ^= "editable2"] + p {background: #909090!important;} /*make in page ADFs another colour*/
.editable div[class = "editable2"] + p {background: #383838!important;}
.editable div[class ^= "editable3"] + p {background: #909090!important;} /*make in page ADFs another colour*/
.editable div[class = "editable3"] + p {background: #383838!important;}
.editable div[class ^= "editable4"] + p {background: #909090!important;} /*make in page ADFs another colour*/
.editable div[class = "editable4"] + p {background: #383838!important;}
.editable div[class ^= "editable5"] + p {background: #909090!important;} /*make in page ADFs another colour*/
.editable div[class = "editable5"] + p {background: #383838!important;}
.editable div[class ^= "editable6"] + p {background: #909090!important;} /*make in page ADFs another colour*/
.editable div[class = "editable6"] + p {background: #383838!important;}
.editable .editbar {position: relative; z-index: 200; margin: 0 auto; max-width: var(--container);}

table {width: 100%; margin: 0 0 20px 0; border: 0!important; border-collapse: separate!important; border-spacing: 2px!important;}
table th {padding: 10px; font-size: 100%; color: #ffffff; background: #000000; font-weight: normal; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table td {padding: 10px; font-size: 100%; color: #000000; background: #f1f1f1; font-weight: normal; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table th p, table td p {font-size: 100%; padding: 0;}
table th a {color: #ffffff!important;}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], textarea, select, button, input[type="time"] {width: 100%; padding: 0 10px; height: 40px; background: #ffffff; border: 1px solid #cccccc; margin: 5px 0 15px 0; outline: none; resize: none; font-family: var(--fontBody);}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: #000000;}
textarea {height: 130px; padding: 10px;}
input[type="checkbox"] {width: 15px; height: 15px; float: left; margin: 0 10px 0 0;}
input[type="text"], input[type="submit"], textarea, button, input[type="password"], input[type="button"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input[type="file"] {margin: 0 0 15px;}
input[type="submit"], button, input[type="button"] {cursor: pointer; width: auto; outline: none; border: none; text-transform: none; background: #000000; padding: 0 20px; height: 40px; color: #ffffff; border-radius: 0;}
label {color: #000000; font-size: 100%;}

.slick-slide {outline: none!important;}

/* Old form builder */
.cmsform p {padding: 0;}
.cmsform p.fieldname {padding: 0 0 5px 0;}
.cmsform p.fieldoption {padding: 0 0 20px 0;}
.cmsform p.fieldoption .notes {font-style: italic;}
.cmsform input, .cmsform select, .cmsform textarea {margin: 0 0 5px 0;}
.cmsform input[type="checkbox"] {margin: 0 10px 0 0;}
.cmsform input[type="submit"] {margin: 15px 0;}
.cmsform .errors p {color: var(--red)!important; padding: 0 0 20px 0;}

/* New form builder */
.fb p {padding: 0;}
.fb p.fb-field-name {padding: 0 0 5px 0;}
.fb p.fb-field-option {padding: 0 0 20px 0;}
.fb p.fb-field-option .fb-field-notes {font-style: italic;}
.fb input, .fb select, .fb textarea {margin: 0 0 5px 0;}
.fb input[type="checkbox"] {margin: 0 10px 0 0;}
.fb input[type="submit"] {margin: 15px 0;}
.fb .fb-submit-errors {color: var(--red)!important; padding: 0 0 20px 0;}
.fb .fb-field-error {color: var(--red)!important; float: right;}
.fb .fb-field-required {margin-left: 8px; font-weight: 600;}
.fb .fb-required-desc {float: right;}

.clear {clear: both;}

.form .row.thirds, .form .row.halves {width: 102%; margin-left: -2%;}
.form .row.thirds .input {float: left; width: 31.3%; margin: 0 0 0 2%;}
.form .row.halves .input {float: left; width: 48%; margin: 0 0 0 2%;}

/*generic div boxes*/
.left {float: left;}
.right {float: right;}
.textleft {text-align: left;}
.textright {text-align: right;}
.textcenter {text-align: center;}
.col2, .col3, .col4 {display: block; float: left; min-height: 5px; position: relative;}
.col2 {width: 49%; margin: 0 0 0 2%;}
.col2:first-of-type {margin: 0;}
.col3 {width: 32%; margin: 0 0 0 2%;}
.col3:first-of-type {margin: 0;}
.col4 {width: 22%; margin: 0 0 0 4%;}
.col4:first-of-type {margin: 0;}
.content {width: 100%; max-width: 1440px; margin: 0 auto; padding: 80px 20px; position: relative;}
.center {margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.verticalcenter {position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}

/* size can change depending on logo */
a.logo {width: 500px; aspect-ratio: 500/146; background: url(../images/svgs/logo_main.svg) no-repeat; display: block; background-size: 100%; max-width: 100%; position: relative; transition: width ease 0.4s;}
p.blockbutton a {display: inline-block; padding: 12px 15px; border-radius: 10px; background: var(--orange); color: var(--white); width: fit-content; font-size: 90%; transition: all 0.4s ease;}
p.blockbutton a:hover {background: var(--pink);}
.arrowbutton a {display: inline-block; color: var(--pink); font-family: var(--fontTitle); font-weight: 400;}
.arrowbutton a:after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; color: inherit; font-size: inherit; margin: 0 0 0 5px; position: relative; top: 1px; transition: all 0.4s ease;}
.arrowbutton a:hover {color: var(--darkblue);}
.arrowbutton a:hover:after {margin: 0 0 0 10px;}

p.blockarrow a {background: linear-gradient(to bottom, var(--color, var(--orange)) 50%, var(--pink) 50%); background-size: 200% 200%; background-position: bottom; color: var(--white); font-family: var(--fontTitle); padding: 12px 18px 12px 15px; text-decoration: none; position: relative; z-index: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 5px;}
p.blockarrow a:before {position: absolute; content: ""; width: 100%; height: 100%; top: 3px; left: 3px; background: var(--light); border-radius: 5px; z-index: -1;}
p.blockarrow a:after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; font-size: inherit; color: inherit; margin: 0 0 0 5px; transition: transform 0.4s ease, color 0.2s ease; margin-left: 8px;}
p.blockarrow a:hover {background-position: top;}
p.blockarrow a:hover:after {transform: translateX(3px);}

.largetext {font-size: 1.5rem;}
.largertext {font-size: 2.5rem; color: var(--darkblue); font-family: var(--fontTitle); font-weight: 400;}

.blockheading {padding: 10px; background: var(--orange); font-family: var(--fontTitle); font-weight: 400; font-size: 200%; max-width: max-content; color: var(--white);}

.quote {font-family: var(--fontTitle); font-size: 140%; color: var(--pink); position: relative; margin: 30px 0; padding: 0 0 0 70px; line-height: 160%;}
.quote .first-word {font-size: 150%; font-weight: 700;}
.quote:before {content: "“"; display: block; font-family: var(--quote); font-size: 500%; color: var(--pink); z-index: -1; opacity: 0.2; position: absolute; left: -4px; top: -10px;}
.quote:after {content: "”"; display: block; font-family: var(--quote); font-size: 500%; color: var(--pink); position: absolute; bottom: -20px; right: 0; z-index: -1; opacity: 0.2;}
a#topofpage {position: absolute; top: 0; left: 0;}

.redtext {color: var(--red)!important; display: inline-block;}
.orangetext {color: var(--orange)!important; display: inline-block;}
.pinktext {color: var(--pink)!important; display: inline-block;}
.purpletext {color: var(--purple)!important; display: inline-block;}
.navytext {color: var(--navy)!important; display: inline-block;}
.bluetext {color: var(--midblue)!important; display: inline-block;}

/*header*/
.header {width: 100%; background: var(--white); color: var(--dark); position: fixed; z-index: 10; top: 0; left: 0;}
.header a.logo:after {content: ""; width: 42%; aspect-ratio: 1/1; border-radius: 50%; background: var(--white); position: absolute; left: -7%; top: 47%; transform: translateY(-50%); z-index: -1;}

.mainheader.content {background: var(--white); padding: 40px 20px 0 20px; transition: padding ease 0.4s; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;}
.mainheader .left { bottom: -10px; max-width: 420px;}
.mainheader .right {margin: 0; display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 10px; justify-content: end; }
.mainheader .left, .mainheader .right { position: relative; float: none;}
.mainheader .left::after, .mainheader .right::after, .mainheader.content::after {display: none}
.mainheader p.blockbutton {display: inline-block; margin: 0; padding: 0; }
.mainheader p.blockbutton a {padding: 10px 10px 6px;  border-radius: 5px; background: var(--lightblue); font-family: var(--fontHeading); font-size: 1rem; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.mainheader p.blockbutton.loginbutton a {background: var(--pink);}
.mainheader p.blockbutton.logout a {background: var(--orange);}
.mainheader .nav {width: 100%;}

.headerstrap {width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.headerstrap .content {padding: 5px 20px; text-align: right; display: flex; gap: 10px; align-items: center; justify-content: flex-end;}
.headerstrap .content a {display: block;}

.headerstrap .socials {color: var(--black); font-size: 120%; }
.headerstrap .socials.linkedin {color: var(--linkedinblue);}
.headerstrap .socials.twitter {color: var(--twitterblue);}
.headerstrap .socials.twitter img {max-width: 20px; margin-bottom: 4px;}
.headerstrap .socials.youtube {color: var(--youtubered);}

.header-links {list-style-type: none; margin: 0; display: flex; gap: 10px; margin-left: auto; align-items: center;}
.header-links::after, .header-links *::after {display: none;}
.header-links li {margin: 0; font-size: 1rem; }
.header-links a {display: block; color: var(--darkblue); font-family: var(--fontTitle); font-weight: 400; line-height: 1.1;}

/*buffer for fixed header*/
.header.scrolled {box-shadow: 0 2px 2px var(--light); }
.header.scrolled a.logo:after {box-shadow: 0 3px 2px var(--light); width: 37%; left: -4%; top: 48%;}
.scrolled .headerstrap {display: none;}
.scrolled .content.mainheader {padding: 0 20px;}
.scrolled .mainheader a.logo {width: 248px;}
.scrolled .mainheader .nav {margin: 15px 0 0 0;}
.scrolled .mainheader .upbutton {opacity: 1;}
.scrolled .mainheader p.blockbutton {display: none;}
.scrolled .search {display: none;}

/*nav*/
.nav {width: 100%; font-family: var(--fontTitle); font-weight: 400; transition: margin ease 0.4s;}
.nav ul {list-style-type: none; font-size: 85%; margin: 0; position: relative; max-width: max-content;}
.nav > ul {display: flex; justify-content: end; gap: 25px;}
.nav ul::after {display: none;}
.nav li {display: inline-block; margin: 0; padding: 15px 0;}
.nav a {color: var(--dark); padding: 0; line-height: 100%; display: block;}
.nav a:hover, .nav a:focus {color: var(--darkblue);}
.nav li.hassubpages:hover:after {width: 100%}
.nav li:hover:after, .nav li:focus:after {width: 100%;}
.nav li.selected a {color: var(--darkblue); position: relative;}
.nav li.selected a:after {content: ""; display: block; position: absolute; width: 100%; height: 4px; background: var(--darkblue); left: 0; bottom: -17px; border-radius: 100vw; transition: all ease-in-out 0.3s;}
.nav li:hover ~ li.selected a:after {width: 0;}
ul.navigation {margin: 0 0 0 auto;}

.nav li .dropdown {position: absolute; width: 100%; left: 0; display: none; z-index: -1; border-radius: 0 0 10px 10px; overflow: hidden; font-size: 100%; padding: 20px; box-sizing: border-box; background: var(--light); top: 100%; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: center;}
.nav li .dropdown:after {display: none;}
.nav li:hover .dropdown {display: grid; align-items: start;}

.nav li ul li:after {display: none;}
.nav li ul li {display: block; width: 100%; margin: 0; padding: 0; background: none;}
.nav li ul li a {padding: 12px 10px; background: var(--light);}
.nav li ul li a:hover {color: var(--lightblue);}

.nav li .dropdown .image img {max-width: 100%;}
.nav li.selected li a::after {display: none;}

.upbutton {position: absolute; right: -40px; bottom: 10px; opacity: 0; transition: opacity ease 0.4s;}
.upbutton a {color: var(--darkblue);}

.search {max-width: 300px; margin: 0;}
.search .input {display: flex;}
.search .input input[type="text"] {margin: 0; border-right: none; border-radius: 5px 0 0 5px;}
.search .input input[type="submit"] {padding: 10px; background: none; color: var(--dark); font-family: "Font Awesome 5 Free"; font-weight: 900; border: 1px solid #cccccc; border-left: none; border-radius: 0 5px 5px 0;}

.searchresult {margin: 0 0 20px;}
.searchresult a {display: flex; gap: 10px; align-items: center; font-size: 140%; margin: 0 0 5px;}
.searchresult p {padding: 0 0 0 36px;}

/*mobile nav*/
.mobile-header-wrap {display: none; width: 100%; padding: 20px 10px;}
.mobile-header {position: relative; z-index: 4;}
.mobile-header .left, .mobile-header .right {float: none;}
.mobile-header .left {width: 100%; position: relative; bottom: -10px;}
.mobile-header a.logo {max-width: 50%; margin: 0 auto; min-width: 275px;}
.mobile-header .right {position: absolute; z-index: 4; right: 10px; top: 10px; width: fit-content; display: block;}

.mobile-header .nav-icon {width: 25px; height: 25px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; display: inline-block;}
.mobile-header .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: var(--pink); border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
.mobile-header .nav-icon span:nth-child(1) {top: 0;}
.mobile-header .nav-icon span:nth-child(2) {top: 6px;}
.mobile-header .nav-icon span:nth-child(3) {top: 12px;}
.mobile-header .nav-icon span:nth-child(4) {top: 18px;}
.mobile-header .nav-icon.open span:nth-child(1) {top: 21px; width: 0%; left: 50%;}
.mobile-header .nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.mobile-header .nav-icon.open span:nth-child(3) {-webkit-transform: translateY(-7px) rotate(-45deg); -moz-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg);}
.mobile-header .nav-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%;}

.mobile-nav {display: none; background: linear-gradient(26deg, rgba(228, 30, 146, 1) 16%, rgba(143, 72, 154, 1) 100%); border-radius: 0 0 10px 10px; position: absolute; left: 0; width: 100%; border-bottom: 2px solid var(--white);}
.mobile-nav ul {margin: 0; padding: 10px 20px; text-align: right; display: flex; flex-direction: column; align-items: center;}
.mobile-nav ul li {padding: 0; list-style: none; margin: 0; background: none; font-size: 1.5rem; width: 100%; text-align: center; position: relative;}
.mobile-nav ul li a {color: var(--white); text-decoration: none; display: block; padding: 10px 20px;}
.mobile-nav ul li span {position: absolute; top: 0; right: 0; height: 30px; width: 30px; text-align: center; color: var(--white); font-size: 140%; background: transparent; border: 2px solid var(--white); line-height: 24px; margin-top: 8px; border-radius: 10px;}
.mobile-nav ul li.selected a {color: var(--white); font-weight: 600;}

/* NL 02/04/24 - Responsive nav, adding subpages - ticket #123456 */
.mobile-nav li ul {display: none;}
.mobile-nav ul ul {padding: 0; margin-bottom: 10px;}
.mobile-nav ul ul li a, .mobile-nav ul li.selected ul li a {font-weight: 400; font-size: 1.1rem; list-style-type: disc;}
.mobile-nav ul li.selected ul li.selected a {font-weight: 600; font-size: 1.3rem;}

.mobile-nav .buttons {padding: 20px 0; margin: 0 20px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--white);}
.mobile-nav .buttons::after {display: none;}
.mobile-nav .buttons .blockbutton {margin: 0;}
.mobile-nav .buttons .blockbutton a {font-family: var(--fontHeading); font-size: 1.1rem; background: transparent; border: 2px solid var(--white); padding: 15px 20px 9px;}
.mobile-nav .buttons .blockbutton a:hover {background: var(--white); color: var(--pink);}

.snav ul {margin: 0; padding: 0; list-style-type: none;}
.snav ul li {display: block; padding: 0; background: none;}
.snav ul li a {display: block; padding: 10px 15px; border-radius: 10px; color: var(--white); background: var(--darkblue);}
.snav ul li:nth-of-type(n) li:before {background: var(--darkblue);}
.snav ul li:nth-of-type(2n+2) a, .snav ul li:nth-of-type(2n+2) li:before {background: var(--midblue);}
.snav ul li:nth-of-type(3n+3) a, .snav ul li:nth-of-type(3n+3) li:before {background: var(--turquoise);}
.snav ul li:nth-of-type(4n+4) a, .snav ul li:nth-of-type(4n+4) li:before {background: var(--orange);}
.snav ul li:nth-of-type(5n+5) a, .snav ul li:nth-of-type(5n+5) li:before {background: var(--red);}
.snav ul li:nth-of-type(6n+6) a, .snav ul li:nth-of-type(6n+6) li:before {background: var(--pink);}
.snav ul li:nth-of-type(7n+7) a, .snav ul li:nth-of-type(7n+7) li:before {background: var(--purple);}

.snav ul [role="navigation"] {background: inherit;}
.snav ul li ul {width: 100%; float: right; background: inherit;}
.snav ul li li {position: relative; margin: 0; padding: 0; border-radius: 0;}
.snav ul li li a {background: #ffffff!important; border-radius: 0; color: var(--dark); padding: 7px 55px;}
.snav ul li.selected {border-radius: 10px 10px 0 0; font-weight: 600;}
.snav ul li.selected li {font-weight: normal; border-radius: 0;}
.snav ul li.selected li.selected {font-weight: 600;}

.snav ul li li:nth-of-type(n):before {content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); -webkit-mask-image: url(../images/svgs/blobpersonone.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: url(../images/svgs/blobpersonone.svg); mask-repeat: no-repeat; mask-size: 100% 100%;}
.snav ul li li:nth-of-type(2n+2):before {-webkit-mask-image: url(../images/svgs/blobpersontwo.svg); mask-image: url(../images/svgs/blobpersontwo.svg);}
.snav ul li#youtube a {background: var(--red);}

.gridnav {margin: 20px 0 0 0;}
.gridnav ul {margin: 0 auto; list-style-type: none; width: 100%; text-align: center;}
.gridnav li {display: inline-block; width: 27%; padding: 1%; vertical-align: top; margin: 0 3%;}
.gridnav li a { width: 100%;   position: relative; transition: all 0.4s ease ; display: flex; flex-direction: column;  background: var(--accent-color, var(--orange)); overflow: hidden;  border-radius: 10px; border: 2px solid var(--accent-color, var(--orange)); min-height: 300px;}
.gridnav li a * {z-index: 3; margin: 0;}
.gridnav li a .text { text-align: center; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; flex-grow: 1;}
.gridnav li a .text::after {display: none;}
.gridnav li a .heading {font-family: var(--fontTitle); font-weight: 400; font-size: 120%; } 
.gridnav li a i {margin: 20px 0 0; position: relative; transition: all 0.2s ease;}
.gridnav li a i::before {z-index: 2; position: relative; left: 1px; }
.gridnav li a i::after {content: ''; display: block; width: 30px; height: 30px; background: var(--accent-color, var(--orange)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; transition: all 0.4s ease; }
.gridnav li a::after {content:''; display: block; width: 0; height: 0; background: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; transition: all 0.4s ease;}
.gridnav li a:hover * {color: var(--accent-color, var(--orange));}
.gridnav li a:hover::after {width: 140%; height: 140%;}
.gridnav li a:hover i {color: var(--white);}

.gridnav li:nth-of-type(2n+2) a {--accent-color: var(--red);}
.gridnav li:nth-of-type(3n+3) a {--accent-color: var(--pink);}
.gridnav li:nth-of-type(4n+4) a {--accent-color: var(--purple);}
.gridnav li:nth-of-type(5n+5) a {--accent-color: var(--midblue);}
.gridnav li:nth-of-type(6n+6) a {--accent-color: var(--turquoise);}
.gridnav li:nth-of-type(7n+7) a {--accent-color: var(--lightblue);}

.p44 .gridnav li {width: 26%;}
.p44 .gridnav li:nth-of-type(odd) {margin: 0 2% 0 22%;}
.p44 .gridnav li:nth-of-type(even) {margin: 0 22% 0 2%;}

.gridnav.vertical-stacked ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.gridnav.vertical-stacked li {width: 100%; margin: 0; padding: 0;}
.gridnav.vertical-stacked li a .text {padding: 20px 0 20px 20px}
.gridnav.vertical-stacked li a {display: grid; grid-template-columns: repeat(2, 1fr);}
.gridnav.vertical-stacked li img, .gridnav.vertical-stacked li picture {width: 100%; height: 100%; object-fit: cover;}

.sitemap li:before {content: ""; display: block; width: 20px; height: 20px; background: var(--darkblue); position: absolute; top: 0; left: 0; -webkit-mask-image: url(../images/svgs/blobpersonone.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: url(../images/svgs/blobpersonone.svg); mask-repeat: no-repeat; mask-size: 100% 100%;}

/*CW new page title changes */
.title {background: var(--lightblue); background-image: var(--bluegradient); text-align: left; color: var(--white); position: relative;}
.title .content {padding: 80px 20px 40px; display: flex; align-items: center;}
.title .content::after, .title .content *::after {display: none;}
.title h1 {margin: 0;}

/*title with image*/
.title-banner {background: transparent; background-image: url(../images/svgs/pagetitle-style1.svg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column;}
.title-banner .image {width: 85%; height: 100%; z-index: -1; overflow: hidden; position: absolute; top: 0; right: 0;}
.title-banner .image img {height: 100%; margin-left: auto; filter: brightness(0.8); object-fit: cover; max-height: 100%;}
.title-banner .content {display: flex; justify-content: center; align-items: center; flex-grow: 1;}
.title-banner .content:after, .title-banner .content *:after {display: none;}
.title-banner  h1 {margin: 0; color: var(--white); font-size: 3.75rem; text-align: center;}

.title-banner.style2 {background-image: url(../images/svgs/pagetitle-style2.svg);}
.title-banner.style2 .image {position: absolute; left: -25px; top: 0; width: 51%; height: 100%;}
.title-banner.style2 .image img {margin: 0; width: 100%; height: 100%; object-fit: cover;}
.title-banner.style2 .content {position: relative; padding: 0; flex-direction: column;}
.title-banner.style2 .content h1 {margin: 0; padding: 40px 20px; text-align: left; width: 50%; margin-left: auto;}

.title-banner.style3 {display: grid; grid-template-columns: 3fr 200px 2fr; grid-template-rows: 1fr 60px; background: none; position: relative;}
.title-banner.style3 > * {min-width: 0;}
.title-banner.style3:after {display: none;}
.title-banner.style3 .image {width: auto; height: auto; position: relative; top: unset; right: unset; grid-column: 2 / 4; grid-row: 1 / -1; z-index: 2;}
.title-banner.style3 .image img {width: 100%; margin-left: 0;}
.title-banner.style3 .text {background: rgba(228, 30, 146, 0.75); padding: 60px 260px 60px 60px; grid-column: 1 / 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; color: var(--white); position: relative;}
.title-banner.style3 .text * {color: var(--white);}
.title-banner.style3 .text h1 {margin: 0 0 20px; text-align: left; font-size: 3.5rem;}
.title-banner.style3 .text .largertext {font-size: 2rem;}
.title-banner.style3 .text:after {content: ''; display: block; width: 300px; height: 300px; border-radius: 50%; position: absolute;background: var(--orange); opacity: 0.75; visibility: visible; top: 50%; transform: translateY(-50%); z-index: 5; left: -50px;}
.title-banner.style3.orange .text {background: rgba(238, 118, 36, 0.95);}
.title-banner.style3.orange .text:after {background: var(--pink); width: 200px; height: 200px; top: 75%; left: 20px;}

.title-banner.style3 {grid-template-columns: minmax(20px, 1fr) minmax(0, 440px ) minmax(0, 440px ) 60px 60px minmax(0, 440px ) minmax(20px, 1fr);}
.title-banner.style3 .text {grid-column: 2/6; position: static; z-index: 3; padding: 80px 200px 80px 20px;}
.title-banner.style3 .text:before {content: ''; display: block; inset: 0; position: absolute; grid-column: 1/2; grid-row: 1/2; background: inherit; z-index: -1;}
.title-banner.style3 .text:after {grid-column: 4/6; grid-row: 1/-1;}
.title-banner.style3 .image {grid-column: 4/-1; overflow: visible;}

h1.innerpagetitle {border-bottom: 2px solid var(--lightblue); margin: 0 0 20px 0;}
.membername a {color: var(--darkblue);}

/* breadcrumb */
.breadcrumb-wrap {background: var(--white); font-family: var(--fontHeading);}
.breadcrumb-wrap p {font-size: 0.9rem; color: var(--dark)}
.breadcrumb-wrap a {color: var(--darkblue)}
.breadcrumb-wrap a:hover {color: var(--pink);}
.default .breadcrumb-wrap .content {padding: 20px 20px 40px!important; }
.fullwidth .breadcrumb-wrap .content {padding: 20px 20px 0 20px;}
.membertemplate .breadcrumb-wrap .content p {display: inline-block; }

.title-banner.style3 ~ .fullwidth .breadcrumb-wrap {margin-top: -40px; background: none;}

/*main banner*/
.banners {position: relative; grid-column: 1 / -1; grid-row: 1;}
.banner {display: flex; flex-direction: column; height: 100%;}

.banner-split {position: relative; display: grid; grid-template-columns: 2fr 1fr;}
.banner-split > * {min-width: 0;}
.banner-split::after, .banner-split *::after {display: none;}
.banner-split > div {min-width: 0;}
.banner-split .banners div {height: 100%;}
.banner-split .banner {position: relative; display: grid; grid-template-columns: 2fr 1fr;}
.banner-split .banners .image a {cursor: default; display: block; height: 100%;}
.banner-split .banner img {position: relative; width: 100%; height: 100%; object-fit: cover;}
.banner-split .banner .container {background: var(--accent-color); color: var(--white); clip-path: none; height: 100%; margin-top: 0; padding: 60px 40px 100px; display: flex; flex-direction: column;  justify-content: center;}
.banner-split .banner:hover .container {opacity: 1; transform: translateY(0);}
.banner-split .banner .container .text > *:last-child {margin: 0; padding: 0;}
.banner-split .container .heading {font-size: 180%; font-family: var(--fontTitle); margin: 0; font-weight: 400; text-align: left;}
.banner-split .container p {font-size: 120%;}
.banner-split .container .above {margin: 0; line-height: 110%; font-size: 100%; opacity: 0.75;}
.banner-split .blockbutton {margin: 30px 0 0 0;}
.banner-split .blockbutton a {border: 1px solid var(--white); background: none; color: var(--white);}
.banner-split .blockbutton a:hover {background: var(--white); color: var(--accent-color);}

.banner-split .banner[data-id="1"] {--accent-color: var(--purple);}
.banner-split .banner[data-id="2"] {--accent-color: var(--pink);}
.banner-split .banner[data-id="3"] {--accent-color: var(--orange);}
.banner-split .banner[data-id="4"] {--accent-color: var(--midblue);}
.banner-split .banner[data-id="5"] {--accent-color: var(--lightblue);}

.banner-split .banner-select {grid-column: 2; grid-row: 1; background: var(--white); padding: 10px; border-radius: 10px; align-self: end; justify-self: center; margin: 0 0 20px;}

@keyframes bobRight {
  0% {transform: translateX(0);}
  100% {transform: translateX(10px);}
}

.banner-split .slick-list, .banner-split .slick-track {height: auto!important;}

.inner-banner img {width: 100%;}

.banners .slick-track {display: flex !important;}
.banners .slick-slide {height: inherit !important;}
.banners .slick-slide > div {height: 100%;}

.banner-select .slick-track {display: flex; align-items: center; gap: 10px; justify-content: center; height: auto!important;}
.banner-select .slick-track::before, .banner-select .slick-track::after {display: none;}
.banner-select .slick-slide {width: auto!important;}
.banner-select .slick-list {height: auto!important;}
.banner-select::after, .banner-select *::after {display: none;}
.banner-select .selector {display: grid!important; grid-template-columns: 60px ; gap: 20px;}
.banner-select .selector::after, .banner-select .selector *::after {display: none;}
.banner-select .selector > * {min-width: 0;}
.banner-select .selector * {transition: all 0.4s ease;}
.banner-select .selector img {border-radius: 5px; filter: grayscale(0.75);}
.banner-select .selector.selected img {border: 2px solid var(--pink); filter: grayscale(0);}
.banner-select .selector.selected .heading {color: var(--pink);}
.banner-select p {color: var(--dark);}


#intro .content p {font-size: 160%;}

/*features*/
#features {position: relative;}
#features .content {padding: 80px 20px 20px}
#features .line {margin-bottom: 100px;}
#features .content .container {display: flex; flex-direction: column; gap: 40px;}
#features .content .container::after {display: none;}
#features h4 {font-size: 150%;}
#features a {position: relative;}
#features a:nth-of-type(1) {color: var(--pink);}
#features a:nth-of-type(2) {color: var(--purple);}
#features a:nth-of-type(3) {color: var(--lightblue);}
#features a::after {content: ''; display: block; width: 100%; height: 4px; position: absolute; left: 0; bottom: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.4s;}
#features a:hover::after {transform: scaleX(1); }
#features a:nth-of-type(1)::after {background: var(--pink);}
#features a:nth-of-type(2)::after {background: var(--purple);}
#features a:nth-of-type(3)::after {background: var(--lightblue);}
#features .gridnav {margin: 40px 0 20px 0;}
#features .gridnav a {color: var(--white);}
#features .gridnav a::after {display: none;}
.bottomwave.homepage {transform: translateY(3px) rotate(180deg); width: 100%;}

/*CW new homepage additions*/
/* #video-feature {position: relative; background: var(--white); background: url("../images/svgs/Rural\ graphic\ pattern_a.svg") no-repeat top; background-size: cover; color: var(--white);} */
#video-feature {background: none;}
#video-feature .content {text-align: center;}
#video-feature iframe {margin: 0 auto;}

#becomeamember {display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;}
#becomeamember:not(.half-image) > * {min-width: 0; grid-column: 1; grid-row: 1;}
#becomeamember img, #becomeamember picture {width: 100%; height: 100%; object-fit: cover;}
#becomeamember .text {padding: 40px 100px; background: rgba(34, 56, 125, 0.8); max-width: 50%; justify-self: end; display: flex; flex-direction: column; justify-content: center; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: var(--white); clip-path: url(#clip);}
#becomeamember:not(.half-image) .text p, #becomeamember:not(.half-image) .text li {font-size: 1.2rem;}
#becomeamember ul:not([class]) li {background-image: url(../images/svgs/blobonewhite.svg)}
#becomeamember .text .blockbutton {margin: 20px 0 0;}
#becomeamember.half-image {grid-template-columns: 1fr 1fr;}
#becomeamember.half-image .image {grid-column: 1; grid-row: 1; position: relative; }
#becomeamember.half-image .image:after {position: absolute; content: ""; bottom: 0; left: 0; display: block; background: url(../images/svgs/member-overlay.svg)  no-repeat bottom; background-size: 100%; width: 100%; height: 100%; visibility: visible;}
#becomeamember.half-image .image img {width: 100%; height: 100%; object-fit: cover; object-position: right; }

#becomeamember.half-image .text {grid-column: 2; grid-row: 1; max-width: 100%; clip-path: none; background: var(--orange); position: relative; z-index: 2;}
#becomeamember.half-image .text p.blockbutton a {background: var(--midblue);}
#becomeamember.half-image .text p.blockbutton a:hover {background: var(--purple);}

/* .homepage #becomeamember { margin: 80px 0;} */
.homepage #becomeamember.half-image {background: var(--midblue); grid-template-columns: 1fr 60px 1fr;}
.homepage #becomeamember.half-image .text {background: var(--lightblue);  clip-path: url(#clip); grid-column: 2/4;}
.homepage #becomeamember.half-image .image {grid-column: 1/3;}

.particle-container {background: #f1fafe; position: relative;}
.particle-container .content {position: static; padding: 60px 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; align-items: center; column-gap: 20px;}
#particles {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.particle-container #circle {padding: 40px; aspect-ratio: 1; background: var(--pink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: max-content; margin: 0 auto; z-index: 3; position: relative; grid-column: 2; grid-row: 2; border-radius: 50%; gap: 20px;}

.particle-container #circle:after {display: block; width: 100%; height: 100%; background-image: linear-gradient(to right, var(--purple), var(--pink) ); position: absolute; top: 0; left: 0; visibility: visible; border-radius: 50%; z-index: -1; animation: rotate 10s ease infinite;}
.particle-container #circle > * {margin: 0; color: var(--white);}
.particle-container #circle a {color: var(--white); display: block;}
.particle-container #circle a i {display: inline-block; transition: all 0.4s ease; margin: 0 0 0 5px;}
.particle-container #circle a:hover i {transform: translateX(10px);}

@keyframes rotate {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.particle-container .box {z-index: 3; position: relative; margin: 20px 0; display: block;}
.particle-container .box h3 {padding: 9px 10px 2px; background: var(--bg-color, var(--black)); color: var(--white); max-width: max-content; margin: 0;}
.particle-container .box p {padding: 6px 10px 3px; background: var(--bg-color, var(--black)); color: var(--white); transition: all 0.4s ease; opacity: 0; transform: translateY(-10px); font-size: 1.5rem;}
.particle-container .box i {display: inline-block; font-size: 1.5rem; vertical-align: middle; margin: 0 0 3px 0px; opacity: 0.5; transition: all 0.4s ease;}
.particle-container .box i.show-hover {margin: 0 0 4px 5px; font-size: 1.25rem;}
.particle-container .box:hover i {margin-left: 5px; opacity: 1;}
.particle-container .box:hover i.show-hover {opacity: 1; transform: rotate(180deg)}
.particle-container .box:hover p {opacity: 1; transform: translateY(0);}
.particle-container a.box:nth-of-type(1), .particle-container div.box:nth-of-type(2) {--bg-color: var(--red); grid-column: 3; grid-row: 1;}
.particle-container a.box:nth-of-type(2), .particle-container div.box:nth-of-type(3) {--bg-color: var(--orange); grid-column: 1; grid-row: 2;}
.particle-container a.box:nth-of-type(3), .particle-container div.box:nth-of-type(4) {--bg-color: var(--lightblue); grid-column: 2; grid-row: 3; margin: 40px 0 0; justify-self: end;}

/* CW changes as proof of concept */
/* .particle-container .content {grid-template-columns: repeat(7, 1fr); padding-block: 0 20px; gap: 20px;}
.particle-container #circle {grid-column: 4;}
.particle-container a.box:nth-of-type(1), .particle-container div.box:nth-of-type(2) {grid-column: 5/8;}
.particle-container a.box:nth-of-type(2), .particle-container div.box:nth-of-type(2) {grid-column: 1/4; grid-row: 2;}
.particle-container a.box:nth-of-type(3), .particle-container div.box:nth-of-type(2) {grid-column: 3/6; grid-row: 3;} */

.news-feature-image {position: relative; }
.news-feature-image img {width: 100%; clip-path: polygon( 0% 0%, 95% 2%, 100% 98%, 0% 100% ); z-index: 1;}
.news-feature-image:before {content:''; display: block; width: 90px; height: 205px; background: url(../images/svgs/tree.svg) no-repeat center; background-size: 100%; position: absolute; bottom: -40px; left: 40px; z-index: 2;}

#feeds {position: relative; display: grid; grid-template-columns: 2fr 3fr; gap: 20px; margin: 100px 0; align-items: center;}
#feeds h2 {padding: 0 0 0 20px; margin: 0;}
#feeds .content {padding: 80px 20px 120px;}
#feeds .thirds {display: flex; gap: 20px; padding: 0 20px 0 0;}
#feeds .thirds > div {background: var(--white); padding: 40px; border-radius: 20px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 5px 5px rgba(0,0,0,0.1); flex: 1 0 0;}
#feeds .thirds::after, #feeds .thirds *::after {display: none;}

#feeds .thirds > div .text {flex-grow: 1; display: flex; flex-direction: column;}
#feeds .thirds > div .text h4 {font-size: 120%; }
#feeds .thirds > div .text p {color: var(--dark); margin: 0 0 40px;}
#feeds .thirds > div .text .readmore {margin: auto 0 0;}
#feeds .thirds > div .tags {display: flex; gap: 10px; margin: 0 0 10px;}
#feeds .thirds > div .tags > p {background: var(--black); color: var(--white); padding: 2px 8px 1px; margin: 0; font-style: normal;}

#feeds .thirds > div[data-type="news"] .text h4 {color: var(--pink);}
#feeds .thirds > div[data-type="news"] .text .date {background: var(--pink);}
#feeds .thirds > div[data-type="news"] .text .type {background: var(--pink);}

#feeds .thirds > div[data-type="event"] h4 {color: var(--purple); margin: 0;}
#feeds .thirds > div[data-type="event"] .date {background: var(--purple);}
#feeds .thirds > div[data-type="event"] .text .type {background: var(--purple);}
#feeds .thirds > div[data-type="event"] .readmore a {color: var(--purple);}

#feeds .thirds > div[data-type="story"] h4 {color: var(--lightblue);}
#feeds .thirds > div[data-type="story"] .readmore {color: var(--lightblue);}
#feeds .thirds > div[data-type="story"] .text .type {background: var(--lightblue);}
#feeds .thirds > div[data-type="story"] .type {background: var(--lightblue);}

#feeds a i {display: inline-block; transition: all 0.4s ease; margin: 0 0 0 5px;}
#feeds a:hover i {margin: 0 0 0 15px;}
#feeds a:hover {color: var(--darkblue)}

/* FOR OVERFLOW SCROLL */
#feeds .thirds {display: grid; grid-auto-flow: column; grid-auto-columns: 35%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 20px; max-width: unset; padding: 10px 20px 40px 20px;}
#feeds .thirds > div {scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column;}

#feeds .thirds {scrollbar-color: var(--midblue) var(--light); scrollbar-width: thin;} /* firefox */

#feeds .thirds::-webkit-scrollbar {background: var(--white); height: 8px;}
#feeds .thirds::-webkit-scrollbar-track {border-radius: 10px; background: var(--light);}
#feeds .thirds::-webkit-scrollbar-thumb {border-radius: 10px; background: var(--midblue);}
#feeds .thirds::-webkit-scrollbar-thumb:hover, #feeds .thirds::-webkit-scrollbar-thumb:focus {background: var(--midblue);}

/* #1DA1F2 */
#twitter {position: relative;}
#twitter .content {text-align: left; max-width: 100%; background: #1da1f2;}
#twitter .left, #twitter .right {display: inline-block; float: none; vertical-align: top;}
#twitter .left {width: 72%; margin: 0 2% 0 0;}
#twitter .right {width: 25%;}
#twitter h2 {color: var(--white);}
#twitter .slick-slide {max-width: 50%; margin: 0 20px 0 0;}
.tweet {background: #ffffff; border-radius: 10px; padding: 20px 15px;}
.twitter a {color: var(--pink);}
.twitter a:hover, .twitter a:focus {color: var(--darkblue);}
.twitter p.name {padding: 0;}
.twitter p.date {font-style: italic; font-size: 90%;}
.twitter .image {float: left; width: 40%; margin: 0 20px 0 0; max-height: 300px;}
.twitter ul.slick-dots {text-align: center; margin: 0; padding: 20px 0 0 0;}
.twitter .slick-dots li {display: inline-block; margin: 0 5px; width: 20px; height: 20px; position: relative; vertical-align: middle;}
.twitter .slick-dots li button {display: block; background: linear-gradient(to left, var(--white) 50%, var(--darkblue) 50%) right; background-size: 200%; transition: ease-out 0.5s; font-size: 0; border-radius: 50%; padding: 0; width: 100%; height: 100%; margin: 0;}
.twitter .slick-dots li.slick-active button {background-position: left;}

#twitter:before {content: ''; aspect-ratio: 9/1; width: 100%; background: url(../images/svgs/wavetop.svg) no-repeat center; background-size: cover; display: block; background-color: var(--white); transform: translateY(2px);}
#twitter:after {content: '';aspect-ratio: 18/1; width: 100%; background: url(../images/svgs/wavebottom.svg) no-repeat center; background-size: cover; display: block; background-color: var(--white); visibility: visible; height: auto; transform: translateY(-2px);}
.twitter-timeline iframe {max-height: 415px;}

/* Video Feature Styling */
.video-feature {padding: 40px; background: linear-gradient(0deg, rgba(143,72,154,1) 0%, rgba(236,100,181,1) 100%); border-radius: 10px 30px 10px 30px; margin: 0 auto 80px; max-width: 1280px;}
.video-feature.multiple {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.video-feature.multiple:after {display: none;}
.video-feature * {color: var(--white)!important;}
.video-feature p {margin: 0;}
.video-feature p:last-of-type {display: none;}
.video-feature iframe {border-radius: 5px; overflow: hidden; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);}

.quicklinks {width: 100%;}
.quicklinks h4 {color: var(--white); margin: 0 0 20px 0; text-align: center;}
.quicklinks ul {margin: 0; list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px;}
.quicklinks ul::after {display: none;}
.quicklinks ul li {display: block; padding: 0; background: none;}
.quicklinks ul li a {width: 100%; height: 100%; background: var(--pink); background-size: 200%; background-position: right; color: var(--dark); border-radius: 10px; transition: ease-out 0.4s; aspect-ratio: 1; display: grid;grid-template-columns: 1fr; grid-template-rows: 1fr; overflow: hidden;}
.quicklinks ul li a > * {min-width: 0; grid-column: 1; grid-row: 1;}
.quicklinks ul li a p {margin: 0; padding: 40px; z-index: 2; color: var(--white); background-image: linear-gradient(to right, rgba( 228, 30, 146, 0.3 ) 50%, rgba( 143,72,154,0.9 ) 50%); background-repeat: no-repeat; background-size: 200% 100%; background-position: left; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 150%; font-family: var(--fontTitle); font-weight: 400;}
.quicklinks ul li a:hover p, .quicklinks ul li a:focus p {background-position: right;}

.default {min-height: 100%;}
.default .content {padding: 20px 20px 40px 20px;}
.default .main {min-height: 60%;}
.default .left {width: 25%;}
.default .right {width: 70%;}

.default.news .content {padding: 20px 20px 80px 20px;}
.news .left {width: 79%; padding: 0 1% 0 0; margin: 0 0 40px;}
.news .right {width: 19%; padding: 0; margin: 0 0 40px;}
/* .news .purplebox > div {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;} */

.news-rightcolumn {display: grid; grid-template-columns: 2.5fr 1fr; gap: 40px; position: relative;}
.news-rightcolumn > * {min-width: 0;}
.news-rightcolumn aside {border-left: 1px solid var(--light); padding: 0 0 0 40px; position: sticky; top: 0px;}
.news-rightcolumn aside .sticky-container {position: sticky; top: 100px; overflow-y: auto;}
.news-rightcolumn aside .latest-news {margin: 0 0 20px;}

.post-feature {position: relative; display: grid;}
.post-feature img {width: 100%; height: 100%; object-fit: cover; grid-column: 1; grid-row: 1;}
.post-feature .content {grid-column: 1; grid-row: 1; width: 100%; max-width: 100%; height: 100%; padding: 40px 60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;}
.post-feature .content::after, .post-feature .content *::after {display: none;}
.post-feature .title-feature {background: rgba(15, 15, 15, 0.8); color: var(--white); padding: 40px; border-radius: 20px; max-width: 50%; font-size: 160%; font-family: var(--fontHeading);}
.post-feature .blockbutton {font-size: 120%; margin: 0;}
.post-feature .blockbutton a {background: var(--darkblue); font-family: var(--fontHeading); padding: 15px 15px 12px}
.post-feature .scroll-down {position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-size: 150%; display: block; border-radius: 50%; color: var(--white); border: 3px solid var(--white); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 1; background: var(--pink); animation: scrollDownFloat 3s ease-in-out infinite;}
.post-feature .scroll-down:hover {text-decoration: none; animation-play-state: paused;}

@keyframes scrollDownFloat {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

.fullwidth {height: 100%;}
.fullwidth .main {min-height: 60%; overflow-x: hidden;}

.content-halves {display: flex; gap: 40px; align-items: center; justify-content: space-between; margin: 40px 0;}
.content-halves > div {flex: 1 0 0; max-width: calc(50% - 20px)}
.content-halves::after, .content-halves > div::after {display: none;}
.content-halves.aligntop {align-items: flex-start;}

.pinkbox {background: var(--pink); padding: 40px; margin: 20px 0;}
.pinkbox * {color: var(--white)!important;}
.pinkbox ul:not([class]) li {background-image: url(../images/svgs/blobonewhite.svg)}
.pinkbox .quote {font-size: 100%; padding: 0 30px; margin: 0;}
.pinkbox .quote::before, .pinkbox .quote::after {color: var(--white); font-size: 300%; z-index: 1;}

section.bg-blue {background: #F1F8FD}
section.bg-blue .content {padding: 60px 20px 20px;}
section.bg-purple {background: #F3EDF6}

.no-padding-top {padding-top: 0;}
.no-padding-bottom {padding-bottom: 0;}
.no-padding-top .content {padding: 0 20px 60px;} 
.padding-top-half {padding-top: 40px;}

.blob {clip-path: url(#blob); background: var(--purple); padding: 100px 60px 75px;}
.blob * {color: var(--white)!important;}

.purplebox {padding: 40px 40px; background: #F3EDF6; margin: 0 0 40px; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: center;}
.purplebox::after {content: ''; display: block; position: absolute; bottom: 0; right: 0; background: url(../images/svgs/halfcircle.svg) no-repeat top; background-size: 100%; width: 300px; height: 300px; visibility: visible;}
.purplebox > div {width: calc(100% - 300px);}
.purplebox > div > img {margin-right: 40px;}
.purplebox > div::after {display: none;}
.purplebox .quote::before, .purplebox .quote::after {z-index: 1;}

.feature-boxes {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.feature-boxes::after, .feature-boxes *::after {display: none;}
.feature-boxes .box {background: transparent; padding: 20px; text-align: center; display: flex; flex-direction: column; border: 1px solid var(--purple)}
.feature-boxes .box i {font-size: 400%; color: var(--purple); margin: 60px 0;}
.feature-boxes .box img {margin: 0 auto 10px;}
.feature-boxes .box .title {background: none; color: var(--pink); font-family: var(--fontTitle); font-size: 130%; font-weight: 400 ;margin: 0;}
.feature-boxes .box p {color: var(--dark); text-align: center; margin: 0;}

.feature-boxes a.box {transition: all 0.4s ease;}
.feature-boxes a.box:hover {background: var(--purple);}
.feature-boxes a.box:hover * {color: var(--white);}

/*boardmembers*/
.boardmembers {width: 100%; margin: 20px 0 0 0; text-align: center;}
.boardmember {display: inline-block; vertical-align: top; width: 28%; margin: 0 5% 40px 0;}
.boardmember .image {margin: 0 0 10px 0; position: relative; }
/* .boardmember .image img.person {-webkit-mask-image: url(../images/svgs/boardblob.svg); mask-image: url(../images/svgs/boardblob.svg);} */
/* .boardmember:nth-of-type(2n) .image img.person {-webkit-mask-image: url(../images/svgs/blobthree.svg); mask-image: url(../images/svgs/blobthree.svg);} */
.boardmember .image img {border-radius: 50%; overflow: hidden; margin: 0 auto;}
.boardmember .text p {padding: 0; font-weight: 600;}
.boardmember .text p:first-child {display: flex; gap: 5px; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.boardmember .text p:first-child .name {margin: 0 auto; color: var(--accent-color, var(--darkblue))}
.boardmember .text p .role {font-weight: 400; font-size: 90%; width: 100%; display: block; color: var(--dark);}
.boardmember .text .socials {display: flex; gap: 5px; }
.boardmember .text .socials a {display: block; color: var(--accent-color, var(--darkblue))}
.boardmember .text a {color: var(--black);}
.boardmember .text a:hover {color: var(--pink);}

.boardmember .image .blobperson {position: absolute; bottom: 0; left: 100px; width: 40px; height: 40px; -webkit-mask-image: url(../images/svgs/blobpersonone.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: url(../images/svgs/blobpersonone.svg); mask-repeat: no-repeat; mask-size: 100% 100%; background: var(--accent-color, var(--darkblue));}
.boardmember:nth-of-type(even) .image .blobperson {-webkit-mask-image: url(../images/svgs/blobpersontwo.svg); mask-image: url(../images/svgs/blobpersontwo.svg);}

.boardmember:nth-of-type(n) {--accent-color: var(--darkblue);}
.boardmember:nth-of-type(2n+2) {--accent-color: var(--midblue);}
.boardmember:nth-of-type(3n+3) {--accent-color: var(--turquoise);}
.boardmember:nth-of-type(4n+4) {--accent-color: var(--orange);}
.boardmember:nth-of-type(5n+5) {--accent-color: var(--red);}
.boardmember:nth-of-type(6n+6) {--accent-color: var(--pink);}
.boardmember:nth-of-type(7n+7) {--accent-color: var(--purple);}

.boardmembers .boardmember:first-of-type {margin: 0 2% 40px 20%;}
.boardmembers .boardmember:nth-of-type(2) {margin: 0 20% 40px 2%;}

.teammembers .boardmember:first-of-type, .teammembers .boardmember:nth-of-type(2)  {margin: 0 5% 40px 0;}

/*eventsfeed*/
.eventsfeed {width: 100%; position: relative;}
.eventsfeed .event {width: 100%; margin: 0 0 20px 0; text-align: left;}
.eventsfeed .event div {display: inline-block; vertical-align: middle;}
.eventsfeed .event .image {width: 20%; margin: 0 5% 0 0;}
.eventsfeed .event .image img {border-radius: 10px; width: 100%;}
.eventsfeed .event .text {width: 75%;}

.pasteventsfeed h3 {font-size: 150%; color: var(--darkblue)}

/* CW events feed */
.eventsfeed {display: grid; grid-template-columns: 1fr; gap: 40px;}
.eventsfeed::after, .eventsfeed *::after {display: none;}
.eventsfeed > * {min-width: 0; min-height: 0;}
.eventsfeed .event {margin: 0; display: grid; grid-template-columns: 180px 1fr; padding: 0 0 40px; align-items: center; border-bottom: 1px solid var(--light); gap: 40px; background: var(--white); }
.eventsfeed .event .date {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; align-self: center; border: 1px solid var(--color)}
.eventsfeed .event .date p {margin: 0; text-align: center;}
.eventsfeed .event .date .month {background: var(--color); color: var(--white); padding: 5px 10px; font-weight: 700; text-transform: uppercase;}
.eventsfeed .event .date .month.m2:first-child {grid-column: 1/-1;}
.eventsfeed .event .date .day {font-size: 3rem; font-weight: 700; padding: 20px 60px 10px;}
.eventsfeed .event .date .month.m2 + .day.d2 {grid-column: 1/-1;}
.eventsfeed .event .date .year {grid-row: 3; padding: 5px 10px;}
.eventsfeed .event .date .year.y1:last-child {grid-column: 1/-1;}
.eventsfeed .event .text {display: flex; flex-direction: column; flex-grow: 1; gap: 0; width: 100%;}
.eventsfeed .event .text h4 {margin: 0;}
.eventsfeed .event .text .time i {display: inline-block; margin: 0 5px 0 0;}
.eventsfeed .event .text .buttons {margin-top: auto;}
.eventsfeed .event .text .buttons a {color: var(--color);}

.eventsfeed .event[data-filter="17"] {--color: var(--purple);}
.eventsfeed .event[data-filter="18"] {--color: var(--orange);}
.eventsfeed .event[data-filter="19"] {--color: var(--pink);}
.eventsfeed .event[data-filter="20"] {--color: var(--red);}
.eventsfeed .event[data-filter="21"] {--color: var(--turquoise);}
.eventsfeed .event[data-filter="22"] {--color: var(--darkblue);}

.key {grid-column: 1/-1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--light); padding: 0 0 10px; margin: 0 0 -20px;}
.key > * {display: block; margin: 0; padding: 0;}
.key a {color: var(--black); padding: 2px 8px; border-radius: 5px; display: flex; gap: 5px; align-items: center;}
.key a::after, .key a *::after {display: none;}
.key .selected {background: var(--color, var(--black)); color: var(--white);}
.key a:not(.all)::before {content: ""; display: block; width: 15px; height: 15px; background: var(--color); border: 1px solid var(--white);}

.eventsfeed .key a[data-filter="17"] {--color: var(--purple);}
.eventsfeed .key a[data-filter="18"] {--color: var(--orange);}
.eventsfeed .key a[data-filter="19"] {--color: var(--pink);}
.eventsfeed .key a[data-filter="20"] {--color: var(--red);}
.eventsfeed .key a[data-filter="21"] {--color: var(--turquoise);}
.eventsfeed .key a[data-filter="22"] {--color: var(--darkblue);}

/*newsfeed*/
.newsfeed {width: 100%; position: relative;}
.newsfeed .newsstory {width: 100%; margin: 0 0 30px 0; text-align: left;}
.newsfeed .newsstory div {display: inline-block; vertical-align: middle;}
.newsfeed .newsstory .image {width: 20%; margin: 0 5% 0 0;}
.newsfeed .newsstory .image img {border-radius: 10px; width: 100%;}
.newsfeed .newsstory .text {width: 75%;}
.newsfeed .newsstory .text .date {font-size: 90%; color: var(--dark); font-style: italic;}
.newsfeed .newsstory .text h4 {margin: 0;}

.post-share p.link-wrap, .sharelines p.link-wrap {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px;}
.post-share a.share-link, .sharelines a.share-link {display: flex; align-items: center; justify-content: center; background: var(--pink); color: var(--white); padding: 6px 8px; margin-left: 6px; max-width: max-content; border-radius: 3px; width: 33px; height: 33px; transition: all 0.2s ease-in-out;}
.post-share a.share-link:hover, .sharelines a.share-link:hover {opacity: 0.6;}
.post-share a.share-link img, .sharelines a.share-link img {max-width: 17px;}

.post-share a.share-link.linkedin, .sharelines a.share-link.linkedin {background: #0072b1;}
.post-share a.share-link.x-twitter, .sharelines a.share-link.x-twitter {background: var(--black);}
.post-share a.share-link.bluesky, .sharelines a.share-link.bluesky  {background: #0a7aff;}

.sharelines {border-top: solid 1px var(--lightblue); border-bottom: solid 1px var(--lightblue); padding: 20px 0; margin: 20px 0; font-weight: 700;}
.sharelines .share-title {font-size: 1.6rem; line-height: 1; font-family: var(--fontHeading); color: var(--midblue); margin: 0 0 10px 0; padding: 0;}
.sharelines p.link-wrap {margin: 0;}
.sharelines p.link-wrap a.share-link:first-of-type {margin: 0;}

.pagination p {display: inline-block;}
.pagination p.pages {float: right;}
.pagination .pages .selectedpage {padding: 0 5px; background: url(../images/svgs/boardblob.svg) no-repeat center; color: #ffffff; background-size: 100%;}
.pagination .pages a {padding: 0 5px;}
.pagination .pages a:hover {background: url(../images/svgs/boardblob.svg) no-repeat center; color: var(--white); background-size: 100%;}

/*CW newsfeed changes part of redesign 08/22*/
.newsfeed-filter {display: flex; gap: 5px; align-items: center; padding: 10px; background: var(--light); margin: 0 0 20px;}
.newsfeed-filter::after, .newsfeed-filter *::after {display: none;}
.newsfeed-filter p {margin: 0;}
.newsfeed-filter button {margin: 0; background: var(--dark); border-radius: 100vh; transition: all 0.4s ease; opacity: 0.4;}
.newsfeed-filter button:first-of-type {margin-left: auto;}
.newsfeed-filter button.selected {background: var(--purple); opacity: 1!important;}
.newsfeed-filter button:hover {background: var(--pink)}

.newsfeedmain {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.newsfeedmain::after, .newsfeedmain *::after {display: none;}
.newsfeedmain .newsstory {display: flex; flex-direction: column; border-radius: 5px; border: 1px solid var(--light); padding: 20px; margin: 0; min-width: 0;}
.newsfeedmain .newsstory > div {min-width: 0}
.newsfeedmain .newsstory .image, .newsfeedmain .newsstory .text {width: 100%; margin: 0; display: block;}
.newsfeedmain .newsstory .image {background: var(--white); border-radius: 10px; overflow: hidden; margin: 0 0 20px;}
.newsfeedmain .newsstory .image img {width: 100%;}
.newsfeedmain .newsstory .image img.no-img {max-width: 300px; margin: 10px auto;}
.newsfeedmain .newsstory .text {flex-grow: 1; display: flex; flex-direction: column;}
.newsfeedmain .newsstory .text h4 {color: var(--darkblue); margin: 0;}
.newsfeedmain .newsstory .text p {color: var(--dark);}
.newsfeedmain .newsstory .text .date {color: var(--dark); opacity: 0.7; font-size: 1em; font-style: italic;}
.newsfeedmain .newsstory .text .readmore {display: flex; margin-top: auto;}
.newsfeedmain .newsstory .text .readmore i {display: inline-block; transition: all 0.4s ease; margin: 0 0 0 5px;}
.newsfeedmain .newsstory .text .readmore:hover i {transform: translateX(10px);}

.newsback {margin: 0; display: flex; flex-direction: column; gap: 10px;}
.newsback p.blockbutton {margin: 0;}
.newsback p.blockbutton a {display: block; width: 100%; text-align: center;}
.newsback:not( :first-child ) {margin: 20px 0 0;}

.pagination {grid-column: 1 / -1;}

/*newsfeed option v2*/
.newsv2 {display: grid; grid-template-columns: 1fr; gap: 20px;}
.newsv2::after, .newsv2 *::after {display: none;}
.newsv2 > div {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.newsv2 > div  h2 {grid-column: 1 / -1; margin: 0 0 -10px; background: var(--white)}
.newsv2 > div  h3 {grid-column: 1 / -1; margin: 0; background: var(--white)}
.newsv2 > div  p.blockbutton {grid-column: 1 / -1; text-align: center; margin: 0 0 20px;}
.newsv2 .latest .newsstory:first-of-type {grid-column: span 2;}
.newsv2 .newsstory {background: var(--white);}
.newsv2 .newsstory .text h4 {font-size: 110%;}
.newsv2 .newsstory .text .date {font-size: 80%;}
.newsv2 .newsstory .text p {font-size: 90%;}
.newsv2 .tags {display: flex; gap: 5px; font-size: 0.7em; text-transform: uppercase; margin: -10px 0 10px}
.newsv2 .tags::after, .newsv2 .tags *::after {display: none;}
.newsv2 .tags a {display: block; padding: 5px; background: var(--darkblue); color: var(--white); border-radius: 5px; transition: all 0.4s ease;}
.newsv2 .tags a:hover {background: var(--lightblue);}

.newsv2 .latest {margin: 0 0 20px;}

.line {position: relative; display: block; margin: 20px 0; width: 100%; height: 1px; background: var(--light);}
.line::after {content: ''; display: block; width: 61px; height: 61px; background: var(--white); background-image: url(../images/logo_icon.png); background-repeat: no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/*related stories*/
.morestories {padding: 40px 40px 20px; background-image: linear-gradient(to bottom, #F1F8FD, var(--white));}
.related-stories {display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px;}
.related-stories::after, .related-stories *::after {display: none;}
.related-stories h3 {grid-column: 1 / -1; text-align: center; color: var(--midblue); margin: 0 0 -20px;}
.related-stories .newsstory {display: flex; flex-direction: column; border-radius: 5px; background: #F1F8FD; padding: 20px; margin: 0; }
.related-stories .newsstory .image, .related-stories .newsstory .text {width: 100%; margin: 0; display: block;}
.related-stories .newsstory .image {background: var(--white); border-radius: 10px; overflow: hidden; margin: 20px 0;}
.related-stories .newsstory .image img {width: 100%;}
.related-stories .newsstory .image img.no-img {padding: 20px;}
.related-stories .newsstory .text {flex-grow: 1; display: flex; flex-direction: column;}
.related-stories .newsstory .text h4 {color: var(--darkblue); font-size: 110%;}
.related-stories .newsstory .text p {color: var(--dark);}
.related-stories .newsstory .text .date {color: var(--midblue); opacity: 0.5;}
.related-stories .newsstory .text .readmore {display: flex; margin-top: auto;}
.related-stories .newsstory .text .readmore i {display: inline-block; transition: all 0.4s ease; margin: 0 0 0 5px;}
.related-stories .newsstory .text .readmore:hover i {transform: translateX(10px);}
.related-stories .newsstory .tags {display: flex; gap: 5px; font-size: 0.7em; text-transform: uppercase; margin: -10px 0 10px}
.related-stories .newsstory .tags::after, .related-stories .newsstory .tags *::after {display: none;}
.related-stories .newsstory .tags a {display: block; padding: 5px; background: var(--darkblue); color: var(--white); border-radius: 5px; transition: all 0.4s ease;}
.related-stories .newsstory .tags a:hover {background: var(--lightblue);}

/* latest news for news right column */
.latest-news {display: flex; background: var(--light); color: var(--darkblue); position: relative; transition: all 0.4s ease}
.latest-news > * {min-width: 0;}
.latest-news img {flex-grow: 1; max-width: 100px; width: 100%; height: auto; object-fit: cover;}
.latest-news p {font-size: 1.1rem; font-family: var(--fontHeading);font-weight: 700; margin: 0; padding: 20px;}
.latest-news:after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; bottom: 10px; right: 10px; opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; color: var(--white);}
.latest-news:hover {background: var(--darkblue); color: var(--white);}
.latest-news:hover:after {opacity: 1; transform: translateX(0);}
.latest-news.c1 {display: none;}

.news-thumbnail {padding: 0 0 10px; margin: 0 0 20px; position: relative;}
.news-thumbnail::after {content: ''; display: block; width: 100px; height: 2px; background: var(--darkblue); position: absolute; left: 0; bottom: 0; visibility: visible;}
.news-thumbnail .author {font-size: 1.25rem; margin: 10px 0 0; font-weight: 700;}
.news-thumbnail .business {margin: 0;}

.news-features {display: flex; flex-direction: column; gap: 20px;}
.news-features::after {display: none;}
.news-features .box {color: var(--darkblue); background: var(--light); transition: all 0.4s ease;}
.news-features .box .text { padding: 20px; position: relative;}
.news-features .box .heading {font-family: var(--fontHeading); font-weight: 700; margin: 0; font-size: 1.2rem; color: var(--pink);}
.news-features a.box:hover {background: var(--pink); color: var(--white);}
.news-features a.box:hover .heading {color: var(--white);}
.news-features a.box .text:after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; bottom: 10px; right: 10px; opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; color: var(--white); visibility: visible; height: auto;}
.news-features a.box .text:hover:after {opacity: 1; transform: translateX(0);}

/*membersfeed*/
.membersfeednav p.blockbutton {display: inline-block; margin: 0 20px 20px 0;}
.membersfeednav p.blockbutton a {background: var(--purple);}
.membersfeednav p.blockbutton:hover a {background: var(--pink);}
.membersfeed {width: 100%; position: relative; text-align: left;}
.membersfeed .member {display: inline-block; vertical-align: top; width: 33%; margin: 0 0 30px 0;}
/* .membersfeed ul li {background: none; padding: 0; margin: 0 0 10px;} */
.member a {display: block; color: var(--darkblue);}
/* .member a {display: block; color: var(--darkblue); font-weight: 700; font-size: 1.2rem;} */
.member a:hover {color: var(--purple);}
.member h1 {position: relative; display: flex; align-items: center;}
/* .member h1::before {content: ""; display: block; width: 40px; height: 40px; background: url(../images/svgs/blobpersontwo.svg) no-repeat center; background-size: 100%; order: 2;}
.member:nth-of-type(even) h1::before {background-image: url(../images/svgs/blobpersonthree.svg); width: 30px; height: 30px;} */
.member h1:after {content: ""; display: block; position: absolute; width: 90%; height: 4px; background: var(--pinkgradient); left: 0; bottom: -3px; border-radius: 100vw; transform: rotate(180deg);}

#membersmap {width: 100%; height: 600px; display: none;}

/* .membersmapcontainer {align-items: flex-start;}
.membersmap {width: 50%; height: 600px; display: none;}
.membersmap .marker-content {  }
.membersmap .marker-content p {font-size: 13px; margin:0; padding: 0; } */

.membersfeednav {padding: 0; margin: -50px 0 20px; border-bottom: 2px solid var(--darkblue); display: flex; justify-content: flex-start; gap: 10px;}
.membersfeednav p.blockbutton {display: inline-block; margin: 0;  font-weight: 700; font-size: 1.25rem;}
.membersfeednav p.blockbutton a {border-radius: 10px 10px 0 0;}
.membersfeednav p.blockbutton.selected a {background: var(--darkblue);}

/* .member-popup {display: none; overflow: hidden !important;}
.member-popup .heading {font-size: 1.6rem; font-family: var(--fontTitle);}
.member-popup .member-logo {max-height: 120px; margin: 0 auto 20px; object-fit: contain;}

.member-popup .member-popup-inner {height: 100%;display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; text-align: center; width:100%; max-width: 350px; }

.member-popup::before { content: ''; display: block; width: calc(100% + 30px); aspect-ratio: 1 / 1;  position: absolute; background: url(../images/svgs/circle.svg); background-size: contain; top: -10px; left: -10px;} */

/* Fancybox styling for `all-members` */
/* .fancybox-bg {background: transparent !important;}
.fancybox-inner {-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.fancybox-content {background: transparent !important; padding: 100px !important;} */

/* Fancybox styling for `gallery` */
/* .fancybox-caption.fancybox-caption--separate {background: rgba(0 0 0 / 0.8);}
.fancybox-caption-credit {font-size: 0.85em;opacity: 0.8;margin-top: 8px;font-style: italic;color: #ccc;}
.fancybox-navigation .fancybox-button--arrow_left, .fancybox-navigation .fancybox-button--arrow_right {padding: unset !important; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;}
.fancybox-navigation .fancybox-button {height: 70px !important;}
.fancybox-button svg {width: 100% !important; height: auto !important;}
.fancybox-button--arrow_left, .fancybox-button--arrow_right {  background: var(--pink) !important; border-radius: 100vw !important;
  aspect-ratio: 1 / 1 !important; border: none !important;}
.fancybox-button--arrow_left svg path, .fancybox-button--arrow_right svg path {stroke: white !important; fill: white !important;}
.fancybox-button--arrow_left:hover, .fancybox-button--arrow_right:hover {background: var(--pink) !important; opacity: 0.8;}
.fancybox-button--arrow_left:hover svg path, .fancybox-button--arrow_right:hover svg path {stroke: white !important; fill: white !important;} */
.fancybox-button svg {width: 100% !important; height: auto !important;}

/* Glass-ish effect for the factbox card(s) */
/* .glass-card { background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 100vw; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px 10px rgba(255, 255, 255, 1); position: relative; aspect-ratio: 1 / 1; padding: 40px; max-height: 50vh;}
.glass-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(
90deg, transparent, rgba(255, 255, 255, 0.8), transparent);}
.glass-card::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient(
180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3) );} */
/* END: Glass-ish effect for the factbox card(s) */
/* END: Fancybox styling */

.membertemplate .left {width: 70%;}
.membertemplate .right {width: 25%;}
.membertemplate .spacing {padding: 20px 0;}
.membertemplate .spacing p {line-height: 140%;}
.membertemplate .twitterborder {border: 1px solid var(--light); border-radius: 5px; overflow: hidden;}

p.blockbutton.backmembers {float: right; margin: -10px 0 0 0; padding: 0;}
p.blockbutton.backmembers a {background: var(--dark); color: var(--white); transition: all ease 0.4s;}
p.blockbutton.backmembers a:hover, p.blockbutton.backmembers a:focus {background: var(--darkblue); transform: scale(1.05);}
.memberdetails {margin: 0 0 20px 0;}
.memberdetails > div {margin: 0 0 10px 0;}
.memberdetails h6 {float: left; width: 30%; font-size: 120%; display: block;}
.memberdetails p {float: left; width: 70%; display: block;}
.memberdetails .contact {font-size: 90%;}

.memberlogo {margin: 20px 0 45px 0;}
.memberlogo img {margin: 0 auto;}
.membersmap {height: 400px;}

.housestats {margin: 20px 0;}
.housestats .square {float: left; background: var(--darkblue); color: var(--white); border-radius: 10px; padding: 20px 20px 80px 20px; margin: 0 1% 10px 0; position: relative;}
.housestats .mainsquares .square {width: 49%;}
.housestats .secondlevelsquares .square, .housestats .thirdlevelsquares .square {width: 32%;}
.housestats .secondlevelsquares .square:nth-of-type(2) {width: 66%;}
.housestats .square span {position: absolute; bottom: 10px; right: 10px; font-size: 300%; text-shadow: 0 0 4px var(--lightblue);}

.square.s2 {background: var(--lightblue);}
.square.s3 {background: var(--turquoise);}
.square.s4 {background: var(--orange);}
.square.s5 {background: var(--red);}
.square.s6 {background: var(--pink);}
.square.s7 {background: var(--purple);}
.square.s2 span {text-shadow: 0 0 4px var(--darkblue);}
.square.s3 span {text-shadow: 0 0 4px var(--midblue);}
.square.s4 span {text-shadow: 0 0 4px var(--red);}
.square.s5 span {text-shadow: 0 0 8px var(--orange);}
.square.s6 span {text-shadow: 0 0 4px var(--purple);}
.square.s7 span {text-shadow: 0 0 4px var(--pink);}
.square h6 {font-size: 120%; font-family: var(--fontBody);}

.membernews {background: var(--darkblue); color: var(--white); text-align: left;}
.membernews .feed .story {float: left; width: 32%; margin: 0 1% 0 0; background: var(--white); color: var(--dark); border-radius: 10px; padding: 30px 15px;}
.membernews .slick-slide {max-width: 25%; margin: 0 20px 0 0;}

.membernews ul.slick-dots {text-align: center; margin: 0; padding: 20px 0 0 0;}
.membernews .slick-dots li {display: inline-block; margin: 0 5px; width: 20px; height: 20px; position: relative; vertical-align: middle;}
.membernews .slick-dots li button {display: block; background: var(--white); transition: ease-out 0.5s; font-size: 0; border-radius: 50%; padding: 0; width: 100%; height: 100%; margin: 0;}
.membernews .slick-dots li.slick-active button {background: var(--lightblue);}

.memberevents {background: var(--white); text-align: left;}
.memberevents .content {padding: 60px 20px 0 20px;}
.memberevents .feed .story {float: left; width: 24%; margin: 0 1% 0 0; background: var(--midblue); color: var(--white); border-radius: 10px; padding: 30px 15px;}
.memberevents .feed .story a {color: var(--white);}

.memberevents ul.slick-dots {text-align: center; margin: 0; padding: 20px 0 0 0;}
.memberevents .slick-dots li {display: inline-block; margin: 0 5px; width: 20px; height: 20px; position: relative; vertical-align: middle;}
.memberevents .slick-dots li button {display: block; background: var(--midblue); transition: ease-out 0.5s; font-size: 0; border-radius: 50%; padding: 0; width: 100%; height: 100%; margin: 0;}
.memberevents .slick-dots li.slick-active button {background: var(--darkblue);}

/*footer*/
/* .wave {aspect-ratio: 9/1; width: 100%; background-repeat: no-repeat, repeat-x; background-position: center, top; background-size: cover, 100%; background-image: url(../images/svgs/testwave.svg), url(../images/svgs/scatter.svg);}
.bottomwave {aspect-ratio: 18/1; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/svgs/wavebottom.svg);} */

.footer {background: var(--white); color: var(--dark);}
.footer h5 {font-size: 140%;}
.footer a.phone, .footer a.mail {display: inline-block;}
.footer a.phone {margin: 0 20px 0 0;}
.footer p {font-size: 85%; margin: 0;}

/* CW amends as proof of concept */
.footer .content {padding-block: 20px;}

/*seegreen footer*/
.seefooter {font-size: 70%; margin: 10px 0 0 0;}
.seefooter .content {padding: 0;}
.seefooter ul {list-style-type: none; margin: 0;}
.seefooter ul li {display: inline; padding: 0; background: none;}
.seefooter li a {color: var(--dark);}
.seefooter li:hover a, .seefooter li:focus a {color: var(--pink);}
.seefooter i {margin: 0 5px 0 0;}
.seefooter li:after {content: "|"; margin: 0 5px; color: var(--dark);}
.seefooter li:last-child:after {content: "";}

.sitemap a {color: var(--dark);}
.sitemap ul {list-style-type: none; margin: 0;}
.sitemap ul ul {margin: 0 0 0 15px;}
.sitemap li {margin: 10px 0 0 0; padding: 0 0 0 30px; position: relative; font-size: 100%;}
.sitemap li:before {content: ""; display: block; width: 20px; height: 20px; background: var(--darkblue); position: absolute; top: 0; left: 0; -webkit-mask-image: url(../images/svgs/blobpersonone.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: url(../images/svgs/blobpersonone.svg); mask-repeat: no-repeat; mask-size: 100% 100%;}
.sitemap li a:hover {color: var(--darkblue);}
.sitemap li li {font-size: 95%;}
.sitemap li li:before {background: var(--turquoise); -webkit-mask-image: url(../images/svgs/blobpersontwo.svg); mask-image: url(../images/svgs/blobpersontwo.svg);}
.sitemap li li a:hover {color: var(--turquoise);}
.sitemap li li li {font-size: 90%;}
.sitemap li li li:before {background: var(--orange); -webkit-mask-image: url(../images/svgs/blobpersonthree.svg); mask-image: url(../images/svgs/blobpersonthree.svg);}
.sitemap li li li a:hover {color: var(--orange);}

.form, .login {background: var(--bluegradient); border-radius: 10px; padding: 30px; color: var(--dark); margin: 20px 0; font-size: 90%;}
.form.bookevent {background: var(--pinkgradient);}
.login {max-width: 75%; margin: 0 auto;}
.form h4, .login h6 {color: var(--white);}
.form .input, .login .input {position: relative;}
.form .input.submit {margin-top: 10px;}
.form .required, .login .required {position: absolute; right: 20px; top: 5px;}
.form .input .required {color: var(--white);}
.form .input label.file {margin: 0 0 10px 0; min-width: 110px;}
.form .input input ~ .required, .form .input select ~ .required, .form .input textarea ~ .required {color: var(--red);}
.form .input.labelneeded input ~ .required {color: var(--white);}
.form .seeformerrors {margin: 0 0 10px 0; padding: 6.9px 10px; font-weight: 500; line-height: 1.4em; font-size: 90%; background: rgba(255,255,255,0.8); border: 1px solid var(--white); border-radius: 5px;}
.form input, .form textarea, .form select {margin: 0 0 10px 0; background: rgba(255,255,255,0.8); border: 1px solid var(--white); border-radius: 5px;}
.form input[type="submit"], .login input[type="submit"] {margin: 0; float: right; border-radius: 10px; background: var(--white); color: var(--darkblue); border: none; transition: all ease 0.4s; font-size: 80%;}
.form label, .login label {display: none; color: var(--white);}
.login label ~ br {display: none;}
.form input[type="submit"]:hover, .form input[type="submit"]:focus, .login input[type="submit"]:hover, .login input[type="submit"]:focus {background: var(--darkblue); color: var(--white);}
.form .labelneeded label {display: inline-block!important; margin: 0 0 10px 0; width: 25%; padding: 0.56em 20px 0.56em 5px; vertical-align: top;}
.form .labelneeded input, .form .labelneeded label.file {width: 25%;}
.form .labelneeded input[type="time"] {width: 10%; text-align: center; min-width: 70px;}
/* .form .radio label {display: inline; margin: 0 20px 0 5px;} */
.form fieldset {margin: 10px 0 20px 0; border-color: var(--white); color: var(--white); padding: 15px 0 15px 20px;}
.form input[type="time"] {margin: 0 0 0 10px;}
.form .required-description {float: left; font-weight: 500; color: var(--white); font-size: 75%; line-height: 40px; margin: 0 20px 0 0;}
.form input.hasDatepicker {min-width: 100px;}
.form label.checkbox-inline {display: inline-block; margin: 0 0 0 10px; cursor: pointer;}

/* FORM BUILDER STYLING */
.sc-fb-container {background: var(--bluegradient); border-radius: 10px; padding: 30px; color: var(--white); margin: 20px 0; font-size: 90%;}
.sc-fb-container label {color: var(--white); font-family: var(--fontBody);}
.sc-fb-headings {color: var(--white); font-size: 150%;}
.sc-fb-container hr {background: var(--white);}
.sc-fb-container input[type="submit"] {margin: 0; float: right; border-radius: 10px; background: var(--white); color: var(--darkblue); border: none; transition: all ease 0.4s; font-size: 80%;}
.sc-fb-container input[type="submit"]:hover, .sc-fb-container input[type="submit"]:focus {background: var(--darkblue); color: var(--white);}
.sc-fb-field-checkbox {margin: 0 0 15px;}
.sc-fb-field-radio:last-child {margin: 0 0 15px;}
.sc-fb-field-required {color: var(--white);}

.seecmssimplelogin {background: var(--bluegradient); border-radius: 10px; padding: 30px; color: var(--white);}
.seecmssimplelogin p {margin: 0;}
.seecmssimplelogin input[type="submit"] {background: var(--white); color: var(--darkblue); float: right; border-radius: 10px; transition: all ease 0.4s; font-size: 80%;}
.seecmssimplelogin input[type="submit"]:hover, .seecmssimplelogin input[type="submit"]:focus {background: var(--darkblue); color: var(--white);}
.seecmssimplelogin .checkbox {font-size: 1rem; font-style: italic; display: flex; gap: 5px; align-items: center; color: var(--white)}
.seecmssimplelogin .checkbox::after, .seecmssimplelogin .checkbox *::after {display: none;}
.seecmssimplelogin .checkbox input[type="checkbox"] {margin: 0;}

.submit.form optgroup {color: var(--white);}
.submit.form optgroup option {color: var(--black);}
.submit .submitpost-eventfields {display: none;}

/* MH radios */
label.radio {display: inline-block; position: relative; padding: 12px 0 0 35px; line-height: 45px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 0 10px 0;}
label.radio.radio-inline {float: left; padding: 0 24px 0 35px;}
label.radio.radio-inline:last-child {float: left; padding: 0 0 0 35px;}
label.radio.radio-nolabel {padding: 0;}
label.radio input[type="radio"] {position: absolute; opacity: 0; cursor: pointer;} /* Hide default radio */
label.radio span.radio-checkmark {position: absolute; top: 10px; left: 0; height: 20px; width: 20px; background-color: #ffffff; border: 2px solid #cccccc; border-radius: 50%; box-sizing: content-box;}
/* Show new radio container */
label.radio:hover input[type="radio"] ~ span.radio-checkmark {border-color: #999999; -moz-box-shadow: 0 0 2px rgba(15, 15, 15, 0.5); -webkit-box-shadow: 0 0 2px rgba(15, 15, 15, 0.5); box-shadow: 0 0 2px rgba(15, 15, 15, 0.5);}
label.radio span.radio-checkmark:after {content: ""; position: absolute; display: none; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--darkblue);} /* Add check mark */
label.radio input[type="radio"]:checked ~ span.radio-checkmark:after {display: block;} /* Show check mark when radio checked */
label.radio input[type="radio"]:checked ~ span.radio-checkmark {border-color: var(--darkblue);} /* Change border colour when radio checked */

/* MH Files */
.form label.file {display: block; position: relative; padding: 0 15px; height: 40px; font-size: 75%; line-height: 40px; margin: 0 0 10px 0; background: rgba(255,255,255,0.8); border: 1px solid var(--white); border-radius: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--dark); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.form label.file:hover {background: var(--darkblue); border-color: var(--darkblue); text-decoration: none; color: #ffffff;}
.form label.file.inputsizing {padding: 0 15px!important;}
.form label.file input[type="file"] {position: absolute; opacity: 0; width: 0.1px; height: 0.1px; z-index: -1;}

/* MH jQueryUI */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {cursor: pointer;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year {margin: 0 0 0 10px; height: 1.8em; background: #ffffff; border: 1px solid #cccccc; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; text-align: center; width: 40%;}

/*assets*/
.assets a {display: block; float: left; width: 48%; margin: 0 1% 20px 1%;}
.assets a.white {background: var(--dark);}
.assets div {margin: 0 0 40px 0;}

.assets div div {width: 45%; display: inline-block;}
.assets div div:nth-child(odd) {margin: 0 0 0 5%;}

/*CW NEW STORIES HUB AREA*/
.main-stories-hub {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 40px 0 0;}
.main-stories-hub::after, .main-stories-hub *::after {display: none;}
.main-stories-hub .box {display: flex; flex-direction: column; gap: 20px; overflow: hidden; min-width: 0; transition: all 0.4s ease;}
.main-stories-hub .box:hover {border-radius: 20px;}
.main-stories-hub .box .text {padding: 0 0 20px;  display: flex; flex-direction: column; transition: all 0.2s ease; flex-grow: 1;}
.main-stories-hub .box:hover .readmore {opacity: 1;}
.main-stories-hub .box p {color: var(--dark)}
.main-stories-hub .box .name {color: var(--darkblue); font-family: var(--fontTitle); font-weight: 400; margin: 0; font-size: 1.5rem;}
.main-stories-hub .box .readmore {display: block; color: var(--dark); margin-top: auto; opacity: 0; transition: opacity 0.4s ease 0.2s; color: var(--pink)}
.main-stories-hub .box .readmore i {display: inline-block; margin: 0 0 0 5px; transition: all 0.4s ease;}
.main-stories-hub .box .readmore:hover i {transform: translateX(5px);}
.main-stories-hub .box img {transition: all 0.4s ease;}
.main-stories-hub:hover .box img {filter: brightness(0.5)}
.main-stories-hub .box:hover img {filter: brightness(1)}
.main-stories-hub .box:hover ~ .box img {filter: brightness(0.5)}

.casestudies-grid {display: grid; grid-template-columns: repeat(3, 1fr); padding: 60px 20px; justify-content: center; gap: 20px;}
.casestudies-grid::after, .casestudies-grid *::after {display: none;}
.casestudies-grid .casestudy {position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--white); padding: 20px; border-radius: 20px; box-shadow: 0 5px 5px rgba(0,0,0,0.1);}
.casestudies-grid .casestudy .image {position: relative; border-radius: 10px; overflow: hidden;}
.casestudies-grid .casestudy img {margin: 0 auto;}
.casestudies-grid .casestudy .text {flex-grow: 1; display: flex; flex-direction: column;}
.casestudies-grid .casestudy h4 {margin: 10px 0 0}
.casestudies-grid .casestudy p {color: var(--dark)}
.casestudies-grid .casestudy .date {font-style: italic; opacity: 0.7; font-size: 0.9em;}
.casestudies-grid .casestudy .readmore {margin-top: auto;}
.casestudies-grid .casestudy .readmore i {display: inline-block; margin: 0 0 0 5px; transition: all 0.4s ease;}
.casestudies-grid .casestudy .readmore:hover i {transform: translateX(5px);}
.casestudies-grid .casestudy .tags {display: flex; gap: 5px; font-size: 0.7em; text-transform: uppercase;}
.casestudies-grid .casestudy .tags::after, .casestudies-grid .casestudy .tags *::after {display: none;}
.casestudies-grid .casestudy .tags a {display: block; padding: 5px; background: var(--darkblue); color: var(--white); border-radius: 5px; transition: all 0.4s ease;}
.casestudies-grid .casestudy .tags a:hover {background: var(--lightblue);}

.casestudies-grid .casestudy.feature {grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; overflow: hidden;}
.casestudies-grid .casestudy.feature .image {grid-column: span 2; border-radius: 0;}
.casestudies-grid .casestudy.feature .image img {width: 100%; height: 100%; object-fit: cover;}
.casestudies-grid .casestudy.feature .text {padding: 40px 40px 40px 20px;}

.casestudies-grid .casestudy .overlay {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.casestudies-grid .casestudy:nth-of-type(n) .overlay {background: rgba(228, 30, 146, 0.4)}
.casestudies-grid .casestudy:nth-of-type(2n) .overlay {background: rgba(143,72,154,0.4)}
.casestudies-grid .casestudy:nth-of-type(3n) .overlay {background: rgba(61, 181, 230, 0.4)}
.casestudies-grid .casestudy:nth-of-type(4n) .overlay {background: rgba(60, 191, 174, 0.4)}
.casestudies-grid .casestudy .overlay.image {background: none; opacity: 0.8;}

/* strategic plans */
.learnmore::after {display: none;}
.learnmore-boxes {display: flex; flex-direction: column; gap: 60px; margin: 0 0 60px;}
.learnmore-boxes:after {display: none;}
.learnmore-boxes:last-child {margin: 0; gap: 0;}

.learnmore-boxes .box {display: grid; grid-template-columns: 2fr auto; gap: 40px; align-items: center;}
.learnmore-boxes .box.lower-set {grid-template-columns: 2fr 1fr; margin: 0 0 -20px;}
.learnmore-boxes .box.lower-set .image .overlay {bottom: -20px; left: -20px;}
.learnmore-boxes .box.lower-set .image {max-width: 330px; margin: 0 auto;}
.learnmore-boxes .box:nth-of-type(even) {grid-template-columns: 1fr 2fr;}
.learnmore-boxes .box:after {display: none;}
.learnmore-boxes .box > * {min-width: 0;}
.learnmore-boxes .box .image {position: relative; justify-self: center;}
.learnmore-boxes .box:nth-of-type(even) .image {grid-column: 1; grid-row: 1;}
.learnmore-boxes .box .image img {z-index: 3; position: relative; margin: 0 auto;}
.learnmore-boxes .box .image .circle {border-radius: 50%;}
.learnmore-boxes .box .image:after {content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: -20px; right: -40px; background: var(--orange); opacity: 0.8; visibility: visible; border-radius: 50%; z-index: 1;}
.learnmore-boxes .box:nth-of-type(even) .image:after {top: -20px; left: -20px; bottom: unset; right: unset; background: var(--turquoise);}
.learnmore-boxes .box .image .overlay {max-width: 150px; position: absolute; bottom: -40px; left: 20px;}
.learnmore-boxes .box:nth-of-type(even) .image .overlay {right: 20px; left: unset;}
.learnmore-boxes .box:nth-of-type(even) .text {grid-column: 2;}
.learnmore-boxes .box .lowertext {grid-column: 1 / -1;}
.learnmore-boxes .name {font-family: var(--fontTitle); font-weight: 400; color: var(--darkblue); margin-top: 10px;}
.learnmore-boxes .role {font-family: var(--fontBody); font-weight: 700; color: var(--darkblue);}
.large-box-container {display: none;}

.alt-learnmore {margin: 80px 0 0;}
.alt-learnmore .box {grid-template-columns: auto 2fr;}
.alt-learnmore .learnmore-boxes .box .image {grid-column: 1; grid-row: 1;}
.alt-learnmore .box .text {grid-column: 2;}
.alt-learnmore .learnmore-boxes .box .image:after {top: -20px; left: -20px; bottom: unset; right: unset; background: var(--purple);}
.alt-learnmore .learnmore-boxes .box .image .overlay {right: 20px; left: unset;}

.alt-learnmore hr {margin: 80px 0;}

.large-box {max-width: 85vw; margin: 0 auto; min-width: 50vw; max-height: 80vh; overflow-y: auto;}
.large-box .grid-thirds {display: grid; grid-template-columns: 1fr 2fr; gap: 40px;}
.large-box .grid-thirds::after {display: none;}
.large-box .grid-thirds strong {font-weight: 500;}
.large-box .grid-thirds {color: var(--darkblue);}
.large-box .image {position: relative; display: flex; flex-direction: column; gap: 10px;}
.large-box .image .overlay {max-width: 150px; margin-left: auto;}

.page-buttons {display: flex; flex-direction: column; gap: 20px;}
.page-buttons::after {display: none;}
.page-buttons .button {display: block; border-radius: 10px; background: var(--light); padding: 20px; color: var(--black); transition: all 0.4s ease;}
.page-buttons .button p {margin: 0;}
.page-buttons .button .heading {font-family: var(--fontHeading); font-weight: 700; font-size: 150%; color: var(--accent-color, var(--black));}
.page-buttons .button i {display: inline-block; vertical-align: middle; margin: 0 0 4px 0px; opacity: 0.5; transition: all 0.4s ease;}
.page-buttons .button:hover i {opacity: 1; margin-left: 5px;}

.page-buttons a.button:hover {background: var(--accent-color, var(--black));}
.page-buttons a.button:hover .heading, .page-buttons a.button:hover p {color: var(--white);}

.page-buttons .button:nth-child(1) {--accent-color: var(--orange);}
.page-buttons .button:nth-child(2) {--accent-color: var(--red);}
.page-buttons .button:nth-child(3) {--accent-color: var(--pink);}
.page-buttons .button:nth-child(4) {--accent-color: var(--purple);}
.page-buttons .button:nth-child(5) {--accent-color: var(--midblue);}

.row .page-buttons {margin: 40px 0; flex-direction: row;}

.testimonials {position: relative; padding: 40px 0;}
.testimonials::before, .testimonials::after {content: '“'; display: block; font-size: 800%; font-family: var(--quote); color: var(--pink); position: absolute; top: 60px; left: -20px; z-index: -1; opacity: 0.2;}
.testimonials::after {content: "”"; top: unset; left: unset; bottom: 160px; right: -20px; visibility: visible; height: auto; color: var(--turquoise)}

.testimonials.slick-slider {display: grid!important; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.testimonials.slick-slider > {min-width: 0;}
.testimonials.slick-slider .slick-list {grid-column: 1 / -1; }
.testimonials.slick-slider .slick-arrow {grid-row: 2; justify-self: end; background: none; padding: 0; height: auto; font-size: 150%; color: var(--darkblue);}
.testimonials.slick-slider .slick-next {justify-self: start;}

.testimonial {text-align: center;}
.testimonial .t-quote {font-size: 200%; font-family: var(--fontTitle); font-weight: 400;}
.testimonial .name {font-family: var(--fontHeading); font-weight: 700; color: var(--darkblue); margin: 0;}
/* .testimonial .role {font-family: var(--fontBody); font-weight: 400; font-size: 1rem;} */
.testimonial .company {font-family: var(--fontHeading); font-weight: 700; color: var(--pink);}

.cta-feature {display: grid; grid-template-columns: 3fr 2fr; margin: 0 0 80px;}
.cta-feature > * {min-width: 0;}
.cta-feature picture {grid-column: 1 / -1; grid-row: 1;}
.cta-feature picture {width: calc( 100% - 40px );}
.cta-feature picture, .cta-feature img {width: 100%; height: 100%; object-fit: cover;}
.cta-feature .text {background: rgba(228, 30, 146, 0.75); padding: 80px 40px 40px; grid-row: 1; grid-column: 2; margin-top: 40px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1;}
.cta-feature .text::before {content:''; display: block; width: 100%; height: 40px; background: inherit; position: absolute; top: 100%; left: 0;}

.cta-feature .text * {color: var(--white);}

/* RESOURCE HUB */
.resource-hub {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; grid-auto-rows: 1fr; margin-bottom: 30px;}
.resource-hub:after {display: none;}
.resource-hub a {min-width: 0; background: var(--white); border-radius: 20px; box-sizing: border-box; color: var(--dark); overflow: hidden; position: relative; border: 2px solid var(--accent-color); display: flex; flex-direction: column;}
/* .resource-hub a { background-image: url(../images/svgs/circle-halfopacity.svg); background-repeat: no-repeat; background-size: 150%; background-position: center; transition: all 0.4s ease;} */
.resource-hub a > * {min-width: 0;}
.resource-hub a > picture, .resource-hub a > picture > img {width: 100%;}
.resource-hub a > .image {display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: center; justify-items: center;}
.resource-hub a > .image > * {min-width: 0; grid-column: 1; grid-row: 1;}
.resource-hub a > .image i {font-size: 2rem; z-index: 5; position: relative; opacity: 0; transition: all 0.2s ease;}
.resource-hub a > .image i::after {content: ''; display: block; width: 0; height: 0; border-radius: 50%; background: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.4s ease; z-index: -1;}
.resource-hub a:hover > .image i {color: var(--accent-color); opacity: 1;}
.resource-hub a:hover > .image i::after {width: 60px; height: 60px;}
.resource-hub a:hover {color: var(--white);}

.resource-hub .resource-logo {align-self: start; justify-self: end; padding: 10px; background: var(--white); z-index: 2; border-radius: 0 0 0 5px; max-width: 75%;}
.resource-hub .resource-logo img {max-height: 40px;}

.resource-hub a p {padding: 40px; margin: 0; z-index: 2; position: relative; display: flex; gap: 5px; align-items: center; justify-content: center; font-family: var(--fontTitle); font-weight: 400; font-size: 120%; flex-grow: 1;}
.resource-hub a p i {position: relative; display: block; z-index: -1; font-size: 90%; transition: all 0.4s ease;}
.resource-hub a p i::before {position: relative; z-index: 2; line-height: 0.9;}
.resource-hub a p i::after {content: ''; display: block; width: 0; height: 0; border-radius: 50%; background: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.4s ease;}

.resource-hub a:hover p i {color: var(--accent-color); transform: translateX(5px);}
.resource-hub a:hover p {background: rgba(15, 15, 15, 0)}
.resource-hub a:hover p i::after {width: 35px; height: 35px;}
.resource-hub a::after {content: ''; display: block; width: 0; height: 0; background: var(--accent-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 1; transition: 0.6s ease;}
.resource-hub a:hover::after {width: 140%; height: 140%;}
.resource-hub a:hover > .image + p i::after {display: none;}

.resource-hub a:nth-of-type(n) {--accent-color: var(--orange);}
.resource-hub a:nth-of-type(2n+2) {--accent-color: var(--pink);}
.resource-hub a:nth-of-type(2n+2) {--accent-color: var(--purple);}
.resource-hub a:nth-of-type(4n+4) {--accent-color: var(--midblue);}
.resource-hub a:nth-of-type(5n+5) {--accent-color: var(--turquoise);}
.resource-hub a:nth-of-type(6n+6) {--accent-color: var(--lightblue);}

.resource-downloads {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 30px;}
.resource-downloads > * {min-width: 0;}
.resource-downloads .block {background: var(--light); padding: 40px; border-radius: 20px;}

.resource-downloads .block ul {margin: 0; list-style-type: none; }
.resource-downloads .block hr {margin: 20px 0}
.resource-downloads .images + hr {margin: 40px 0 20px;}
.resource-downloads .images {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-content: start; }
.resource-downloads .images::after {display: none;}
.resource-downloads .images > * {min-width: 0;}
.resource-downloads .main-folder {grid-column: 1 / -1; }
.resource-downloads .main-folder .images {grid-template-columns: repeat(4, 1fr);}
.resource-downloads li {display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 10px; margin: 0;}
.resource-downloads li p {display: flex; align-items: center; gap: 5px;}
.resource-downloads a {color: var(--darkblue)}
.resource-downloads a i {opacity: 0; transition: all 0.4s ease;}
.resource-downloads a:hover i {opacity: 1;}
.resource-downloads h4 {font-size: 1.25rem;}

.resource-downloads .list {display: flex; flex-direction: column; gap: 10px;}
.resource-downloads .list li {flex-direction: row; gap: 10px; justify-content: start;}

.resource-downloads .image {position: relative; overflow: hidden;}
.resource-downloads .image img {max-width: 250px; max-height: 200px; object-fit: contain; transition: all 0.4s ease; width: 100%;}
.resource-downloads li:hover .image img {transform: scale(1.1);}

.resource-downloads .download-box {display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: 20px; background: var(--darkblue); color: var(--white); justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; font-size: 1.2rem; transition: all 0.4s ease;}
.resource-downloads .block .download-box:hover {background: var(--midblue)}
.resource-downloads .block .download-box i {opacity: 1; font-size: 2rem;}

/* event template */

.toggle-features {max-width: 1200px; margin: 0 auto;}
.toggle-features .feature-buttons {display: flex; gap: 10px; align-items: center; justify-content: center; border-bottom: 2px solid var(--pink); padding: 0 5px; margin: 0 0 20px;}
.feature-buttons .blockbutton {margin: 0;}
.feature-buttons .blockbutton a {border-radius: 10px 10px 0 0; background: var(--darkblue); font-family: var(--fontHeading); font-size: 1.2rem; display: block; text-align: center;}
.feature-buttons .blockbutton a.selected {background: var(--pink);} 
.toggle-features .feature {padding: 40px 60px; background: var(--white); border-radius: 10px; display: none; box-shadow: 0 0 5px rgba(228, 30, 146, 0.4); background-image: url(../images/svgs/circle-quarteropacity.svg); background-size: 60%; background-position: 140% 140%; background-repeat: no-repeat;}

.bg-circle {background: url(../images/svgs/circle-halfopacity.svg), url(../images/svgs/circle-halfopacity.svg); background-size: 50%, 50%; background-position-x: -70%, 175%; background-position-y: top; background-repeat: no-repeat}

.placeshapinginaction section.bg-blue {background: #B8E8FF}
.placeshapinginaction section.bg-grey {background: #efefef}
.placeshapinginaction .learnmore-boxes .box {grid-template-columns: 1fr 1.5fr; column-gap: 100px;}
.placeshapinginaction .learnmore-boxes .box .image {grid-column: 1; grid-row: 1}
.placeshapinginaction .learnmore-boxes .box .text {grid-column: 2; grid-row: 1}
.placeshapinginaction .learnmore-boxes .box .image img {width: 100%}
.placeshapinginaction .learnmore-boxes {max-width: 1200px; margin: 0 auto;}
.placeshapinginaction .learnmore-boxes .box .image:after {background: var(--darkblue)}
.placeshapinginaction .page-buttons .button {background: #3D348A; padding: 30px;}
.placeshapinginaction .page-buttons .button p {color: var(--white); padding: 0;}
.placeshapinginaction .page-buttons .button p.arrowbutton {margin: 0; padding: 0;}
.placeshapinginaction .page-buttons .button p a {color: var(--white); font-weight: 700;}
.placeshapinginaction .title-banner.style2 {background-image: url(../images/svgs/pia-pagetitle-style2.svg);}
.placeshapinginaction .title-banner * {color: var(--white)}
.placeshapinginaction .title-banner h4 {font-size: 1.2rem;; font-family: var(--fontBody);}
.placeshapinginaction .title-banner h1 {font-size: 3rem; font-family: var(--fontHeading);}
.placeshapinginaction .title-banner .content h4 {margin: 0; padding: 20px 20px 0 20px; text-align: left; width: 50%; margin-left: auto;}
.placeshapinginaction .title-banner .content {flex-direction: column;}
.placeshapinginaction .title-banner .image {background: var(--pink)}
.placeshapinginaction .title-banner .image .editbar {position: absolute!important; top: 50%; left: 50%; z-index: 20; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 20px;}
.placeshapinginaction .title-banner .content .editbar {text-align: right;}
.placeshapinginaction .breadcrumb-wrap .content {padding-block: 15px 0;}
.placeshapinginaction .imageslider .slick-next, .placeshapinginaction .imageslider .slick-prev {font-size: 1.4rem; color: var(--pink); text-decoration: none; position: absolute; top: 50%; left: 20px; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 20; background: var(--white); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; align-content: center; justify-content: center;}
.placeshapinginaction .imageslider .slick-next {right: 20px; left: auto;}
.placeshapinginaction .imageslider .slick-disabled {display: none!important}
.placeshapinginaction .content-halves.introsection {gap: 0; column-gap: 60px; align-items: flex-start;}
.placeshapinginaction .imageslider .image {display: grid!important; align-items: end;}
.placeshapinginaction .imageslider .image > * {grid-column-start: 1; grid-row-start: 1;}
.placeshapinginaction .imageslider .image p {color: var(--white); padding: 15px 20px; background: rgba(0,0,0,0.7); font-weight: 700;}
.placeshapinginaction .introsection {margin: 0;}
.placeshapinginaction .introsection .blurtext {margin: 0; padding: 40px; background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); position: relative;}

/* Tooltip container */
.placeshapinginaction .introsection .blurtext .tooltip-container {position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;}
/* tooltip */
.placeshapinginaction .introsection .blurtext .tooltip {position: relative; display: inline-block; pointer-events: none; top: -105px; left: 42px;}
.placeshapinginaction .introsection .blurtext .tooltip .tooltiptext {visibility: hidden; width: 160px; background-color: var(--pink); color: var(--white); text-align: center;
  border-radius: 6px; padding: 10px; position: absolute; z-index: 1; margin-left: -100px; opacity: 0; transition: opacity 0.3s; font-size: 0.9rem; line-height: 1.4;}
.placeshapinginaction .introsection .blurtext .tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--pink) transparent transparent transparent;}
/* Bell button */
.placeshapinginaction .introsection .blurtext .latestbutton {display: flex; align-items: center; justify-content: center; padding: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: var(--white); transition: transform 0.3s ease;}

/* Bell animation */
/* Trigger bell animation on page load */
.placeshapinginaction .introsection .blurtext .latestbutton {animation: jiggle 0.3s ease-in-out 3;}
.placeshapinginaction .introsection .blurtext .latestbutton::before {content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid var(--pink); border-radius: 50%; animation: soundWave 1.5s ease-out 3; animation-fill-mode: forwards;}
.placeshapinginaction .introsection .blurtext .latestbutton::after {content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--pink); border-radius: 50%; animation: soundWave 1.5s ease-out 0.3s 3; animation-fill-mode: forwards;}
/* Trigger bell animation on hover */
.placeshapinginaction .introsection .blurtext .latestbutton:hover {animation: jiggle 0.3s ease-in-out infinite;}
.placeshapinginaction .introsection .blurtext .latestbutton:hover::before {content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid var(--pink); border-radius: 50%; animation: soundWave 1.5s ease-out infinite; pointer-events: none;}
.placeshapinginaction .introsection .blurtext .latestbutton:hover::after {content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--pink); border-radius: 50%; animation: soundWave 1.5s ease-out 0.3s infinite; pointer-events: none;}

@keyframes soundWave {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes jiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
/* END: Bell animation */

/* Tooltip animation */
/* Show tooltip on page load for 3 seconds */
.placeshapinginaction .introsection .blurtext .tooltip .tooltiptext {visibility: visible; opacity: 1; animation: fadeInOut 3s ease-in-out forwards;}
/* Show tooltip on hover */
.placeshapinginaction .introsection .blurtext .latestbutton:hover + .tooltip .tooltiptext {visibility: visible !important; opacity: 1 !important; transition: opacity 0.3s ease-in-out;}
  
@keyframes fadeInOut {
  0% { opacity: 0; visibility: hidden; }
  10% { opacity: 1; visibility: visible; }
  90% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
/* END: Tooltip animation */

.placeshapinginaction .imageslider-wrap {position: relative;}
.placeshapinginaction .introsectionwrap {overflow: hidden; position: relative;}
.placeshapinginaction .intro {max-width: 900px; width: 100%; margin: 0 auto; text-align: center}
.placeshapinginaction .introsectionwrap:before {position: absolute; content: ""; bottom: 0; left: 0; display: block; background: url(../images/svgs/member-overlay.svg) no-repeat bottom; background-size: 100%; width: 100%; height: 100%; visibility: visible;}
.placeshapinginaction .learnmore-boxes .box:nth-child(even) {grid-template-columns: 1.5fr 1fr;}
.placeshapinginaction .learnmore-boxes .box:nth-child(even) .text {grid-column: 1}
.placeshapinginaction .learnmore-boxes .box:nth-child(even) .image {grid-column: 2}

[data-type="previewmode"] .placeshapinginaction .title-banner .image {z-index: 2;}
[data-type="previewmode"] .placeshapinginaction .title-banner .image .editable {min-height: 100%}

.partnerlogos {display: flex; align-items: center; align-content: center; justify-content: center; padding: 0 0 20px 0; border-bottom: 1px solid #cccccc}
.partnerlogos .image {width: 25%; display: flex; align-items: center; align-content: center; justify-content: center; padding-block: 20px;}
.partnerlogos .image img {max-width: 80%; margin: 0 auto; max-height: 140px;}

.lessonswindow {max-width: 1080px!important; width: 100%!important; max-height: 95vh; overflow-y: auto;}

.partnerswindow {max-width: 800px!important; width: 100%!important; background: var(--white)!important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.partnerswindow img {margin: 0 auto 20px;}
.partnerswindow .quote {font-size: 110%; margin: 20px 0; padding: 0 20px}
.partnerswindow .quote:before, .partnerswindow .quote:after {font-size: 400%;}
.quote:before {top: 5px}
.quote:after {bottom: -40px}

.moreinfowindow {max-width: 800px!important; width: 100%!important; max-height: 90vh!important;}

.timescalessection {overflow: hidden}
.timescalepopupwindow {max-width: 800px!important; width: 100%!important}
.timescales {padding: 90px 0; max-width: 100%;}
.timescales h2, .timescales .slide {text-align: center;}
.timescales .sliderwrap {margin: 30px auto; position: relative;}
.timescales .slider {padding: 0 80px; max-width: var(--container); z-index: 10; margin: 0 auto; z-index: 1;}
.timescales .sliderwrap:before {width: 100%; height: 1px; background: var(--purple); display: block; content: ""; position: absolute; top: 30px; left: 0;}
.timescales .slide {padding: 0 30px;}
.timescales .slide .icon {margin: 0 auto 30px auto; width: 60px; height: 60px; border-radius: 50%; padding: 0!important; background: #6b738d; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; color: var(--white); font-size: 1.7rem;}
.timescales .slide h3 {font-size: 1.3rem; color: #ccd0de; margin: 0 0 5px 0;}
.timescales .slide p {color: #ccd0de}
.timescales .slick-list {overflow: visible!important}
.timescales .slick-list .slick-slide * {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.timescales .slick-list .slick-slide.slick-active .icon {background: var(--darkblue); color: var(--white)}
.timescales .slick-list .slick-slide.slick-active h3, .timescales .slick-list .slick-slide.slick-active p {color: var(--darkblue)}
.timescales .slick-dots {display: flex; margin: 40px 0 0 0; padding: 0; align-items: center; align-content: center; justify-content: center; gap: 5px}
.timescales .slick-dots li {list-style: none; width: 15px; height: 15px;}
.timescales .slick-dots li button {width: 15px; height: 15px; background: #000000; opacity: 0.3; border-radius: 50%; outline: none; border: none; cursor: pointer; text-indent: -99999px; padding: 0; margin: 0;}
.timescales .slick-dots li:hover button, .timescales .slick-dots li.slick-active button {background: var(--pink); opacity: 1;}
.timescales .slick-next, .timescales .slick-prev {font-size: 2rem; color: var(--pink); text-decoration: none; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 20;}
.timescales .slick-next {right: 0; left: auto;}
.timescales .slick-disabled {display: none!important}

.timescales .slide[data-status="active"] .icon {background: var(--pink);}
.timescales .slide[data-status="active"] h3 {font-size: 2.25rem;}
.timescales .slick-list .slick-slide.slick-active .slide[data-status="active"] .icon {background: var(--pink);}

.learnmore-boxes .box .image .overlaytext {width: 100px; height: 100px; display: flex; border-radius: 50%; text-align: center; align-items: center; align-content: center; justify-content: center; background: var(--pink); color: var(--white); font-size: 1.4rem; line-height: 1.1; position: absolute; bottom: 0; right: 0; z-index: 10; padding: 0;}

/* annual review advent calendar house */
.annual-review {background: linear-gradient(to bottom, #e9feff, #c0e9fd); position: relative; z-index: 2;}
.annual-review::after {content: ""; display: block; background: linear-gradient(to bottom, #c7e94e, #cde086); position: absolute; width: 100%; height: 160px; visibility: visible; bottom: 0; left: 0; z-index: -1; border-top: 5px solid var(--darkblue);}
.annual-review > .scroll-down {font-size: 3rem; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); z-index: 10; animation: scrollDownFloat 3s ease-in-out infinite;}
.annual-review-house {position: relative;}
.annual-review-house::before {content: ""; display: block; width: calc( 100% + 160px ); left: -80px; height: auto; aspect-ratio: 1600/337; background: url(../images/Roof.png) no-repeat center; background-size: 100%; position: relative; margin: 0 0 -5px;}
.annual-review-house-section {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; background: #fff0f0; padding: 40px 40px; margin: 0; list-style-type: none; border: 5px solid var(--darkblue); border-bottom: none;}
.annual-review-house-section > * {min-width: 0; min-height: 0;}
.annual-review-house-section::after {display: none;}
.annual-review-house-section h3 {color: var(--color); font-family: var(--fontTitle); grid-column: 1/-1; margin: 0 0 -20px; text-align: center; font-size: 180%; font-weight: 400;}
.annual-review-house-section.level-two {background: #eefffc; --color: #4ab8aa;}
.annual-review-house-section.level-three {background: #fcf0e8; --color: #ea7010;}
.annual-review-house-section.level-four {background: #fff0f0; --color: #d91d15; border-bottom: 5px solid var(--darkblue);}
.annual-review-house-section.level-one {background: #ffffff; --color: #e41e93}
.annual-review-house-section .blockbutton {margin: 0;}
.annual-review-house-section .blockbutton a {background: var(--color); border: 1px solid var(--color); font-family: var(--fontTitle); font-weight: 400;}
.annual-review-house-section .blockbutton a:hover {background: var(--white); color: var(--color); }
/* CW commented out as per 07/05/25 #16449086 */
/* .annual-review-house-section.level-four .annual-review-box {margin: 0 0 40px 0;}
.annual-review-house-section.level-four .annual-review-box.a1 {margin: 0; display: flex; flex-direction: column; height: 100%; border: 5px solid #d91d15; border-bottom: 0;}
.annual-review-house-section.level-four .annual-review-box.a1 .text {height: 100%;display: flex; flex-direction: column; justify-content: center;}
.annual-review-house-section.level-four .annual-review-box.a1 .image {margin: 0; width: 100%; max-width: 100%; border: none} */
.annual-review-box {position: relative; display: flex; flex-direction: column; gap: 0;}
.annual-review-box .image {position: relative; background: var(--color); border: 5px solid var(--color); max-width: calc( 100% - 40px); margin: 0 auto; display: flex; flex-direction: column; aspect-ratio: 370/382;}
.annual-review-box .image::after, .annual-review-box .image *::after  {display: none;}
/* .annual-review-box .image > * {grid-column: 1; grid-row: 1;} */
.annual-review-box .image img {width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; min-height: 0;}
.annual-review-box .image .name-tag {max-width: 100%; padding: 10px; background: var(--color); color: var(--white); text-align: center; min-height: 100px;}
.annual-review-box .image .name-tag p {margin: 0; font-size: 0.9rem;}
.annual-review-box .image .name-tag .name {font-family: var(--fontTitle); font-weight: 400;}
.annual-review-box .text {padding: 15px 20px; background: var(--purple); text-align: center; color: var(--white); display: flex; flex-direction: column; gap: 0; flex-grow: 1;}
.annual-review-box .text .heading {font-size: 1.3rem; margin: 0 0 5px; font-family: var(--fontTitle); font-weight: 400;}
.annual-review-box .text p {line-height: 1.2}
.annual-review-box .text .blockbutton {margin-top: auto;}

.annual-review-box.selected {--color: var(--darkblue);}
.annual-review-box.selected .image {border-color: var(--darkblue); border-bottom: none;}
.annual-review-box.selected .text {border: 5px solid var(--darkblue); background: var(--white); color: var(--black)}

.annual-popup {display: none; max-height: 95vh; overflow-y: auto;}
.annual-popup .container {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: center; max-width: var(--container);}
.annual-popup .container::after {display: none;}
.annual-popup iframe {width: 100%; height: auto; aspect-ratio: 560/315;}

/* Alternating Feature Section */
.alternatingfeature .block {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: center; justify-content: center;}

.alternatingfeature .block .image, .alternatingfeature .block .inner-text {position: relative; z-index: 1; overflow: visible;}
.alternatingfeature .block .image:before {position: absolute; z-index: 2; display: block; content: ""; background: url(../images/svgs/confetti-image-wrap.svg); top: -20px; left: 0; width: 130%; height: 110%; background-size: contain; background-repeat: no-repeat; opacity: 0.8;}
.alternatingfeature .block .inner-text:before {position: absolute; z-index: -1; display: block; content: ""; background: url(../images/svgs/confetti-wrap1.svg); top: -100px; left: -50px; width: 300px; height: 150px; background-size: cover; background-repeat: no-repeat; opacity: 0.2;}
.alternatingfeature .block .inner-text:after {position: absolute; z-index: 2; display: block; content: ""; background: url(../images/svgs/confetti-wrap2.svg); bottom: -100px; right: 50px; width: 300px; height: 200px; background-size: cover; background-repeat: no-repeat; opacity: 0.15; visibility: visible;}

/* https://codepen.io/bousahla-mounir/pen/MWprxMN */
.interactivecards::after, .interactivecards *::after {display: none;}
.interactivecards {display: grid; gap: 20px; padding-block: 40px; position: relative;}
.interactivecards.grid-halves {grid-template-columns: repeat(2, 1fr); gap: 40px;}
.interactivecards.grid-thirds {grid-template-columns: repeat(3, 1fr);}
.interactivecards.grid-quarters {grid-template-columns: repeat(4, 1fr);}
.interactivecards .cards-intro {grid-column: 1/-1;}
.interactivecards .card {display: grid; cursor: pointer;}
.interactivecards .card > * {grid-column-start: 1; grid-row-start: 1; height: 100%;}
.interactivecards .card .front {transform: perspective(1000px) rotateY(0deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; background: var(--white); border: 5px solid var(--color, var(--orange)); border-radius: 20px; position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; overflow: hidden; height: 100%;}
.interactivecards .card .front .image {max-height: max-content; width: 100%; height: 100%;}
.interactivecards .card .front .text {padding: 20px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1;}
.interactivecards .card .back {-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; background: var(--color, var(--orange)); transition: all 0.4s ease; border-radius: 20px; opacity: 0; overflow: hidden; transform: translateY(20px);}
.interactivecards .card .back .inner {display: flex; flex-direction: column; gap: 0; align-items: center; height: 100%; justify-content: center;}
.interactivecards .card .back .text {padding: 30px; display: flex; flex-direction: column; gap: 5px;}
.interactivecards .card .back .image {width: 100%; height: 100%;}
.interactivecards .card .image img, .interactivecards .card .image picture {width: 100%; height: 100%; object-fit: cover;}

.interactivecards .card:hover .front {transform: translateY(20px); opacity: 0;}
.interactivecards .card:hover .back {position: relative; z-index: 2; opacity: 1; transform: translateY(0);}
.interactivecards .card h3 {font-family: var(--fontTitle); font-weight: 400;}
.interactivecards .card .front h3 {text-align: center; color: var(--color, var(--orange)); font-size: 1.75rem; line-height: 1.2;}
.interactivecards .card .front .flip-arrow {text-transform: uppercase; text-align: center; margin: auto 0 0; color: var(--color, var(--orange));}
.interactivecards .card .back h3 {margin: 0; color: var(--white); font-size: 1.5rem;}
.interactivecards .card .back p {margin: 0; color: var(--white); font-size: 1.25rem; align-self: center;}
.interactivecards .card .back .arrowbutton {margin-top: auto;}
.interactivecards .card .back .arrowbutton a {color: var(--white);}

.interactivecards .card:nth-child(2), .interactivecards .card:nth-child(2):last-child {--color: var(--red);}
.interactivecards .card:nth-child(3) {--color: var(--pink);}
.interactivecards .card:last-child {--color: var(--midblue);}

.interactivehover {display: grid; align-items: center; grid-template-columns: 1fr 4fr; margin: 0 0 40px;}
.interactivehover:after, .interactivehover *:after {display: none;}
.interactivehover .image .block {width: calc(100% + 150px); margin-left: -150px; justify-items: end;}
.interactivehover .image {display: grid;}
.interactivehover .image img {width: 100%; min-height: 100%; object-fit: cover; border-radius: 0!important;}
.interactivehover .image .block {display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden;}
.interactivehover .image .block.hide {display: none;}
.interactivehover .image .overlay {display: flex; background: var(--darkblue); height: 100%; padding: 50px 40px; flex-direction: column;}
.interactivehover .image .overlay p, .interactivehover .image .overlay li, .interactivehover .image .overlay a {color: var(--white);}
.interactivehover .image .overlay a {text-decoration: underline;}
.interactivehover .image .overlay h3 {color: var(--white); font-size: 2.4rem; margin: 0 0 10px 0;}
.interactivehover .image .overlay p.blockbutton {margin-top: auto;}
.interactivehover .image .overlay p.blockbutton a {background: var(--white); color: var(--pink); text-decoration: none;}
.interactivehover .image .overlay p.blockbutton a:hover {background: #aacff9; color: var(--darkblue);}
.interactivehover .image .overlay p.arrowbutton a {text-decoration: none;}
.interactivehover .hoverlinks {padding: 0; background: var(--darkblue); margin: 0; position: relative; z-index: 2; border-radius: 15px; overflow: hidden;}
.interactivehover .hoverlinks li {list-style: none; font-size: 1.3rem; padding: 0; margin: 0; font-weight: var(--fontweight-700);}
.interactivehover .hoverlinks li:before {display: none;}
.interactivehover .hoverlinks li a {color: var(--white); text-decoration: none; padding: 15px 15px 15px 20px; display: block; position: relative;}
.interactivehover .hoverlinks li a:before {width: 6px; background: var(--darkblue); display: none; content: ""; height: 100%; position: absolute; top: 0; left: 0;}
.interactivehover .hoverlinks li:hover a, .interactivehover .hoverlinks li.selected a {background: var(--pink);}
.interactivehover .hoverlinks li:hover a:before, .interactivehover .hoverlinks li.selected a:before {display: block;}

.objective-buttons {display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 20px 0 0; padding: 0;}
.objective-buttons:after, .objective-buttons *:after {display: none;}
.objective-buttons li {display: block; margin: 0; padding: 0;}
.objective-buttons li a {display: block; text-align: center; padding: 10px 20px; border-radius: 100vh; background: var(--darkblue); color: var(--white); font-family: var(--fontTitle); font-size: 1.2rem; font-weight: 400;}
.objective-buttons li:nth-child(2) a {background: var(--purple);}
.objective-buttons li:nth-child(3) a {background: var(--pink);}

.home-signposting {background: var(--darkblue); display: grid; grid-template-columns: minmax(40px, 1fr) minmax(auto, calc(var(--container) / 2)) minmax(auto, calc(var(--container) / 2)) minmax(40px, 1fr); position: relative;}
.home-signposting > * {min-width: 0; min-height: 0; grid-row: 1;}
.home-signposting:after, .home-signposting *:after {display: none;}
/* .home-signposting .signposting-boxes {display: flex; gap: 20px; flex-wrap: wrap; grid-column: 2/3; padding: 120px 40px 120px 0; align-self: center; position: relative; z-index: 2;}
.home-signposting .signposting-boxes .box {display: flex; padding: 60px 20px; align-items: center; justify-content: center; text-align: center; background: var(--pink); flex: 1 0 25%;  border-radius: 20px;}
.home-signposting .signposting-boxes .box p {margin: 0; padding: 0; font-size: 1.25em; font-family: var(--fontTitle); color: var(--white); font-weight: 400;} */
.home-signposting .signposting-intro {grid-column: 3/4; padding: 80px 0 80px 20px; display: flex; flex-direction: column; justify-content: center; position: relative;}
.home-signposting .signposting-intro:before {content: ""; display: block; width: 150px; height: 100%; background: url(../images/svgs/homecurve.svg) no-repeat center; background-size: 100%; position: absolute; top: 0; left: -150px;}
.home-signposting .signposting-intro * {color: var(--white);}
.home-signposting .image {grid-column: 1/3; width: 100%; height: 100%; object-fit: cover;}
.home-signposting .arrowbutton a {color: var(--white);}
.home-signposting .arrowbutton a:hover {color: var(--lightblue);}

.rotating-text {display: flex; flex-direction: column; padding: 10px 0 120px;}
.rotating-text p {display: inline-flex; margin: 0; vertical-align: top; font-weight: 700; line-height: 1;}
.rotating-text p .word {position: absolute; display: flex; opacity: 0; font-weight: 700; font-size: 3rem;}
.rotating-text p .word .letter {transform-origin: center center 25px; color: var(--color, var(--turquoise));}
.rotating-text p .word .letter.out {transform: rotateX(90deg); transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);}
.rotating-text p .word .letter.in {transition: 0.38s ease;}
.rotating-text p .word .letter.behind {transform: rotateX(-90deg);}

.rotating-text p .word:nth-of-type(1) {--color: var(--turquoise);}
.rotating-text p .word:nth-of-type(2) {--color: var(--orange);}
.rotating-text p .word:nth-of-type(3) {--color: var(--lightblue);}
.rotating-text p .word:nth-of-type(4) {--color: var(--pink);}
.rotating-text p .word:nth-of-type(5) {--color: var(--turquoise);}

/* Placeshaping Learning Hub */
.learninghub {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.learninghub .noshow {grid-column: 1/-1; display: none; margin: 0;}

.key a[data-filter="physical"] {--color: var(--purple);}
.key a[data-filter="social"] {--color: var(--pink);}
.key a[data-filter="economic"] {--color: var(--orange);}

.learning-box {display: flex; flex-direction: column; gap: 0;}
.learning-box[data-theme="physical"] {--color: var(--purple);}
.learning-box[data-theme="social"] {--color: var(--pink);}
.learning-box[data-theme="economic"] {--color: var(--orange);}

.learning-box .image {overflow: hidden; border-radius: 20px 20px 0 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;}
.learning-box .image > * {grid-column: 1; grid-row: 1;}
.learning-box .image img {transition: all 0.4s ease; width: 100%;}
.learning-box:hover .image img {transform: scale(1.1); opacity: 0.8;}
.learning-box .image i {color: var(--color, var(--darkblue)); font-size: 4rem; justify-self: center; align-self: center; z-index: 2; opacity: 0; transition: all 0.4s ease;}
.learning-box:hover .image i {opacity: 1;}
.learning-box .text {padding: 20px; border-radius: 0 0 20px 20px; background: linear-gradient(to bottom, var(--color, var(--darkblue)) 50%, var(--white) 50%); background-size: 200% 200%; background-position: bottom; color: var(--color, var(--darkblue)); display: flex; flex-direction: column; border: 2px solid var(--color, var(--darkblue)); transition: all 0.4s ease; flex-grow: 1;}
.learning-box .text .heading {font-size: 1.25rem; font-family: var(--fontTitle); margin: 0 0;}
.learning-box .text a {color: var(--color, var(--darkblue)); margin-top: auto;}
.learning-box .text i {transition: all 0.4s ease;}
.learning-box .text a:hover i {transform: translateX(5px);}
.learning-box:hover .text {color: var(--white); background-position: top;}
.learning-box:hover .text a {color: var(--white);}

/* FOR PREVIEW */
.home-signposting > .editable {grid-column: 3/4;}

/* EB */
.casestudypage .mainbanner {background: #3CBFAE; background: linear-gradient(180deg, rgba(60, 191, 174, 1) 59%, rgba(255, 255, 255, 1) 100%); padding: 0 0 40px 0; overflow: hidden}
.casestudypage .mainbanner .introsection {position: relative;}
.casestudypage .mainbanner .introsection .content {grid-template-columns: minmax(20px, 1fr) minmax(0, calc(1400px / 2)) minmax(0, calc(1400px / 2)) minmax(20px, 1fr); max-width: 100%; width: 100%; padding: 0; display: grid;}
.casestudypage .mainbanner .introsection:after {content: ""; display: block; width: 100%; height: 100%; visibility: visible; background: url(../images/svgs/casestudy-intro.svg) no-repeat 0 0; background-size: 100% 100%; z-index: 1; position: absolute; bottom: 0; left: 0;}
.casestudypage .mainbanner h1, .casestudypage .mainbanner p {color: var(--white)}
.casestudypage .mainbanner h1 {font-size: 3.9rem}
.casestudypage .mainbanner .subheading {font-size: 1.1rem; font-family: var(--fontTitle); padding: 0 0 5px 0; margin: 0; color: var(--turquoise)}
.casestudypage .mainbanner p {max-width: 80%}
.casestudypage .mainbanner .introtext {grid-column: 2; position:relative; z-index: 2; padding-block: 90px 140px; padding-right: 30px}
.casestudypage .imagefeature {-webkit-mask-image: url(../images/svgs/casestudy-image.svg); mask-image: url(../images/svgs/casestudy-image.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; height: 100%; background: #cccccc; position: relative; display: grid; z-index: 2; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column: 3 / -1; grid-row: 1; right: -30px; top: -30px}
.casestudypage .imagefeature > * {grid-column-start: 1; grid-row-start: 1;}
.casestudypage .imagefeature .overlay {display: flex; width: 100%; height: 100%; background: rgba(0,0,0,0.5); grid-row: 1; justify-content: center;}
.casestudypage .imagefeature .overlay span {color: var(--white); font-size: 1.6rem; align-self: center; font-family: var(--fontTitle); text-align: center;}
.casestudypage .imagefeature .overlay span i {display: block; font-size: 3rem; margin: 0 0 5px 0;}
.casestudypage .imagefeature img {width: 100%; min-height: 100%; object-fit: cover;}

.casestudypage .gridboxes {display: grid; margin-top: -110px; position: relative; z-index: 2;}
.casestudypage .gridboxes.grid-2 {grid-template-columns: repeat(2,1fr); gap: 40px}
.casestudypage .gridboxes.grid-1 {grid-template-columns: repeat(1,1fr); gap: 40px}
.casestudypage .gridboxes.grid-3 {grid-template-columns: repeat(3,1fr); gap: 20px;}
.casestudypage .gridboxes .box {border: 1px solid var(--light); border-radius: 20px; overflow: hidden; padding: 20px; background: var(--white); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.casestudypage .gridboxes .box img {width: 100%;}
.casestudypage .gridboxes .box .image {width: 100%; border-radius: 15px; overflow: hidden;}
.casestudypage .gridboxes .box .text {padding: 30px 20px 20px 20px}
.casestudypage .gridboxes .box .text h3 {font-family: var(--fontTitle); font-size: 1.6rem; margin: 0;}
.casestudypage .gridboxes .box .text h3 i {margin: 0 0 0 5px; font-size: 1.3rem}
.casestudypage .gridboxes .box {color: var(--darkblue); text-decoration: none;}
.casestudypage .gridboxes .box:hover {background: var(--pink); border-color: var(--pink);}
.casestudypage .gridboxes .box:hover .text h3 {color: var(--white)}
.casestudypage .gridboxes .box:hover .text p {color: var(--white)}

.casestudypage .maincontent {padding-block: 0 20px;}

/* FEATURED IMAGES */
.featured-images {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 20px 0;}
.featured-images::after, .featured-images *::after {display: none;}
.featured-images .square-link {display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1; background: var(--pink); color: var(--white); font-family: var(--fontTitle); font-size: 1.25rem; transition: all 0.4s ease;}
.featured-images .square-link:hover {background: var(--purple);}
.featured-images .square-link::after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; color: inherit; font-size: inherit; margin: 2px 0 0 3px; opacity: 0; transition: all 0.4s ease;}
.featured-images .square-link:hover::after {opacity: 1; margin-left: 6px;}

@media screen and (max-width: 1600px){
  #feeds .thirds {grid-auto-columns: 55%;}
}

@media screen and (max-width: 1350px){
  .casestudypage .mainbanner h1 {font-size: 3rem}
  .casestudypage .imagefeature .overlay span {font-size: 1.2rem}
}

@media screen and (max-width: 1280px){
  /* .nav ul {font-size: 80%;} */
  .banner-split, .banner-split .banner {grid-template-columns: repeat(2, 1fr);}

  .morestories {padding: 40px 20px 20px;}
  .related-stories {gap: 20px; grid-template-columns: repeat(4, 1fr);}
  .related-stories .newsstory:nth-of-type(5) {display: none;}

  #becomeamember .text {max-width: 75%; padding: 80px 100px;}
  #becomeamember.half-image .text {padding: 60px;}
  .cta-feature .text {padding: 80px 100px;}

  .resource-hub {gap: 20px;}

  .interactivecards.grid-quarters {grid-template-columns: repeat(2, 1fr);}
}

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

  .placeshapinginaction .content-halves.introsection {column-gap: 50px;}
  .placeshapinginaction .introsection .blurtext {padding: 30px;}

  /* .title-banner.style3 {grid-template-columns: repeat(5, 1fr);}
  .title-banner.style3 .text {grid-column: 1 / 5; z-index: 2; padding: 60px;}
  .title-banner.style3 .image {grid-column: 2 / 6} */
  .title-banner.style3 ~ .fullwidth .breadcrumb-wrap {margin-top: 0;}

  #feeds {grid-template-columns: repeat(4, 1fr);}
  #feeds .thirds {padding: 10px 20px 80px 20px;}
  .news-feature-image {grid-column: 1 / 3; grid-row: 1; height: calc(100% - 40px);}
  .news-feature-image img {height: 100%; object-fit: cover;}
  #feeds > div:last-child {grid-column: 2 / 5; grid-row: 1; z-index: 3;}
  #feeds h2 {padding: 40px 0 0 20px; color: var(--white);}

  .quicklinks ul {grid-template-columns: repeat(6, 1fr);}
  .quicklinks ul li {max-width: 300px; margin: 0 auto; width: 100%; grid-column: span 2;}
  .quicklinks ul li:nth-child(4) {grid-column: 2 / span 2;}
  .quicklinks ul li:nth-child(5) {grid-column: 4 / span 2;}

  .large-box .grid-thirds {grid-template-columns: 1fr; justify-items: center;}

  .default .feature-boxes {grid-template-columns: repeat(2, 1fr);}

  .annual-popup .container {grid-template-columns: 1fr; gap: 20px; max-width: 800px;}

  .annual-review-house-section {grid-template-columns: repeat(4, 1fr); gap: 20px;}
  .annual-review-box {grid-column: span 2;}
  .annual-review-box:nth-of-type(3) {grid-column: 2 / span 2;}
  /* .annual-review-house-section.level-four .annual-review-box.a1 {order: 1; grid-column: 2 / span 2;} */
  /* .annual-review-house-section.level-four .annual-review-box:nth-of-type(3) {grid-column: span 2;} */

  .casestudypage .mainbanner .introsection .content {grid-template-columns: repeat(1,1fr);}
  .casestudypage .mainbanner .introtext {grid-row: 1; grid-column: auto; padding: 40px 20px}
  .casestudypage .imagefeature {grid-column: auto; grid-row: 2;}
}

@media screen and (max-width: 1180px){
  .placeshapinginaction .introsectionwrap:before {opacity: 0.2;}
 
  .alternatingfeature .block {grid-template-columns: 1fr;}
  .alternatingfeature .block .inner-text {padding: 0 40px;}
  .alternatingfeature .block .inner-text:before {bottom: 0; left: 0;}
  .alternatingfeature .block .inner-text:after {bottom: 0; right: 0;}
  .alternatingfeature .block .image img {margin: 0 auto;}
  .alternatingfeature .block .image:before {background-size: 100% 100%; transform: translateX(-100px);}

  .home-signposting .signposting-intro::before {display: none;}
  .home-signposting .signposting-intro {padding-inline: 40px 0;}
}

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

  .mainheader .left {max-width: 300px;}

  .col4 {width: 49%; margin: 0;}
  .col4:nth-child(even) {margin: 0 0 0 2%;}

  .memberevents .feed .story {width: 32%;}
  .memberevents .slick-slide {max-width: 33%; margin: 0 20px 0 0;}

  .newsv2 > div {grid-template-columns: repeat(3, 1fr);}
  .newsv2 .latest .newsstory:first-of-type {grid-column: 1 / -1;}

  .newsv2 > div:not(.latest) .newsstory:nth-of-type(4) {display: none;}

  .resource-hub {grid-template-columns: repeat(3, 1fr);}

  #becomeamember.half-image, .homepage #becomeamember.half-image {grid-template-columns: 1fr; grid-template-rows: unset;}
  #becomeamember.half-image img, #becomeamember.half-image .text {grid-column: 1;}
  #becomeamember.half-image .text {grid-row: 2;}
  .homepage #becomeamember.half-image .text {clip-path: none;}

  .news-rightcolumn {grid-template-columns: 1fr;}
  .news-rightcolumn aside {border: none; border-top: 1px solid var(--light); margin: 20px 0 0; padding: 20px 0 0;}
  .news-rightcolumn aside .sticky-container {position: relative; top: unset;}
  .news-features {display: grid; grid-template-columns: repeat(3, 1fr);}

  .interactivecards.grid-thirds {grid-template-columns: repeat(4, 1fr);}
  .interactivecards.grid-thirds .card {grid-column: span 2;}
  .interactivecards.grid-thirds .card:last-child {grid-column: 2/span 2;}

  .eventsfeed .key > p {width: 100%;}

  .learninghub {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 985px){
  .mainheader .left {bottom: -5px;}

  .post-feature .content {padding: 40px 20px 20px;}
  .post-feature .title-feature {font-size: 130%; max-width: 40%; padding: 20px;}

  .particle-container .content {grid-template-columns: repeat(2, 1fr);}
  .particle-container #circle {grid-column: 1;}
  .particle-container a.box:nth-of-type(1), .particle-container div.box:nth-of-type(2) {grid-column: 2;}
  .particle-container a.box:nth-of-type(2), .particle-container div.box:nth-of-type(3) {grid-column: 2;}
  .particle-container .box p {opacity: 1; transform: none;}
  
  .content.learnmore {overflow-x: hidden;}
  .learnmore-boxes .box, .learnmore-boxes .box:nth-of-type(even) {grid-template-columns: repeat(2, 1fr);}

  .cta-feature {grid-template-columns: repeat(2, 1fr);}

  .row .page-buttons {flex-direction: column;}

  .gridnav.vertical-stacked li a {grid-template-columns: 1fr;}
  .gridnav.vertical-stacked li a .text {padding: 20px;}

}

@media screen and (max-width: 900px){
  .video-feature.multiple {grid-template-columns: 1fr;}

  #becomeamember, .cta-feature {grid-template-rows: auto 1fr 60px;}
  #becomeamember picture, #becomeamember img, .cta-feature picture, .cta-feature img {grid-row: 1 / 3;}
  #becomeamember .text {clip-path: none; max-width: 100%; padding: 60px; grid-row: 2 / 4;}
  .cta-feature .text {grid-row: 2 / 4; margin-top: 0; padding: 60px;}
  .cta-feature .text:before {display: none;}

  .casestudies-grid {grid-template-columns: repeat(2, 1fr);}
  .casestudies-grid .casestudy.feature {grid-template-columns: repeat(2, 1fr);}
  .casestudies-grid .casestudy.feature .image {grid-column: span 1;}
  .resource-downloads {gap: 20px;}

  .toggle-features .feature-buttons {flex-wrap: wrap; padding: 0 0 10px; margin: 0 0 10px; border-width: 1px;}
  .feature-buttons .blockbutton a {border-radius: 5px; background: var(--dark);}

  .learnmore-boxes {display: flex; flex-direction: column; gap: 40px; margin: 0 0 60px;}
  .learnmore-boxes .box.lower-set .image {max-width: unset; margin: 0 auto;}
}

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

  .mainheader .right {display: contents;}
  .mainheader.content {flex-wrap: wrap; align-items: center;}
  .mainheader .nav {width: 100%;}
  .mainheader .search {margin-left: auto;}
  .header a.logo:after {display: none;}
  ul.navigation {max-width: 100%; justify-content: center;}

  .banner-split, .banner-split .banner {display: flex; flex-direction: column;}
  .banner-split .banner-select {grid-column: 1; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
  .banner-split .banner .container {padding: 40px 20px 120px; flex-grow: 1;}
  .banner-split .container .heading {font-size: 220%;}
  .banner-split .container p {font-size: 170%;}
  .banner-split .container .above {font-size: 150%;}
  .banner-split .banners .image {height: auto;}
  .banner-split .banners .image a {height: auto;}
  .banner-split .banner img {height: auto;}

  .newsfeed.storyfeed.home .newsstory {flex-direction: row; gap: 10px;}
  .newsfeed.storyfeed.home .image {margin: 0;}
  .newsfeed.storyfeed.home .text {justify-content: center;}
  .newsfeed.storyfeed.home .newsstory .text .readmore {margin: 0;}

  .resource-downloads {grid-template-columns: 1fr;}
  .resource-downloads .block {padding: 40px 20px;}
  .resource-downloads .block .images {grid-template-columns: repeat(3, 1fr);}

  .fullwidth .feature-boxes {grid-template-columns: repeat(2, 1fr);}

  .interactivecards.grid-halves, .interactivecards.grid-thirds, .interactivecards.grid-quarters {grid-template-columns: 1fr; grid-auto-rows: 1fr;}
  .interactivecards.grid-thirds .card:last-child {grid-column: auto;}
  .interactivecards .card .front, .interactivecards .card .back .inner {display: grid; grid-template-columns: repeat(2, 1fr);}
  .interactivecards {column-gap: 0;}
  .interactivecards .card .front img {width: 100%; height: 100%; object-fit: cover;}
  .interactivecards .card .front h3 {margin: auto 0;}

  .interactivehover {position: relative; grid-template-columns: repeat(1, 1fr);}
  .interactivehover .image .block {grid-template-columns: repeat(1, 1fr); margin-left: 0; width: 100%;}
  .interactivehover .image .overlay {width: 100%;}
  .interactivehover .hoverlinks {justify-content: center; display: flex; background: none; position: absolute; top: 20px; left: 20px; gap: 10px; z-index: 5; width: calc(100% - 40px); border-radius: 0!important; flex-wrap: wrap;}
  .interactivehover .hoverlinks li {text-align: center; font-size: 0.9rem;}
  .interactivehover .hoverlinks li a {background: var(--white); color: var(--darkblue); font-weight: 700;}
  .interactivehover .hoverlinks li.selected a {color: var(--white);}

  .featured-images {gap: 20px;}
}

@media screen and (max-width: 800px){
  #feeds .thirds {grid-auto-columns: 85%;}

  .resource-hub a p {font-size: 100%;}

  .casestudypage .gridboxes, .casestudypage .gridboxes.grid-2, .casestudypage .gridboxes.grid-3 {grid-template-columns: repeat(1,1fr);}

  .annual-review-house-section {grid-template-columns: 1fr; }
  .annual-review-box, .annual-review-box:nth-of-type(3), .annual-review-house-section.level-four .annual-review-box.a1, .annual-review-house-section.level-four .annual-review-box:nth-of-type(3)  {grid-column: auto}
  .annual-review-box .image {aspect-ratio: unset;}
}

@media screen and (max-width: 768px){
  .header {position: relative; height: auto;}
  .buffer {display: none;}
  .mobile-header-wrap {display: block;}
  .mobile-header .left {bottom: 0;}
  .header a.logo:after {display: none;}
  .header .mainheader {display: none;}
  .headerstrap {position: relative; top: auto; right: auto; left: auto; background: var(--darkblue);}
  .headerstrap .content {justify-content: center;}
  .headerstrap .content a {background: none; transition: none; color: var(--white);}
  .headerstrap .socials {color: var(--white)!important;}
  .headerstrap .socials.twitter img {filter: invert(1);}
  .headerstrap .content a:hover, .headerstrap .content a:focus {transform: none; background: var(--lightblue);}
  .headerstrap p.blockbutton a {color: var(--darkblue);}
  .header-links {margin-left: 0;}

  .particle-container .content {grid-template-columns: 1fr;}
  .particle-container #circle {grid-row: 1; max-width: 300px;}
  .particle-container a.box:nth-of-type(1), .particle-container div.box:nth-of-type(2) {grid-column: 1; grid-row: auto;}
  .particle-container a.box:nth-of-type(2), .particle-container div.box:nth-of-type(3) {grid-column: 1; grid-row: auto;}
  .particle-container a.box:nth-of-type(3), .particle-container div.box:nth-of-type(4) {grid-column: 1; grid-row: auto;}

  #feeds > div:last-child {grid-column: 1 / -1;}
  .news-feature-image {grid-column: 1 / 4;}
  .news-feature-image:before {display: none;}
  #feeds .thirds {margin-left: 20px;}
  #feeds h2 {padding: 60px 0 0 40px; font-size: 2rem;}

  #features {background-size: 150%;}
  #features .content {padding: 40px 20px;}
  #features .left {width: 100%; margin: 20px 0;}
  #features .right {position: relative; top: auto; background: var(--orange); width: 100%;}
  #features .right .container {width: 100%; float: none; padding: 0 20%;}
  #features .featurelist ul {columns: 1;}
  #features .featurelist li {width: 33%; display: inline-block; vertical-align: top;}
  #features .featurelist li .text p {display: none;}
  #features .featurelist li .circle, #features .featurelist li .text {width: 100%; padding: 0 20px; display: block;}
  #features .featurelist li .circle {margin: 0 0 20px 0;}

  /* #becomeamember .right {width: 70%;} */
  #stories .left, #latestnews .right {width: 100%; float: none;}
  #stories .right, #latestnews .left {width: 50%; float: none; margin: 0 auto;}
  #latestnews .right {padding: 0;}

  #twitter .left, #twitter .right {width: 100%; display: block;}

  .casestudies-grid {grid-template-columns: 1fr;}
  .casestudies-grid .casestudy {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
  .casestudies-grid .casestudy img {height: 100%; object-fit: cover;}

  .title {margin: 0;}

  .gridnav li {width: 42%;}
  .p44 .gridnav li {width: 30%;}
  .p44 .gridnav li:nth-of-type(odd) {margin: 0 2% 0 18%;}
  .p44 .gridnav li:nth-of-type(even) {margin: 0 18% 0 2%;}

  .membernews .feed .story {width: 49%;}
  .membernews .slick-slide {max-width: 50%; margin: 0 20px 0 0;}

  .col2, .col3, .col4 {width: 100%; margin: 10px 0;}
  .col4:nth-child(even) {margin: 10px 0;}
  .col3 {width: 49%; margin: 0 0 0 2%;}
  .col3:nth-child(3) {width: 100%; margin: 0;}
  .col2:first-of-type {margin: 0 0 20px 0;}

  body {font-size: 100%;}
  h1 {font-size: 200%;}
  h2 {font-size: 180%;}
  h3 {font-size: 160%;}
  h4 {font-size: 140%;}
  h5 {font-size: 120%;}
  h6 {font-size: 110%;}
  .quote {padding: 0 0 0 30px;}

  .title-banner h1 {font-size: 2.75rem;}

  .purplebox:after {width: 225px; height: 225px;}
  .purplebox > div {width: calc(100% - 200px);}

  .content-halves {gap: 20px; flex-direction: column;}
  .content-halves > div {flex: initial; max-width: 100%; width: 100%;}
  .content-halves > div.blob {order: 1;}

  .related-stories {gap: 20px; grid-template-columns: repeat(3, 1fr);}
  .related-stories .newsstory:nth-of-type(4) {display: none;}

  .newsv2 > div {grid-template-columns: repeat(2, 1fr);}
  .newsv2 > div h2, .newsv2 > div h3 {text-align: center;}
  .newsv2 > div:not(.latest) {grid-template-columns: repeat(1, 1fr);}
  .newsv2 > div:not(.latest) .newsstory {display: grid; grid-template-columns: 120px 1fr; gap: 15px;}
  .newsv2 > div:not(.latest) .newsstory .image {margin: 0;}
  .newsv2 > div:not(.latest) .newsstory img {height: 100%; object-fit: cover;}

  .line {margin: 20px 0 30px;}

  .cta-feature {grid-template-columns: 40px 1fr;}

  .testimonial .t-quote {font-size: 140%;}

  .timescales {padding: 50px 0;}
  .imageslider {margin: 30px 0 0 0;}
  .placeshapinginaction .imageslider .slick-next, .placeshapinginaction .imageslider .slick-prev, .timescales .slick-next, .timescales .slick-prev {left: 25px; background: var(--white); border-radius: 50%; width: 40px; height: 40px; display: flex!important; justify-content: center; align-items: center; align-content: center; font-size: 1.4rem}
  .placeshapinginaction .imageslider .slick-next, .timescales .slick-next {right: 25px; left: auto;}
  .timescales .slider {padding: 0 55px;}
  .timescales .slide p {font-size: 0.9rem}

  .placeshapinginaction .introsection .blurtext {-webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; background: none;}

  .home-signposting {grid-template-columns: 1fr;}
  .home-signposting .signposting-intro, .home-signposting .image {grid-column: auto; grid-row: auto;}
  .home-signposting .signposting-intro {padding: 40px;}
  .rotating-text {padding: 10px 0 80px;}
}

@media screen and (max-width: 700px){
  .content {padding-block: 40px;}

  .title-banner {aspect-ratio: unset; background-size: cover;}
  .title-banner .image {width: 100%;}

  .main-stories-hub {gap: 20px;}

  .casestudypage .mainbanner h1 {font-size: 2rem}
  .casestudypage .mainbanner .subheading {font-size: 0.9rem}
  .casestudypage .mainbanner .introtext {background: var(--darkblue)}
  .casestudypage .imagefeature .overlay span {font-size: 1rem}
  .casestudypage .imagefeature {-webkit-mask-image: none; mask-image: none;}
  .casestudypage .imagefeature {margin-top: 0; right: 0; top: 0;}
  .casestudypage .gridboxes {margin-top: -80px}
  .casestudypage .gridboxes .box p {font-size: 0.9rem;}
  .casestudypage .gridboxes .box .text h3 {font-size: 1.3rem}
  .casestudypage .gridboxes .box .text {padding: 20px 0 0 0}
  .casestudypage .mainbanner p {max-width: 100%}

  .quicklinks ul {grid-template-columns: 1fr 1fr; gap: 20px;}
  .quicklinks ul li {grid-column: auto; max-width: 100%;}
  .quicklinks ul li:nth-child(4), .quicklinks ul li:nth-child(5) {grid-column: auto;}
  .quicklinks ul li a {aspect-ratio: unset;}
  .quicklinks ul li p {padding: 20px;}
  .quicklinks ul li img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2;}

  .learnmore-boxes .box, .learnmore-boxes .box:nth-of-type(even), .learnmore-boxes .box.lower-set, .placeshapinginaction .learnmore-boxes .box, .placeshapinginaction .learnmore-boxes .box:nth-child(2n) {grid-template-columns: 1fr; justify-items: center; gap: 60px;}

  .placeshapinginaction .learnmore-boxes .box .text {grid-column: 1; grid-row: 2}
  .placeshapinginaction .learnmore-boxes .box:nth-child(2n) .image {grid-column: 1; grid-row: 1;}

  .learnmore-boxes .box .image {grid-row: 1;}
  .learnmore-boxes .box:nth-of-type(even) .text {grid-column: auto;}

  .alt-learnmore {margin: 80px 0 0;}
  .alt-learnmore .box {grid-template-columns: 1fr;}
  .alt-learnmore .learnmore-boxes .box .image {grid-column: 1; grid-row: 1;}
  .alt-learnmore .box .text {grid-column: 1;}

  .resource-hub a p {padding: 20px;}
  .resource-downloads .block .images {grid-template-columns: repeat(2, 1fr);}

  .toggle-features .feature {padding: 40px 20px;}

  .news-features {grid-template-columns: repeat(2, 1fr);}

  .timescalepopupwindow p, .lessonswindow p, .moreinfowindow p {font-size: 0.9rem!important;}
  .timescalepopupwindow, .lessonswindow, .moreinfowindow {padding: 20px!important}

  .interactivecards.grid-halves, .interactivecards.grid-thirds, .interactivecards.grid-quarters {grid-auto-rows: unset;}
  .interactivecards .card .front, .interactivecards .card .back .inner {grid-template-columns: 1fr;}

  .eventsfeed .event {gap: 20px;}
}

@media screen and (max-width: 650px){
  .resource-hub {grid-template-columns: repeat(2, 1fr);}
  .resource-hub a p {font-size: 120%;}

  .resource-downloads .block .images {grid-template-columns: 1fr; gap: 10px;}
  .resource-downloads .images li {flex-direction: row; gap: 15px;}
  .resource-downloads .image img {max-width: 100px; max-height: 150px;}
  .resource-downloads .images li > p {flex-grow: 1;}
  .resource-downloads .images li > p img {display: none;}
  .resource-downloads a i {opacity: 1;}

  .bg-circle {background-size: 75%, 75%; background-position-x: -25%, 175%;}

  .post-feature {display: flex; flex-direction: column;}
  .post-feature .content {flex-direction: column; gap: 0; align-items: stretch; text-align: center; padding: 0 0 40px;}
  .post-feature .title-feature {max-width: 100%; width: 100%; border-radius: 0; background: var(--light); color: var(--black);}
  .post-feature .blockbutton a {width: 100%; border-radius: 0; font-size: 75%;}

  .interactivehover .hoverlinks {position: relative; top: unset; left: unset; width: 100%; margin: 0 0 20px;}
  .interactivehover .hoverlinks li a {background: var(--orange); color: var(--white);}
  .interactivehover .hoverlinks li.selected a {color: var(--white);}

  .learninghub {gap: 20px;}
  .key {margin: 0;}
} 

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

  .title-banner.style3 {grid-template-columns: 1fr 40px;}
  .title-banner.style3 .text {grid-column: 1; padding: 60px 40px;}
  .title-banner.style3 .image {grid-column: 1 / -1;}
  .title-banner.style3 .text:after {display: none;}
  .default .breadcrumb-wrap .content {padding: 40px 20px 20px!important;}

  .homenewsfeed .newsstory {width: 100%;}
  .homenewsfeed .newsstory:first-of-type {margin: 0 0 20px 0;}

  #features .featurelist li {width: 50%;}

  .snav {margin: 0 0 20px 0;}
  .snav ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .snav ul li {display: block; margin: 0;}
  .snav ul li.selected {width: 100%;}
  .snav ul li.selected li {width: 100%; display: block;}

  .p44 .gridnav li {width: 40%;}
  .p44 .gridnav li:nth-of-type(odd) {margin: 0 2% 0 8%;}
  .p44 .gridnav li:nth-of-type(even) {margin: 0 8% 0 2%;}

  .default .left, .default .right {width: 100%;}
  .news .left, .news .right {margin: 0 0 20px;}

  .membersfeed .member {width: 50%;}
  .member.collapse ul {display: none;}
  .collapse h1:after {content: "\f0de"; position: absolute; right: 10px; font-family: "Font Awesome 5 Free";}

  .housestats .square {padding: 20px;}
  .housestats .mainsquares .square, .housestats .secondlevelsquares .square, .housestats .thirdlevelsquares .square, .housestats .secondlevelsquares .square:nth-of-type(2) {width: 100%;}

  .newsfeed.storyfeed.home .newsstory {flex-direction: column; gap: 20px;}

  .purplebox:after {background: url(../images/svgs/purpleperson.svg) no-repeat top; width: 100%; height: 100%; background-position: right; background-size: cover;}
  .purplebox > div {width: 100%; z-index: 1;}
  .purplebox > div .quote {padding: 0;}

  .quote:before {left: -30px;}

  .casestudies-grid {grid-template-columns: repeat(1, 1fr);}
  .casestudies-grid .casestudy.feature {grid-template-columns: repeat(1, 1fr);}
  .casestudies-grid .casestudy.feature .text {padding: 0 20px 20px;}

  .casestudies-grid .casestudy {grid-template-columns: 120px 1fr;}

  .related-stories {grid-template-columns: repeat(1, 1fr);}
  .related-stories .newsstory {display: grid; grid-template-columns: 120px 1fr; gap: 15px; background: var(--white);}
  .related-stories .newsstory .image {margin: 0;}
  .related-stories .newsstory .image img {height: 100%; object-fit: cover;}

  .newsfeedmain {grid-template-columns: repeat(1, 1fr);}
  /* .newsfeedmain .newsstory {display: grid; grid-template-columns: 120px 1fr; gap: 15px;}
  .newsfeedmain .newsstory .image {margin: 0;}
  .newsfeedmain .newsstory img {height: 100%; object-fit: cover;} */

  .largetext {font-size: 1.5rem;}
  .largertext {font-size: 1.75rem;}

  .toggle-features .feature-buttons {flex-wrap: nowrap; flex-direction: column; align-items: stretch;}
  .feature-buttons .blockbutton a {width: 100%;}

  .news-features .box .desc {display: none;}

  .default .feature-boxes {grid-template-columns: 1fr;}

  #becomeamember.half-image .text {padding: 40px;}

  .gridnav.vertical-stacked ul {grid-template-columns: 1fr;}

  .learninghub {grid-template-columns: 1fr;}

  .featured-images {grid-template-columns: repeat(2, 1fr);}
  .featured-images img:nth-of-type(2) {display: none;}


}

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

  .headerstrap .content {flex-wrap: wrap;}
  .header-links {width: 100%; flex-wrap: wrap;}
  .header-links li {font-size: 0.9rem;}

  .banner-split .banner-select {position: relative; bottom: unset; left: unset; transform: none; width: 100%; background: var(--light); border-radius: 0;}
  .banner-select .selector {grid-template-columns: 40px;}
  .banner-split .banner .container {padding: 40px 20px;}
  .banner-select .slick-track {flex-wrap: wrap;}
  .banner-split .container .heading {font-size: 150%;}
  .banner-split .container p {font-size: 125%;}

  .gridnav li {width: 85%; margin: 0 0 20px 0; padding: 0;}

  .p44 .gridnav li {width: 100%; margin: 0 0 20px 0!important;}

  .memberevents .feed .story {width: 49%;}
  .memberevents .slick-slide {max-width: 50%; margin: 0 20px 0 0;}

  .boardmember {width: 45%;}
  .teammembers .boardmember:first-of-type, .boardmembers .boardmember:nth-of-type(2), .boardmembers .boardmember:first-of-type {margin: 0 5% 40px 0;}

  .form .labelneeded label {display: block!important; width: 100%;}
  .form .input label.file {min-width: 200px;}

  #features {background-size: 200%;}

  .casestudies-grid .casestudy {grid-template-columns: 1fr;}

  img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: block;}
  img.seecmsimageleft, img.seecmsimageleftundefined {display: block; float: none; margin: 0 0 20px!important;}
  img.seecmsimageright, img.seecmsimagerightundefined {display: block; float: none; margin: 0 0 20px!important;}

  .title-banner .content h1 {font-size: 2rem;}

  .main-stories-hub {grid-template-columns: repeat(1, 1fr);}
  .main-stories-hub .box:hover {background: none; transform: none; border-radius: 0;}
  .main-stories-hub .box .text {padding: 0;}
  .main-stories-hub .box:hover .text {padding: 0;}
  .main-stories-hub .box .readmore {opacity: 1; color: var(--lightblue);}

  .newsv2 > div {grid-template-columns: repeat(1, 1fr);}
  .newsv2 .latest .newsstory:not(:first-of-type) {display: grid; grid-template-columns: 120px 1fr; gap: 15px;}
  .newsv2 .latest .newsstory:not(:first-of-type) .image {margin: 0;}
  .newsv2 .latest .newsstory:not(:first-of-type) img {height: 100%; object-fit: cover;}
  .newsv2 .tags {margin: 0 0 10px;}

  .eventsfeed.pasteventsfeed .event {padding: 0 0 20px; border-bottom: 1px solid var(--lightblue);}
  .eventsfeed.pasteventsfeed .event .image {display: none;}
  .eventsfeed.pasteventsfeed .event .text {width: 100%;}

  .resource-hub {grid-template-columns: 1fr;}
  .quicklinks ul {grid-template-columns: 1fr;}

  .bg-circle {background: none;}

  h1 {font-size: 175%;}
  h2 {font-size: 150%;}
  h3 {font-size: 125%;}
  h4 {font-size: 120%;}
  h5 {font-size: 110%;}
  h6 {font-size: 105%;}

  .news-features {grid-template-columns: 1fr;}

  .fullwidth .feature-boxes {grid-template-columns: 1fr;}

  .eventsfeed .event {display: flex; flex-direction: column;}
  .eventsfeed .event .text {text-align: center;}
}

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

  .mobile-header .left {width: 90%;}
  .mobile-header a.logo {margin: 0; max-width: 85%;}
  .mobile-header .nav-icon span {height: 2px;}
  .mobile-header .nav-icon span:nth-child(2) {top: 5px;}
  .mobile-header .nav-icon span:nth-child(3) {top: 10px;}
  .mobile-header .nav-icon span:nth-child(4) {top: 15px;}

  .mobile-nav ul li a {padding: 10px 35px;}

  .mobile-nav ul li .expand {cursor: pointer; -webkit-user-select:none; user-select: none;}

  #features .featurelist li {width: 100%; margin: 0 0 10px 0;}
  #features .featurelist li .circle {width: 30%; display: inline-block; vertical-align: middle;}
  #features .featurelist li .text {width: 70%; display: inline-block; vertical-align: middle;}

  .news-feature-image {grid-column: 1 / -1;}
  #feeds .thirds {grid-auto-columns: 100%;}

  .membernews .feed .story {width: 100%; margin: 0 0 20px 0;}
  .membernews .slick-slide {max-width: 100%; margin: 0 0;}

  .memberevents .feed .story {width: 100%; margin: 0 0 20px 0;}
  .memberevents .slick-slide {max-width: 100%; margin: 0 0;}

  .snav ul {grid-template-columns: repeat(1, 1fr); gap: 10px;}

  .related-stories .newsstory {grid-template-columns: 1fr;}
  .related-stories .newsstory .image {display: none;}

  .newsv2 .latest .newsstory:not(:first-of-type) {grid-template-columns: 80px 1fr;}
  .newsv2 > div:not(.latest) .newsstory {grid-template-columns: 80px 1fr;}

  .resource-downloads .block .images {grid-template-columns: repeat(2, 1fr); gap: 20px;}
  .resource-downloads .images li > p {display: none;}
  .resource-downloads .images:before {content: "Click on the image to download!"; display: block; position: relative; grid-column: 1/-1;}
  .resource-downloads .image img {max-width: 100%;}

  .title-banner .content h1 {font-size: 2rem;}
  .title-banner.style2 .content h1 {margin: 0; padding: 20px; text-align: center; width: 100%; margin-left: 0;}
  .placeshapinginaction .title-banner .content h4 {margin: 0; padding: 20px 0 0 0; text-align: center; width: 100%; margin-left: 0;}

  .interactivehover .image .overlay {padding: 30px;}
}

@media screen and (max-width: 375px){
  .mobile-header a.logo {min-width: 200px;}

  .resource-downloads .block .images {grid-template-columns: 1fr; gap: 10px;}
  .resource-downloads .images li {justify-content: center;}
}

@media screen and (max-width: 320px){
  .footer a.phone, .footer a.mail {font-size: 80%;}
}

@media print {
  * {-webkit-print-color-adjust: exact; print-color-adjust: exact;}
  body {font-size: 12pt; font-family: arial, serif; line-height: 140%; color: var(--black)!important;}
  .see-cms-toolbar {display: none!important;}
  .headerstrap, .right, .mobile-header-wrap, .mobile-nav {display: none!important;}
  .title {background: none;}
}