/*!
Theme Name: substance2025
Description: substance2025 is a custom theme based on underscores.me which requires WPML and uses FontAwesome (locally).
Version: 0.1.38
Requires PHP: 8.2
Text Domain: substance2025

substance2025 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* -----------------------------------------------------------------------------
Normalize: normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
----------------------------------------------------------------------------- */

html { line-height: 1.15 !important; -webkit-text-size-adjust: 100%; }
body { margin: 0;}
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after { box-sizing: inherit; }
html, * { box-sizing: border-box; }



/* ------------------------------------------------
Substance-specific styles
------------------------------------------------ */

/* Local Fonts */
@font-face {
font-family: "Banter Grotesk Medium";
src: url("fonts/BanterGrotesk-Medium.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Banter Grotesk Regular";
src: url("fonts/BanterGrotesk-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}

html {scroll-behavior: smooth; font-size: 16px !important;}
body {background-color: var(--color-blue-marine); background-image: none !important; font-family: 'Instrument Sans', sans-serif !important; font-weight: 400; color: var(--color-blue-marine); line-height: 1.15 !important; font-size: 16px !important;}
main {line-height: 1.5;}
figure {margin: 0; padding: 0;}
p, dd, dt, figcaption, li, pre {
	font-size: var(--font-instrument-standard);
	font-weight: 400;
}
p, dd, dt, figcaption, li, pre {
	font-size: var(--font-instrument-standard);
	font-weight: 400;
	margin-bottom: 1.8rem;
}
li {
	margin-bottom: auto;
}

mark {padding: 5px;}

#pageframe {background-color: var(--color-grey); border-bottom-left-radius: var(--large-border-radius); border-bottom-right-radius: var(--large-border-radius); }
#main-wrap {margin-left: auto; margin-right: auto; width: 96vw; max-width: 1500px; padding-top: var(--standard-window-gutter); padding-bottom: calc(var(--standard-window-gutter) * 4); display: flex;}

#column-nav {margin-right: var(--standard-gap); transition: all 1s var(--transition-cubic-bezier);}
#column-nav-sticky {position: sticky; top: var(--standard-window-gutter);}
#column-nav-int {background-color: #ffffff; border-radius: var(--standard-border-radius); padding: 20px; overflow: clip;}
#nav-logo {margin-bottom: calc(var(--standard-gap) * 2); display: flex; cursor: pointer;}
#column-nav nav li {margin-bottom: calc(var(--standard-nav-li-margin) * 2.5);}
#column-nav a {text-decoration: none; font-weight: 500;}

#column-nav.wide .hidenarrow {visibility: visible; opacity: 1; transition: opacity 1s ease-in; transition-delay: 0.5s;}
#column-nav.narrow .hidenarrow {visibility: hidden; opacity: 0; transition: opacity 0.20s ease-in, visibility 0.20s ease-in;}

.pseudobutton {display: flex; align-items: center; border-radius: var(--standard-border-radius); padding:  20px; margin-top: var(--standard-gap);}
#pshlink {background-color: var(--color-blue-marine); color: var(--color-blue-sky);}
#donatelink {background-color: var(--color-pink);}
.navicon {width: 50px; height: auto; flex-shrink: 0;}
.navtext {flex-grow: 1;}

#collapse-icon {font-size: 120%; outline: none; margin-top: 5vh; position: absolute;}
#column-nav.narrow #collapse-icon {bottom: -10vh; transition: all 0.25s ease-in;}
#column-nav.wide #collapse-icon {bottom: 0; transition: all 0.45s ease-in;}

#nav-burger {display: block;  width: 50px; text-align: center;}
#column-nav.narrow #nav-burger {visibility: visible; opacity: 1; transition: opacity 1s ease-in; transition-delay: 0.5s;}
#column-nav.wide #nav-burger {visibility: hidden; opacity: 0; transition: opacity 100ms ease-in, visibility 100ms ease-in;}
.burger-icon {font-size: 200%;}
.burger-label {font-size: 10px; text-transform: uppercase;}


/* Because transitions don't play well with CSS variables, animated column widths have been group here to ease future adjustments */
#column-nav.wide {width: 315px; flex-shrink: 0; }
#column-content.narrow {flex-grow: 1; }
#column-nav.narrow {width: 90px;  flex-shrink: 0;}
#column-content.wide {flex-grow: 1; }


/* Main Nav */
#nav-primary, #mobile-nav-menu-items {overflow: hidden; position: relative;}
.inview {position: relative;  top:0; left: 0; transition: all 0.25s ease-out;}													
.outview {position: absolute; top: 0; left: 500px; transition: all 0.25s ease-out; visibility: hidden;}			
.ejectview {position: absolute; top: 0; left: -500px; transition: all 0.25s ease-out;}
.outstage {position: absolute; top: 0; left: 500px; }
.ejectstage {position: absolute; top: 0; left: -500px; }

#column-nav.narrow #nav-primary {max-height: 500px;}

#nav-backlink {display: inline-block; margin-bottom: 15px; font-size: 80%; opacity: 0.8;}
#column-nav ul  {list-style-type: none; padding: 0; margin: 0;}
#column-nav ul li {padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0; display: flex; align-items: center; font-size: 18px;}
#column-nav ul li a {color: var(--color-blue-marine);}
#column-nav ul li a:hover {color: #4a7295;}
.menu-expand-link {margin-left: auto;}
.menu-expand-icon {display: block; font-size: 150%; font-weight: 100; border: 0 none; outline: 0; text-decoration: none !important; transition: transform 0.25s ease-in-out;}
.menu-expand-icon:hover {transform: rotate(90deg); color: var(--color-blue-marine) !important;}

li.secondary-nav-link a {font-size: 12px; !important}
li.secondary-nav-link:last-child {margin-bottom: 0;  !important}

/* WPML language link stuff */
.wpml-ls-legacy-list-horizontal {padding: 0;}
.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal .wpml-ls-link {border: 1px solid var(--color-blue-marine); border-radius: 1rem; padding: 5px 15px; font-size: 12px; margin-top: 0.25rem; display: inline-block;}
#column-nav-int .wpml-ls-link abbr {border-bottom: none; text-decoration: none; outline: none; cursor: pointer;}
#column-nav.wide .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {visibility: visible; opacity: 1; transition: opacity 1s ease-in; transition-delay: 0.5s;}
#column-nav.narrow .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {visibility: hidden; opacity: 0; transition: opacity 0.20s ease-in, visibility 0.20s ease-in;}


#mobile-nav {position: relative; display: none;}
#mobile-nav-logo {cursor: pointer;}
#mobile-nav-menu button{cursor: pointer; background-color: transparent; border: 0px none; font-size: 1.5rem;}
#mobile-nav-menu-items {position: absolute; right: var(--standard-gap);  top: 60px; z-index: 1000; background-color: #fff; padding: var(--standard-gap); border-bottom-left-radius: var(--standard-border-radius); border-bottom-right-radius: var(--standard-border-radius); width: 260px; text-align: left;}
#mobile-nav-menu-items.closed {display: none;}



#column-content {padding-right: 15px;}
#secondary {margin-top: 3em;}


#footer {padding: var(--large-border-radius); color: var(--color-blue-sky);}
#footer-navs {display: flex; flex-direction: row; padding-top: 1rem;}
.footer-nav {flex: 25%; padding-right: var(--standard-gap);}
.footer-nav h3 {font-weight: 400 !important; color: var(--color-blue-sky) !important; margin-top: 0;}
.footer-nav li {margin-bottom: var(--standard-nav-li-margin);}
#footer-logo {padding-right: 0 !important;}
#copyright {text-align: right; color: #fff; font-size: 0.90rem;}
#footer-pillars {height: auto; overflow: hidden;}
#footer-pillar-wrap {}
#footer-pillar {position: relative; top: 0; transition: all 3s var(--transition-cubic-bezier);}
#mobile-footer-pillar {position: relative; top: 0; transition: all 3s var(--transition-cubic-bezier);}
#footer img.outframe {top: -75vmax;}

img#footer-pillar.outframe {top: -75vmax;}
img#mobile-footer-pillar.outframe {top: calc(-540px * 3);}

#footer a {text-decoration: none;}


/* images */
img {width: 100%; height: auto;}
main img {border-radius: var(--standard-border-radius);}
.animated-gif img {width: 230px; height: auto; margin-bottom: 0;}

/* layers */
#column-nav {z-index: 999;}
#mobile-nav  {z-index: 999;}
.zindex-above-all {z-index: 900; position: relative;}
#card04 figcaption {z-index: 55;}
#card01 {position: relative; z-index: 53;}
#card02 {position: relative; z-index: 53;}
#card04 {position: relative; z-index: 53;}
#card05 {position: relative; z-index: 53;}
#spawn-bubble-text {z-index: 40;}
#not-alone-text {position: relative; z-index: 39;}
#spawn-bubble {position: relative; z-index: 31;}
#card03 {position: relative; z-index: 30;}
#pageframe {position: relative; z-index: 10;}
#footer-pillar-wrap {position: relative; z-index: 1;}


/* generic font-sizes */
.instrument-xlarge {font-size: var(--font-instrument-xlarge); font-weight: 400;}
.instrument-large {font-size: var(--font-instrument-large); font-weight: 400;}
.instrument-medium {font-size: var(--font-instrument-medium); font-weight: 400;}
.instrument-standard {font-size: var(--font-instrument-standard); font-weight: 400;}

/* Links */
a { color: inherit;}
a:visited { color: inherit; }
a:focus { color: inherit; }
a:hover { color: inherit; outline: 0; }
a:active { color: inherit; outline: 0; }
a:focus { outline: thin dotted; }
.jumpanchor {font-size: 0.9rem; text-decoration: none;  font-weight: 500;}
.jumpanchor span {border-radius: var(--large-border-radius); background-color: var(--color-blue-marine); color: var(--color-grey); padding: 1px 10px; margin-left: 0.5rem;}
.jumpanchor span:hover {background-color: var(--color-green); color: var(--color-blue-marine); transition: all 250ms ease-in;}


/* Headlines */
main h1 {margin-top: 0; word-wrap: break-word; font-size: var(--font-instrument-xlarge); font-weight: 400; line-height: 1.0;}
main h2 {font-size: var(--font-instrument-large); font-weight: 400; line-height: 1.3;}
main h3 {font-size: var(--font-instrument-medium); font-weight: 400; line-height: 1.3;}


/* Lists */
main ul, main ol {margin-top: -1rem;}
ul.markerless {list-style-type: none; padding: 0; margin: 0;}
ul.markerless li {padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0;}
li::marker {color: var(--color-green); font-size: 130%;}

/* Quotes */
blockquote {color: var(--color-orange); font-weight: 500;}
.wp-block-quote[style*=color] p {color: var(--color-orange); font-weight: 500;}
.wp-block-quote[style*=color] cite {color: var(--color-orange); font-weight: 500;}

/* buttons */
[type="button"], [type="reset"], [type="submit"] {background-color: var(--color-blue-marine); border-color: var(--color-blue-marine); color: var(--color-blue-sky); border-radius: var(--standard-border-radius); padding: 0.5em 1em; border: 0 none; margin-top: 1.0em;}
[type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover {background-color: var(--color-blue-sky); border-color: var(--color-blue-sky); color: var(--color-blue-marine); }


/* misc classes */
.full-height {min-height: 95vmin; }
.mobile-only {display: none !important;}
.footdesk {display: inline;}
.footmobile {display: none;}
.blockclick {cursor: pointer;}
.rounded {border-radius: var(--standard-border-radius);}
.pseudoh1 {font-family: 'Instrument Sans', sans-serif !important; color: var(--color-blue-marine) !important; margin-top: 0; word-wrap: break-word; font-size: var(--font-instrument-xlarge); font-weight: 400; line-height: 1.0;}


/* block fixes & tweaks */
.wp-block-coblocks-gallery-carousel {display: grid;}
figure.wp-block-media-text__media {border-radius: var(--standard-border-radius);}
.breadcrumb-circle-left{margin-left: 0 !important;}
.breadcrumb-circle-right{margin-right: 0 !important;}
.wp-block-coblocks-accordion-item { border-radius: var(--standard-nav-li-margin); margin: 0 0 3em; }
.wp-block-coblocks-accordion-item__title.has-background:not(.has-background), .wp-block-coblocks-accordion-item__title:not(.has-background) { background: #fff; }
.wp-block-coblocks-accordion-item__content { border: 1px solid #fff; }
.wp-block-coblocks-accordion-item__content p {font-size: 0.9rem;}
.wp-block-separator {clear: both;}
.wp-block-button__link {border-radius: var(--standard-border-radius);}
.wp-block-button__link:not(.has-background) {background-color: var(--color-blue-marine); color: var(--color-blue-sky);}
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus {background-color: var(--color-blue-sky); color: var(--color-blue-marine);}
ul.wp-block-latest-posts__list {margin-top: 0; margin-left: 0;}
.wp-block-latest-posts.wp-block-latest-posts__list {position: relative; margin-left: 0;}
.wp-block-latest-posts.wp-block-latest-posts__list > li {display: grid; grid: auto auto / 1fr 3fr; column-gap: var(--standard-gap); margin-bottom: var(--standard-gap);}
.wp-block-latest-posts__featured-image.alignleft { margin-right: 0; float: none; grid-area: 1 / 1 / span 2 / span 1; }
.wp-block-latest-posts__featured-image img { border: 0px none; width: 100%; }
a.wp-block-latest-posts__post-title { grid-area: 1 / 2; text-decoration: none; font-weight: bold; align-self: self-end;}
.wp-block-latest-posts__post-excerpt { grid-area: 2 / 2; font-size: 90%;}
.wp-block-media-text {margin-bottom: var(--standard-gap);}
.wp-block-coblocks-accordion summary {background-color: var(--color-blue-marine) !important; color: var(--color-blue-sky); cursor: pointer;}
.wp-block-coblocks-accordion .wp-block-coblocks-accordion-item__content {background-color: var(--color-blue-sky); color: var(--color-blue-marine);}
figure.is-type-video iframe {border-radius: var(--standard-border-radius);}

.is-style-info {background-color: var(--color-blue-neon) !important; color: #000 !important; border-radius: var(--standard-border-radius) !important;}
.is-style-success {background-color: var(--color-green) !important; color: #000 !important; border-radius: var(--standard-border-radius) !important;}
.is-style-warning {background-color: var(--color-yellow) !important; color: #000 !important; border-radius: var(--standard-border-radius) !important;}
.is-style-error {background-color: var(--color-pink) !important; color: #000 !important; border-radius: var(--standard-border-radius) !important;}

/* section nav - sibling & child nav sidebar widgets */
#secondary .sub-nav-widget  {display: none;}
#secondary .child-nav-widget  {display: none;}
.page-parent.page-child #secondary .child-nav-widget {display: block;}
.page-parent:not(.page-child) #secondary .child-nav-widget {display: block;}
.page-child:not(.page-parent) #secondary .sub-nav-widget {display: block;}
#secondary .sub-nav-widget .page-list li ul {display: none;}
#secondary .sub-nav-widget .page-list li.current_page_item ul {display: block;}

#secondary .child-nav-widget h2, 
#secondary .sub-nav-widget h2,
#secondary .widget_categories h2 {margin-top: 0; margin-bottom: 1rem; color: var(--color-blue-marine);}
#secondary ul.page-list,
#secondary .widget_categories ul {list-style-type: none; padding: 0; margin: 0;}
#secondary ul.page-list li,
#secondary .widget_categories li {margin-left: 0; margin-right: 0; padding: 1rem; background-color: var(--color-blue-sky); color: var(--color-blue-marine); border-radius: var(--standard-nav-li-margin); margin-bottom: 0.6rem; font-size: 0.9rem;}
#secondary ul.page-list li a,
#secondary .widget_categories li a {text-decoration: none; display: block; font-weight: 600; padding-right: 45px;}
#secondary ul.page-list li,
#secondary .widget_categories li {background-size: 37.5px 25px; background-position: right 10px center; background-repeat: no-repeat; background-image: url(img/btnarr_sky.png); transition: all 0.5s var(--transition-cubic-bezier);}
#secondary ul.page-list li:hover,
#secondary ul.page-list li:focus,
#secondary .widget_categories li:hover,
#secondary .widget_categories li:focus {background-image: url(img/btnarr_marine.png); transition: all 0.5s var(--transition-cubic-bezier);}

/* section nav - hide sibling & child nav on specific pages */
.section-issues.page-parent.depth-0 #secondary .child-nav-widget, 
.section-issues.page-parent.depth-0 #secondary .sub-nav-widget {display: none;}
.section-drug-spotlights.page-parent.depth-0 #secondary .child-nav-widget, 
.section-drug-spotlights.page-parent.depth-0 #secondary .sub-nav-widget,
.section-pleins-feux-sur-les-drogues.page-parent.depth-0 #secondary .child-nav-widget, 
.section-pleins-feux-sur-les-drogues.page-parent.depth-0 #secondary .sub-nav-widget {display: none;}

.page-id-13736 #secondary .child-nav-widget,
.page-id-13736 #secondary .sub-nav-widget {display: none !important;} /* PSH EN*/
.parent-pageid-13736 #secondary .child-nav-widget,
.parent-pageid-13736 #secondary .sub-nav-widget {display: none !important;}  /* PSH EN children */

.page-id-13740 #secondary .child-nav-widget,
.page-id-13740 #secondary .sub-nav-widget {display: none !important;} /* PSH FR */
.parent-pageid-13740 #secondary .child-nav-widget,
.parent-pageid-13740 #secondary .sub-nav-widget {display: none !important;}   /* PSH FR children */


/* Back to top */
#backtotop {display: none;}
.section-drug-spotlights #backtotop { display: block; rotate: 90deg;  position: fixed; right: -35px; bottom: 60px; z-index: 10000; text-decoration: none; }

/* Hub Page Intro */
.hub-intro .first-col {display: grid; grid-template-rows: 1fr 1fr 2.5fr; max-height: 600px;}
.hub-intro .first-col .last-p {align-self: flex-end;}

/* page specific - Home Page */
.content-card {margin-bottom: 5vw;}

#card01 .jumpanchor {}
#card01 .jumpanchor span {float: right; background-color: transparent; color: var(--color-blue-marine);}
#card01 .jumpanchor span:hover {background-color: transparent; color: var(--color-blue-marine);} 
#card01 {margin-left: auto;}
.grid-typea-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: var(--standard-gap);
	grid-template-rows: repeat(3, 1fr);
	padding: 0px;
	margin: 0px;
}
.grid-typea-container > * {object-fit: cover; overflow: hidden; border-radius: var(--standard-border-radius);}
.grid-typea-container > * > * {object-fit: cover; overflow: hidden;}
.grid-typea-container img {width: 100%; border-radius: var(--standard-border-radius); display: block;}
#box-video {grid-column: 1 / span 4; grid-row-start: 1; grid-row-end: 3;}
#box-ani {grid-column: 5 / span 2; grid-row-start: 1; grid-row-end: 1;}
#box-deco{ grid-column: 7 / span 2; grid-row-start: 1; grid-row-end: 1;}
#box-style-01 {grid-column: 1 / span 4; grid-row-start: 3; grid-row-end: 4; background-color: var(--color-yellow); padding: 5%;}

#card02 {}
.split-card02 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--standard-gap);
	grid-template-rows: 1fr;
	padding: 0px;
	margin: 0px;
}
.split-card02 > * {border-radius: var(--standard-border-radius);object-fit: cover;}
.split-card02 > *:first-child {grid-column: 3 / span 1; margin-top: auto; text-align: right; grid-row-start: 1; align-self: end;}
.split-card02 > *:last-child {grid-column: 1 / span 2; grid-row-start: 1; align-self: end;}
.split-top-bottom {display: flex; flex-direction: column; height: 100%;}
.split-top-bottom > * {width: 100%;}
.split-top-bottom > *:first-child {}
.split-top-bottom > *:last-child {margin-top: auto; width: 100%;}
.split-left-right {display: flex; width: 100%;}
.split-left-right > *:first-child {width: 70%; text-align: left;}
.split-left-right > *:last-child {margin-top: auto; width: 30%; text-align: right;}
#card02 .split-top-bottom {height: auto;}
#no-parent {width: 500px;}

#card03 {margin-bottom: 3rem;}
#card03-wrap {display: grid; grid-template-columns: 1fr; gap: var(--standard-gap); grid-template-rows: 1fr 2fr; padding: 0px; margin: 0px;}
#pageframe {overflow: clip;} /* see:  https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working */
#not-alone-text {width: 400px; padding-top: var(--standard-window-gutter);}
#not-alone-text p {margin-bottom: 0.5rem; font-size: var(--font-instrument-medium); }
#not-alone-text p {margin-top: 0;}
#spawn-bubble {position: absolute; top: 30%; left: 50%; transform: translate(-50%, -30%); width: 700px; height: auto;}
#spawn-bubble.bubblegrow {width: 50000px; transition: all 3s var(--transition-cubic-bezier);}
#spawn-bubble.bubbleshrink {width: 700px; transition: all 1s var(--transition-cubic-bezier);}
#spawn-bubble-text {position: absolute; top: 20%; left: 50%; transform: translate(-50%, -20%); width: 700px; text-align: center;}
#spawn-bubble-text nav {width: 80%;margin-left: auto; margin-right: auto;}
#spawn-bubble-text h2 {font-size: 60px; margin-bottom: 1rem; font-weight: 700;}
.issuelink {display: inline-block; padding: 0.5rem 1.0rem; border: 1px solid var(--color-blue-marine); border-radius: var(--large-border-radius); text-decoration: none; margin: 0.25rem; font-size: 0.75rem;}
.issuelink:hover {background-color: var(--color-yellow);}

#card04 {}
#card04 .split-left-right > *:first-child {width: 55%;}
#card04 .split-left-right > *:last-child {margin-top: revert; width: 45%; text-align: left; padding-left: 3vw;}
#card04 h2 {margin-top: 0;}
#card04 div {position: relative;}
#card04 figcaption {position: absolute; bottom: 0; left: 0; right: 0; font-weight: 600; color: #fff; padding: 0.75rem; padding-top: 100%; background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 100%); margin-bottom: 0;}
.grid-typeb-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--standard-gap);
	grid-template-rows: 1fr;
	padding: 0px;
	margin: 0px;
}
.grid-typeb-container > * {object-fit: cover; overflow: hidden; border-radius: var(--standard-border-radius);}
.grid-typeb-container > * > * {object-fit: cover; overflow: hidden;}
.grid-typeb-container img {width: 100%; border-radius: var(--standard-border-radius); display: block;}


#card05 {}
#docard {display: flex; position: relative; align-items: center; justify-content: center; overflow: hidden; width: 100%;}
img.dcard {border-radius: var(--standard-border-radius); position: absolute; transition: all 1s ease-in-out; will-change: top, bottom, left, right; transition-delay: 100ms;}
/* transitions only work if the positions that will change are specifically declared in both states */
img.dctop {top: 39%;}
img.dcleft {left: 47%;}
img.dcbottom {bottom: 35%;}
img.dcright {right: 35%;}
#don01 {width: 200px; height: 200px;}
#don02 {width: 200px; height: 200px;}
#don03 {width: 84px; height: 84px;}
#don04 {width: 159px; height: 159px;}
#don05 {width: 84px; height: 84px;}
#don06 {width: 84px; height: 84px;}
#don07 {width: 200px; height: 200px;}
#don08 {width: 84px; height: 84px;}
.ani #don01 {bottom: 8%; right: 4%;}
.ani #don02 {top: 0; left: 15%;}
.ani #don03 {top: 20%; right: 35%;}
.ani #don04 {top: 13%; right: 0;}
.ani #don05 {top: 45%; right: 10%;}
.ani #don06 {bottom: 20%; left: 40%;}
.ani #don07 {bottom: 0; left: 2%;}
.ani #don08 {top: 35%; left: 2%;}
#docard-trigger {width: 50%; text-align: center; font-weight: 500; font-size: 3vw; padding-top: 30vh; padding-bottom: 30vh;}
#docard-button {background-color: var(--color-blue-marine); border-radius: var(--large-border-radius); color: #fff; font-size: 0.8rem; padding: 1rem 2rem; text-decoration: none; margin-top: var(--standard-gap); display: inline-block;}
#docard-button:hover {background-color: var(--color-blue-neon); transition: all 250ms ease-in;}

h2#home-donor-head {text-align: center; font-weight: 500 !important; margin-top: 3rem; font-size: 4vw;}

/* page specific - Drug Spotlights */
.aka {padding-top: 0.5em;}
.aka p {margin: 0; padding: 0; font-size: 14px;}
.aka *:first-child {font-size: 12px;}

/* page specific - Blog */
#blogposts {-moz-column-gap: var(--standard-gap); -webkit-column-gap: var(--standard-gap); column-gap: var(--standard-gap); }
#blogposts .post {break-inside: avoid; border-radius: var(--standard-border-radius);}
#blogposts .odd {background-color: var(--color-blue-sky); color: var(--color-blue-marine);}
#blogposts .even {background-color: var(--color-blue-marine); color: var(--color-blue-sky);}
#blogposts .odd a {color: var(--color-blue-marine);}
#blogposts .even a {color: var(--color-blue-sky);}
#blogposts article {margin-bottom: 1em; padding: 0; width: 100%;}
#blogposts h2 {font-size: calc(12px + .75vw); line-height: 1.5; font-family: 'Roboto', sans-serif; margin-top: 0;}
#blogposts .masonint {padding: 0.5em;}
#blogposts .date {margin-bottom: 0; font-size: calc(10px + 0.5vw); text-align: right; display: block;}
#blogposts {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;}
@media screen and (max-width: 700px) {
	#blogposts {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
}
@media screen and (max-width: 400px) {
	#blogposts {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
}
nav.posts-navigation {margin-top: var(--standard-gap);}
.nav-previous {cursor: pointer; display: inline-block; background-image: url('img/btnarr_marine_left.png'); background-repeat: no-repeat; transition: all 0.25s var(--transition-cubic-bezier);}
.nav-next {cursor: pointer; display: inline-block; background-image: url('img/btnarr_marine.png'); background-repeat: no-repeat; transition: all 0.25s var(--transition-cubic-bezier); float: right;}
.nav-previous:hover {background-image: url('img/btnarr_sky_left.png'); transition: all 0.25s var(--transition-cubic-bezier);}
.nav-next:hover {background-image: url('img/btnarr_sky.png'); transition: all 0.25s var(--transition-cubic-bezier);}
.nav-previous a {display: block; width: 75px; height: 50px; overflow: hidden;}
.nav-next a {display: block; width: 75px; height: 50px; overflow: hidden;}
.posts-nav-link {display: block; margin-top: 80px;}
#blogposts a.blockclicklink {text-decoration: none;}

/* page specific - Board of Directors */
.page-id-7258 .wp-block-media-text,
.page-id-61 .wp-block-media-text {margin-bottom: calc(var(--standard-gap) * 2);}
.page-id-7258 .wp-block-media-text__content h2,
.page-id-61 .wp-block-media-text__content h2 {margin-bottom: 0;}

/* page specific - Partners */
.logo-table { margin: 0 0 35px; }
.logo-table ul { padding: 0; margin: 0; }
.logo-table li { height: 165px; width:25%; padding: 20px 2.77778%; float:left; overflow: hidden; border: 1px solid #D7D7D7; text-align: center; list-style-type: none; list-style-image: none; vertical-align: middle; margin: 0 !important; background-color: #ffffff; box-sizing:border-box;}
.logo-table img { position: relative; max-width: 100%; width: auto; height: auto; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 0;}

/* page specific - Parents Support Hub */
.wp-image-21896, .wp-image-22004 {width: 260px; border: 0 none; border-radius: 0; vertical-align: middle;}
.page-id-13736 #card03-wrap { grid-template-rows: auto; }
.page-id-13740 #card03-wrap { grid-template-rows: auto; }

/* page specific - Search */
.section-find .page-item-13736 ul.children {display: none;}
.section-trouver .page-item-13740 ul.children {display: none;}
.section-find ul.children {margin-top: 0;}
.section-trouver ul.children {margin-top: 0;}
.section-find .page-list .current_page_item > a {font-weight: normal;}
.section-trouver .page-list .current_page_item > a {font-weight: normal;}

/* Substance Colours */
.has-substance-marine-background-color {background-color: var(--color-blue-marine);}
.has-substance-neon-background-color {background-color: var(--color-blue-neon);}
.has-substance-sky-background-color {background-color: var(--color-blue-sky);}
.has-substance-grey-background-color {background-color: var(--color-grey);}
.has-substance-green-background-color {background-color: var(--color-green);}
.has-substance-orange-background-color {background-color: var(--color-orange);}
.has-substance-pink-background-color {background-color: var(--color-pink);}
.has-substance-yellow-background-color {background-color: var(--color-yellow);}

.has-substance-marine-color {color: var(--color-blue-marine);}
.has-substance-neon-color {color: var(--color-blue-neon);}
.has-substance-sky-color {color: var(--color-blue-sky);}
.has-substance-grey-color {color: var(--color-grey);}
.has-substance-green-color {color: var(--color-green);}
.has-substance-orange-color {color: var(--color-orange);}
.has-substance-pink-color {color: var(--color-pink);}
.has-substance-yellow-color {color: var(--color-yellow);}

.res-marine {background-color: var(--color-blue-marine); color: var(--color-blue-sky);}
.res-sky {background-color: var(--color-blue-sky); color: var(--color-blue-marine);}

/* reusable content layouts */
.twocol-fullheight {display: flex; height: 81vh;}


/* french overrides */
html[lang="fr-FR"] #spawn-bubble-text h2 {font-size: 45px;}

@media screen and (max-width: 1000px) {
	#main-wrap {display: block; margin-left: var(--standard-gap); margin-right: var(--standard-gap); width: auto;}
	#column-nav {display: block; width: 100% !important;}
	#column-content {display: block;}
	main#primary {margin-top: calc(var(--standard-gap) * 2);}
	#column-nav-sticky {display: none;}
	#mobile-nav {display: flex; width: 100%; align-items: center;  padding: 15px;background-color: #fff; border-radius: var(--standard-border-radius); margin-bottom: var(--standard-gap);}
	#mobile-nav-logo {width: 200px; height: auto; flex-shrink: 0;}
	#mobile-nav-menu {flex-grow: 1; text-align: right;}
	.no-mobile {display: none !important;}
	.mobile-only {display: inherit !important;}
	
	/* page specific - Home Page */
	.grid-typea-container {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
	}
	#box-video {grid-column: 1 / span 2; grid-row-start: 1; grid-row-end: 2;}
	#box-ani {grid-column: 1 / span 1; grid-row-start: 2; grid-row-end: 3;}
	#box-deco{ grid-column: 2 / span 1; grid-row-start: 2; grid-row-end: 3;}
	#box-style-01 {grid-column: 1 / span 2; grid-row-start: 3; grid-row-end: 3;}
	#box-style-01 h1 {font-size: var(--font-instrument-xlarge) !important;}
	#card01 .jumpanchor span {float: none;}
	#no-parent {width: 100%;}
	.grid-typeb-container {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	#docard-trigger {font-size: 30px;}
	
}

@media screen and (max-width: 900px) {
	/* page specific - Home Page */
	#don04 {display: none;}
}

@media screen and (max-width: 800px) {
	/* page specific - Home Page */
	#card04 .split-left-right {display: block;}
	#card04 .split-left-right > *:first-child {width: 100%; margin-bottom: 1rem;}
	#card04 .split-left-right > *:last-child {width: 100%; padding-left: 0; margin-bottom: 2rem;}
	#card04 .split-left-right > *:last-child a {display: inline-block; margin-top:1rem;}
	#spawn-bubble {width: 600px;}
	#spawn-bubble.bubbleshrink {width: 600px;}
}

@media screen and (max-width: 780px) {
	.hub-intro { background-color: transparent !important; padding: 0 !important; color: var(--color-blue-marine) !important; margin-top: 2.0em !important;}
	.hub-intro h1,
	.hub-intro p,
	.hub-intro a { color: var(--color-blue-marine) !important;}
	.hub-intro-image {text-align: center; border-radius: var(--standard-border-radius);}
	.hub-intro-image img {max-width: 400px !important;}
	.hub-intro .first-col {display: block; max-height: fit-content;}
	
	/* page specific - Drug Spotlights */
	.section-drug-spotlights .hub-intro-image {background-color: var(--color-blue-marine);}
	.section-pleins-feux-sur-les-drogues .hub-intro-image {background-color: var(--color-blue-marine);}
	/* page specific - The Issues */
	.section-issues .hub-intro-image {background-color: var(--color-orange);}
}

@media screen and (max-width: 700px) {
	
	#footer-navs {flex-direction: column;}
	#footer-logo {display: none;}
	.footdesk {display: none;}
	.footmobile {display: inline;}
	
	/* page specific - Home Page */
	#don01 {width: 25%; height: auto; min-width: 92px; max-width: 160px;}
	#don02 {width: 25%; height: auto; min-width: 92px; max-width: 160px;}
	#don03 {width: 12%; height: auto; min-width: 36px; max-width: 60px;}
	#don04 {display: none;}
	#don05 {width: 12%; height: auto; min-width: 36px; max-width: 60px;}
	#don06 {display: none;}
	#don07 {display: none;}
	#don08 {width: 12%; height: auto; min-width: 36px; max-width: 60px;}
	
	/* page specific - Stakeholder/Supporters, Partners, Donors */
	.logo-table li { width: 50%; }
	
}

@media screen and (max-width: 650px) {
	/* page specific - Home Page */
	#card03-wrap {display: block;}
	#card03-wrap.full-height {min-height: auto;}
	#spawn-bubble {display: none;}
	#spawn-bubble.bubbleshrink {width: 100px;}
	#spawn-bubble-text {width: 100%; display: block; position: relative; top: 0; left: 0; transform: translate(0,0); margin-top: 2rem;}
	#spawn-bubble-text nav {width: 100%; border-radius: var(--standard-border-radius); background-color: var(--color-blue-sky); margin-left: var(--standard-gap); margin-right: var(--standard-gap); width: auto; padding: var(--standard-gap);}
	#spawn-bubble-text h2 {margin-top: 0; font-size: 32px;}
	#not-alone-text {width: 100%;}
}

@media screen and (max-width: 600px) {
	.animated-gif img {width: 100% !important; height: auto; margin-bottom: 1em;}
	
	/* page specific - Board of Directors */
	.page-id-61 figure.wp-block-media-text__media {margin-bottom: var(--standard-gap);}
}

@media screen and (max-width: 500px) {
	/* page specific - Home Page */
	#docard-trigger {width: 80%; padding-top: 20vh; padding-bottom: 20vh;}
	.ani #don01 {bottom: 0; right: 8%;}
	.ani #don02 {top: 0; left: 8%;}
	.ani #don03 {top: 15%; right: 25%;}
	.ani #don05 {top: 64%; right: 0;}
	.ani #don08 {top: 80%; left: 2%;}
	#card04 figcaption {font-size: 12px;}
	#box-style-01 h1 {font-size: 30px !important;}
	.hub-link-text { padding-right: 170px ! important; }
}

@media screen and (max-width: 400px) {
	/* page specific - Home Page */
	.francais .ani #don05 {top: 72%; right: 0;}
}


/* -----------------------------------------------------------------------------
Variables
----------------------------------------------------------------------------- */

:root {

--standard-gap: clamp(10px, 1.12vw, 100vw);
--standard-border-radius: 0.85em;
--standard-window-gutter: clamp(10px, 1vw, 100vw);
--standard-nav-li-margin: 0.4rem;
--large-border-radius: calc(var(--standard-border-radius) * 3);

--font-instrument-xlarge: clamp(40px, 7.5vw, 90px);
--font-instrument-large: clamp(28px, 3.0vw, 46px);
--font-instrument-medium: clamp(22px, 1.8vw, 28px);
--font-instrument-standard: 18px;

--transition-cubic-bezier: cubic-bezier(0.38, 0.005, 0.215, 1);

--color-blue-marine: #164264;
--color-blue-neon: #7580ed;
--color-blue-sky: #b7d7f3;
--color-grey: #f4f2f2;
--color-green: #83d580;
--color-orange: #ff9545;
--color-pink:#ff99ff;
--color-yellow: #fff689;

}

h1, h2, h3, h4, h5 {font-family: 'Instrument Sans', sans-serif !important; color: var(--color-blue-marine) !important; }