/* -------------------------------------------------------- */
/* ------------------	BEGIN CONFIG 	-------------------	*/
/* -------------------------------------------------------- */
/*
	colors:
		#000:	#000000
		#FFF:	#FFFFFF
		gray:	#CCCFCF
		dgray:	#333D3D
		orange:	#EC622B
		




*/

/* -------------------------------------------------------- */
/* ------------------	BEGIN FOR GLOBAL 	---------------	*/
/* -------------------------------------------------------- */

*{
	box-sizing:border-box;
}

body
{
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	margin: 0;
	color: #000;
	background-color: #FFF;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
h1, h2, h3, h4, h5, h6
{
	font-family: "Righteous", sans-serif;
	font-weight: 400;
	font-style: normal;
}
h2#transcription
{
	margin-bottom: 0;
	padding-bottom: 0
}
h2#transcription+p
{
	padding-top: 0;
	margin-top: 0;
}
header
{
	border-bottom: 3px solid #333D3D;
	padding: 1em;
	color: #FFF;
	background-color: #EC622B;
}
header img
{
	padding-right: 5em;
}
nav
{
	transition: .5s;
	left: -100%;
	z-index: 9998;
}
nav ul
{
	padding: 0;
	margin: 0;

}
nav ul, ul.emoji
{
	list-style-type: none;
}
nav a
{
	padding: 1em;
	display: block;
	text-decoration: none;
	background-color: #FFF;
	color: #EC622B;
}
a.button
{
	padding: 1em;
	text-decoration: none;
	color: #FFF;
	background-color: #EC622B;
}
.jl
{
	padding: 0 1em;
	border-right: 1px solid #000;
}
.jl:first-child
{
	padding-left: 0;
}
.jl:nth-child(3)
{
	border-color: transparent;
}
main
{
	flex: 1;
	padding: 1em;
}
#linksList ul
{
	list-style-type: none;
	padding-left: 0;
}
div[class^="block"]
{
	float: left;
}
img
{
	width: auto;
	height: auto;
	max-width: 100%;
}
img[src=""]
{
	border: 2px solid #000;
}
img.detailsImg
{
	float: right;
	padding: 0 0 1em 1em;
}

footer
{
	border-top: 3px solid #333D3D;
	margin-top: 1em;
	padding: 1em;
	background-color: #EC622B;
	color: #FFF;
	position: relative;
}
footer img
{
	position: absolute;
	height: 9.375em;
	width: 9.375em;
	right: 1em;
	top: -4.6875em;
}
.socialIcons
{
	transition: .25s;
	float: left;
	width: 2em;
	margin: 1em;
	fill: #FFF;
}
.iframeCtr
{
	margin: 1em 0;
	padding: 2em 0;	
	border-bottom: 5px solid #EC622B;
}
/*
.iframeCtr div:first-child
{
	padding-right: 1em;
}
.iframeCtr div:last-child
{
	padding-left: 1em;
}
*/
.iframeCtr:last-child
{
	border-bottom-color: transparent;
}

.iframeCtr h3
{
	margin: 0;
}

.socialIcons:first-child
{
	margin-left: 0;
}
.socialIcons:hover
{
	transform: scale(1.25,1.25);
}
.block1{width: 12.5%;}
.block2{width: 25%;}
.block3{width: 33.3333%;}
.block4{width: 50%;}
.block5{width: 62.5%;}
.block6{width: 66.6666%;}
.block7{width: 87.5%;}
.block8{width: 100%;}
.lastBlock{clear: both;}
.blockWrapper{clear: both;width: 100%}
*.show{display: block !important;}
*.hide{display: none !important;}
#overlay
{
	position: absolute;
	min-height: 100%;
	width: 100%;
	opacity: .5;
	background-color: #000;
	z-index: 1;

}

#svgMenuBtn
{
	width: 50px;
	border: 1px solid #000;
	padding: 5px;
	background-color: #FFF;
	color: #000;
}
#svgMenuBtn
{
	z-index: 9999;
	position: absolute;
	top: 1em;
	right: 1em;
}
.arrowCtr, .arrowCtr .button
{
	display: flex;
	align-items: center;
	margin-top: 25px;
}
.arrowCtr .button + .button
{
	margin-left: 15px;
}
.svgArrows
{
	width: 50px;
	fill: #FFF;
}
.svgArrows:first-child
{
	padding-right: 5px;
}
.svgArrows:last-child
{
	padding-left: 5px;
}
.svgArrows + .svgArrows
{
	padding-left: 5px;
	padding-right: 5px;
}
#svgXBtn
{
	position: relative;
}
#svgXBtn svg
{
	position: absolute;
	width: 2em;
	right: .5em;
	top: .5em;
	fill: #FFF;
}

#license, #transcription
{
	margin-top: 2em;
	padding-top: 2em;
	border-top: 5px solid #EC622B;
}


/* -------------------------------------------------------- */
/* ------------------	BEGIN FOR ADA 	-------------------	*/
/* -------------------------------------------------------- */
#skip a, .ada, .adaOnly
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
 
#skip a:focus
{
	position:static;
	width:auto;
	height:auto;
}




/* -------------------------------------------------------- */
/* ------------------	BEGIN FOR ID/CLASS 	---------------	*/
/* -------------------------------------------------------- */

#logo
{
	border: 1px solid #000;
	width: 50%;
	margin-left: 25%;
}

#header
{
	padding: 1em;
	text-align: center;
	float: left;
	width: 100%;
}
#podcastButtons
{
	padding-top: 2em;
}

.rlwBtnCtr
{

	display: inline-block;
	width: 5em;
	height: 5em;
	margin: .5em;
}


.rlwBtn
{
	width: 3em;
	transition: .5s;
}
.rlwBtn svg
{
	fill: #FFF;
	/*
	max-height: 42px;
	*/
}

.rlwBtnText
{
	position: absolute;
	left: -200%;
	bottom: 0;
}

nav ul li, a.button
{
	transition: .25s;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
nav ul li:hover, a.button:hover
{
	/*	create more paths at https://bennettfeely.com/clippy/	*/
	clip-path: polygon(0% 85%, 8% 98%, 29% 92%, 47% 99%, 63% 86%, 74% 99%, 93% 73%, 100% 52%, 91% 0%, 75% 2%, 46% 3%, 24% 0%, 0% 7%, 1% 27%, 4% 48%, 0% 64%);
}


/* -------------------------------------------------------- */
/* ----------------	BEGIN FOR MEDIA QUERIES	---------------	*/
/* -------------------------------------------------------- */

@media screen and (min-width:800px){
	#svgMenuBtn, nav ul li:first-child, #overlay
	{
		display: none !important;
	}
	
	nav ul li
	{
		display: inline-block;
		margin: 0 1em 0 0;
		border: 1px solid #333D3D;
		transition: .25s;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}
@media screen and (max-width:799px){
	.block1, .block2, .block7, .block6, .block5
	{
		width: 100%;
	}
	#svgMenuBtn
	{
		display: block;
	}
	nav
	{
		position: absolute;
		width: 50%;
		background-color: #FFF;
		border: 1px solid #000;
		top: 0;
	}
	nav ul li
	{
		margin: 1em;
		border: 1px solid #333D3D;
	}
	nav a
	{
		background-color: #EC622B;
		color: #FFF;
	}
	nav.visible
	{
		left: 0;
	}
	footer img
	{
		height: 4em;
		width: 4em;
		top: -2em;
	}
	.socialIcons:nth-child(4)
	{
		clear: left;
		margin-left: 0;
	}
	#podcastButtons a
	{
		display: block;
		width: 100%;
		margin: .5em 0;
	}
	.iframeCtr div:first-child, .iframeCtr div:last-child
	{
		padding-right: 0;
		padding-left: 0;
	}
}/*/mediaquery*/
@media screen and (max-width:625px){
	div[class^="block"]
	{
		width: 100%;
	}
	img.detailsImg
	{
		float:left;
		padding-left: 0;
	}
	.iframeCtr img.detailsImg
	{
		margin-top: 1em;
	}
	
}/*/mediaquery*/

@media screen and (max-width:480px){
	@-ms-viewport { width: device-width; }

}/*/mediaquery*/