@font-face {
    font-family: "Cheltenham Extra Condensed Pro";
    src: url("../templates/Fonts/cheltenham_extra_condensed_pro-bold-webfont.woff2") format("woff2"),
         url("../templates/Fonts/cheltenham_extra_condensed_pro-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;

}

:root { 
	--erc-purple: #4e3f7d;
	--erc-ltpurple: #c59ec9;
	--erc-neutral: #f2e5d3;
	--erc-orange: #e88d2a;
	--erc-ltorange: #ebc58f;
	--erc-dark: #231f20;
	--erc-ltgrey: #ededee;
}
.sect-charter #menu { position: relative; }

.sect-charter #pagetop { padding: 200px 0; }
.sect-charter .ptimg { background: linear-gradient(to bottom, var(--erc-orange), var(--erc-ltorange))!important; }
.sect-charter #pagetop:after { position: absolute; content: ""; background: url(../gfx/erc-black.svg) no-repeat center / auto 120px; top: 0; bottom: 0; left: 0; right: 0; }
.sect-charter.page_charter-guidance .ptimg { background: linear-gradient(to bottom, var(--erc-purple), var(--erc-ltpurple))!important; }
.sect-charter.page_charter-guidance #pagetop:after { background-image: url(../gfx/erc-white.svg); }
.sect-charter .nlsignup { display: none!important; }
.sect-charter h1 { text-indent: -9999px; position: absolute; }
.sect-charter main { background: var(--erc-neutral); border-image: conic-gradient(var(--erc-neutral) 0 0) fill 0//0 100vw; padding-bottom: 40px; }
.sect-charter #pagewrap { min-height: 400px; }
.sect-charter .maincontent ul li:before, .sect-charter a, .sect-charter a:hover { color: var(--erc-purple); }

.sect-charter .subsections ul, #charterfilter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 40px; grid-template-rows: 1fr; position: relative; }
#charterfilter { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.sect-charter .subsections ul li:before { display: none; }
.sect-charter .subsections ul:before { content: ""; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--erc-dark); position: absolute; }
.sect-charter .subsections li { display: block; align-content: center; position: relative; padding: 20px 10px; text-align: center; margin: 0; border-bottom: 1px solid var(--erc-dark); }
.sect-charter .subsections li:has(>.curpage) { border-bottom-color: transparent; }
.sect-charter .subsections li:has(>.curpage) a { pointer-events: none; }
.sect-charter .subsections a, #charterfilter a { display: block; color: var(--erc-dark); font: 700 24px/24px "Cheltenham Extra Condensed Pro", serif; text-decoration: none; }
.sect-charter .subsections a:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; }
#charterfilter a { text-align: center; align-content: center; border-left: 1px solid var(--erc-dark); padding: 10px; border-bottom: 1px solid var(--erc-dark); text-wrap: balance; }
#charterfilter a:first-child { border-left: 0; }
#charterfilter a.charterfiltercur { border-bottom-color: transparent; }

.sect-charter main a:hover { opacity: 0.5; }

.sect-charter main, .sect-charter h2, .sect-charter h3, .sect-charter h4, .sect-charter h5 { color: var(--erc-dark); }
.sect-charter main { font: 16px/22px "Arimo", sans-serif; }
.sect-charter main b, .sect-charter main strong { font-weight: 700; }
.sect-charter h2 { font-family: "League Gothic", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 96px; line-height: 1em; text-align: center; transform: scale(0.5,1); margin-left: -50%; margin-right: -50%; }
.sect-charter h3 { font-family: "Cheltenham Extra Condensed Pro", serif; font-weight: 700; font-size: 32px; line-height: 1em; text-transform: none; }

.sect-charter .charter-divider { background: url(../gfx/erc-divider.svg) repeat-x center / 9.090909% auto; height: 40px; margin: 40px 0; }
.sect-charter .charter-divider-dark { background: url(../gfx/erc-divider-dark.png) repeat-x left / contain; height: 37px; margin: 40px 0; }

.sect-charter blockquote { background: linear-gradient(to bottom, var(--erc-orange), var(--erc-ltorange))!important; padding: 40px 40px 140px; margin: 20px 0; position: relative; text-transform: uppercase!important; }
.sect-charter blockquote:before { content: ""; display: block; height: 40px; background: url(../gfx/erc-divider.svg) repeat-x center / 9.090909% auto; }
.sect-charter blockquote li:before { display: none; }
.sect-charter blockquote ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 60px 0; position: relative; }
.sect-charter blockquote ul:before { content: ""; position: absolute; left: 0; right: 0; height: 20px; margin-top: -40px; background: url(../gfx/erc-divider-dark-sm.png) repeat-x center / auto 20px; }
.sect-charter blockquote ul:after { content: ""; position: absolute; left: 0; right: 0; height: 43px; bottom: -63px; background: url(../gfx/erc-divider-dark.svg) repeat-x center / contain; }

.sect-charter blockquote li { display: block; background: var(--erc-ltgrey); padding: 45px 10px 10px; position: relative; margin: 0; }
.sect-charter blockquote li>*:first-child { margin-top: 0; }
.sect-charter blockquote li>*:last-child { margin-bottom: 0; }
.sect-charter blockquote li h3 { padding-left: 60px; min-height: 80px; background-position: left; background-repeat: no-repeat; background-size: contain; }
.sect-charter blockquote li h3:before { display: block; position: absolute; top: 10px; left: 10px; }
.sect-charter blockquote li:nth-of-type(1) h3:before { content: "1."; }
.sect-charter blockquote li:nth-of-type(2) h3:before { content: "2."; }
.sect-charter blockquote li:nth-of-type(3) h3:before { content: "3."; }
.sect-charter blockquote li:nth-of-type(4) h3:before { content: "4."; }
.sect-charter blockquote li:nth-of-type(5) h3:before { content: "5."; }
.sect-charter blockquote li:nth-of-type(6) h3:before { content: "6."; }
.sect-charter blockquote li:nth-of-type(7) h3:before { content: "7."; }
.sect-charter blockquote li:nth-of-type(8) h3:before { content: "8."; }
.sect-charter blockquote li:nth-of-type(9) h3:before { content: "9."; }
.sect-charter blockquote li:nth-of-type(10) h3:before { content: "10."; }

.sect-charter blockquote li:nth-of-type(1) h3, .sect-charter blockquote li:nth-of-type(5) h3 { background-image: url(../gfx/charter-points-1-5.svg); }
.sect-charter blockquote li:nth-of-type(2) h3, .sect-charter blockquote li:nth-of-type(6) h3 { background-image: url(../gfx/charter-points-2-6.svg); }
.sect-charter blockquote li:nth-of-type(3) h3, .sect-charter blockquote li:nth-of-type(7) h3 { background-image: url(../gfx/charter-points-3-7.svg); }
.sect-charter blockquote li:nth-of-type(4) h3, .sect-charter blockquote li:nth-of-type(8) h3 { background-image: url(../gfx/charter-points-4-8.svg); }
.sect-charter blockquote li:nth-of-type(9) h3 { background-image: url(../gfx/charter-points-9.svg); }
.sect-charter blockquote li:nth-of-type(10) h3 { background-image: url(../gfx/charter-points-10.svg); }

.sect-charter blockquote li:nth-of-type(4) img { float: right; width: 25%; margin: -35px 0 5px 5px; }
.sect-charter blockquote li:nth-of-type(5) img { float: right; width: 25%; margin: -35px 0 5px 5px; }
.sect-charter blockquote li:nth-of-type(6) img { float: right; width: 25%; margin: -35px 0 5px 5px; }
.sect-charter blockquote li:nth-of-type(7) img { float: right; width: 30%; margin: -10px 0 5px 5px; }
.sect-charter blockquote li:nth-of-type(9) img { float: right; width: 30%; margin: -35px 0 5px 5px; }
.sect-charter blockquote li:nth-of-type(10) img { float: right; width: 25%; margin: -35px 0 5px 5px; }

.sect-charter blockquote li p:first-of-type { padding-top: 20px; background: url(../gfx/erc-point-line.svg) no-repeat top / contain; }

.sect-charter blockquote:after { content: ""; position: absolute; bottom: 40px; left: 40px; right: 40px; height: 60px; background: url(../gfx/erc-black.svg) no-repeat bottom right / auto 60px; }

.sect-charter div:has(>select#charterfilter) { background: #fff; padding: 5px 0; position: sticky; top: 0; z-index: 10; }
.sect-charter select#charterfilter { background: var(--erc-neutral); height: 40px; font: bold 16px/40px "Arimo", sans-serif; color: var(--erc-purple); cursor: pointer; padding: 10px; box-sizing: border-box; }
.sect-charter .charterpoint p { display: inline; }

form.charter-signup { margin: 20px 0 0; background: var(--erc-neutral); padding: 20px; position: relative; }
form.charter-signup:before, form.charter-signup:after { position: absolute; bottom: 20px; left: 20px; width: 400px; height: 140px; pointer-events: none; background: url(../gfx/erc-corner-bl.svg) no-repeat bottom left / auto 140px; content: ""; }
form.charter-signup:after { left: auto; right: 20px; background-image: url(../gfx/erc-corner-br.svg); background-position: bottom right; }

form.charter-signup>*:first-child { margin-top: 0; }
form.charter-signup label.hidden { position: absolute; left: -9999px; }
form.charter-signup input { background: #fff; font: 18px "Arimo", sans-serif; margin-top: 10px; padding: 10px; }
form.charter-signup .twoboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.charter-signup input[type=checkbox] { width: 30px; height: 30px; display: inline-block; vertical-align: middle; margin: 0 10px 0 0; -webkit-appearance: auto; border: 0; border-radius: 0; }
form.charter-signup label { font: 700 22px/30px "Cheltenham Extra Condensed Pro", serif; text-transform: none; }
form.charter-signup button { background: var(--erc-dark); color: var(--erc-neutral); font: 700 32px/1em "Cheltenham Extra Condensed Pro", serif; text-transform: none; cursor: pointer; padding: 10px 20px; margin-top: 10px; transition: all 0.25s; }
form.charter-signup button:hover { opacity: 0.75; transform: scale3d(1.05,1.05,1); }
form.charter-signup .checkboxes { padding: 10px 80px 0; text-align: center; }
form.charter-signup .checkboxes label { padding-left: 45px; position: relative; }
form.charter-signup .checkboxes input { position: absolute; margin-left: -45px; margin-top: -1px; }

.sect-charter summary { position: relative; list-style: none; cursor: pointer; padding: 10px 40px 10px 20px; transition: all 0.25s; z-index: 2; background:var(--erc-purple); color: #fff; font: 700 32px/1em "Cheltenham Extra Condensed Pro", serif; text-transform: none; }
.sect-charter summary::-webkit-details-marker { display: none; }
.sect-charter summary:after { position: absolute; top: 50%; margin-top: -10px; line-height: 20px; right: 25px; content: "\2193"; transition: transform 0.25s; }
.sect-charter summary:hover { color: rgba(255,255,255,0.5); }
.sect-charter summary:hover:after { transform: scale3d(1.25,1.25,1); }

.sect-charter details { text-align: left; background: #fff; margin: 10px 0 0; }
.sect-charter details:first-of-type { margin-top: 5px; }
.sect-charter details[open] summary:after { transform: rotate(180deg); }
.sect-charter details[open] summary:hover:after { transform: rotate(180deg) scale3d(1.25,1.25,1); }

.sect-charter details img.cms_imgright { max-width: 200px; }

.sect-charter .detailswrap { opacity: 1; padding: 20px 0; position: relative; z-index: 1; animation: none; }
.sect-charter .detailswrap > *:first-child { margin-top: 0; }
.sect-charter .detailswrap > *:last-child { margin-bottom: 0; }

.sect-charter details {

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    block-size: 0;
    overflow-y: clip;
	transition: content-visibility 0.5s allow-discrete, block-size 0.5s;
  }

  &[open]::details-content {
    block-size: auto;
  }
}

@supports not (interpolate-size: allow-keywords) {
	.sect-charter details[open] .detailswrap { animation: 0.5s linear details-in; animation-fill-mode: forwards; }
}

@keyframes details-in {
  from {
    transform: translate3d(0,-20px,0);
    opacity: 0;
  }
  to {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@media all and (max-width: 879px) {
	.sect-charter blockquote ul { grid-template-columns: 1fr; }
	.sect-charter h2 { font-size: 84px; }
	.sect-charter blockquote li p:first-of-type { background-position: top left; background-size: 300px auto; }
}
@media all and (max-width: 767px) {
	.sect-charter #menu { position: fixed; }
	form.charter-signup h2 { font-size: 64px; }
	form.charter-signup:before, form.charter-signup:after { background-size: auto 80px; }
	form.charter-signup .checkboxes { padding: 0 50px 40px; }
	.sect-charter h2 { font-size: 64px; }
}
@media all and (max-width: 679px) {
	.sect-charter #pagetop { padding: 150px 0; }
}
@media all and (max-width: 599px) {
	.sect-charter h2 { font-size: 56px; }
}

@media all and (max-width: 579px) {
	.sect-charter main { background: #fff; border-image: none; }
	.sect-charter h3, .sect-charter summary { font-size: 28px; }
	.sect-charter main { font-size: 14px; line-height: 20px; }
	.sect-charter blockquote:after { background-size: auto 40px; }
	.sect-charter .subsections a, #charterfilter a { font-size: 18px; line-height: 18px; }
	form.charter-signup input { font-size: 16px; }
}
@media all and (max-width: 509px) {
	.sect-charter blockquote { padding-left: 20px; padding-right: 20px; padding-top: 20px; }
}
@media all and (max-width: 499px) {
	.sect-charter #pagetop { padding: 100px 0; }
	.sect-charter #pagetop:after { background-size: 60% auto; }
	.sect-charter h2 { font-size: 48px; text-wrap: balance; }
	form.charter-signup h2 { font-size: 48px; }
	form.charter-signup:before, form.charter-signup:after { display: none; }
	form.charter-signup .checkboxes { padding: 0; }
	.sect-charter blockquote li { display: block; margin: 20px 0 0; }
	.sect-charter blockquote ul { display: block; }
}
@media all and (max-width: 379px) {
	form.charter-signup h2 { font-size: 38px; }
	.sect-charter blockquote:before { left: 20px; bottom: 20px; }
	.sect-charter blockquote:after { right: 20px; bottom: 20px; }
	.sect-charter blockquote { padding: 1px 20px 100px; }
}