/*!
Theme Name: dataout
Theme URI: http://underscores.me/
Author: dataout_org
Author URI: http://underscores.me/
Description: Description
Version: 1.0.1
Tested up to: 6.8
Requires PHP: 7.4
Requires Plugins: advanced-custom-fields, donate_dataout, datapage
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dataout
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dataout 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/
*/

/*--------------------------------------------------------------
>>> STYLESHEET ORGANIZATION:
----------------------------------------------------------------
# 01. Global foundations
	- Normalize, box sizing, typography, elements, links, forms
# 02. Shared components
	- Explainers and Bootstrap tooltip overrides
# 03. Site header and navigation
	- Header states, logo, menu, mobile menu, support call
# 04. Front page
	- Carousel, card states, progress indicators, donation card
# 05. Front-page content
	- Cover, featured post, data visualisation, card metadata
# 06. Pages and posts
	- Page content, 404, single posts, datasets, archives
# 07. Ontology content
	- Ontology metadata, body content, vocabulary and entity rules
# 08. Footer and social components
# 09. WordPress-generated components
	- Comments, widgets, media, captions, galleries
# 10. Responsive rules
	- Phone, tablet, desktop, and viewport-specific adjustments
# 11. Plugins and utilities
	- Jetpack, accessibility, alignments

Rule organization within each section:
	- Base and layout
	- Components
	- States and variants
	- Responsive overrides
	- Accessibility and utilities

Note: Rule declarations and cascade order are intentionally preserved.
----------------------------------------------------------------*/

/*--------------------------------------------------------------
# 01. Global foundations: normalize and box sizing
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
	/* Clip horizontal spill without making the content a vertical scroll container. */
	overflow-x: clip;
	overflow-y: visible;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* 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;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

/*--------------------------------------------------------------
# 01. Global foundations: base elements
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: white;
	font-family: 'Roboto Variable', Roboto;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1rem;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

/* Citation blocks */
.wp-block-quote {
	position: relative;
	padding-left: 1.5em;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.wp-block-quote::before {
	content: '\2018';
	position: absolute;
	left: -0.6rem;
	top: -0.06em;
	font-family: sans-serif;
	font-size: 8em;
	font-weight: 900;
	line-height: 1;
}

.wp-block-quote cite {
	font-size: 0.8em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #a4a4a4;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: black;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 currentColor;
  	transition: box-shadow 0.2s;
}

a:visited {
	color: black;
}

a:hover,
a:focus,
a:active {
	color: black;
	box-shadow: inset 0 -2px 0 currentColor;
	outline: 0;
}

/* Explainers */

.explainer {
	cursor: pointer;
	border: 1px solid #000;
	padding: 1px;
}

.explainer_tooltip {
	font-size: 12px !important;
	font-family: 'RobotoMono Variable', monospace !important;
  	font-weight: 300 !important;
	--bs-tooltip-bg: white !important;
	--bs-tooltip-color: black !important;
	--bs-tooltip-border-radius:0 !important;
	--bs-tooltip-opacity: 1 !important;
	border: 1px solid #000; /* border of a tooltip */
}

.tooltip-inner {
	text-align: left !important;
}

/* transforming tooltip triangle into a line */

.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
  right: 0px !important;
  border-color: black !important;
  border-bottom-width: 0px !important;
  border-top-width: 1px !important;
  border-left-width: 1px !important;
}

.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
  left: 0px !important;
  border-color: black !important;
  border-bottom-width: 0px !important;
  border-top-width: 1px !important;
  border-right-width: 2px !important;
}

.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
  top: 0px !important;
  border-color: black !important;
  border-bottom-width: 2px !important;
  border-left-width: 1px !important;
  border-right-width: 0px !important;
}

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
  bottom: 0px !important;
  border-color: black !important;
  border-top-width: 1px !important;
  border-left-width: 1px !important;
  border-right-width: 0px !important;
}


/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# 02. Shared structural rules
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Shared components
--------------------------------------------------------------*/

/* Support header */

/** .support_header{
    display: block;
    background-color: #962b2b;
    height: 22px;
}

#support_header_text{
    display: flex;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}

#support_header_text a{
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: lowercase;
    text-decoration: none;
}

#support_header_text a:hover{
    color: gainsboro;
} **/


/*--------------------------------------------------------------
# 03. Site header and navigation
--------------------------------------------------------------*/

/* Base and layout */

/* header is above cover */

.main-header {
	max-width: 1200px;
	width: 100%;
	padding: 0px !important;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	z-index: 4;
	opacity: 1;
	transition: opacity 1s ease;
}

.header_shell,
.cards_controls {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.header_shell .nav_section {
	--bs-gutter-x: 0;
	padding-left: 0;
	padding-right: 0;
}

.main-header.scrolled-hidden {
	opacity: 0;
}

.main-header.sticky-hidden  {
	position: fixed;
	top: 0;
	opacity: 0;
	pointer-events: none;
}

.main-header.sticky-visible  {
	position: fixed;
	opacity: 1;
	top: 0;
}

.nav_section {
	flex-wrap: nowrap !important;
	height: 80px;
	width: 100%;
	margin: 0 !important;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.header_shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	height: 80px;
	position: relative;
}

.header_actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto;
	min-width: fit-content;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}

.logo {
	max-width: fit-content !important;
	margin: 0px !important;
	padding: 0px !important;
}

.logo a {
	box-shadow: none;
}

.logo a:hover {
	box-shadow: none;
}

#dataout_logo {
	height: 70px;
	background-color: white;
	padding: 10px;
	margin: 12px 0px 0px 0px !important;
}

.menu_btn_col {
	max-width: fit-content !important;
	background-color: white;
	height: 48px;
	padding: 4px !important;
	margin: 12px 0px 0px 0px !important;
	position: relative;
	top: -11px;
	align-items: center;
	display: flex;
}

.toggle_button {
    background: none;
    border: none;
    padding: 0px;
    margin-top: 6px;
}

.toggle_button:focus {
    outline: none;
}

.toggle_button .menu_line {
    width: 40px;
    height: 2px;
    background-color: black;
    display: block;
    margin-bottom: 6px;
    justify-content: flex-end;
    transition: transform 0.3s ease;
}

/* rotate top line */
.menu_line.top.open {
    transform: translateY(3px) rotate(45deg);
}

/* rotate bottom line */
.menu_line.bottom.open {
    transform: translateY(-5px) rotate(-45deg);
}

/* main menu hidden */
.slide_in_menu {
    opacity: 0;
    visibility: hidden;
	position: absolute;
	right: 60px;
	top: 0px;
	max-width: fit-content !important;
	width: auto;
    height: fit-content;
    transition: opacity 0.5s ease;
    z-index: 4;
	padding: 0;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* main menu open */
.slide_in_menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}

.main_menu ul {
    list-style: none;
    margin: 0px !important;
    padding: 0px !important;
}

.main_menu ul li {
    margin: 0px 0px 2px 0px !important;
}

.main_menu ul li a {
    text-decoration: none;
	box-shadow: none;
    color:black !important;
    background-color: white;
    padding: 2px;
    font-family: 'Iosevka Aile Web';
    font-weight: 200;
    font-size: 1.6rem;
	white-space: nowrap;
}

/** support call in menu **/
.menu_support_call a {
    text-decoration: none;
	box-shadow: none;
    color: white !important;
    background-color: black;
    padding: 2px;
    font-family: 'Iosevka Aile Web';
    font-weight: 200;
    font-size: 1.6rem;
	white-space: nowrap;
}

/*--------------------------------------------------------------
# 04. Front page: carousel and card states
--------------------------------------------------------------*/

/* Base and layout */

.cards_place {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
}

.cards_place .single_card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: none;
	transition: opacity 0.55s ease;
	pointer-events: none;
}

.card_hidden {
	opacity: 0;
	transform: none;
	visibility: hidden;
}

.cards_place .single_card.card_active {
	opacity: 1;
	transform: none;
	z-index: 2;
	pointer-events: auto;
	visibility: visible;
}

.cards_place .single_card.card_entering_right {
	opacity: 0;
	transform: none;
	z-index: 3;
	visibility: visible;
}

.cards_place .single_card.card_entering_left {
	opacity: 0;
	transform: none;
	z-index: 3;
	visibility: visible;
}

.cards_place .single_card.card_exiting_left {
	opacity: 0;
	transform: none;
	z-index: 1;
	visibility: visible;
}

.cards_place .single_card.card_exiting_right {
	opacity: 0;
	transform: none;
	z-index: 1;
	visibility: visible;
}

/* Component: progress indicators */
.cards-progress-container {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 6px;
	padding: 0px 12px 0px 0px;
	z-index: 20;
	pointer-events: none;
	box-sizing: border-box;
	--progress-track: rgba(255, 255, 255, 0.22);
	--progress-fill: #ffffff;
}

.cards-progress-container[data-theme='light-card'] {
	--progress-track: rgba(0, 0, 0, 0.18);
	--progress-fill: #111111;
}

.cards-progress-container[data-theme='dark-card'] {
	--progress-track: rgba(255, 255, 255, 0.22);
	--progress-fill: #ffffff;
}

.progress-bar {
    flex: 1;
    height: 2px;
    background: var(--progress-track);
    overflow: hidden;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
	background: var(--progress-fill);
    width: 0%;
}

.progress-bar.active::after {
    animation: progressFill 8s linear forwards;
}

.cards-progress-container.manual-navigation .progress-bar.active::after {
	animation: none;
	width: 100%;
}

.progress-bar.completed::after {
    width: 100%;
	background: var(--progress-fill);
}

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Smooth card transition */
.cards_place .single_card {
	animation: none;
}

/*--------------------------------------------------------------
# 04. Front page: donation card
--------------------------------------------------------------*/

/* Base and layout */

.donate_card {
	height: 100vh;
	height: 100dvh;
	max-width: 1200px;
}

.donate_card::before {
	content: '';
	position: absolute;
	background: black;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.donate_row {
	padding-top: 80px;
	position: relative;
}

.donate_left {
	padding-top: 2rem;
}

.donate_right {
	padding-top: 2rem;
}

.donate_call {
	margin-bottom: 12px;
	font-size: clamp(1.2rem, 5.2vw, 3.6rem);
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 100;
	letter-spacing: 4px;
	line-height: clamp(1.3rem, 5vw, 3.6rem);
}

/* rules for previous donation button */

/* .donate_card_btn {
	background-color: white;
	border: 1px white solid !important;
	border-radius: 0px !important;
	padding: 6px !important;
	text-align: center;
	font-family: 'Iosevka Aile Web' !important;
	letter-spacing: 12px !important;
	font-weight: 200 !important;
	font-size: 1.6rem !important;
	color: black !important;
	width: 230px;
	height: 62px;
	align-content: center;
}

.btn.donate_card_btn:hover {
	color: white !important;
}

.paypal_option_btn {
	position: relative;
	font-size: 0.6rem;
	letter-spacing: 0px;
	justify-content: center;
	display: flex;
	margin: 0px;

}

.text_under_btn {
	font-weight: 100;
	font-size: 0.8rem;
	padding-top: 6px;
	color: #ccc;
} 

.text_under_btn a {
	color: #ccc;
}
*/

.cards_nav_container {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	margin-left: 0;
	z-index: 4;
}

.cards_nav_btns {
	display: flex;
	margin-left: auto;
}

.cards_controls {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: end;
	gap: 0;
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
	padding: 0 12px;
}

.cards_controls .cards_nav_container,
.cards_controls .cards-progress-container {
	pointer-events: auto;
}

.btn_nav {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_nav::before,
.btn_nav::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: black;
}

/* left arrow */

#btn_nav_left {
	margin-right: 4px;
}

.btn_nav.left::before {
    transform: rotate(45deg);
    top: 64%;
    left: 20%;
    transform-origin: center;
}

.btn_nav.left::after {
    transform: rotate(-45deg);
    top: 30%;
    left: 20%;
    transform-origin: center;
}

/* right arrow */
.btn_nav.right::before {
    transform: rotate(45deg);
    top: 30%;
    right: 20%;
    transform-origin: center;
}

.btn_nav.right::after {
    transform: rotate(-45deg);
    top: 64%;
    right: 20%;
    transform-origin: center;
}


/*--------------------------------------------------------------
# 05. Front-page content: cover
--------------------------------------------------------------*/

/* Base and layout */

.cover {
	height: 100vh; /*take all screen minus fixed header*/
	height: 100dvh;
	background-color: #fff;
	align-content: center;
    justify-content: center;
    display: grid;
}

.row.cover_place {
	max-width: 1200px;
	padding-left: 1rem;
  	padding-right: 1rem;
}

.cover_content {
	color: black;
  	font-size: clamp(1.2rem, 3.42vw, 2rem);
	font-family: 'Roboto Variable', sans-serif;
	letter-spacing: 0.8px;
	font-weight: 200;
	line-height: 1.4;
	padding: 12px 12px 12px 18px;
}

.cover_text {
	margin-top: 1rem;
}

.cover_btn {
	background-color: black !important;
	border: 1px black solid !important;
	border-radius: 0px !important;
	padding: 1px !important;
	text-transform: uppercase;
	font-family: 'Roboto Variable', sans-serif !important;
	letter-spacing: 0.8px !important;
	font-weight: 200 !important;
	font-size: inherit !important;
	color: white !important;
	box-shadow: none;
}

.cover_btn:hover {
	background-color: white !important;
	border: 1px black solid !important;
	color: black !important;
	box-shadow: none;
}

.cover_btn:focus {
	border: 1px black solid !important;
}

/*--------------------------------------------------------------
# 05. Front-page content: featured post and data visualisation
--------------------------------------------------------------*/

/* Base, components, and metadata */

.featured-post {
    min-height: 100vh; /* Full viewport height */
	min-height: 100dvh;
    background-size: cover;
    background-position: center; /* Center the image */
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative; /* Position relative to contain inner elements */
    max-width: 100% !important;
    display: grid;
}

.featured-post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	/* A readable dark veil, with a solid-black fade at the bottom. */
	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 0) 20%
		),
		linear-gradient(
			to top,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 0) 20%
		),
		rgba(0, 0, 0, 0.84);
    z-index: 1;
}

.featured-post-content {
	display: grid;
	position: relative;
    z-index: 2; /* text is on top of the overlay */
    max-width: 1200px;
    padding: 12px 12px 0px 12px;
    justify-self: center;
}

.featured_post_heading {
	margin:0px 0px 2px 0px !important;
}

.datavis_place {
	height: fit-content !important;
}

.col-md-12.datavis {
	padding: 0px !important;
}

/* styles for datavis on featured cards */
.cover_number_counter {
	font-family: 'Iosevka Aile Web';
	font-size: clamp(3rem, 20vw, 8rem);
	letter-spacing: -4px;
	font-weight: 200;
  	margin-bottom: -60px;
}

.cover_number_label {
	position: absolute;
	padding-top: 4px;
	font-size: 1.2rem;
	font-family: 'Iosevka Aile Web';
	font-weight: 100;
}
/**/

.headings_place {
	max-width: 100% !important;
}

.headings {
	max-width: 100vw;
}

.headings h1 {
	color: #fff;
	text-decoration: none;
	font-family: 'Iosevka Aile Web', 'Roboto', monospace;
	font-weight: 200;
	letter-spacing: -2.6px;
	font-size: clamp(2rem, 3.4vw, 3rem);
}

.headings h1 a {
	color: #fff;
	text-decoration: none;
	box-shadow: none;
}

.headings h1 a:focus {
	outline: none !important;
}

.headings h2 {
    color: #fff;
}

.post-excerpt {
	color: white;
	font-family: 'Roboto Variable', sans-serif;
	letter-spacing: 0.2px;
	font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
	margin: 12px 0px 0px 0px !important;
	font-weight: 100;
}

.post_read_more {
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 100;
	border: none;
	color: inherit;
	text-decoration: none;
}

.post_read_more:hover {
	color: inherit !important;
}

.post_read_more:visited {
	color: inherit !important;
}

.post_read_more:active {
	color: inherit !important;
}

.featured_categories_place {
	max-width: fit-content;
	margin-top: 1rem;
}

.featured-post-categories {
	font-family: 'Roboto Variable', sans-serif;
	font-size: 16px;
	font-weight: 100;
	letter-spacing: 0.2px;
}

.featured-post-categories a {
	color: inherit;
	margin-right: 10px;
	text-decoration: none;
	padding: 1px;
	border: 0.5px white solid;
	box-shadow: none;
}

.featured-post-categories a:hover {
    text-decoration: none;
	box-shadow: none;
}

.img_credit_place {
	width: fit-content;
	z-index: 10 !important;
	position: relative;
}

/* Featured-post-only layout: keep metadata together and credits above the controls. */
.featured-post .featured-post-content {
	align-items: start;
	align-content: stretch;
	grid-template-rows: 20% auto auto 1fr;
	padding-bottom: 64px;
}

.featured-post .datavis_place {
	height: auto !important;
	min-height: 0;
	overflow: visible;
	grid-row: 1;
}

.featured-post .headings_place {
	grid-row: 2;
}

.featured-post .featured_categories_place {
	grid-row: 3;
}

.featured-post .img_credit_place {
	grid-row: 4;
	align-self: end;
}

/* Grey Rainbow project card */
.greyrainbow-card {
	min-height: 100vh;
	min-height: 100dvh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	max-width: 100% !important;
	display: grid;
}

.greyrainbow-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%),
		linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%),
		rgba(0, 0, 0, 0.84);
	z-index: 1;
}

.greyrainbow-card-content {
	display: grid;
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	padding: 12px 12px 0;
	justify-self: center;
}

.greyrainbow-card .greyrainbow-card-content {
	align-items: start;
	align-content: stretch;
	grid-template-rows: 20% auto auto 1fr;
	padding-bottom: 64px;
}

.greyrainbow-card-headings-place {
	grid-row: 2;
	max-width: 100% !important;
}

.greyrainbow-card-headings {
	max-width: 100vw;
}

.greyrainbow-card-heading {
	margin: 0 0 2px !important;
	font-family: 'Iosevka Aile Web', 'Roboto', monospace;
	font-weight: 200;
	letter-spacing: -2.6px;
	font-size: clamp(2rem, 3.4vw, 3rem);
}

.greyrainbow-card-heading a {
	color: #fff;
	text-decoration: none;
	box-shadow: none;
}

.greyrainbow-card-heading a:hover {
	box-shadow: none;
}

.greyrainbow-card-excerpt {
	margin: 12px 0 0 !important;
	color: #fff;
	font-family: 'Roboto Variable', sans-serif;
	letter-spacing: 0.2px;
	font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
	font-weight: 100;
}

/*.img_credit {
}*/
 
.img_credit_text {
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 100;
	font-size: 0.72rem;
	margin: 0px 0px 12px 0px;
	color: #ccc;
}

.img_credit_text a {
	color: #ccc;
	text-decoration: none;
	box-shadow: none !important;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/*--------------------------------------------------------------
# 06. Pages and posts
--------------------------------------------------------------*/

/* Base and layout: posts and pages
--------------------------------------------- */

#primary {
  opacity: 0;
  transition: opacity 1s ease-in;
}

#primary.loaded {
  opacity: 1;
}


.page_single {
	max-width: 1200px !important;
	padding-top: 80px !important;
  	padding-bottom: 40px !important;
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 260;
	font-size: 1.2rem !important;
	color: black;
}

/* Page content uses one Bootstrap row, while post headings use a nested row.
 * Neutralise only that extra post-row offset so both content types begin at
 * the container's native horizontal gutter on every screen size. */
.post_single .single_post_container > .single_post_header {
	margin-left: 0;
	margin-right: 0;
}

.page_single h1.wp-block-heading {
	font-family: 'Iosevka Aile Web';
	font-size: 3.2rem;
	color: white;
	background-color: black;
	width: fit-content;
	padding: 4px;
	margin: 12px 0px 12px 0px;
	font-weight: 200;
	text-transform: lowercase;
}

.page_single h2.wp-block-heading {
	font-family: 'Iosevka Aile Web';
	font-size: 1.6rem;
	font-weight: 300;
	margin-bottom: 0.6em;
}

/* L font in Gutenberg for lead text */
.has-large-font-size {
	font-size: 1.6rem !important;
}

.page_single p {
	padding-left: 0px !important;
}

/* Gutenberg page blocks are direct children of `.row.entry-content`, which
 * otherwise adds a second horizontal Bootstrap gutter. Post content does not
 * have that extra row level, so remove it for equal screen-edge spacing. */
.page_single .entry-content {
	--bs-gutter-x: 0;
}

/* numbered list */

.page_single ol {
    list-style: none;
    counter-reset: custom-counter;
    padding: 12px 0px 0px 0px;
    margin: 0px;
}

.page_single ol li {
    position: relative;
    counter-increment: custom-counter;
    padding-left: 2.8rem;
    margin-bottom: 1rem;
}

.page_single ol li::before {
    content: counter(custom-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Last updated */

.page_last_updated {
	font-size: 12px;
	color: grey;
	margin-left: 2px;
	padding: 20px 0px 0px 0px;
	letter-spacing: 1.2px;
}

/* page About: contact icons for board members */
.board_contact {
	padding: 2px 8px 2px 0px;
	background-color: transparent !important;
	color: black !important;
	border: none !important;
	font-size: 1rem !important;
}

/* 404 page */

.not_found_page_title {
	font-size: 4rem;
}

/* SINGLE POST */

.post_single {
	max-width: 1200px !important;
	padding-top: 80px !important;
	padding-bottom: 40px !important;
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 260;
	font-size: 1.2rem !important;
	color: black;
}

.single_post_header {
	margin: 40px 0px 20px 0px;
}

.single_post_header h1 {
	background-color: black;
	padding: 4px;
	margin: 0px;
	color: white;
	font-family: 'Iosevka Aile Web';
	font-weight: 200;
	font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem);
	letter-spacing: -2.6px;
}


.single_post_container p {
	padding-left: 0px !important;
}

.single_post_container h2.wp-block-heading {
	font-family: 'Iosevka Aile Web';
	font-size: 1.6rem;
	font-weight: 300;
	margin-bottom: 1em;
	margin-top: 1em ;
}

.single_post_meta {
	font-size: 1rem;
	padding: 0px;
	margin-top: 6px;
	width: fit-content;
}

.ontology-meta-head {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1rem 0;
	padding: 0;
	gap: 0.5rem;
	display: flex;
	flex-direction: column;
}

.ontology-meta-row {
	display: flex;
	padding: 0px;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	line-height: 1.35;
}

.ontology-meta-row-primary img,
.ontology-meta-row-download img {
	height: 20px;
	vertical-align: middle;
}

.ontology-license {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
}

.ontology-meta-row-version .ontology-separator {
	opacity: 0.6;
}

.ontology-label {
	font-weight: 500;
}

.ontology-doi-badge a {
	box-shadow: none;
}

.ontology-doi-badge a:hover {
	box-shadow: none;
}

.ontology-github-link a {
	box-shadow: none;
}

.ontology-github-link a:hover {
	box-shadow: none;
}

.ontology-download-badges a {
	box-shadow: none;
}

.ontology-download-badges a:hover {
	box-shadow: none;
}

.ontology-cite-text {
	font-style: italic;
}

.post_date {
	letter-spacing: 0.2px;
	width: fit-content;
	padding-right: 12px;
}

.single_post_cats_tags {
	font-weight: 200;
	letter-spacing: 0.2px;
	width: fit-content;
	padding-left: 12px;
    padding-right: 12px;
}

.single_post_cats_tags a {
	background-color: black;
	color: white;
	margin-right: 10px;
	text-decoration: none;
	padding: 1px;
	border: 1px black solid;
	box-shadow: none;
}

.single_post_cats_tags a:hover {
	background-color: white;
	color: black;
    text-decoration: none;
	border: 1px black solid;
	box-shadow: none;
	transition: background-color 0.2s;
}

.available_langs {
	text-transform: none;
}

.lang-switcher {
	display: flex;
	list-style: none;
	text-transform: uppercase;
  	padding: 0px 12px 0px 12px;
  	width: fit-content;
}

.lang-switcher li {
	padding: 0px 4px 0px 4px;
}

.lang-switcher li a {
	  text-decoration: none;
	  color: white;
	  padding: 1px;
}

.lang-switcher li.current-lang {
    background-color: white;
}

.wp-block-image figcaption {
	font-size: 1rem;
}

.post_author {
	margin-left: auto;
	width: fit-content;
	max-width: 100%;
}

.author_name {
	align-items: center;
	display: inline-flex;
}

.author_name_text {
	padding: 0px 0px 0px 4px;
	font-family: 'Iosevka Aile Web';
	font-size: 1rem;
}

/*--------------------------------------------------------------
# 06. Pages and posts: archive
--------------------------------------------------------------*/

/* Base and layout */

.archive_page {
	max-width: 1200px !important;
	padding-top: 80px !important;
	padding-bottom: 40px !important;
	font-family: 'Roboto Variable', sans-serif;
	font-weight: 260;
	font-size: 1rem !important;
	color: black;
}

.archive_page_header h1 {
	font-family: 'Iosevka Aile Web';
	font-size: 3.2rem;
	color: white;
	background-color: black;
	width: fit-content;
	padding: 4px;
	margin: 40px 0px 20px 0px;
	font-weight: 200;
	text-transform: lowercase;
}

.single_post_card {
	border: 1px black solid;
	border-radius: 0;
}

.card_post_title {
	font-family: 'Iosevka Aile Web';
	font-weight: 200;
	font-size: 2rem;
	letter-spacing: -2.6px;
}

.card_post_title a {
	text-decoration: none;
	box-shadow: none;
}

.card_post_title a:hover {
	box-shadow: none;
}

.card_single_post_meta {
	font-size: 1rem;
	padding: 0px;
}

.card_post_date {
	letter-spacing: 1.2px;
	font-size: 0.8rem !important;
	align-self: center;
	display: inline-flex;
}

.single_card_text {
	padding: 12px 0px 0px 0px;
}

.card_post_source {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 1rem;
	background-color: black;
	padding: 4px;
	margin: 0px;
	width: fit-content;
	color: white;
}

.external_icon {
	padding-right: 6px;
}

/*--------------------------------------------------------------
# 06. Pages and posts: donation page
--------------------------------------------------------------*/

/* Base and layout */

.donation_block {
	margin: 0px;
	max-width: 100%;
	padding: 0px;
}

.donation_row {
	display: flex;
	flex-wrap: wrap;
	margin-left: 0px;
	margin-right: 0px;
}

.donation_option {
	box-sizing: border-box;
	border: 1px black solid;
	margin: 0px 12px 12px 0px;
	max-width: calc(50% - 24px) !important;
	flex: 0 0 calc(50% - 24px) !important;
	padding: 0px !important;
}

.donation_option h1 {
	margin-top: 10px;
	font-family: 'Iosevka Aile Web';
	font-size: 2rem;
	font-weight: 300;
}

.donation_option p {
	font-size: 1rem !important;
}

.donation_card_link {
	color: black !important;
	text-decoration: none !important;
	border: none !important;
}

.donation_card_link :hover {
	background-color: black !important;
	color: white;
	transition: background-color 0.2s;
  }

.donation_option_inner {
	padding: 20px;
	height: 100%;
}

.donation_option_static {
	padding: 20px;
	height: 100%;
}

.copy_bank_details {
	color: black;
	border: 1px black solid;
	cursor: pointer;
}

/* UP button */

.btn_up_container {
	max-width: 1200px;
	width: 100%;
	position: fixed;
	bottom: 38px;
	height: 48px;
	box-sizing: border-box;
	display: block;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 4;
	transition: opacity 1s ease;
	opacity: 0;
	pointer-events: none;
}

.btn_up_container.show {
	opacity: 1;
	pointer-events: none;
}

.btn_up {
	position: absolute;
	top: 0;
	width: 48px;
	height: 48px;
	background-color: #fff;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 12px;
	pointer-events: auto;
}

.btn_up::before {
	content: '';
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	background: url('arrow-up.png') center / contain no-repeat;
}

.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.entry-meta {
	max-width: fit-content;
}

/*--------------------------------------------------------------
# 07. Ontology content
--------------------------------------------------------------*/

/* Base, generated content, and navigation */

.toc-first-level {
	margin: 1em 0em 1em 0em !important;
}

#toc li {
	display: block;
	margin: 0.2em;
}

#toc ul {
	margin: 0em;
	padding-left: 1em;
}

.ontology-body .hlist {
	padding: 0px;
}

.ontology-body ul {
	margin: 1em ;
}

.ontology-body li {
	display: inline-table;
	list-style-type: none;
	padding-right: 14px;
}

.ontology-body sup {
	color: #7c7c7c;
	font-size: 1rem;
	top: -0.8em;
	cursor: help;
}

.ontology-body h2 {
	margin: 0.8em 0em 0.6em 0em;
}

.ontology-body h3 {
	margin: 0.8em 0em 0.6em 0em;
	font-size: calc(1rem + .6vw);
}

.ontology-body h4 {
	margin: 1em 0em 1em 0em;
}

.description {
	font-size: 1rem;
	margin: 1em 0em 1em 1em;
	padding: 18px 0px 1px 18px;
	background: #f9f9f9;
}

#description img {
	max-width: 96%;
	padding: 1em 0em 1em 0em;
}

.description dd {
	margin: 0em 0em 1em 1em;
}

.description sup {
	font-size: 0.6rem;
}

.ontology-vocabularies {
	margin-top: 2em;
}

.ontology-vocabulary,
.ontology-vocabulary-term {
	margin: 1em 0;
	border: 1px solid #e1e1e1;
	background: #fff;
}

.ontology-vocabulary > summary,
.ontology-vocabulary-term > summary {
	padding: 0.7em 1em;
	cursor: pointer;
	font-weight: 600;
}

.ontology-vocabulary > summary {
	font-size: calc(1rem + .2vw);
}

.ontology-vocabulary-iri,
.ontology-vocabulary-term-content {
	padding: 0 1em;
}

.ontology-vocabulary-term {
	margin: 0.8em 1em;
	font-size: 1rem;
}

.ontology-vocabulary-term-content {
	padding-bottom: 0.8em;
}

.ontology-vocabulary-term-content .description {
	margin-left: 0;
}

.ontology-vocabulary-note {
	padding: 1rem 0rem 0rem 0rem;
}

.ontology-vocabulary-term-content ul {
	padding: 0px;
}

.ontology-vocabulary-term-content li {
	display: list-item;
}

.backlink {
	font-size: 0.8rem;
	text-align: right;
	float: right;
	color: black;
	padding: 4px;
	border: 1px dotted black;
	font-weight: 300;
}

#changelog {
	margin: 1em 0em 1em 0em;
}

#changelog ul {
	font-size: 0.9em;
}

#changelog li {
	display: list-item;
}


/*--------------------------------------------------------------
# 08. Footer and social components
--------------------------------------------------------------*/

/* Base and layout */

.site_footer {
	background-color: black;
	z-index: 2;
}

.footer_row {
	padding: 40px 0px 12px 0px;
}

.footer_row_2 {
	font-size: 14px;
	padding: 0px 0px 20px 0px;
}

.footer_content {
	background-color: black;
	margin-left: auto;
  	margin-right: auto;
	max-width: 1200px;
	font-family: 'Roboto Variable', sans-serif;
  	font-weight: 200;
  	color: white !important;
}

.footer_content.socials {
	margin-bottom: 12px;
}

.footer_content.info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	column-gap: 1rem;
	row-gap: 0.25rem;
}

.footer_content.info .donate_card_footer_row_text {
	width: auto;
	max-width: none;
	margin: 0;
}

/* Footer links stay in one row when there is room. */
.footer_row_2 .footer_content.info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

.footer_content a {
	color: white !important;
	text-decoration: none;
	box-shadow: none;
}

.footer_content a:hover {
	box-shadow: none;
}

.footer_socials a {
	text-decoration: none;
	border: 1px black solid;
	padding: 1px;
	box-shadow: none;
}

.footer_socials a:hover {
	border: 1px white solid;
	transition: border 0.2s;
}

.first_social_link {
	margin-left: 0px !important;
}

.footer_support_call {
	width: min(400px, 100%);
	line-height: 2rem;
	letter-spacing: 2px;
	font-weight: 200;
	font-size: 1.8rem;
	margin: 0px 0px 12px 0px !important;
}

.text_above_socials {
	font-size: 1.2rem !important;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.social_icon {
	border: 0px !important;
	margin: 0px 12px 0px 0px;
	color: white !important;
}

.social_icon:hover {
	border: 0px !important;
}

.patreon_icon {
	width: 16px;
}

/* .footer_btn {
	background-color: white;
	border: 1px white solid !important;
	border-radius: 0px !important;
	padding: 6px !important;
	text-align: center;
	font-family: 'Iosevka Aile Web' !important;
	letter-spacing: 12px !important;
	font-weight: 200 !important;
	font-size: 1.6rem !important;
	color: black !important;
	width: 200px;
}

.footer_btn:hover {
	color: white !important;
} */

.donate_card_footer_row_text {
	margin-bottom: 4px;
}


.footer_donate_place {
	margin-bottom: 20px !important;
	justify-content: start;
	display: grid;
}

.footer_socials {
	margin-bottom: 0px !important;
	padding-right: 4px !important;
}

.footer_socials_icons {
	display: none;
}

.footer_socials_p {
	margin-bottom: 12px;
}

.footer_row_2_text {
	margin-bottom: 6px;
}

/*--------------------------------------------------------------
# 09. WordPress-generated components
--------------------------------------------------------------*/

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0px;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
# 10. Responsive rules
--------------------------------------------------------------*/

/* Ontology content: mobile overrides */
@media (max-width: 767.98px) {
	.ontology-meta-row {
		gap: 0.5rem;
	}

	.ontology-meta-row-version .ontology-separator {
		display: none;
	}

	/* Keep long ontology IRIs and vocabulary descriptions inside the viewport. */
	.ontology-body .entity p,
	.ontology-vocabularies .ontology-vocabulary-iri,
	.ontology-vocabularies .ontology-vocabulary-term-content > span {
		display: block;
		font-size: 0.8rem;
		max-width: 100%;
		min-width: 0;
		white-space: preserve-spaces;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.ontology-body h3 .backlink,
	.ontology-body h4 .backlink {
		display: block;
		float: none;
		width: fit-content;
		margin-top: 0.4rem;
		text-align: left;
	}

	.ontology-body .entity p,
	.ontology-vocabularies .ontology-vocabulary-iri,
	.ontology-vocabularies .ontology-vocabulary-term-content > span {
		clear: both;
		margin-top: 0.4rem;
	}

	.ontology-body .entity p a,
	.ontology-vocabularies .ontology-vocabulary-iri a,
	.ontology-vocabularies .ontology-vocabulary-term-content > span a {
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-all;
	}

	.ontology-body .entity p strong,
	.ontology-vocabularies .ontology-vocabulary-iri strong,
	.ontology-vocabularies .ontology-vocabulary-term-content > span strong {
		white-space: nowrap;
	}

	.ontology-body .entity p strong::after,
	.ontology-vocabularies .ontology-vocabulary-iri strong::after,
	.ontology-vocabularies .ontology-vocabulary-term-content > span strong::after {
		content: '\00a0';
	}

	.ontology-vocabulary,
	.ontology-vocabulary-term,
	.ontology-vocabulary-term-content {
		min-width: 0;
		max-width: 100%;
	}

	.ontology-body .description,
	.ontology-vocabularies .description {
		margin-left: 0;
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* Donation page: mobile overrides */
@media (max-width: 767.98px) {
	.donation_option {
		max-width: calc(100% - 24px) !important;
		flex-basis: calc(100% - 24px) !important;
	}
}

/* Shared layout: medium-width override */
@media (max-width: 1199.98px) {
	.btn_up_container {
		width: 100%;
	}
}

/* Base and component overrides */
@media (max-width: 575.98px) {

	.row.cover_place {
		padding-top: 2rem;
	}

	.donate_right {
  	padding-top: 0px;
  	padding-left: 0px;
  	}
    .donate_left {
	padding-top: 40px;
	}

	.featured-post-categories {
		font-weight: 200;
	}

	.img_credit_text {
			font-weight: 200;
		}
	.img_credit {
		line-height: 1rem;
	}
	.img_credit_place {
		max-width: 280px;
	}
	.has-large-font-size {
		font-size: 1.4rem !important;
	}

	.single_post_cats_tags {
		padding-top: 6px;
	}

	.footer_socials {
		text-align: start !important;
	}

	.footer_socials_text {
		display: none;
	}

	.footer_socials_icons {
		display: block;
		margin: 0;
	}

	.mb-0.footer_support_call {
		margin-bottom: 1rem !important;
	}
}

/*--------------------------------------------------------------
# 10. Responsive rules: phones
--------------------------------------------------------------*/

/* Base and component overrides */
@media (max-width: 767.98px) {
	/* Keep the carousel behind Safari's browser controls and home indicator. */
	body.home {
		background-color: #000;
	}

	.dataset-readme-content ul,
	.dataset-readme-content li {
		margin-left: 0;
		padding-left: 0;
		max-width: 100%;
		box-sizing: border-box;
		white-space: normal;
	}

	/* Break long DOI, URL, email, and README links instead of letting them
	 * overflow the dataset content area on narrow screens. */
	.post_single .entry-content,
	.dataset-readme-content {
		min-width: 0;
		max-width: 100%;
	}

	.post_single .entry-content a,
	.dataset-readme-content a {
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: break-all;
	}

	ul, ol {
		margin: 0 0 0.5em 0.5em !important;
	}

	blockquote {
		margin: 0em;
	}

	.dataset-readme-content ol {
		margin-left: 1rem;
	}

	.cards_place,
	.donate_card,
	.featured-post,
	.greyrainbow-card {
		min-height: 100svh;
		min-height: 100dvh;
	}

	.cards_place {
		background-color: transparent;
	}

	.row.cover_place {
		padding-top: 2rem;
	}

	.featured-post-categories {
		font-weight: 200;
	}

	.img_credit_text {
		font-weight: 200;
	}
	.img_credit {
		line-height: 1rem;
	}
	.img_credit_place {
		max-width: 280px;
	}

	.donate_card {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.donate_card_socials {
		margin-bottom: 0rem ;
	}

	.featured-post .featured-post-content {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	.greyrainbow-card-content {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* Keep the project card's top and bottom black fades visible on mobile. */
	.greyrainbow-card {
		background-color: #000;
	}

	/* .greyrainbow-card::before {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.84);
		background-image:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 1) 0%,
				rgba(0, 0, 0, 0) 20%
			),
			linear-gradient(
				to top,
				rgba(0, 0, 0, 1) 0%,
				rgba(0, 0, 0, 0) 20%
			);
	} */

	/* Featured-card text is too tall for small screens; the title and link remain available. */
	.post-excerpt {
		display: none;
	}

	.donate_left {
		padding-top: 24px;
	}

	.footer_socials {
		text-align: start !important;
	}

	.footer_socials_text {
		display: none;
	}

	.footer_socials_icons {
		display: block;
		margin: 0;
	}

	.donate_call {
		font-weight: 200;
		letter-spacing: 1px;
	}

	.footer_content.info,
	.footer_content.info .donate_card_footer_row_text {
		font-size: 0.9rem;
    	line-height: 1.4;
		text-wrap: nowrap;
		width: 66%;
  		margin-left: 0;
	}

	.footer_row_2 .footer_content.info {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.has-large-font-size {
		font-size: 1.4rem !important;
	}

	.mb-0.footer_support_call {
		margin-bottom: 1rem !important;
	}

	.single_post_header {
		margin: 12px 0px 12px 0px;
	}

	.archive_page_header h1 {
		margin: 12px 0px 12px 0px;
		font-size: 2.4rem;
	}

	.card_post_title {
		font-size: 1.6rem;
	}

	.card-body {
		padding: 0.4rem;
	}

	.btn_up_container {
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}
}

/* Leave room for the complete donation card on short phone viewports. */
@media (max-width: 767.98px) and (max-height: 600px) {
	.cards_controls {
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.row.cover_place {
		padding-top: 2rem;
	}

	.footer_content.info,
	.footer_content.info .donate_card_footer_row_text {
		font-size: 0.9rem;
		line-height: 1.15;
	}

	.featured-post-categories {
		font-weight: 200;
	}
	.img_credit_text {
		font-weight: 200;
	}
	.img_credit {
		line-height: 1rem;
	}
	.img_credit_place {
		max-width: 280px;
	}

	.has-large-font-size {
		font-size: 1.4rem !important;
	}
}


/*--------------------------------------------------------------
# 10. Responsive rules: tablets
--------------------------------------------------------------*/

/* Base and component overrides */
/* Reserved breakpoint; no active declarations currently present.
@media (min-width: 768px) and (max-width: 991.98px) {
}
*/

/* Mobile landscape */
@media (min-width: 768px) and (max-width: 991.98px) and (max-height: 416px) {
  /* Styles for tablets */

  .donate_call {
  	max-width: 80%;
  }

}

/*--------------------------------------------------------------
# 10. Responsive rules: large screens
--------------------------------------------------------------*/

/* Base and component overrides */
/* Reserved breakpoint; no active declarations currently present.
@media (min-width: 992px) and (max-width: 1199.98px) {
}
*/

/*--------------------------------------------------------------
# 10. Responsive rules: extra-large screens
--------------------------------------------------------------*/

/* Base and component overrides */
/* Reserved breakpoint; no active declarations currently present.
@media (min-width: 1200px) {
}
*/




/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# 11. Plugins and integrations
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# 11. Utilities and accessibility
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}