@charset "UTF-8";
/*!
Theme Name: DSS NIAGADS
Theme URI: http://underscores.me/
Author: Li-San Wang Lab
Author URI: http://www.med.upenn.edu/wanglab/
Description: A theme for NIAGADS DSS public site
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dss-niagads
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 with others.

DSS NIAGADS is based on Underscores https://underscores.me/, (C) 2012-2017 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/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Pages, posts and CPT
# Content
	## Posts and pages
	## Comments
# Modal
# Infinite scroll
# Media
	## Captions
	## Galleries


--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | 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;
	/* 1 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
}

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

/**
 * 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 {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
	/* 2 */
}

/**
 * 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;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/* 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;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
	/* 2 */
}

/**
 * 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;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/**
 * 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;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
}

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

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * 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 {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	/* 1 */
	color: inherit;
	/* 2 */
	display: table;
	/* 1 */
	max-width: 100%;
	/* 1 */
	padding: 0;
	/* 3 */
	white-space: normal;
	/* 1 */
}

/**
 * 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"] {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}

/**
 * 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"] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}

/**
 * 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;
	/* 1 */
	font: inherit;
	/* 2 */
}

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

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* libre-franklin-300 - latin */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 300;
	src: url('./fonts/libre-franklin-v7-latin-300.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/libre-franklin-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/libre-franklin-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-300.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/libre-franklin-v7-latin-300.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  }
  /* libre-franklin-regular - latin */
  @font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/libre-franklin-v7-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/libre-franklin-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/libre-franklin-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/libre-franklin-v7-latin-regular.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  }
  /* libre-franklin-700 - latin */
  @font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 700;
	src: url('./fonts/libre-franklin-v7-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/libre-franklin-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/libre-franklin-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/libre-franklin-v7-latin-700.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  }
  /* libre-franklin-italic - latin */
  @font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-weight: 400;
	src: url('./fonts/libre-franklin-v7-latin-italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/libre-franklin-v7-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/libre-franklin-v7-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-italic.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/libre-franklin-v7-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/libre-franklin-v7-latin-italic.svg#LibreFranklin') format('svg'); /* Legacy iOS */
  }


  /* raleway-300 - latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 300;
	src: url('./fonts/raleway-v19-latin-300.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/raleway-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/raleway-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/raleway-v19-latin-300.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/raleway-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/raleway-v19-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-regular - latin */
  @font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: url('./fonts/raleway-v19-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/raleway-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/raleway-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/raleway-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/raleway-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/raleway-v19-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-700 - latin */
  @font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: url('./fonts/raleway-v19-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/raleway-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/raleway-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/raleway-v19-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/raleway-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/raleway-v19-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  /* raleway-italic - latin */
  @font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 400;
	src: url('./fonts/raleway-v19-latin-italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('./fonts/raleway-v19-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./fonts/raleway-v19-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./fonts/raleway-v19-latin-italic.woff') format('woff'), /* Modern Browsers */
		 url('./fonts/raleway-v19-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./fonts/raleway-v19-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }

  

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: "Raleway", "Libre Franklin", sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

@media screen and (min-width: 1920px) {
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 1.125em;
	}
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: "Libre Franklin", "Raleway", sans-serif;
	color: #666666;
	line-height: 1.2;
}

h1 {
	font-size: 2.25em;
	margin: .25em 0 1.2em;
}

h2 {
	font-size: 1.875em;
	margin: .25em 0 1em;
}

h3 {
	font-size: 1.6em;
	margin: .25em 0 .5em;
}

h4 {
	font-size: 1.4em;
	margin: .25em 0 .5em;
}

h5 {
	font-size: 1em;
	margin: .25em 0;
}

h6 {
	font-size: 1em;
	margin: .25em 0;
	font-weight: 400;
	text-decoration: underline;
}

p {
	margin-top: 0;
	margin-bottom: 1.5em;
}

.no-bottom-margin,
p.no-bottom-margin {
	margin-bottom: 0;
}

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

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: .75em 0 1em;
	max-width: 100%;
	overflow: auto;
	padding: .375em .25em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	background-color: #eee;
	padding: 2px;
}

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

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

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}

:root {
 
    --orange: #ee6c4d;
    --orange-dark: #a54c36;
    --cyan-light: #e0fbfc;
    --blue-light: #98c1d9;
    --blue: #3d5a80;
    --blue-dark: #293241;
    --grey-light: #f9f9f9;
    --grey-semi: #e6e6e6;
    --grey: #939393;
    --grey-semi-dark: #7e7e7e;
    --grey-dark: #666;
}


body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
	-webkit-print-color-adjust: exact;
}

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

::-moz-selection {
	background: #f1b154;
}

::selection {
	background: #f1b154;
}

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

ul {
	list-style: disc;
}

ul.clean-list, ul.inline-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ul.inline-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

ul.inline-list li {
	display: inline-block;
}

ul.inline-list li a {
	padding: 0 .5em;
}

ol {
	list-style: decimal;
}

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

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 2em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	border-collapse: collapse;
	margin: 0 0 0.25em;
	width: 100%;
	font-size: 90%;
}

thread th {
	border-bottom: 2px solid #bbb;
	padding-bottom: .5em;
}

td,
th {
	vertical-align: top;
	border: 1px solid #ececec;
}

th {
	padding: .4em;
	text-align: left;
}

td {
	padding: .4em;
}
.table::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table::-webkit-scrollbar:vertical {
    width: 11px;
}

.table::-webkit-scrollbar:horizontal {
    height: 11px;
	
}

.table::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid fff; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.table::-webkit-scrollbar-track { 
    background-color: #f3f3f3; 
    border-radius: 8px; 
} 

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.button {
	display: inline-block;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.everest-forms button.button[type=submit], 
.everest-forms input[type=submit] {
	border: 1px solid;
	border-color: #618eb5;
	background: transparent;
	color: #618eb5;
	font-size: 0.9em;
	line-height: 1;
	padding: .75em 1.375em;
	-webkit-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
	text-decoration: none;
	cursor: pointer;
	vertical-align: top;
}

@media screen and (min-width: 1920px) {
	.button,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.everest-forms button.button[type=submit], 
	.everest-forms input[type=submit]
	 {
		font-size: 1em;
	}
}

.button:hover, .button:active, .button:focus,
button:hover,
button:active,
button:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
.everest-forms button.button[type=submit]:hover, 
.everest-forms button.button[type=submit]:active, 
.everest-forms button.button[type=submit]:focus, 
.everest-forms input[type=submit]:hover, 
.everest-forms input[type=submit]:active, 
.everest-forms input[type=submit]:focus {
	background: #618eb5;
	color: #fff;
}

.btn-blue {
	background-color: #618eb5;
	color: #fff;
}
.btn-blue:hover {
	background-color: #3d5263;
	color: #fff;
}
.btn-100 {
	width: 100%;
	text-align: center;
}

.btn-yellow {
	border-color: #ffc665;
	color: #ffc665;
}

.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
	background: #ffc665;
	color: #fff;
}

.btn-red {
	border-color: #b55a37;
	color: #b55a37;
}

.btn-red:hover, .btn-red:active, .btn-red:focus {
	background: #b55a37;
	color: #fff;
}

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: 0px;
	padding: .25em;
	max-width: 100%;
}

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;
}
/* .everest-forms input[type=text],
.everest-forms input[type=email] {
	max-width: 500px;
} */

select {
	border: 1px solid #ccc;
}

textarea,
.full-width {
	width: 100%;
}

.search-inputs {
	display: inline-block;
	position: relative;
}

.search-inputs input[type="text"],
.search-inputs input[type="search"] {
	width: 100%;
	padding: .375em .375em .375em 1.5em;
}

.search-inputs::before {
	display: inline-block;
	content: url(images/search.svg);
	position: absolute;
	padding: .55em 0 .45em;
	width: 1em;
	height: 100%;
	margin-left: .375em;
}

@media screen and (min-width: 1920px) {
	.search-inputs::before {
		padding: .65em 0 .35em;
	}
}


/* class applies to select element itself, not a wrapper element */
.select-css {
	display: inline-block;
	font-size: 16px;
	/* font-family: sans-serif; */
	/* font-weight: 700; */
	color: #666666;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	/* width: 100%; */
	max-width: 100%; /* useful when width is set to anything other than 100% */
	min-width: 250px;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #666666;
	/* box-shadow: 0 1px 0 1px rgba(0,0,0,.04); */
	border-radius: 1.25em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%3d5263%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
}
/* Focus style */
.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 1px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	color: #222; 
	outline: none;
}

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #618eb5;
	-webkit-transition: all 100ms ease-out;
	transition: all 100ms ease-out;
	text-decoration: none;
}

a:hover, a:focus, a:active {
	color: #3d5263;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

a.ulink {
	position: relative;
}

a.ulink:hover {
	background-color: #ffc665;
}

p a,
a.ulink,
.relationship-field a {
	text-decoration: underline;
	-webkit-text-decoration-color: #ffc665;
	        text-decoration-color: #ffc665;
	text-decoration-skip-ink: auto;
	-webkit-text-decoration-skip: objects;
	        text-decoration-skip: objects;
}

p a:hover,
a.ulink:hover,
.relationship-field a:hover {
	background-color: #ffc665;
}

aside a.ulink {
	overflow-wrap: anywhere;
}


/*--------------------------------------------------------------
## Content navigation
--------------------------------------------------------------*/
p.breadcrumbs {
	color: #fff;
	margin-bottom: 0;
}

.comment-navigation,
.posts-navigation,
.post-navigation,
.paging-navigation {
	padding: 2em 0;
	text-align: left;
	overflow: hidden;
}

.comment-navigation a,
.posts-navigation a,
.post-navigation a,
.paging-navigation a {
	display: block;
	width: 100%;
	text-decoration: none;
	padding: 1em;
	border: 1px solid #cccccc;
	color: #666666;
}

.comment-navigation a:hover, .comment-navigation a:focus,
.posts-navigation a:hover,
.posts-navigation a:focus,
.post-navigation a:hover,
.post-navigation a:focus,
.paging-navigation a:hover,
.paging-navigation a:focus {
	color: white;
	border-color: #618eb5;
	background: #618eb5;
}

.nav-links {
	margin: 0 auto;
	padding: 0 .4em;
}

.nav-previous {
	padding-bottom: 1em;
}

@media screen and (min-width: 900px) {
	.nav-links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		padding: 0;
	}
	.comment-navigation .nav-previous,
	.comment-navigation .nav-next,
	.posts-navigation .nav-previous,
	.posts-navigation .nav-next,
	.post-navigation .nav-previous,
	.post-navigation .nav-next {
		float: left;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		width: 48%;
	}
	.comment-navigation .nav-next,
	.posts-navigation .nav-next,
	.post-navigation .nav-next {
		float: right;
		text-align: right;
	}
	.nav-previous {
		padding-bottom: 0;
	}
}

.post-navigation .meta-nav {
	display: block;
}

@media screen and (min-width: 30em) {
	.post-navigation {
		padding-bottom: 1em;
	}
}

.post-navigation .post-title {
	font-size: 1.2em;
	font-weight: 700;
	border-bottom: 3px solid #618eb5;
}

.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title {
	border-bottom-color: white;
}

.pagination .nav-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.pagination a,
.pagination span {
	padding: .5em 1em;
	background: white;
}

.pagination a {
	text-decoration: none;
}

.pagination a:focus, .pagination a:hover {
	color: white;
	background: #618eb5;
}

.pagination .current {
	font-weight: 600;
	color: #618eb5;
}

.pagination .prev .icon {
	margin-right: 1em;
}

.pagination .next .icon {
	margin-left: 1em;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	        clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

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

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

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;

	float: left;

	margin-right: 1.5em;
}

.alignright {
	display: inline;

	/* float: right; */

	margin-left: 1.5em;
}

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

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.single .widget-area,
.page-template-last-modified-date .widget-area {
	margin-top: 1.5em;
}

/* Footer widgets for archive pages */
@media screen and (min-width: 900px) {
	.archive-view.has-sidebar .footer-widgets {
		width: 100%;
	}
}

.widget {
	margin: 0 0 2em;
	padding: 0 0 2em;
	/* Make sure select elements fit in widgets. */
}

.widget ul,
.widget ol {
	padding: .7em 0 0;
	margin-bottom: 0;
	margin-left: 0;
	list-style-type: none;
}

.widget ul li,
.widget ol li {
	display: block;
	line-height: 1.5;
}

.widget ul li ul,
.widget ul li ol,
.widget ol li ul,
.widget ol li ol {
	padding-left: .5em;
}

@media screen and (min-width: 30em) {
	.widget ul li ul,
	.widget ul li ol,
	.widget ol li ul,
	.widget ol li ol {
		padding-left: 1em;
	}
}

.widget a {
	text-decoration: none;
}

.widget select {
	width: 100%;
	height: 2.5em;
	padding: 10px;
	border: 1px solid #ccc;
}

.widget-title {
	margin-top: 0;
	margin-bottom: .5em;
	font-size: 1.4em;
}

/* Archive and Categories widgets */
.widget_archive li {
	color: #7D7D7D;
}

.widget_categories .children {
	padding-top: 0;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/* Pages and Menu widgets */
.widget_pages .children,
.widget_nav_menu .sub-menu {
	padding-top: 0;
}

.widget_pages a,
.widget_nav_menu a {
	display: block;
	padding: .25em 0;
	text-decoration: none;
}

.widget_pages a:hover, .widget_pages a:focus,
.widget_nav_menu a:hover,
.widget_nav_menu a:focus {
	text-decoration: none;
}

.widget_pages li,
.widget_nav_menu li {
	padding: 0;
}

/* Meta widget */
.widget_meta li {
	padding: 0;
}

/* Recent comments */
.widget_recent_comments li {
	line-height: 1.3em;
	padding-bottom: .5em;
}

.widget_recent_comments a:hover,
.widget_recent_comments a:focus {
	padding-left: 0;
}

/* RSS widget */
.widget_rss li {
	margin-bottom: 1em;
}

.widget li a.rsswidget {
	padding-right: .5em;
	font-size: 1em;
	line-height: 1.4em;
}

.rss-date,
.widget_rss cite {
	color: #333;
	font-size: .8em;
}

.rssSummary {
	padding: .5em 0;
	font-size: .8em;
	line-height: 1.4em;
}

/* Search widget */
.widget_search input[type="search"] {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 100%;
	padding: .5em 1em;
	border: 1px solid #c3c3c3;
	border-radius: 0;
}

/* Calendar widget */
.widget_calendar {
	font-weight: 400;
}

.widget_calendar caption {
	padding: .5em 0;
	font-size: 1em;
	font-weight: 500;
	text-align: left;
}

.widget_calendar thead {
	background: transparent;
	color: black;
}

.widget_calendar thead th {
	border-bottom-width: 2px;
}

.widget_calendar td {
	padding: .2em;
	font-size: .8em;
	text-align: center;
	background: white;
	border: 1px solid #cccccc;
}

.widget_calendar th {
	border: none;
	text-align: center;
}

.widget_calendar .pad {
	background: #eaeaea;
}

.widget_calendar a {
	font-weight: 900;
	text-decoration: none;
}

/* Text widget */
.textwidget {
	font-size: 80%;
	line-height: 1.3em;
}

/* Footer widget stylings */
.footer-widget-background-area {
	background-color: #3d5263;
}

.footer-widgets {
	margin: 2em 0 0;
	padding: 1em 0;
}

@media screen and (min-width: 650px) {
	.footer-widgets {
		padding: 2em 1em;
	}
}

.footer-widgets .widget {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	margin: 0 1em 2em;
	padding-top: 1em;
}

.footer-widgets .widget .original-title {
	color: rgba(255, 255, 255, 0.5);
}

.footer-widgets .widget,
.footer-widgets .widget-title,
.footer-widgets .widget a,
.footer-widgets .widget_calendar thead,
.footer-widgets .rss-date,
.footer-widgets .widget_rss cite {
	color: white;
}

.footer-widgets .widget_calendar td,
.footer-widgets .widget_calendar a {
	color: black;
}

@media screen and (min-width: 900px) {
	.footer-widgets {
		/* Use flex to create a responsive layout */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		/* If only one widget is displayed, make it full width. */
		/* If 2 or 3 widgets are displayed, make the second one twice as wide. */
		/* If 4 or more widgets are displayed, show three across when available. */
	}
	.footer-widgets .widget:only-of-type {
		width: 100%;
	}
	.footer-widgets .widget:nth-last-child(n+4),
	.footer-widgets .widget:nth-last-child(n+4) ~ .widget {
		width: 30%;
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 30%;
		        flex: 1 1 30%;
	}
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.site-content {
	min-height: calc(100vh - 463px);
}

/*--------------------------------------------------------------
## Global layouts
--------------------------------------------------------------*/
.hide-sm {
	display: none;
}

@media screen and (min-width: 650px) {
	.hide-sm {
		display: block;
	}
}

.hidden {
	display: none;
}

.max-width {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 1em;
	padding-right: 1em;
}
.note {
	padding: 0rem 0 1.5rem;
    font-size: .9rem;
    color: #999;
    font-style: italic;
}
.cohort-note {
	text-align: right;
	padding-bottom: 0.5rem;
}

@media screen and (min-width: 2560px) {
	.max-width {
		width: 70%;
		max-width: 2200px;
	}
}

.max-box-width {
	max-width: 1000px;
	margin: 0 auto;
}

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

.light-background {
	background-color: #f6f6f6;
}

.section {
	clear: both;
}

.default-cursor {
	cursor: default;
}

.bg-yellow {
	background-color: #ffc665;
}
.bg-text-padding {
	padding: 2px 4px;
}
.separator {
	color: #999;
	border: 1px solid #999;
	border: none;
}
.margin-bottom-2 {
	margin-bottom: 2rem;
}
/* Single posts */
@media screen and (min-width: 900px) {
	.archive-view.has-sidebar:not(.post-type-archive-study):not(.post-type-archive-sample_set):not(.post-type-archive-cohort) .site-content .max-width {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.single.has-sidebar .hentry:not(.dataset):not(.study):not(.sample_set):not(.cohort):not(.collection),
	.single.has-sidebar .hentry .max-width:not(.no-flex),
	.page-template-dacdoc .max-width {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.single.has-sidebar .hentry:not(.dataset):not(.study):not(.sample_set) .entry-header,
	.single.has-sidebar .hentry .max-width:not(.no-flex) .entry-header {
		width: 100%;
		-webkit-box-flex: 1;
		    -ms-flex: 1 0 100%;
		        flex: 1 0 100%;
	}
	.single.has-sidebar .hentry:not(.dataset):not(.study):not(.sample_set):not(.collection) .post-content,
	.single.has-sidebar .hentry .max-width:not(.no-flex) .post-content,
	.page-template-dacdoc .max-width .post-content {
		width: 64%;
	}
	.single.has-sidebar .hentry:not(.dataset):not(.study):not(.sample_set):not(.collection) .widget-area,
	.single.has-sidebar .hentry .max-width:not(.no-flex) .widget-area,
	.page-template-dacdoc .max-width .widget-area {
		width: 30%;
	}
}

@media screen and (min-width: 900px) {
	.single.no-sidebar .post-content__wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.single.no-sidebar .post-content__wrap .entry-meta {
		width: 20%;
	}
	.single.no-sidebar .post-content__wrap .post-content__body {
		width: 70%;
	}
}

@media screen and (min-width: 900px) {
	.flex-reverse {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
}

/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/
.archive-view .page-header {
	padding: 1em 0;
	background-image: url("images/brain-blue-bg.jpg");
	background-size: cover;
	background-position: 50% 50%;
	margin-bottom: 2em;
}

.archive-view .page-header .page-title {
	color: #f5f5f5;
	margin: 0;
}

@media screen and (min-width: 900px) {
	.archive-view .page-header {
		padding: 2em 0;
	}
}

.archive-view article {
	position: relative;
	background-color: #f5f5f5;
	margin-bottom: 1em;
}

.archive-view .post__content {
	padding: 2em 2em 3em;
}

@media screen and (min-width: 900px) {
	.archive-view.has-sidebar .articles {
		width: 64%;
	}
	.archive-view.has-sidebar .widget-area {
		width: 30%;
	}
}

.page-title {
	margin: 0 0 .5em;
}

.archive-description {
	margin: -1em 0 2em;
}

/* For content-none.php */
.search .page-content,
.error-404 .page-content {
	margin-bottom: 2em;
	padding: 1em 2em;
	color: white;
	background: #618eb5;
}

.search input[type="submit"],
.error-404 input[type="submit"] {
	border-color: white;
	color: white;
}

.search input[type="submit"]:focus, .search input[type="submit"]:hover,
.error-404 input[type="submit"]:focus,
.error-404 input[type="submit"]:hover {
	background: white;
	color: #618eb5;
}

.sticky::before {
	content: "";
	display: block;
	width: 2em;
	height: 2em;
	position: absolute;
	top: 0;
	right: 0;
	border-width: 0 2em 2em 0;
	border-color: #eee #eee white;
	border-style: solid;
	-webkit-box-shadow: -1px 2px 2px rgba(26, 26, 26, 0.1);
	        box-shadow: -1px 2px 2px rgba(26, 26, 26, 0.1);
}

.index-image img {
	display: block;
	margin: 0 auto;
}

.index-image a:focus > img,
.index-image a:hover > img {
	opacity: .8;
}

.continue-reading {
	position: relative;
}

.continue-reading a {
	display: inline-block;
	padding: .5em 1em;
	font-size: 90%;
	text-decoration: none;
	background-color: transparent;
	color: #618eb5;
	border: 1px solid #618eb5;
}

.continue-reading a:focus, .continue-reading a:hover {
	color: white;
	background: #618eb5;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.header-image {
	max-height: 60vh;
	overflow: hidden;
}

.header-image img {
	display: block;
	width: 100vw;
}

.site-header {
	position: relative;
	padding: 0 1em;
	color: #404040;
	background-color: #fff;
	border-bottom: 3px solid #ffc665;
}

.site-branding {
	padding-top: .5em;
	min-height: 56px;
}

.logo {
	width: 75%;
	max-width: 250px;
	height: 74px;
	line-height: 0;
	margin: 0;
}

.custom-logo-link {
	margin-right: 1em;
}

.custom-logo-link img {
	display: block;
	height: 65px;
	width: auto;
}

.site-title {
	display: none;
	margin: 0;
	padding: 0;
	font-size: 1.6em;
	font-weight: 900;
	line-height: 1em;
}

.site-title a {
	color: #444;
	text-decoration: none;
}

.site-title a:hover, .site-title a:focus {
	text-decoration: underline;
}

.site-description {
	display: none;
	margin: 0;
	font-size: .875em;
	font-weight: 100;
}

@media screen and (min-width: 650px) {
	.top-header {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.logo {
		width: 275px;
		max-width: none;
		height: 69px;
	}
	.site-navigation {
		width: 55%;
	}
}

@media screen and (min-width: 1200px) {
	.site-header {
		padding: 0em 2em;
	}
	.logo {
		width: 300px;
		max-width: none;
		height: 81px;
		margin: 0 0 .25em 0;
	}
	.lower-header {
		margin-top: -2.25em;
	}
}

/*
Header Menu
*/
.main-navigation {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
	clear: left;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-top: 1em;
	padding-left: 0;
}

.main-navigation ul ul {
	display: none;
	top: 1.5em;
	z-index: 99999;
	padding-top: 0.25em;
	text-transform: none;
}

.main-navigation ul ul ul {
	top: 0;
}

.main-navigation ul ul li {
	padding-left: 1em;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: inline-block;
	width: 100%;
	padding: .5em 1em .375em 0;
	text-decoration: none;
	color: #3d5263;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
	background-color: #ffc665;
}

.user-navigation {
	font-weight: 400;
	clear: left;
}

.user-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.user-navigation li {
	position: relative;
}

.user-navigation a {
	display: inline-block;
	width: 100%;
	padding: .5em 1em;
	text-decoration: none;
	color: #eeeeee;
	background-color: #618eb5;
}

.user-navigation a:hover,
.user-navigation a:focus {
	color: white;
	-webkit-box-shadow: 0px 0px 1px 0px #618eb5;
	        box-shadow: 0px 0px 1px 0px #618eb5;
}

.bar1, .bar2, .bar3 {
	width: 30px;
	height: 4px;
	background-color: #3d5263;
	margin: 5px 0;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

/* Rotate first bar */
.toggled-on .menu-toggle .bar1 {
	-webkit-transform: rotate(-45deg) translate(-6px, 7px);
	transform: rotate(-45deg) translate(-6px, 7px);
}

/* Fade out the second bar */
.toggled-on .menu-toggle .bar2 {
	opacity: 0;
}

/* Rotate last bar */
.toggled-on .menu-toggle .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -7px);
	transform: rotate(45deg) translate(-6px, -7px);
}

.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus {
	background: transparent;
}

button.dropdown-toggle {
	position: absolute;
	right: 0;
	border: none;
	background: inherit;
	color: #3d5263;
	line-height: 1.5em;
	padding: .4em 1em;
	font-size: 1em;
	font-family: "Arial", sans-serif;
}

.menu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	margin: 1.2em 1.2em 0 0;
	padding: .6em .8em;
	font-size: 80%;
	text-transform: uppercase;
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Toggle small menu and children on */
.toggled-on ul,
.sub-menu.toggled-on {
	display: block;
}

.toggled-on > div > ul {
	background: #ffc665;
	margin: 0 -1em;
	padding: 1em;
}

@media screen and (min-width: 650px) {
	.menu-toggle {
		display: none;
	}
	.main-navigation {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	.main-navigation ul {
		display: block;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		padding-top: 0;
		/* If you want dropdowns to open on hover, uncomment this: */
	}
	.main-navigation ul ul {
		position: absolute;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		background-color: #3d5263;
		background-color: #ffc665;
		margin: .75em 0 0 0;
	}
	.main-navigation ul ul li {
		padding-left: 0;
		background-color: #3d5263;
	}
	.main-navigation ul ul li a {
		width: 190px;
		color: #ffffff;
		background: none;
	}
	.main-navigation ul li a {
		padding: .4em .825em;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul {
		display: block;
	}
	.main-navigation a:hover,
	.main-navigation a:focus {
		background-color: rgba(253, 198, 101, 0.7);
		color: #3d5263;
	}
	button.dropdown-toggle {
		display: none;
	}
}

@media screen and (min-width: 900px) {	
	.main-navigation ul li a {
		padding: .4em 1em;
	}
	.main-navigation ul ul li a {
		width: 200px;
	}
}
@media screen and (min-width: 1200px) {	
	.main-navigation ul ul li a {
		width: 215px;
	}
}

/*---------------------------------------------------------------
# Pages, posts and CPT
---------------------------------------------------------------*/

/*--------------------------------------------------------------
## Front Page
--------------------------------------------------------------*/
.home .hentry,
.home .footer-widgets {
	margin: 0;
}

.front-padding {
	padding-top: 2em;
	padding-bottom: 2em;
}

@media screen and (min-width: 650px) {
	.front-padding {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

.top-padding {
	padding-top: 2em;
	padding-bottom: 2em;
}

@media screen and (min-width: 650px) {
	.top-padding {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

@media screen and (min-width: 900px) {
	.top-padding {
		padding-top: 5em;
		padding-bottom: 5em;
	}
}

.first-section {
	background-image: url("images/brain-blue-bg.jpg");
	background-size: cover;
	background-position: 50% 50%;
	min-height: 50vh;
	overflow: auto;
}

.first-section p {
	color: #fff;
}

.quick-links-section {
    padding: 3rem 1rem;
}
.grid {
	display: grid;
}
.grid.grid-2,
.grid.grid-3 {
    gap: 2rem;
}

.grid-item {
    background: radial-gradient(circle, #ffc665 0%, #f0b154 100%);
    transition: opacity 0.2s linear;
    width: 100%;
    min-height: 140px;
    position: relative;
    /* border: 1px solid var(--grey-semi); */
    box-shadow: rgb(0 0 0 / 13%) 0px 2px 24px;
    transition: all 0.25s ease;
    font-size: 1.25rem;
    padding: 1rem;
}
.grid-item:hover::before {
    opacity: 1;
}
.grid-item::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle, #ffc665 0%, #ffc665 100%);
    /* z-index: -1; */
    transition: opacity 0.1s linear;
    opacity: 0;
}

a.grid-item-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    color: #3d5163;
	padding: 0.5rem;
    text-align: center;
}
@media screen and (min-width: 600px) {
	.quick-links-section {
		padding: 4rem 1rem;
	}
	.grid.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}	
}
@media screen and (min-width: 800px) {
	.quick-links-section {
		padding: 5rem 2rem;
	}	
}
.main-title-area h1 {
	color: #ffc665;
	margin-bottom: .25em;
}

.release-area {
	margin-top: 3em;
}

.release-area h2, .release-area h3, .release-area h4 {
	color: #ccc;
}

.release-area .release {
	display: inline-block;
	background: #ffffff;
	padding: .5em 1em;
	font-weight: 700;
}

.colored-box-area {
	background-color: #618eb5;
	background-color: #f3f3f3;
}

.top-box {
	position: relative;
}

.number-box {
	text-align: center;
	padding: 1em;
}

@media screen and (min-width: 650px) {
	.number-box {
		display: inline-block;
		width: 32%;
	}
}

.icon-area {
	width: 30%;
	max-width: 50px;
	height: auto;
	margin: 0 auto;
	line-height: 0;
}
.acces-icon-area {
	position: absolute;
	display: flex;
	top: 5px;
	right: 5px;
	
}
.icon-area.lock-icon,
.icon-area.unlock-icon {
	margin: 1px;
	max-width: 250px;
	width: unset;
}
.icon-area.lock-icon img,
.icon-area.unlock-icon img{
  box-shadow: none;
  width: 25px;
}
.icon-area.unlock-icon img {
    width: 29px;
}
.icon-area.lock-icon span,
.icon-area.unlock-icon span{
	display: none;
    position: absolute;
    left: -20px;
    top: 18px;
    background: #3d5163;
    color: #fff;
    line-height: 1.4;
    padding: 5px;
    font-size: 0.9rem;
	-webkit-transition: all 0.8s;
	moz-transition: all 0.8s;
	transition: all 0.8s;
}

.icon-area.lock-icon:hover span,
.icon-area.unlock-icon:hover span{
	display: block;
}
.icon-area.sum-icon {
	/* width: 40px;
	height: 40px; */
	margin: 0;
}

.number {
	font-size: 2em;
	font-weight: 700;
	color: #ffc665;
}

#icon-stack,
#icon-myfile,
#icon-myfloppy {
	fill: #999;
	/* fill-opacity: .75; */
	max-height: 50px;
}

.charts {
	margin-top: 1em;
}

@media screen and (min-width: 650px) {
	.charts {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
}

.chart-area {
	text-align: center;
	padding: .5em;
}

.chart {
	width: 100%;
	margin: 0 auto;
	max-width: 220px;
	height: 220px;
	display: inline-block;
}

.percentage {
	fill: white;
	font-size: .8em;
	font-weight: 400;
}

.name-text {
	fill: #666666;
	font-size: 1.5em;
	font-weight: 700;
}

.tooltip {
	-webkit-transition: opacity .35s;
	transition: opacity .35s;
	position: fixed;
	background-color: #333;
	color: #fff;
	opacity: 0;
	min-width: 75px;
	text-align: left;
	padding: .275em .5em;
}

.legend ul {
	list-style: none;
	margin-top: 1em;
	margin-left: 0;
	padding-left: 0;
	text-align: left;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.legend ul li {
	padding: 0 .5em;
}

.rect {
	display: inline-block;
	width: 20px;
	height: 1em;
	margin-right: 4px;
	vertical-align: text-top;
}

@media screen and (min-width: 900px) {
	.welcome-area {
		max-width: 55%;
	}
	.main-title-area h1 {
		font-size: 3.25em;
	}
	span.underline {
		position: relative;
		z-index: 2;
	}
	span.underline span {
		position: absolute;
		left: 2px;
		right: 2px;
		height: .175em;
		bottom: 0;
		margin-bottom: .175em;
		z-index: -1;
	}
}

@media screen and (min-width: 1200px) {
	.first-section {
		text-align: inherit;
	}
	.max-width-lg {
		max-width: 1200px;
		margin: 0 auto;
		padding-bottom: 6em;
	}
	#welcome-lg {
		display: block;
		padding-top: 0;
		padding-bottom: 0;
	}
	#numbers {
		padding: 5em 3em;
	}
}


.page-template-login .site-content {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	outline: 0;
	background: rgba(0, 0, 0, 0.75);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	overflow: auto;
}

.login-box {
	max-width: 700px;
	background-color: #f5f5f5;
}

.login-area {
	padding: 2em 1.5em 1.75em;
}

.login-area h3 {
	margin-top: 0;
	margin-bottom: 1em;
}

.nih {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	line-height: 1;
}

.nih-img {
	width: 58px;
	opacity: .75;
}

.browser-disclaimer {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #ffda6d;
	padding: .5em 1em;
	font-size: .875em;
}



/*-------------------------- 
## Summary
--------------------------- */

.summary-area {
	color: #fff;
}
.summary-text-area {
	font-size: 1.25em;
}
.num-section {
	border-bottom: 1px solid #e2e2e2;
	padding: 2.5em 0;
}
.main-num-section {
	padding: 2.5em 0;
}
.main-numbers-box-area {
	text-align: center;
}
.num-section:last-child {
	border-bottom: none;
}
.num-text {
	margin-bottom: 2em;
}
.sum-number-box {
	margin: 2em 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sum-number-box .number{
	margin: 0px 10px 0px 14px;
	color: #618eb5;
	line-height: 1;
	/* font-size: 1.5em; */
}
.dss-graph {
	margin: 2em 0;
}
.niagads-graph figure {
	padding: 0;
	margin: 0;
	position: relative;
}
.niagads-graph img {
	width: 100%;
}
.niagads-graph figure figcaption {
	position: absolute;
	right: 0;
	bottom: 1em;
	font-size: 0.75em;
	color: #999;
}
.dss-graph img,
.niagads-graph img {
	box-shadow: none;
}
.dss-graph img {
	max-width: 400px;
	width: 100%;
}
.text-3-num {
	color: #666;
	font-size: 1.75em;
  padding: 0.25em 0 0.75em;
}
.text-3-num span {
	color: #3d597a;
	font-weight: 600;
}

.niagads-section {
	background: #423f6c;
	color: #fff;
}
.niagads-section h2,
.niagads-section h3 {
	color: #fff;
}
.num-section.niagads {
	border-bottom: 1px solid #6f6f6f;
	display: block;
}
.niagads-number {
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
	color: #ffc665;
}
.niagads-number.dss-number,
.niagads-number.dbgap-number {
	/* font-size: 1.5em; */
	color: #618eb5;
}
.niagads-text {
	font-size: 2em;
	padding-bottom: .5em;
	color: #eee;
}
.niagads-text.main {
	padding-bottom: 0;
	color: #3d5263;
}
.niagads-text-link {
	padding-bottom: .5em;
}
.niagads-text-link a {
	color: #ffc665;
	font-size: .875em;
}
.niagads-text.dss-text, 
.niagads-text.dbgap-text {
	font-size: 1.275em;
	line-height: 1.2;
	color: #999;
}
.niagads-top-text {
	color: #ccc;
	line-height: 1;
}

.num-niagads.num-dss {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.niagads-nums {
	width: 200px;
}
.icon-area-2 {
	width: 95px;
}
.icon-area-2 img{
	width: 80px;
	text-align: center;
}
.icon-area-2.inst img{
	width: 70px;
}

.page-template-summary .site-footer.top-margin {
	margin-top: 0;
}

@media screen and (min-width: 650px) {

	.main-numbers-box-area {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
		grid-gap: 1.5em;
	}
	.num-section {
		display: grid;
		align-items: center;

	}
	.num-section.grid-3-2 {
		align-items: center;
		grid-template-columns: 3fr 2fr;
	}
	.num-section.grid-1x1 {
		grid-template-columns: 1fr 1fr;
	}
	.num-section .num-text{
		padding-left: 3em;
    	padding-right: 0;
	}
	.num-section.grid-3-2 .num-text,
	.num-section.grid-1x1 .num-text {
		padding-right: 3em;
		padding-left: 0;
	}

	.num-text {
		margin-bottom: 0.5em;
	}
	.num-dss {
		text-align: right;
	}
	.dss-graph.availability {
		text-align: right;
	}
	
	.numbers-box-area {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		text-align: center;
	}
	.home .numbers-box-area {
		display: block;
	}
	.num-niagads.num-dss {
		flex-direction: row-reverse;
	}
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.single .entry-header,
.page .page .entry-header {
	padding: 1em 0;
	background-image: url("images/brain-blue-bg.jpg");
	background-size: cover;
	background-position: 50% 50%;
}

.single .entry-header .entry-title,
.single .entry-header .entry-meta,
.page .page .entry-header .entry-title,
.page .page .entry-header .entry-meta {
	color: #f5f5f5;
}

.single .entry-header .entry-title a,
.single .entry-header .entry-meta a,
.page .page .entry-header .entry-title a,
.page .page .entry-header .entry-meta a {
	color: #ffc665;
}

@media screen and (min-width: 900px) {
	.single .entry-header,
	.page .page .entry-header {
		padding: 2em 0;
	}
}

.cat-links a {
	text-decoration: none;
}

.entry-title {
	margin: .125em 0 .25em;
}

.entry-title a {
	text-decoration: none;
	color: #404040;
}

.entry-title a:focus, .entry-title a:hover {
	border-bottom: 5px solid #618eb5;
}

.entry-meta,
.entry-footer {
	font-size: 90%;
	color: #666666;
	margin-bottom: 1em;
}

.entry-meta a,
.entry-footer a {
	font-weight: 700;
	text-decoration: none;
}

.entry-meta a:focus, .entry-meta a:hover,
.entry-footer a:focus,
.entry-footer a:hover {
	color: #618eb5;
	border-bottom: 3px solid #618eb5;
}

.cat-links::before,
.comments-link::before,
.edit-link::before {
	content: "|";
	margin: 0 .5em;
}

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

.single .byline,
.group-blog .byline {
	display: inline;
}

.extra {
	display: none;
}

/* Custom Post Meta rules for single post / no sidebar. */
.no-sidebar .entry-meta {
	margin-top: 1.5em;
}

@media screen and (min-width: 900px) {
	.no-sidebar .post-content__wrap .entry-meta {
		margin-top: 2.25em;
		font-size: 80%;
	}
	.no-sidebar .post-content__wrap .entry-meta a {
		font-size: 110%;
		border-bottom: 3px solid white;
	}
	.no-sidebar .post-content__wrap .entry-meta a:hover, .no-sidebar .post-content__wrap .entry-meta a:focus {
		border-bottom-color: #618eb5;
	}
	.no-sidebar .post-content__wrap .byline,
	.no-sidebar .post-content__wrap .posted-on,
	.no-sidebar .post-content__wrap .comments-link,
	.no-sidebar .post-content__wrap .cat-links,
	.no-sidebar .post-content__wrap .tags-links,
	.no-sidebar .post-content__wrap .edit-link {
		display: block;
		margin-bottom: 1em;
	}
	.no-sidebar .post-content__wrap .byline:before, .no-sidebar .post-content__wrap .byline:after,
	.no-sidebar .post-content__wrap .posted-on:before,
	.no-sidebar .post-content__wrap .posted-on:after,
	.no-sidebar .post-content__wrap .comments-link:before,
	.no-sidebar .post-content__wrap .comments-link:after,
	.no-sidebar .post-content__wrap .cat-links:before,
	.no-sidebar .post-content__wrap .cat-links:after,
	.no-sidebar .post-content__wrap .tags-links:before,
	.no-sidebar .post-content__wrap .tags-links:after,
	.no-sidebar .post-content__wrap .edit-link:before,
	.no-sidebar .post-content__wrap .edit-link:after {
		margin: 0;
		content: "";
	}
	.no-sidebar .post-content__wrap .entry-meta-text {
		display: block;
	}
	.no-sidebar .post-content__wrap .extra {
		display: block;
	}
}

/* Single Post Featured Images */
.full-bleed {
	width: 100vw;
	max-height: 1200px;
	margin-top: 1em;
	margin-left: -1em;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	overflow: hidden;
}

@media screen and (min-width: 650px) {
	.full-bleed {
		margin-left: -2em;
	}
}

@media screen and (min-width: 900px) {
	.full-bleed {
		margin-top: 1.5em;
		margin-right: -2em;
	}
}

@media screen and (min-width: 1200px) {
	.full-bleed {
		margin-right: calc( ((-100vw + 1200px)/2) - 2em);
		margin-left: calc( ((-100vw + 1200px)/2) - 2em);
	}
}

.full-bleed img {
	display: block;
	margin: 0 auto;
}

.page-content,
.entry-content,
.entry-summary,
.page-template-dacdoc .documentation-sidebar {
	margin: 1.5em 0 0;
}

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

.entry-footer {
	margin: 1.5em 0;
}

/* ABOUT PAGE and SUBPAGES */
.box-text {
	background-color: #f6f6f6;
	padding: 2em;
	font-size: 90%;
}

.box-text h3 {
	text-decoration: underline;
}

.name {
	font-weight: 700;
}

.position {
	font-style: italic;
}

/*--------------------------------------------------------------
## Datasets and Studies
--------------------------------------------------------------*/

/* Datasets Archive */
.datasets-area {
	width: 100%;
	margin: 0;
	padding: 0 1em;
}
.sort {
    font-size: 0.875rem;
    color: #999;
}

.sort button.link {
    color: #618eb5;
	padding: 0;
    margin: 0;
    border: 0;
    line-height: 1.5;
    font-size: .875rem;
}
.sort button.link:hover,
.sort button.link:active,
.sort button.link:focus {
   background: none;
}
.sort button.link:last-child::before {
    content: "|";
    padding: 0 10px 0 7px;
    color: #999;
}
.sort button.link.sorting {
	color: #666;;
}
.sorting::after {
	content: url(/wp-content/themes/dss-niagads/images/down-arrow.svg);
    width: 14px;
    display: inline-block;
    margin-left: 5px;
    vertical-align: sub;
}
.sorting.desc::after {
	content: url(/wp-content/themes/dss-niagads/images/down-arrow.svg);
}
.sorting.asc::after {
	content: url(/wp-content/themes/dss-niagads/images/up-arrow.svg);
}
	
.loader {
	margin: 5rem auto;
	width: 50px;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #618eb5;
	--_m: 
	  conic-gradient(#0000 10%,#000),
	  linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
			mask: var(--_m);
	-webkit-mask-composite: source-out;
			mask-composite: subtract;
	animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


@media screen and (min-width: 600px) {
	.sort {
		margin-bottom: -29px;
	}	
}
ul.datasets .note {
	padding: 0.5rem 0 1rem;
	font-size: 0.9rem;
	color: #999;
	font-style: italic;
	text-align: right;
}

ul.datasets {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	width: 100%;
}

li.dataset-section {
	margin-bottom: 2em;
	padding: 1rem;
	background: #f6f6f6;
	position: relative;
}
.related-datasets li.dataset-section {
	margin-bottom: 1rem;
}
li.migration-dataset {
    padding: 0.25rem;
    background: #feedc7;
    margin-bottom: 0.2rem;
}
.dataset-section-title {
	/* font-weight: 600; */
	margin-bottom: 0.75em;
	max-width: 90%;
	/* background: #618eb5; */
	/* background-color: #556271; */
	/* padding: 0.5em; */
}
.dataset-section-title a {
	/* color: #fff; */
	/* color: #3d5263; */
	font-weight: 700;
}

.dataset-main-area {
	width: 100%;
	font-size: 0.925em;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.dataset-main-area .dataset-info-area {
	min-width: 300px;
}
@media screen and (min-width: 900px) {
	.dataset-main-area {
		flex-wrap: nowrap;
	}
	.dataset-main-area .dataset-info-area {
		min-width: 340px;
	}
}

li.dataset-section .dataset-info {
	font-size: 0.875em;
}

li.dataset-section .dataset-info .item,
.dataset-cat {
	margin: .25em 0;
}
li.dataset-section .dataset-info .item span.info-text {
	font-weight: 700;
}

.parent-cat {
    font-weight: 700;
}
.parent-cat,
.children-cat {
	display: inline-block;
	vertical-align: text-top;
}
.sub-cat {
	margin-right: 0.25rem;
	display: inline-block;
}
.sub-cat:not(:last-child)::after {
	content: ";";
}

li.dataset-section .learn-more {
	text-align: right;
	font-size: 0.875em;
	margin: 1em 0 0 0;
} 

/* aside#sidebar-datacat {
	display: none;
} */

.filter-title {
	background: #f6f6f6;
	padding: 0.5em;
	text-transform: uppercase;
	font-weight: 600;
}

.categoryfilter {
	margin-bottom: 2em;
}

.categoryfilter .parent-toggle {
	padding: .5em 0 .25em .5em;
	color: #556271;
	font-weight: 600;
}

.categoryfilter label {
	padding-left: 1em;
	font-size: 0.925em;
}
.search-tips {
    padding: 0.5rem 0.25rem 0;
    font-size: 0.9rem;
    color: #666;
}
.parent-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.toggle-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* Study Archive */

table.studies-table tr th,
table.studies-table tr td {
	border: 2px solid #ffffff;
}

table.studies-table tr th{
	background-color: #ffc665;
}

table.studies-table tr td{
	background-color: #feedc7;
}

.single-study .entry-header,
.single-dataset .entry-header,
.single-documentation .entry-header {
	padding: 1em 0;
	background-image: url("images/brain-blue-bg.jpg");
	background-size: cover;
	background-position: 50% 50%;
}

.single-study .entry-header .entry-title,
.single-dataset .entry-header .entry-title,
.single-documentation .entry-header .entry-title {
	color: #f5f5f5;
}

@media screen and (min-width: 900px) {
	.single-study .entry-header,
	.single-dataset .entry-header,
	.single-documentation .entry-header {
		padding: 2em 0;
	}
}

.study-sidebar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: column-reverse;
	        flex-direction: column-reverse;
}

@media screen and (min-width: 900px) {
	.study-sidebar {
		display: block;
	}
}

@media screen and (min-width: 900px) {
	.additional-info {
		margin: 2em 0;
	}
}

.relationship-field, .dataset-field {
	margin: 1.5em 0;
}
/* .field-value {
    word-break: break-all;
} */


.relationship-field ul {
	list-style-type: none;
	padding-left: 0;
}

@media screen and (min-width: 900px) {
	.swap .dataset-field {
		margin: 0 0 2em 0;
	}
}

.field-label {
	font-weight: 700;
	font-family: "Libre Franklin", "Raleway", sans-serif;
}
.adsp-cohort-list .field-label {
	padding-bottom: .5rem;
}

.table-area {
	overflow-x: auto;
	text-align: left;
	margin-bottom: 1rem;
}

.study-logo {
	max-width: 200px;
}

.side-nav ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}

.side-nav ul li a {
	display: block;
	padding: .25em 0 .25em .5em;
	text-decoration: none;
	background-color: #eee;
	margin-bottom: 1px;
}

.side-nav ul li a:hover {
	margin-left: 1px;
	background-color: #eeeeee;
}

.side-nav ul li a.active {
	margin-left: 1px;
	background-color: rgba(253, 198, 101, 0.4);
	color: rgba(60, 80, 98, 0.7);
	position: relative;
}

.side-nav ul li a.active::after {
	content: url(images/angle-right.svg);
	margin-left: 1em;
	width: 6px;
	height: 16px;
	position: absolute;
	right: 1em;
	top: 6px;
}

/* #sample-information, #cohorts, #consents, #dataset-publications, #dataset-acknowledgement, #data-releases, #phenotype-harmonization, #dars, #dataset-third-party,
#grants, #acknowledgement, #publications, #pi, #related-datasets, #related-samplesets, #related-cohorts, #studies, #samplesets,
#sampleset-sex, #sampleset-race, #sampleset-ethnicity, #sampleset-diagnosis, #sampleset-apoe {
	display: none;
} */

.dars-count {
    margin-bottom: 20px;
}

.pi-list {
	list-style: none;
	padding: 0;
}

.pi-list li {
	margin: 0 0 1em 0;
	padding: 1em;
	border: 1px solid #ffc665;
}

.pi-field {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.pi-field .pi-field-title {
	font-weight: 700;
	min-width: 100%;
}

@media screen and (min-width: 900px) {
	.pi-field .pi-field-title {
		margin-right: .5em;
		min-width: 240px;
		max-width: 30%;
	}
}

.statement-title {
	text-decoration: underline;
}

.statements {
	display: none;
}

.showhide-statements {
	color: #618eb5;
	cursor: pointer;
}

.showhide-statements :hover {
	color: #3d5263;
}

/* Custom acknowledgments */
.label-text,
.input-area {
	margin-bottom: 1rem;
}

.acknowledgments {
	margin: 2rem 0;
	padding: 1rem;
	background-color: #f5f5f5;
}
.study-ack-area {
	padding: 1rem;
}
.study-ack-area:first-child {
	padding-top: 2rem;
}
.error-message {
    color: var(--orange-dark);
	padding: 0 1rem;
}


/* Collections */
.subcollection-area {
	margin-bottom: 3rem;
}
.subcollection-area table {
    margin-bottom: 2rem;
}


/*--------------------------------------------------------------
## Documentation
--------------------------------------------------------------*/
.doc-title {
	background-color: rgba(253, 198, 101, 0.4);
	padding: 15px 10px;
	color: #3d5263;
	margin-top: 0;
}

.title-description {
	color: #eeeeee;
}

.doc-body {
	padding: 0 10px;
}

.search-form-area {
	margin: 0.25rem 0 1.5rem;
	width: 100%;
	padding: 2rem 1rem;
	background-color: #eeeeee;
}
.dataset-banner {
	margin: 0.25rem 0 1.5rem;
	padding: 1rem;
	background-color: #ffc665;
}

.search-form-area .search-inputs {
	width: 100%;
	margin-bottom: 1em;
}
.search-form-area input {
	width: 100%;
}
@media screen and (min-width: 900px) {
	.search-form-area .search-inputs {
		width: 80%;
		margin-bottom: 0em;
	}
	.search-form-area button.search-docs {
		width: 19%;
	}
}

.docs {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.docs .docs-section {
	border: 1px solid #f1f1f1;
	-webkit-box-shadow: 0 0 0 2px #f3f3f3;
	box-shadow: 0 0 0 2px #f3f3f3;
	margin: 0 0 2em;
	padding: 1em;
	width: 100%;
}

.docs .docs-section ul {
	list-style-type: none;
	padding: 0;
}

.docs .docs-section ol {
	padding: 0 0 0 1em;
}

.docs .docs-section ul, .docs .docs-section ol {
	margin: 0;
}

.docs .docs-section ul li, .docs .docs-section ol li {
	border-bottom: 1px solid #eeeeee;
}

.docs .docs-section ul li a, .docs .docs-section ol li a {
	padding: .5em 0;
	display: block;
}

.docs .docs-section ul li a:hover, .docs .docs-section ol li a:hover {
	margin-left: 1px;
}

.docs .docs-section ul li a::before, .docs .docs-section ol li a::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	content: "\f15b";
	font-size: 1em;
	font-weight: 400;
	width: 1.25em;
	color: rgba(60, 80, 98, 0.7);
}

.docs .docs-section ul li:last-child, .docs .docs-section ol li:last-child {
	border-bottom: none;
}

.docs .docs-section ul li ul, .docs .docs-section ol li ul {
	padding-left: 1em;
}

@media screen and (min-width: 900px) {
	.docs .docs-section {
		min-width: 400px;
		width: 45%;
	}
}

.doc-child-list ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.doc-child-list ul li {
	border-bottom: 1px solid #eeeeee;
}

.doc-child-list ul li a {
	padding: .5em 0;
	display: block;
}

.doc-child-list ul li a:hover {
	margin-left: 1px;
}

.doc-child-list ul li a::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	content: "\f15b";
	font-size: 1em;
	font-weight: 400;
	width: 1.25em;
	color: rgba(60, 80, 98, 0.7);
}

.doc-child-list ul li:last-child {
	border-bottom: none;
}

.doc-child-list ul li ul {
	padding-left: 1em;
}

.menu-documentation-menu-container > ul {
	-webkit-box-shadow: 0px 0px 0px 1px #f6f6f6;
	        box-shadow: 0px 0px 0px 1px #f6f6f6;
}

.menu-documentation-menu-container ul{
	margin-top: 0;
	padding-top: 0;
}

.menu-documentation-menu-container ul li {
	font-size: 95%;
}

.menu-documentation-menu-container ul li a {
	padding-left: .5em;
	font-weight: 700;
}

.menu-documentation-menu-container ul li a:hover {
	margin-left: 1px;
	background-color: #eeeeee;
}

.menu-documentation-menu-container ul li.current-menu-item > a {
	margin-left: 1px;
	background-color: rgba(253, 198, 101, 0.4);
	color: rgba(60, 80, 98, 0.7);
	position: relative;
}

.current-menu-item .sub-menu {
	background: #f5f5f5;
}

.menu-documentation-menu-container ul li.current-menu-item > a::after {
	content: url(images/angle-right.svg);
	margin-left: 1em;
	width: 6px;
	height: 16px;
	position: absolute;
	right: 1em;
	top: 6px;
}

.menu-documentation-menu-container ul li ul {
	padding-left: 0;
	padding-bottom: 0;
}

.menu-documentation-menu-container ul li ul li {
	margin-left: 0;
}

.menu-documentation-menu-container ul li ul li a {
	padding-left: 1em;
	font-weight: 400;
}
.menu-documentation-menu-container ul li ul li ul li a {
	padding-left: 2em;
}


ul.cohort-list {
	list-style: none;
  margin-left: 0;
  padding-left: 0;
}

ul.cohort-list li {
	padding: 7px;
	border: 1px solid #ececec;
	border-bottom: none;
}
ul.cohort-list.adsp-cohort-list li {
	padding: 2rem 0.75rem;
	border: 1px solid #ececec;
	border-bottom: none;
}

ul.cohort-list li:last-child {
	border-bottom: 1px solid #ececec;
}
/*--------------------------------------------------------------
## Infographics
--------------------------------------------------------------*/
.infographic-area {
	position: relative;
	text-align: center;
}
.home .infographic-area {
	width: 100%;
	padding: 0 1rem;
}
.graph-subtitle {
	font-size: 1.25rem;
}
.sampleset-body .chart-area {
	padding: 3em 1em;
	background: #3d5263;
	color: #fff;
}
.sampleset-body .name-text {
	fill: #fff;
}
.sampleset-body .table-area {
	margin-top: 2em;
}
.sex-info {
	font-weight: 700;
}
.sex-info .info-area {
	width: 100%;
	position: relative;
	font-size: 1.375em;
}
.sex-info .info-text {
	width: 200px;
	margin: 0 auto;
	color: #b55a37;
}
.sex-info .info-text.male-text {
	color: #3d5263;
}
.sex-info .info-text span {
	display: block;
}
.sex-info .info-text span.info-num {
	background: #b55a37;
	color: white;
	padding: 2px;
	font-size: 1.5em;
}
.sex-info .info-text span.info-num.male-text {
	background: #3d5263;
}
.sex-info .info-image {
	width: 100px;
	margin: 0 auto;
}
@media screen and (min-width: 900px) {
	.sex-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.sex-info .info-area {
		width: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
	}
	.sex-info .info-area.male-area {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
	.sex-info .info-text {
		width: 40%;
		margin: 0;
	}
	.sex-info .info-image {
		width: 30%;
		margin: 0;
	}
}
.female {
	fill: #b55a37;
}
.male {
	fill: #3d5263;
}
.ethnicity-info {
	font-weight: 700;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-gap: 1em;
}
.ethnicity-info .info-area {
	background: #b55a37;
	width: 100%;
	color: #fff;
	padding: 1em 2em;
	margin-bottom: 1em;
}
.ethnicity-info .info-area:nth-child(2n+2) {
	background: #618eb5;
}
.ethnicity-info .info-area:nth-child(3n+3) {
	background: #f1b154;
}
.ethnicity-info .info-area:nth-child(4n+4) {
	background: #666;
}
.ethnicity-info .info-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.ethnicity-info .info-area .info-parameter {
	font-size: 1.125em;
}
.ethnicity-info .info-area .info-num {
	font-size: 2.75em;
}

.ethnicity-info .info-area .info-per {
	font-size: 1.5em;
}

.ethnicity-info .hispanic-area {
	background: #b55a37;
	background-position: 80% 50%;
	background-size: contain;
	background-repeat: no-repeat;
}

.ethnicity-info .non-hispanic-area {
	background: #618eb5;
}

.ethnicity-info .na-area {
	background: #666666;
}

@media screen and (min-width: 900px) {
	/* .ethnicity-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.ethnicity-info .info-area {
		width: 32%;
		min-width: 162px;
	} */
}

.sampleset-info table {
	font-size: 1.125em;
}

.sampleset-info table tr {
	border-bottom: 3px solid rgba(253, 198, 101, 0.4);
	color: #3d5263;
}

.sampleset-info table th, .sampleset-info table td {
	border: none;
	text-align: left;
	width: 25%;
}

.sampleset-info table th:first-child, 
.sampleset-info table td:first-child {
	width: 50%;
}

.sampleset-info table td:nth-child(2) {
	text-align: right;
	font-weight: 700;
}

.sampleset-info table td:nth-child(3) {
	text-align: right;
}

/*** APOE ***/
ul.graph-list {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

ul.graph-list li {
	margin: 1em 0;
}

ul.graph-list li .labels {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	font-weight: 700;
}
ul.graph-list li .dt-labels {
	text-align: left;
}

ul.graph-list li .labels .per {
	font-weight: 400;
}

ul.graph-list li .line {
	width: 100%;
	height: 1.25em;
	background: #ececec;
	position: relative;
	margin-top: 2px;
}
ul.graph-list li .line.dt-line {
	height: 1.5em;
}

ul.graph-list li .line .value-line {
	background: #618eb5;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

.column-reverse {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: column-reverse;
	        flex-direction: column-reverse;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
	width: 100%;
	margin: 3em 0;
	padding: 1.5em 0;
	border-top: 1px solid #cccccc;
}

.comments-title {
	margin-bottom: 2em;
	font-size: 2.5em;
	font-weight: 900;
}

.comment-list {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.comment-list ol {
	list-style-type: none;
}

.comment-body {
	border-bottom: 1px solid #c3c3c3;
	margin-bottom: 3em;
}

.comment-meta {
	position: relative;
	margin-left: 70px;
	font-size: 80%;
}

.comment-meta a,
.comment-form a {
	text-decoration: none;
	border: none;
}

.comment-meta a:hover, .comment-meta a:focus,
.comment-form a:hover,
.comment-form a:focus {
	text-decoration: underline;
}

.comment .avatar {
	position: absolute;
	top: -5px;
	left: -70px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
}

.children {
	margin-left: 1em;
	padding-left: 0;
}

@media screen and (min-width: 900px) {
	.children {
		margin-left: 2em;
	}
}

@media screen and (min-width: 900px) {
	.no-sidebar .children {
		margin-left: 2em;
	}
	.no-sidebar .children .comment-meta {
		margin-left: 80px;
		font-size: 90%;
	}
	.no-sidebar .children .comment .avatar {
		top: -7px;
		left: -80px;
		width: 60px;
		height: 60px;
	}
	.no-sidebar .children .comment-content {
		margin-left: 80px;
	}
}

@media screen and (min-width: 1200px) {
	.no-sidebar .children {
		margin-left: 3em;
	}
	.no-sidebar .comment-meta {
		margin-left: 90px;
	}
	.no-sidebar .comment .avatar {
		top: -8px;
		left: -90px;
		width: 70px;
		height: 70px;
	}
	.no-sidebar .comment-content {
		margin-left: 90px;
	}
}

.comment-metadata {
	margin-top: .2em;
	padding-bottom: .5em;
	font-size: .8em;
	line-height: 1em;
}

.comment-metadata a {
	color: #7D7D7D;
}

.comment-metadata a:hover, .comment-metadata a:focus {
	border-color: #c3c3c3;
}

.comment-author {
	font-size: 1.4em;
	line-height: 1.3em;
}

.says {
	font-size: 80%;
}

.reply {
	margin-bottom: 1.5em;
	text-align: right;
}

.reply a {
	display: inline-block;
	padding: .5em 1.4em;
	font-size: 85%;
	color: #000;
	line-height: 1.3em;
	text-decoration: none;
	border: 1px solid #c3c3c3;
}

.reply a:hover, .reply a:focus {
	color: #fff;
	background: li;
	border-color: #618eb5;
}

.comment-content ol {
	list-style-type: decimal;
}

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

.bypostauthor .avatar {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
	border: 5px solid #618eb5;
	margin-top: -5px;
	margin-left: -5px;
}

/* Comment Form */
.comment-reply-title {
	margin-bottom: 1em;
}

.comment-list .comment-reply-title {
	text-align: left;
}

.comment-form {
	line-height: 1.3em;
}

.comment-form a {
	font-weight: 500;
}

.comment-form .form-submit {
	text-align: right;
}

.comment-form .form-submit input {
	padding: .5em 1.4em;
	font-size: 85%;
	color: #000;
	line-height: 1.3em;
	text-decoration: none;
	border: 1px solid #c3c3c3;
}

.comment-form .form-submit input:hover, .comment-form .form-submit input:focus {
	color: #fff;
	background: #618eb5;
	border-color: #618eb5;
}

.comment-form label {
	width: 33%;
	display: block;
	font-style: italic;
	padding-bottom: .4em;
}

.comment-form .required {
	color: #D54E21;
}

.pingback .comment-body {
	padding: 1em 0;
}

.pingback a {
	font-style: italic;
	text-decoration: none;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
.latest-news-area {
	background-color: #3d5263;
	background-color: #ffc665;
	color: #404040;
}

.latest-news-area h3 {
	color: #404040;
}

.latest-news-area h4 {
	font-size: 1.25em;
	margin-bottom: .5em;
}

.latest-news-area ul li {
	margin-bottom: 2em;
}

.latest-news-area .news-date {
	color: #404040;
	margin-bottom: .5em;
	font-size: 80%;
	font-weight: 700;
	font-style: italic;
}

.latest-news-area a {
	color: #3d5263;
}

.latest-news-area a:hover {
	text-decoration: underline;
}

.latest-news-area .continue-reading a {
	color: #3d5263;
	border-color: #3d5263;
}

.latest-news-area .continue-reading a:hover {
	color: white;
	background-color: #3d5263;
	text-decoration: none;
}

.site-footer {
	position: relative;
	color: #666666;
}

.site-footer.top-margin {
	margin-top: 5em;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover, .site-footer a:focus {
	text-decoration: underline;
}

.home .footer-top {
	border-top: 1px solid #ffc665;
}

.footer-top {
	background-color: rgba(60, 80, 98, 0.7);
	background-color: rgba(253, 198, 101, 0.4);
	background-color: #eeeeee;
}

.footer-top.white-background {
	background-color: white;
}

.additional-logos {
	padding: 1em 0;
	width: 100%;
	text-align: center;
}

.additional-logos .footer-logo {
	padding: 1.5em 1em;
}

.additional-logos .footer-logo figure {
	margin: 0 auto;
}

.additional-logos .gcad-logo {
	width: 140px;
	height: 44px;
}

.additional-logos .adsp-logo {
	width: 138px;
	height: 86px;
}

.additional-logos .nih-gray {
	width: 185px;
	height: 42px;
}

.additional-logos .psom-logo {
	width: 180px;
	height: 51px;
}

.additional-logos .gray-logo {
	fill: #ffffff;
}

.additional-logos a figure {
	-webkit-transition: all 150ms linear;
	transition: all 150ms linear;
}

.additional-logos a:hover figure {
	-webkit-transform: scale(1.05);
	        transform: scale(1.05);
}

@media screen and (min-width: 900px) {
	.additional-logos {
		max-width: 1200px;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		padding: 0;
	}
	.additional-logos .footer-logo {
		max-width: 30%;
		margin: .5em;
	}
}

.social-menu {
	margin: 1em 0;
}

.social-menu ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.social-menu ul a {
	display: block;
	padding: .5em 1em;
	color: white;
	text-decoration: none;
	opacity: .6;
}

.social-menu ul a:hover, .social-menu ul a:focus {
	text-decoration: underline;
	opacity: 1;
}

.footer-lower {
	padding: 2em 1em;
	font-size: .875em;
	background-color: #3d5263;
	color: white;
}
.site-footer ul.inline-list {
	justify-content: flex-start;
}
.site-footer .inline-list li:first-child a{
	padding: 0;
}

.footer-lower a {
	color: #ffc665;
}
.powered-by {
    display: flex;
    justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;
}

.footer-lower .powered-by .niagads-logo {
	/* margin: .5em auto .5em; */
	max-width: 300px;
	line-height: 1.25;
	font-size: 1rem;
}

.footer-lower .powered-by .niagads-logo svg {
	width: 250px;
	height: auto;
}

.footer-lower .powered-by .niagads-logo figcaption {
	color: white;
}

.footer-lower .powered-by a figure {
	-webkit-transition: all 150ms linear;
	transition: all 150ms linear;
}

.footer-lower .powered-by a:hover {
	text-decoration: none;
}

/* .footer-lower .powered-by a:hover figure {
	-webkit-transform: scale(1.03);
	        transform: scale(1.03);
} */

.footer-lower .powered-by a:focus {
	text-decoration: none;
}

.policies-menu ul {
	opacity: .85;
}

.policies-menu ul li + li:before {
	content: "|";
}

.light-italic {
	font-style: italic;
	font-size: .875em;
}

.copyright {
	font-size: 85%;
	color: #aaaaaa;
	margin-top: 1em;
}

@media screen and (min-width: 900px) {
	.latest-news ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.latest-news ul li {
		width: 30%;
	}
}

/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/
.modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	overflow: hidden;
	outline: 0;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgba(0, 0, 0, 0.75);
	font-family: "Raleway", sans-serif;
	font-size: 1.125em;
}

.modal.show {
	display: block;
	-webkit-transition: -webkit-transform 1s ease-out;
	transition: -webkit-transform 1s ease-out;
	transition: transform 1s ease-out;
	transition: transform 1s ease-out, -webkit-transform 1s ease-out;
}

.modal .modal-wrapper {
	z-index: 999;
	position: absolute;
	width: calc(100% - 2em);
	left: 1em;
	top: 100px;
	background-color: #fff;
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	        box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.15);
	padding: 2em;
}

@media screen and (min-width: 900px) {
	.modal .modal-wrapper {
		left: calc((100vw - 600px)/2);
		top: calc((100vh - 200px)/2);
		width: 600px;
		min-height: 200px;
	}
}

.modal .modal-content {
	text-align: center;
	padding: 1em;
}

.modal .modal-content p {
	text-align: left;
}

.modal .close-modal {
	position: absolute;
	top: 0px;
	left: 0;
	right: 0px;
	line-height: 1;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.05);
	background-color: #3d5263;
	background-color: #ffc665;
	color: #fff;
	color: #000;
	text-align: right;
	padding: .275em .5em;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

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

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

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

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 2em;
	max-width: 100%;
	font-size: 90%;
	color: #666666;
	text-align: center;
}

.wp-caption a {
	color: inherit;
}

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

.wp-caption .wp-caption-text {
	margin: .5em 0 1.5em 1em;
}

@media screen and (min-width: 650px) {
	.wp-caption .wp-caption-text {
		margin-left: 2em;
	}
}

@media screen and (min-width: 900px) {
	.wp-caption .wp-caption-text {
		margin-left: 0;
	}
}

/*--------------------------------------------------------------
## Images
--------------------------------------------------------------*/
.featured-image {
	margin: .375em 0;
}

.featured-image img {
	-webkit-box-shadow: 0px 0px 3px 1px #dedede;
	        box-shadow: 0px 0px 3px 1px #dedede;
}

@media screen and (min-width: 1200px) {
	.wp-caption.aligncenter img.diagram,
	.centered-image img.diagram {
		max-width: 90%;
		margin: 0 auto;
	}
}

img {
	-webkit-box-shadow: 0px 1px 3px 1px #eeeeee;
	        box-shadow: 0px 1px 3px 1px #eeeeee;
}

footer img {
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.study-logo img {
	-webkit-box-shadow: none;
	        box-shadow: none;
}

img.img-padding {
	padding: 1em;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em 0;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
	padding: 1em;
}

.gallery-item img {
	display: block;
}

.gallery-item a {
	display: inline-block;
	border-bottom: none;
}

.gallery-item a:hover, .gallery-item a:focus {
	border-bottom: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.gallery-item a:hover img, .gallery-item a:focus img {
	border-color: #618eb5;
}

.gallery-item a img {
	padding: .5em;
	margin: 0 auto;
	border: 1px solid #fff;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
	margin: 0;
	border: none;
}

/*--------------------------------------------------------------
## Icons
--------------------------------------------------------------*/
/* SVG Icons base styles */
.icon {
	display: inline-block;
	fill: currentColor;
	height: 1em;
	position: relative;
	/* Align more nicely with capital letters */
	top: -0.0625em;
	vertical-align: middle;
	width: 1em;
}

/*--------------------------------------------------------------
SVG Fallbacks
--------------------------------------------------------------*/
.svg-fallback {
	display: none;
}

.no-svg .svg-fallback {
	display: inline-block;
}

.no-svg .nav-links .svg-fallback {
	padding: 0 .5em;
	color: inherit;
	background: inherit;
}

.no-svg .svg-fallback.icon-arrow-long-left:before {
	content: "←";
}

.no-svg .svg-fallback.icon-arrow-long-right:before {
	content: "→";
}

/* Social Menu fallbacks */
.no-svg .social-menu a {
	height: auto;
	width: auto;
}

.no-svg .social-menu li a .screen-reader-text {
	clip: auto;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 400;
	height: auto;
	position: relative !important;
	/* overrides previous !important styles */
	width: auto;
}


/* MAP */
#map-holder {
    position: relative;
    /* width: calc(100vw - 80px); */
    /* height: calc((100vw - 80px) * 5 / 12); */
    margin: 0 auto;
}

.map-summary {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 20;
	font-size: 14px;
	line-height: 1.4;
	color: #555;
	padding: 6px 10px;
	border-radius: 4px;
	pointer-events: none;
	max-width: 300px;
	text-align: right;
}

@media (max-width: 768px) {
	.map-summary {
		top: 10px;
		right: 10px;
		font-size: 13px;
		max-width: 220px;
	}
}

.button-group-vertical {
	position: absolute;
}
#float-button-group {
	z-index: 25;
}
button.zoom-control {
    display: block;
    margin-bottom: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
	line-height: 1;
    color: #999;
    box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
	cursor: pointer;
	border: none;
}
button.zoom-control:focus {
	-webkit-animation: effect_click 0.08s ease-out;
	animation: effect_click 0.08s ease-out;
}

@keyframes effect_click {
	50% {
	  transform: scale(0.99, 0.99);
	}
	/* 99% {
	  transform: scale(0.001, 0.001);
	} */
	100% {
	  transform: scale(0.9, 0.9);
	}
  }
/* #map-holder svg {
    width: 100%;
    height: 100%;
} */
#map-holder svg rect {
    fill: #fff;
}
.country {
    fill: #d3d3d3;
    stroke: #fff;
    stroke-width: 1;
}
.country.cohort {
    fill: var(--blue);
}
.country.cohort:hover {
	cursor: pointer;
}
.close {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 20px;
	color: #ddd;
	padding: 0 8px;
	cursor: pointer;
}
#popup,
#popup2 {
	display: block;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(212, 180, 131, 0.5);
	max-width: 500px;
	min-width: 250px;
	max-height: 500px;
	overflow-y: auto;
	position: absolute;
	font-size: 0.875em;
	z-index: 2;
}
#popup.hide,
#popup2.hide {
	display: none;
}


.close {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 18px;
	color: #fff;
	padding: 0 8px;
	cursor: pointer;
}

.inst-list-area {
	background-color: var(--orange);
	background-color: #fff;
	font-size: 1em;

}

#popup2 .inst-list-area {
	background-color: #fff;

}

.inst-list-area h3 {
	margin: 0;
	padding: 12px 30px 10px 12px;
	color: #fff;
}

#popup .inst-list-area h3 {
	background-color: var(--orange);
}

#popup2 .inst-list-area h3 {
	background-color: var(--blue);
}

ul.inst-list,
.inst-list {
	margin: 0;
	padding: 10px 12px;
	list-style-type: none;
}

.inst-list-area a {
	color: var(--orange);
	/* font-size: 0.875em; */
}

h3.dark-bg {
	background-color: var(--black);
	color: var(--white);
}

.inst-list li {
	padding: 10px 0;
	transition: all 0.1s ease;
	border-bottom: 1px solid var(--grey-semi);
}
/* stylelint-enable */

.inst-list-area li:last-child {
	border-bottom: none;
}

.inst-list-area li a {
	/* font-size: 0.875em; */
	/* color: var(--gcad-yellow); */
}

.inst-list-area li a .svg-inline--fa {
	font-size: 0.75em;

}
.tab-button.active {
	background-color: #618eb5;
	color: #fff;
}
.unknown-num {
	color: #666;
}

/* ==========================================================================
   DAR Statistics dashboard (/dar-statistics)
   ========================================================================== */
.dar-dash-area { margin: 2rem 0; }
.dar-filter-row { margin: 1.5rem 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dar-filter-row select { padding: 0.35rem 0.5rem; }

.dar-charts.grid-3,
.dar-donuts.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
.dar-tiles.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2rem 0; }
.dar-charts h3, .dar-donuts h3 { font-size: 1rem; margin: 0 0 0.5rem; text-align: center; color: #3d5263; }

.dar-tile { background: #f4f6f8; border-radius: 6px; padding: 1.5rem 1rem; text-align: center; }
.dar-tile-num { font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: #3d5263; }
.dar-tile-label { margin-top: 0.35rem; font-size: 0.95rem; color: #333; }
.dar-tile-sub { margin-top: 0.35rem; font-size: 0.8rem; color: #666; }

.dar-table-title { margin: 2.5rem 0 1rem; }
.dar-footnote { margin-top: 1.5rem; font-size: 0.85rem; color: #777; font-style: italic; }
.dar-stats-unavailable { margin: 2rem 0; padding: 1rem; background: #fff3cd; color: #664d03; border-radius: 4px; }

@media (max-width: 900px) {
  .dar-charts.grid-3, .dar-donuts.grid-3, .dar-tiles.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dar-charts.grid-3, .dar-donuts.grid-3, .dar-tiles.grid-4 { grid-template-columns: 1fr; }
}

/* Per-tile accent colors (light tint + matching number) */
.dar-tiles .dar-tile:nth-child(1) { background: #f1ecf6; }
.dar-tiles .dar-tile:nth-child(1) .dar-tile-num { color: #8e63a8; }
.dar-tiles .dar-tile:nth-child(2) { background: #e9f1f8; }
.dar-tiles .dar-tile:nth-child(2) .dar-tile-num { color: #2f6f9f; }
.dar-tiles .dar-tile:nth-child(3) { background: #e6f3f0; }
.dar-tiles .dar-tile:nth-child(3) .dar-tile-num { color: #2e8b7d; }
.dar-tiles .dar-tile:nth-child(4) { background: #fbeee6; }
.dar-tiles .dar-tile:nth-child(4) .dar-tile-num { color: #e07a3f; }