/******************************************************************
Theme Name: NW Cider Association
Author: Jesse Olson Consulting
Author URI: https://www.jasperhawk.com
Version: 1.0
******************************************************************/


/*
Smaller collapsed header style:

Somehow need to figure out how to collapse past 150px tall and change to the
small sizes here, and keep going to 80px tall.

Maybe add a css class? BUT only after scroll position of content reaches
past 80px header height position...

.compact-header#site-header {
	height: 80px;
}

.compact-header #menu-bar {
	padding: 15px calc( ( 100vw - 1400px ) / 2 )
}

.compact-header #site-logo {
	width: 50px;
}
*/


/*********************************
 Table of Contents
**********************************/

/* 1.1 - General Styles & Fonts
**********************************/

/* - - - - Resizing root variables for PHONE - - - - - */
@media screen and (max-width:639px) {
    :root {
        --body-h2-size: 35px;
        /*--body-font-size: 16px;*/
        --image-link-font-size: 25px;
    }
}

/*#wp-admin-bar-fl-builder-frontend-edit-link {
	display:none !important;
}*/

body:not(.wp-admin) {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    min-width:300px;
    margin:0px auto;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
}

/* Compensates for fixed posiiton header */
body.header-size-large {
    margin-top: 775px;
}
body.header-size-small {
    margin-top: 575px;
}


/*  ".content" selects for front-end content container,
    ".is-root-container" select for back-end gutenberg editor container 
    
    Apply both to anyting I want styled correctly in editor as well as front-end
*/

.content body, .is-root-container body,
.content p, .is-root-container p,
.content ul, .is-root-container ul,
.content li, .is-root-container li,
.content span {
	font-size: var(--body-font-size);
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
}

/* - - - - -  Headings  - - - - - */

.content h1,
.is-root-container h1,
.content h2,
.is-root-container h2,
.content h3,
.is-root-container h3 {	
    font-family: var(--heading-font-family);
    font-weight: 500;
    margin: 1em 0 0.5rem 0;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-transform: uppercase;
}

.content h4, 
.is-root-container h4, 
.content h5, 
.is-root-container h5, 
.content h6,
.is-root-container h6 {
    font-family: var(--body-font-family);
    margin: 1em 0 0.5rem 0;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.3rem;
}

.content h1, .is-root-container h1 {
    font-size: var(--body-h1-size);
    color: var(--primary-heading);
}
.content h2, .is-root-container h2 {
    font-size: var(--body-h2-size);
    color: var(--primary-heading);
}
.content h3, .is-root-container h3 {
    font-size: var(--body-h3-size);
    color: var(--secondary-heading);
}
.content h4, .is-root-container h4 {
    font-size: var(--body-h4-size);
    color: var(--secondary-heading);
}


*:focus {
	outline:none;
}
.row {
	max-width:1180px;
}
.column, .columns {
	padding-right: 15px;
	padding-left: 15px;
}
hr {
	clear: both;
	max-width: 100%;
	height: 0;
	margin: 1.25rem auto;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #000000;
	border-left: 0;
}

/* Used for social icons, and? */
.fa, .far, .fas {
	font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
}

a.fa {
	font-size: 25px;
	padding: 5px;
	border-radius: 20px;
	width: 35px;
	text-align: center;
	text-decoration: none;
}

.content a.fa {
	color: white;
	background-color: var(--color-gold);
}
.content a.fa:hover {
	color: white;
	background-color: var(--color-bright-gold);
}


/*** IOS7/Foundation Bug Fix ***/
select {
	background-position:100% 50%;
} 


/****************************
1.2 - Colors, Effects, Helpers
***************************/

p:empty { /* !*!*!*! fascinating - empty tags can be removed via css!!! */
	display:none;
}

/***************************
 			Header
****************************/
#site-header {
	padding: 0;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-color: var(--back-color-grey);
	/* background-attachment: fixed; */
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 99999;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

#site-header.header-size-large {
	height: 700px;
}
#site-header.header-size-small {
	height: 500px;
}

#header-bar {
	background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
}

#alerts-bar {
	display: flex;
	align-items: center;
	flex-direction: column;
}
/*
#alerts-arrow {
	width:18px;
	fill: var(--alert-bar);
}*/
#alerts-list {
	width: 100%;
	background-color: var(--alert-bar);
	color: var(--alert-text);
	font-weight: 400;
}
#alerts-bar:hover #alerts-list {
	background-color: var(--alert-bar-hover);
}
/*
#alerts-bar:hover #alerts-arrow {
	fill: var(--alert-bar-hover);
}*/

#alerts-list .alert {
	text-align: center;
	font-size: 20px;
	padding: 5px;
}
#alerts-list .alert a {
	color: var(--alert-link);
}
#alerts-list .alert a:hover {
	color: var(--alert-link-hover);
}

#alerts-list .alert p {
	margin: 0px;
}

#menu-bar {
	padding: 30px calc( ( 100vw - 1400px ) / 2 );
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0;
	gap: 1em;
}
#header-nav {
	/*min-width: 650px;
	max-width: 750px;
	width: 80%;*/ 
	width: 650px;
}
#header-logo a {
	font-size: 0px;
}
#header-bar #site-logo {
    width: 90px;
    display: block; /* gets rid of extra space at bottom of image in a link */
    transition: all .2s ease-in-out;
}
#header-buttons a {
	text-decoration: none;
}
#header-buttons {
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 10px;
}
#header-buttons #search-icon {
	display: inline-block;
	/* margin-right: 15px; */
	color: var(--color-off-white);
	padding: 8px 7px 7px 8px;
	border-radius: 30px;
}
#header-buttons #search-icon:hover {
	background-color: var(--color-gold);	
}
#header-buttons #map-link,
#header-buttons #member-link {
	font-size: 0px;
}
#header-buttons #map-link img,
#header-buttons #member-link img {
    width: 115px;
}
#header-buttons img:hover {
	background-color: var(--color-gold);
}

/* old one
hr#header-line {
	border-bottom: 10px solid var(--footer-back);
	width: 100%;
	margin: 10px auto;
}*/

hr#header-line {
    border-bottom: 10px solid var(--footer-back);
    width: 100%;
    margin: 0px auto;
    background: white;
    position: absolute;
    bottom: 0px;
    height: 11px;
}

/* STYLE THE MEGA MENU in the Max Mega Menu plugin settings
 * In: 
 *  Max Mega Menu > Menu Themes > Mega Menus
 *  Max Mega Menu > Menu Themes > Custom Styling
*/

/* not working for border on left for some reason!
#mega-menu-wrap-consumer-nav #mega-menu-consumer-nav > li > ul > li {
  position: relative !important;
}

#mega-menu-wrap-consumer-nav #mega-menu-consumer-nav > li > ul > li::before {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 100px;
  left: -50px;
  background-color: orange;
  z-index:999;
}
*/

/* compact header (when page scrolled) */
#site-header.compact-header {
	height: 80px;
}

#site-header.compact-header #menu-bar {
	padding: 15px calc( ( 100vw - 1400px ) / 2 )
}

#site-header.compact-header #site-logo {
	width: 50px;
}

/* repsonsive */
@media screen and (max-width: 1100px) {
	#menu-bar {
		flex-wrap: wrap;
		row-gap: 15px;
	}
	/*#header-nav { order: 1; }
	#header-logo { order: 2; }
	#header-buttons { order: 3; }*/
}
@media screen and (max-width: 769px) {
	#menu-bar {
		background-color: var(--color-dark);
		padding: 10px;
		flex-wrap: nowrap;
		column-gap: 0px;
	}
	#site-header {
		padding-top: 0px;
	}
	#site-header.header-size-large {
		height: 400px;
	}
	#site-header.header-size-small {
		height: 300px;
	}
	body.header-size-large {
		margin-top: 450px;
	}
	body.header-size-small {
		margin-top: 350px;
	}
	#header-bar {
		flex-wrap: wrap;
		position: relative;
		justify-content: space-between;
	}
	#header-logo {
		order: 1;
		flex-basis: 100%;
		padding: 0px;
	}
	#header-nav {
		min-width: unset;
	}
	#header-bar #site-logo {
		width: 50px;
	}
	#header-buttons {
		order: 2;
		flex-basis: 100%;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: space-evenly;
		gap: 5px;
	}
	#header-nav {
		top: 15px;
		right: 20px;
		order: 3;
		padding: 10px;
	}
	#header-buttons #map-link img,
	#header-buttons #member-link img {
	    width: 90px;
	}
	
	hr#header-line {
        border-bottom: 7px solid var(--footer-back);
        height: 8px;
    }

}


/***********************
  Generic tag styling
************************/

.content p,
.is-root-container p {
	font-size: var(--body-font-size);
	line-height: normal;
	margin-top: 0px;
	margin-bottom: 1em;
}

/* ACTION: Make two adjacent p tags have much less margin */
.content p + p,
.is-root-container p + p {

}

#idaho-cider {
	scroll-behavior: smooth;
}

a, .button, button, img,
input[type="submit"] {
	/*-webkit-transition: background-color 200ms, color 200ms;
	-moz-transition: background-color 200ms, color 200ms;
	-ms-transition: background-color 200ms, color 200ms;
	-o-transition: background-color 200ms, color 200ms;*/
	transition: background-color 500ms, color 200ms;
}
/* maybe get rid of this
.content a,
.is-root-container a { 
	text-decoration: none; 
	color: var(--body-link);
	font-weight: 400;
}

.content a:hover,
.is-root-container a:hover {
    color: var(--body-link-hover);
    text-decoration: underline;
}
*/

/* links */
div.content a,
div.is-root-container a:not(.acf-input *) {
	color: var(--body-link);
	font-weight: 400 !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0);
	transition: color 400ms, border-color 400ms;
	word-break: break-word;
}

div.content a:hover,
div.is-root-container a:hover {
	color: var(--body-link-hover);
	text-decoration: none;
	border-bottom-color: var(--body-link-hover);
}

/* make sure links with images don't have underlines on hover */
div.content a:has(img):hover,
div.is-root-container a:has(img):hover {
	border-bottom: rgba(0,0,0,0);
}



.content.post > ul, /* .post & .page for greater specificity */
.content.page > ul {
	padding-left: 60px;
}

/** BUTTONS! **/

/* the selector .button:not(.acf-input *) 
SOMEHOW selects buttons that are NOT a child
of class .acf-input - the '*' is the magic)*/

.content .wp-element-button,
.content .button,
footer .button,
.brewery .button,
.is-root-container .wp-element-button,
.is-root-container .button:not(.acf-input *) {
	padding: .75em 1.5em;
	display: inline-block;
	min-width: 100px;
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-dark);
	background-color: var(--color-gold);
	border: none;
	text-align: center;
	border-radius: unset;
	white-space: wrap;
}
.content .wp-element-button:hover,
.content .wp-element-button:focus,
.content .button:hover, 
.content .button:focus,
footer .button:hover,
footer .button:focus,
.brewery .button:hover,
.brewery .button:focus,
.is-root-container .wp-element-button:hover,
.is-root-container .wp-element-button:focus,
.is-root-container .button:hover, 
.is-root-container .button:focus {
	background-color: var(--color-bright-gold);
    color: var(--color-dark);
    text-decoration: none;
}

/* inputs - This is still OLD */
.post-password-form input[type="submit"] {
	padding: 16px 24px;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background-color: #272727;
	border:0;
}
input[type="password"] {
	max-width:360px;
}
.center {
	text-align:center;
}
.modal-open {
	overflow:hidden;
	height:100%;
	height:100%;
	width:100%;
}
.modal-open #site-header {
	box-shadow:none;
}
.nowrap {
	display:inline-block;
  white-space: nowrap;
}
#mobile-indicator {
	display:block;
}
.sep100 {
	display:block;
	height:100px;
	width:100%;
}
.sep60 {
	display:block;
	height:60px;
	width:100%;
}
.small-heading {
	font-size: 16px;
	color: #333;
	text-transform: uppercase;
	font-weight: 300;
	margin-top: 50px;
	margin-bottom: 45px; 
}
.bottom-align {
	display:table;
	height:100%;
}
.bottom-align > a,
.bottom-align .bottom-align {
	height:100%;
	display:table-cell;
	vertical-align:bottom;
}
.wp-caption {
	background:#FFF;
}
.wp-caption p.wp-caption-text {
	font-size: 14px;
	margin: 4px 0 7px;
	text-align: center;
	background: #FFF;
	color:#222;
	font-weight:500;
}
.event-spacer {
	margin-top: 80px;
	margin-bottom: 45px;
}



/****************************
1.5 - Content
****************************/

.content {
    width: 100%;
	margin-top: var(--block-margin);
	margin-bottom: var(--block-margin);
}

/* these to rules make sure first and last tag in content have proper margin from header and footer */
/* this is to make sure tags that are not my ACF blocks, display within content width */
/*
.content > *:first-child {
	margin-top: var(--block-margin);
}*/

/*
.content > *:last-child {
	margin-bottom: var(--block-margin);
}*/

/* select ANY TAG that's not my acf blocks */
div.content > *:not(.block-outer) {
    max-width: var(--content-width);
    margin-left: auto;
	margin-right: auto;
}

/* vertical margin for 1st level divs that aren't ACF blocks 
 - targets gutenberg block types that use div - won't mess with desire for varying 
spacing with <p> and <h*> tags */
div.content > div:not(.block-outer) {
	margin-bottom: 4rem;
}


/* give a mobile margin to any blocks not designed for full-bleed on mobile */
@media screen and (max-width: 1040px) {
	div.content > *:not(.block-outer),
	div.content .mobile-margin {
		margin-left: var(--mobile-margin);
		margin-right: var(--mobile-margin);
	}
}

.content > div.block-outer { /* for my custom blocks to allow for full-width background that is wider than content-width */
    min-width: 100%;
    margin-top: var(--block-margin);
    margin-bottom: var(--block-margin);
}
.block-inner {
    max-width: var(--content-width);
    margin: 50px auto;
}

.content .wp-block-query > ul.wp-block-post-template {
    margin-left: 0px;
}
.content > h2.wp-block-heading {
	margin-top: var(--block-margin);
	margin-bottom: 20px;
}
.content > h3.wp-block-heading {
	margin-top: calc(var(--block-margin)/2);
}

/* if .block-outer follows heading, diminish top-margin */
h2.wp-block-heading + div.block-outer {
	margin-top: 2em;
}


/* --- Styling for Rich Text (WYSIWYG editor) areas ---- */

.nwca-rich-text hr {
    border-bottom: 2px solid var(--line-dark-color);
    width: 10%;
    margin: 1.5em auto 1.5em 0;
}

.nwca-rich-text p {
	margin-top: 0px;
}

figcaption {
    font-size: .9em;
    font-weight: 400;
}

.height-full {
	/*can use this to force 100% for an element*/
	height: 100%;
}

/**** Generic article (post) display ****/
.article-footer {
	clear: both;
}

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

/* ---- pre footer ----- */
#pre-footer.content { 
	margin-bottom: calc( var(--block-margin) / 2 ); 
}

/* ------------ Actual Footer ----------- */

footer {
	padding: 3rem var(--mobile-margin);
	background: var(--footer-back);
	color: var(--footer-text);
}
footer a, footer p, footer h1, footer h2, footer h3, footer h4 {
    color: var(--footer-text);
}
footer a:hover {
	color: var(--footer-text);
}

/* --------- footer image ----------*/
footer #footer-image-container {
    max-width: var(--footer-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 2rem;
}
#footer .footer-images {
    display: inline-block;
}
footer #footer-image-left {
    border-bottom: 2px solid var(--footer-text);
    width: 20%
}
footer #footer-image-center {
    width: 600px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

footer #footer-image-right {
    border-bottom: 2px solid var(--footer-text);
    width: 20%;
}

/* ------ footer links --------*/
#footer-links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em
}

#footer-links a {
	color: var(--footer-text);
	font-weight: 400;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0);
	transition: color 400ms, border-color 400ms;
}
#footer-links a:hover {
	border-bottom: white 1px solid;
}
#footer-links ul {
	list-style-type: none;
}
#footer-links ul.menu {
	display: flex;
	justify-content: space-evenly;
	max-width: var(--footer-content-width);
	padding: 0px var(--mobile-margin);
	margin: 0px auto;
	column-gap: 2em;
}
#footer-links ul.menu ul {
	padding-left: 0;
}
#footer-links ul.menu > li > a { /* top level items */
	display: none; /* client did not want these to show */
	font-family: var(--heading-font-family);
	font-size: 1.5em;
	text-transform: uppercase;
	cursor: default;
}
#footer-links ul.menu > li > a:hover {
	text-decoration: none;
	border-bottom-color: rgba(0,0,0,0);
}

/* second level menu block spacing
	- reinstate if using 1st level titles
#footer-links ul.menu > li > ul { 
	padding-top: 1em;
}*/

/* spacing between menu items - to help differentiate wrapped links */
#footer-links ul.menu li > ul > li {
	padding-bottom: 0.3em;
}

#footer-subscribe #show-button {
	background: none;
	border: white 2px solid;
	padding: 15px;
	color: white;
	font: var(--body-font);
	font-weight: 400;
	cursor: pointer;
}
#footer-subscribe #show-button:hover {
	background: var(--footer-back-light);
}
#subscribe-button-desc {
	font-weight: 400;
	font-size: 18px;
	margin-top: 10px;
	text-align: center;
}

#subscribe-form {
    position: fixed;
    top: 50vh;
    left: 50vw;
    padding-top: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 50px 50px rgb(0 0 0 / 30%);
    background: white;
    max-width: 500px;
    min-width: 360px;
    z-index: 99999;
}

#mc_embed_signup {
	background: #fff;
	color: black;
	padding: 10px 20px;
}
#mc_embed_signup input.button {
    margin: 20px auto;
    padding: 5px 30px;
    height: unset;
    font-size: 20px;
    font-weight: 400;
}
#mc_embed_signup h2 { 
	color:var(--footer-back);
	margin-bottom: 0px;
}

#close-button {
	background-color: var(--footer-back);
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: unset;
    padding: 6px 10px 8px 10px;
    display: block;
}
#close-button:hover {
	background-color: var(--footer-back-light)
}

#footer-social {
	display: flex;
	max-width: var(--footer-content-width);
	margin: 1.5em auto;
	justify-content: space-between;
	align-items: center;
}
#footer-social a.fa {
	color: var(--footer-back);
	background-color: var(--footer-text);	
}
#footer-social a.fa:hover {
	color: var(--color-bright-gold);
	background-color: var(--footer-text);
}

#footer-social-left {
	/*width: calc(100% - 130px);*/
	flex-basis: 100%;
	border-bottom: 2px solid var(--footer-text);
}
#footer-social-right {
	display: flex;
	padding-left: 1em;
	gap: 8px;
}

@media screen and (max-width:639px) {
	#footer-image-left {
	    display: none;
	}
	#footer-image-right {
	    display: none;
	}
	ul#menu-footer-menu {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	ul#menu-footer-menu > li {
		width: 100%;
	}
	ul#menu-footer-menu > li:not(:first-child) {
		border-top: 2px solid var(--footer-text);
		padding-top: 1em
	}
}

/* ---------------- old footer sponsors? ------------
#footer-logos {
	height:200px;
	margin-bottom:80px;
	text-align:center;
}
#footer-logos .columns, #footer-logos, .column {
    float: none;
    clear: both;
}

#footer-logos .widget {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: auto;
    padding-bottom: 3em;
}
#footer-logos .widget_media_image a {
    text-align: center;
    display: inline-block;
    height: auto;
}*/



/****************************
2.1 - Home Page
****************************/

/* OLD SHIT

.home h1, .home .faux-h1 {
	font-size:38px;
	font-weight:700;
	text-align:center;
	margin-bottom:45px;
	margin-top:50px;
}
.home h3.event-title {
	font-size: 30px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.35px;
}
.home .event-date {
	opacity: .85;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	text-transform: none;
	color: #777;
	padding: 14px 0 10px;
	display: block;
}
.home .event-excerpt {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px 0;
	text-align: left;
	font-weight: 300;
	color: #444;
}
*/

/***********************
 	Search results
 ***********************/
form.search-form {
    display: flex;
    gap: 1em;
    align-items: stretch;
    margin-bottom: 2em;
    flex-wrap: wrap;
    justify-content: flex-end;
}

form.search-form label {
	flex-grow: 1;
	min-width: 300px;
}

form.search-form label input {
	width: 100%;
	height: 100%;
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-weight: 300;
	padding: 10px;
}
form.search-form > input {
	min-width: 150px;
}
body.search-results h2 {
	font-size: 40px;
}
body.search-results article {
	margin: 3em var(--mobile-margin);
}
body.search-results article .article-footer {
	height: 1px;
}

/* Generic Search results stylings */
:is(.search-results, #content-archive) article {
	margin-bottom: 2rem;
}

:is(.search-results, #content-archive) .featured-image img {
	width: 250px;
	height: 250px;
	object-fit: cover;
}

:is(.search-results, #content-archive) .featured-image {
	float: left;
	margin-right: 2rem;
}

:is(.search-results, #content-archive) h2 {
	clear: both;
}


/**** pagination (jesse) *****/
nav.wp-block-query-pagination,
nav.navigation.pagination,
.is-root-container .wp-block-query nav.wp-block-query-pagination {
	margin: 1em auto;
	width: 100%;
}
nav.wp-block-query-pagination,
nav.navigation.pagination .nav-links,
.is-root-container .wp-block-query nav.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
}
.nav-links .page-numbers,
.wp-block-query-pagination-numbers .page-numbers {
	padding: 2px 10px;
	color: var(--color-gold);
}
.nav-links .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--color-gold);
	border-radius: 25px;
	color: white;
}


/****************************
2.2 - Interior Pages
****************************/
#sidebar1 {
	text-align:center;
}
.member-grid hr {
	padding-top:60px;
}
.member-grid hr:last-child {
	display:none;
}
.member-grid .letter-header {
	font-size: 40px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.member-block {
	text-align:center;
}
.page-id-384 .member-block,
.page-id-386 .member-block {
	text-align:left;
}
.member-block:nth-of-type(3n+1) {
	clear:both;
}
.page-id-384 .member-block:nth-of-type(3n+1) {
	clear:none;
}
.alpha-list {
	list-style:none;
}
.alpha-list li {
	float:left;
}
.alpha-list li:after {
	content:"-";
	padding:0 4px;
}
.alpha-list li:last-child:after {
	content:"";
}
#main .member-block:last-of-type {
	float:left;
}
.member-thumb {
	display:table;
	margin-bottom:20px;
	width:100%;
}
.center-logo {
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.header-photo {
	margin-bottom:25px;
}

/***** Styling for list of posts (press releases) *****/

/* makes h2 black and smaller for article-header - not sure I like this - Jesse 
.article-header h2,
.article-header h2 a {
	font-size:38px;
	color:#000;
}*/

.blog article,
.archive article {
	border-top: 1px solid var(--color-gold);
	padding-bottom: 20px;
}

.archive article {
	margin-bottom: 60px;
}

#press-release-list .excerpt {
	/*margin-top: 1em;*/
}

#press-release-list .featured-image {
	float: left;
	margin-right: 2rem;
}

#press-release-list .featured-image img {
	display: inline-block;
	width: 300px;
	height: 300px;
	object-fit: cover;
}


/***** Events *******/

/* 2024 (jesse) */
.hover-zoom,
.button.hover-zoom,
.hover-zoom img {
	transition: all .2s ease-in-out;
}
.hover-zoom:hover,
.button.hover-zoom:hover,
.hover-zoom img:hover {
	transform: scale(1.03);
}

/* Event list */

.event-list hr {
	width: 80%;
	margin: 0px auto;
	border-bottom: 1px solid var(--color-gold);
}
.event-list-item .block-outer {
	margin: 30px 0;
}
.event-list-item .block-inner {
	display: flex;
	/* flex-direction: row-reverse; */
	gap: 20px;
}
.event-list-item .event-thumbnail {
	margin-top: 60px;
	order: 2;
}
.event-list-item .event-thumbnail img {
	display: inline-block;
	width: 350px;
	height: 350px;
	object-fit: cover;
}
.event-list-item .event-content {
	flex-basis: 70%;
	order: 1;
}
.event-list-item .pre-heading p {
	margin: 0px;
	font-family: var(--body-font-family);
	font-weight: 400;
}
.event-list-item .pre-heading .event-date.past::after {
	content: ' (PAST EVENT)';
	font-weight: 600
}
.event-list-item .event-content h3 {
	text-transform: none; /* Allow lower case */
}
.event-list-item .excerpt p {
	margin: 0px;
}
.event-list-item .event-content .event-info {
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px
}
.event-list-item .event-info .event-where,
.event-list-item .event-info .event-where {
	flex-basis: 50%;
}
.event-button {
	padding-top: 20px;
}
.event-button .event-price {
	display: inline-block;
	padding: 5px 10px;
	margin-right: 15px;
	background-color: white;
	border-radius: 10px;
	font-weight: 600;
}
.event-list-item .event-content .event-info p {
	margin: 0px;
}
.event-list-item .event-content .event-info h3 {
	font-size: 25px;
	margin-bottom: 0px;
	margin-top: 15px;
}

@media screen and (max-width:800px) {
	.event-list hr { display: none; }
	.event-list-item .block-inner {
		flex-direction: column;
		align-items: stretch;
		margin: 0px !important;
	}
	.event-list-item .event-content {
		padding: 0px var(--mobile-margin);
		order: 2;
	}
	.event-list-item .event-content h3 {
		margin-top: 1.5rem;
	}
	.event-list-item .event-thumbnail {
		margin-top: 0px;
		order: 1;
	}
	.event-list-item .event-thumbnail img {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
}

/* Event detail */

.event-detail-item .event-info-area {
	display: flex;
}
.event-detail-item .event-info {
	flex-basis: 70%;
}
.event-detail-item .event-info p {
	margin: 0px 0px 15px 0px;
}
.event-detail-item .event-info h3 {
	font-size: 30px;
	margin-bottom: 0px;
}
.event-detail-item .event-thumbnail {
	padding-top: 15px;
}
.event-detail-item .event-thumbnail img {
	width: 350px;
	height: 350px;
	object-fit: cover;
}
.event-detail-item .event-address span {
	display: block;
}
.event-detail-item .event-content-area {
	margin-top: 50px;
}
/* end 2024 */

/* do I need any of these old event styles? (try removing) (jesse 2024) ACTION */
.event-date, .event-address {
	display:block;
}
.event-thumb-container {
	/* position:relative; */
}
.event-block .datetag {
	display: table;
	position: absolute;
	top: 10px;
	right: 10px;
	height: auto;
	min-height: 70px;
	width: 70px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #333;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	box-sizing: border-box;
}
.event-block .datetag-inner {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	padding: 6px;
	color: inherit;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
}
.event-block .datetag .event-month,
.event-block .datetag .event-day,
.event-block .datetag .event-time {
	margin: 3px 0;
	line-height: 1em;
	text-transform: uppercase;
	white-space: nowrap;
	display:block;
}
.event-block .datetag .event-month {
	font-size: 14px;
	margin-top: 6px;
}
.event-block .datetag .event-day {
	font-size: 26px;
}
.event-block .datetag .event-time {
	border-top: 1px solid #ddd;
	margin: 6px 0 0 0;
	padding-top: 6px;
	font-size: 11px;
}
.single .event-date,
.single .event-address {
	margin-bottom: 20px;
	display: block;
}
.event-status {
	display: none;
	position: absolute;
	top: 0px;
	left: 35px;
	width: 1px;
	height: 70px;
	background: #000;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.event-block.past .event-status {
	top: 0px;
	height: 85px;
	-webkit-transform: rotate(38deg);
	-moz-transform: rotate(38deg);
	-ms-transform: rotate(38deg);
	transform: rotate(38deg);
	display:block;
}

/* Sponsors images 2024 */
figure.wp-block-image.sponsor-xl img {
	width: calc( 0.8 * var(--content-width) ) !important;
}

@media screen and (max-width: 1000px) {
	figure.wp-block-image.sponsor-l img {
		width: 90vw !important;
	}
	figure.wp-block-image.sponsor-l img {
		width: 100vw !important;
	}
	figure.wp-block-image.sponsor-m img {
		width: 100vw !important;
	}
	figure.wp-block-image.sponsor-s img {
		width: 100vw !important;
	}
}

/****************************
2.3 - Gravity Forms & Signup Forms
****************************/
.gform_wrapper.gf_browser_chrome select {
	padding: 2px 14px 2px 10px;
}


/*********************************************
 3.1 - Smartphone Styles
**********************************************/
@media screen and (max-width:639px) {
	.sep100 {
		height:25px;
	}
	#site-header {
	    height: 400px;
	}
	.top-bar-right {
		position:absolute;
		top:12px;
		left:0;
		right:0;
	}
	.top-bar-right > .menu {
    margin: 0;
    float: left;
    position: relative;
    left: 0px;
	}
	.top-bar-left .menu .mobile-logo > h2 {
		margin-bottom:0;
	}
	.modal-open #site-header {
		z-index: 9999;
    position: relative;
		background:#FFF;
	}
	/*
	.off-canvas > .menu {
		position: relative;
		top: 50px;
	}
	.off-canvas .menu > li > a {
    font-size: 16px;
    line-height: 2.5;
    padding: 0;
    text-align: center;
	}*/
	
	/*** Home Page ***/
	.event-block {
		margin-bottom:40px;
	}
	.event-block img {
		display:block;
		margin:auto;
		text-align:center;
	}
	/*** Interior Pages ***/
	.member-grid hr {
    margin-bottom: 60px;
	}
	.is-accordion-submenu-parent>a:after {
		border-color: #222 transparent transparent;
	}
	.event-block .datetag {
		right:inherit;
		left:10px;
	}
}

@media screen and (max-width:639px) and (orientation:landscape) {
	.modal-open #site-header {
		position:relative;
	}
	.modal-open .top-bar .top-bar-left, 
	.modal-open .top-bar  .top-bar-right {
		width:35%;
		position:fixed;
	}
	.modal-open .top-bar .top-bar-left {
		left:0;
	}
	.modal-open .top-bar  .top-bar-right {
		right: 15px;
	}
}
@media screen and (max-width:768px) {
	.row .fl-col-small {
		max-width:100%;
	}
}
/*********************************************
 3.2 - Tablet Styles - 640px+
**********************************************/
@media screen and (min-width:640px) and (max-width:1023px) {
	.menu.medium-horizontal>li {
    display: inline-block;
	}
	.top-bar .top-bar-left {
		width:125px;
	}
	.top-bar .top-bar-right {
		width:75%;
		margin:0;
		float:right;
	}
	.top-bar-social {
    margin-top: 0;
    position: absolute;
    top: 20px;
    right: 40px;
	}
	#footer-logos {
    height: 140px;
	}
	.event-block:nth-child(2n+1) {
		clear:both;
	}
	.event-block .datetag {
		right:inherit;
		left:10px;
	}
}

/** General ** ???
@media screen and (min-width:640px) {
	#mobile-indicator {
		display:none;
	}
	.column:first-child, .columns:first-child {
		padding-left:20px;
	}
	.column:last-child, .columns:last-child {
		padding-right:20px;
	}
	.medium-12, .large-12 {
		padding-left:20px;
		padding-right:20px;
	}	
	.top-bar-right .menu > li > ul > li > a {
		padding:8px 15px;
	}
}*/

/* Replicating Squarespace Layout???
@media screen and (min-width:768px) {
	.page-template-default #main,
	.page-template-template-memberlist #main,
	.blog #main, .single #main, .archive #main	{
		width: 100%;
		float: left;
		border-right-width: 270px;
		border-right-style: solid;
		border-right-color: transparent;
	}
	.page-template-default #sidebar1,
	.page-template-template-memberlist #sidebar1,
	.blog #sidebar1, .single #sidebar1, .archive #sidebar1 {
		text-align: center;
		float: right;
		width: 270px;
		margin-left: -270px;
		margin-right: 0;
		position: relative;
	}
}
*/

/*********************************************
 3.3 - Tablet Styles - 1024px+
**********************************************/
@media screen and (min-width:1024px) {
	/*** General ***/
	.column, .columns {
		padding-left:15px;
		padding-right:15px;
	}
	.top-bar-right > ul {
		display:table;
	}
}

/*****************
   FOR PRINT 
*****************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }