:root {
	--c-black: #000;
	--c-white: #fff;
	--c-almost-black: #121212;
	--c-almost-white: #f8f4f0;
	--c-light-grey: #d7d7d7;
	--c-dark-grey: #404040;
}

.no-display, .visuallyhidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;}

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

a { color: var(--link-color); transition: all .2s ease-in-out;}
a:hover, a:active, a:focus { color: var(--link-hover-color)}

/*
@supports(--fancy-link-underlines: true) {
    a>span {
        background-image:linear-gradient(currentColor,currentColor);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 0 2px;
        padding-bottom: 3px;
        text-decoration: none;
        transition: background-size .3s cubic-bezier(.55,.085,.68,.53)
    }
}
@supports(--fancy-link-underlines: true) {
    a:focus>span, a:hover>span {
        background-size:100% 2px;
        text-decoration: none; 
        transition-timing-function: cubic-bezier(.23,1,.32,1)
    }
}	
*/

.title-wrap { }
.site-title { color: var(--bnr-title-color); font-size: var(--bnr-title-size); font-weight: var(--bnr-title-weight); }
.site-sub-title { color: var(--bnr-subtitle-color); font-size: var(--bnr-subtitle-size); font-weight: var(--bnr-subtitle-weight); }


.carousel-row  div.title { text-align: center; margin-bottom: 1.2rem; font-size: 1.5rem; color: var(--crsl-title-color) }

.banner {  background-color: var(--banner-row-bg-color) } 
.banner .layout-wrap { background-color: var(--banner-layoutrow-bg-color); padding: 0 } 

.banner-logo-wrap a { display: grid;grid-template-columns: var(--bnr-grid-columns); align-items: center; text-decoration: none; gap: 2rem}
.banner .logo { max-width: 100%; width: 100%; background-color: var(--bnr-logo-bg-color); }

@media only screen and (max-width: 768px) {
.banner-logo-wrap a { grid-template-columns: repeat(1, 1fr); grid-gap: 0; }
.banner .logo:first-child { max-width: 100%; width: 100%; /* 20%; */ }
}

.banner .banner-button-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	width: 100%;
	margin: 0 aut0;
	box-sizing: border-box; 
}
@media only screen and (max-width: 1250px) {
.banner .banner-button-wrap {grid-template-columns: repeat(1, 1fr);}
}
@media only screen and (max-width: 768px) {
.banner .banner-button-wrap {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 450px) {
.banner .banner-button-wrap {grid-template-columns: repeat(1, 1fr);}
}


.banner-row-2 { background-color: var(--banner-row-bg-color)}



/* social media links */

.social-wrap { margin-left: 1rem; }

a.social { text-indent: -9999px; display: inline-block; background-color: var(--soc-icon-bg-color); color: var(--soc-icon-txt-color); }
a.social { position: relative; padding-left: 35px; /* space for icon */ }

a.social::before { content: "";position: absolute;left: 0;top: 20%;width: 45px;height: 45px;transform: translateY(-50%);background-image: url("/img/icons/search.svg");background-size: contain;   background-repeat: no-repeat;}
[data-theme="light"],
[data-theme="hclight"] {
	a.social.twitter::before { background-image: url("../img/icons/icon-x-twitter-dark.png"); }
	a.social.facebook::before { background-image: url("../img/icons/icon-facebook-dark.png"); }
	a.social.linkedin::before { background-image: url("../img/icons/icon-linkedin-dark.png"); }
	a.social.instagram::before { background-image: url("../img/icons/icon-instagram-dark.png"); }
}
[data-theme="dark"],
[data-theme="hcdark"] {
	a.social.twitter::before { background-image: url("../img/icons/icon-x-twitter-light.png"); }
	a.social.facebook::before { background-image: url("../img/icons/icon-facebook-light.png"); }
	a.social.linkedin::before { background-image: url("../img/icons/icon-linkedin-light.png"); }
	a.social.instagram::before { background-image: url("../img/icons/icon-instagram-light.png"); }
}


/* back to top */
.back-up-row { background-color: var(--bu-bg-color); margin-top: 3rem; margin-bottom: 2rem }
.back-up-row .layout-wrap { text-align: center;}
.back-up{ color: var(--bu-txt-color); text-decoration: none; padding: 4em 0 1.5em; position: relative; display:inline-block}
/*.back-up:before { background-image: url(../img/icons/icons-back-to-top-light.png); background-size: 2.5em;background-repeat:no-repeat; 
	content:""; display: inline-block;position: absolute; width: 2.5em; height: 2.5em;top: 34%;left: 30%;transform: translateY(-50%);}

[data-theme="light"],
[data-theme="hclight"] {
	.back-up:before {	background-image: url(../img/icons/icons-back-to-top-dark.png); }
}
[data-theme="dark"],
[data-theme="hcdark"]  {
	.back-up:before {	background-image: url(../img/icons/icons-back-to-top-light.png); }
}
.back-up { display: inline-block; margin-bottom: 2rem;}
.back-up::after { content: 'Back to top'}
*/

.footer-row  { padding: 1rem 0 2rem 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) }
.search-row {  background-color: var(--search-row-bg-color); padding: 1rem }
.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); color: var(--footer-txt-color)}
.footer-row .layout-row { background-color: var(--footer-layoutrow-bg-color); }

.footer-row a { color: var(--footer-link-color); transition: all .2s ease-in-out; text-decoration: var(--footer-link-decoration)}

.footer-row a:hover, 
.footer-row a:active, 
.footer-row a:focus { color: var(--footer-link-hover-color); text-decoration: var(--footer-link-hover-decoration)}
.footer-row ul { margin: 0;}
.footer-row ul li { margin: 0; }

.legal-row { margin: 0}

/* content specific */

.issue-title { color: var(--cnt-issue-title-txt-color); font-size: 1rem; background-color: var(--cnt-issue-title-bg-color); padding: 1rem; margin-bottom: 1rem }

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



/* pagination */

.pagination ul { list-style-type: none; margin: 2rem 0; padding: 0; float: right}
.pagination ul li { display: inline-block; margin: 0 0.5rem;}
.pagination ul li a { background-color: var(--pgn-link-bg-color); color: var(--pgn-link-txt-color); display: block; text-decoration: var(--pgn-link-txt-decoration)}
.pagination ul li a:hover,
.pagination ul li a:active,
.pagination ul li a:focus { background-color: var(--pgn-link-hover-bg-color); color: var(--pgn-link-hover-txt-color); }
.pagination ul li.active a { color: var(--pgn-link-active-txt-color); text-decoration:var(--pgn-link-active-txt-decoration)  }

/* carousel and buttons */

.slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; }
.slick-list { margin: 0 3rem 0 2.5rem }

.slick-prev,
.slick-next { font-size: 0;line-height: 0;position: absolute;top: 50%;display: block;padding: 0;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);cursor: pointer;border: none;outline: none;background: transparent;
   color: var(--icon-btn-txt-color);width: var(--crsl-btn-size);height: var(--crsl-btn-size);
}
.slick-prev { left: -5px; }
[dir='rtl'] .slick-prev { right: -5px; left: auto; }
.slick-next { right: 5px; }
[dir='rtl'] .slick-next { right: auto; left: -5px; }

.slick-next:before,
.slick-prev:before {
	content: "";
	display: inline-block;
    width: var(--crsl-btn-size);
    height: var(--crsl-btn-size);
    background-color: var(--crsl-btn-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--crsl-btn-size);
	transition: background 0.25s ease;
    border-radius: 50%;
    flex-shrink: 0;
}
.slick-prev:before, .slick-next:before {font-size: var(--crsl-btn-size);color: var(--crsl-btn-color);}

.slick-next:before { background-image: url("../img/icons/icon-right-arrow-light.png"); }	
.slick-prev:before { background-image: url("../img/icons/icon-left-arrow-light.png"); }		
[dir='rtl'] .slick-next:before { background-image: url("../img/icons/icon-left-arrow-light.png"); }
[dir='rtl'] .slick-prev:before { background-image: url("../img/icons/icon-right-arrow-light.png"); }

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { background-color: var(--crsl-btn-hover-color); }    
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: .25; }
/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -35px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0;line-height: 0;display: block;width: 20px;height: 20px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
.slick-dots li button:hover,
.slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before
{
    font-size: 46px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { opacity: .75; color: black; }




	
/* icon buttons */	

.icon-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--icon-btn-txt-color); } 
.icon-btn.txt-bottom { flex-direction: column; align-items: center; }
.icon-btn:before { 
	content: "";
    width: var(--icon-btn-circle-size);
    height: var(--icon-btn-circle-size);
    background-color: var(--icon-btn-circle-bg-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--icon-btn-size);
	transition: background 0.25s ease;
    border-radius: 50%;
    flex-shrink: 0;
}
.icon-btn.up-arrow:before { background-image: url("../img//icons/icon-up-arrow-light.png"); }	
.icon-btn.twitter::before { background-image: url("../img/icons/icon-x-twitter-dark.png"); }
.icon-btn.facebook::before { background-image: url("../img/icons/icon-facebook-dark.png"); }
.icon-btn.linkedin::before { background-image: url("../img/icons/icon-linkedin-dark.png"); }
.icon-btn.instagram::before { background-image: url("../img/icons/icon-instagram-dark.png"); }

.icon-btn.up-arrow.dark::before { background-image: url("../img//icons/icon-up-arrow-dark.png"); }	
.icon-btn.twitter.dark::before { background-image: url("../img/icons/icon-x-twitter-dark.png"); }
.icon-btn.facebook.dark::before { background-image: url("../img/icons/icon-facebook-dark.png"); }
.icon-btn.linkedin.dark::before { background-image: url("../img/icons/icon-linkedin-dark.png"); }
.icon-btn.instagram.dark::before { background-image: url("../img/icons/icon-instagram-dark.png"); }


.icon-btn:hover,
.icon-btn:active { color: var(--icon-btn-hover-txt-color); }

.icon-btn:hover:before,
.icon-btn:active:before { background-color: var(--icon-btn-circle-hover-bg-color); }






.feature-wrap { margin-top: 2rem; height:auto; display: grid; gap: 3rem; grid-template-columns: repeat(3, 1fr); justify-content: space-between; }
.feature-wrap .card { position: relative; display: flex;background-color: var(--ic-bg-color); border-radius: var(--ic-border-radius); }
.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 a:before {
	bottom: 0;
    content: "";
    cursor: pointer;
    left: 0;
    /* padding: 20px; */
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.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);
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        padding: 20px;
        z-index: 5;
 }

@media only screen and (min-width: 1000px) {
.feature-wrap { margin-top: 2rem;  }
.feature-wrap .card { }
}

	
@media(min-width: 768px) {
        .card-wrap:hover:before {
            bottom:-15px;
            left: -15px;
            right: -15px;
            top: -15px;
            transition-timing-function: cubic-bezier(.23,1,.32,1)
        }
    }
.card-wrap a:before {
        bottom: 0;
        content: "";
        cursor: pointer;
        left: 0;
        padding: 20px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1
    }

    @media(min-width: 768px) {
        .card-wrap a:before {
            padding:30px
        }
    }

	
/* issue summary */
.issue-wrap { margin-top: 2rem }

.issue-summary { }
.issue-summary .section-wrap { background-color: var(--is-section-bg-color); margin-bottom: 2rem; padding-bottom: 1rem }
.issue-summary .section-wrap .is-sec-title { background-color: var(--is-sec-title-bg-color); color: var(--is-sec-title-color); padding: 0.6rem; font-size: 1rem;}
.issue-summary .section-wrap .is-content-wrap { color: var(--is-sec-title-color); font-size: 1rem;}
.issue-summary .is-content-wrap a { text-decoration: none; display: block; margin-left: 2rem}
.issue-summary .is-content-wrap a:hover { text-decoration: underline; }
.issue-summary .is-content-title { color: var(--is-content-title-color); font-size: 1rem;}

.issue-summary ul { margin-top: 1rem; margin-bottom: 1rem; padding: 0;}
.issue-summary ul li { margin: 0; padding: 0; }
.issue-summary ul { list-style: none; }
.issue-summary li { position: relative; padding-left: 1em; }
.issue-summary li::before { content: "•"; position: absolute; left: 1rem; color: var(--is-content-title-color); }


.issue-wrap.grid { display: grid; gap: 1.25rem;}
@media only screen and (min-width: 450px) {
	.issue-wrap.grid { display: grid; grid-template-columns: repeat(2, 1fr);	}
}


.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 .tags { position: absolute; top: 2em; left: 1em; width: auto; }
.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 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;}
@media (min-width: 768px) {
	.back-issues { float: right; }
}


/* Search elements */
.form-search { margin-bottom: 0}
.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 }

.form-search.style-2 input[type="text"] { background-color: inherit; border: none; box-shadow:inset 0px 0px 0px 1px var(--c-green) }
.form-search.style-2 input[type="submit"] { background-color: var(--c-green); color: #fff; border: none; appearance: none; transition: all .2s ease-out; font-weight: 600;}
.form-search.style-2 input[type="submit"]:hover,
.form-search.style-2 input[type="submit"]:focus { background-color: var(--c-dark-green); color: #fff; border: none; box-shadow: none; } 

.form-search.style-3 input[type="text"] { background-color: inherit; border: none; border: none; border-bottom: 1px solid var(--c-green)  }
.form-search.style-3 input[type="submit"] { background-color: var(--c-green); border: none; appearance: none; transition: all .2s ease-out; font-weight: 600;}
.form-search.style-3 input[type="submit"]:hover,
.form-search.style-3 input[type="submit"]:focus { background-color: var(--c-dark-green); color: #fff; border: none; outline: none; box-shadow: none; } 



/* search results */

.search-results { margin: 0; padding: 0; list-style-type: none; }
.search-results .card { padding: 1rem; border: var(--sr-border); background-color: var(--sr-bg-color); color: var(--sr-txt-color); margin-bottom: 2rem }
.search-results .card .pub-date { margin: 0 0 1rem 0; color: var(--sr-pubdate-color)}



/* mode switcher */

.mode-switch-wrap { }
.mode-switch-wrap label { color: var(--ms-txt-color); }


/* 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; }

.breadcrumb-list { padding: 0; margin: 0 0 20px 0; }
.breadcrumb-list li { font-size: 12px; display: inline-block;}
.breadcrumb-list li:after {content: "/"; margin-left: 10px;padding-right: 10px; color: var(--bc-separator-color)}
.breadcrumb-list li:last-child:after {content: ""; }
.breadcrumb-list li a,
.breadcrumb-list li a:link { var(--bc-txt-color); }
.breadcrumb-list li a:hover { var(--bc-txt-hover-color); }
.breadcrumb-list li a:active { var(--bc-txt-active-color); }


/* buttons */
.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;
}

.button,
.button:link { text-decoration: none; }
.button:hover,.button:active { background-color: var(--button-bg-color-hover) !important; color: var(--button-txt-color-hover) !important;}

.button-secondary {	background-color: var(--button-sec-bg-color); color: var(--button-sec-txt-color); }
.button-secondary:hover,.button-secondary:active { background-color: var(--button-sec-bg-color-hover) !important; color: var(--button-sec-txt-color-hover) !important; }

.button-tertiary {	background-color: var(--button-ter-bg-color); color: var(--button-ter-txt-color); }
.button-tertiary:hover,.button-tertiary:active { background-color: var(--button-ter-bg-color-hover) !important; color: var(--button-ter-txt-color-hover) !important;}


.button.full { width: 100%; display: block }
.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; text-align: left; 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.medium { background-position: 1rem center; background-size: 3rem; padding-block: 2rem; padding-inline:5rem 1.5rem; }
.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; }


.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; }

.button.bold { font-weight: 600 }
.button.regular-txt { font-size: 1rem; }
.button.small-txt { font-size: 0.9rem; }
.button.medium-txt { font-size: 1.16rem }
.button.large-txt { font-size: 1.25rem }
.button.x-large-txt { font-size: 1.5rem }

.button.w-icon.feedback { background-image: url(../img/icons/icon-feedback-light.png); }
.button.w-icon.document { background-image: url(../img/icons/icon-document-light.png); }
.button.w-icon.exclamation { background-image: url(../img/icons/icon-exclamation-light.png); }
.button.w-icon.handshake { background-image: url(../img/icons/icon-handshake-light.png); }
.button.w-icon.family { background-image: url(../img/icons/icon-family-light.png); }
.button.w-icon.check { background-image: url(../img/icons/icon-check-light.png); }
.button.w-icon.up-arrow { background-image: url(../img/icons/icon-up-arrow-light.png); }
.button.w-icon.folder { background-image: url(../img/icons/icon-folder-light.png); }
.button.w-icon.mail-1 { background-image: url(../img/icons/icon-mail-1-light.png); }
.button.w-icon.mail-2 { background-image: url(../img/icons/icon-mail-2-light.png); }
.button.w-icon.star { background-image: url(../img/icons/icon-star-light.png); }

.button.w-icon.feedback.dark { background-image: url(../img/icons/icon-feedback-dark.png); }
.button.w-icon.document.dark { background-image: url(../img/icons/icon-document-dark.png); }
.button.w-icon.exclamation.dark { background-image: url(../img/icons/icon-exclamation-dark.png); }
.button.w-icon.handshake.dark { background-image: url(../img/icons/icon-handshake-dark.png); }
.button.w-icon.family.dark { background-image: url(../img/icons/icon-family-dark.png); }
.button.w-icon.check.dark { background-image: url(../img/icons/icon-check-dark.png); }
.button.w-icon.up-arrow.dark { background-image: url(../img/icons/icon-up-arrow-dark.png); }
.button.w-icon.folder.dark { background-image: url(../img/icons/icon-folder-dark.png); }
.button.w-icon.mail-1.dark { background-image: url(../img/icons/icon-mail-1-dark.png); }
.button.w-icon.mail-2.dark { background-image: url(../img/icons/icon-mail-2-dark.png); }
.button.w-icon.star.dark { background-image: url(../img/icons/icon-star-dark.png); }

[data-theme="hcdark"] {
	.button.w-icon.feedback { background-image: url(../img/icons/icon-feedback-light.png); }
	.button.w-icon.document { background-image: url(../img/icons/icon-document-light.png); }
	.button.w-icon.exclamation { background-image: url(../icons/img/icon-exclamation-light.png); }
	.button.w-icon.handshake { background-image: url(../img/icons/icon-handshake-light.png); }
	.button.w-icon.family { background-image: url(../img/icons/icon-family-light.png); }
	.button.w-icon.check { background-image: url(../img/icons/icon-check-light.png); }
	.button.w-icon.up-arrow { background-image: url(../icons/img/icon-up-arrow-light.png); }
	.button.w-icon.folder { background-image: url(../img/icons/icon-folder-light.png); }
	.button.w-icon.mail-1 { background-image: url(../img/icons/icon-mail-1-light.png); }
	.button.w-icon.mail-2 { background-image: url(../img/icons/icon-mail-2-light.png); }
	.button.w-icon.star { background-image: url(../img/icons/icon-star-light.png); }
}
[data-theme="hclight"] {
	.button.w-icon.feedback { background-image: url(../img/icons/icon-feedback-dark.png); }
	.button.w-icon.document { background-image: url(../img/icons/icon-document-dark.png); }
	.button.w-icon.exclamation { background-image: url(../icons/img/icon-exclamation-dark.png); }
	.button.w-icon.handshake { background-image: url(../img/icons/icon-handshake-dark.png); }
	.button.w-icon.family { background-image: url(../img/icons/icon-family-dark.png); }
	.button.w-icon.check { background-image: url(../img/icons/icon-check-dark.png); }
	.button.w-icon.up-arrow { background-image: url(../icons/img/icon-up-arrow-dark.png); }
	.button.w-icon.folder { background-image: url(../img/icons/icon-folder-dark.png); }
	.button.w-icon.mail-1 { background-image: url(../img/icons/icon-mail-1-dark.png); }
	.button.w-icon.mail-2 { background-image: url(../img/icons/icon-mail-2-dark.png); }
	.button.w-icon.star { background-image: url(../img/icons/icon-star-dark.png); }
}


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

#mainNavigation { display: table; width: 100%; background-color: var(--main-nav-bg); }
#mainNavigation > ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; }
#mainNavigation > ul > li { display: flex; /*	width: 10%;*/ position: relative; align-items: center; }


.main-nav.vertical { /*margin-bottom: 1rem;*/ }
.main-nav.vertical #mainNavigation > ul { display: block; }


@media only screen and (max-width: 1250px) {
	#mainNavigation > ul  { display: grid; grid-template-columns: repeat(auto-fill, 150px); justify-content: space-between; grid-gap: 0; }
	#mainNavigation > ul > li { justify-content: space-between; }
}

#mainNavigation > ul > li:hover,   
#mainNavigation > ul > li:active,
#mainNavigation > ul > li:focus  { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg);}

#mainNavigation > ul > li > a,
#mainNavigation > ul > li > a:link { color: var(--main-nav-link-txt); background-color: var(--main-nav-link-bg); text-decoration: none;}

#mainNavigation > ul > li > a:hover,
#mainNavigation > ul > li > a:active,
#mainNavigation > ul > li > a:focus,
#mainNavigation > ul > li > a:focus-visible  { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg);}
#mainNavigation > ul > li > a { flex: 1; display: block; padding: 16px; }
#mainNavigation > ul > li.has-submenu > a { padding: 16px 8px 16px 16px; }
#mainNavigation > ul > li.home-link > a { padding: 16px; }

#mainNavigation > ul > li:hover > a,
#mainNavigation > ul > li:active > a,
#mainNavigation > ul > li:focus > a { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg);}


/*
#mainNavigation > ul > li.has-submenu.open { background-color: var(--main-nav-active-bg);}

#mainNavigation > ul > li.has-submenu.open a,
#mainNavigation > ul > li.has-submenu.open a:link { color: var(--main-nav-active-txt); background-color:var(--main-nav-active-bg); text-decoration: none;}
*/
#mainNavigation > ul > li > .dropdown { background-color: var(--main-nav-drop-bg) !important; display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 0 0 20px 0; margin: 0; min-width: 250px; z-index:99;  }
#mainNavigation > ul > li > .dropdown { display: none; }
#mainNavigation > ul > li.open > .dropdown { display:block; }

#mainNavigation > ul > li > .dropdown ul { list-style-type: none; margin: 0; padding: 0;}
#mainNavigation > ul > li > .dropdown ul li { margin: 0; padding: 0; }
#mainNavigation > ul > li > .dropdown ul li a,
#mainNavigation > ul > li.open > .dropdown ul li a { display: block; padding: 10px 16px; color: var(--main-nav-drop-link-txt); text-decoration:none}
#mainNavigation > ul > li > .dropdown ul li a:hover,
#mainNavigation > ul > li > .dropdown ul li a:active,
#mainNavigation > ul > li > .dropdown ul li a:focus,
#mainNavigation > ul > li > .dropdown ul li a:focus-visible { background-color: var(--main-nav-drop-active-bg); color: var(--main-nav-drop-active-txt);}


#mainNavigation .has-submenu button { background-color: transparent; border: none; padding:0;  }
#mainNavigation .has-submenu button > span { display:inline-block; padding: 1em; }
#mainNavigation .has-submenu button > span:after { content: "\25BC"; color: var(--main-nav-link-txt)}
#mainNavigation .has-submenu.open button > span:after { content: '\25B2'; color: var(--main-nav-active-txt) }

#mainNavigation > ul > li.selected {color: var(--main-nav-selected-txt); background-color:var(--main-nav-selected-bg) }
#mainNavigation > ul > li.selected > a,
#mainNavigation > ul > li.selected button,
#mainNavigation > ul > li.selected button > span:after,
#mainNavigation > ul > li.selected button:hover > span:after,
#mainNavigation > ul > li.selected button:focus > span:after,
#mainNavigation > ul > li.selected button:active > span:after,
#mainNavigation > ul > li.selected.has-submenu.open button > span:after { color: var(--main-nav-selected-txt); background-color:var(--main-nav-selected-bg) !important;}

.home #mainNavigation > ul > li.home-link a {color: var(--main-nav-selected-txt) !important; background-color:var(--main-nav-selected-bg) !important  }

/*
#mainNavigation .has-submenu button,
#mainNavigation .has-submenu a:focus + button { background-color: var(--main-nav-drop-active-bg); color: var(--main-nav-drop-active-txt) }
*/
#mainNavigation .has-submenu:hover button,
#mainNavigation .has-submenu:focus button,
#mainNavigation .has-submenu button:hover,
#mainNavigation .has-submenu button:active,
#mainNavigation .has-submenu button:focus { background: var(--main-nav-active-bg); color: var(--main-nav-active-txt) }


@media (max-width: 768px) {
	.main-nav .nav { overflow: hidden; }
	#mainNavigation > ul { grid-template-columns: repeat(1, 1fr); }
	#mainNavigation > ul > li { flex-wrap: wrap; }
	#mainNavigation > ul > li .dropdown { position: relative; width: 100%; z-index:0; min-width: 100%; top: 0;}
}

.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;}


.rel-content { padding: 0; margin-block: 0 2rem; border-radius: var(--rc-border-radius); overflow: hidden; background-color: var(--rc-bg-color);}
.rel-content .title { 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); }
.rel-content > ul { padding: 0; }
.rel-content > ul li { padding: 0; border-bottom: var(--rc-separator-border); }
.rel-content > ul > li.selected a { font-weight: var(--rc-selected-font-weight); background-color: var(--rc-selected-bg-color); color: var(--rc-selected-txt-color); }
.rel-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;}
.rel-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;}


.page-tools { margin-top: 2rem;justify-content: center;}
.page-tools.horiz li { display: inline-block; margin-right: 1rem }

.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 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-list .tag {
    display: block;
    text-align: center;
	margin-right: 10px; margin-bottom: 10px;
}


.tag-list .tag {  border: var(--tg-border); width: auto; display: inline-block; font-size: 1rem;}
.tag-list .tag a { display: block; padding: 0.8rem; color: var(--tg-link-txt-color);}
.tag-list .tag a:hover,
.tag-list .tag a:active,
.tag-list .tag a:focus { background-color: var(--tg-link-hover-bg-color); color: var(--tg-link-hover-txt-color);}
.tag-list .tag a:hover,
.tag-list .tag a:active,
.tag-list .tag a:focus { background-color: var(--tg-link-focus-bg-color); color: var(--tg-link-focus-txt-color); }


.tag-entry-list { margin: 2rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }

.tag-entry.selected { background-color: var(--tg-selected-bg-color); } 
.tag-entry.selected a { color: var(--tg-selected-txt-color); }
.tag-entry.selected a:hover,
.tag-entry.selected a:active,
.tag-entry.selected a:focus { color: var(--tg-selected-hover-txt-color); }

.tag-list-entry { display: block; border: var(--tgle-border); background-color: var(--tgle-bg-color)  } 
.tag-list-entry a { color: var(--tgle-txt-color); text-decoration: var(--tgle-link-decoration) }
.tag-list-entry a.lnk { display: block; font-weight: bold; font-size: 0.8em; margin: 5px 0;  padding: 5px 10px; }
.tag-list-entry .title { margin: 0.5rem 0 1.5rem 0; font-size: 1rem; padding: 0 1rem; }
.tag-list-entry .summary { margin: 0.5rem 0 1rem 0; font-size: 0.9rem;  padding: 0 1rem; color: }
.tag-list-entry .read-more { display: inline-block; margin:1rem 1rem 1.5rem 1rem; padding: 0.5rem; color: var(--tgle-button-txt-color); background-color: var(--tgle-button-bg-color)} 
.tag-list-entry img { max-width: 100%;}

.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 {  }


.feature-box { border-radius: var(--fb-border-radius); background-color: var(--fb-bg-color); color: var(--fb-color); padding: 0; margin-block-end: 2rem; overflow: hidden;}
.feature-box .title { font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; color: var(--fb-title-color); background: var(--fb-title-bg-color);}

.feature-box .content { margin: 0; padding: 0 1rem 1rem 1rem; color: var(--fb-color); }
.feature-box img { max-width: 100%; height: auto;}
.feature-box a { color: var(--fb-link-color); }
.feature-box a:hover, .feature-box a:active, .feature-box a:focus { color: var(--fb-link-hover-color); }

.feature-box.style-2 { padding: 0 }
.feature-box.style-2 .title { margin: 0; background-color: var(--fb-title-bg-color); color: var(--fb-title-txt-color); }
.feature-box.style-2.w-icon .title { padding-left: 52px; background-image: url(../img/icons/icon-star-light.png); background-repeat: no-repeat; background-position: 10px 11px; background-size: 30px }

.feature-box.style-2 .content { padding: 0 }
.feature-box.style-2 .content p,
.feature-box.style-2 .content h1,
.feature-box.style-2 .content h2,
.feature-box.style-2 .content h3,
.feature-box.style-2 .content h4 { margin: 1rem 1rem 1rem 1rem; font-size: 1rem}


.feature-box.style-2 .content p:has(> img:only-child) { margin: 0 0 1rem 0 }

.feature-box.style-2 .content p > a:only-child { display: inline-block; margin: 1rem 0; color: var(--fb-button-txt-color); background-color: var(--fb-button-bg-color); padding: 0.2rem 0.5rem; text-decoration: none;}
.feature-box.style-2 .content p a:only-child:hover,
.feature-box.style-2 .content p a:only-child:active,
.feature-box.style-2 .content p a:only-child:focus { display: inline-block; margin: 1rem 0; color: var(--fb-button-hover-txt-color); background-color: var(--fb-button-hover-bg-color); padding: 0.2rem 0.5rem; text-decoration: none;}

.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;}

.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: 100%; position: relative; height: var(--ss-height); overflow: hidden; margin-bottom: 2rem;}
.slideshow-container .slide { display: none; height: 100%;}
.slideshow-container .prev, .slideshow-container .next { background-color: var(--ss-button-bg-color);cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: var(--ss-button-txt-color); 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: var(--ss-button-hover-bg-color); }
.slideshow-container #slideWrap, .slideshow-container #slideWrap .slide { height: 100%; width: 100%;}
.slideshow-container #slideWrap a { text-decoration: none; display: block;}
.slideshow-container #slideWrap .slide a { text-decoration: none; display: block; height: 100%;}
.slideshow-container #slideWrap .caption-wrap { position: absolute;inset: 0;display: flex;align-items: center;left: 6rem;pointer-events: none; }
.slideshow-container #slideWrap .caption { z-index:99;background-color: var(--ss-caption-bg-color); color: var(--ss-caption-txt-color); overflow: hidden;top: 20%;left: 10%;padding: 2rem;max-width: 40%; }
@media (max-width: 768px) {
	.slideshow-container #slideWrap .caption {top: 20%;left: 10%;font-size: 0.8rem;max-width: 60%;}
	.slideshow-container #slideWrap .caption h2 { font-size: calc(1rem + 0.9vw);} 
}	
.slideshow-container #slideWrap .caption > * { color: var(--ss-caption-txt-color); }	

.slideshow-container #slideWrap .caption .button { display: inline-block; width: auto; color: var(--ss-button-txt-color); background-color: var(--ss-button-bg-color); }

.slideshow-container #slideWrap img { object-fit: cover; object-position: center; height: 100%;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: right; margin-right: 2rem; margin-top: -60px; z-index: 99; position: relative}
.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;}

.fade { animation-name: fade; animation-duration: 1.5s;}
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* accordion */
.toggle-cross { cursor: pointer; color: var(--tc-txt-color); padding: 8px; background-color: var(--tc-bg-color); line-height: 1.2;font-size: 1em;}
.toggle-cross:after { content: '+'; /*position: relative;*/ float: right; color: var(--tc-txt-color); font-size: 1em;}
.toggle-cross.open:after { content: '—';}
.toggle-cross:hover,
.toggle-cross:focus { background-color: var(--tc-hover-bg-color); color: var(--tc-hover-txt-color);}
.toggle-content { display: none; margin-left: 15px; margin-bottom: 3em; position: relative; overflow: hidden;}
.toggle-title {color: var(--tc-txt-color); padding: 8px; background-color: var(--tc-bg-color); line-height: 1.2;font-size: 1em;}

#accControlWrap { text-align: right; padding-bottom: 1rem}
#allControl { padding: 0.5rem; color: var(--tc-txt-color); background-color: var(--tc-bg-color); text-decoration: none;}


/* polls */

.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 0 0.8rem 0; font-size: 1rem; padding: 0.75rem 1rem} 
.poll-wrap .title.w-icon { background-position: 1rem center; background-image: url(../img/icons/icon-check-dark.png); background-repeat: no-repeat; background-size: 1.75rem; text-align: left; padding-inline: 3.25rem 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 .novotes { color: var(--p-no-votes-color); }
.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;}



/* card content block */

.card { margin: 0; }
.card img { margin: 0 !important; max-width: 100%; }
.card a,
.card a:link { text-decoration: none; display: grid; height: 100%}
.card .title { font-weight: 500; display: block; margin: 0 0 1.2rem 0; }
.card .summary { display: block; margin: 0 0 1.2rem 0; }
.card .summary p  { margin: 0; }
.card .pad { padding: 1.2rem; }
.card.w-grow-hover:hover { transform: scale(1.02); }
.card.w-shadow { box-shadow: 0 0 11px rgba(33,33,33,.2); }
.card.w-shadow-hover { transition: box-shadow .3s; }
.card.w-shadow-hover:hover { box-shadow: 0 0 11px rgba(33,33,33,.2); }


.card.style-2 a { display: flex;align-items: stretch; overflow: hidden;}
.card.style-2 img { width: 100px; height: 100%; object-fit: cover; flex-shrink: 0; width: 50%;}
.card.style-2 .text { padding: 1rem; display: flex; flex-direction: column;}


/* featured link cards */
.featured-links .card { background-color: var(--fl-bg-color); color: var(--fl-txt-color) } 
.featured-links .card.w-border { border: var(--fl-border) }
.featured-links .card img { /*border-top-right-radius: 10px; border-top-left-radius: 10px;*/ }
.featured-links .card a,
.featured-links .card a:link { color: var(--fl-link-txt-color); text-decoration: none }
.featured-links .card a:hover,
.featured-links .card a:active,
.featured-links .card a:focus { color: var(--fl-link-txt-color-hover);  } 
.featured-links .card .title { font-weight: 500; color: var(--fl-title-txt-color); margin: 0;}
.featured-links .card .summary { background-color: var(--fl-summary-bg-color); color: var(--fl-summary-txt-color);  }
.featured-links .card .button { background-color: var(--fl-button-bg-color); color: var(--fl-button-txt-color);  }


/* latest news cards */
.latest-news-row { background-color: var(--latest-news-row-bg-color); color: var(--latest-news-row-txt-color);}

.news-list .card { background-color: var(--nl-bg-color); color: var(--nl-txt-color) } 
.news-list .card.w-border { border: var(--nl-border) }
.news-list .card img { /*border-top-right-radius: 10px; border-top-left-radius: 10px;*/ }
.news-list .card a,
.news-list .card a:link { color: var(--nl-link-txt-color); text-decoration: none }
.news-list .card a:hover,
.news-list .card a:active,
.news-list .card a:focus { color: var(--nl-link-txt-color-hover);  } 
.news-list .card .title { font-weight: bold; color: var(--nl-title-txt-color)}
.news-list .card .summary { background-color: var(--nl-summary-bg-color); color: var(--nl-summary-txt-color);  }
.news-list .card .button { background-color: var(--nl-button-bg-color); color: var(--nl-button-txt-color);  }

.latest-news-wrap .all-news {text-align: center; margin: 2rem 0 0 0}
.latest-news-wrap .all-news .button { background-color: var(--nl-all-button-bg-color); color: var(--nl-all-button-txt-color);}

.latest-news-wrap h2 { color: var(--nl-heading-txt-color);}




@media (min-width: 700px) and (max-width: 1024px) {
  .card.style-2 {flex-direction: column;}

  .card.style-2:nth-child(1) {grid-column: 1 / -1;}
}

.card.flat * { text-align: left; }
.card.flat a { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
.card.flat a .img-container { }
.card.flat a .img-container img {width: 100%; height: 100%; object-fit: cover; display: block; }
@media only screen and (max-width: 768px) {
	.card.flat a { display: grid; grid-template-columns: repeat(1, 1fr); }
	.card.flat a .img-container { grid-column-start: 1;    grid-row-start: 1; }
}


/* 2 col */
.cnt-grid.style-4 {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: 1fr;grid-column-gap: 20px;grid-row-gap: 0px;}
@media only screen and (max-width: 900px) {
	.cnt-grid.style-4 {grid-template-columns: repeat(1, 1fr);}
}

/* 2 col, stacked right */
.cnt-grid.style-1 { display: grid;grid-template-columns: 2.5fr 1fr; gap: 20px; }
.cnt-grid.style-1 .col1, 
.cnt-grid.style-1 .col2 { display: flex; flex-direction: column; }
.cnt-grid.style-1 .col2 { gap: 20px;justify-content: space-between; }
.cnt-grid.style-1 .col1 a { flex: 1; display: flex; }
.cnt-grid.style-1 .col1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) {
  .cnt-grid.style-1 { grid-template-columns: 1fr; height: auto; }
  .cnt-grid.style-1 .col1 { height: auto; }
  .cnt-grid.style-1 .col1 a {height: auto; }
  .cnt-grid.style-1 .col1 img { height: auto; }
  .cnt-grid.style-1 .col2 { flex-direction: row; justify-content: space-between; gap: 20px; }
  .cnt-grid.style-1 .col2 .row { flex: 1; }
}
@media (max-width: 700px) {
  .cnt-grid.style-1 .col2 {flex-direction: column; gap: 20px; }
  .cnt-grid.style-1 .col2 .item2,
  .cnt-grid.style-1 .col2 .item3 { flex: none; }
}

/* 4 col */
.cnt-grid.style-2 { display: grid;	grid-template-columns: repeat(4, 1fr);gap: 1.4rem;width: 100%;margin: 0 auto 0 auto;	box-sizing: border-box;  }
@media only screen and (max-width: 1200px) { 
	.cnt-grid.style-2 { grid-template-columns: repeat(2, 1fr); }
} 
@media only screen and (max-width: 768px) { 
	.cnt-grid.style-2 { grid-template-columns: repeat(1, 1fr); }
} 

/* 3 col */
.cnt-grid.style-3 { display: grid;	grid-template-columns: repeat(3, 1fr);gap: 1.4rem;width: 100%;margin: 0 auto 0 auto;	box-sizing: border-box;  }
@media only screen and (max-width: 1200px) { 
	.cnt-grid.style-3 { grid-template-columns: repeat(2, 1fr); }
} 
@media only screen and (max-width: 768px) { 
	.cnt-grid.style-3 { grid-template-columns: repeat(1, 1fr); }
} 
@media (min-width: 700px) and (max-width: 1024px) {
  .cnt-grid.style-3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
}


/* 3 col */
.cnt-grid.style-5 { display: grid;	grid-template-columns: repeat(3, 1fr);gap: 1.4rem;width: 100%;margin: 0 auto 0 auto;	box-sizing: border-box;  }
@media only screen and (max-width: 1200px) { 
	.cnt-grid.style-5 { grid-template-columns: repeat(3, 1fr); }
} 
@media only screen and (max-width: 768px) { 
	.cnt-grid.style-5 { grid-template-columns: repeat(1, 1fr); }
} 





.banner-row5 .logo { width: 100% }

.button { text-decoration: none; padding: 40px 20px; text-align: center; }
.button,
.button:link { text-decoration: none;}

.button.w-icon { background-position: 16px center; background-repeat: no-repeat; background-size: 60px; padding: 40px 20px 40px 86px;}

/*
.banner-row5 .button.concern { background-color: #0093d8; }
.banner-row5 .button.w-icon.concern { background-image: url({site-template-path}/img/icons/icon-report-concern.png); }
.banner-row5 .button.members { background-color: #2f2d3b;  }
.banner-row5 .button.w-icon.members { background-image: url({site-template-path}/img/icons/icon-members-area.png); }
		   
.banner-row5 .button { display: block; float: none; width: auto; margin-top: 0; padding: 20px;}
.banner-row5 .button.w-icon { padding: 30px 20px 30px 86px; background-position: 10px center; text-align: left; }
*/
.banner-row5 .banner-button-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	width: 100%;
	margin: 0 auto 1rem auto;
	box-sizing: border-box; 
}
@media only screen and (max-width: 1250px) {
.banner-row5 .banner-button-wrap {
	grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 768px) {
.banner-row5 .banner-button-wrap {
	grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 450px) {
.banner-row5 .banner-button-wrap {
	grid-template-columns: repeat(1, 1fr);
}
}