:root,
[data-theme="light"] {
	--off-black: #121212;
	--off-white: #fAf9f6;
	--dark-grey: #404040;
	--light-grey: #d7d7d7;
	
	/* --body-font-family: var(--font-sans-serif);*/
	--body-bg-color: var(--off-white);
	
	--link-color: var(--c-light-blue);
	--link-hover-color: var(--c-light-blue);
	
	--submit-border-radius: 0;
	--submit-bg: buttonface;
	--submit-txt: buttontext;
	--submit-border-color: var(--off-black);
	--submit-border-style: solid;
	--submit-border-width: 1px;
	
	--txt-resize-txt: #000;
	--txt-resize-focus-bg: #000;	
	--txt-resize-focus-txt: #fff;	
	
	--search-label-txt: #000;
	--search-filter-label-txt: #000;
	
	--skip-links-bg: #000;
	--skip-links-txt: #fff;
	
	--backissue-label-txt: #000;
	
	--panic-bg: #ecad3c;
	--panic-txt: #000;
	
	--fbox-border-radius: 1rem;
	--fbox-bg-color: var(--off-black);
	--fbox-title-color: var(--off-white);
	--fbox-title-bg-color: inherit;
	--fbox-color: var(--off-white);
	--fbox-link-color: inherit;
	--fbox-link-hover-color: inherit;
	
	--button-bg-color: var(--off-black);
	--button-txt-color:var(--off-white);
	--button-bg-color-hover: var(--off-black);
	--button-txt-color-hover: #fff;
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: #000;
	--button-border-radius: 10px;
	
	--main-nav-bg: var(--off-black);
	--main-nav-txt: var(--off-white);
	--main-nav-active-bg: var(--light-grey);
	--main-nav-active-txt: var(--off-black);
	--main-nav-drop-bg:  var(--light-grey);
	--main-nav-drop-active-bg: var(--off-black);
	--main-nav-drop-active-txt: #fff;
	--main-nav-hamburger: var(--off-black);
	--main-nav-selected-txt: #fff;
	--main-nav-selected-bg: var(--off-black);	
	--main-nav-grid-col-width: 25%;
	
	--np-title-bg-color: var(--off-black);
	--np-link-title-color: #fff;
	--np-link-title-border-radius: 6px;
	
	--rc-border-radius: 1rem; 
	--rc-bg-color: var(--off-black);
	--rc-heading-bg-color: inherit;
	--rc-heading-txt-color: #fff; 
	--rc-heading-font-weight: 500; 
	--rc-link-bg-color: var(--light-grey);
	--rc-link-txt-color: #000;
	--rc-hover-bg-color: var(--off-black);
	--rc-hover-txt-color: #fff;	
	--rc-selected-bg-color: var(--off-black);
	--rc-selected-txt-color: #fff;
	
	--bu-bg-color: var(--off-black);
	--bu-txt-color: #fff;
	
	--cnt-issue-title-txt-color: #000;
	--cnt-pub-date-txt-color: #000;
	
	--lr-bg-color: var(--light-grey);
	
	--icon-button-bg-color: var(--off-black);
	--icon-button-border-radius: 2rem;
	--icon-button-border: none;
	--icon-button-img-width: 35px;
	--icon-button-img-height: 35px;
	
	--ic-bg-color: var(--off-black);
	--ic-border-radius: 1rem;
	--ic-caption-color: var(--off-white);
	--ic-link-color: var(--off-white);
	--ic-link-hover-color: var(--off-white);
	--ic-alt-bg-color: #fff;
	--ic-alt-link-color: var(--off-black);
	--ic-alt-link-hover-color: var(--off-black);
	--ic-alt-caption-color: var(--off-black);
	--ic-tag-bg-color: var(--off-black);
	--ic-tag-color: var(--off-white);
	--ic-tag-hover-color: var(--off-black);
	--ic-tag-hover-bg-color: var(--off-white);
	
	--top-row-bg-color: var(--off-white);
	--top-layoutrow-bg-color: inherit;
	--banner-row-bg-color: var(--off-white);
	--banner-layoutrow-bg-color:inherit;
	--search-row-bg-color:var(--off-white);
	--search-layoutrow-bg-color:inherit;
	--nav-row-bg-color:var(--off-black);
	--nav-layoutrow-bg-color:inherit;
	--content-row-bg-color: inherit;
	--content-layoutrow-bg-color:inherit;
	--footer-row-bg-color:inherit;
	--footer-layoutrow-bg-color: inherit;
	
	--cookie-bg-color: transparent;
	--cookie-txt-color: var(--off-white);
	--cookie-link-color: var(--off-white);
	--cookie-border: none;
	
	--p-bg-color: trsnsparent;
	--p-txt-color: #000;
	--p-title-txt-color: #fff;
	--p-title-bg-color: var(--off-white);
	--p-graph-bg-color: var(--off-white);
	--p-graph-txt-color: #000;
	--p-border: 1px solid var(-off-black);	
	--p-border-radius: 2rem;
	
	--slide-caption-color: var(--c-off-black);
}


[data-theme="dark"] {
	--c-off-black: #121212;
	--c-off-white: #fAf9f6;
	--dark-grey: #404040;
	--light-grey: #d7d7d7;
	
	/* --body-font-family: var(--font-sans-serif);*/
	--body-bg-color: var(--c-off-black);
	
	--link-color: var(--c-light-blue);
	--link-hover-color: var(--c-light-blue);
	
	--submit-border-radius: 0;
	--submit-bg: buttonface;
	--submit-txt: buttontext;
	--submit-border-color: var(--c-off-black);
	--submit-border-style: solid;
	--submit-border-width: 1px;
	
	--txt-resize-txt: var(--c-off-white);
	--txt-resize-focus-bg: var(--c-off-white);	
	--txt-resize-focus-txt: var(--c-off-white);	
	
	--search-label-txt: #000;
	--search-filter-label-txt: #000;
	
	--skip-links-bg: #000;
	--skip-links-txt: #fff;
	
	--backissue-label-txt: #000;
	
	--panic-bg: #ecad3c;
	--panic-txt: #000;
	
	--fbox-border-radius: 1rem;
	--fbox-bg-color: var(--c-off-black);
	--fbox-title-color: var(--c-off-white);
	--fbox-title-bg-color: inherit;
	--fbox-color: var(--c-off-white);
	--fbox-link-color: inherit;
	--fbox-link-hover-color: inherit;
	
	--button-bg-color: var(--c-off-black);
	--button-txt-color:var(--c-off-white);
	--button-bg-color-hover: var(--c-off-black);
	--button-txt-color-hover: #fff;
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: #000;
	--button-border-radius: 10px;
	
	--main-nav-bg: var(--c-off-black);
	--main-nav-txt: var(--c-off-white);
	--main-nav-active-bg: var(--light-grey);
	--main-nav-active-txt: var(--c-off-black);
	--main-nav-drop-bg:  var(--light-grey);
	--main-nav-drop-active-bg: var(--c-off-black);
	--main-nav-drop-active-txt: #fff;
	--main-nav-hamburger: var(--c-off-black);
	--main-nav-selected-txt: #fff;
	--main-nav-selected-bg: var(--c-off-black);	
	
	--np-title-bg-color: var(--c-off-black);
	--np-link-title-color: #fff;
	--np-link-title-border-radius: 6px;
	
	--rc-border-radius: 1rem; 
	--rc-bg-color: var(--c-off-black);
	--rc-heading-bg-color: inherit;
	--rc-heading-txt-color: #fff; 
	--rc-heading-font-weight: 500; 
	--rc-link-bg-color: var(--light-grey);
	--rc-link-txt-color: #000;
	--rc-hover-bg-color: var(--c-off-black);
	--rc-hover-txt-color: #fff;	
	--rc-selected-bg-color: var(--c-off-black);
	--rc-selected-txt-color: #fff;
	
	--bu-bg-color: var(--c-off-black);
	--bu-txt-color: #fff;
	
	--cnt-issue-title-txt-color: #000;
	--cnt-pub-date-txt-color: #000;
	
	--lr-bg-color: var(--light-grey);
	
	--icon-button-bg-color: var(--dark-grey);
	--icon-button-border-radius: 2rem;
	--icon-button-border: none;
	--icon-button-img-width: 35px;
	--icon-button-img-height: 35px;
	
	--ic-bg-color: var(--c-off-black);
	--ic-border-radius: 1rem;
	--ic-caption-color: var(--c-off-white);
	--ic-link-color: var(--c-off-white);
	--ic-link-hover-color: var(--c-off-white);
	--ic-alt-bg-color: #fff;
	--ic-alt-link-color: var(--c-off-black);
	--ic-alt-link-hover-color: var(--c-off-black);
	--ic-alt-caption-color: var(--c-off-black);
	--ic-tag-bg-color: var(--c-off-black);
	--ic-tag-color: var(--c-off-white);
	--ic-tag-hover-color: var(--c-off-black);
	--ic-tag-hover-bg-color: var(--c-off-white);
	
	--top-row-bg-color: var(--c-off-black);
	--top-layoutrow-bg-color: inherit;
	--banner-row-bg-color: var(--c-off-black);
	--banner-layoutrow-bg-color:inherit;
	--search-row-bg-color:var(--c-off-black);
	--search-layoutrow-bg-color:inherit;
	--nav-row-bg-color:var(--c-off-black);
	--nav-layoutrow-bg-color:inherit;
	--content-row-bg-color: inherit;
	--content-layoutrow-bg-color:inherit;
	--footer-row-bg-color:inherit;
	--footer-layoutrow-bg-color: inherit;
	
	--cookie-bg-color: #fff;
	--cookie-txt-color: var(--c-off-white);
	--cookie-link-color: var(--c-off-white);
	--cookie-border: none;
	
	--slide-caption-color: var(--c-off-white);
}

[data-theme="hcdark"] {
	--c-off-black: #121212;
	--c-off-white: #fAf9f6;
	--dark-grey: #404040;
	--light-grey: #d7d7d7;
	
	/* --body-font-family: var(--font-sans-serif);*/
	--body-bg-color: #000;
	--body-color: var(--c-off-white);
	
	--link-color: var(--c-off-white);
	--link-hover-color: var(--c-off-white);
	
	--content-bg-color: var(--c-off-black);
	--submit-border-radius: 0;
	--submit-bg: buttonface;
	--submit-txt: buttontext;
	--submit-border-color: var(--c-off-black);
	--submit-border-style: solid;
	--submit-border-width: 1px;
	
	--txt-resize-txt: #fff;
	--txt-resize-focus-bg: #fff;	
	--txt-resize-focus-txt: #fff;	
	
	--search-label-txt: #fff;
	--search-filter-label-txt: #fff;
	
	--skip-links-bg: #000;
	--skip-links-txt: #fff;
	
	--backissue-label-txt: #fff;
	
	--panic-bg: #ecad3c;
	--panic-txt: #000;
	
	--fbox-border-radius: 1rem;
	--fbox-bg-color: var(--c-off-black);
	--fbox-title-color: var(--c-off-white);
	--fbox-title-bg-color: inherit;
	--fbox-color: var(--c-off-white);
	--fbox-link-color: inherit;
	--fbox-link-hover-color: inherit;
	
	--button-bg-color: var(--c-off-black);
	--button-txt-color:var(--c-off-white);
	--button-bg-color-hover: var(--c-off-black);
	--button-txt-color-hover: #fff;
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: #000;
	--button-border-radius: 10px;
	
	--main-nav-bg: var(--c-off-black);
	--main-nav-txt: var(--c-off-white);
	--main-nav-active-bg: var(--light-grey);
	--main-nav-active-txt: #000;
	--main-nav-drop-bg:  var(--light-grey);
	--main-nav-drop-active-bg: #000;
	--main-nav-drop-active-txt: #fff;
	--main-nav-hamburger: #fff;
	--main-nav-selected-txt: #fff;
	--main-nav-selected-bg: var(--c-off-black);	
	--main-nav-grid-col-width: 25%;
	
	--np-title-bg-color: var(--c-off-black);
	--np-link-title-color: #fff;
	--np-link-title-border-radius: 6px;
	
	--rc-border-radius: 1rem; 
	--rc-bg-color: var(--c-off-black);
	--rc-heading-bg-color: inherit;
	--rc-heading-txt-color: #fff; 
	--rc-heading-font-weight: 500; 
	--rc-link-bg-color: var(--c-off-black);
	--rc-link-txt-color: #fff;
	--rc-hover-bg-color: #000;
	--rc-hover-txt-color: #fff;	
	--rc-selected-bg-color: var(--light-grey);
	--rc-selected-txt-color: #000;
	
	--bu-bg-color: var(--c-off-black);
	--bu-txt-color: #fff;
	
	--cnt-issue-title-txt-color: var(--c-off-white);
	--cnt-pub-date-txt-color: var(--c-off-white);
	
	--lr-bg-color: var(--c-off-black);
	
	--icon-button-bg-color: var(--c-off-black);
	--icon-button-border-radius: 2rem;
	--icon-button-border: none;
	--icon-button-img-width: 35px;
	--icon-button-img-height: 35px;
	
	--ic-bg-color: var(--c-off-black);
	--ic-border-radius: 1rem;
	--ic-caption-color: var(--c-off-white);
	--ic-link-color: var(--c-off-white);
	--ic-link-hover-color: var(--c-off-white);
	--ic-alt-bg-color: var(--c-off-black);
	--ic-alt-link-color: var(--c-off-white);
	--ic-alt-link-hover-color: var(--c-off-white);
	--ic-alt-caption-color: var(--c-off-white);
	--ic-tag-bg-color: var(--c-off-black);
	--ic-tag-color: var(--c-off-white);
	--ic-tag-hover-color: var(--c-off-black);
	--ic-tag-hover-bg-color: var(--c-off-white);
	
	--top-row-bg-color: #000;
	--top-layoutrow-bg-color: inherit;
	--banner-row-bg-color: #000;
	--banner-layoutrow-bg-color:inherit;
	--search-row-bg-color:#000;
	--search-layoutrow-bg-color:inherit;
	--nav-row-bg-color:var(--c-off-black);
	--nav-layoutrow-bg-color:inherit;
	--content-row-bg-color: inherit;
	--content-layoutrow-bg-color:inherit;
	--footer-row-bg-color:inherit;
	--footer-layoutrow-bg-color: inherit;
	
	--cookie-bg-color: #000;
	--cookie-txt-color: var(--c-off-white);
	--cookie-link-color: var(--c-off-white);
	--cookie-border: none;
	
	--slide-caption-color: var(--c-off-white);
}
[data-theme="hclight"] {
	--c-off-black: #121212;
	--c-off-white: #fAf9f6;
	--dark-grey: #404040;
	--light-grey: #d7d7d7;
	
	/* --body-font-family: var(--font-sans-serif);*/
	--body-bg-color: var(--c-off-white);
	--body-color: var(--c-off-black);
	
	--link-color: var(--c-off-black);
	--link-hover-color: var(--c-off-black);
	
	--content-bg-color: var(--c-off-white);
	--submit-border-radius: 0;
	--submit-bg: buttonface;
	--submit-txt: buttontext;
	--submit-border-color: var(--c-off-black);
	--submit-border-style: solid;
	--submit-border-width: 1px;
	
	--txt-resize-txt: #000;
	--txt-resize-focus-bg: #000;	
	--txt-resize-focus-txt: #000;	
	
	--search-label-txt: #000;
	--search-filter-label-txt: #000;
	
	--skip-links-bg: #000;
	--skip-links-txt: #fff;
	
	--backissue-label-txt: #000;
	
	--panic-bg: #ecad3c;
	--panic-txt: #000;
	
	--fbox-border-radius: 1rem;
	--fbox-bg-color: var(--c-off-white);
	--fbox-title-color: var(--c-off-black);
	--fbox-title-bg-color: inherit;
	--fbox-color: var(--c-off-black);
	--fbox-link-color: var(--c-off-black);
	--fbox-link-hover-color: var(--c-off-black);
	
	--button-bg-color: var(--c-off-black);
	--button-txt-color:var(--c-off-white);
	--button-bg-color-hover: var(--c-off-black);
	--button-txt-color-hover: #fff;
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: #000;
	--button-border-radius: 10px;
	
	--main-nav-bg: var(--c-off-white);
	--main-nav-txt: #000;
	--main-nav-active-bg: var(--light-grey);
	--main-nav-active-txt: #000;
	--main-nav-drop-bg:  var(--light-grey);
	--main-nav-drop-active-bg: #000;
	--main-nav-drop-active-txt: #fff;
	--main-nav-hamburger: #000;
	--main-nav-selected-txt: #000;
	--main-nav-selected-bg: var(--light-grey);	
	--main-nav-grid-col-width: 25%;
	
	--np-title-bg-color: var(--c-off-black);
	--np-link-title-color: #fff;
	--np-link-title-border-radius: 6px;
	
	--rc-border-radius: 1rem; 
	--rc-bg-color: var(--c-off-white);
	--rc-heading-bg-color: inherit;
	--rc-heading-txt-color: #000; 
	--rc-heading-font-weight: 500; 
	--rc-link-bg-color: #var(--c-off-white);
	--rc-link-txt-color: #000;
	--rc-hover-bg-color: #000;
	--rc-hover-txt-color: #fff;	
	--rc-selected-bg-color: var(--light-grey);
	--rc-selected-txt-color: #000;
	
	--bu-bg-color: var(--light-grey);
	--bu-txt-color: #000;
	
	--cnt-issue-title-txt-color: var(--c-off-white);
	--cnt-pub-date-txt-color: var(--c-off-white);
	
	--lr-bg-color: var(--c-off-white);
	
	--icon-button-bg-color: var(--c-off-black);
	--icon-button-border-radius: 2rem;
	--icon-button-border: none;
	--icon-button-img-width: 35px;
	--icon-button-img-height: 35px;
	
	--ic-bg-color: var(--c-off-white);
	--ic-border-radius: 1rem;
	--ic-caption-color: var(--c-off-black);
	--ic-link-color: #000;
	--ic-link-hover-color: #000;
	--ic-alt-bg-color: var(--c-off-white);
	--ic-alt-link-color: #000;
	--ic-alt-link-hover-color: #000;
	--ic-alt-caption-color: var(--c-off-black);
	--ic-tag-bg-color: var(--c-off-white);
	--ic-tag-color: var(--c-off-black);
	--ic-tag-hover-color: var(--c-off-white);
	--ic-tag-hover-bg-color: var(--c-off-black);
	
	--top-row-bg-color: var(--c-off-white);
	--top-layoutrow-bg-color: inherit;
	--banner-row-bg-color: var(--c-off-white);
	--banner-layoutrow-bg-color:inherit;
	--search-row-bg-color:var(--c-off-white);
	--search-layoutrow-bg-color:inherit;
	--nav-row-bg-color:var(--c-off-white);
	--nav-layoutrow-bg-color:inherit;
	--content-row-bg-color: inherit;
	--content-layoutrow-bg-color:inherit;
	--footer-row-bg-color:inherit;
	--footer-layoutrow-bg-color: var(--c-off-white);
	
	--cookie-bg-color: var(--c-off-white);
	--cookie-txt-color: var(--c-off-white);
	--cookie-link-color: var(--c-off-white);
	--cookie-border: none;
	
	--slide-caption-color: var(--c-off-black);
}

body { background-color: var(--body-bg-color); color: var(--body-color); }


a { color: var(--link-color)}
a:hover, a:active, a:focus { color: var(--link-hover-color)}
/* row specifics */

.banner a { display: flex; justify-content: space-around; }
.banner .logo { max-width: 100%; display: block }
@media only screen and (max-width: 950px) {
.banner .logo { width: 90%; }
}

.back-up-row .layout-wrap { background-color: var(--bu-bg-color); border-radius: 1rem 1rem 0 0 ; }
.back-up a { color: var(--bu-txt-color); }
.back-up a:after { background-image: url(../img/icons-back-to-top.png); }

.footer-row  { padding: 2.5rem 0; }

.logo-row .layout-wrap { background-color: var(--lr-bg-color); padding: 1em 0 }
.logo-row img { margin-left: 2rem; max-width: 100%;} 

.top-row { background-color: var(--top-row-bg-color) }
.top-row .layout-wrap { background-color: var(--top-layoutrow-bg-color) }
.banner {  background-color: var(--banner-row-bg-color) } 
.banner .layout-wrap { background-color: var(--banner-layoutrow-bg-color); /*padding: 2rem 0;*/ } 
.search-row {  background-color: var(--search-row-bg-color) }
.search-row .layout-wrap {  background-color: var(--search-layoutrow-bg-color) }
.nav-row {  background-color: var(--nav-row-bg-color) }
.nav-row .layout-wrap {  background-color: var(--nav-layoutrow-bg-color) }
.content-row { background-color: var(--content-row-bg-color) }
.content-row .layout-wrap { background-color: var(--content-layoutrow-bg-color) }
.footer-row { background-color: var(--footer-row-bg-color); }
.footer-row .layout-row { background-color: var(--footer-layoutrow-bg-color); }

/* content specific */

.issue-title { color: var(--cnt-issue-title-txt-color); font-size: 1.65rem }
.pub-date { display: block; margin: 1rem 0; color: var(--cnt-pub-date-txt-color)}


.question {
    margin-bottom: 20px;
    clear:both;
}

.qHeader { margin: 30px 0 0 0;}
.q-number {
    display: none;
}
.instr { font-style: italic; font-size: 0.9em}
.question canvas { margin-top: 10px;}
.question .reset { margin-top: 5px; }
.q-text p {
    display: inline;
}

.q-textbox {
    width: 95%;
}

.q-textbox[type='date']
{
    width: auto;
}

.q-response-wrap { float: left; }
.q-image-wrap {
    float: left;
    margin-left: 40px;
}
.q-image-wrap.interactive {
    float: left;
    margin-left: 0;
}
.canvas-container { text-align: center; margin: 0 auto;}

.legend {
    margin-top: 1em;
}

.surveyButton {
    margin-top: 20px;
    margin-right: 10px;
}

span.check {
    margin-right: 5px;
}

span.m-input {
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    display: inline-block;
}
label.m-input-label {
    margin-left: 5px;
    display: block;
    margin-bottom: 5px;
}


.error,
#errorMsg,
.errorMsg {
    color: #b94a48;
    background-color: #f2dede;
    padding: 5px;
    display: block;
}

label.check {
    margin-left: 20px;
    display: block;
}



table.matrix td {
    text-align: center;
    padding: 0 10px;
}

table.matrix.single-row tr td label.check {
    margin: 0;
    display: inline !important;
}

.q-body {
    margin-top: 10px;
}

.question .comment {
    margin-left: 20px;
    margin-top: 1em;
}

.question .commInput {
    width: 95%;
    margin-left: 20px;
}

.question .commInputOpt {
    width: 95%;
    margin-left: 40px;
    margin-top: 5px;
}

.q-text p { margin: 0;}

.error {
    background-color: transparent;
    padding: 0;
}

.q-error {
    border-top: 1px solid #eed3d7;
    margin-top: 20px;
}

.qHeaderMand .q-text:after {
    content: " *";
}

.q-body input {
    padding: 3px
}


.feature-wrap { margin-top: 2rem; height:auto}
.feature-wrap .card { height: 100%; margin-bottom: 2rem; position: relative; background-color: var(--ic-bg-color); border-radius: var(--ic-border-radius); overflow: hidden; margin-right: 2%}
.feature-wrap .card img { width: 100%; display: block; }
.feature-wrap .card > a { text-decoration: none; color: var(--ic-link-color); display: block; }
.feature-wrap .card > a:hover,
.feature-wrap .card > a:active,
.feature-wrap .card > a:focus { color: var(--ic-link-hover-color)}
@media only screen and (min-width: 600px) {
.feature-wrap .card > a { height: 100% }
}
.feature-wrap .card .tags { position: absolute; top: 2em; left: 1em; width: auto; }
.feature-wrap .card .tags ul { display: flex; gap: 0.6rem; color: transparent}
.feature-wrap .card .tags a { text-decoration: none; color: var(--ic-tag-color);  padding: 0.6rem; background-color: var(--ic-tag-bg-color);}
.feature-wrap .card .tags a:hover,
.feature-wrap .card .tags a:active,
.feature-wrap .card .tags a:focus { background-color: var(--ic-tag-hover-bg-color); color: var(--ic-tag-hover-color)}
.feature-wrap .card .caption { padding: 1rem;  color: var(--ic-caption-color)}

@media only screen and (min-width: 1000px) {
.feature-wrap { margin-top: 2rem; height: 42rem }
.feature-wrap .card { float: left; width: 65%; height: 100%; margin-bottom: 2rem; position: relative; background-color: var(--ic-bg-color); border-radius: var(--ic-border-radius); overflow: hidden; margin-right: 2%}
.feature-wrap .card:nth-child(2n) { float: right; width: 32%; margin-right: 0; height: auto;}
.feature-wrap .card:nth-child(3n) { float: right; width: 32%; margin-right: 0; height: auto;}

}


/* issue summary */
.issue-wrap { margin-top: 2rem }
.issue-wrap .card { height: 100%; position: relative; background-color: var(--ic-bg-color); border-radius: var(--ic-border-radius); overflow: hidden; }
.issue-wrap .card img { width: 100%; display: block; }
.issue-wrap .card > a { text-decoration: none; color: var(--ic-link-color); display: block; }
.issue-wrap .card > a:hover,
.issue-wrap .card > a:active,
.issue-wrap .card > a:focus { color: var(--ic-link-hover-color)}
.issue-wrap .card .flex {flex-wrap: wrap; }
.issue-wrap .card figure { margin-bottom: 0}
.issue-wrap .card .tags { position: absolute; top: 2em; left: 1em; width: auto; display: none; }
.issue-wrap .card .tags ul { display: flex; gap: 0.6rem}
.issue-wrap .card .tags a { text-decoration: none; color: var(--ic-tag-color); height: 100%; padding: 0.6rem; background-color: var(--ic-tag-bg-color);}
.issue-wrap .card .tags a:hover,
.issue-wrap .card .tags a:active,
.issue-wrap .card .tags a:focus { background-color: var(--ic-tag-hover-bg-color); color: var(--ic-tag-hover-color)}
.issue-wrap .card .caption { padding: 1rem;  color: var(--ic-caption-color)}

@media only screen and (min-width: 1000px) {
.issue-wrap .card .tags { display: block;}
.issue-wrap .card div.flex figure { width: 40%; flex: 1; margin: 0;	}
    .issue-wrap .card div.flex figure img {object-fit: cover; height: 100%;
    align-self: flex-start;
	}
.issue-wrap .card div.flex .caption {  flex: 1}

}


/* skip-link elements */
.skip-links ul { list-style-type:none; margin: 0; padding:0}
.skip-links a {
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
    font-size: 1rem;
    line-height: 1.25rem;
	color: var(--skip-links-txt);
	display: block;
	background-color: var(--skip-links-bg); margin-top: 0.5rem; padding:0.5rem
}

.skip-links a:not(:active):not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    user-select: none
}


input[type="submit"] {
	border-radius: var(--submit-border-radius);
	border-width: var(--submit-border-width);
	border-style: var(--submit-border-style);
	border-color: var(--submit-border-color);
	font-size: 1rem; 
	color: var(--submit-txt); 
	background-color: var(--submit-bg); 
}


/* Back issue elements */
.back-issues label { color: var(--backissue-label-txt); }
.back-issues select {width: auto;font-weight: normal;}


/* Search elements */
.form-search { }
.form-search label { color: var(--search-label-txt); }
.form-search #q {border-right: none;}
@media (min-width: 768px) {
	.form-search { float: right; }
}


.form-search-filter > div { margin-bottom: 1rem;}
.form-search-filter label { color: var(--search-filter-label-txt); }
.form-search-filter input, .form-search-filter select { margin-left: 0.5rem }


/* font resize elements */

#font-resize-wrap { display: inline-block; color: var(--txt-resize-txt); width: 10rem;display: flex; gap: 0;justify-content: center;flex-wrap: wrap;}
.font-resize_label-wrap { display: flex; justify-content:center; margin-bottom: 0.5rem }
.font-resize_label-wrap .font-resize_label { text-align: center;display: flex;justify-content: center;align-items: center;color: var(--txt-resize-txt);height: 100%;width: 100%;font-weight: normal;font-size: 0.9em;}
.font-resize-control {display: flex;justify-content: center;align-items: center;align-items: flex-end;height: 2rem;transition: visibility 0s, opacity 0.5s linear;}
.font-resize-control { display:none; }
.font-resize_up.font-resize_up,
.font-resize_down.font-resize_down {
  padding-bottom: 0.3em; background: none;border: solid 1px var(--txt-resize-txt);color: var(--txt-resize-txt);height: 1.2em;width: 1.2em;border-radius: 100%;display: flex;align-items: center;justify-content: center;text-decoration: none;transition: 0.2s;font-size: 1.6em;
}
.font-resize_up.font-resize_up:hover,
.font-resize_down.font-resize_down:hover,
.font-resize_up.font-resize_up:focus,
.font-resize_down.font-resize_down:focus {
  background: var(--txt-resize-focus-bg);  color: var(--txt-resize-focus-txt);
}
.font-resize_scale { padding: 0.325em 0; margin: 0 0.625em; }


.panic { position: fixed; top: 0; left: 0; z-index: 100000; overflow: hidden; }
.panic a,.panic .panic a:link, .panic a:hover .panic a:active { background-color: var(--panic-bg); display: block; padding: 0.375rem 0.625rem; font-weight: bold; color: var(--panic-txt) !important; }


.button { 
	background-color: var(--button-bg-color); 
	color: var(--button-txt-color); 
	padding-inline: 1.25rem; 
	padding-block: 2.5rem;
	text-align: center; 
	border-radius: var(--button-border-radius); 
	border-width: var(--button-border-width);
	border-style: var(--button-border-style);
	border-color: var(--button-border-color);
	display: inline-block;
	margin-block: 1rem;
}
.button,
.button:link { text-decoration: none; }
.button:hover,.button:active { background-color: var(--button-bg-color-hover); color: var(--button-txt-color-hover);}

.button.x-small { padding-block: 0.5rem; padding-inline: 0.5rem; }
.button.small { padding-block: 1rem; padding-inline: 1.25rem; }
.button.large { padding-block: 2rem; padding-inline: 2rem; font-size: 1.25rem}
.button.x-large { padding-block: 3rem; padding-inline: 3rem; font-size: 1.25rem }

.button.w-icon { background-position: 1rem center; background-repeat: no-repeat; background-size: 3rem; padding-block: 1.875rem; padding-inline: 4.75rem 1.25rem }
.button.w-icon.x-small { background-position: 0.75rem center; background-size: 1.75rem; padding-block: 0.5rem; padding-inline:3.25rem 1.25rem; }
.button.w-icon.small { background-position: 0.75rem center; background-size: 2.5rem; padding-block: 1rem; padding-inline:  4rem 1.25rem; }
.button.w-icon.large { background-position: 1rem center; background-size: 4rem; padding-block: 2rem; padding-inline:6rem 2rem; }
.button.w-icon.x-large { background-position: 1rem center; background-size: 4rem; padding-block: 3rem; padding-inline:6rem 3rem; }


.button.w-icon.subscribe { background-image: url(../img/icon-subscribe.png); }
.button.w-icon.archive { background-image: url(../img/icon-archive.png); }
.button.w-icon.feedback { background-image: url(../img/icon-feedback.png); }

.icon-button { background-color: var(--icon-button-bg-color); border-radius: var(--icon-button-border-radius); border: var(--icon-button-border); }
.icon-button img { width: var(--icon-button-img-width); height: var(--icon-button-img-height);}
.icon-button:hover { opacity: 0.8; }

#mainNav { display: table; width: 100%; }
.menu ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; }
.menu ul > li { display: flex; /*	width: 10%;*/ position: relative; align-items: center; }
@media only screen and (max-width: 1250px) {
	.menu ul  { display: grid; grid-template-columns: repeat(auto-fill, var(--main-nav-grid-col-width)); justify-content: space-between; grid-gap: 0; }
	.menu > li { justify-content: space-between; }
}
@media (max-width: 768px) {
	.menu { overflow: hidden; }
	.menu ul { grid-template-columns: repeat(1, 1fr); }
	.menu ul > li { flex-wrap: wrap; }
}
.menu { clear: both; max-height: 0; transition: max-height .2s ease-out; background-color:var(--main-nav-bg); }
.menu ul > li:hover,
.menu ul > li:active,
.menu ul > li:focus { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg);}
.menu ul > li.selected { color: var(--main-nav-selected-txt); background-color:var(--main-nav-selected-bg);}
.menu ul > li > a { flex: 1; display: block; padding: 1rem; }
.menu ul > li > a,
.menu ul > li > a:link { color: var(--main-nav-txt); text-decoration: none;}
.menu ul > li > a:hover,
.menu ul > li > a:active,
.menu ul > li > a:focus,
.menu ul > li > a:focus-visible  { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg); }
.menu ul > li:hover a,
.menu ul > li:active a,
.menu ul > li:focus a { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg);}
@media (min-width: 768px) {
  .menu { clear: none; max-height: none !important; }
}

.menu-icon { cursor: pointer; display: inline-block; padding: 28px 20px 28px 0; position: relative; user-select: none; }
.menu-icon .hamburger { background: var(--main-nav-hamburger); display: block; height: 5px; position: relative; transition: background .2s ease-out; width: 30px; }
.menu-icon .hamburger:before,
.menu-icon .hamburger:after { background: var(--main-nav-hamburger); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }
.menu-icon .hamburger:before { top: 9px; }
.menu-icon .hamburger:after { top: -9px; }
.menu-btn { display: none; }
.menu-btn:checked ~ .menu { display: block; max-height: 1500px; }
.menu-btn:checked ~ .menu-icon .hamburger { background: transparent; }
.menu-btn:checked ~ .menu-icon .hamburger:before { transform: rotate(-45deg); }
.menu-btn:checked ~ .menu-icon .hamburger:after { transform: rotate(45deg); }
.menu-btn:checked ~ .menu-icon:not(.steps) .hamburger:before, 
.menu-btn:checked ~ .menu-icon:not(.steps) .hamburger:after { top: 0; }
@media (min-width: 768px) {
  .menu-icon { display: none;  }
}		  

#mainNav .grid {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--layout-grid-gap);
    justify-items: end;
    align-items: end;
    row-gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
	#mainNav .grid {
   grid-template-columns: repeat(1, 1fr);
   justify-items: center;
	}
 }

.next-prev-links { display: flex;  width: 100%;  justify-content: space-between; margin: 2rem 0}
.next-prev-links > div {
  width: 40%;
}
.next-prev-links div.next {
  margin-left: auto;
  text-align: right;
}
.next-prev-links div a { display: inline-block;}
.next-prev-links div a .link-title { background-color: var(--np-title-bg-color); padding: 0.6rem; border-radius: var(--np-link-title-border-radius);  margin-bottom: 1rem; display: inline-block; color: var(--np-link-title-color); text-decoration: none;}
.next-prev-links div a .link-label { margin-bottom: 1rem; display: block; font-size: 1em;}


.related-content { padding: 0; margin-block: 0 2rem; border-radius: var(--rc-border-radius); overflow: hidden; min-height: 200px; background-color: var(--rc-bg-color);}
.related-content h2 { padding: 1rem; margin: 0; font-size: 1rem; color: var(--rc-heading-txt-color); font-weight: var(--rc-heading-font-weight); background-color: var(--rc-heading-bg-color); }
.related-content > ul { padding: 0; }
.related-content > ul li { padding: 0; }
.related-content > ul > li.selected a { background-color: var(--rc-selected-bg-color); color: var(--rc-selected-txt-color); }
.related-content > ul > li a { background-color: var(--rc-link-bg-color); color: var(--rc-link-txt-color); text-decoration: none; margin: 0; display: block; padding: 0.6rem 1rem;}
.related-content > ul > li a:hover,.see-also-list li a:active,.see-also-list li a:focus { color: var(--rc-hover-txt-color);background-color: var(--rc-hover-bg-color); }


/* content tag list */
div.content > nav { position: absolute; }
div.content > nav .tag-list { display: flex; gap: 0.6rem; margin: 0.2rem 0 0 0}
div.content > nav .tag-list li a { text-decoration: none; color: #fff; height: 100%; padding: 0.6rem; background-color: var(--c-dark-grey);}
div.content > nav .tag-list li a:hover,
div.content > nav .tag-list li a:active,
div.content > nav .tag-list li a:focus { color: #fff}

div.content p img { max-width: 100%; height: auto;}

.back-up-row .layout-wrap { text-align: center; margin-top: 2.5em; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.back-up a { text-decoration: none; padding: 2.5em 0;  position: relative; display:inline-block}
.back-up a:after { 
    background-size: 2.5em;
	background-repeat:no-repeat;
    display: inline-block;
    width: 2.5em; 
    height: 2.5em;
	position: absolute;
	top: 50%;
	right: -3.125em;
	transform: translateY(-50%);
    content:"";
}

.page-tools {
  margin-top: 2rem;
  justify-content: center;

}

.comment-wrap { margin-bottom: 1em; display: none;}
.comment-list-wrap { margin-bottom: 20px; }
.comment-list-wrap h2 { font-size: 0.9em; }
.comment-list li { padding: 10px; margin-bottom: 10px; }

.comment-list li .auth-name,
.comment-list li .datestamp { font-size: 0.8em; display: block; }

.comment-list li .datestamp { margin-bottom: 10px; }
.comment-list li .reply { margin-left: 10px; padding: 10px 10px;}
.comment-form { padding: 0; margin-bottom: 20px; }
.comment-form textarea { width: 95%; }
.comment-form label { display: block; margin-top: 1rem}
.comment-form input[type="text"] { width: 95%; }

#commentError { margin-bottom: 10px; }


.subscribe { margin-bottom: 1rem; }
.subscribe .form-section { margin-top: 1rem; }
.subscribe input { padding: 0.4rem; width: 40%; }
.subscribe input[type="submit"] { margin: 1rem 0; width: auto}
.subscribe ul,.subscribe ol { margin-top: 0.5rem; list-style-type: none; padding: 0;}
.subscribe label p { margin: 0}

.errorMsg { color: red}

footer { margin-top: 2.5em }
footer h3 { margin: 1rem 0 0.5rem 0; font-size: 1.2rem}

.tag-alpha-list li { display: inline-block; padding: 0.3125rem; }
    .tag-alpha-list li a {
        display: block;
        border-radius: 1rem;
        padding: 0.3125rem;
        text-transform: uppercase;
        text-align: center;
        width: 1.25rem;
        background: #bfbfbf;
        color: #fff;
    }

.tag-entry-list { margin: 2rem 0;}

.did-you-know .section-summary ul { margin:0; padding: 0; margin-block: 2rem; margin-inline: 2rem }
.did-you-know .section-summary ul li {display: grid;grid-template-columns: 1fr;grid-column-gap: 2rem;grid-row-gap: 2rem;align-items: center;overflow: hidden;border-bottom: 1px solid var(--c-light-grey);margin-block-end: 2rem;}
.did-you-know .section-summary ul li .img-wrap img { width: 100%; max-width: 100% }
.did-you-know .section-summary ul li p { margin: 0;}
@media (min-width: 768px) {
	.did-you-know .section-summary ul li {grid-template-columns: 1fr 5fr;margin-inline-end: 2rem}
	.did-you-know .section-summary ul li .img-wrap img { width: auto; border-radius: 10px;}
}		  



.cookie-banner { border: var(--cookie-border); background-color: var(--cookie-bg-color); margin: 0; color: var(--cookie-bg-color); padding: 0 20px;}
.cookie-banner a { color: var(--cookie-link-color); text-decoration: underline;}
.cookie-banner.top { position: absolute;top: 0;}
.cookie-banner.bottom { position: fixed; bottom: 0px; height: auto;}
.cookie-banner #chkAcceptCookie { margin-right: 1em;}

.all-tags-wrap { border-radius: 1rem; overflow: hidden; background-color: #fff;}
.all-tags-wrap h2 { font-size: 1rem; color: #fff; font-weight: normal; background-color: var(--c-dark-grey);padding: 1rem;  }
.all-tags-wrap ul { display: flex; gap: 0.6rem; margin: 1rem 0;    flex-wrap: wrap; justify-content: center;}
.all-tags-wrap li.selected a {  background-color: var(--c-dark-grey); color: #fff; }

.all-tags-wrap li a { color: #fff; text-decoration: none; margin: 0; display: block; padding: 0.6rem 1rem;background-color: var(--c-dark-grey);}
.all-tags-wrap li a:hover,.see-also-list li a:active,.see-also-list li a:focus {  }

.tag-entry-list li { margin: 1rem 0}		  

.feature-box { border-radius: var(--fbox-border-radius); background-color: var(--fbox-bg-color); color: var(--fbox-color); padding: 0; margin-block-end: 2rem; overflow: hidden;}
.feature-box .title { font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; color: var(--fbox-title-color); background: var(--fbox-title-bg-color);}
.feature-box .content { margin: 0; padding: 0 1rem 1rem 1rem; color: var(--fbox-color); }
.feature-box img { max-width: 100%; height: auto;}
.feature-box a { color: var(--fbox-link-color); }
.feature-box a:hover, .feature-box a:active, .feature-box a:focus { color: var(--fbox-link-hover-color); }


.no-pad { padding: 0 !important;}
.no-pad div > article { padding: 1.25rem  }
.no-pad div > h1 { padding: 1.25rem; text-align: center; color: #fff; background-color: var(--c-light-blue); font-size: 1.5rem} 


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  height: 100%;
  background-color: var(--c-light-blue);
}


.slideshow-container .slide { display: none; }

/* Next & previous buttons */
.slideshow-container .prev, .slideshow-container .next { cursor: pointer; position: absolute; top: 30%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 1rem; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; text-decoration: none; }
.slideshow-container .next { right: 0; border-radius: 3px 0 0 3px; }

.slideshow-container .prev:hover, .slideshow-container .next:hover { background-color: rgba(0,0,0,0.8); }
.slideshow-container #slideWrap, .slideshow-container #slideWrap .slide { /*height: 100%;*/}
.slideshow-container #slideWrap a { text-decoration: none; display: block; }
.slideshow-container #slideWrap .caption { color: var(--slide-caption-color);}
.slideshow-container #slideWrap img { object-fit: cover; object-position: center; height: 60%;max-width: 100%;}

.slideshow-container #slideWrap .text { color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center;}
.slideshow-container #slideDots { text-align: center;}
.slideshow-container .slide-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  padding-block: 0;
}
.slideshow-container .active, .slideshow-container .slide-dot:hover { background-color: #717171;}
.slideshow-container #slideDots .slide-control {  cursor: pointer; height: 25px; width: 25px;  margin: 0 2px;  display: inline-block;  padding-block: 0;  border: none; }
.slideshow-container #slideDots .slide-control.pause{ background: url(/js/libs/slideshow/pause_light.png) 0 0 no-repeat; background-size: cover; }
.slideshow-container #slideDots .slide-control.play{ background: url(/js/libs/slideshow/play_light.png) 0 0 no-repeat;  background-size: cover;}


.poll-wrap { background-color: var(--p-bg-color); margin: 0 0 20px 0; border-radius: var(--p-border-radius); border: var(--p-border); overflow: hidden;}
.poll-wrap .title { color: var(--p-title-txt-color); background-color: var(--p-title-bg-color); margin: 0; font-size: 1.25rem; padding: 1rem 1rem} 
.poll-wrap .poll { padding: 0 1rem; margin-bottom: 20px;}
.poll-wrap .poll .graph { background-color: var(--p-graph-bg-color); color:  var(--p-graph-txt-color); margin-bottom: 5px;}
.poll-wrap .poll .totalVotes { color: var(--p-txt-color); display: block;font-weight: bold;margin: 10px 0;}
.poll-wrap .poll .pollQ {color:  var(--p-txt-color); display: block;margin: 5px 0 10px 0;}
.poll-wrap .poll .option {color:  var(--p-txt-color);}
.poll-wrap .poll .option {display: flex;margin-bottom: 10px;}
.poll-wrap .poll .option input[type=radio],
.poll-wrap .poll .option input[type=checkbox]{margin-top: 0;}
.poll-wrap .poll .option span {margin-left: 0.5rem;line-height: 1.2em;}
.poll-wrap .voteButton {display: block;margin: 1.25rem 0;text-align: center;}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}