@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:wght@300;400;500&family=Public+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&family=Libre+Caslon+Display&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital@1&display=swap');

/* font classes */
.libre-caslon-text-regular {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-caslon-text-bold {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-caslon-text-regular-italic {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: italic;
}

/* <weight>: Use a value from 300 to 900
<uniquifier>: Use a unique and descriptive class name 

.merriweather-<uniquifier> {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.public-sans-<uniquifier> {
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

.merriweather {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.public-sans {
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* end font classes */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/* Sections ========================================================================== */
/** * Remove the margin in all browsers. */
body { margin: 0; }
/** * Render the `main` element consistently in IE. */
main { display: block; }
/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */
/*
h1 { font-size: 2em; margin: 0.67em 0; }
*/
/* Grouping content ========================================================================== */
/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/* Text-level semantics ========================================================================== */
/** * Remove the gray background on active links in IE 10. */
a { background-color: transparent; }
/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }
/** * Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/** * Add the correct font size in all browsers. */
small { font-size: 80%; }
/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* Embedded content ========================================================================== */
/** * Remove the border on images inside links in IE 10. */
img { border-style: none; }
/* Forms ========================================================================== */
/** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
/** * Show the overflow in IE. * 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }
/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }
/** * Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
/** * Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
/** * Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
/** * Correct the padding in Firefox. */
/* fieldset { padding: 0.35em 0.75em 0.625em; } */
/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out *    `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }
/** * Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }
/** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/** * Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
/** * Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
/* Interactive ========================================================================== */
/* * Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }
/* * Add the correct display in all browsers. */
summary { display: list-item; }
/* Misc ========================================================================== */
/** * Add the correct display in IE 10+. */
template { display: none; }
/** * Add the correct display in IE 10. */
[hidden] { display: none; }

html { background-color: rgba(0, 0, 0, .01); }

body
{
	background-color: white;
	font-size: 16px;
	line-height: 176%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0;
	font-family: 'Public Sans', Arial, sans-serif;
}

* {
	-webkit-transition: all 100ms ease-out;
	-moz-transition: all 100ms ease-out;
	transition: all 100ms ease-out;
}

main
{
	position: relative;
	margin: 0;
}

/* clearfix */
.hero:after,
#landing .hero:after {
	content: '';
	display: block;
	clear: both;
	line-height: 0;
	visibility: hidden;
}

#content { margin: 0 140px 0; }

#general #content { margin: 0; }

section { 
	position: relative; 
}

.accessibility
{
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.accessibility:focus
{
	position: static;
	width: auto;
	height: auto;
}

q {
  quotes: "Ò" "Ó" "Ô" "Õ";
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}

/* Merriweather */
h3,
#home-nav,
footer,
#post,
#post cite,
.sidebar,
section { 
	font-family: 'Merriweather', Times, serif; 
}

#post.caslon #hero h1 {	
	font: 400 8.6em/75% "Libre Caslon Display", Times, serif !important;
	margin-bottom: .2em !important;
	color: #FFFFFF;
	}

#post.caslon #hero h2 { 
	font: italic 400 2.25em/100% "Libre Caslon Text", Times, serif; !important;
	font-weight: normal !important;
	}

h1, h2, h3 { position: relative; }


#post.caslon h2.caslon {	
	font: 400 5.5em/100% "Libre Caslon Display", Times, serif !important;
	margin: 0 0 .5em !important;
	}
		
#post.caslon h2.caslon:after {bottom: -0.25em; !important;}

#post h3 {
	font-size: 1em;
	margin-top: 3em;	
}

#post h3:before {
	content: '';
	position: absolute;
	width: 1em;
	height: 3px;
	left: 0;
	top: -1em;
	background-color: #000000;
}

#post h3.no-line:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
}

a {
	text-decoration: none;
	color: #218BFF;
}

a:hover
{
	opacity: .4;
	color: #cccccc;
}

img
{
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.flex { display: flex; }

ul
{
	margin: 0;
	padding: 0;
}

dl 
{
	margin: 0;
	padding: 0;
}

header
{
	position: relative;
	margin: 0 140px 0;
	padding: 38px 0 9px;
}

#post header {
	border: none;
	padding-bottom: 0;
}

#about header,
#contact header,
#general header { 
	border: none; 
}

.social {
	position: relative;
	height: 20px;
}

.social div { 
	position: relative; 	
	margin: 0 0 0 32px;
	width: 20px;
	height: 20px;
}

.social a {	
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
}

.social a:hover { background-color: rgba(255, 255, 255, 1); }

.social object span
{
	position: absolute;
	left: -9000%;
}

header .social { float: right; }

header .social div {
	position: relative;
	float: right;
}
footer .social {	
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(0%);
	-moz-transform: translateX(-50%) translateY(0%);
	transform: translateX(-50%) translateY(0%);
}

footer .social div {
	position: relative;
	display: inline-block;
	margin: 0 16px !important;
}

h1
{
	font: 300 2.5em/129% 'Merriweather', Times, serif;
	color: #000000;
	margin: .25em 0 0;
}

h1.caslon
{
	font: 300 2.5em/129% 'libre-caslon-text-regular', Times, serif;
	margin: .25em 0 0;
}
/*
h1.white {color: #FFFFFF;}
*/
.upper {text-transform: uppercase;}

h1.label { margin: 1.75em 0 .65em; }

.credit {
	font: italic 200 13px/120% 'public-sans', sans-serif;
	color: #000000;
	opacity: 0.75;
	position: relative;
/*	top: -2em; */
}	

.credit a {
	color: #000000;
}	
	
.credit.hero {top: -2em;}

.credit.sm {font-size: .65em;}
	
.photo-caption {
	font: normal 200 12px/1.58 'public-sans', sans-serif;
	color: #000000;
	margin: 0 0 .5em;
}
	
#logo
{
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(0);
	-moz-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0);
	width: 246px;
}

#logo a
{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 9;
}

#logo a:hover,
#home #logo a:hover
{
	cursor: pointer;
	opacity: 1;
}

#home-nav
{
	position: relative;
	font-size: .875em;
	font-weight: 300;
}

#home-nav a { color: #000000; }

#home-nav ul
{
	text-align: center;	
	padding: .7em 0;
}

#home-nav li
{
	display: inline;
	list-style-type: none;
	/*	margin: 0 68px; */
	margin: 0 4.15%;
}

#home-nav li.current a
{
	font-weight: 400;
	position: relative;
}

#home-nav li.current a:after
{
	content: '';
	position: absolute;
	top: 100%;
	left: -1em;
	right: -1em;
	border-top: .188em solid #FC7A43; /* orange */
	margin-top: .85em;
}

#banner {clear: both;}

/* hamburger menu styles ============== */
/* hamburger only. Drop down menu styles are below, under #menu */
#hamburger {
	position: absolute;
	width: 16px;
}

#hamburger span,
.social span { font-size: 0; }

/* fancy burger */
#hamburger #patty1,
#hamburger #patty2,
#hamburger #patty3 {
	width: 100%;
	height: 1px;
	background-color: #999999;
	margin: 0 0 4px;
	position: relative;
	transition: transform 500ms ease-out;
}

#hamburger:hover {
	width: 26px;
	cursor: pointer;
}

#hamburger:hover #patty1,
#hamburger:hover #patty2,
#hamburger:hover #patty3 {	
	background-color: #000000;
}

#hamburger:hover #patty1 { 
	transform: translate(0, -8px) rotate(720deg);
}

#hamburger:hover #patty2 { 
	transform: translate(0, -4px) rotate(180deg);
}
/* end fancy burger */
/* end hamburger menu styles ============== */


/* nav element - drop down menu */
#menu
/* set left position in js */
{
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.23em;
	line-height: 2.86;
	letter-spacing: 0.11px;
	color: #000000;
	opacity: 0.95;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
	background-color: #ffffff;
	top: 0;
	z-index: 100;
	display: none;
}

#menu a { color: #000000; }
#menu ul { margin: 93px 90px 90px; }
#menu li,
#menu-mobile li { list-style-type: none; }

#menu li:first-child
{
	position: absolute;
	top: 25px;
	right: 38px;
}

#menu span { font-size: 60%; }
/* end hamburger menu */


/* category labels before h1 */
.category {
	text-transform: uppercase;
	font: 200 .8125em/100% 'Public Sans', Arial, sans-serif;
	letter-spacing: 8%;
	color: #8F8E8E;
	display: block;
	text-align: center;
}

#home .category {
	text-align: center;
	font: 200 .8125em/120% 'Public Sans', Arial, sans-serif;
	color: #B5B5B5;
	display: block;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* NOT home sidebar. Lower page sidebars. */
.sidebar 
{
	width: 22%; 
	float: right;
	font-size: 1em; /* reset font size */
	font-weight: 300;
	line-height: 170%;
	text-align: center;
	letter-spacing: .05em;
}

img.full-width {margin: 100px 0 0;}

#home .hero
{
	margin-top: 60px;
	padding: 0;
}

#home .hero-image
{
	line-height: 0;
	padding: 0;
	margin:0;
}

#home .intro {
	margin: 3em 0;
	padding: 6% 11%;
}

/* use these styles for home intro box */
#home .intro.blue {background-color: #F6FDFF;}
#home .intro.pink {background-color: #FFF7FD;}

.intro.blue > .byline {color: #257DDE;}
.intro.pink > .byline {color: #F0546A;}
/* end home intro box styles */


#home #main-content {
	width: 68%;
	float: left;
	padding: 0;
	margin: 0;
}

/* home sidebar styles --------------------- */
/* flex parent */
#home .sidebar
{
	max-width: 455px;
	width: 28%;
	margin: 0 0 4em;
	padding: 0;
	border: none;
	letter-spacing: 3%;
	display: flex;
	flex-direction: column; 
	gap: 3em 3em; 
	text-align: left;
	float: right;
}

/* flex child */
#home .sidebar .thumb {flex-basis: 100%;}
/* end sidebar flex */

#home .sidebar .thumb a {color: #000000;}
#home .sidebar .thumb a:hover p,
#home .sidebar .thumb a:hover h2 {opacity: .5;}

#home .sidebar h2
{
	font: normal 300 1.3em/115% 'Merriweather', Times, serif;
	margin-top: .75em;
}

#home .sidebar h2:after {
	content: '';
	position: absolute;
	background-color: #000000;
	height: 2px;
	width: 55px;
	bottom: -0.65em;
	left: 0;
}

#home .sidebar p
{
	font: 300 .9375em/167% 'Merriweather', Times, serif;
	margin: 2em 0 0;
	text-align: left;
}

#home .sidebar img {
	width: 100%;
}
/* end home sidebar styles --------------------- */

#home h1,
#home h1 a {
	position: relative;
	text-align: center;
	margin: .65em 0 .3em;
	color: #000000;
}

#home p
{
	font: 300 1.125em/200% 'Merriweather', Times, serif;
	text-align: center;
	position: relative;
}


/* reset styles affecting teaser image */
#home #teaser img {
	transform: none;
	margin: 0;
	padding: 0;
}

#home #teaser {
	display: flex;
}

#home #teaser .category {
	color: #DA21FF;
	text-align: left;
	font: 400 .5em/110% "Libre Caslon Display", serif;
	margin: 0 0 .3em;
	letter-spacing: 0;
}

#home #teaser #col1 {
	display: flex;
	padding: .2em 2% 0 0;
	width: 66%;
	float: left;
	font-size: min(4vw, 91px);
	font-family: "Libre Caslon Display", serif;
	font-weight: 400;
	line-height: 80%;
	text-align: left;
	align-items: center;  /* vert align text*/
	/* flex: 1;*/ /* make child div full vert height of parent div. same as flex: 1 1 0 */
	border-style: solid;
	border-width: 1px 0 1px;
	border-color: #D8D8D8;
	position: relative;
}

/* the arrow in the banner */
#home #teaser #col1 img {
	width: 3.8vw; 
	height: auto;
	margin: 1em 0 0;
}

#home #teaser #col1 a + span a {
	font: italic 300 13px/120% 'public-sans', sans-serif;
	color: #000000;
	opacity: .75;
	position: absolute;
	right: 2%;
	bottom: 1em;
	padding-right: 1em;	
}	

#home #teaser #col2 {
	padding: 0;
	line-height: 0;
	float: right;
	width: 32%;
}	



/* Read More link */
.more {
	display: table;
	margin-top: .35em;
	font-size: .75em;
	letter-spacing: .1em;
}

.intro .more {margin: 0 auto 0;}

a.more { opacity: 1;}

.more:after {
	content: 'Read more';
	color: #9B9B9B;
}

.more:hover:after {
	color: #FC7A43;
}
/* end read more link */


footer {
	position: relative;
	margin: 110px -140px 0;
	font-size: .8375em;
	font-weight: 300;
	color: #000000;
	text-align: center;
	clear: both;
}

#general footer,
#contact footer  { margin: 190px 0 0; }

#contact footer div:first-child { margin:0; }

footer div:first-child {margin: 0 140px;}

footer p { 
	font: normal 300 1.2em/200% 'Merriweather', serif !important;
	margin: 0 !important;
}
footer a { color: #000000; }
footer ul { }

footer li
{
	display: inline;
	padding: 0 2%;
	list-style-type: none;
}

footer #menu-footer
{
	background-color: #FCFAFA;
	padding: 34px 0 27px;
	margin-top: 43px;
}

footer #menu-footer ul { padding-bottom: 106px; }

#copyright
{
	font-size: .625em;
	line-height: 1.82;
	letter-spacing: 1.07px;
	padding-top: 19px;
	font-family: 'Public Sans', Arial, sans-serif;
}

#title
{
	font-size: 1.76em;
	font-family: 'Merriweather', Times, serif;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
	padding: 40px 0 37px;
	margin-bottom: 62px;
	border-bottom: 1px solid #E1E1E1;
}

cite { font-size: .667em; }

cite:before
{
	content: '\2014';
	margin-right: .25em;
}


/* preview thumbnails - bottom of reviews page */
#preview
{
	position: relative;
	border: solid #E1E1E1;
	border-width: 1px 0 0;
	margin: 2.5em 0 0;
	padding: 2.5em 0 0;
	color: #000000;
	font-size: 1em;
}

#about header { margin-bottom: 8px; }

#about footer { margin: 0; }

#about section
{
	background-image: url("../img/background_about.jpg");
	background-size: cover;
	background-position: center;
	display: inline-block;
	margin-bottom: 5em;
}

#about section div
{
	width: 55%;
	margin: 4em auto 10em;
	text-align: center;
	color: #FFFFFF;
/*	font: 300 1.588em/140% 'Merriweather', Times, serif; */
	font: 300 2.375em/140% 'Merriweather', Times, serif;
}

#about section div h1
{
	font-family: 'Merriweather', Times, serif;
	color: #FFFFFF;
	margin-bottom: 0;
}

#about section div h2
{
	font: 300 italic .88em/140% 'Merriweather', Times, serif;
}

#about section div p {letter-spacing: .075em;}


#about main {background-color: #FFFEF6;}


/* table styles ====================== */

table	{
	border-collapse: collapse;
	width: 100%;
	line-height: 163%;
	font-size: .85em;
	margin: 2em 0 6em;
}	

table, th {font-weight: 300;}

colgroup.col1 {width: 43%;}
colgroup.col2 {width: auto;}
colgroup.col3 {width: 10%;}

th {
	color: #FC7A43;
	border-bottom: 1px solid #FC7A43;
	text-align: left;
	padding: 1em 0;
}

tr td {
	vertical-align: top;
	padding: .5em 5em .5em .5em;
	position: relative;
}
tr:last-child {border-bottom: 1px solid #FC7A43;}

tr td:last-child,
tr th:last-child {padding-right: 1em;}

tr td:first-child,
th:first-child {padding-left: 2em;}


tr:nth-child(even) {
    background-color: rgba(252,122,67,0.08);
    
}


/* form styles --------------------------------------------------- */

/* remove radius corners in iOS */
input, textarea
{
	-webkit-border-radius:0; 
	border-radius: 0;
}
	
/* contact form */
#contact { font-weight: 300; }
#contact header { margin-bottom: 8px; }
#contact form { margin-top: 5em; }

#contact h1
{
	font: 400 3.52em/100% 'Merriweather', Times, serif;
	margin-bottom: .75em;
}

#contact h2 { 
	font: italic 300 1.411em/150% 'Merriweather', Times, serif; 
	width: 75%;	
}

#contact section > div {margin: 0 272px 0 130px;}

#contact fieldset
{
	border: 1px;
	margin: 0;
	padding: 0;
	font-weight: 300;
	font-size: .825em;
}

#contact fieldset > div
{
	margin: 0 0 88px;
	padding: 0;
	width: 48%;
	display: inline-block;
}

#contact input#c_name,
#contact input#c_email,
#contact textarea#c_message
{
	outline: none;
	box-shadow: none;
	border: solid #BBBDC0;
	border-width: 0 0 1px;
}

#contact input#c_name:focus,
#contact input#c_email:focus,
#contact textarea#c_message:focus
{
	border: solid #FC7A43;
	border-width: 0 0 1px;
}

#contact fieldset #email { float: right; }
#contact fieldset #message { position: relative; }
#contact fieldset #message, 
#contact fieldset textarea { width: 100%; }

#contact fieldset textarea,
#contact fieldset input
{
	border: none;
	background-color: transparent;
}
/*
#contact input label
{
	position: absolute;
	color: #000000;
	top: -1.5em;
	
}

#contact #message label
{
	position: absolute;
	top: -3em;
}
*/
#contact input,
#contact fieldset textarea
{
	height: 4em;
	width: 100%;
}

/* change color of placeholder */
/*
#contact ::placeholder { color: #BBBDC0; }
#contact textarea::placeholder { padding-top: 2.25em; }

#contact input:focus::placeholder,
#contact textarea:focus::placeholder
{
	color: #FC7A43;
	opacity: 1;
}
*/
#contact #submit-button input
{
	text-transform: uppercase;
	color: white;
	font: .75em/100% 'Public Sans', Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	background-color: black;
	border: none;
	padding: 0 45px;
	width: auto;
}
#submit-button input:hover
{
	cursor: pointer;
	opacity: .4;
}

#contact .error
{
	color: red;
	width: 100%;
	border: none;
}

#contact .error ul { margin-left: 1.25em; }

.error li
{
	list-style-type: square;
	list-style-position: outside;
	line-height: 125%;
	background: none;
	padding-left: 0;
}
/* end contact form */


/* signup form page */
#signupform
{
	position: relative;
	max-width: 480px;
	height: 50px;
	font-size: 14px;
	line-height: 1.43;
	letter-spacing: 0.7px;
	color: #9b9b9b;
	border: 1px #939598 solid;
	margin: 20px auto 0;
	clear: both;
}

#signupform fieldset
{
	border: none;
	margin: 0;
	padding: 0;
}

/* position label element - not placeholder */
#signupform label { 
	position: absolute;
	font-size: 10px;
	top: 0;
	left: 0;
	padding: 3px;
	opacity: 0;
 }

#signupform input {
	position: absolute;
	background-color: transparent;
	border: 0;
	top: 0;
	left: 0;
	height: 50px;
	width: 320px;
	font-size: 14px;
	text-align: center;
}

/* adjust styles below - and #signupform input above - to shift label on focus */
/*
#signupform input:focus,
#signupform #emailfield {width:320px;}
*/

/* show label text (Email) on focus */
#signupform #emailfield:focus-within label { 
	left: 0;
	top: 0;
	font-size: 10px;
	opacity: 1;
}

/*   ** don't use none value here to allow outline on focus when tabbing **
#signupform input:focus { outline: none;} 
*/

#signupform #submit-button
{
	position: absolute;
	right: 0;
	top: 0;
}

#signupform #submit-button input
{
	position: absolute;
	text-transform: uppercase;
	color: white;
	font-family: 'Public Sans', Arial, sans-serif;
	font-size: .9em;
	letter-spacing: .1em;
	text-align: center;
	background-color: black;
	width: 160px;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
}

#signupform .error {
	position: absolute;
	border: none;
	margin: 0;
	top: 2em;
	left: 0;
	width: 100%;
	max-width: 320px;
}

#signupform .error ul {
	width: 100%;
}

#signupform .error li
{
	color: red;
	list-style-type: square;
	list-style-position: outside;
}
/* end signup form */

/* hide placeholder (not label) text on focus by making its size 0 */
#signupform input:focus::placeholder,
#contact input:focus::placeholder,
#contact textarea:focus::placeholder {font-size: 0;}

/* end all form styles --------------------------------------------------- */


#post.music #main-col h1 {
	font: 400 5em/85% "Libre Caslon Display", serif;
	margin: 0 0 1em;
}

#post.music #main-col h1:after {
	position: absolute;
	content: '';
	width: 15px;
	height: 3px;
	bottom: -0.65em;
	left: 0;
	background-color: #000000;
}

#post #footnote {
	width: 70%;
	font-size: .75em;
	line-height: 150%;
	font-weight: 200;
	font-family: 'Public Sans', Arial, sans-serif;	
	color: #000000;
	opacity: .75;
	position: relative;
	margin: 12em 0 0;
}

#post #footnote h3 {
	font-size: 105%;	
	font-weight: 200;
	font-family: 'Public Sans', Arial, sans-serif;
	margin-bottom: 0;
}

#post #byline span, 
#post #footnote h3,
#post #footnote a {color: #DA21FF;}

#post #footnote.orange h3 {color: #FF6719;}

#post #footnote h3:before
{
	width: 0;
	height: 0;
}

#post #footnote p {margin: 0;}

#post #footnote ul {
	margin: 2em 0 0 4em;
}

#post #footnote li { 
	margin: 0 0 3em !important;
	list-style-type: none;
	position: relative;
}


/* writers links */

#post #footnote li.writers-link {
	position: relative;
	display: flex;
    flex-direction: column; /* Stack the lines vertically */
    align-items: flex-start; /* Aligns text to the left */
    justify-content: center; /* Vertically centers the text */
    line-height: .85em;
}

#post #footnote li.writers-link:before {	
	content: "";
	position: absolute;
	border-radius: 0;
	width: 36px;
	height: 36px;
	left: -4.5em;
	background-color: transparent;
}

#post #footnote li.writers-link.substack:before {
	background-image: url('../img/icon_substack.png');
	transform: translate(0, -40%);
}

#post #footnote li.writers-link.linkedin:before {
	background-image: url('../img/icon_linkedin.png');
    transform: translate(0, -55%);
}

#post #writer-box {
	border: dotted;
	border-width: 1px 0;
	text-align: left;
	padding: 1.5em 0 2.5em;
}

#post.red #writer-box { 
	border-color: #FC510E;
}

#post.red #writer-box a {color: #FC510E;}


#post #writer-box + #footnote {margin-top: 6em;}

/* end writers links */



#post.music .sidebar ul {
	margin: 1em auto 0;
}

#post.music .sidebar ul li {
	display: inline-block;
	margin: 0 5%;
}

#post .sidebar dl.playlist {
	display: block;
	text-align: left;
	font-style: italic;
}

#post.music .sidebar dl.playlist dt {
	font-size: 75%;
}
#post.music .sidebar dl.playlist dd {
	color: #DA21FF;
	position: relative;
/*	margin: 0 0 3em .75em; */
	margin: 0 0 .5em .5em;
}

#post.music .sidebar dl.playlist dd:before {
	content: '';
	position: absolute;
	width: .25em;
	height: .25em;
	border-radius: 100%;
	background-color: #DA21FF;
	top: 0.85em;
	left: -0.75em;
}

#post.music .sidebar ol {
	text-align: left;
	line-height: 144%
}

#post.music .sidebar ol li {
	font-style: italic;
	list-style-type: revert;
	color: #DA21FF;
	margin: 0 0 0.5em -0.5em;
}

#post.music .sidebar .category,
#post.music .sidebar a { color: #DA21FF !important; }

.video-playlist {
	margin: 4em 0;
	padding: 3em 0 0;
}

.video-playlist h2:after {
	height: 0 !important;
	width: 0 !important;
	background-color: none !important;
}

.video-playlist  div iframe {    
	border-radius: 10px;
	margin: 2em 0;
}

.video-playlist div {
    display: flex;
    justify-content: flex-start;
}

.video-playlist {border-top: 1px dotted #FC510E;}

.video-playlist dl {
	margin: 1em 0 0;
}


.video-playlist dd {
	position: relative;
	font-style: italic;
	margin: 0 0 2em;
}

.video-playlist dd:after {	
	position: absolute;
	content: '';
	width: 10px;
	height: 2px;
	top: 2.5em;
	left: 0;
	background-color: #000000;
}



/* ================================================ */
/* #post is music, reviews and features landing page */
/* ================================================ */

#post #masthead
{
	max-width: 1576px;
}

#post article {	
	max-width: 1800px;
	margin: 0 -140px 0;
}

#post .intro
{
	font-size: 1.45em;
	line-height: 167%;
	font-weight: 300;
	margin-bottom: 1em;
}

#post blockquote
{
	margin: 0 0 1em 0;
	padding-bottom: .7em;
	font-size: 1.4375em;
	font-weight: 700;
	line-height: 178%;
	color: #000000;
}

#post #hero /* container */
{
	margin: 14px 0 40px 0;
	padding: 0;
	line-height: 0;
	position: relative;
}

#hero #hero-title /* hero image */
{
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background-image: linear-gradient(rgba(120,120,120,0), rgba(0,0,0,.5));
}

#hero-title > div {	
	padding: 10% 100px 3%;
}

#post #hero-title h1
{
	/* 60pt */
	font-size: 4.5em;
	position: relative;
	line-height: 115%;
}


#post.music #hero-title h1 {width:90%;}

#post.music #hero-title h2 {width:74%;}

#post.music #hero-title h1
{
	font: 400 6.75em/75% "Libre Caslon Display", serif;
}

#post.music #hero-title h2
{
	font: italic 400 2.125em/106% "Libre Caslon Text", serif;
}

/* default hero h1 color is white */
#post #hero h1,
#post #hero h2 {
	color: #FFFFFF;
	margin: 0 0 .4em;
	width: 65%;
	font-weight: 700;
}



.video-link {
	font: italic 200 13px/120% 'public-sans', sans-serif;
	color: #000000;
	opacity: 0.75;
	}

.video-link a {color: #000000;}		
	
.video-link a:hover {color: opacity: 0.5;}		

/* article pages - byline flush left no image. NOTE: this is id, not class. */
#byline 
{
	position: relative;
	margin: 0 0 4.75em;
	padding-bottom: 24px;
	font-size: .875em;
	line-height: 150%;
	font-weight: 300;
	color: #333333;
	font-family: 'Public Sans', Arial, sans-serif;
	letter-spacing: .1em;
	overflow: hidden;
	border-bottom: 1px solid #E1E1E1;
	min-height: 3em; /* creates vertical height if no thumbnail */
}

#byline span {
	color: #1F9A0C; /* default byline color is green */
	margin-right: 1.5em;
} 

#byline img {
	border-radius: 100%;
	margin: 0 !important;
	float: left;
}

#byline div {
	position: absolute;
	top: 6px;
}

#byline img + div {left: 70px;} /* indent byline text if there's a thumbnail */

#byline span::after
{
	content: '';
	position: absolute;
	top: .75em;
	margin-left: .75em;
	width: 2px;
	height: 2px;
	background-color: #000000;
	border-radius: 100%;
}


/* .byline *class* only - on landing pages, centered and no image */
.byline {
	font: 200 .75em/100% 'Public Sans', Arial, sans-serif;
	text-align: center;
	display: block;
	text-transform: uppercase;
	letter-spacing: 5%;
	position: relative;
	color: #1F9A0C; /* default byline color is green */
	margin-bottom: 5.5em;
}

.byline:after {
	content: '';
	position: absolute;
	width: 6em;
	height: 3px;
	bottom: -2.75em;
	background-color: #000000;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(0%);
	-moz-transform: translateX(-50%) translateY(0%);
	transform: translateX(-50%) translateY(0%);
}

/* *** custom colors *** */

/* custom byline colors */
.aqua #byline span {color: #5FBBEB !important;}
.blue #byline span {color: #257DDE !important;}
.green #byline span {color: #21A50C !important;}
.magenta #byline span {color: #DA21FF !important;}
.orange #byline span {color: #F9931A !important;}
.yellow #byline span {color: #FFC401 !important;}
.red #byline span {color: #FC510E !important;}


/* custom hero title colors */
#post.aqua #hero-title h1 span,
#post.aqua #hero-title h2 { color: #5FBBEB !important;}

#post.green #hero-title h1 span,
#post.green #hero-title h2 { color: #69D005 !important;} /* lime green */

#post.magenta #hero-title h1 span,
#post.magenta #hero-title h2 { color: #DD37FE !important;}

#post.orange #hero-title h1 span,
#post.orange #hero-title h2 { color: #F9931A !important;}

#post.yellow #hero-title h1 span,
#post.yellow #hero-title h2 { color: #FFC401 !important;}

#post.red #hero-title h1 span,
#post.red #hero-title h2 { color: #FFFFFF;} /* yeah, red is white */

/* custom closing title colors */
#post h2.closing {color: #21A50C;} /* default is green */

#post.aqua h2.closing {color: #5FBBEB;}
#post.blue h2.closing {color: #257DDE;}
#post.magenta h2.closing {color: #DD37FE;}
#post.orange h2.closing {color: #F9931A;}
#post.yellow h2.closing {color: #FFC401;}
#post.red h2.closing {color: #FC510E;}
#post.red .video-playlist h2,
#post.red .video-playlist p.closing {color: #FC510E;}

/* *** end custom colors *** */



/* regular, non-hero titles */
#post h1,
#post h2 {
	position: relative;
	color: #000000;
}

#hero span.category
{
	position: relative;
	font: 400 1em/100% 'Public Sans', Arial, sans-serif;
	letter-spacing: .05em;
	margin: 0 0 1em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: left;
}

#post h2.lg {
	font-size: 1.75em;
	margin: 0 0 1em;
	line-height: 125%;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-style: normal;
	font-weight: 300;
}

#post h2.lg:after {
	width: 0;
	height:0;
	background-color: none;
}

#post h2 {
	font-size: 1.25em;
	font-style: italic;
	margin: 2em 0;
	line-height: 125%;
}

#post h2:after {
	position: absolute;
	content: '';
	width: 15px;
	height: 3px;
	bottom: -1em;
	left: 0;
	background-color: #000000;
}

#post #hero h2:after {
	width: 0;
	height: 0;
}

#post .content
{
	margin: 0 180px 0;
}

#post .content img { 
	margin: 1em 0 .5em; 
}

#post #main-col {
	max-width: 65%;
	padding: 0 8% 2em 0;
	margin-bottom: 3em;
	float: left;
	border-right: 1px solid #E1E1E1;
}

#post .sidebar {
	padding-right: 0;
	margin: 0 0 3em;
}

#post #main-col li {
	list-style-type: none;
	position: relative;
	margin: 0 0 1em 1em;
}

#post #main-col li:before {
    content: "";
    position: absolute;
    top: .75em;
    left: -1em;
    width: .4em; 
    height: .4em; 
    background-color: #FF6719;
	border-radius: 100%;
}

#post .sidebar div {margin-bottom: 3em;}

#post .sidebar .icon {
	margin: 1em 0 0;
}

#post .sidebar p {
/*	font-size: 2.125em; */
	font-size: 1em;
}

#post .sidebar div.align-left {
	text-align: left;	
}

#post .sidebar div.align-left img {
	margin: 2em 0 1.5em;
}

#post .sidebar .big {
	font-size: 1.9em;
	line-height: 110%;	
	display: inline-block;
	letter-spacing: 0;
}

#post .sidebar .mid {
	font-size: 1.25em; 
	display: inline-block;
	padding-bottom: .5em;
	letter-spacing: 0;
}

#post .sidebar .small {
	font-size: .5em;
	font-style: italic;
	display: inline-block;
	padding-bottom: .5em;
}

#post .sidebar div {
	border-bottom: 1px dashed #979797;
	padding-bottom: 2em;
}

#post.yellow .sidebar .color {color: #FFC401 !important;}

#post .sidebar h3 {
	padding: 3em 0 .75em 0;
	margin: 2.5em auto; 
	border-bottom: 1px dashed #E1E1E1;
	font: 200 .8em/120% 'Public Sans', Arial, sans-serif;
	text-transform: uppercase; 
	width: 70%;
}

#post .sidebar h3:before {width:0; height:0;}

#post .sidebar h3#goto {
	border:none; 
	color: #057AFB; /* blue */
	margin-top: 1em;
}

#post .sidebar h3#goto a {
	color: #057AFB;
}

#post.music .sidebar h3#goto {
	border:none; 
	color: #DA21FF; /* magenta */
	margin-top: 1em;
}

#post.music .sidebar h3#goto a {
	color: #DA21FF;
}

#post .sidebar div:first-child h3,
#post .sidebar h3:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

#post .sidebar img {
	margin: 0 auto 2em; 
	display: block;
}


#post .sidebar .list {
	text-align: left; 
	border: none;
}

#post .sidebar .list h2 {
	font-size: 1.1em;
	color: #218BFF;
}
#post .sidebar .list h2:after {
	width: 0;
	height: 0;
	bottom: 0;
}

#post .sidebar .list dt a {
	color: #000000;
	text-transform: uppercase;
	font-size: .9em;
	letter-spacing: .1em;
}

#post .sidebar .list dd {
	font-style: italic;
	text-transform: none;
}

#post .sidebar .list dd a {color: #000000;}

#post .sidebar #latest {
	text-align: left;
/*	margin: 1.5em 0 0; */
	padding: 0 0 1.5em;
}

#post .sidebar #latest h3,
#post .sidebar #latest .category {
	color: #057AFB;
	text-transform: none;
}

#post .sidebar #latest .category {
	font-size: .75em;
	font-family: 'Merriweather', Times, serif; 
	font-style: italic;
	text-align: left;
	margin: 2em 0 1em;
}

#post .sidebar #latest h3 {
	width: 100%;
	margin: 0;
	padding: 0;
	font: 400 1em/1.625em 'Merriweather', Times, serif; 
	border: none;
}

/* related thumbnails */

#related
{
	position: relative;
	clear: both;
	border-top: 1px solid #E1E1E1;
	padding-top: 25px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

#related a {color: #000000;}

#related h3 { 
	font-size: 1.0625em; 
	font-weight: 700;
	margin: 1em 0 0;
}

#related h3:before {
	width: 0;
	height:0;
}

#related h3 + span
{
	position: absolute;
	right: 0;
	top: 32px;
	font-size: .8125em;
	font-weight: 200;
	font-family: 'Public Sans', Arial, sans-serif;
}

.related
{
	display: flex;
	flex-wrap: wrap;          /* allow items to wrap if needed */
	gap: 9%;
	justify-content: flex-start;
	align-items: stretch;  /* ensure children fill the container height */ 
	margin: 54px 180px 0;
}

#related div#header {
	position: relative;
	margin: 0 180px 0;
}

#related div#header span {
	top: 0;
}

/* each column takes roughly 25% of the row (four columns) */
.related .thumb {
    flex: 1 1 calc(25% - 9%);   /* grow, shrink, base width, 25% of parent element */
    display: flex;
    flex-direction: column;
}

.related a div {					/* img wrapper */
    flex: 0 0 200px;               /* <-- set the height you want */
    overflow: hidden;              /* hide any cropped part */
}

.related .thumb img {
    width: 100%;                  /* fill column width */
    height: 100%;                 /* fill column height */
    object-fit: cover;            /* crop if necessary, keep aspect ratio */
    display: block;               /* remove inline element whitespace */
}

.related a div + div {				/* caption below img */
    flex: 0 0 80px;                /* <-- set the height */
    padding: 0.5rem 0;
    overflow: hidden;              /* hide overflow if text is too long */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;         /* show at most this number of lines */
    -webkit-box-orient: vertical;
    line-height: 130%;
}

.related .thumb span
{
	color: #B5B5B5;
	display: block;
	text-transform: uppercase;
	letter-spacing: .15em;
	margin: 1.5em 0 1.5em;
	font-family: 'Public Sans', Arial, sans-serif;
	font-size: .625em;
}



/* General stuff like privacy, about, etc. ============================= */
#general header { margin-bottom: 8px; }

#general main
{
	background-color: #FFFEF6;
	border-top: 1px solid #E1E1E1;
}

#general article { padding: 50px 386px 0 130px; }

#general h1
{
	font: 400 3.65em/100% 'Merriweather', Times, serif;
	margin-bottom: .22em;
}

#general h1 span
{
	font-size: .22em;
	line-height: 120%;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #B5B5B5;
	display: block;
	margin-bottom: 1.5em;
	font-family: 'Public Sans', Arial, sans-serif;
}

#general h2
{
	font-weight: 700;
	margin: 2em 0 .35em 0;
	font-size: 1.5em; 
	line-height: 165%;
	font-style: italic;
	font-weight: 300;
}

#general h3
{
	font-size: 1.25em;
	color: #FC7A43;
	margin: 2em 0 1.4em;
	font-weight: 400;
}

#general h2,
#general h3 { position: relative; }

#general h3:after
{
	content: '';
	position: absolute;
	width: .5em;
	height: 2px;
	left: 0;
	bottom: -0.35em;
	background-color: #FC7A43;
}

#general h3.contact
{
	margin-top: 8em;
	padding-top: 1.5em;
	border-top: 1px solid #E1E1E1;
}

#general h3.contact:after { top: 3.5em; }

#general h4
{
	font-weight: 400;
	margin: 1.5em 0 0;
	font-size: 1em;
}

#general h5
{
	padding: .45em 0 .45em;
	line-height: 125%;
	font-size: .9em;
	font-weight: 300;
	display: table-cell;
	position: relative;
}

#general h5:after
{
	content: '';
	height: 1px;
	width: 100%;
	background-color: black;
	position: absolute;
	left: 0;
	bottom: .35em;
}

#general main p, 
#general main ol, 
#general main dl
{
	margin: 0 0 1.75em;
	font-size: 1em;
	font-weight: 300;
	position: relative;
}

#general article ul {
	margin: 0 0 2em 0.75em;
	font-weight: 300;
	list-style-type: none;
}

#general article li {position: relative;}

#general article ul li:before {
	content: '';
	position: absolute;
	background-color: #000000;
	height: .20em;
	width: .20em;
	border-radius: 100%;
	left: -.75em;
	top: .9em;
}

#general .date + p {margin-top: 7em;}

#general .tick:before {
	content: '';
	position: absolute;
	width: .5em;
	height: 2px;
	left: 0;
	top: -1em;
	background-color: #FC7A43;
}

dt {font-weight: bold; margin: 2em 0 0;}
dd {font-weight: 300; margin: 0;}


/* narrow styles (sub of #general - has narrower body article width) ============= */
 
.narrow article {max-width: 1000px;}

.narrow h3,
.narrow article a, 
.narrow article ol li
 {color: #FC7A43;}

.narrow .date {	
	font: 300 .736em/1.25em 'Public Sans', Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
}

#general.narrow.privacy h3 {margin-top: 5em;}

#general.narrow.terminology h3 {font-size: 1em;}


/* news & events styles ++++++++++++++ */

#news_events article {
	width: 84.88%;
	float: left;
}

#news_events .content
{
	max-width: 1290px;
	padding: 0;
	border-right: 1px solid #D8D8D8;
}

#news_events h1
{
	font-size: 2.65em;
	font-weight: 400;
	margin: 0 1em .6em 0;
	padding-bottom: .75em;
}

#news_events h1 span
{
	font-size: .22em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #B5B5B5;
	display: block;
	margin-bottom: .5em;
	font-family: 'Public Sans', Arial, sans-serif;
}

#news_events h1:after {	
	content: '';
	position: absolute;
	height: 2.5px;
	width: 55px;
	background-color: #000000;
	left: 0;
	bottom: 0;
}	
	
#news_events h2
{
	font-size: 1.4em;
	font-weight: 300;
	line-height: 167%;
	padding-bottom: 1em;
	margin: 0 1em 1.5em 0;
}

#news_events .box h3 {
	font-size: 1.5em;
}

#news_events .box h3
{
	position: relative;
	margin: 1em 0 1.5em;
	font-style: italic;
	font-weight: 400;
}
#news_events .box h3:after {
	content: '';
	position: absolute;
	height: 2px;
	width: 45px;
	background-color: #000000;
	left: 0;
	bottom: -0.65em;
}

#news_events .box h3 span
{
	font-size: .6em;
	font-family: 'Public Sans', Arial, sans-serif;
	font-weight: 200;
	letter-spacing: .1em;
	color: #9B9B9B;
	display: block;
	font-style: normal;
	padding-bottom: .5em;
}

#news_events .box
{
	font-size: .9em;
	font-weight: 300;
	line-height: 180%;
	width: 50%;
	max-width: 580px;
	float: left;
	margin-right: 5%;
}

#news_events .box dl {
	font-size: .85em;
	margin-top: 1.5em;
}
#news_events .box dt {
	font-weight: 400;
	font-style: italic;
	float: left; 
	clear: left;
	margin: 0 1em 0 0;
}

#news_events .box dd {
	margin: 0 0 0 6em;
}

#news_events .box dt::after,
#post.music .sidebar .list dt::after {
    content: ":";
}
 
#post.music .sidebar .list {
	font-size: .8125em;
	line-height: 130%;
}

#post.music .sidebar .list dt {
	font-weight: 400;
	font-style: italic;
	margin: 0;
	float: left;
}

#post.music .sidebar .list dl {
	margin: 4em 0 2em;
	text-align: left;
}
	
#post.music .sidebar .list dd {
	margin: 0 0 1em 5em;
}

#news_events .sidebar
{
	padding: 0;
	margin: 0 0 0 1.57%;
/*	margin: 0 0 0 24px; */
	width: 13.55%;
	max-width: 230px;
	font-size: .875em;
	line-height: 140%;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: .05em;
	text-align: left;
	float: right;
	padding-bottom: .5em;
	position: relative;
	float: right;
}

#news_events .sidebar h3
{
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .065em;
	border: 0;
	padding: 0 0 .75em;
	margin: 2.5em 0 .75em;
	border-bottom: 1px solid #DDDDDD;
}

#news_events .sidebar h3 span {
	font-size: .625em;
	text-transform: uppercase;
}

#news_events .sidebar h3:first-child {
	margin-top: 0;
}

#news_events .event-label {
	font-size: .9125em;
	text-transform: uppercase;
	margin-top: 0;
}

#news_events .sidebar dl {
	padding: .5em 0;
	border-bottom: 1px solid #E1E1E1;
}	

#news_events .sidebar dl .date
{
	font-size: .65em;
	font-weight: 500;
	line-height: 132%;
	text-transform: uppercase;
	letter-spacing: .15em;
	margin: 1em 0 2.2em;
	display: block;
}

#news_events .sidebar p + a {
	font-size: .5625em;
	font-weight:500;
	color: #000000;
	text-transform: uppercase;
	margin-bottom: 6em;
	display: block;
}

#news_events .sidebar dt { font-weight: 500; }

#news_events .sidebar dd
{
	padding: 0;
	margin: 0;
}

#news_events .wrapper { 
	margin-bottom: 50px; 
	display: flex;
}

#news_events .wrapper:after
{
	content: '';
	visibility: hidden;
	height: 0;
	clear: both;
}

#news_events strong { font-style: italic; }

#news_events .more
{
	font-family: 'Public Sans', Arial, sans-serif;
	font-size: .85em;
	font-weight: 200;
	color: #F0546A;
	position: relative;
	display: inline-block;
	margin-top: 2em;
	letter-spacing: .05em;
}

#news_events .more:after
{
	content: '';
	background-image: url(../img/arrow-events.png);
	background-size: cover;
	position: absolute;
	width: 15px;
	height: 10px;
	top: .7em;
	right: -2em;
}

#news_events article li
{
	list-style-type: none;
	font-size: .85em;
	padding: 0;
	margin: 0;
}

/* archive page styles ++++++++++++++ */
#archives article {
	width: auto;
	overflow: hidden;
	background-color: #FDF5FF;
	margin: 0 -140px 0;
	padding: 140px;
}

#archives #title {margin: 0; border: none;}

#archives .content {
	max-width: 1520px;
	padding: 0;
}
#archives #features,
#archives #music { width: 47%; }

#archives #music a {color: #DA21FF;}

#archives .box,
#archives h1
{
	border-bottom: 1px solid #b2b2b2;
	width: 100%;
	margin-bottom: 1em;
}

#archives #features
{
	float: left;
	padding-right: 3%;
}

#archives #music
{
	padding-left: 3%;
	float: right;
}

#archives #features .category,
#archives #features h2 { color: #057AFB; }

#archives #music .category,
#archives #music h2 { color: #DE3CFF; }

#archives .category,
#archives .byline
{
	text-align: left;
	font: 300 1em/100% 'Merriweather', Times, serif;
	font-style: italic;
	letter-spacing: .1em;
	text-transform: none;
	margin: 0 0 .8em;
}

#archives .byline {
	color: #6B6868;
}

#archives .byline:after {
	content:'';
	width: 0;
	height: 0;
	background-color: transparent;
}

#archives h1
{
	font-size: 1.5em;
	font-weight: 300;
	margin: 0;
	padding: 0 0 .8em;
	letter-spacing: .05em;
}

#archives h2
{
	font-size: 1.45em;
	font-weight: 300;
	line-height: 136%;
	margin: 0;
}

#archives p {	
	font-size: 1.2em;
	margin: .8em 0 .8em;
}

#archives .box
{
	padding: 4% 0 2%;
	letter-spacing: .05em;
}

#archives .box div {
	margin-left: 180px;
	float: left;
}

#archives .box img {
	float: left;
	position: relative;
	margin-left: -180px;
}

#archives .box h3
{
	position: relative;
	margin: 1em 0 1.5em;
	font-size: 1.5em;
	font-style: italic;
	font-weight: 400;
}

#archives .box h3 span
{
	font-size: .6em;
	font-family: 'Public Sans', Arial, sans-serif;
	font-weight: 200;
	letter-spacing: .1em;
	color: #9B9B9B;
	display: block;
	font-style: normal;
	padding-bottom: .5em;
}

#archives #features .box
{
	font-size: .9em;
	font-weight: 300;
	line-height: 180%;
/*	max-width: 580px; */
	float: left;
}

#archives #music .box
{
	font-size: .9em;
	font-weight: 300;
	line-height: 180%;
	float: left;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* responsivefulness styles ++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


@media screen and (max-width: 1520px)
{
	
	#post #hero-title h1 {font-size: 3.5em;}
	
	#post.music #hero-title h1 { font-size: 4.5em; }

	#post.music #hero-title h2 { font-size: 1.75em; }
}

/* iPad */
 @media screen and (max-width: 1366px)
{
	#post #hero-title h1 {font-size: 3em;}
}


@media screen and (max-width: 1280px)
{
	header
	{
		margin: 0 40px 0;
		padding: 28px 0 0;
	}

	#title { padding: 26px 0; }
	
	#post.caslon #hero h1 {	
	font: 400 5.6em/75% "Libre Caslon Display", Times, serif !important;
	}

	#content,
	#landing #content { margin: 0 40px;}
	
	#home-nav { margin: 0; } 
	
	#menu ul { margin: 93px 90px 90px 160px; }
	
	footer { 
		margin-left: -40px;
		margin-right: -40px;
	}

	footer div:first-child {margin: 0 40px;}

	#home #main-content {width: 100%;}

	#home .hero { display: block;}

	/* clip home hero and shift up */
	#home .hero-image {
		width: 100%;
		max-width: 1285px;
		max-height: 800px;
		clip-path: inset(50px 0 0);
		margin-top: -50px;
		line-height: 0;
	}

	#home p {margin: 0;}
	
	/* bleed hero and blue box */
	#home article,
	#post article {margin: 0 -40px 0;}
	
	#home .sidebar {
		max-width: none;
		width: auto;
		flex-direction: row;
	}

	#home .sidebar .thumb {flex-basis: 50%;}

	#home article { margin: 0; }
	
	#home article .intro {
	/*	width: auto; */
		max-width: none;
		margin-top: 3em;
	}

	#hero-title > div {padding: 10% 20px 3%;}
	
	#post .content{margin: 24px 20px 0;}

	#post h1 { font-size: 4em; }

	#post.music #main-col h1 {font-size: 3.5em;}

	#preview {
		width: 100%;
		clear: both;
	}
	
	#general article { padding: 50px; }
	
	#contact section > div {margin: 0 10vh;}

	#related div#header { margin: 0 40px 0; }

	.related { 
		margin: 54px 20px 0; 
		gap: 5%;
	}
	
	#archives article { margin: 0 -40px; }
		
	#archives #features,
	#archives #music { width: 100%; }
	
	#archives #music h1 { margin-top: 2em; }
	
	#archives #features { padding-right: 0; }
}

@media screen and (max-width: 1024px)
{
	#home blockquote { margin: 3.5em 3.5em 0; }
	
	/* adjust home hero clipping and vertical shift */
	#home .hero-image {
		max-height: 600px;
		clip-path: inset(0);
		margin-top: 0;
	}

	#news_events article { width: 100%; }

	#news_events .sidebar {
		width: 100%;
		max-width: none;
		margin: 0;
		padding-top: 2em;
		border-top: 1px dashed #E1E1E1;
	}

	#news_events .content {
		width: 100%;
		border: none;
	}
	
	#news_events .box {
		margin: 0;
		width: 100%;
		max-width: 688px;
	}	
		
	#news_events .box:first-child {margin-right: 5%;}
	
	#news_events .box img {width: 100%;}
	
	#post #main-col {
		max-width: 100%;
		border: none;
		padding-right: 0;
		margin-bottom: 0;
	}

	#post #hero h1,
	#post #hero h2 {width: 75%;}
	
	#post h1,
	#post #hero-title h1 { font-size: 2em; }
	
	#post.music #hero-title h1 { font-size: 3em; }

	#post.music #hero-title h2 { font-size: 1.5em; }
	
	#post.caslon h2.caslon {	
		font: 400 2.5em/100% "Libre Caslon Display", Times, serif !important;
	}

	#post .sidebar {
		float: none;
		max-width: 100%;
		width: 100%;
		padding: 1em 0 20px;
		border-width: 1px 0 1px;
		clear: both;
	}
		
	/* the arrow */
	#home #teaser #col1 img {
		width: 10vw; 
		margin-top: 1em;
	}
	
	.related .thumb { font-size: 1em; }
	
	#about section div { width: 85%;}
	
	#about section div p {font-size: .7em; line-height: 150%;}
}
	
@media screen and (max-width: 768px)
{
	#logo { width: 150px; }

	#logo object { width: 150px; height: 48.17px;}
	
	#title { 
		padding: 16px 0 12px; 
		font-size: 1.25em;
	}
	
	#main-col
	{
		width: 100%;
		max-width: none;
		padding: 0;
		border: none;
	}

	#post #hero {margin: 14px 0 0;}
	
	#hero #hero-title
	{
		position: relative;
		padding: 0;
		background-image: none;
	}
	 
	#hero-title .wrapper {padding: 5% 20px 3%;}
	 
	#hero span.category {color: #000000;}

	#home h1 {font-size: 1.75em;}

	#home article {margin: 0 -40px 0;}
	
	#home p {
		font-size: 1em; 
		margin: 1.5em 20px 0;
	}
	
	#home .sidebar { 
		flex-direction: column; 
		margin-left: 20px;
		margin-right: 20px;
	}

	#home .sidebar .thumb h2 {
		margin-top: 0;
	}
		
	#home .sidebar .thumb p,
	#home .sidebar .thumb h2 {
		margin-left: 25%;
	}
	
	#home .sidebar img {
		width: 20%;
		float: left;
	}
	
	#home #teaser #col1 a + span a {font: italic 300 11px/120% 'public-sans', sans-serif;}

	#post #hero h1,
	#post #hero h2 {
		width: 90%;
	}
	
	#post.caslon #hero h1 {	
		font: 400 2.6em/80% "Libre Caslon Display", Times, serif !important;
	}
	
	#post.caslon #hero h1,
	#post.red #hero-title h1 span {	color: #000000;}
	
	#post #hero h2,
	#post.music #hero h2 {
		font-size: 1em;
	}
	
	#post #hero h1, 
	#post #hero h2 {color: #000000 !important;}
	
	#contact section > div {margin: 0 5vw;}

	#contact h2 {width: 100%;}
	
	#contact fieldset > div { width: 100%; margin: 0 0 40px;}
	
	#news_events .wrapper {display: block;}
	
	#news_events .wrapper dl {margin-bottom: 6em;}
	
	#news_events .box h3 {margin-top: .5em;}

	#news_events .more {margin: 1em 0 4em;}
		
	#general article { padding: 20px; }
	
	#general article table th,
	#general article table td {
		display: block; 
	}
	
	colgroup.col1,
	colgroup.col2,
	colgroup.col3 {width: 100%;}
	
	tr:first-child {display: none;}

	tr td {padding: .5em !important;}

	tr td:first-child {font-weight: 700;}
	
	tr td:first-child:before {
		content: 'Category';
		position: relative;
		display: block;
		color: #FC7A43;
		border-bottom: 1px solid #FC7A43;
		margin-bottom: 1em;
		font-weight: 300;
	}
	
	tr td:first-child + td:before {
		content: 'Examples';
		position: relative;
		display: block;
		color: #FC7A43;
		border-bottom: 1px solid #FC7A43;
		margin-bottom: 1em;
	}
	
	tr td:first-child + td + td:before {
		content: 'Collected';
		position: relative;
		display: block;
		color: #FC7A43;
		border-bottom: 1px solid #FC7A43;
		margin-bottom: 1em;
	}
		
	.related {
        /* switch to a two column layout */
        justify-content: space-between;   /* optional Ð spreads the two columns */
        row-gap: 3em;
	 }
	
	.related .thumb {
        /* each item now occupies ~48% (two columns) */
        flex: 1 1 calc(50% - 9%);   /* 50% width minus the gap */
    }

	#archives .box div {margin-left: 0;}
	
	#archives .box img {margin: 0 2em 1em 0;}
	
	#archives h2 {clear: both;}
	
	#archives article {
		margin: 0 -40px 0;
		padding: 40px;
	}

	#signupform {max-width: 340px;}

	#signupform input {width: 180px;}
	
	#post .sidebar > div:last-child {margin-bottom: 0;}

	#post .content img {margin-top: 2em;}
	
	#teaser {margin: 0 20px;}
}
	

@media screen and (max-width: 600px)
{
	header {
		margin: 0 20px 0;
		padding: 20px 0 0;
	}
	
	header .social { display: none; }

	#home-nav { display: none;}
	
	#menu ul { margin: 93px 90px 90px 140px; }


	footer { margin: 80px -20px 0; }
	
	#general footer, 
	#contact footer { margin: 80px 0 0; }
	
	#general h1 {
		font-size: 2em;
		margin-top: 25px;
	}
	
	#general h3 {margin: 2.5em 0 1.5em;}
	
	#general h2 + h3 {margin: 5em 0 1.5em;}
	
	footer div:first-child { margin: 0 20px; }
	
	#home article,
	#post article
	{
		margin: 0 -20px 0;
	}
	
	#content,
	#news_events #content { margin: 0 20px; }
	
/* mini preview thumb styles */		
	#preview {	
		border: solid #E1E1E1;
		border-width: 1px 0 0;
		margin: 2em 0 0;
	}

	#preview img { border: none; }

	.thumb_container { 
		flex-direction: column; 
		padding: 1.5em 0 0;
	}

	.thumb_container .thumb
	{
		border: none;
		padding: 0;
		margin:  1em 0  0;
		max-width: none;
	}
	
	.thumb_container .thumb img { 
		width: 20%; 
		float: left;
		margin: .5em 0 0;
	}

	.thumb_container .thumb span {margin: .5em 0 0;}

	.thumb_container div { margin-left: 25%;}
	
	.thumb_container h2 {margin: 0 0 1.2em;}
	
	.thumb_container h2:after {bottom: -0.6em;}
	
/* end mini preview thumb styles */

		
	#contact fieldset #message {margin-top: 40px;}

	#general h3.contact {margin-top: 4em;}	
}

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

	#post #hero h1 {font-size: 1.5em;}
	
	#post #hero h2 {font-size: .8em;}
}
/* end responsivefullness */


/* special use styles */
.nobreak {white-space: nowrap;}
/*
.hide { display: none; }
*/
#hidden { display: none !important; } /* for spazz field on contact form */

.small {font-size: 65%;}

.small.ital {font-style: italic;}

.separator {
	margin: 0 auto 0;
	width: 25%;
	border-bottom: 1px dashed #FFFFFF;
	padding-bottom: .5em;
}

.white {color: #FFFFFF;}