/*!
Theme Name: Wyoming Humanities
Author: The BARK Firm
Author URI: https://thebarkfirm.com
Description: Custom Built WordPress Theme for Wyoming Humanities
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wyoming-humanities
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Animations

# Containers
- Container Utilities
- Background Utilities
- Image Utilities
- Video Utilities

# Typography
- Font Styles
- Font Utilities

# Links and Buttons
- Link Styles
- Button Styles

# Header and Nav
- General
- Nav Links
- Custom Toggler Icon Animation

# Elements
- Search Form
- Social Icons
- Carousel Indicators
- News Card

# Layouts & Layers

# Heroes
- General Styles
- Split Hero Styles

# Home Page

# About Page

# Grants Page

# Program Pages

# Podcasts Page(s)
- RSS Audio Player Styles

# News Pages and Posts
- Post Navigation

# Brand Page

# Footer

# Forms
- Post Password Form

# Carousels
- Two Column Carousel

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

/*--------------------------------------------------------------
# GENERIC
--------------------------------------------------------------*/

:root {
	--white: #ffffff;
	--teal: #348b8c;
	--teal-transparent: rgba(52,139,140,.4);
	--teal-more-transparent: rgba(52,139,140,.2);
	--gold: #b58339; /*text buttons,buttons*/
	--gray: #888888; /*text, borders*/
	--gray-transparent: rgba(136,136,136,.6);
	--tan: #f5f0eb;
	--tan-transparent: rgba(235,226,217,.5);

	--montserrat: "Montserrat", Verdana, sans-serif; /* font weights: 400 regular, 600 semibold, 600 semibold italic, 700 bold */

	--bodyfont: "Montserrat", Verdana, sans-serif;
	--bodycolor: #333333/*#888888*/;
	--bodybg: #f5f0eb;/*ffffff*/

	--h1color: #348b8c;
	--h1font: "Montserrat", Verdana, sans-serif;
	--h2color: #348b8c;
	--h2font: "Montserrat", Verdana, sans-serif;
	--h3color: #348b8c;
	--h3font: "Montserrat", Verdana, sans-serif;
	--h4color: #333333;
	--h4font: "Montserrat", Verdana, sans-serif;
	--headingfont: "Montserrat", Verdana, sans-serif; 

	--btnfont: "Montserrat", Verdana, sans-serif;
	--btncolor1: #ffffff;
	--btnbg1: #348b8c;
	--btncolorhover1: #ffffff;
	--btnbghover1: #b58339;

	--btncolor2: #ffffff;
	--btnbg2: #b58339;
	--btncolorhover2: #ffffff;
	--btnbghover2: #348b8c;

	--linkcolor: #348b8c;
	--linkhover: #b58339;

	--headerbg: #ffffff;
	--navbg: #156164;
	--footerbg: #348b8c;

	--navcolor: #b58339;
	--navlink: #348b8c;
	--navhover: #348b8c;
	--navfont: "Montserrat", Verdana, sans-serif;
	--navoffset: 147px;
	@media screen and (min-width: 576px) {
		--navoffset: 190px;
	}
	@media screen and (min-width: 1200px) {
		--navoffset: 158px;
	}

	--overlaydark: inset 0 0 0 3000px rgba(30,30,30,.5);
}

*,
*::before,
*::after { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
}

html {
	overflow-x: hidden;
	overflow-y: scroll;
	font-size: 16px;
	scroll-behavior: smooth;
}

@media screen and (min-width: 768px) {
	html {
		font-size: 17px;
	}
}

body {
	overflow-x: hidden;
	color: var(--bodycolor);
	background-color: var(--bodybg);
	font-family: var(--bodyfont);
	font-weight: 400;
	margin: 0;
	width:100%;
	height:100%;
	text-wrap: pretty;
}

.site, #page {
	padding: 0;
}

div, footer, section {
	scroll-margin-top: 150px;
}

span {
	font-family: var(--bodyfont)!important;
}

::-webkit-scrollbar{
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track-piece{
	background-color: #FFF;
}

::-webkit-scrollbar-thumb{
	background-color: #CBCBCB;
	outline: 2px solid #FFF;
	outline-offset: -2px;
	border: .1px solid #B7B7B7;
}

::-webkit-scrollbar-thumb:hover{
	background-color: #909090;
}

/* Animations
--------------------------------------------- */

@keyframes fadeIn {
	0% {
		/* transform: translateY(20vh);  */
		opacity: 0;
	}
	100% {
		/* transform: translateY(0%); */
		opacity: 1;
	}
}

@keyframes fadeInUp {
	0% {
		transform: translateY(10vh);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@media screen and (min-width: 576px) {
	/* for top-of-page items */

	.fade-in-header {
		animation: 1s fadeIn;
	}

	.fade-in-auto {
		animation: 1.5s fadeInUp;
	}

	/* for items not at the top of the page*/
	.fade-in {
		opacity: 0;
		transform: translateY(10vh);
		visibility: hidden;
		transition: opacity 0.6s ease-out, transform 1.2s ease-out;
		will-change: opacity, visibility;
	}
	.fade-in.is-visible {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
}

/*--------------------------------------------------------------
# CONTAINERS
--------------------------------------------------------------*/

@media screen and (min-width:992px) {
	.py-lg-6 {
		padding-top: 5rem!important;
		padding-bottom: 5rem!important;
	}

	.p-lg-6 {
		padding: 5rem!important;
	}
}

@media screen and (min-width:1600px) {
	.py-xxl-6 {
		padding-top: 5rem!important;
		padding-bottom: 5rem!important;
	}

	.p-xxl-6 {
		padding: 5rem!important;
	}
}

/* Container Utilities
--------------------------------------------- */
.bordered-col {
	border-left: 1px solid var(--gray-transparent);
	border-right: 1px solid var(--gray-transparent);
}


@media screen and (min-width:768px) {
	.bordered-col-md {
		border-left: 1px solid var(--gray-transparent);
		border-right: 1px solid var(--gray-transparent);
	}
}

.border-bottom-teal {
	border-bottom: 2px solid var(--teal);
}

.border-bottom-gray {
	border-bottom: 1px solid var(--gray-transparent);
}

.border-right-gray {
	border-right: 1px solid var(--gray-transparent);
}

@media screen and (min-width: 768px) {
	.border-right-gray-md {
		border-right: 1px solid var(--gray-transparent);
	}
}

@media screen and (min-width: 992px) {
	.border-right-gray-lg {
		border-right: 1px solid var(--gray-transparent);
	}
}

@media screen and (min-width: 1200px) {
	.border-right-gray-xl {
		border-right: 1px solid var(--gray-transparent);
	}
}

.section-shadow {
	-webkit-box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4);
}

.shadow-inset {
	-webkit-box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4) inset;
	-moz-box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4) inset;
	box-shadow: 0px 0px 25px -10px rgba(0,0,0,0.4) inset;
}

hr {
	border-top: 1px solid var(--gray-transparent);
	opacity: 1;
}

.overlay-dark {
	box-shadow: var(--overlaydark);
	box-shadow: inset 0 0 0 3000px rgba(0,0,0,.5);
	color: var(--white);
}

section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

@media screen and (min-width: 992px) {
	section {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

section.widget {
	padding: 0;
}

/* Background Utilities
--------------------------------------------- */

.nav-padding {
	padding-top: var(--navoffset);
}

.nav-margin {
	margin-top: var(--navoffset);
}

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

.bg-teal {
	background-color: var(--teal);
}

.bg-teal-transparent {
	background-color: var(--teal-transparent);
}

.bg-teal-less-transparent {
	background-color: rgba(52,139,140,.6);
}

.bg-teal-more-transparent {
	background-color: rgba(52,139,140,.1);
}

.bg-gold {
	background-color: var(--gold);
}

.bg-tan {
	background-color: var(--tan);
}

.bg-tan-transparent {
	background-color: var(--tan-transparent);
}

.bg-dark-gradient {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(13,12,10,0) 0%,  rgba(13,12,10,.95) 100%);
}

.section-bg {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}

/* Image Utilities
--------------------------------------------- */

.image-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}

.image-wrapper img {
	position: absolute;
	height: 100%;
	width:100%; 
	object-fit: cover;
	object-position: center;  
}

.image-wrapper .centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -10%);
}

.overlap-image-wrapper-bg {
	position: relative;
	height: 100%;
	min-height: 300px;
	display: flex;
	justify-content: center;
}

.overlap-image-wrapper-bg img {
	position: absolute;
	bottom: 0;
	height: 100%;
	/* 	z-index: -10; */
	opacity: .1;
}

.overlap-image-wrapper-inline {
	height: auto;
	min-height: 100px;
	display: flex;
	justify-content: center;
}

.overlap-image-wrapper-inline img {
	max-height: 450px;
	margin-top: -30px;
}

@media screen and (min-width: 992px) {
	.overlap-image-wrapper-bg img {
		height: 105%;
		/* 		z-index: 0; */
		opacity: 1;
	}
}

/* Video Utilities
--------------------------------------------- */
div:has(.embed-container) {
	/* 	margin: auto 0; */
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------------
# TYPOGRAPHY
--------------------------------------------------------------*/
/* Font Styles
--------------------------------------------- */

h1, .h1 {
	font-family: var(--h1font);
	color: var(--h1color);
	text-transform: uppercase;
	letter-spacing: .02rem;
	line-height: 1.1!important;
	font-weight: 600;
	text-wrap: balance;
	/* 	text-wrap: pretty; */
}

h2, .h2 {
	font-family: var(--h2font);
	color: var(--h2color);
	text-transform: uppercase;
	letter-spacing: .02rem;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	/* 	text-wrap: balance; */
	text-wrap: pretty;
	font-weight: 600;
}

h2.black-text {
	text-transform:none;
	color: var(--bodycolor);
}

h3, .h3 {
	font-family: var(--h3font);
	color: var(--h3color);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02rem;
	text-wrap: balance;
}

h4, .h4 {
	font-family: var(--h4font);
	color: var(--h4color);
	font-weight: 600;
	text-transform: none;
	letter-spacing: .02rem;
	text-wrap: balance;
}

p {
	line-height: 1.4;
}

p.lead {
	line-height: 1.3;
}

li {
	line-height: 1.3;
}

/* Font Utilities
--------------------------------------------- */

.white-text {
	color: var(--white);
}

.teal-text {
	color: var(--teal);
}

.gold-text {
	color: var(--gold);
}

.gray-text {
	color: var(--gray);
	color: #000;
}

.black-text {
	color: #000;
}

.cap-text {
	text-transform: uppercase;
}

.underline-none {
	text-decoration: none!important;
}

b, strong {
	font-weight: 600;
}

/*--------------------------------------------------------------
# LINKS AND BUTTONS
--------------------------------------------------------------*/
/* Link Styles
--------------------------------------------- */

a, a i {
	transition: 0.4s ease;
	color: var(--linkcolor);
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
	color: var(--linkhover);
}

a.link {
	color: var(--linkcolor);
	text-decoration: underline;
}

a.link:hover, a.link:active {
	color: var(--linkhover);
}

a.teal-link, a.teal-text {
	color: var(--teal);
}

a.teal-link:hover, a.teal-text:hover  {
	color: var(--gold);
}

a.gray-text {
	color: var(--gray);
	color: #000;
}

a.gray-text:hover {
	color: var(--teal);
}

a.white-text {
	color: var(--white);
}

a.gold-text:hover {
	color: var(--teal);
}

a[target="_blank"]:after{
	content: "Opens in a new tab";
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	margin: -1px;
	padding: 0px;
	width: 1px;
	height: 1px;
	border: 0;
}

a.color-inherit {
	color: inherit;
}

/* Button Styles
--------------------------------------------- */

.btn {
	font-family: var(--btnfont);
	text-transform: capitalize;
	font-weight: 600;
	transition: 0.25s ease;
	border: none;
	border-radius: 0;
	padding: .4em 1.6em;
	font-size: .9rem;
	width: fit-content;
	height: fit-content;
}

.btn:hover, .btn:active  {
	text-decoration: none;
}

.btn-teal {
	color: var(--btncolor1);
	background-color: var(--btnbg1);
}

.btn-teal:hover {
	color: var(--btncolorhover1);
	background-color: var(--btnbghover1);
}

.btn-gold {
	color: var(--btncolor2);
	background-color: var(--btnbg2);
}

.btn-gold:hover {
	color: var(--btncolorhover2);
	background-color: var(--btnbghover2);
}

/*--------------------------------------------------------------
# HEADER AND NAV
--------------------------------------------------------------*/
/* General 
--------------------------------------------- */

.navbar {
	border-bottom: none!important;	
}

#nav-content-wrapper {
	transition: 1s;
}

.navbar-brand {
/* 	position: absolute; 
	left: 0;
	right: 0;
	top: 0;  */
	margin-left: auto;
	margin-right: auto;
}

.navbar-brand img {
	width: 140px;
	height: auto;
	transition: 0.5s ease;
	margin-right: -22px;
}

@media screen and (min-width:768px) {
	.navbar-brand img {
		width: 150px;
		padding: .8rem 0;
		margin-right: 0;
	}
	.navbar-search-wrapper input[type=search] {
		width: 140px;
	}
}

@media screen and (min-width:992px) {
	.navbar-search-wrapper input[type=search] {
		width: 150px;
	}
}

@media screen and (min-width:1200px) {
	.navbar-brand {
		margin-top:-50px;
	}
	.navbar-brand img {
		width: 175px; 
	}
	.navbar-search-wrapper input[type=search] {
		width: 200px;
	}
}

.dropdown:hover>.dropdown-menu {
	display: block;
}

.dropdown>.dropdown-toggle:active {
	/*Without this, clicking will make it sticky*/
	pointer-events: none;
}

/* Nav Links
--------------------------------------------- */

.main-nav .nav-link {
	font-family: var(--navfont);
	color: var(--navcolor);
	font-size: 16px;
	transition: 0.25s ease;
	font-weight: 600;
	padding: .5em 0;
}

@media screen and (min-width: 768px) {
	.main-nav .nav-link {
		padding: 1em 0;
	}
}

.main-nav .nav-link:hover, .main-nav .nav-link:focus, .main-nav .nav-link:active, .main-nav .nav-link.active, .main-nav .nav-link.show, .navbar-nav a:hover, .navbar-nav a:focus, .navbar-nav a:active {
	color: var(--navhover);
	text-decoration: none;
}

.main-nav a.link {
	color: var(--teal);
	font-weight: 600;
	font-weight: bold;
	text-decoration: none;
	font-size: 16px;
}

.main-nav a.link:hover {
	color: var(--gold);
}

ul.dropdown-menu {
	border: none;
	border-radius: 0;
}

@media screen and (min-width: 768px) {
	ul.dropdown-menu.show {
		margin-top: 1rem;
	}
}

@media screen and (min-width: 1400px) {
	ul.dropdown-menu.show {
		margin-top: 0;
	}

	ul.dropdown-menu .menu-item {
		padding: .5rem!important;
	}

	.main-nav a.link {
		font-size: 1rem;
	}
}

.nav-link.show { /* for active dropdown menu parent items */
	color: var(--teal);
}

.dropdown-item { /* for dropdown menu child items */
	color: var(--teal);
	font-weight: 600;
}

.dropdown-item:hover {
	color: var(--gold);
}

.dropdown-item.active, .dropdown-item:focus {
	background-color: #f8f9fa!important;
	color: var(--teal);
}

.footer-nav .nav-link {
	font-weight: 600;
	text-decoration: none;
}

.footer-nav .nav-link:hover {
	text-decoration: underline;
}

/* Custom Toggler Icon Animation
--------------------------------------------- */
.navbar-toggler-icon {
	background-image: none!important;
	background-color: var(--teal);
	height: 2px;
	width: 20px;
	margin: 10px 0;
	position: relative;
	transition: all 0.35s ease-out;
	transform-origin: center;
}

.navbar-toggler-icon::before {
	display: block;
	background-color: var(--teal);
	height:2px;
	content: "";
	position: relative;
	top: -7px;
	transition: all 0.15s ease-out;
	transform-origin: center;
}

.navbar-toggler-icon::after {
	display: block;
	background-color: var(--teal);
	height: 2px;
	content: "";
	position: relative;
	top: 5px;
	transition: all 0.35s ease-out;
	transform-origin: center;
}

.navbar-dark .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
	background-color: var(--teal);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
	transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
	opacity: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
	transform: rotate(-90deg) translateX(7px);
} 

/*--------------------------------------------------------------
# ELEMENTS
--------------------------------------------------------------*/

/* Search Form
--------------------------------------------- */
form.search-form {
	text-wrap: nowrap;
}

form.search-form [type=search] {
	border-radius: 50px;
	border: 1px solid var(--gray);
	font-size: 15px;
	padding: 7px 12px;
	color: var(--bodycolor);
}

form.search-form [type=search]::placeholder {
	opacity: .5;
}

form.search-form button#searchsubmit {
	outline: none;
	border: none;
	padding: 0;
	background-color: var(--white);
	border-radius: 50%;
}

form.search-form button#searchsubmit i {
	color: var(--gray);
}

/* Social Icons
--------------------------------------------- */
.social-icon i.icon-background {
	color: var(--gold);
}

.social-icon i.icon {
	color: var(--white);
}

.social-icon i.icon:hover i.icon-background {
	color: var(--teal)!important; /*not working - something to do with the stack*/
}

a.social-icon {
	text-decoration: none!important;
}

/* Carousel Indicators
--------------------------------------------- */

.indicator i.icon-background {
	color: rgba(255,255,255,.8);
}

.indicator i.icon {
	color: var(--teal);
}

@media screen and (min-width: 576px) {
	.indicator i.icon-background {
		color: var(--teal-transparent);
	}

	.indicator i.icon {
		color: var(--teal);
	}
}

.carousel-control-next, .carousel-control-prev {
	opacity: .8;
	width: 50px;
}

/* News Card (card-news.php and card-news-carousel.php)
--------------------------------------------- */
.news-card {
	--bs-aspect-ratio: 100%;
}

.news-card .category-tag {
	border-radius: 4px;
	padding: 4px 10px;
	width: fit-content;
	height: fit-content;
	font-size: .6rem;
	background-color: var(--teal);
	color: var(--white);
	position: absolute;
	z-index: 10;
}

.news-card-content {
	min-height: 100px;
	max-height: 95%;
	height: fit-content;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 5%;
	opacity:90%;
	padding: 1em;
}

.news-card-content:hover {
	color: var(--teal);
}

@media screen and (min-width: 1200px) {
	.news-card {
		--bs-aspect-ratio: 75%;
	}
	.news-card-content {
		width: 90%;
	}
}

@media screen and (min-width: 1600px) {
	.news-card-content {
		width: 75%;
	}
}

/*--------------------------------------------------------------
# HEROS
--------------------------------------------------------------*/

/* General Styles
--------------------------------------------- */
.hero-bg {
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* Split Heroes
--------------------------------------------- */

.split-hero {
	background-position: left; 
}

@media screen and (min-width: 992px) {
	.split-hero {
		background-size: contain;
	}
}

/*--------------------------------------------------------------
# HOME PAGE
--------------------------------------------------------------*/
.home-hero {
	padding: 5em 0; /*increase for larger screens - tweak*/
}

.news-section {
	background-position: left;
}

@media screen and (min-width: 768px) {
	.news-section {
		background-image: none!important;
	}
}

.newsletter-section {
	background-position: right;
}

@media screen and (min-width: 768px) {
	.newsletter-section {
		background-position: center top;
	}
}

@media screen and (min-width: 2000px) {
	.newsletter-section {
		height: 400px;
	}
}

.grants-section .image-wrapper {
	min-height: 300px;
}

@media screen and (min-width: 768px) {
	.grants-section .image-wrapper {
		min-height: 400px;
	}
}

/*--------------------------------------------------------------
# ABOUT PAGE
--------------------------------------------------------------*/
.staff-card {
	cursor: pointer;
}

.staff-image div {
	transition: opacity .5s ease-out;
	opacity: 0;
	overflow: hidden;
}

.staff-card:hover .staff-image div {
	opacity: 1;
}

.board-card {
	--bs-aspect-ratio: 30%;
}

@media screen and (min-width: 568px) {
	.board-card {
		--bs-aspect-ratio: 40%;
	}
}

/*--------------------------------------------------------------
# GRANTS PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# PROGRAM PAGES
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# PODCASTS PAGE
--------------------------------------------------------------*/

.episode-card .container {
	position: absolute;
	left: 0;
	bottom: 0;
}

.episode-card .series-tag {
	border-radius: 4px;
	padding: 4px 10px;
	width: fit-content;
	font-size: .6rem;
	background-color: var(--teal);/*will be overridden by inline style*/
}

.episode-card-excerpt {
	display: flex;
	-webkit-transition: max-height 1s; 
	-moz-transition: max-height 1s; 
	-ms-transition: max-height 1s; 
	-o-transition: max-height 1s; 
	transition: max-height 1s;  
	overflow: hidden;
	max-height: 0;
}

.episode-card:hover p {
	color: #d3d3d3;
}

@media screen and (min-width:576px) {
	.episode-card:hover .episode-card-excerpt {	
		height: fit-content;
		transition: 0.3s ease-in;
		max-height: 200px;
	}
}

.pod-newsletter-section {
	background-position: left;
}

@media screen and (min-width: 768px) {
	.pod-newsletter-section {
		background-position: center;
	}
}

.nav-tabs {
	--bs-nav-tabs-border-width: 0;
	--bs-nav-tabs-border-radius: 0;
}

.nav-tabs .nav-link {
	color: var(--teal);
	font-weight: 600;
}

.wprss-ftp-audio-player:not(.custom) {
	display: none;
}

.player-grid, .player-grid--large  {
	border-radius: 0!important;
}

/* RSS Audio Player Styles
--------------------------------------------- */
audio::-webkit-media-controls {
	width: inherit;
	height: inherit;
	position: relative;
	direction: ltr;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

audio::-webkit-media-controls-panel {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	-webkit-user-select: none;
	position: relative;
	width: 100%;
	z-index: 0;
	overflow: hidden;
	text-align: right;
	bottom: auto;
	transition: opacity 0.3s;
}

audio::-webkit-media-controls-enclosure {
	border-radius: 0;
	background-color: white;
}

/*--------------------------------------------------------------
# NEWS PAGES & POSTS
--------------------------------------------------------------*/

@media only screen and (max-width: 576px) { /* clear out the floats on mobile viewports */
	figure.alignleft, img.alignleft, figure.alignright, img.alignright {
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
}

span.nav-title {
	font-weight: 700;
	color: var(--dark-gray);
	font-size: .9rem;
}

span.nav-title:hover {
	color: var(--green);
}


.wp-block-latest-posts__list li {
	margin-bottom: 1rem;
}

.wp-block-latest-posts__list a {
	font-weight: 600;
	margin-top: 1rem;
}

.wp-block-latest-posts__post-excerpt {
	font-size: .8rem;
}

/* Post Navigation (Blog and Single post page)
--------------------------------------------- */

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

.nav-links .nav-previous, .nav-links .nav-next {
	width: 100%;
	margin-top: 1rem;
}

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

	.posts-navigation .nav-links, .post-navigation .nav-links {
		display: flex;
		justify-content: space-between;
	}

	.nav-links .nav-previous, .nav-links .nav-next {
		display: flex;
		width: 45%;
	}

	.nav-links .nav-next {
		justify-content: end;
	}
}

/*--------------------------------------------------------------
# BRAND PAGE
--------------------------------------------------------------*/

.square {width:100%;}
.square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

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

.footer-brand img {
	width: 180px;  
	height: auto;
}

footer .nav-link {
	text-decoration: underline;
}

footer i {
	color: var(--white);
}

#donate {
	background-image: url('https://thinkwy.org/wp-content/uploads/2024/01/donate-section_bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

footer .menu-heading {
	text-transform: uppercase;
	text-decoration: underline;
	opacity: .8;
	margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# FORMS
--------------------------------------------------------------*/
.gform-theme--api, .gform-theme--foundation .gform_fields {
	--gf-form-gap-y: 12px!important;
}

.gform-body input[type=text], .gform-body input[type=email], .gform-body input[type=tel], .gform-body textarea {
	border-radius: 0!important;
	border: none!important;
}

#gform_3 .gform-body input[type=text], #gform_3 .gform-body input[type=email], #gform_3 .gform-body input[type=tel], #gform_3 .gform-body textarea {
	background-color: var(--teal-more-transparent);
}

.gform-body input::placeholder, .gform-body textarea::placeholder {
	opacity: .5;
	font-style: italic;
	font-weight: 400;
	font-size: 15px;
}

.gform_footer {
	display: flex;
	justify-content: center!important;
}

#gform_2 .gform_footer {
	display: flex;
	justify-content: end!important;
}

.gform_footer.before {
	margin-top: 10px!important;
}

.gform_submission_error, .gfield_validation_message, .gform_validation_errors .gform-icon {
	color: var(--white)!important;
}

.gform-theme--framework .gform_validation_errors {
	margin-bottom: 0!important;
}

.gform_confirmation_message {
	color: var(--white);
	text-align: center;
	padding: 2em 0;
}

#gform_submit_button_1, #gform_submit_button_2, #gform_submit_button_3 {
	font-size: 1.1em;
	transition: 0.25s ease;
	text-transform: uppercase;
	background-color: transparent;
	border: none;
	text-decoration: none;
	box-shadow: none;
}

#gform_submit_button_1:hover, #gform_submit_button_1:active, #gform_submit_button_2:hover, #gform_submit_button_2:active {
	text-decoration: underline;
}

/* Podcast Newsletter styles
--------------------------------------------- */
.gform-theme--framework .gform-field-label {
	color: var(--white)!important;
	font-weight: 600!important;
	margin-bottom: 0!important;
}

.gfield_checkbox#input_4_8 {
	margin-top: 1rem!important;
}

.gfield-choice-input {
	background-color: var(--gold)!important;
}

.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):before {
	color: var(--white)!important;
}

.gform_required_legend {
	display: none;
}

#gform_submit_button_4 {
	font-size: .9em;
	transition: 0.25s ease;
	background-color: var(--gold);
	border: none;
	text-decoration: none;
	box-shadow: none;
	border-radius: 0;
	font-weight: 600;
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 576px) {
	#gform_submit_button_4 {
		margin-top: auto;
		margin-left: auto;
		margin-right: 0;
	}
}

#gform_submit_button_4:hover, #gform_submit_button_4:active {
	background-color: var(--teal);
}

#gform_4 #field_submit {
	display: flex!important;
}

/* Post Password Form
--------------------------------------------- */

.post-password-form input[type=submit] {
	font-family: var(--btnfont);
	text-transform: capitalize;
	font-weight: 600;
	transition: 0.25s ease;
	border: none;
	border-radius: 0;
	padding: .4em 1.6em;
	font-size: .9rem;
	width: fit-content;
	height: fit-content;
	color: var(--btncolor1);
	background-color: var(--btnbg1);
}

.post-password-form input[type=submit]:hover, .post-password-form input[type=submit]:active {
	color: var(--btncolorhover1);
	background-color: var(--btnbghover1);
	text-decoration: none;
} 

/*--------------------------------------------------------------
# CAROUSELS
--------------------------------------------------------------*/

/* Two Column Carousel
--------------------------------------------- */

@media (max-width: 575px) {
	.carousel-inner .carousel-item > div {
		display: none;
	}
	.carousel-inner .carousel-item > div:first-child {
		display: block;
	}
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
	display: flex;
}

/* small and up screens */
@media (min-width: 576px) {

	.carousel-inner .carousel-item-end.active,
	.carousel-inner .carousel-item-next {
		transform: translateX(50%);
	}

	.carousel-inner .carousel-item-start.active, 
	.carousel-inner .carousel-item-prev {
		transform: translateX(-50%);
	}
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
	transform: translateX(0);
}

/*--------------------------------------------------------------
# EVENTS CALENDAR
--------------------------------------------------------------*/

.tribe-events-event-image img {
	height: auto;
	max-width:100%!important;
}

.tribe-events-event-meta.primary, .tribe-events-event-meta.secondary {
	position: relative;
}