@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local(''), url('../fonts/lato-v17-latin-300.woff2') format('woff2'), url('../fonts/lato-v17-latin-300.woff') format('woff'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), url('../fonts/lato-v17-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local(''), url('../fonts/lato-v17-latin-700.woff2') format('woff2'), url('../fonts/lato-v17-latin-700.woff') format('woff'); }
@font-face { font-family: 'Bellefair'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/bellefair-v6-latin-regular.woff2') format('woff2'), url('../fonts/bellefair-v6-latin-regular.woff') format('woff'); }

body { margin: 0; font-family: 'Lato', Arial, Geneva, sans-serif; font-weight: 300; background: black; color: #FFF2E5; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { body { font-size: 21px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { body { font-size: 18px; } }
body.light { background: white; }

h1 { margin: 0 0 24px; font-family: 'Lato', Arial, Geneva, sans-serif; font-style: normal; font-weight: normal; }
h2 { margin: 30px 0 24px; font-family: 'Lato', Arial, Geneva, sans-serif; font-style: normal; font-weight: normal; }
h3 { margin: 24px 0 24px; font-family: 'Lato', Arial, Geneva, sans-serif; font-style: normal; font-weight: normal; }
p { margin: 0 0 18px; line-height: 135%; }
p.last { margin-bottom: 6px; }

@media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */
{
   h1, .fontsizeh1 { font-size: 42px; }
   h2, .fontsizeh2 { font-size: 33px; }
   h3, .fontsizeh3 { font-size: 27px; }
}
@media all and (max-aspect-ratio: 1/1)  /* portrait */
{
   h1, .fontsizeh1 { font-size: 30px; }
   h2, .fontsizeh2 { font-size: 24px; }
   h3, .fontsizeh3 { font-size: 19.5px; }
}

a  { text-decoration: none; color: #FFA54C; }
.blue a { color: #A0A0FF; }
a:hover { text-decoration: none; color: #FF8000; }
.blue a:hover { color: #D0D0FF; }

input[type="text"], input[type="email"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border: solid 2px white; border-radius: 48px; font-family: 'Lato', Arial, Geneva, sans-serif; font-weight: 400; font-style: normal; background: #FFF2E5; color: black; }
input[type="text"].invalid, input[type="email"].invalid { border-color: #0080FF; }

textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border: solid 2px white; font-family: 'Lato', Arial, Geneva, sans-serif; font-weight: 400; font-style: normal; background: #FFF2E5; color: black; }
textarea.invalid { border-color: #0080FF; }

@media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */
{
	input[type="text"], input[type="email"] { padding: 2.5px 10px /* padding for consistency, otherwise it's 1px for Firefox but 0px for Chrome */; font-size: 16.5px; }
	textarea { border-radius: 9px; padding: 2.5px 10px /* padding for consistency, otherwise it's 1px for Firefox but 0px for Chrome */; font-size: 16.5px; }
}
@media all and (max-aspect-ratio: 1/1)  /* portrait */
{
	input[type="text"], input[type="email"] { padding: 2px 8px /* padding for consistency, otherwise it's 1px for Firefox but 0px for Chrome */; font-size: 13.75px; }
	textarea { border-radius: 7.5px; padding: 2px 8px /* padding for consistency, otherwise it's 1px for Firefox but 0px for Chrome */; font-size: 13.75px; }
}

::-webkit-input-placeholder /* Edge */ { opacity: 0.65; color: black; }
:-ms-input-placeholder /* Internet Explorer 10-11 */ { opacity: 0.65; color: black; }
::placeholder { opacity: 0.65; color: black; }

button, a.button { border: none; border-radius: 48px; font-family: 'Lato', Arial, Geneva, sans-serif; font-weight: 400; font-style: normal; white-space: nowrap; background: #E07000; color: #FFE0C0; cursor: pointer; }
button:hover, a.button:hover { background: #FF8000; color: white; }

@media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */
{
	button, a.button { padding: 4.5px 15px; font-size: 16.5px; }
	button.tiny, a.button.tiny { padding: 2.25px 9px; font-size: 13.5px; }
	button.small, a.button.small { padding: 3px 12px; font-size: 15px; }
	button.large, a.button.large { padding: 6px 18px; font-size: 18px; }
}
@media all and (max-aspect-ratio: 1/1)  /* portrait */
{
	button, a.button { padding: 3.75px 12.5px; font-size: 13.75px; }
	button.tiny, a.button.tiny { padding: 1.875px 7.5px; font-size: 11.25px; }
	button.small, a.button.small { padding: 2.5px 10px; font-size: 12.5px; }
	button.large, a.button.large { padding: 5px 15px; font-size: 15px; }
}

.blue button, .blue a.button { background: #0000B2; color: #E5E5FF; }
.blue button:hover, .blue a.button:hover { background: #0000FF; color: white; }
.blue button.notselected { background: #000040; color: #CCCCFF; }
.blue button.notselected:hover { background: #000080; color: #E5E5FF; }
.blue button.selected { background: #0000FF; color: white; }

input:focus, select:focus, textarea:focus, button:focus { outline: none; }

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
.cell.number { padding-right: 6px; text-align: right; }
	@media all and (max-width: 600px) { .cell.number { padding-right: 0.5vw; } }
	@media all and (max-width: 500px) { .cell.number { padding-right: 2.5px; } }
.cell.title { padding-bottom: 12px; border-bottom: solid 1px white;}
	@media all and (max-width: 600px) { .cell.title { padding-bottom: 2vw; } }
	@media all and (max-width: 500px) { .cell.title { padding-bottom: 10px; } }
.cell.toprow { padding-top: 21px; }
	@media all and (max-width: 600px) { .cell.toprow { padding-top: 3.5vw; } }
	@media all and (max-width: 500px) { .cell.toprow { padding-top: 17.5px; } }
.cell.total { border-top: solid 1px white; padding-top: 18px; }
	@media all and (max-width: 600px) { .cell.total { padding-top: 3vw; } }
	@media all and (max-width: 500px) { .cell.total { padding-top: 15px; } }
.cell.right { text-align: right; padding-right: 18px; }
	@media all and (max-width: 600px) { .cell.right { padding-right: 3vw; } }
	@media all and (max-width: 500px) { .cell.right { padding-right: 15px; } }

.mt0 { margin-top: 0; }
.mt12 { margin-top: 12px; }
.mb0 { margin-bottom: 0; }
.mb3 { margin-bottom: 3px; }
.mb6 { margin-bottom: 6px; }
.mb9 { margin-bottom: 9px; }
.mb12 { margin-bottom: 12px; }
.mb18 { margin-bottom: 18px; }
.mb24 { margin-bottom: 24px; }
	@media all and (max-width: 600px)
	{
		.mt12 { margin-top: 2vw; }
		.mb3 { margin-bottom: 0.5vw; }
		.mb6 { margin-bottom: 1vw; }
		.mb9 { margin-bottom: 1.5vw; }
		.mb12 { margin-bottom: 2vw; }
		.mb18 { margin-bottom: 3vw; }
		.mb24 { margin-bottom: 4vw; }
	}
	@media all and (max-width: 500px)
	{
		.mt12 { margin-top: 10px; }
		.mb3 { margin-bottom: 2.5px; }
		.mb6 { margin-bottom: 5px; }
		.mb9 { margin-bottom: 7.5px; }
		.mb12 { margin-bottom: 10px; }
		.mb18  { margin-bottom: 15px; }
		.mb24 { margin-bottom: 20px; }
	}

.lower1 { position: relative; top: 1px; }
.raise3 { position: relative; top: -3px; }

.small { font-size: 80%; }
.smaller { font-size: 90%; }
.larger { font-size: 115%; }
.large { font-size: 125%; }
.vlarge { font-size: 135%; }
.vvlarge { font-size: 150%; }

.inline { display: inline-block; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.italic { font-style: italic; }
.bold { font-weight: 400; }
.underline { text-decoration: underline; }
.serif { font-family: 'Bellefair', serif; }
.upper { text-transform: uppercase; }

#content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#scrollable { position: absolute; top: 0; left: 0; right: 0; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
/* must match common.js twTransition */
.overview #scrollable { bottom: 0; }
.catalog  #scrollable { bottom: min(66px, 12vw); }
.article  #scrollable { bottom: 0; }
/* end */
#scrollable.fullheight { bottom: 0; }
#scrollable::-webkit-scrollbar { display: none; }

#logo #logoweb { stroke: #E07000; fill: black; }
.previewbulletlogoweb { stroke: #E07000; fill: black; }
.preview:hover .previewbulletlogoweb { stroke: #FF8000; fill: #251200; }
.quotelogoweb { stroke: #FF8000; fill: #251200; }
body.light .quotelogoweb { fill: #5E2F00; }
.bulletlogoweb { stroke: #E07000; fill: black; }

.logotext { text-anchor: middle; text-transform: uppercase; font-family: 'Lato-Bold', 'Lato', sans-serif; font-weight: 700; }
.logotitle { font-size: 13.25px; }
.logomedium { font-size: 9px; }
.logosolid { fill: #FFE0C0; stroke: none; }
.logoshadow { fill: none; stroke: #804000; stroke-width: 0.375px; stroke-opacity: 0.25; }
.logourl { text-anchor: middle; font-size: 13.5px; font-family: 'Lato-Bold', 'Lato', sans-serif; font-weight: 700; }

/* must match common.js twTransition */
.overview               #logo { height: 60vh; }
.overview.postsubscribe #logo { height: 50vh; }
.catalog                #logo { height: 30vh; cursor: pointer; }
.article                #logo { height: 30vh; cursor: pointer; }
/* end */

/* must match common.js ltTransition */
#tagline { margin: max(-2.4vh, -4vw) 0 2.4vh; font-size: min(3vh, 5vw); text-align: center; font-weight: 400; color: #FFC080; }  /* 4 = 2.4 / 3 * 5 to follow font-size */
/* end */
.catalog #tagline { display: none; }

#redirect { margin: max(-1.2vh, -2vw) 0 1.8vh; font-size: min(2.4vh, 2.7vw); text-align: center; font-weight: 400; color: white; }  /* 4 = 2.4 / 3 * 5 to follow font-size */
#redirectinner { display: inline-block; border-radius: 12px; padding: 0.375vh 1.5vh 0.75vh; background: #4040FF; }

.breakifnarrow { display: none; }
/* must match common.js twTransition */
.subscribe { height: 45px; font-size: 75%; font-weight: 400; text-align: center; }
	@media all and (max-width: 500px)
	{
		.subscribe { position: relative; top: -1vw; font-size: min(75%, 3.25vw); }
		.subscribe .breakifnarrow { display: block; }
	}
/* end */
.overview #subscribe1 { display: none; height: 0; }
.catalog:not(.newsletter) #subscribe1 { display: none; height: 0; }

.capture { text-align: center; margin-bottom: 3px; }
.capture .capturespacer { height: 0.75vh; }
.capture .capturefields { display: inline-block; vertical-align: top; text-align: left; }
.capture .ce { text-align: center; font-weight: bold; color: #0080FF; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .capture .ce { font-size: 13.5px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .capture .ce { font-size: 12px; } }
input[type="text"].cui { height: 0; border: none; padding: 0; background: transparent; color: transparent; cursor: default; }
input[type="text"].cui::-webkit-input-placeholder /* Edge */  { opacity: 0; color: transparent; }
input[type="text"].cui:-ms-input-placeholder /* Internet Explorer 10-11 */  { opacity: 0; color: transparent; }
input[type="text"].cui::placeholder { opacity: 0; color: transparent; }

.capture .outcome { display: none; margin-bottom: 24px; }
	@media all and (max-width: 600px) { .capture .outcome { margin-bottom: 4vw; } }
	@media all and (max-width: 500px) { .capture .outcome { margin-bottom: 20px; } }
.capture .outcome.narrow { margin: 0 240px; }
.capture .outcome p { line-height: inherit; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .capture .disclosure { margin-top: 12px; font-size: 12px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .capture .disclosure { margin-top: 10.5px; font-size: 10.5px; } }
.capture .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; background: #000000; }
.capture .cf input[type="email"] { width: min(300px, 45vw); }
.capture .cf input[type="text"] { width: min(300px, 45vw); }
.capture .cf textarea { width: calc(min(300px, 45vw) - 2px); }

.catalog:not(.newsletter) #subscribecapture1 { display: none; }

.spinnerouter { display: none; }
.spinner { width: 24px; height: 24px; border: 4px solid #FF800040; border-top: 4px solid #FF8000; border-radius: 50%; vertical-align: middle; animation: spin 1.5s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#messagecontent { max-width: 660px; margin: 12px auto 36px; text-align: center; }
.messagebold { font-size: 115%; font-weight: 400; }

/* must match common.js twTransition */
.box { display: inline-block; border: solid 2px #FF8000; background: #1A0D00; color: white; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .box { margin: 0 12px 12px; border-radius: 12px; padding: 12px 18px 15px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .box { margin: 0 9px 9px; border-radius: 9px; padding: 10px 15px 12.5px; } }
.box.blue { border-color: #0000FF; background: #00001A; }
.box.flushbottom { padding-bottom: 0; }
/* end */
.box .box { background: #341A00; }
.box input[type="text"], input[type="email"], input[type="password"] { background: #FFF2E5; color: #1A0D00; }
.box textarea { background: #FFF2E5; color: #1A0D00; }
.box select { background: #FFF2E5; color: #1A0D00; }
.box ::-webkit-input-placeholder /* Edge */  { color: #1A0D00; }
.box :-ms-input-placeholder /* Internet Explorer 10-11 */  { color: #1A0D00; }
.box ::placeholder { color: #1A0D00; }

/* must match common.js ltTransition */
.overview #subscribecapture1box { margin: 0 1.25vh 1.25vh; padding: 2vh 3vh 0; }
/* end */

#mediumcontent { max-width: 660px; margin: 6px auto 24px; padding: 0 15px; }

.sectiontitle { margin: 18px 0; font-size: 116.667%; font-weight: 700; text-align: center; text-transform: uppercase; color: #FF8000; }

.subscribepodcast { display: none; margin-bottom: 30px; }
.podcast .subscribepodcast { display: block; }
.subscribechannel { display: none; margin-bottom: 30px; }
.channel .subscribechannel { display: block; }
.subscribepodcastchannel { margin: 0 0 6px; font-weight: 700; text-transform: uppercase; }
.orange .subscribepodcastchannel { color: #FFE0C0; }
.blue .subscribepodcastchannel { color: #C0C0FF; }
.subscribeinstructions { font-size: 75%; font-weight: 400; }
.subscribepodcastbuttons { margin: 9px 0 6px; line-height: 135%; }
.subscribechannelbutton { margin: 9px 0 0; }
.subscribeservicelogo { height: 42px; }
	@media all and (max-width: 600px) { .subscribeservicelogo { height: 7vw; } }
	@media all and (max-width: 500px) { .subscribeservicelogo { height: 35px; } }

.preview { position: relative; border: solid 2px black; border-radius: 12px; cursor: pointer; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .preview { min-height: 90px; margin: -9px 0 18px; padding: 9px 9px 9px 99px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .preview { min-height: 60px; margin: -6px 0 12px; padding: 6px 6px 6px 69px; } }
.preview:hover { border-color: #FF8000; background: #1A0D00; }
.previewbullet { position: absolute; top: 0; left: 0; display: table; z-index: 1; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .previewbullet { width: 90px; height: 90px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .previewbullet { width: 60px; height: 60px; } }
.previewbulleticon { position: absolute; top: 0; left: 0; z-index: -1; }
.previewbullettext { display: table-cell; vertical-align: middle; text-align: center; font-weight: 700; color: #FFE0C0; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { .previewbullettext { font-size: 30px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { .previewbullettext { font-size: 20px; } }
.previewdate { margin-bottom: 0; text-transform: uppercase; font-size: 60%; font-weight: 400; color: #FF8000; }
.previewtitle { margin-bottom: 3px; font-size: 116.667%; font-weight: 400; }
.previewnewsletter { display: none; }
.newsletter .previewnewsletter { display: block; }
.previewpodcast { display: none; }
.podcast .previewpodcast { display: block; }
.previewchannel { display: none; }
.channel .previewchannel { display: block; }
.previewlinks { font-weight: 400; }
.previewsummary { margin-bottom: 4.5px; font-size: 75%; font-weight: 300; }
.previewbonus { margin: 15px 0 1.5px; text-transform: uppercase; font-size: 60%; font-weight: 400; color: #FF8000; }
.previewbonustitle { margin-bottom: 3px; font-weight: 400; }
.previewbonuslinks { font-size: 75%; }

#othermedialinks { margin-bottom: 18px; font-size: 60%; font-weight: 400; text-align: center; text-transform: uppercase; }

.inlinebutton { display: inline-block; vertical-align: top; position: relative; top: 1px; width: 24px; height: 24px; }
	@media all and (max-width: 600px) { .inlinebutton { width: 4vw; height: 4vw; } }
	@media all and (max-width: 500px) { .inlinebutton { width: 20px; height: 20px; } }
.inlinebutton svg { fill: none; stroke: white; stroke-width: 1.5px; stroke-linecap: round; }
.inlinebutton svg:hover { stroke: #FF8000; }

.episodenumber { margin-bottom: 9px; font-weight: 400; text-align: center; text-transform: uppercase; }
	@media all and (max-width: 600px) { .episodenumber { margin-bottom: 1.5vw; } }
	@media all and (max-width: 500px) { .episodenumber { margin-bottom: 7.5px; } }
.episodedate { margin-bottom: 9px; font-size: 75%; font-weight: 400; text-align: center; text-transform: uppercase; color: #FFBF80; }
	@media all and (max-width: 600px) { .episodedate { margin-bottom: 1.5vw; } }
	@media all and (max-width: 500px) { .episodedate { margin-bottom: 7.5px; } }
.episodetitle { margin-bottom: 15px; font-size: 175%; font-weight: 400; text-align: center; }
	@media all and (max-width: 600px) { .episodetitle { margin-bottom: 2.5vw; } }
	@media all and (max-width: 500px) { .episodetitle { margin-bottom: 12.5px; } }
.episodeguest { display: table; position: relative; height: 120px; margin: -6px auto 18px; }
	@media all and (max-width: 600px) { .episodeguest { height: 20vw; margin: -1vw auto 3vw; } }
	@media all and (max-width: 500px) { .episodeguest { height: 100px; margin: -5px auto 15px; } }
.episodeguestheadshot { position: absolute; top: 0; left: 0; width: 120px; height: 120px; }
	@media all and (max-width: 600px) { .episodeguestheadshot { width: 20vw; height: 20vw; } }
	@media all and (max-width: 500px) { .episodeguestheadshot { width: 100px; height: 100px; } }
.episodeguestbiography { display: table-cell; padding-left: 138px; padding-bottom: 6px; vertical-align: middle; text-align: left; font-weight: 400; }
	@media all and (max-width: 600px) { .episodeguestbiography { padding-left: 23vw; padding-bottom: 1vw; } }
	@media all and (max-width: 500px) { .episodeguestbiography { padding-left: 115px; padding-bottom: 5px; } }
.episodeguestwith { font-size: 60%; font-style: italic; }
.episodeguestname { font-size: 135%; }
.episodeguesttitle { font-weight: 300; }
.episodesection { margin: 30px 0 18px; font-size: 116.667%; font-weight: 700; text-align: center; text-transform: uppercase; color: #FF8000; }
	@media all and (max-width: 600px) { .episodesection { margin: 5vw 0 3vw; } }
	@media all and (max-width: 500px) { .episodesection { margin: 25px 0 15px; } }
.episodenewsletter { margin-bottom: 18px; } 
	@media all and (max-width: 600px) { .episodenewsletter { margin-bottom: 3vw; } }
	@media all and (max-width: 500px) { .episodenewsletter { margin-bottom: 15px; } }
.episodenotes { margin-bottom: 36px; }
	@media all and (max-width: 600px) { .episodenotes { margin-bottom: 6vw; } }
	@media all and (max-width: 500px) { .episodenotes { margin-bottom: 30px; } }
.episodequotes { margin: 24px 0 -12px; text-align: center; }
	@media all and (max-width: 600px) { .episodequotes { margin: 4vw 0 -2vw; } }
	@media all and (max-width: 500px) { .episodequotes { margin: 20px 0 -10px; } }

.podcastbutton { text-align: center; }

.videoouter { width: 560px; margin: 0 auto; border-radius: 12px; padding: 12px; background: #30343C; }
	@media all and (max-width: 632px) { .videoouter { width: 448px; } }
	@media all and (max-width: 520px) { .videoouter { width: 336px; } }
.videoinner { width: 560px; height: 315px; }
	@media all and (max-width: 632px) { .videoinner { width: 448px; height: 252px; } }
	@media all and (max-width: 520px) { .videoinner { width: 336px; height: 189px; } }

.quoteouter { display: inline-block; position: relative; width: min(540px, 100vw - 36px); margin: max(-24px, -4.44444vw + 1.6px) 0 0; padding-top: min(540px, 100vw - 36px); }
.quoteinner { position: absolute; top: min(30px, 5.55555vw - 2px); bottom: min(30px, 5.55555vw - 2px); left: min(30px, 5.55555vw - 2px); right: min(30px, 5.55555vw - 2px); border: solid 2px #FF8000; border-radius: min(18px, 3.33333vw - 1.2px); background: radial-gradient(#180C00, #301800); }
body.light .quoteinner { background: radial-gradient(#804000, #402000); }
.quoteupper { display: table; position: absolute; top: 0; height: min(360px, 66.66666vw - 24px); left: 0; right: 0; padding: 0 min(24px, 4.44444vw - 1.6px); }
.quoteupper.guest { height: min(351px, 65vw - 23.4px); }
.quotetext { display: table-cell; position: relative; vertical-align: middle; font-size: min(48px, 8.88888vw - 3.2px); font-family: 'Bellefair', serif; color: white; }
.quotetext.smaller { font-size: min(42px, 7.77777vw - 2.8px); }
.quotetext.small { font-size: min(36px, 6.66666vw - 2.4px); }
.quotetext.smallest { font-size: min(30px, 5.55555vw - 2px); }
.quotelower { position: absolute; bottom: 0; left: 0; width: 100%; height: min(120px, 22.22222vw - 8px); }
.quotelower.guest { height: min(129px, 23.88888vw - 8.6px); }
.quotelower.guest .episodeguest { display: inline-table; margin: 0; }
.quotelower.guest .episodeguestbiography { padding-left: min(135px, 25vw - 9px); }
.quotelower.guest .episodeguestname { font-size: 150%; font-family: 'Bellefair', serif; }
.quotelower.guest .episodeguestpodcast { margin-top: min(9px, 1.66666vw - 0.6px); font-size: 75%; font-weight: 700; text-transform: uppercase; }
.quotelogo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.articlebuttonabove { margin-bottom: 24px; text-align: center; }
.articlebuttonbelow { margin-bottom: 36px; text-align: center; }

.browsebutton { margin: 36px 0; text-align: center; }
.newsletter .browsebutton { margin-top: 24px; }

#footer { text-align: center; font-size: 12px; font-weight: 400; color: #FFC080; }
   @media all and (min-aspect-ratio: 1000001/1000000)  /* landscape */ { #footer { margin-bottom: 24px; } }
   @media all and (max-aspect-ratio: 1/1)              /* portrait  */ { #footer { margin-bottom: 18px; } }
#footer a { color: #FFC080; }
#footer a:hover { color: #FF8000; }

#controls { position: absolute; bottom: 0; left: 0; right: 0; height: min(66px, 12vw); border-top: solid 1px #FF8000; background: #100800; z-index: 2; }

.quarterspacebelow { margin-bottom: 6px; }
	@media all and (max-width: 600px) { .quarterspacebelow { margin-bottom: 1vw; } }
	@media all and (max-width: 500px) { .quarterspacebelow { margin-bottom: 5px; } }
.halfspacebelow { margin-bottom: 12px; }
	@media all and (max-width: 600px) { .halfspacebelow { margin-bottom: 2vw; } }
	@media all and (max-width: 500px) { .halfspacebelow { margin-bottom: 10px; } }
.threequartersspacebelow { margin-bottom: 18px; }
	@media all and (max-width: 600px) { .threequartersspacebelow { margin-bottom: 3vw; } }
	@media all and (max-width: 500px) { .threequartersspacebelow { margin-bottom: 15px; } }

.mediumouter { display: table; position: absolute; bottom: 0; font-weight: 400; z-index: 3; }
/* must match common.js twTransition */
          .mediumouter                    { height: min(66px, 12vw); }
.overview .mediumouter:not(.mediumouter0) { height: 15vh; }
.overview .mediumouter0 { display: none; }
.overview .mediumouter1 { left: max(0vw,      calc(50vw - 225px)); }
.overview .mediumouter2 { left: max(33.333vw, calc(50vw -  75px)); }
.overview .mediumouter3 { left: min(66.667vw, calc(50vw +  75px)); }
          .mediumouter0 { left: max(0vw,  calc(50vw - 180px)); }
.catalog  .mediumouter1 { left: max(25vw, calc(50vw -  90px)); }
.catalog  .mediumouter2 { left:     50vw;                      }
.catalog  .mediumouter3 { left: min(75vw, calc(50vw +  90px)); }
/* end */

.mediuminner { display: table-cell; vertical-align: middle; text-align: center; text-transform: uppercase; cursor: pointer; }
/* must match common.js twTransition */
          .mediuminner                    { width: min(25vw, 90px); font-size: min(10.5px, 1.75vw, 1.4765625vh); }
.overview .mediuminner:not(.mediuminner0) { width: min(33.333vw, 150px); font-size: min(15.75px, 3.5vw, 2.21484375vh); }
/* end */
.mediuminner a { color: white; }
.mediuminner:hover a { color: #FF8000; }
.mediumouter.selected a { color: #FF8000; }

.mediumicon { display: inline-block; }
/* must match common.js twTransition */
          .mediumicon                   { width: min(36px, 6vw); height: min(36px, 6vw); margin-bottom: 6px; }
.overview .mediumicon:not(.mediumicon0) { width: min(54px, 12vw, 7.59375vh); height: min(54px, 12vw, 7.59375vh); margin-bottom: min(9px, 1.265625vh); }
/* end */
.mediumicon .fill { fill: white; }
.mediumicon .stroke { stroke: white; }
.mediuminner:hover .mediumicon .fill { fill: #FF8000; }
.mediuminner:hover .mediumicon .stroke { stroke: #FF8000; }
.mediumouter.selected .mediumicon .fill { fill: #FF8000; }
.mediumouter.selected .mediumicon .stroke { stroke: #FF8000; }

.homeouter { display: table; margin: 0 auto 18px; font-weight: 400; }
.homeinner { display: table-cell; vertical-align: middle; text-align: center; text-transform: uppercase; font-size: 21px; cursor: pointer; }
.homeinner a { color: #FFF2E5; }
.homeinner:hover a { color: #FF8000; }
.homeicon { display: inline-block; width: 72px; height: 72px; margin-bottom: 6px; }
.homeicon .stroke { stroke: white; }
.homeinner:hover .homeicon .stroke { stroke: #FF8000; }

#articlecontext { margin-bottom: 6px; font-size: 75%; font-weight: 400; text-align: center; text-transform: uppercase; color: #FFBF80; }
#articletitle { margin-bottom: 12px; text-align: center; }
#article { max-width: 660px; margin: 6px auto 36px; padding: 0 15px; }
#article.wide { max-width: 780px; }
#article.blue { color: white; }

.figure { max-height: 60vh; max-width: 100%; }