@charset "UTF-8";

/* 	(see 'README2.txt' for a detailed description) */

/* used on all pages */

/* all-text masthead, to better allow for language flex (later) - LMP */
	.Masthead {
		float: right;
		height: 5rem; /* allow room for 'naviconlabel' - LMP */
		line-height: 0.5;
		margin-top: 0.375rem;
		text-align: right;
		width: 100%;
	}

/* text vs. image used for location flexibility (later) - LMP */
	.MastheadText { /* 'ROLLING THUNDER MEDIA' */
		color: #ff2400;
		font-size: 2.5rem;
		font-weight: 900;
		word-spacing: -0.125em;
		}
	.MastheadSubtext { /* 'San Francisco' */
		color: #f4f0ec;
		font-size: 2rem;
		line-height: 1.25;
		word-spacing: -0.25em;
	}
	@media screen and (max-width: 720px) {
		.MastheadText {
			font-size: 2rem;
			line-height: 0.625;
		}
		.MastheadSubtext {
			font-size: 1.125rem;
		}
	}
	@media screen and (max-width: 540px) {
		.MastheadText {
			font-size: 1.5rem;
			line-height: 0.75;
		}
		.MastheadSubtext {
			font-size: 1rem;
		}
	}
/* delete the masthead text entirely on very small screens - LMP */
	@media screen and (max-width: 320px) {
		.MastheadText {
			display: none !important;
		}
		.MastheadSubtext {
			display: none !important;
		}
	}

/* '#MainMenu' & anchor icons - room for a maximum of *7* icons on 375px wide screens - LMP */
	.icon.navicon {
		display: block;
		font-size: 1.5rem;
		height: 6rem;
	}
	@media screen and (max-width: 720px) {
		.icon.navicon {
			font-size: 1.25rem;
			height: 5.5rem;
		}
	}
	@media screen and (max-width: 480px) {
		.icon.navicon {
			font-size: 1rem;
			height: 5rem;
		}
	}

/* label below navigation icons */
	.naviconlabel {
		display: none;
		font-family: Poppins,
			"Helvetica Neue Light", HelveticaNeue-Light, HelveticaNeueLight,
			"Helvetica Light", Helvetica-Light, HelveticaLight,
			"Helvetica Neue", HelveticaNeue,
			Helvetica,
			sans-serif; /* probably Ariel, can't be helped - LMP */
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 0.75rem;
		margin: 0.25rem 0 0 -0.375rem; /* revised for Font Awesome 7 - LMP */
		overflow: visible; /* making sure - LMP */
		position: absolute;
		text-align: center;
		width: 250%; /* revised for Font Awesome 7 - LMP */
	}

/* 'Back To Top' icon (label at top) */
	.upicon {
		margin: 0 2.25rem -100% 0; /* revised for Font Awesome 7 - LMP */
	}
	.uplabel {
		margin-top: -6rem;
	}
	@media screen and (max-width: 720px) {
		.naviconlabel {
			font-size: 0.5rem;
			line-height: 0.5rem;
		}
		.uplabel {
			margin-top: -5rem;
		}
	}
	.navicon:hover .naviconlabel {
		color: #ff2400; /* just in case - LMP */
		display: block;
	}
/* always show the labels if hover isn't possible - see 'https://jacobpadilla.com/articles/hover-media-query' - LMP */
	@media (hover: none) {
		.naviconlabel {
			display: block;
		}
	}

/* ease up the 'back' icon to mirror the main menu (in place of 'reveal') - LMP */
	.BackEaseUp {
		animation: EaseUp 5s ease;
	}
	@keyframes EaseUp {
		0% { transform: translateY(12rem); }
		25% { transform: translateY(12rem); }
		75% { transform: translateY(0); }
		100% { transform: translateY(0); }
	}

/* for the website banner inside footers - LMP */
	.FooterBanner {
		color: #ff2400;
		font-weight: 900; /* 'ROLLING THUNDER MEDIA' */
		word-spacing: -0.0625em;
	}
/* for the social media icons, page title, copyright notice, HTML5-UP link, etc. - LMP */
	.FooterInfo {
		color: #f4f0ec;
		text-align: center;
	}
		.FooterInfo a {
			color: #f4f0ec;
		}
			.FooterInfo a:hover {
				color: #ff2400;
			}

/* label below footer icons - LMP */
	.iconlabel {
		color: #ff2400;
		display: none;
		font-family: Poppins,
			"Helvetica Neue Light", HelveticaNeue-Light, HelveticaNeueLight,
			"Helvetica Light", Helvetica-Light, HelveticaLight,
			"Helvetica Neue", HelveticaNeue,
			Helvetica,
			sans-serif; /* probably Ariel, can't be helped - LMP */
		font-size: 0.75rem;
		font-weight: 200;
		line-height: 0.75rem;
		position: absolute;
		margin: 0.25rem 0 0 -0.75rem; /* revised for Font Awesome 7 - LMP */
		width: 250%; /* revised for Font Awesome 7 - LMP */
	}
	@media screen and (max-width: 720px) {
		.iconlabel {
			font-size: 0.625rem;
			line-height: 0.625rem;
		}
	}
	/* display the label on hover - LMP */
		.icon:hover .iconlabel {
			display: block;
		}
/* turn off the labels if hover isn't possible - see 'https://jacobpadilla.com/articles/hover-media-query' - LMP */
	@media (hover: none) {
		.iconlabel {
			display: none;
		}
	}

/* used on 'index.html' only */

/* fade in the front page menu (replace 'reveal.js' to work around a timing issue with Safari video initial-load)
	(could fade-in opacity to match, but this is more fun) - LMP */
	.MenuFadeIn {
		animation: EaseDown 5s ease;
	}
		@keyframes EaseDown {
			0% { transform: translateY(-12rem); }
			25% { transform: translateY(-12rem); }
			75% { transform: translateY(0); }
			100% { transform: translateY(0); }
		}

/* replace 'class=reveal' for items visible on initial load - LMP  */
	.FrontPageFadeIn {
		animation: FrontPageFade 2s;
	}
		@keyframes FrontPageFade {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}

	.FrontPageReel {
		width: 100%;
			max-width: 3840px; /* scale down, never up - LMP */
		user-select: none; /* Safari tweak per 'blog.otterlord.dev/posts/safari-video/' - LMP */
	}

	.VideoContainer {
		margin: 0 auto;
		width: 100%;
	}

/* scrolling text over an image or video */
/* code modified from 'https://blog.hubspot.com/website/scrolling-text-css#how-to-create-scrolling-text-css' */
	.ScrollBox {
		position: absolute;
			top: 0;
			left: 0;
		height: 50%;
		width: 100%;
		margin-top: 7rem;
		overflow: hidden;
		z-index: 90;
	}
	@media screen and (max-width: 1920px) and (orientation: landscape) {
		.ScrollBox {
			height: 70%;
		}
	}
	@media screen and (orientation: portrait) {
		.ScrollBox {
			margin-top: 5.25rem;
			height: 70%;
		}
	}
	.ScrollText {
		text-align: center;
		transform: translateY(-5rem); /* text position if animation isn't supported, and where it returns if the looping ever ends - LMP */
		animation: title-scroll 40s linear infinite; /* assume a 40s reel */
	/*	animation: title-scroll 20s linear infinite; */ /* assume a 20s reel */
	}
/* timing for 2 x 3 lines of text over 40s RTM's reel - LMP */
	@keyframes title-scroll {
		from {
			transform: translateY(360%);
		}
		to {
			transform: translateY(-240%);
		}
	}
/* timing for 2 x 3 lines of text over a 20s 'title only' video or a static background - LMP */
/*	@keyframes title-scroll {
		from {
			transform: translateY(240%);
		}
		to {
			transform: translateY(-120%);
		}
	} */
	.ScrollingHead { /* 'ROLLING THUNDER MEDIA' */
		color: #ff2400;
		font-size: 3.5rem;
		font-weight: 900;
		line-height: 1;
		text-shadow: 1.5px 1.5px 1.5px rgba(16, 12, 8, 0.3333);
		word-spacing: -0.0625em;
	}
	.ScrollingText {
		color: #f4f0ec;
		font-size: 2rem;
		font-weight: 200;
		line-height: 1;
		margin-bottom: 1.5rem;
		text-shadow: 1px 1px 1px rgba(16, 12, 8, 0.3333);
	}
	@media screen and (max-width: 720px) {
		.ScrollingHead {
			font-size: 2.5rem;
		}
		.ScrollingText {
			font-size: 1.5rem;
		}
	}
	@media screen and (max-width: 480px) {
		.ScrollingHead {
			font-size: 2rem;
		}
		.ScrollingText {
			font-size: 1.25rem;
		}
	}

	@media screen and (max-width: 360px) {
		.ScrollingHead {
			font-size: 1.75rem;
		}
		.ScrollingText {
			font-size: 1rem;
		}
	}

/* style of the warning text if video isn't supported (front page only!) -
	fade in & out around rolling text */
	.NoVideoReel {
		aspect-ratio: 16 / 9;
		font-size: 1.25rem;
		font-style: italic;
		opacity: 0;
		padding: 6rem 2rem 0 2rem;
		text-align: center;
		animation: NoVideoFade 40s ease infinite;
	}
		@keyframes NoVideoFade {
			0% { opacity: 0; }
			6.25% { opacity: 1; }
			25% { opacity: 1; }
			31.25% { opacity: 0; }
			100% { opacity: 0; }
		}

/* only show rotate video in 'portrait' mode (used throughout) - LMP */
	.RotateYourPhone {
		display: none;
	}
	@media screen and (orientation: portrait) {
		.RotateYourPhone {
			display: block;
			width: 50%;
			height: 50%;
			opacity: 33.3333%;
			margin-top: 18rem;
			margin-right: auto;
			margin-left: auto;
		}
	}

	.SingleStory {
		margin: 0 25%;
	}
	@media screen and (orientation: portrait) {
		.SingleStory {
			margin: 0 10%;
		}
	}

	.BottomMenu {
		font-size: 1.5rem;
		font-weight: 500;
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}

/* used on 'terms and conditions' and 'privacy policy' pages only */

	.tos {
		margin: 0 25%;
	}
	@media screen and (orientation: portrait) {
		.tos {
			margin: 0 10%;
		}
	}

	.tosindex {
		font-size: 1.25rem;
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	.toshead {
		margin: 2rem 0 1rem 0;
	}

	.toslist {
		margin: -1rem 2rem 0 2rem;
	}

/* can be used anywhere */

/* text transforms */
	.SmallCaps		{font-variant-caps: small-caps;}
	.AllSmallCaps	{font-variant-caps: all-small-caps;}
	.PetiteCaps	{font-variant-caps: petite-caps;}
	.AllPetiteCaps	{font-variant-caps: all-petite-caps;}
	.UnicaseCaps	{font-variant-caps: unicase;}
	.TitlingCaps	{font-variant-caps: titling-caps;}

	.AllCaps		{text-transform: uppercase;}
	.UpperCase		{text-transform: uppercase;}
	.LowerCase		{text-transform: lowercase;}
	.Capitalize		{text-transform: capitalize;}

	.Bold			{font-weight: 500;}
	.Italic			{font-style: italic;}

/* so search engines can see a syntactically-correct heading at the top of various places,
	even though it doesn't render - LMP */
	.HideDisplay {
		display: none;
	}

/* generic centering, used when an element can't be tagged 'align-center'
	(such as inside 'img' and 'video' tags) - LMP */
	.display-flex {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		margin: 0 auto;
	}

	.caption {
		font-size: 75%;
		font-style: italic;
		text-align: center;
	}

/* just a little break */
	.spacer_p {
		margin: -0.5rem 0;
	}

/* used everywhere *except* on the front page */
	.NoVideo {
		font-size: 1.25rem;
		padding: 2rem;
		text-align: center;
	}

	.FullScreenImage {
		width: 100%;
	}

/* icons inside an '.items' class */
	.icon.itemsicon {
		display: block;
		font-size: 2.25rem;
		height: 6rem;
		margin-top: 1.5rem;
		margin-bottom: 0.5rem;
	}
	.icon.itemsicon:before {
		box-shadow: inset 0 0 0 1px #f4f0ec;
	}
		a .icon.itemsicon:hover {
			color: #ff2400;
		}
		a .icon.itemsicon:hover:before {
			box-shadow: inset 0 0 0 1px #ff2400;
		}
	@media screen and (max-width: 720px) {
		.icon.itemsicon {
			font-size: 2rem;
			height: 5.5rem;
			margin-bottom: 0.25rem;
		}
	}
	@media screen and (max-width: 480px) {
		.icon.itemsicon {
			font-size: 1.5rem;
			height: 5rem;
			margin-bottom: 0;
		}
	}

/* used in the executive pages & as needed */
	.tight_section {
		margin: 0 10rem;
	}
	@media screen and (max-width: 1680px) {
		.tight_section {
			margin: 0 8rem;
		}
	}
	@media screen and (max-width: 1280px) {
		.tight_section {
			margin: 0 6rem;
		}
	}
	@media screen and (max-width: 980px) {
		.tight_section {
			margin: 0 4rem;
		}
	}
	@media screen and (max-width: 720px) {
		.tight_section {
			margin: 0 2rem;
		}
	}
	@media screen and (max-width: 480px) {
		.tight_section {
			margin: 0 1rem;
		}
	}

/* used in the series description pages & as needed */
	.tight_division {
		margin: 0 24rem;
	}
	@media screen and (max-width: 2080px) {
		.tight_division {
			margin: 0 20rem;
		}
	}
	@media screen and (max-width: 1680px) {
		.tight_division {
			margin: 0 16rem;
		}
	}
	@media screen and (max-width: 1280px) {
		.tight_division {
			margin: 0 12rem;
		}
	}
	@media screen and (max-width: 980px) {
		.tight_division {
			margin: 0 6rem;
		}
	}
	@media screen and (max-width: 720px) {
		.tight_division {
			margin: 0 2rem;
		}
	}
	@media screen and (max-width: 480px) {
		.tight_division {
			margin: 0 1rem;
		}
	}

/* generic 'article' styles */

	.logo {
		margin-bottom: -1.5rem;
		margin-left: -2.75rem;
		width: 100%;
	}
/* don't display the logo in portrait mode (save screen real estate) */
	@media screen and (orientation: portrait) {
		.logo {
			display: none;
		}
	}
/*	@media screen and (orientation: landscape) and (max-width: 2560px) {
		.logo {
			margin-left: -2.75rem;
		}
	} never used - LMP */
	@media screen and (orientation: landscape) and (max-width: 2240px) {
		.logo {
			margin-left: -2.25rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1920px) {
		.logo {
			margin-left: -1.75rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1680px) {
		.logo {
			margin-left: -2.25rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1280px) {
		.logo {
			margin-left: -2rem;
		}
	}

	.logo_plus {
		margin-left: -2.75rem;
		width: 100%;
	}
/* don't display the logo in portrait mode (save screen real estate) */
	@media screen and (orientation: portrait) {
		.logo_plus {
			display: none;
		}
	}
/*	@media screen and (orientation: landscape) and (max-width: 2560px) {
		.logo_plus {
			margin-left: -2.75rem;
		}
	} never used - LMP */
	@media screen and (orientation: landscape) and (max-width: 2240px) {
		.logo_plus {
			margin-left: -2.25rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1920px) {
		.logo_plus {
			margin-left: -1.75rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1680px) {
		.logo_plus {
			margin-left: -2.25rem;
		}
	}
	@media screen and (orientation: landscape) and (max-width: 1280px) {
		.logo_plus {
			margin-left: -2rem;
		}
	}

/* horizontal text menu (similar to ul.items in 'main.css', but text-only)
	only used in 'StillImages.html' for the list of available galleries - LMP */
	ul.h-list {
		cursor: default;
		list-style: none;
		margin-top: -1.5rem;
		padding-left: 0;
		font-size: 1.25rem;
	}
		ul.h-list li {
			display: inline-block;
			padding: 0;
		}
			ul.h-list li:last-child {
				padding-right: 0;
			}
	ul.h-list li:before {
	  content: " • ";
	}
		ul.h-list li:first-child:before {
		  content: "";
		}

/* photo gallery styles */

/* 'gallery' - a liquid layout grid of photos to replace the Gallery - LMP */
	/* 12-wide, the maximum */
	.gallery {
		width: 2235px; /* why is this 12 x 186.25px? - LMP */
		margin: 0 auto;
		text-align: center;
	}

	/* 8-wide */
	@media screen and (max-width: 2235px) {
		.gallery {
			width: 1488px; /* 8 x 186px */
		}
	}
	/* 6-wide */
	@media screen and (max-width: 1488px) {
		.gallery {
			width: 1116px; /* 6 x 186px */
		}
	}
	/* 4-wide */
	@media screen and (max-width: 1116px) {
		.gallery {
			width: 744px; /* 4 x 186px */
		}
	}
	/* 2-wide */
	@media screen and (max-width: 744px) {
		.gallery {
			width: 372px; /* 2 x 186px */
		}
	}
	/* 2-wide, smaller images for cell phones */
		@media screen and (max-width: 372px) {
			.gallery {
				width: 252px; /* 2 x 126px */
			}
				.gallery img {
					width: 120px;
				}
		}
	.thumbnail {
		width: 180px;
	}
	.thumbbig {
		width: 360px;
	}
	@media screen and (orientation: portrait) {
		.thumbbig {
			width: 180px;
		}
	}

/* styles for the video pages */

	.TrailerVideo {
		display: block;
		margin: 0 auto;
		width: 75%;
			max-width: 3840px; /* scale video down, never up - LMP */
	}

/* '.videoposter' class (used for both '<img>' and '<video>' -poster elements,
	taken from '.image' class above, coordinate *all* values!) - LMP */
	.videoposter {
		display: inline-block;
		overflow: hidden;
		position: relative;
		width: 50%;
		min-width: 360px;
	}
		.videoposter img {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			margin: 16rem auto 0 auto;
		}
			.videoposter.horiz img {
				margin-top: 12rem;
				width: 75%;
			}
			@media screen and (orientation: portrait) {
				.videoposter.horiz img {
					margin-top: 2rem;
					margin-left: 2rem;
					width: 87.5%;
				}
			}
				@media screen and (orientation: portrait) and (max-width: 360px) {
					.videoposter.horiz img {
						margin-top: 0;
						margin-left: 0;
						width: 87.5%;
					}
				}

			.videoposter.vert img {
				margin-top: 4rem;
				width: 50%;
			}
			@media screen and (orientation: portrait) {
				.videoposter.vert img {
					margin-top: 2rem;
					margin-left: 2rem;
					width: 87.5%;
				}
			}
				@media screen and (orientation: portrait) and (max-width: 360px) {
					.videoposter.vert img {
						margin-top: 0;
						margin-left: 0;
						width: 87.5%;
					}
				}

	/* keep identical to the above so 'poster='s in '<video>'s will be interchangeable with '<img>'s - LMP */
		.videoposter video {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			margin: 16rem auto 0 auto;
		}
			.videoposter.horiz video {
				margin-top: 12rem;
				width: 75%;
			}
			@media screen and (orientation: portrait) {
				.videoposter.horiz video {
					margin-top: 2rem;
					margin-left: 2rem;
					width: 87.5%;
				}
			}
				@media screen and (orientation: portrait) and (max-width: 360px) {
					.videoposter.horiz video {
						margin-top: 0;
						margin-left: 0;
						width: 87.5%;
					}
				}
			.videoposter.vert video {
				margin-top: 4rem;
				width: 50%;
			}
			@media screen and (orientation: portrait) {
				.videoposter.vert video {
					margin-top: 2rem;
					margin-left: 2rem;
					width: 87.5%;
				}
			}
				@media screen and (orientation: portrait) and (max-width: 360px) {
					.videoposter.vert video {
						margin-top: 0;
						margin-left: 0;
						width: 87.5%;
					}
				}

/* used for notes, credits, etc. below the poster image in short & series pages - LMP */
	.video_notes {
	/*	max-height: 20rem; */ /* arbitrary - LMP */
		margin: 0 4rem 0 2.75rem; /* 2.75rem = 'shim' for lists */
	/*	overflow: auto; */ /* add scroll bars rather than overflow or hide */
	}
	@media screen and (max-width: 1280px) {
		.video_notes {
			font-size: 87.5%;
			margin: 0 2rem 0 1.5rem;
		}
	}
	@media screen and (max-width: 980px) {
		.video_notes {
			font-size: 75%;
			margin: 0;
		}
	}
	@media screen and (orientation: portrait) and (max-width: 720px) {
		.video_notes {
			display: none;
		}
	}

/* episode lists can also be indicies into the individual episode pages
	(.EpisodeDisc/.EpisodeImg currently used instead) - LMP */
	.episode_list_1 ul li {
		padding-left: 3.5rem;
		text-indent: -3.375rem; /* 'S01Exx' lined up by eye, will vary by font anyway - LMP */
		list-style-type: none;
	}
		.episode_list_1 ul li a:hover {
			color: #ff2400;
		}
		.episode_list_1 ul li a:hover strong {
			color: #ff2400;
		}
	.episode_list_2 ul li {
		padding-left: 3.5rem;
		text-indent: -3.625rem; /* 'S02Exx' lined up by eye, will vary by font anyway - LMP */
		list-style-type: none;
	}
		.episode_list_2 ul li a:hover {
			color: #ff2400;
		}
		.episode_list_2 ul li a:hover strong {
			color: #ff2400;
		}
	.episode_list_3 ul li {
		padding-left: 3.5rem;
		text-indent: -3.75rem; /* 'S03Exx' lined up by eye, will vary by font anyway - LMP */
		list-style-type: none;
	}
		.episode_list_3 ul li a:hover {
			color: #ff2400;
		}
		.episode_list_3 ul li a:hover strong {
			color: #ff2400;
		}

/*  list of episodes with thumbnails - use within a 'spotlight' div -
	(it acts like an index/TOC into each season) - LMP */
	.EpisodeDesc {
		margin: 0 0 0 1rem;
	}
	@media screen and (max-width: 720px) {
		.EpisodeDesc {
			margin: 0;
		}
	}
	.EpisodeImg {
		margin: 0.25rem 0 0 0;
		width: 240px;
	}
	@media screen and (max-width: 720px) {
		.EpisodeImg {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			margin: 1rem auto 0 auto;
		}
	}
	@media screen and (max-width: 360px) {
		.EpisodeImg {
			display: none;
		}
	}

/* lists with leaders (TOC-style) from 'https://www.w3.org/Style/Examples/007/leaders.en.html'
	used for credits and similar - LMP */
	ul.leaders {
		line-height: 1.25;
		list-style: none;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}
		ul.leaders li:before {
			float: left;
			white-space: nowrap;
			width: 0;
			content:
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . "
				". . . . . . . . . . . . . . . . . . . . ";
			}
	ul.leaders span:first-child {
		background-color: #100c08;
	}
		ul.leaders span + span {
			float: right;
			background-color: #100c08;
		}

/* lists to match 'ul.leaders' in layout, but without the leader - LMP */
	ul.noleaders {
		line-height: 1.25;
		list-style: none;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}
		ul.noleaders li:before {
			float: left;
			white-space: nowrap;
			width: 0;
			content:
				"                                        "
				"                                        "
				"                                        "
				"                                        "
				"                                        "
				"                                        "
				"                                        "
				"                                        "
				"                                        ";
			}
	ul.noleaders span:first-child {
		padding-right: 0.3333rem;
	}
		ul.noleaders span + span {
			float: right;
			padding-left: 0.3333rem;
		}

	.treatment {
		font-family: Courier, "Courier New", monospace;
		line-height: 0.875rem;
		margin-bottom: 0.875rem;
	}

/* 'floating action button's from 'https://datatas.com/how-to-create-a-floating-action-button-with-css/' - LMP */
	.fab-topleft {
		position: fixed;
			top: 0;
			left: 0;
		z-index: 999;
	}
	.fab-topright {
		position: fixed;
			top: 0;
			right: 0;
		z-index: 999;
	}
	.fab-bottomleft {
		position: fixed;
			bottom: 0;
			left: 0;
		z-index: 999;
	}
	.fab-bottomright {
		position: fixed;
			bottom: 0;
			right: 0;
		z-index: 999;
	}

/* 'reveal' css / javascript animation (taken from 'https://alvarotrigo.com/blog/css-animations-scroll/') - LMP
	remember - add a 'noscript' fallback ('.reveal {opacity: 1;}') to all pages where this is used - LMP */
	.reveal {
		opacity: 0;
		transition: 2.5s all ease;
	}
		.reveal.active {
			opacity: 1;
		}