/*
Theme Name: AcadiaTrad
Theme URI: https://vizou.com
Author: Dana Whittle
Author URI: https://vizou.com
Description: Theme for Acadia Trad Festival
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acadiatrad
*/

    /* - - - - - - - - - - - - - - - - - - - - - - - - - TYOPGRAPHY*/

    /* Googlefonts (local)
Bitter 200-800
Bitter Italic 200-400
Raleway 100-500
*/

    h2,
    h2 a {
    	font-family: "Bitter", serif !important;
    	font-style: normal;
    	font-weight: 400;
    }

    .tab-content h1 {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-weight: 200 !important;
    }

    em {
    	font-family: "Bitter Italic", serif !important;
    	font-style: italic !important;
    	font-weight: 350 !important;
    }

    nav.nav-main ul li a,
    h2 a,
    p a,
    .wp-playlist-item-title {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-weight: 500 !important;
    }

    strong,
    h5 {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-weight: 580 !important;
    }

    h1,
    h4,
    footer a {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-optical-sizing: auto;
    	font-weight: 700 !important;
    }

    .post.featured h2 a,
    .nav-wrap .name {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-optical-sizing: auto;
    	font-weight: 750 !important;
    }

    h3,
    h3 a,
    .single .post-content::first-letter {
    	font-family: "Bitter", serif !important;
    	font-style: normal !important;
    	font-weight: 800 !important;
    }

    /* sans-serif */

    nav.nav-main ul li ul li a {
    	font-family: "Raleway", sans-serif !important;
    	font-style: normal;
    	font-weight: 200 !important;
    }

    blockquote,
    .wp-caption-text {
    	font-family: "Raleway", sans-serif !important;
    	font-style: normal;
    	font-weight: 300 !important;
    }

    .meta,
    .meta a,
    .details,
    .details a,
    a.post-edit-link,
    .card-title,
    button,
    a.button,
    p.copyright,
    p.copyright a {
    	font-family: "Raleway", sans-serif !important;
    	font-style: normal;
    	font-weight: 480 !important;
    }

    h6,
    .tag,
    .credit,
    nav.nav-main ul li a {
    	font-family: "Raleway", sans-serif !important;
    	font-style: normal;
    	font-weight: 520 !important;
    }

    .label,
    nav.nav-admin ul li a,
    ul.tabs li a,
    ul.tabs li.active a,
    ul.tabs li a:hover {
    	font-family: "Raleway", sans-serif !important;
    	font-style: normal;
    	font-weight: 600 !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - VARIABLES*/

    :root {
    	--overlay: rgb(134 120 91);
    	--links: #4a6cc8;
    	--hover: #c7c0b2;
    	--white: #ffffff;
    	--black: #333333;
    	--gray: #e4e0d9;
    	--body: #ffffff;
    	--darkgray: #c7c0b2;
    	--dark: #9e4200;
    	--medium: #6a77c8;
    	--headers: #5661a6;
    	--light: #da8d53;
    	--pale: #ffdcb0;
    	--tabs: #dcdeff;
    	--whisper: #f6f3fe;
    	--bright: #eb7c03;
    	--highlight: #f6dfff;
    	--alert: #8a8cfe;
    	--buttons: #f07d00;
    	--red: #e67903;
    	--border: 1px solid var(--darkgray);
    	--border-light: 2px solid #f3eaff;
    }

    .which-template {
    	display: none;
    	color: red;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - BASICS*/

    html {
    	font-size: 18px;
    	font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (1920 - 320)))), 22px);
    	min-height: 0vw;
    	width: 100%;
    	height: 100%;
    	scroll-behavior: smooth;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }

    *,
    *:after,
    *:before {
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    }

    body {
    	font-family: "Bitter", serif;
    	font-weight: 350;
    	line-height: 1.5em;
    	color: var(--black);
    	background: var(--body);
    	overflow-x: hidden;
    	overflow-y: auto;
    	width: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	display: grid;
    }

    p {
    	margin: 0.5em 0;
    }

    small {
    	font-size: 0.85em;
    }

    .screen-reader-text {
    	margin-left: -5000px;
    }

    em {
    	font-style: italic;
    }

    strong {
    	color: var(--dark)
    }

    a,
    a:visited {
    	color: var(--links);
    	text-decoration: none;
    }

    a:hover {
    	color: var(--hover);
    	text-decoration: none;
    }

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

    hr {
    	border-top: var(--border-light);
    	border-radius: 50%;
    	margin: 2em 0 1em 0;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - HEADER, BACKGROUNDS */

    .bg {
    	position: relative;
    	width: 100%;
    	padding-top: 50px;
    }

    .bg img,
    .bg video {
    	display: block;
    	width: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    .bg-video {
    	position: relative;
    	cursor: pointer;
    	/* Show it's clickable */
    }

    a.muteunmute {
    	font-size: 1em;
    	color: var(--white);
    	position: absolute;
    	bottom: 1em;
    	left: 2em;
    	z-index: 10;
    	/* Ensure it's above the video */
    }

    /* Default state (muted) - show "turn audio ON" icon */
    a.muteunmute .fa-volume-high {
    	display: inline-block;
    }

    a.muteunmute .fa-volume-xmark {
    	display: none;
    }

    /* Unmuted state - show "turn audio OFF" icon */
    a.muteunmute.unmuted .fa-volume-high {
    	display: none;
    }

    a.muteunmute.unmuted .fa-volume-xmark {
    	display: inline-block;
    }

    .header-padding {
    	height: 120px;
    }

    .bg .credit {
    	position: absolute;
    	bottom: 10px;
    	right: 2em;
    	font-size: 0.7em;
    	color: var(--white);
    	-webkit-filter: drop-shadow(-4px 1px 10px #555);
    	filter: drop-shadow(-4px 1px 10px #555);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - NAVIGATION*/

    .nav-wrap {
    	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;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	width: 100%;
    	height: auto;
    	position: fixed;
    	top: 0;
    	left: 0;
    	background: var(--medium);
    	z-index: 500;
    	padding-top: 0.5em;
    }

    .scrolled .nav-wrap {
    	-webkit-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    	background: var(--light);
    }

    .nav-wrap .name {
    	color: var(--white);
    	font-size: 1.1em;
    	padding-left: 5em;
    	/* filter: drop-shadow(-1px 0 1px #000000ad); */
    }

    .nav-wrap .name:hover,
    .nav-admin a:hover {
    	color: var(--pale);
    }

    /* Hide only the toggle button and social nav when menu is open, not the entire nav-wrap */
    body.nav-is-open .toggle-nav,
    body.nav-is-open nav.nav-social,
    body.nav-is-open nav.nav-admin,
    body.nav-is-open .nav-wrap .name {
    	opacity: 0;
    	pointer-events: none;
    	-webkit-transition: opacity 0.3s ease;
    	-o-transition: opacity 0.3s ease;
    	transition: opacity 0.3s ease;
    }

    body.nav-is-open .nav-wrap {
    	background: none;
    }

    /* Show toggle button and social nav when menu is closed */
    body:not(.nav-is-open) .toggle-nav,
    body:not(.nav-is-open) nav.nav-social,
    body:not(.nav-is-open) nav.nav-admin,
    body:not(.nav-is-open) .nav-wrap .name {
    	opacity: 1;
    	pointer-events: auto;
    	-webkit-transition: opacity 0.3s ease;
    	-o-transition: opacity 0.3s ease;
    	transition: opacity 0.3s ease;
    }

    /* Main nav container */
    nav.nav-main {
    	z-index: 500;
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }

    /* Toggle button */
    a.toggle-nav {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	text-decoration: none;
    	cursor: pointer;
    }

    a.toggle-nav i {
    	font-size: 38px;
    	color: var(--white);
    }

    .nav-logo {
    	position: absolute;
    	top: -10px;
    	left: 1em;
    }

    .nav-logo img {
    	width: 130px;
    	height: auto;
    	-webkit-filter: drop-shadow(0 2px 4px #00000059);
    	filter: drop-shadow(0 2px 4px #00000059)
    }

    .scrolled .nav-logo img {
    	width: 100px;
    	opacity: 1 !important;
    	-webkit-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    }

    /* Main menu - CLOSED by default with nav-active class */
    nav.nav-main ul {
    	list-style: none;
    	padding: 3em 4em;
    	margin: 0;
    	position: fixed;
    	top: 0;
    	left: 0;
    	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: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    	width: auto;
    	height: 100vh;
    	background: var(--body);
    	-webkit-transition: -webkit-transform 0.5s ease;
    	transition: -webkit-transform 0.5s ease;
    	-o-transition: transform 0.5s ease;
    	transition: transform 0.5s ease;
    	transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    	overflow-y: auto;
    }

    /* CLOSED state - menu hidden */
    nav.nav-main ul.nav-active {
    	-webkit-transform: translateX(-100%);
    	-ms-transform: translateX(-100%);
    	transform: translateX(-100%);
    }

    /* OPEN state - menu visible */
    nav.nav-main ul:not(.nav-active) {
    	-webkit-transform: translateX(0);
    	-ms-transform: translateX(0);
    	transform: translateX(0);
    }

    nav.nav-main ul>li {
    	list-style: none;
    	margin: 0.5em 0;
    	padding: 0;
    	width: 100%;
    }

    nav.nav-main ul>li>a {
    	display: block;
    	font-size: 1.4em;
    	letter-spacing: 0.02em;
    	color: var(--links);
    	padding: 0;
    }

    nav.nav-main ul>li.active>a,
    nav.nav-main ul>li>a:hover {
    	color: var(--hover);
    }

    /* Body overlay when menu is open */
    body.nav-is-open::before {
    	content: '';
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	background: rgba(0, 0, 0, 0.5);
    	z-index: 400;
    }

    /* social nav */

    nav.nav-social {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }

    nav.nav-social ul {
    	padding: 0 0.5em;
    	margin: 0;
    	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;
    }

    .scrolled nav.nav-social {
    	-webkit-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    	transition: all 0.5s ease;
    }

    nav.nav-social ul li {
    	list-style: none;
    	padding: 0;
    }

    nav.nav-social ul li a {
    	display: block;
    	color: var(--white);
    	font-size: 22px;
    	padding: 0 8px;
    }

    nav.nav-social a i:hover {
    	-webkit-transform: scale(1.5);
    	-ms-transform: scale(1.5);
    	transform: scale(1.5);
    	-webkit-transition: -webkit-transform 0.5s ease;
    	transition: -webkit-transform 0.5s ease;
    	-o-transition: transform 0.5s ease;
    	transition: transform 0.5s ease;
    	transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    	color: var(--pale);
    }

    /* Search */

    .search-wrapper {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	padding: 0 0.5em;
    }

    .search-wrapper input {
    	height: 30px;
    	padding: 5px 10px;
    	border: 0 !important;
    	border-radius: 4px;
    	font-size: 20px;
    	max-width: 180px;
    	color: var(--dark);
    }

    .search-wrapper .search-button:hover {
    	background: none !important;
    	color: var(--pale) !important;
    }

    .search-wrapper .search-button {
    	border: 0;
    	border-radius: 0;
    	background: none;
    	padding-left: 0.5em !important;
    	margin: 0 !important;
    }

    .search-results span.icon {
    	font-size: 24px;
    }

    .search-results .icon {
    	color: var(--alert);
    }

    .search-results h1 {
    	margin: 0 0 .5em 0 !important;
    }

    /* Admin menu */

    nav.nav-admin {
    	background: var(--alert);
    	height: auto;
    	width: 100%;
    	padding: 0;
    	-ms-flex-preferred-size: 100%;
    	flex-basis: 100%;
    }

    nav.nav-admin ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: end;
    	-ms-flex-pack: end;
    	justify-content: flex-end;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	margin: 0;
    	padding: 0.5em;
    	list-style: none;
    }

    nav.nav-admin ul li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    nav.nav-admin ul li a {
    	color: var(--white);
    	padding: 0 10px;
    	font-size: 0.8em;
    	letter-spacing: 0.04em;
    	text-transform: uppercase;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - TABS*/

    /* .tab-container,
    .tab-content {
    	height: 100%;
    } */

    ul.tabs {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	margin: 1em 0 2em 0;
    	padding: 0;
    }

    ul.tabs li {
    	list-style: none;
    	margin: 0 1em 0.5em 0;
    }

    ul.tabs li a {
    	font-size: 0.8em;
    	color: var(--links);
    	background: var(--tabs);
    	padding: 0.4em 0.8em;
    	border-radius: 3px;
    }

    ul.tabs li.active a,
    ul.tabs li a:hover {
    	background: var(--bright);
    	color: var(--white);
    }

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

    .container {
    	position: relative;
    	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-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	width: 100%;
    	height: 100%;
    	-webkit-box-flex: 1;
    	-ms-flex: 1 0 auto;
    	flex: 1 0 auto;
    }

    .content {
    	grid-area: content;
    }

    .left {
    	grid-area: left;
    }

    .right {
    	grid-area: right;
    }

    .center {
    	grid-area: center;
    }

    .left,
    .right {
    	-webkit-column-break-inside: avoid !important;
    	page-break-inside: avoid !important;
    	-moz-column-break-inside: avoid !important;
    	break-inside: avoid !important;
    	word-wrap: break-word;
    }

    .grid {
    	display: grid;
    	grid-template-columns: repeat(12, 1fr);
    	grid-template-areas:
    		". . content content content content content content content content . .";
    	padding: 3em 0;
    	width: 100%;
    }

    .category .grid {
    	padding-bottom: 0;
    }

    .category .grid.tabbed {
    	grid-template-areas:
    		"content content content content content content content content content content content .";
    	padding-top: 0;
    }

    .home .grid:nth-of-type(even),
    .home .footer,
    .category {
    	background: var(--whisper);
    }

    /* Maintenance mode */

    .grid.holding {
    	width: 100%;
    	height: 100%;
    	height: 100px;
    	width: 100vw;
    	position: absolute;
    	left: 50vw;
    	margin-left: -50vw;
    	bottom: 20vh;
    	text-align: center;
    	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;
    }

    .grid.holding h2 {
    	font-size: 3em;
    	color: var(--white) !important;
    	-webkit-filter: drop-shadow(-4px 1px 10px #555);
    	filter: drop-shadow(-4px 1px 10px #555);
    }

    .bg.maintenance img {
    	position: relative;
    	display: block;
    	width: 100%;
    	height: 100vh;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - POSTS*/

    /* Posts */

    .post.horiz {
    	display: grid;
    	grid-template-columns: auto 50%;
    	grid-column-gap: 1.5em;
    	grid-template-areas: "left right";
    	width: 100%;
    	border-bottom: var(--border-light);
    	padding: 1em 0;
    }

    .post.horiz .left {
    	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;
    	-webkit-box-align: start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    }

    .post.horiz .left h2 {
    	margin-bottom: 0.2em;
    }

    .post.horiz img {
    	display: block;
    	width: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    .post.horiz .right {
    	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;
    }

    /* When no image, single column */
    .post.horiz.listing:not(:has(img)),
    .post.horiz:not(:has(img)) {
    	grid-template-columns: 1fr;
    	grid-template-areas: "left";
    }

    .post.horiz:not(:has(img)) .right {
    	display: none;
    }

    .single .post img.wp-post-image {
    	display: block;
    	width: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    	margin: 2em 0;
    }

    .post-template-default .post.horiz {
    	grid-template-columns: auto 33%;
    }

    .single .post-content::first-letter {
    	font-size: 3em;
    	padding-right: 1px;
    	color: var(--medium);
    	line-height: 1em;
    }

    /* Vizou Quickloop custom classes */

    .post.horiz.listing {
    	grid-template-columns: auto 50%;
    	grid-column-gap: 2em;
    	grid-template-areas: "left right";
    	margin: 0;
    	padding: 1em 0;
    	width: 100%;
    	border-bottom: var(--border-light);
    }

    .post.horiz.artists {
    	grid-template-columns: auto 25%;
    	grid-column-gap: 1em;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }

    .post.horiz:last-of-type {
    	border: 0;
    }

    .post.horiz.featured {
    	background: var(--whisper);
    	padding: 1.5em;
    	margin: 2em 0;
    	border-radius: 4px;
    }

    .post.horiz .left,
    .post.horiz .right {
    	-webkit-box-pack: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    }

    .post.horiz.listing img {
    	display: block;
    	width: 100%;
    	height: 100%;
    	height: auto;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    .post.horiz .tba {
    	color: var(--darkgray);
    }

    /* Videos */

    .gallery {
    	display: grid;
    	grid-gap: 2em;
    }

    .gallery .post {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	-ms-flex-line-pack: center;
    	align-content: center;
    	text-align: center;
    }

    .gallery h3 {
    	margin-top: 0.5em;
    }

    .content iframe {
    	width: 100%;
    	height: auto;
    	aspect-ratio: 16/9;
    	border-radius: 6px;
    	margin-top: 1em;
    }

    /* Cards layout */

    .cards {
    	margin: 1em 0;
    	width: 100%;
    	gap: 1.5em;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	display: grid;
    	grid-template-columns: 50% 50%;
    }

    .card {
    	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;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	background: var(--medium);
    	border-radius: 4px;
    }

    .card img {
    	width: 100%;
    	height: 100%;
    	margin: 0 !important;
    	display: block;
    	-o-object-fit: cover;
    	object-fit: cover;
    }

    .card-title {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	color: var(--white);
    	font-size: 1.2em;
    	text-transform: uppercase;
    	padding: 0.5em 1em;
    }

    .card:hover {
    	background: var(--bright);
    	-webkit-filter: sepia(50%);
    	filter: sepia(50%);
    }

    /* Sponsor cards */

    .support {
    	margin: 1em 0;
    	width: 100%;
    	gap: 1em 3em;
    	-webkit-box-pack: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	display: grid;
    	grid-template-columns: 50% 50%;
    }

    .support .card {
    	background: none;
    	border-top: var(--border-light);
    	border-radius: 0;
    	text-align: center;
    	padding: 1em 0;
    	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: start;
    	-ms-flex-pack: start;
    	justify-content: flex-start;
    }

    .support .card:nth-of-type(1),
    .support .card:nth-of-type(2) {
    	border: 0;
    }

    .support .card:hover {
    	-webkit-filter: none;
    	filter: none;
    }

    .support .card-title {
    	color: var(--headers);
    }

    .support .card img {
    	width: 100%;
    	height: auto;
    	max-height: 200px;
    	max-width: 300px;
    	padding: 1em
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - LOGOS*/

    .logos {
    	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;
    	text-align: center;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	width: 100%;
    	padding: 1em 6em;
    	gap: 1em;
    }

    .logos p {
    	margin: 0;
    }

    .logos p img {
    	-webkit-box-flex: 0;
    	-ms-flex: 0 0 auto;
    	flex: 0 0 auto;
    	margin: 0;
    }

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

    .footer {
    	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;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    	text-align: center;
    	width: 100%;
    	padding: 3em 4em;
    }

    p.legal {
    	font-size: 0.8em;
    	line-height: 1.3em;
    	font-variant: small-caps;
    	max-width: 76%;
    }

    p.copyright {
    	font-size: 0.75em;
    	margin: 1em 0;
    	padding-top: 1em;
    	border-top: var(--border-light);
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - HEADERS*/

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	line-height: 1em;
    	color: var(--headers);
    	-webkit-column-break-inside: avoid;
    	page-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    }

    h1 {
    	font-size: 3.5em;
    	margin: 0 0 0.25em 0;
    	letter-spacing: -0.01em;
    	color: var(--medium);
    	position: relative;
    }

    .tab-content h1 {
    	font-size: 3em;
    	margin-left: 1em;
    }

    .star-big i {
    	font-size: 42px;
    	color: var(--alert);
    	rotate: -15deg;
    	margin: 0;
    	position: absolute;
    	top: -0.2em;
    	left: -1.2em;
    }

    h2 {
    	font-size: 2em;
    	line-height: 1em;
    	margin: 1em 0 0.5em 0;
    }

    .post.horiz h2 {
    	margin: 0;
    }

    h3 {
    	font-size: 1.3em;
    	line-height: 1.2em;
    	margin: 1em 0 0.5em 0;
    	letter-spacing: 0.01em;
    }

    h4 {
    	font-size: 1.1em;
    	margin: 1em 0 0.25em 0;
    	color: var(--black);
    }

    h4:before {
    	content: ''
    }

    h5 {
    	font-size: 0.8em;
    	margin: 0 0 5px 0;
    	text-transform: uppercase;
    	color: var(--black);
    }

    h6 {
    	font-size: 0.9em;
    	line-height: 1.2em;
    	margin: 2em 0;
    	padding: 0.5em 1em;
    	color: var(--white);
    	background: var(--alert);
    	border-radius: 3px;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - CONTENT*/

    .tag {
    	background: var(--whisper);
    	font-size: 0.8em;
    	padding: 0.25em 0.5em;
    	border-radius: 4px;
    	color: var(--alert);
    }


    blockquote {
    	font-size: 1em;
    	margin: 1em 0 2em 0;
    	padding: 0.5em 2em;
    	border-top: var(--border-light);
    	border-bottom: var(--border-light);
    }

    blockquote strong,
    blockquote em {
    	font-size: 1rem;
    	text-transform: uppercase;
    	color: var(--medium);
    }

    ul {
    	padding: 0 0 10px 20px;
    	margin: 0 0 20px 10px;
    	list-style-position: outside;
    }

    ul li {
    	list-style-type: disc;
    	padding: 3px 0;
    }

    ol {
    	list-style-type: decimal;
    	list-style-position: outside;
    	margin: 0 0 0 15px;
    	padding: 0 0 0 15px;
    }

    ol li {
    	padding: 3px 0;
    	margin: 0;
    }

    .meta {
    	font-size: 1em;
    	letter-spacing: 0.02em;
    	text-transform: uppercase;
    	margin: 10px 0 5px 0;
    }

    .meta a {
    	font-size: inherit !important;
    }

    .single .meta {
    	margin: 0 0 2em 0;
    	padding-bottom: 0.5em;
    	display: inline-block;
    	border-bottom: var(--border-light);
    }

    a.post-edit-link {
    	font-size: 0.7em;
    	text-transform: uppercase;
    	letter-spacing: 0.02em;
    	color: var(--red);
    }

    a.post-edit-link:hover {
    	color: var(--hover);
    }

    .details {
    	margin: 1em 0 0 0;
    	padding: 1em;
    	background: var(--pale);
    	border-radius: 3px;
    }

    .details i {
    	color: var(--dark);
    	margin-right: 10px;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - IMAGES, ALIGNMENT*/

    iframe {
    	max-width: 100% !important;
    	border: 0 !important;
    }

    .content img {
    	border-radius: 3px;
    	margin: 0.5em 0;
    }

    .gallery,
    .rl-gallery-container {
    	-webkit-column-break-inside: avoid;
    	page-break-inside: avoid;
    	-moz-column-break-inside: avoid;
    	break-inside: avoid;
    	margin: 1em 0;
    }

    figure.alignleft,
    img.alignleft {
    	margin: 0.5em 1.5em 0.5em 0;
    }

    img.alignright {
    	margin: 0.5em 0 0.5em 1.5em;
    }

    figure.alignright,
    img.alignnone,
    .alignnone {
    	clear: both;
    	float: none;
    	margin: 1em 0;
    }

    .alignleft {
    	float: left;
    }

    .alignright {
    	float: right;
    }

    .aligncenter {
    	text-align: center;
    }

    .wp-caption-text {
    	padding: 5px 10px;
    	font-size: 0.8em;
    	line-height: 1.2em;
    	text-align: center;
    }

    .gallery-item img {
    	border: 0 !important;
    }

    /* in home page quickloop */

    .grid.videos iframe {
    	width: 100%;
    	height: auto;
    	aspect-ratio: 16/9;
    	margin: 1em 0;
    	text-align: center;
    	border-radius: 8px;
    }

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

    form {
    	margin: 1em 0;
    	border: 0;
    }

    form label {
    	font-size: 0.8em !important;
    }

    form input {
    	padding: 3px 5px;
    }

    #mc_embed_signup .email {
    	width: 200px;
    	border-radius: 3px;
    	border: 0;
    	padding: 5px 10px;
    }


    a.button,
    button {
    	display: inline-block;
    	font-size: 1em !important;
    	letter-spacing: 0.02em;
    	color: var(--white);
    	border: 0 !important;
    	background: var(--buttons);
    	padding: 0.5em 1em !important;
    	border-radius: 4px;
    	margin: 10px 20px 20px 0 !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    	text-transform: uppercase;
    }

    .button:hover,
    button:hover {
    	background: var(--gray) !important;
    	color: var(--white) !important;
    }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - BREAKPOINTS*/

    @media only screen and (max-width: 960px) {

    	.nav-wrap .name {
    		display: none;
    	}

    }

    @media only screen and (max-width: 800px) {

    	body {
    		display: block;
    	}

    	.container {
    		min-height: auto;
    		height: auto;
    	}

    	.bg {
    		padding-top: 50px;
    	}

    	a.playpause {
    		left: 1em;
    	}

    	.header-padding {
    		height: 50px;
    	}

    	.nav-wrap {
    		-webkit-box-orient: vertical;
    		-webkit-box-direction: normal;
    		-ms-flex-direction: column;
    		flex-direction: column;
    		-ms-flex-line-pack: center;
    		align-content: center;
    		padding: 1em;
    	}

    	.scrolled .nav-logo {
    		left: 0.25em;
    	}

    	.nav-logo img,
    	.scrolled .nav-logo img {
    		width: 90px;
    	}

    	nav.nav-admin,
    	.nav-wrap .name {
    		display: none;
    	}

    	nav.nav-social ul {
    		padding: 0;
    		-ms-flex-line-pack: center;
    		align-content: center;
    		-webkit-box-pack: start;
    		-ms-flex-pack: start;
    		justify-content: flex-start;
    	}

    	.search-wrapper .search-button {
    		padding: 0 0 0 0.4em !important;
    	}

    	nav.nav-social ul li a {
    		font-size: 22px;
    	}

    	nav.nav-main ul {
    		padding: 2em 3em;
    	}

    	nav.nav-main ul li {
    		margin: 10px 0;
    	}

    	nav.nav-main ul li a {
    		font-size: 1.5em;
    	}

    	ul.tabs li {
    		-webkit-box-flex: 0;
    		-ms-flex: none;
    		flex: none;
    	}

    	.grid,
    	.posts.gallery,
    	.post.horiz,
    	.post.horiz.past,
    	.support,
    	.cards {
    		display: block;
    		width: 100%;
    		overflow-x: hidden;
    		max-width: 100vw;
    	}

    	.footer,
    	.grid {
    		padding: 1em 2em;
    	}

    	.post.horiz img {
    		width: 100%;
    		height: 100%;
    		-o-object-fit: cover;
    		object-fit: cover;
    		margin-bottom: 1em;
    	}

    	.tab-content h1 {
    		margin-left: 0;
    		line-height: 1em;
    		text-align: left;
    	}

    	.card {
    		margin-bottom: 1em;
    	}

    	.support .card:nth-of-type(2) {
    		border-top: var(--border-light);
    	}

    	.star-big i {
    		font-size: 56px;
    		top: 0.2em;
    		left: -1.1em;
    	}

    	p.legal {
    		max-width: 100%;
    	}

    	p.copyright {
    		line-height: 1.2em;
    	}

    	blockquote {
    		margin: 1em 0;
    	}

    	h1,
    	.category h1 {
    		font-size: 3.4em;
    		line-height: 0.9em;
    		margin: 20px 0;
    	}

    	h2 {
    		font-size: 2em;
    	}

    	h3 {
    		font-size: 1.5em;
    	}

    	img.alignleft,
    	img.alignright,
    	.alignleft,
    	.alignright {
    		float: none !important;
    		margin: 1em 0 !important;
    	}
    }

    @media screen and (max-width: 414px) {
    	html {
    		font-size: 18px;
    	}

    	.nav-wrap {
    		padding: 1em 1em 0.25em 1em;
    	}

    	.bg {
    		padding-top: 110px;
    	}

    	.header-padding {
    		height: 0;
    	}

    	nav.nav-social {
    		-webkit-box-orient: vertical;
    		-webkit-box-direction: normal;
    		-ms-flex-direction: column;
    		flex-direction: column;
    		padding-left: 5em;

    	}

    }