/*  
Theme Name: MASHv3
Theme URI: http://www.jarretredding.com
Description: Designed for Mash Those Buttons
Version: 3.0
Author: Jarret Redding
Author URI: http://www.jarretredding.com
*/

:root{
	--pewter-bg: #151515;
	--text-white: #d9d9d9;
	--action-button: #145C9E;
	--link-default: #3390e5;
	--twitter-blue: #1da1f2;
	--twitch-purple: #9146ff;
	--discord-purple: #7289da;
	--colbalt-blue: #0047AB;
	--eerie-black: #212020;
	--facebook-blue: #1877f2;
	--youtube-red: #FF0000;
	--youtube-black: #282828;
	--menu-separator: #413f3f;
	--patreon-coral: #ff424D
}

::-webkit-scrollbar{
	width: 10px;
}

::-webkit-scrollbar-track{
	background-color: var(--eerie-black);
}

::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover{
    background-color: var(--text-white);
}

html, body{
	/* position: relative; */
	height: 100%;
}

html{
	scrollbar-width: thin;
	scrollbar-color: #333;
}

body{
	background-color: var(--pewter-bg);
	color: var(--text-white);
	font-family: 'Rajdhani', sans-serif;
	font-size: 1.375rem;
	font-weight: 300;
}

a{
	color: #3390e5;
	transition: color .2s;
}

a:hover{
	color: var(--action-button);
	text-decoration: none;
}

figure{
	margin: 0;
}

footer{
	background-color: var(--eerie-black);
	padding: 1.25rem 0 0;
	margin-top: 2rem;
	/* position: absolute; */
	/* bottom: 0; */
	/* left: 0; */
	/* right: 0; */
	width: 100%;
}

footer a{
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-white);
	text-transform: uppercase;
}

p{
	/* margin-bottom: 1.5rem; */
}

.action-button{
	display: flex;
	width: 100%;
	min-height: 3.125rem;
	max-height: 3.125rem;
	align-items: center;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.3rem;
	background-color: #145C9E;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s ease 0s;
	padding: 4px 0px;
	justify-content: flex-start;
	color: var(--text-white);
}

.action-button:hover{
	background-color: #0e4271;
	color: var(--text-white);
}

.action-button-full{
	max-width: 100%;
}

.article-content{
	margin: 1rem 0;
}

.audio-plyr{
	width: 100%;
}

#audio-plyr-container{
	position: fixed;
	bottom: -100px;
	left: 0;
	right: 0;
	transition: bottom .3s;
	z-index: 100;
	--plyr-color-main: var(--link-default);
	--plyr-audio-controls-background: var(--eerie-black);
	--plyr-audio-control-color: var(--text-white);
}

#audio-plyr-container img{
	position: absolute;
	top: 100px;
	right: 20px;
	opacity: .75;
	transition: top .3s;
}

.audio-plyr-container-show{
    bottom: 0 !important;
}

.audio-plyr-container-show img{
    top: -50px !important;
    transition: top .3s .4s !important;
}

.audio-plyr-close{
	display: flex;
	background-color: var(--eerie-black);
	padding: 0 0.625rem 0 0;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.audio-plyr-controls{
	display: flex;
	width: 100%;
	justify-content: space-between
}

.author-image-container{
	/* max-width: 183px; */
}

.author-image-container-mobile{
	display: none;
	visibility: hidden;
}

.author-image-container img, .author-image-container-mobile img{
	border-radius: 90px
}

.author-info{
	/* display: flex; */
	/* flex-direction: row; */
}

.author-info h5{
    margin-bottom: 0;
}

.author-section{
	font-size: 1.25rem;
	padding: 1rem;
	background-color: var(--eerie-black);
	margin: 2rem 0;
}

.author-section p{
	margin-bottom: 0.625rem !important;
}

.author-title{
	font-style: italic;
}

.container{
	max-width: 1280px;
}

.discord-community{
	margin-bottom: 2rem;
}

.discord-community img{
	margin-bottom: 1rem;
}

#discord-channel-directory{
	margin-top: 1.5rem;
}

.discord-directory-category{
	margin-bottom: 1.5rem;
}

.discord-directory-category .action-button{
    margin-bottom: 1.2rem;
}

.discord-img-container{
	display: flex;
    justify-content: center;
}

.discord-img-container img{
	min-width: 100%;
}

.episode-audio::before{
	font-family: "Font Awesome 5 Free";
	content: "\f58f";
	font-size: 1.79rem;
	margin: 0 0.625rem;
}

.episode-buttons{
	position: absolute;
	bottom: 0;
	left: 2.5rem;
	right: 15px;
}

.episode-header{
	margin-bottom: 3.125rem;
}

.episode-host{
	margin: 1.25rem 0;
	min-height: 100%;
	/* display:  flex; */
	/* flex-direction: column; */
	/* justify-content: space-between; */
}

.episode-info{
	display: flex;
	flex-direction: column;
	padding-bottom: 3.75rem;
}

.episode-date{
	margin-bottom: 1rem;
}

.episode-info p.episode-summary{
	/* margin-bottom: 4.375rem; */
}

.episode-info h1{
	font-size: 2.25rem;
}

.episode-info h1, .episode-info h4, .episode-info p, .episode-summary{
	margin-bottom: 1.25rem;
}

.episode-show-link{
	display: block;
	color: var(--text-white);
	transition: color .5s;
	margin-bottom: .625rem;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	line-height: 1;
}

.episode-show-link:hover{
	color: var(--text-white);
	text-decoration:  underline;
}

.episode-video i{
	font-size: 2.25rem;
	margin-right: 5px;
}

.footer-channel{
	display: flex;
	flex-direction: row;
	align-items: center;
}

.footer-channel::before{
	margin-right: 2rem;
	text-align: center;
	max-width: 0px;
}

.footer-links{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.footer-link-group{
	display:flex;
	flex-direction: column;
	margin-right: 3rem;
}

.footer-mission{
	font-size: 1rem;
}

.footer-twitter:hover{
	color: var(--twitter-blue);
}

.footer-discord:hover{
	color: var(--discord-purple);
}

.footer-twitch:hover{
	color: var(--twitch-purple);
}

.footer-facebook:hover{
	color: var(--facebook-blue);
}

.footer-youtube:hover{
	color: var(--youtube-red);
}

.featured-image-container, .related-img-container {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}

.featured-image-container img, .related-img-container img, video-plyr{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.footer-copyright{
	margin: 1rem 0;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1rem;
}

.footer-logo{
	/* display: flex; */
	/* flex-direction: column; */
	/* justify-content:  center; */
	/* align-items: center; */
	padding: 0 2rem;
}

.footer-logo p {
	font-size: 1.125rem;
	text-align: center;
	margin:  unset;
}

h1{
	font-size: 3.5rem;
}

h2{
	font-size: 3rem;
}

h3{
	font-size: 2.5rem;
}

h4{
	font-size: 2rem;
}

h5{
	font-size: 1.5rem;
}

h6{
	font-size: 1.25rem;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
}

header .post-meta{
    margin-bottom: 0;
}

header .post-meta li{
	/* margin-bottom: 0; */
}

#home-hero{
	height: 26vw;
	background-image: url(https://cdn.mashthosebuttons.com/image/buttonsbg.jpg);
	margin: 3rem 0;
	border: 2px solid var(--eerie-black);
	border-left: none;
	border-right: none;
}

#home-hero img{
	min-width: 100%;
}

#home-hero p{
	font-size: 1.8vw;
	font-weight: 700;
}

#home-hero > .row{
	height: 100%;
	align-items: center;
}

.host-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-radius: 10px;
}

.host-image-container{
	max-height: 11.457rem;
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

.homepage-container{
	flex: 1 1;
	min-height: 28vw;
	max-height: 28vw;
	/* margin: 0px 5px; */
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	transition: flex .2s;
	cursor: pointer;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	flex-shrink: 0;
}

.homepage-slot-link{
	color: var(--text-white);
}

.homepage-slot-link:hover{
	color: var(--text-white);
}

.homepage-latest{
	display: flex;
	/* flex-direction: row; */
	/* min-width: 100vw; */
	/* overflow-x: auto; */
	/* overflow-y: hidden; */
	/* scroll-snap-type: x mandatory; */
}

.homepage-slot{
	flex: 1 1;
	min-height: 28vw;
	max-height: 28vw;
	padding: 0px 5px;
}

.homepage-slot-title{
	margin-bottom: 0;
}

.homepage-slot figure{
	position: relative;
	overflow: hidden;
	/* max-height: 500px; */
}

.homepage-slot p{
	padding: 0 20px;
	font-size: 1.2vw;
	margin-bottom: .6vw;
}

.homepage-slot .homeslot-background{
    position: absolute;
    /* top: -50%; */
    /* left: -50%; */
    /* min-width: 50vw; */
    min-height: 100%;
    max-height: 100%;
    margin-left: -4vw;
    z-index: -100;
    transition: margin-left .5s, transform .5s;
}

.homepage-slot:hover .homeslot-background{
    transform: scale(1.2);
}

.homepage-slot:hover .home-slot-image{
	visibility: visible;
	max-height: 321px;
	animation: fadeIn ease .5s .5s;
	transition: max-height .5s;
}

.homepage-slot:hover .homepage-slot-new{
    display: none;
    visibility: hidden;
    transition: display .5s, visibility .5s;
}

.home-slot-image{
	visibility: hidden;
	max-height: 0;
}

.home-slot-select{
	display: none;
	visibility: hidden;
}

.homepage-slot-show{
	/* margin-bottom: 0.625rem; */
}

.homepage-slot-summary{
	display: none;
	visibility: hidden;
}

.homepage-textcontainer{
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: .8vw 0;
	min-height: 35%;
	background-color: rgba(0,0,0,0.9);
	transition: min-height .5s;
}

.host-bio{
	margin: 1rem 0;
}

.host-container{
	display: flex;
	flex-direction:  row;
	align-items: center;
}

.host-name{
	font-size: 2rem;
	font-weight: 700;
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	line-height: 1;
}

.host-name-links{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.host-links{
    display: flex;
    flex-direction: row;
    height: 0%;
    flex-wrap:  wrap;
}

.host-social-media{
	display: flex;
	padding: 0 0.625rem;
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
	align-items: center;
	transition: background-color .3s;
	margin: 0 5px;
}

.host-social-media:hover{
	color: unset;
	text-decoration: none;
}

.host-social-media::before{
	margin-right: 5px;
	font-weight: 400;
}

.host-twitter{
	color: var(--text-white);
}

.host-twitter:hover{
	background-color: var(--twitter-blue);
}

.host-twitch{
	color: var(--text-white);
	/* background-color: var(--twitch-purple); */
}

.host-twitch:hover{
	background-color: var(--twitch-purple);
}

.icon-discord::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f392";
	font-weight: 400;
}

.icon-email::before{
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
}

.icon-facebook::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f09a";
	font-weight: 400;
}

.icon-patreon::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f3d9";
	font-weight: 400;
}

.icon-twitter::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f099";
	font-weight: 400;
}

.icon-twitch::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f1e8";
	font-weight: 400;
}

.icon-youtube::before{
	font-family: "Font Awesome 5 Brands";
	content: "\f167";
	font-weight: 400;
}

.latest-episode{
	/* display: flex; */
	/* flex-direction: column; */
	height: 100%;
	justify-content: space-between;
}

.latest-episode a{
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	/* background-color: var(--eerie-black); */
	/* color: var(--text-white); */
	/* padding: 5px 10px; */
	/* font-size: 1.25rem; */
}

.latest-episode a:hover{
	/* background-color: var(--text-white); */
	/* color: var(--eerie-black); */
}

.latest-episodes{
	margin-bottom: 2rem;
}

.latest-posts{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.latest-posts h3{
	border-bottom: 2px solid var(--text-white);
}

.le-bottom-container{
	display: flex;
}

.le-bottom-container-button{
	display: flex;
	justify-content: flex-end;
}

.le-img-container a{
	background-color: unset !important;
	padding: unset !important;
}

.le-post-date{
	margin: 1rem 0;
}

.le-post-title{
	font-family: "Play", sans-serif;
	font-weight: 700;
	margin-bottom: 1rem;
}

.le-post-title-link{
	/* display: none; */
	/* visibility: hidden; */
}

.main-content blockquote{
	padding: 0 3rem;
	color: #fff;
	font-style: italic;
}

.mash-article{
	font-size: 1.5rem;
}

.mash-article .featured-image-container{
	margin: 1rem 0 2rem 0;
}

.mash-article header .summary{
	margin: 2rem 0;
	font-style: italic;
	font-weight: 700;
}

.mash-article h6{
	font-size: 1.25rem;
	margin-bottom: 0;
}


.mash-article p{
	margin-bottom: 2rem;
}

.mash-article-info{
	display: flex;
	flex-direction: column;
	/* position: absolute; */
	/* top: 0; */
	/* right: 15px; */
	/* bottom: 0; */
	padding-top: 1rem;
	/* background-color: rgba(0,0,0,0.9); */
}

.mash-article-author-date{
	display: flex;
	flex-direction: column;
	/* align-items: flex-end; */
	margin: 1rem 0;
}

.mash-article-author-date{
	flex-direction: row;
	justify-content: space-between
}

.mash-discord-header{
	margin-bottom: 2rem;
}

.mash-discord-subheader{
	margin-bottom: 1rem;
}

.mash-header{
	margin-top: 2.5rem;
	margin-bottom: 3.125rem;
}

.mash-header-logo a{
	display: flex;
	flex-direction: row;
	/* align-items: flex-start; */
}

.mash-header-logo img{
	max-height: 101px;
}

.mash-maintenance, .mash-maintenance > div{
	height: 100%;
}

.mash-maintenance img{
	min-width: 100%;
}

.mash-maintenance p{
	padding: 2rem 0;
	font-size: 2.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

.mash-schedule h3{
	margin-bottom: 2.5rem;
}

#mash-support h2{
	font-size: 2rem;
    margin: 1rem 0 2rem 0;
}

#mash-support p{
    margin: 2rem 0;
}

.main-content{
	/* margin-top: 3.125rem; */
	min-height: 100%;
	/* padding-bottom: 16rem; */
	position: relative;
}

.mash-latest a:hover{
	text-decoration: none !important;
}

.mash-latest p{
	display: none;
	visibility: hidden;
}

.mash-latest .post-preview > div:nth-child(2){
	display: flex;
	flex-direction: column;
}

.mash-latest .post-preview > div:nth-child(2) p{
	order: 1;
}

.mash-latest .post-preview > div:nth-child(2) a{
	order: 2;
}

.mash-latest h6{
    display: flex;
    background-color: var(--eerie-black);
    padding: 10px;
    min-height: 125px;
    transition: background-color .2s, color .2s;
}

.mash-latest article:hover h6{
	background-color: var(--text-white);
	transition: background-color .2s, color .2s;
	color: #000;
}

.mash-latest .related-post-date, .le-post-date{
	font-size: 1.125rem;
}

.mash-latest .related-post-text{
	padding-bottom: 1rem;
}

.mash-show a{
	font-family: 'Play', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--text-white);
	/* display: block; */
}

.mash-show a:hover{
	text-decoration: underline;
}

.mash-show p{
	margin-bottom: 2.5rem;
}

.mash-show img{
	/* margin-bottom: 1rem; */
	border-radius: 10px;
}

.mash-show-title{
	line-height: 1.2;
	margin-bottom: 1rem;
	display: block;
}

.mash-page-container{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.mash-page-container a{
	display: flex;
	padding: 5px 20px;
	background-color: var(--eerie-black);
	margin: 0 5px;
	color: var(--text-white);
	transition: color .2s, background-color .2s;
}

.mash-page-container a:hover{
    background-color: var(--text-white);
    color: var(--eerie-black);
}

#message_404 h1{
	font-size: 6.5rem;
	text-align: center;
}

#message_404 h2{
	font-size: 2rem;
	padding-bottom: 3rem;
}

.mobile-menu-button{
	display: none;
	visibility: none;
}

#mobile-menu{
	display: none;
	visiblity: hidden;
}

#mobile-menu-button{
	display: none;
	visibility: hidden;
}

.mobile-only{
	display: none;
	visibility: hidden;
}

.mobile-sub{
	display: none;
	visibility: hidden;
}

.object-replacement{
	margin-bottom: 1rem;
}

.object-replacement h6{
	font-style: italic;
}

.post-meta{
	display: flex;
	flex-direction: row;
	margin-bottom: 2rem;
	margin-top: 0;
}

.post-meta ul{
	display: flex;
	flex-direction: row;
	margin: 0;
	list-style-type: none;
	padding: 0;
	flex-wrap: wrap;
}

.post-meta li{
	margin: 0 1.25rem 1rem 0;
	font-size:  1rem;
	background-color: var(--eerie-black);
}


.post-meta a{
	display: block;
	padding: 5px;
	color: var(--text-white);
	min-width: 40px;
	text-align: center;
	transition: color .2s, background-color .2s;
}

.post-meta a:hover{
	color: #000;
	background-color: var(--text-white);
}

.post-preview{
	margin-bottom: 1rem;
}

.post-preview a, .le-post-title-link{
	font-family: "Play", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 1rem 0;
	display: block;
	color: var(--text-white);
}

.post-preview a:hover{
	color: var(--link-default);
}

.post-preview-date{
	text-align: right;
	margin-bottom: 1rem;
}

.search-result{
	margin-bottom: 2rem;
}

.search-result .post-meta{
	margin-top: .8rem;
	margin-bottom: 0;
}

.search-result-link{
	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--text-white);
	margin-bottom: .8rem;
	display: block;
}

.show-host-row{
	margin-bottom: 1rem;
}

summary{
	cursor: none;
	list-style-type: none;
}

.recent-post{
	margin-bottom: 1rem;
}

.recent-post .img-container{
	display: block;
	max-height: 188px;
	overflow: hidden;
}

.related-posts{
	margin-bottom: 2.5rem;
}

.related-post{
	background-color: var(--eerie-black);
	min-height: 100%;
	transition: background-color .2s;
	position: relative;
	border: 1px solid #333333;
}

.related-post:hover{
	border: 1px solid var(--text-white);
	/* color: var(--eerie-black); */
	transition: border .3s;
}

.related-post p{
	font-size: 1rem;
	font-family: "Rajdhani", sans-serif;
	font-weight: 500;
	text-transform: initial;
}

.related-post a{
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-white);
	font-size: 1.25rem;
	position: absolute;
	transition: color .2s;
	height: 100%;
	width: 100%;
	z-index: 100;
	bottom: 0;
}

.related-post a:hover{
	text-decoration: none;
	color: var(--eerie-black);
	transition: color .3s;
}

.related-post h4{
	margin-bottom: 1rem;
}

.related-post-date, .le-post-date{
	font-family: "Play", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-align: right;
	margin-bottom: 1rem;
}

.related-post-text{
    padding: 1rem 1rem 0 1rem;
    min-height: 100%;
    display:  flex;
    flex-direction: column;
}

.related-img-container, .recent-post .img-container{
	/* margin-bottom: 1rem; */
}

.schedule-day{
	margin-bottom: 2rem;
}

.schedule-day-event{
	display: flex;
	flex-direction: row;
	margin: 1.125rem 0;
	align-items: center;
	transition: background-color .2s;
	position: relative;
}

.schedule-day-event:hover{
	background-color: var(--text-white);
	color: var(--eerie-black);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s;
}

.schedule-day-event a{
	position: absolute;
	width: 100%;
	height: 100%;
}

.schedule-day-event img{
	max-width: 75px;
	margin-right: 1rem;
}

.schedule-day-header{
    display: flex;
    flex-direction: column;
    background-color: var(--eerie-black);
    padding: 0 0.625rem;
}

.schedule-day-header p{
	margin-bottom: 0;
}

.schedule-day-header-day{
	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	text-transform: uppercase;
}

.schedule-day-header-date{
	font-size: 1.75rem;
	font-weight: 600;
}

.schedule-stream-icon{
	min-width: 75px;
	min-height: 75px;
	background-color: #9146FF;
	margin-right: 1rem;
}

.schedule-stream-icon::before{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
}

#search-box-container{
	position: relative;
	width: 100%;
	background-color: var(--eerie-black);
	transition: width .5s;
	overflow: hidden;
}

#search-box{
	display: flex;
	width: 100%;
	padding-right: 50px;
}

.search-box-active{
	width: 50% !important;
	transition: width .5s;
}

#search-box input[type=text]{
	background-color: var(--eerie-black) !important;
	border: none;
	color: var(--text-white) !important;
	min-width: 100%;
	padding-left: 20px;
}

#search-box input[type=text]:focus{
	outline: none;
}

#search-box input[type=submit]{
	min-width: 50px;
	min-height: 50px;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform:  uppercase;
	background-color: var(--eerie-black);
	color: var(--text-white);
	border: unset;
	border-left: 1px solid var(--menu-separator);
}

.search-active{
	background-color: var(--eerie-black)
}

#search-button{
    font-size: 2rem;
    cursor: pointer;
    top: 0;
    left: 0;
}

.search-button-container{
	min-width: 40px;
	min-height: 40px;
	max-height: 40px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .5s;
}

.show-allep{
	font-family: "Play", sans-serif;
	background-color: var(--eerie-black);
	padding: 5px 10px;
	color: var(--text-white);
	text-transform: uppercase;
	font-weight: 700;
	text-align:  center;
}

.show-allep:hover{
	color: var(--eerie-black);
	background-color: var(--text-white);
}

.show-allep-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.show-attributes{
    margin-top: 1rem;
    display:  flex;
    flex-wrap: wrap;
}
.show-credits{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.show-attributes .attribute-complete{
	background-color: var(--colbalt-blue) !important;
}

.show-attributes .show-attribute{
	font-family: "Rajdhani", sans-serif;
	font-size: 1rem;
	font-weight: unset;
	text-transform: unset;
	min-height: 35px;
	padding: 5px 10px;
	background-color: var(--eerie-black);
	margin: 0 1rem 1rem 0;
	display: block;
	color: var(--text-white);
}

.show-attributes .show-attribute:hover{
	text-decoration: none;
}

.show-credit{
	margin-bottom: 1rem;
}

.show-credit-title{
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
}

.show-credit-name{
	padding-left: 1rem;
	line-height: 1.2;
}

.show-contact{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1rem;
}

.show-contact a{
	display: block;
	color: unset;
	text-decoration: unset;
	margin-bottom: 1rem;
}

.show-contact-us::before{
	font-size: 1.79rem;
	display: fixed;
	margin: 0 0.625rem;
}

.show-discord{
	background-color: var(--discord-purple);
}

.show-discord::before{
	font-size: 1.79rem;
	display: fixed;
	margin: 0 0.625rem;
	/* font-weight: 400; */
}

.show-discord:hover{
	background-color: #304db6;
}

.show-header{
	margin-bottom: 2rem;
}

.show-header h1{
	margin-bottom: 1rem;
}

.show-header p{
	font-size: 1.75rem;
	font-weight: 600;
}

.show-info{
	display: flex;
	flex-direction: row;
	margin-bottom:  1rem;
}

.show-info img{
	max-width: 100px;
	min-width: 100px;
	max-height: 100px;
	margin-right: 1.25rem;
}

.show-info-text h5{
	font-size: 1.125rem;
	line-height: 1;
}

.show-info-text span {
	font-size: 1.125rem;
	line-height: 1;
}

.show-music-credit{
	padding-left: 1rem;
	line-height: 1.2;
}

.show-subscribe{
	display: flex;
	flex-direction: row;
	background-color: #111111;
	border: 2px solid var(--action-button);
	border-radius: 5px;
	justify-content: center;
	align-items: center;
	min-height: 4.25rem;
	margin: 1rem 0;
	cursor:  pointer;
	transition: border .5s;
}

.show-subscribe::before{
	font-family: "Font Awesome 5 Free";
	content: "\f0f3";
	font-size: 2.5rem;
	font-weight: 900;
	position: absolute;
	left: 30px;
}

.show-subscribe:hover{
	border: 2px solid #61a9eb;
}

.show-subscribe-text{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.show-subscribe-text span{
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.375rem;
	line-height: 1.2;
	user-select:  none;
}

#show-subscribe-panel{
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	height: 100%;
	max-width: 400px;
	z-index: 100;
	padding: 0 3.125rem;
	background-color: var(--eerie-black);
	align-items: center;
	justify-content: center;
	overflow-y: auto;
}

#show-subscribe-panel p{
	font-size: 1.125rem;
}

.show-subscribe-panel-open{
	right: 0;
	transition: right .5s;
}

.show-subscribe-panel-closed{
	right: -100vw;
	transition: right .5s;
}

.show-subscribe-panel-close{
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 2rem;
	opacity: 75%;
	transition: opacity .2s;
	cursor: pointer;
}

.show-subscribe-panel-close:hover{
	opacity: 100%;
}

.show-subscribe-cover{
	margin-bottom: 2rem;
}

.show-subscribe-platforms{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.show-subscribe-platforms, .show-subscribe-platforms img, .show-subscribe-platforms a{
	min-width: 100%;
}

.show-subscribe-platforms a{
	margin: 1.54vh 0;
}

#show-syndication-button{
	min-width: 100%;
	background-color: var(--pewter-bg);
	border: none;
}

.show-syndication-menu{
	min-width: 100%
}

.show-more-platforms span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:  100%;
	font-size: 1.25rem;
	color: var(--text-white);
	text-align: center;
	position: relative;
}

.show-patreon{
	background-color: #cc353e;
}

.show-patreon:hover{
	background-color: #99282e;
}

.show-rss, .show-rss span{
	background-color: #f26522;
	color: var(--text-white);
	text-align: center;
	position: relative;
}

.show-rss:hover{
	background-color: #f26522;
}

.show-rss::before{
	/* font-family: "Font Awesome 5 Free"; */
	/* font-size: 2rem; */
	/* content: "\f09e"; */
	margin: 0 1rem;
}

.show-rss span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:  100%;
	font-size: 1.75rem;
}

.show-rss span::before{
	position: absolute;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-size: 2rem;
	content: "\f09e";
	margin: 0 1rem;
}

.show-twitch{
	background-color: var(--twitch-purple);
}

.show-twitch::before, .show-youtube::before, .show-patreon::before{
	font-size: 1.79rem;
	display: fixed;
	margin: 0 0.625rem;
	font-weight: 400;
}


.show-twitch:hover{
	background-color: #5d00e6;
}

.show-twitter{
	background-color: var(--twitter-blue);
}

.show-twitter::before{
	font-size: 1.79rem;
	display: fixed;
	margin: 0 0.625rem;
	font-weight: 400;
}

.show-twitter:hover{
	background-color: #0a6ca9
}

.show-youtube{
	background-color: #b30000;
}

.show-youtube:hover{
	background-color: #800000;
}

.side-bar{
	padding-left: 2.5rem;
}

.staff-info{
	padding-left: 1rem;
}

.staff-name{
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0;
}

.staff-twitter{
	display: flex;
	font-family: "Play", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
	align-items: center;
	transition: background-color .3s;
	color: var(--text-white);
	transition: color .2s;
}

.staff-twitter:hover{
	color: var(--twitter-blue);
}

.staff-twitter::before{
	margin-right: 5px;
}

.staff-wrap {
	display: flex;
	flex-direction: row;
	padding: 1rem;
	background-color: var(--eerie-black);
	border: 1px solid #333333;
	margin-bottom: 1rem;
	transition: border .3s;
}

/*
.staff-wrap:hover{
	border: 1px solid var(--text-white);
}
*/

.staff-wrap .avatar{
	max-width: 100px;
	min-width: 100px;
	max-height: 100px;
	border-radius: 15px;
	overflow: hidden;
}

.top-nav ul{
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}

.top-nav li{
	list-style-type: none;
	margin: 0 0 0 1.875rem;
}

.top-nav a{
	color: var(--text-white) !important;
	text-transform: uppercase !important;
	font-family: "Play", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	transition: text-decoration .5s;
}

.top-nav a:hover{
	text-decoration: underline;
}

#top-nav-shelf{
	position: absolute;
	right: 15px;
	width: 0%;
	transition: width .5s;
}

#video-plyr-container{
	opacity: 0;
	transition: opacity .5s, z-index .3s .7s;
	z-index: -100;
	padding-bottom: unset;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

.video-plyr-container-show{
	opacity: 1 !important;
	transition: opacity .5s !important;
	z-index: 0 !important;
}

/* Plyr Overrides */

.plyr{
	width: 100%
}

/* Animations */
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity:1;}
}

@media screen and (max-width: 640px){
    
    body{
    	font-size: 1.25rem;
    }

    footer{
    	margin-top: 3rem;
    }

    .episode-info h2{
    	font-size: 10vw;
    }

    .episode-host{
    	margin: 0 0 1rem 0;
    }

    h1{
    	font-size: 10vw;
    }

    h4{
    	font-size: 1.25rem;
    }

    .action-button{
    	/* justify-content: center; */
    }

    #audio-plyr-container img{
    	display: none;
    	visibility: hidden;
    }

    .author-bio{
    	margin: 1rem 0 !important;
    }

    .author-image-container{
    	display: none;
    	visibility: hidden;
    }

    .author-image-container-mobile{
    	display: flex;
    	visibility: visible;
    }

    .desktop-only{
    	display: none;
    	visibility: hidden;
    }

    .discord-img-container{
    	display: none;
    	visibility: hidden;
    }

    .episode-buttons{
    	display: block;
    	order: 5;
    	position: relative;
    	left: 0;
    	right: 0;
    }

    .episode-buttons > div{
    	margin-bottom: 20px;
    }

    .episode-info, .mash-article-info{
    	padding-top: 1rem;
    	padding-bottom: 0;
    }

    .episode-info h1{
    	order: 1;
    	font-size: 9.5vw;
    }

    .episode-info h5{
    	order: 2;
    	margin-bottom: 0;
    	text-align: end;
    }

    .episode-date{
    	order: 3;
    	text-align: end;
    }

    .episode-header{
    	margin-bottom: 0;
    }

    .episode-summary{
    	order: 4;
    }

    .footer-links{
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: center;
    	margin: 1rem 0;
    }

    .footer-link-group{
    	flex-direction: row;
    	flex-wrap: wrap;
    	margin-right: unset;
    	margin-bottom: 1.5rem;
    	justify-content:center;
    }

    .footer-link-group a{
    	margin: 0 15px;
    }

    .footer-channel::before{
    	margin-right: 22px;
    }

    .footer-mission{
    	margin: 1rem 0;
    }

    header .post-meta {
		position: relative;
		margin-bottom: 0;
		bottom: unset;
		left: unset;
		margin-top: 1rem;
	}

    .host-bio{
    	display: none;
    	visibility: hidden;
    }

    .host-links{
    	flex-direction: column;
    	height:  unset;
    	margin-top: 1rem;
    }

    .host-name h4{
    	margin-bottom: 0.625rem;
    	line-height: 1;
    }

    .host-name-links{
    	flex-direction: column;
    }
    #home-hero{
    	height: auto;
    	padding: 2rem;
    }

    #home-hero p{
    	font-size: 1.4rem;
    	padding: 2rem 0 0 0;
    	text-align: justify;
    }

    .homepage-container{
    	min-height: 110vw;
    }

    .homepage-latest{
    	min-width: 100vw;
    	overflow-x: auto;
    	overflow-y: hidden;
    	scroll-snap-type: x mandatory;
    	scroll-behavior: smooth;
    	scroll-margin-top: 408px;
    }

    .homepage-slot{
    	min-height: 110vw;
    	min-width: 70vw;
    	scroll-snap-align: center;
    	min-width: 100vw;
    	padding: 0 13vw;
    	scroll-padding: 408px 0 0 0;
    }

    .homepage-slot .homeslot-background{
        margin-left: -15vw;
    }

    .homepage-slot p{
    	font-size: 5vw;
    	margin-bottom: 3vw;
    }

    .home-slot-select{
    	justify-content: space-around;
    	padding: 0;
    	margin: 1.5rem 0;
    	display: flex;
    	visibility: visible;
    }

    .home-slot-select li{
    	list-style-type: none;
    }

    .home-slot-select a{
    	display: block;
    	background-color: var(--eerie-black);
    	padding: 10px 20px;
    	color: var(--text-white);
    }

    .host-social-media{
    	margin: unset;
    	padding: unset;
    	margin: 5px 0;
    	padding: 2.5px 0;
    	justify-content: center;
    }

    .host-twitch{
		background-color: var(--twitch-purple);
	}

    .host-twitter{
		background-color: var(--twitter-blue);
	}

	.main-content{
		margin-top: 0.625rem;
		/* padding-bottom: 24rem; */
	}

	.main-content blockquote{
		padding: 0 1.5rem;
	}

	.mash-article{
	    font-size: 5.5vw;
	}

	#mash-support h2{
		font-size: 4.2vw;
	}

	.mobile-only{
		display: unset;
		visibility: visible;
	}

	h1{
		font-size: 10vw;
	}

	h2{
		font-size: 9vw;
	}

	h3{
	    font-size: 8vw;
	   }

    h6{
    	font-size: 5vw !important;
    }

    .latest-episode{
    	border-top: 2px solid var(--eerie-black);
    	padding-top: .8rem;
    }

    .latest-episodes{
    	margin-bottom: 0;
    }
    
    .latest-episodes div:nth-child(2){
    	/* order: 5; */
    }

    .le-bottom-container{
    	display: none;
    	visibility: hidden;
    }

    .le-top-container{
    	align-items: center;
    	margin-bottom: 0.625rem;
    }

    .le-post-title{
    	display: none;
    	visibility: hidden;
    }

    a.le-post-title-link{
		display: block;
		visibility: visible !important;
		font-size: 3.5vw;
		background-color: unset;
		padding: 0 !important;
	}

	.mash-article p {
		margin-bottom: 1.5rem;
	}

	.mash-article header{
		margin-bottom: 0;
	}

	.mash-article-author-date{
		flex-direction: row;
		justify-content: space-between;
		margin: 1rem 0 2rem 0;
	}

	.mash-article-info p{
		font-style: italic;
	}

	.mash-header{
		margin-top: .625rem;
		min-height: 3rem;
		margin-bottom: 1rem;
	}

	.mash-header .row{
		min-height: 3rem;
	}

	.mash-latest .post-preview > div:nth-child(2) a{
	    order: 1;
	}

	.mash-latest .post-preview .post-preview-date{
		order: 2;
	}

	.mash-show{
		margin: 1rem 0;
	}

	.mash-show a{
		font-size: 1.5rem;
	}

	.mash-show img{
		margin-bottom: 1rem;
	}

	.mash-show p{
		margin-bottom: unset;
		font-size: 4.5vw;
	}

	.mash-show .mash-show-title{
		visiblity: hidden;
		display: none;
	}

	#mash-support p{
		margin: 1rem 0;
	}

	#message_404 h1{
		font-size: 17vw;
	}

	#message_404 h2{
		font-size:5vw;
		text-transform: unset;
		padding-bottom: 1rem;
	}

	#mobile-menu-button{
		display: unset;
		visibility: unset;
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 3rem;
		/* font-weight: 400; */
	}

	#mobile-menu{
		display: unset;
		visibility: unset;
		position: fixed;
		background-color: var(--eerie-black);
		width: 100vw;
		height: 100vh;
		top: -100vh;
		z-index: 1001;
		overflow-y: auto;
		transition: top .5s;
	}

	#mobile-menu-close{
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 2rem;
	}

	.mobile-menu-img-container{
		/* display: flex; */
		/* justify-content: center; */
		padding: 2rem 0;
	}

	.mobile-menu-channels{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.mobile-menu-channels .icon-discord{
		background-color: var(--discord-purple);
	}

	.mobile-menu-channels .icon-twitter{
		background-color: var(--twitter-blue);
	}

	.mobile-menu-channels .icon-twitch{
		background-color: var(--twitch-purple);
	}

	.mobile-menu-channel{
		color: var(--text-white);
		padding: 0.625rem;
		border-radius: 10px;
		margin: 0.625rem;
		line-height: 1;
		font-size: 2rem;
		min-width: 52px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mobile-menu-channels a:hover{
		color: var(--text-white);
	}

	.mobile-menu-open{
		top: 0 !important;
		transition: top .5s;
	}

	.mobile-nav ul{
		padding: 0;
	}
	
	.mobile-nav li{
        list-style-type: none;
        border-bottom: 2px solid var(--menu-separator);
        /* padding: 10px 0 */
 }

	.mobile-nav li a{
		display: block;
		color: var(--text-white);
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: 700;
		width:  100%;
		padding: 10px 0;
	}
    
    .mobile-search-container{
    	display: flex;
    	border-bottom: 2px solid var(--menu-separator);
    	margin-bottom: 2rem;
    }

    .mobile-search-container button{
    	padding: 5px;
    	text-align: center;
    	font-size: 1.8rem;
    	background: transparent;
    	border: none;
    	color: var(--text-white);
    }

	.mobile-search-container input{
		background: none;
		border: none;
		color: var(--text-white);
		width: 100%;
	}

	.mobile-search-container input:focus{
		outline: none;
	}

	.mobile-search-container input::placeholder{
		color: var(--text-white);
	}

	.mobile-sub{
		display: unset;
		visibility: visible;
	}

	.related-post{
		margin-bottom: 2rem;
	}

	.related-posts{
		margin-bottom: 0;
	}

	.related-post-date, .le-post-date{
	    display: none;
	    visibility: hidden;
	}

	.related-posts article, .mash-latest article{
		margin-bottom: 2rem;
	}

	.related-post-date, .le-post-date{
	    display: none;
	    visibility: hidden;
	}
	
	.search-result, .post-preview{ 
	    margin-bottom: 1rem;
	    border-top: 2px solid var(--eerie-black);
	    padding-top: 0.625rem;
	}

	.search-result img, .post-preview img, .le-img-container img{
		padding-top: .3rem;
	}

	.search-result .post-meta{
		display: none;
	}

	.search-result span{
		font-size: 4vw;
	}

	.search-result-author{
		display: none;
		visibility: hidden;
	}

	.search-result-link{
		font-size: 4vw;
		margin-bottom: 0;
	}

	.show-allep-container{
		margin-top: 0.625rem;
	}

	.show-attributes{
		margin: unset;
	}

	#show-latest-info > :nth-child(1){
		order:2;
	}

	#show-latest-info > :nth-child(2){
		order:1;
	}

	.staff-wrap .avatar{
		max-width: 23vw;
		min-width: 23vw;
		max-height: 23vw;
		border-radius: 15px;
		overflow: hidden;
	}

	.post-preview a{
		font-size: 3.5vw;
		margin-bottom: .2rem;
	}

	.post-preview p{
		display: none;
		visibility: hidden;
	}

	.post-preview-date {
	    text-align: left;
	    font-size: .8rem;
	    margin-bottom: 0;
	}

	.show-header{
		margin-bottom: 0;
	}

	.show-header img{
		margin-bottom: 1rem;
	}

	.show-header .show-credits{
		margin-bottom: 0;
	}

	.show-header p{
		font-size: 1.5rem;
		font-weight: unset;
	}

	.show-attributes .show-attribute{
		min-width: 100%;
		text-align: center;
		/* margin-bottom: 1rem; */
	}

	.show-subscribe::before{
		left: 40;
	}

	#show-subscribe-panel{
		min-width: 100vw;
		max-width: 100vw;
	}

    .side-bar{
    	padding-left: 15px;
    }

    .sidebar-sub{
    	display: none;
    	visibility: hidden;
    }

    .top-nav{
    	display: none;
    	visibility: hidden;
    }

    #top-nav-shelf{
    	display: none;
    	visibility: hidden;
    }

    /* Plyr Overrides */

    [data-plyr="restart"]{
    	display: none;
    	visibility: hidden;
    }

    .plyr__time--duration{
        display: none;
        visibility: hidden;
    }

}

@media screen and (min-width: 960px) and (max-width: 1280px){

    .action-button{
    	font-size: 1.5vw;
    }

}