/*
Theme Name: Frontwards
Theme URI: http://frontwardsdesign.co.uk
Text Domain: frontwards
Description: So barebones it barely exists.
Version: 1.01
Author: Oliver Fisher
Author URI: http://frontwardsdesign.co.uk
*/

/*  ------------------------------

CONTENTS
========

 1. #F00 Baseline
 2. #080 Utility
 3. #00F Typography
 4. #FF0 Global Elements
 5. #48A Components



/*  ============================================================
 1. #F00 BASELINE
    ============================================================  */


/*  RESETS
	------------------------------  */

/* Box Sizing */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* Remove default margin and make elements inherit certain styles */
* {
	margin: 0;
	font-family: inherit;
	line-height: inherit;
	color: inherit;
}

/* Make default focus styles consistent */
*:focus {
	outline: 1px dotted #303338;
	outline-offset: 3px;
}

/* Remove default list styles */
ul,
ol {
	list-style: none;
	padding: 0;
}


/*  ANIMATIONS / TRANSITIONS
	------------------------------  */

@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
	*,
	*:before,
	*:after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}


/*  HTML
	------------------------------  */

html {
	height: 100%;
	font-size: 87.5%;
}

@media screen and (min-width: 56.25em) {

	html {
		font-size: 100%;
	}

}

@media screen and (min-width: 75em) {

	html {
		font-size: 112.5%;
	}

}


/*  BODY
	------------------------------  */

body {
	min-height: 100%;
	scroll-behavior: smooth;
	padding: 1.125rem 1.125rem 0;
	font-family: 'adelle-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5;
	-webkit-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern";
	font-feature-settings: "kern";
	text-rendering:optimizeLegibility;
	background-color: #fff;
	color: #303338;
	fill: #303338;
}

body.home {
	padding-top: 0;
}

@media screen and (min-width: 37.5em) {

	body {
		padding: 2.25rem 2.25rem 0;
	}

}

@media screen and (min-width: 56.25em) {

	body {
		padding: 3rem 3rem 0;
	}

}


/*  IMAGES
	------------------------------  */

	img {
		display: block;
		height: auto;
		max-width: 100%;
		border-radius: 3px;
	}


/*  LINKS
	------------------------------  */

a {
	text-decoration: none;
	-webkit-transition: color .3s ease, background .3s ease, border-color .3s ease;
	-moz-transition: color .3s ease, background .3s ease, border-color .3s ease;
	transition: color .3s ease, background .3s ease, border-color .3s ease;
}

a:focus {
	outline: 0;
}


/*  BUTTONS
	------------------------------  */

button,
[type="button"],
[type="submit"] {
	border: 0;
	background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button svg {
	pointer-events: none;
}

button:focus,
[type="button"]:focus {
	outline: 0;
}

.button-icon {
	height: 1.5rem;
}


/*  LISTS
	------------------------------  */

[class*="text-content"] ul,
[class*="text-content"] ol {
	margin-left: 1.3125rem;
}

[class*="text-content"] ul > * + *,
[class*="text-content"] ol > * + * {
	margin-top: .75rem;
}

[class*="text-content"] ul {
	list-style: disc;
}

[class*="text-content"] ol {
	list-style: decimal;
}

@media screen and (min-width: 37.5em) {

	[class*="text-content"] ul,
	[class*="text-content"] ol {
		margin-left: 0;
	}

}


/*  FORMS
	------------------------------  */

/* GLOBAL */

fieldset {
	padding: 0;
	border: 0;
}

label {
	font-size: 1rem;
}

.wpforms-container .wpforms-field-label {
	font-weight: 600;
}

.wpforms-form label + * {
	margin-top: .1875rem;
}

/* fieldset label + label {
	margin-left: .75rem;
} */

input,
textarea,
select {
	font-size: 1rem;
}

[type="text"],
[type="email"],
[type="number"],
select,
textarea {
	padding: .375rem;
    line-height: 1.5rem;
	border: 2px solid;
	border-radius: 3px;
}

[type="text"]:focus,
[type="email"]:focus,
[type="number"]:focus,
select:focus,
textarea:focus {
	border-color: #028090;
}

[type="text"],
[type="email"],
[type="number"],
[type="tel"],
[type="password"],
select {
	height: 2.25rem;
}

[type="submit"] {
	height: 3.375rem;
	width: 100%;
	padding: 0 2.25rem;
	font-size: 1.266rem;
	font-weight: 600;
	text-align: center;
	background-color: #303338;
	color: #fff;
	border-radius: 3px;
	-webkit-transition: background-color .3s ease, border-color .3s ease;
	-moz-transition: background-color .3s ease, border-color .3s ease;
	transition: background-color .3s ease, border-color .3s ease;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

[class*="stack-"] > * + [type="submit"] {
	margin-top: 2.25rem;
}

[type="submit"]:hover,
[type="submit"]:focus {
	background-color: #028090;
}

textarea,
.wpforms-container textarea.wpforms-field-medium {
	height: 15rem;
}

select {
	width: 100%;
	font-weight: 600;
	background: #fff;
}

[type="submit"],
[type="radio"],
label,
select {
	cursor: pointer;
}

/* Contact Form */

.wpforms-container .wpforms-field,
.wpforms-container .wpforms-submit-container {
	padding: 0;
}

.wpforms-field + .wpforms-field {
	margin-top: 1.5rem;
}

.wpforms-container .wpforms-submit-container {
	margin-top: 2.25rem;
}

.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium {
	max-width: none;
}



/*  ============================================================
 2. #080 UTILITY
    ============================================================  */


/*  VISIBILITY
    ------------------------------  */

	.fade {
		will-change: opacity;
		-webkit-transition: opacity .3s ease;
		-moz-transition: opacity .3s ease;
		transition: opacity .3s ease;
	}


/*  DISPLAY
    ------------------------------  */

	[hidden] {
		display: none !important;
	}

	.block {
		display: block;
	}

	.inline-block {
		display: inline-block;
	}

	/* Visually Hidden */

	.visually-hidden {
	    position: absolute !important;
	    height: 1px;
		width: 1px;
	    overflow: hidden;
	    clip: rect(0 0 0 0);
		white-space: nowrap;
		padding: 0;
		border: 0;
	}


/*  POSITIONING
    ------------------------------  */

	/* Relative / Absolute / Fixed */

	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.fixed {
		position: fixed;
	}

	.horizontal-center-self {
		margin-left: auto;
		margin-right: auto;
	}


/*  LAYOUT
    ------------------------------  */

	/* Wrapper */

	.wrapper-medium,
	.wrapper-large {
		margin-left: auto;
		margin-right: auto;
	}

	.wrapper-small {
		max-width: 30rem;
	}

	.wrapper-medium {
		max-width: 48rem;
	}

	.wrapper-large {
		max-width: 62.5rem;
	}

	/* Flex */

	.flex {
		display: -webkit-flex;
		display: flex;
	}

	.inline-flex {
		display: -webkit-inline-flex;
		display: inline-flex;
	}

	.flex-wrap {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.flex-vertical {
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.flex-dead-center {
		justify-content: center;
		align-items: center;
	}

	.justify-content-center {
		-webkit-justify-content: center;
		justify-content: center;
	}

	.justify-content-space-between {
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

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

	.space-children-x-small > * + * {
		margin-left: .375rem;
	}

	.space-children-small > * + * {
		margin-left: .75rem;
	}

	.space-children-base > * + * {
		margin-left: 1.5rem;
	}

	.space-children-large > * + * {
		margin-left: 3rem;
	}

	.force-right {
		margin-left: auto;
	}

	.force-bottom,
	[class*="stack"] > * + .force-to-bottom {
		margin-top: auto;
	}

	.flex-grow {
		flex-grow: 1;
	}

	/* Columns */

	.columns {
		flex-wrap: wrap;
	}

	.columns > * + * {
		width: 100%;
		margin-top: 1.5rem;
	}

	.page-template-about .columns > * + * {
		margin-top: 3rem;
	}

	@media screen and (min-width: 75em) {

		.columns {
			display: flex;
			flex-wrap: nowrap;
			margin-left: -.75rem;
			margin-right: -.75rem;
		}

		.columns > * {
			padding-left: .75rem;
			padding-right: .75rem;
		}

		.columns > * + * {
			margin: 0;
		}

		.column-50 {
			width: 50%;
		}

		.column-66 {
			width: 66.6666%;
		}

		.column-33 {
			width: 33.3333%;
		}

	}

	/* Indentation */

	@media screen and (min-width: 37.5em) {

		.indent-left-base {
			margin-left: 1.5rem;
		}

		.indent-left-large {
			margin-left: 6rem;
		}

	}


/*  DIMENSIONS
    ------------------------------  */

	.full-screen {
		height: 100%;
		width: 100%;
	}

	.full-width {
		width: 100%;
	}

	.max-width-none {
		max-width: none;
	}


/*  SPACING
    ------------------------------  */

	/* Vertical Rhythm */

	.stack-x-small > * + * {
		margin-top: .375rem;
	}

	.stack-small > * + * {
		margin-top: .75rem;
	}

	.stack-small-medium > * + * {
		margin-top: 1.125rem;
	}

	.stack-medium > * + * {
		margin-top: 1.5rem;
	}

	.stack-medium-large > * + * {
		margin-top: 2.25rem;
	}

	.stack-large > * + * {
		margin-top: 3rem;
	}

	.stack-x-large > * + * {
		margin-top: 4.5rem;
	}

	.stack-x-x-large > * + * {
		margin-top: 6rem;
	}


/*  COLOURS
    ------------------------------  */

	/* Text */

	.black {
		color: #303338;
		fill: #303338;
	}

	.white {
		color: #fff;
		fill: #fff;
	}

	.grey {
		color: #eee;
		fill: #eee;
	}

	.yellow {
		color: #FFBF00;
		fill: #FFBF00;
	}

	.green {
		color: #028090;
		fill: #028090;
	}

	.red{
		color: #ED1C2C;
		fill: #ED1C2C;
	}

	.blue{
		color: #0059A5;
		fill: #0059A5;
	}

	.orange {
		color: #F96300;
		fill: #F96300;
	}

	/* Background */

	.white-background {
		background-color: #fff;
	}

	.black-background {
		background-color: #303338;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.grey-background {
		background-color: #eee;
	}

	.green-background {
		background-color: #028090;
	}

	.red-background {
		background-color: #ED1C2C;
	}

	.blue-background {
		background-color: #0059A5;
	}

	.orange-background {
		background-color: #F96300;
	}


/*  BORDERS
    ------------------------------  */

	.border-all-black {
		border: 4px solid #303338;
	}

	.border-bottom {
		border-bottom: 2px solid;
	}


/*  TYPOGRAPHY
    ------------------------------  */

	/* Size */

	.x-x-large {
		font-size: 2.999rem;
	}

	.x-large {
		font-size: 1.99rem;
	}

	.large {
		font-size: 1.688rem;
	}

	.medium {
		font-size: 1.266rem;
	}

	.base-plus {
		font-size: 1.125rem;
	}

	.base {
		font-size: 1rem;
	}

	.small {
		font-size: .844rem;
	}

	.x-small {
		font-size: .712rem;
	}

	@media screen and (min-width: 37.5em) {

		.x-x-large {
			font-size: 3.997rem;
		}

		.x-large {
			font-size: 2.665rem;
		}

	}

	/* Alignment */

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

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

	.text-align-center > * {
		margin-left: auto;
		margin-right: auto;
	}

	/* Weight */

	.light {
		font-weight: 300;
	}

	.regular {
		font-weight: 400;
	}

	.semibold {
		font-weight: 600;
	}

	.bold {
		font-weight: 700;
	}

	/* Style */

	.italic {
		font-style: italic;
	}

	/* Case */

	.uppercase {
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	/* Line Height */

	.line-height-none {
		line-height: 0;
	}

	.line-height-x-tight {
		line-height: 1;
	}

	.line-height-tight {
		line-height: 1.25;
	}

	.line-height-base {
		line-height: 1.5;
	}


/*  ============================================================
 3. #00F TYPOGRAPHIC ELEMENTS
    ============================================================  */


/*  HEADINGS
    ------------------------------  */

	h1, h2, h3 {
		font-weight: 700;
	}

	.page-header {
		padding: .75rem 1.5rem;
		line-height: 1;
		background-color: #028090;
		border-radius: 3px;
		color: #fff;
	}


/*  PARAGRAPHS
    ------------------------------  */

	.text-content-1 p:first-of-type {
		font-size: 1.266rem;
		font-weight: 600;
	}



/*  ============================================================
 4. #FF0 GLOBAL ELEMENTS
    ============================================================  */


/*  BANNER
    ------------------------------  */

	.banner-inner,
	.site-logo {
		will-change: transform;
		-webkit-transition: transform .3s ease-in-out;
		-moz-transition: transform .3s ease-in-out;
		transition: transform .3s ease-in-out;
	}

	.modal-toggle,
	.a11y-modal__close-btn {
		will-change: transform;
		-webkit-transition: transform .3s ease-in-out, background-color .3s ease, color .3s ease;
		-moz-transition: transform .3s ease-in-out, background-color .3s ease, color .3s ease;
		transition: transform .3s ease-in-out, background-color .3s ease, color .3s ease;
	}

	.site-logo  a:hover,
	.site-logo  a:focus {
		background: none;
	}

	[role="banner"] {
		top: 0;
		left: 0;
		z-index: 3;
	}

	.banner-inner {
		position: fixed;
		top: 0;
		padding: 1.125rem;
	}

	.site-logo svg {
		-webkit-transition: opacity .3s ease, transform .3s ease;
		-moz-transition: opacity .3s ease, transform .3s ease;
		transition: opacity .3s ease, transform .3s ease;
	}

	.logo-full {
		height: 3rem;
	}

	.logo-mark {
		top: 1.875rem;
		left: 0;
		opacity: 0;
	}

	.logo-mark svg {
		height: 1.6875rem;
	}

	.scrolled .banner-inner {
		transform: translateY(-2.25rem);
		box-shadow: 0 -5px 30px 20px rgba(0,0,0,.1);
	}

	.scrolled .logo-full {
		opacity: 0;
	}

	.scrolled .logo-mark {
		opacity: 1;
	}

	@media screen and (min-width: 37.5em) {

		.banner-inner {
			padding: 1.5rem 2.25rem 1.125rem;
		}

		.scrolled .banner-inner {
			transform: translateY(-3rem);
		}

		.logo-full {
			height: 3.75rem;
		}

		.logo-mark {
			top: 2.25rem;
		}

		.logo-mark svg {
			height: 1.875rem;
		}

	}

	@media screen and (min-width: 56.25em) {

		.banner-inner {
			padding: 1.5rem 3rem 1.125rem;
		}

		.logo-mark {
			top: 2.25rem;
		}

	}


	@media screen and (min-width: 90em) {

		.scrolled .banner-inner {
			transform: translateY(-3.75rem);
		}

		.logo-full {
			height: 4.5rem;
		}

		.logo-mark {
			top: 3rem;
		}

	}

	/* Navigation */

	/* .nav-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -5px 30px 20px rgba(0,0,0,0.1);
		background-color: #fff;
	}

	.home .nav-container {
		background-color: #028090;
	} */

	.main-nav {
		display: none;
	}

	.main-nav,
	.main-nav ul > * {
		flex-grow: 1;
	}

	.main-nav a {
		display: block;
		padding: .375rem .5625rem;
		font-size: .844rem;
		text-align: center;
		-webkit-transition: color .3s ease, background .3s ease, border-color .3s ease;
		-moz-transition: color .3s ease, background .3s ease, border-color .3s ease;
		transition: color .3s ease, background .3s ease, border-color .3s ease;
	}

	.main-nav a:hover,
	.main-nav a:focus,
	.home .main-nav a {
		color: #fff;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.main-nav a:hover,
	.main-nav a:focus {
		background-color: #028090;
	}

	.home .main-nav a:hover,
	.home .main-nav a:focus {
		background-color: #fff;
		color: #028090;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.main-nav .donate {
		position: fixed;
		top: 1.125rem;
		right: 1.125rem;
	}

	.main-nav .donate a {
		background-color: #303338;
		color: #fff;
		border-radius: 3px;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.home .main-nav .donate a {
		background-color: #fff;
		color: #028090;
	}

	.main-nav .donate a:hover,
	.main-nav .donate a:focus {
		background-color: #028090;
	}

	.home .main-nav .donate a:hover,
	.home .main-nav .donate a:focus {
		background-color: #303338;
		color: #fff;
	}

	/* Hide Details link on small screens */
	#menu-main-menu > #menu-item-266 {
		display: none;
	}

	@media screen and (min-width: 37.5em) {

		.main-nav a,
		.modal-toggle {
			font-size: 1rem;
		}

		/* Show some links on larger screens */
		/* .main-nav .impact,
		.main-nav .news,
		.main-nav .resources {
			display: block;
		} */

		.main-nav .donate {
			top: 1.5rem;
			right: 2.25rem;
		}

	}

	@media screen and (min-width: 56.25em) {

		.main-nav .donate {
			right: 3rem;
		}

	}

	@media screen and (min-width: 75em) {

		.nav-container {
			position: absolute;
			left: auto;
			right: 3rem;
			bottom: auto;
			will-change: transform;
			transform: translateY(100%);
			padding: 0;
			background-color: transparent !important;
			box-shadow: none;
			-webkit-transition: transform .3s ease-in-out;
			-moz-transition: transform .3s ease-in-out;
			transition: transform .3s ease-in-out;
		}

		.main-nav {
			display: block;
		}

		.scrolled .nav-container {
			transform: translateY(.5625rem);
		}

		.main-nav,
		.main-nav ul > *,
		#other-modal__trigger-BUTTON {
			flex-grow: 0;
		}

		.main-nav ul > * + * {
			margin-left: .75rem;
		}

		.main-nav .donate {
			position: static;
		}

		.main-nav a {
			padding: .375rem .75rem;
			border-radius: 3px;
		}

	}

	@media screen and (min-width: 90em) {

		.main-nav .donate {
			margin-left: 6rem;
		}

	}



/*  MAIN
    ------------------------------  */

	main {
		padding: 9rem 0 6rem;
	}


/*  FOOTER
    ------------------------------  */

	[role="contentinfo"] {
		margin-left: -1.125rem;
		margin-right: -1.125rem;
		padding: 1.125rem;
	}

	.footer-columns > * + * {
		margin-top: 3rem;
	}

	/* .footer-logo {
		width: 37.5%;
	} */

	@media screen and (min-width: 37.5em) {

		[role="contentinfo"] {
			margin-left: -2.25rem;
			margin-right: -2.25rem;
			padding: 1.5rem 2.25rem;
		}

		.footer-columns {
			display: flex;
			margin-left: -1.125rem;
			margin-right: -1.125rem;
		}

		.footer-columns > * {
			width: 50%;
			padding: 0 1.125rem;
		}

		.footer-columns > * + * {
			margin-top: 0;
		}

		/* .footer-logo svg {
			width: 21rem;
		} */

		/* .footer-nav-container {
			width: 33.333%;
			margin-left: auto;
		} */

	}

	@media screen and (min-width: 56.25em) {

		[role="contentinfo"] {
			margin-left: -3rem;
			margin-right: -3rem;
			padding: 1.5rem 3rem;
		}

		/* .footer-logo {
			width: 25%;
		}
		.footer-subscribe-container {
			width: 50%;
		} */

		.footer-columns {
			margin-left: -1.5rem;
			margin-right: -1.5rem;
		}

		.footer-columns > * {
			width: 33.333%;
			padding: 0 1.5rem;
		}

		.footer-subscribe-container {
			margin-left: auto;
		}

	}

	.footer-nav a {
		font-size: 1.125rem;
	}

	/* Footer Subscribe form overrides */

	[role="contentinfo"] .mc4wp-form label {
		font-size: .844rem;
	}

	[role="contentinfo"] .mc4wp-form-fields > * {
		display: flex;
		flex-wrap: wrap;
	}

	[role="contentinfo"] .first-name,
	[role="contentinfo"] .last-name {
		width: 50%;
	}

	[role="contentinfo"] .first-name {
		padding-right: .75rem;
	}

	[role="contentinfo"] .last-name {
		margin-top: 0;
		padding-left: .75rem;
	}

	[role="contentinfo"] .email {
		width: 100%;
	}

	[role="contentinfo"] .subscribe-submit {
		border: 3px solid;
	}

	[role="contentinfo"] .subscribe-submit:hover,
	[role="contentinfo"] .subscribe-submit:focus {
		border-color: #028090;
	}


/*  LINKS
	------------------------------  */

	[role="banner"] .current-menu-item a,
	[role="banner"] .current_page_item a {
		position: relative;
		cursor: default;
		color: #028090;
	}

	.main-nav .donate.current-menu-item a,
	.main-nav .donate.current-menu-item a {
		background-color: #028090;
		color: #fff;
	}

	[role="banner"] .current-menu-item a:after,
	[role="banner"] .current_page_item a:after {
		content: '';
		position: absolute;
		bottom: .375rem;
	    left: .75rem;
	    right: .75rem;
		border-bottom: 2px solid;
		border-color: inherit;
	}

	.main-nav .donate.current-menu-item a:after,
	.main-nav .donate.current_page_item a:after {
		border: none;
	}

	.current-menu-item a:hover,
	.current_page_item-item a:hover {
		background-color: transparent;
		color: inherit;
	}

	p a {
		position: relative;
		font-weight: 700;
		color: #028090;
		border-bottom: 3px solid #028090;
	}

	p a:hover,
	p a:focus {
		background-color: #028090;
		color: #fff;
		border-radius: 3px;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	p.x-small a {
		border-bottom: 1px solid;
	}

	p.x-small a:hover,
	p.x-small a:focus {
		border-radius: 0;
	}

	.black-background p a {
		color: #fff;
	}


/*  BUTTONS & FAKE BUTTONS
	------------------------------  */

	button {
		padding: 0;
		font: inherit;
		cursor: pointer;
	}


/*  ============================================================
 5. #48A COMPONENTS
    ============================================================  */

	/*  SKIP LINK
	    ------------------------------  */

	#skip-link {
		position: fixed;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 4;
		padding: .75rem 1.5rem;
		-webkit-transition: transform .3s ease;
		-moz-transition: transform .3s ease;
		transition: transform .3s ease;
		background-color: #303338;
		color: #fff;
	}

	#skip-link:not(:focus):not(:hover) {
		-webkit-transform: translateY(-4em) translateX(-50%);
		-ms-transform: translateY(-4em) translateX(-50%);
		transform: translateY(-4em) translateX(-50%);
		opacity: 0;
	}

	#skip-link + * {
		margin-left: 0;
	}

	/* Offset #main-content element from top so not hidden by header */

	#main-content {
		position: relative;
	}

	#main-content:focus {
		outline: 0;
	}

	/* #main-content:focus:before {
		content: '';
		display: block;
		height: 10.5rem;
		width: 0;
		margin-top: -10.5rem;
	}

	#main-content:focus:after {
		content: '';
		position: absolute;
		left: -6.75rem;
		bottom: -.75rem;
		right: 0;
		height: 6.75rem;
		outline: 4px dashed #303338;
	} */


	/*  ACCORDION
		------------------------------  */

	.accordion-heading {
		padding-bottom: .375rem;
	}

	.accordion-heading:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: .375rem;
		background-color: #028090;
		border-radius: 3px;
	}

	.accordion-icon {
		height: 1.125rem;
		fill:none;
		stroke:#028090;
		stroke-width:45.1052;
		stroke-linecap:round;
		stroke-linejoin:round;
		-webkit-transition: transform .3s ease;
		-moz-transition: transform .3s ease;
		transition: transform .3s ease;
	}

	[aria-expanded="true"] .accordion-icon {
		transform: rotate(180deg);
	}


	/*  PANELS
	    ------------------------------  */

	.panel {
		padding: 1.125rem;
		border-radius: 8px;
	}

	@media screen and (min-width: 37.5em) {

		.panel {
			padding: 1.5rem;
		}

	}

	@media screen and (min-width: 56.25em) {

		.panel {
			padding: 3rem;
		}

	}


	/*  CARDS
	    ------------------------------  */

	.pack > * + * {
		margin-top: 3rem;
	}

	.card {
		width: 100%;
	}

	@media screen and (min-width: 37.5em) {

		.pack {
			margin: -.75rem;
		}

		.pack > * + * {
			margin-top: 0;
		}

		.card {
			width: 50%;
			padding: .75rem;
		}

	}

	@media screen and (min-width: 56.25em) {

		.pack {
			margin: -.1.5rem;
		}

		.card {
			/* width: 50%; */
			padding: 1.5rem;
		}

	}

	.project-contents,
	.resource {
		border: 4px solid #028090;
		border-radius: 8px;
	}

	.project-contents {
		height: 100%;
		padding: 1.5rem;
	}

	.resource {
		padding: 1.5rem;
	}

	.resource:hover,
	.resource:focus {
		background-color: #028090;
		color: #fff;
	}

	.resource-icon {
		height: 3rem;
		fill: none;
		stroke: #028090;
		stroke-width: 8;
		stroke-linecap: round;
		stroke-linejoin: round;
		-webkit-transition: stroke .3s ease;
		-moz-transition: stroke .3s ease;
		transition: stroke .3s ease;
	}

	.resource:hover .resource-icon,
	.resource:focus .resource-icon {
		stroke: #fff;
	}

	@media screen and (min-width: 56.25em) {

		.project-contents {
			padding: 3rem;
		}

	}


	/*  TAGS
		------------------------------  */

	.tag {
		padding: .375rem .75rem;
		border-radius: 3px;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.tag[aria-current="page"],
	.tag.black-background:hover,
	.tag.black-background:focus {
		background-color: #028090;
	}

	.tag.green-background:hover,
	.tag.green-background:focus {
		background-color: #303338;
	}


	/*  PAGINATION
		------------------------------  */

	.pagination a {
		display: inline-block;
		border-radius: 3px;
	}

	.pagination a:hover,
	.pagination a:focus {
		background-color: #028090;
		color: #fff;
	}

	.previous-post a {
		padding: .375rem .75rem .375rem .375rem;
	}

	.next-post a {
		padding: .375rem .375rem .375rem .75rem;
	}

	.pagination-icon {
		height: .5625rem;
		fill:none;
		stroke:#303338;
		stroke-width:55.1052;
		stroke-linecap:round;
		stroke-linejoin:round;
		-webkit-transition: stroke .3s ease;
		-moz-transition: stroke .3s ease;
		transition: stroke .3s ease;
	}

	.pagination a:hover .pagination-icon,
	.pagination a:focus .pagination-icon {
		stroke: #fff;
	}

	.previous-post .pagination-icon {
		transform: rotate(-90deg);
	}

	.next-post .pagination-icon {
		transform: rotate(90deg);
	}


	/*  MODAL
		------------------------------  */

	.at-only:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(100%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap; width: 1px;
	}

	body.modal-open {
	  /* position: relative; */
	  overflow: hidden;
	}

	/* body.modal-open:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: .7;
	} */

	.js [data-modal],
	.a11y-modal {
		position: fixed;
		transform: translateY(0%);
		visibility: visible;
		z-index: 10;
		max-height: 100%;
		overflow: visible;
		margin: auto;
		opacity: 1;
		-webkit-overflow-scrolling: touch;
		background-color: rgba(255,255,255,0.85);
	}

	[data-modal-open][hidden] {
	  display: none;
	}

	.js [data-modal]:focus,
	.a11y-modal:focus {
		outline: 0;
	}

	.js [data-modal][hidden]
	.a11y-modal[hidden] {
		opacity: 0;
		pointer-events: none;
		transform: translateY(15vh);
		visibility: hidden;
	}

	.a11y-modal {
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	    padding: 6rem 1.125rem 1.125rem;
	}

	.a11y-modal [role="navigation"] {
		top: calc(50% - 1.78125rem);
		transform: translateY(-50%);
	}

	.a11y-modal .menu {
		max-width: 30rem;
	}

	.a11y-modal .menu,
	.a11y-modal .menu > * {
		width: 100%;
	}

	.a11y-modal .menu > * + * {
		margin-top: .5625rem;
	}

	.a11y-modal .menu > :nth-child(1) {
		margin-left: 2.25rem;
	}

	.a11y-modal .menu > :nth-child(2) {
		margin-left: 3.375rem;
	}

	.a11y-modal .menu > :nth-child(3) {
		margin-left: 2.625rem;
	}

	.a11y-modal .menu > :nth-child(4) {
		margin-left: 1.875rem;
	}

	.a11y-modal .menu > :nth-child(5) {
		margin-left: 3.375rem;
	}

	.a11y-modal .menu > :nth-child(6) {
		margin-left: 2.625rem;
	}

	.a11y-modal .menu > :nth-child(7) {
		margin-left: 4.125rem;
	}

	.a11y-modal a {
		display: block;
		width: calc(100% - 4.5rem);
		padding: .375rem .75rem;
		font-size: 1.999rem;
		text-align: center;
		background-color: #028090;
		color: #fff;
		border-radius: 3px;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	/* Modal buttons */
	.modal-toggle,
	.a11y-modal__close-btn {
		position: absolute;
		top: 1.125rem;
		right: 1.125rem;
		padding: .375rem .75rem;
		font-weight: 700;
		border-radius: 3px;
		background-color: #028090;
		color: #fff;
	}

	.scrolled .modal-toggle,
	.scrolled .a11y-modal__close-btn {
		transform: translateY(-.75rem);
	}

	.home .modal-toggle {
		background-color: #fff;
		color: #028090;
	}

	.modal-toggle .button-icon {
		fill: #fff;
	}

	.home .modal-toggle .button-icon {
		fill: #028090;
	}

	.modal-toggle:hover,
	.modal-toggle:focus,
	.a11y-modal__close-btn:hover,
	.a11y-modal__close-btn:focus {
		background-color: #303338;
	}

	.home .modal-toggle:hover,
	.home .modal-toggle:focus {
		color: #fff;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}

	.home .modal-toggle:hover .button-icon,
	.home .modal-toggle:focus .button-icon {
		fill: #fff;
	}

	@media screen and (min-width: 37.5em) {

		.modal-toggle,
		.a11y-modal__close-btn {
			top: 1.5rem;
			right: 2.25rem;
		}

		.scrolled .modal-toggle,
		.scrolled .a11y-modal__close-btn {
			transform: translateY(-.9375rem);
		}

	}

	@media screen and (min-width: 56.25em) {

		.modal-toggle,
		.a11y-modal__close-btn {
			right: 3rem;
		}

	}

	@media screen and (min-width: 75em) {

		#menu-modal__trigger-BUTTON {
			display: none;
		}

	}


	/*  HOMEPAGE
		------------------------------  */

	.home {
		overflow: hidden;
	}

	.home,
	.home main {
		height: 100%;
	}

	.home main {
		padding: 0;
	}

	.sign {
		z-index: 1;
	}

	.sign-handle {
		/* width: 1.5rem; */
	}

	/* [class*="people"] {
		bottom: 3rem;
		width: 45%;
		fill: none;
		stroke-width:23.4667;
	}

	.people-left {
		left: 0;
	}

	.people-right {
		right: 0;
	} */

	@media screen and (orientation: portrait) {

		/* .sign,
		.sign-handle {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		} */

		.sign {
			width: 100%;
			padding-top: 50vh;
			margin-top: -50%;
		}

		.sign-handle {
			width: 6.15%;
		}

	}

	/* @media screen and (min-width: 37.5em) and (orientation: portrait) {

		[class*="people"] {
			bottom: 4.125rem;
		}

	} */

	@media screen and (orientation: landscape) {

		.sign {
			height: 100%;
			margin-bottom: calc(-5.9% - 4.5rem);
			padding: calc(5.9% + 4.5rem) 0;
		}

		.sign-handle {
			width: 2.05%;
		}

	}


	@media screen and (min-width: 75em) {

		[class*="people"] {
			bottom: 1.5rem;
		}

	}

	/*  SUPPORT US PAGE
		------------------------------  */

	.donate-content {
		max-width: 30rem;
		margin-left: auto;
		margin-right: auto;
	}

	.donate-form {
		margin-top: 2.25rem;
	}

	@media screen and (min-width: 56.25em) {

		.donate-content {
			display: flex;
			max-width: none;
			margin-left: -1.5rem;
			margin-right: -1.5rem;
		}

		.donate-content > * {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}

		.donate-form {
			flex-grow: 1;
			margin-top: 0;
		}

	}

	@media screen and (min-width: 75em) {

		.donate-text {
			flex-shrink: 0;
		}

	}