/* Remove content class from article. */

:root {
	--background: rgb(238 235 241);
	--colDark: rgb(46 12 86);
	--colMid: rgb(81 52 119);
	--colLight: rgb(255 255 255);
}

/* ************************* X/EX Killer ************************* */
@media screen 	and (max-width: 590px) { [role="main"] { margin-top: unset; } }
#main.content { padding: 5px 20px !important; 	} 
#main.content.mainSubContent {
	padding: 20px !important;
}
@media screen and (max-width: 868px) { .content, #comments { padding: unset; max-width: 720px; width: 100%; } }

body {
	background: var(--background);
	font: 16px/1.4em trade-gothic-next, sans-serif;
	overflow-x: hidden;
}

/* ************************************** NEW NAV ************************************** */  
		
#mojoHeaderVersion {
	background: var(--colMid);
	display: none;
}

#woot {
	bottom: 5px;
	right: 5px;
}

#mojoHeaderNavList.tabList a, #mojoHeaderNavList.tabList label {
	border-radius: 0;
	font: 200 15px/25px tgn-soft-round, sans-serif;
}

img:not(.avatar-big),
.news-gallery-image img {
	border-radius: 0;
	border-bottom: 3px solid var(--colMid);
	height: unset;
	max-width: 100%;
	width: 100%;
}

img.emoji {
	border: 0;
	width: 28px;
}

.tabList li {
	display: block;
}

#mojoHeaderNavList.tabList .popupMenu a {
	color: var(--colDark);
	display: grid;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
	text-align: left;
	text-decoration: none;
	text-transform: unset;
	margin: 0;
}

[type="submit"],
[type="button"] {
	background: var(--colDark);
}

/* ************************* New Header ************************* */

#mojoHeader {
	background: var(--colDark);
}

#mojoHeaderInner {
	height: 100%;
	margin: 0 auto;
	max-width: 720px;
	padding: 5px 20px;
	position: relative;
}

#mojoHeaderNav {
	background: transparent;
	left: unset;
	margin: 0;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: min-content;
}

	#mojoHeaderNavList.tabList {
		width: unset;
	}
	
	#mojoHeaderNavList.tabList #patreonList a {
		padding-right: 0;
	}

#mojoHeaderTitle {
	background: url(/_theme/EX2mojOS.Images/logo.webp) 0 0 no-repeat;
	background-size: 120px;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

#mobileMenu {
	display: none;
}

	@media screen and (max-width: 740px) {
		#mojoHeaderNavList.tabList {
			display: none;
		}
		
		#mobileMenu {
			display: block;
			margin: 0;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
		}
		
			#mobileMenu button {
				background: transparent;
				border: 0;
				color: rgb(255 255 255);
				font-size: 24px;
				font-weight: bold;
				height: 48px;
				line-height: 1em;
				overflow: hidden;
				padding: 0;
				position: relative;
				transition: .2s var(--cubic);
				width: 48px;
			}
			
			#mobileMenuButton span {
				display: none;
			}
			
		#mobileMenuSub {
			font-size: 14px;
			left: unset;
			list-style: none;
			right: 32px;
			text-align: left;
			top: 32px;
			width: 200px;
		}
			
		#behindLink {
			background-size: contain;
			height: 38px;
			width: 36px;
		}
	}

	@media screen and (max-width: 590px) {
		#mojoHeaderTitle {
			left: 20px;
			margin-left: unset;
		}
	}

/* ************************* Front Page Highlights Menu ************************* */

#plusFeatures {
	background: var(--colMid);
}

#mojoMenu {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, auto);
	list-style: none;
	margin: 0 auto;
	padding: 10px 20px;
	max-width: 720px;
}

	#mojoMenu>li {
		margin: 0;
		padding: 10px 10px 10px 0;
	}
	
	#mojoMenu>li:last-of-type {
		padding: 10px 0 10px 5px;
		position: relative;
		width: 250px;
	}

#mojoMenu form p {
	margin: 0;
}
	
#mojoMenu input,
#mainFooterSearchField,
.filterSelect {
	border: 2px solid rgb(0 0 0);
	border-radius: 0;
	font-size: 14px;
	padding: 5px;
	text-align: left;
	width: 100%;
}

	.filterSelect {
		background: rgb(255 255 255);
	}

#highlights { 
	display: grid; 
	gap: 5px; 
	grid-template-areas: 'bf1 bf2' 'bf3 bf4'; 
	grid-template-columns: repeat(2, 1fr); 
	grid-template-rows: repeat(2, auto); 
	list-style: none; 
	margin: 0 auto; 
	padding: 0; 
	position: relative; 
	width: 100%; 
}

#highlights figure {
	height: 100%; 
	margin: 0; 
	width: 100%; 
}  
#highlights li:nth-of-type(1) { grid-area: bf1; } 
#highlights li:nth-of-type(2) { grid-area: bf2; } 
#highlights li:nth-of-type(3) { grid-area: bf3; } 
#highlights li:nth-of-type(4) { grid-area: bf4; }  
#highlights li { 
	line-height: 0; 
	margin: 0; 
	padding: 0; 
	position: relative; 
} 
 
.popupMenu,
.popupMenu li {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

	.popupMenu li:nth-of-type(even) {
		background: rgb(255 255 255);
	}

.popupMenu {
	background: rgb(245 245 245);
	border: 2px solid rgb(0 0 0 / 90%);
	left: 10px;
	margin-top: 2px;
	position: absolute;
	width: calc(100% - 20px);
	z-index: 2;
}

.popupMenu[aria-hidden="true"] {
	visibility: hidden;
}

.popupMenu[aria-hidden="false"] {
	visibility: visible;
}

.popupMenu a {
	display: grid;
	grid-template-columns: 12px auto;
	gap: 10px;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
	text-align: left;
	text-decoration: none;
}

.popupMenu[aria-hidden="false"] a .checkbox {
	background: rgb(255 255 255);
	border: 2px solid rgb(0 0 0);
	display: block;
	height: 10px;
	margin-top: 3px;
	transition: .2s cubic-bezier(0.15, 1, 0.25, 2);
	width: 10px;
}

	.popupMenu a:hover .checkbox {
		transform: scale(1.4);
	}
	
	.popupMenu[aria-hidden="true"] .checkbox {display: none;}

.popupMenu li:last-of-type a {
	padding-bottom: 10px;
}
 
.popupMenu li:first-of-type .checkbox {
	border-radius: 10px;
}
 
#highlights img { 
	border: 2px solid rgb(0 0 0);
	border-radius: 0;
	box-shadow: unset;
	height: unset; 
	width: 100%; 
} 
 
#highlights figcaption { 
	background: rgb(255 255 255); 
	border: 2px solid rgb(0 0 0);
	bottom: 3px; 
	color: rgb(0 0 0); 
	font-size: 12px; 
	font-weight: 600; 
	line-height: 1em; 
	padding: 5px;  
	position: absolute;
	right: 3px;
	text-align: center; 
	transition: .2s cubic-bezier(0.15, 1, 0.25, 2); 
	white-space: nowrap; 
}

#featureLatest {
	color: var(--colLight);
	font-size: 14px;
	left: 50%;
	line-height: 1.4em;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: justify;
	top: 50%;
	transform: translate(-50%, -50%);
	text-shadow: rgb(0 0 0) 1px 1px 0;
	width: 90%;
}

	#featureLatest li {
		list-style: none;
		padding-bottom: 10px;
	}
	
		#featureLatest li:last-of-type {
			padding-bottom: 0;
		}

	#featureLatest a {
		color: var(--colBackground);
		display: block;
		text-decoration: none;
	}
	
	#featureLatest hr {
		margin: 10px auto;
	}

.socials,
.socials li {
	list-style: none;
	margin: 0;
	padding: 0;
}

	.socials {
		--socGap: 4px;
		bottom: 0;
		left: 50%;
		display: flex;
		/* gap: var(--socGap); */
		position: absolute;
		transform: translateX(-50%);
	}

	.socials li:first-of-type {
		padding-left: 4px;
	}

	.socials a {
		color: var(--colLight);
		display: block;
		font-size: 24px;
		line-height: 42px;
		text-align: center;
		text-shadow: rgb(0 0 0) 1px 1px 0;
		width: 55px;
	}

.fin {
	font-size: 48px;
	text-align: center;
}

@media(max-width: 700px) {
	#featureLatest {
		font-size: 12px;
	}
}

@media(max-width: 640px) {  
	#mojoMenu {
		grid-template-columns: 100%;
		grid-template-areas: repeat(2, auto);
	}

	#mojoMenu > li:last-of-type {
		width: 100%;
	}

	
	#mojoMenu input {
		font-size: 16px;
	}

	#highlights { 
	  gap: 15px 10px; 
	  grid-template-areas: 
	  'bf1 bf2'  
	  'bf3 bf4'; 
	  grid-template-columns: repeat(2, 1fr); 
	} 
 
	#highlights li figcaption { 
		bottom: -10px;
		left: 50%;
		padding: 3px 5px;
		transform: translateX(-50%);
		width: min-content;
	}
	
	#mojoMenu li {
		padding: 0;
	}
	
	#mojoMenu>li:last-of-type {
		padding: 20px 0 5px;
	}
	
	#featureLatest {
		display: grid;
		font-size: 13px;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		padding: 0 2px;
		position: relative;
		text-align: left;
		transform: translate(-50%, -95%);
		width: 100%;
	}
	
		#featureLatest hr {
			visibility: hidden;
			margin: 10px auto 0;
		}
	
	#mojoMenu .socials {
		bottom: -15px;
		display: grid;
		grid-template-columns: repeat(4, auto);
		position: relative;
		width: 220px;
	}
} 

/* ************************* X/EX Article Killer ************************* */

#main article {
	margin-bottom: 60px;
	/* padding: 10px 20px; */
	padding: 10px 0;
}

	#main article#comments {
		margin-bottom: 0;
	}

	#main.mainSubContent article:first-of-type {
		margin-bottom: 20px;
	}

.micro {
	background: var(--colLight);
	border-bottom: 2px solid var(--colMid);
	border-top: 2px solid var(--colMid);
}

#main article:first-of-type { margin-top: 10px; } 
#main article .articleHeaderHeading { margin-top: 0; width: unset; } 
/* #main article:first-of-type .articleHeaderCategoryHolder { margin-top: 10px; }  */

.articleHeader {
	padding: 0;
}

	.articleHeaderHeadingHolder {
		display: grid;
		gap: 10px;
		grid-template-columns: auto 80px;	
	}

		.articleHeaderHeading,
		body>footer h3 {
			font-family: tgn-soft-round, sans-serif;
			font-size: 22px;
			font-weight: 800;
		}
		
		.articleHeaderHeading span {
			color: rgb(0 0 0 / 75%);
		}

		.articleHeaderTime {
			font-size: 18px;
			margin: 3px 0 0;
		}

		.articleHeaderCategoryHolder {
			float: unset;
			margin: 0;
			position: relative;
			width: unset;
			z-index: 0;
		}

.news-blockquote,
.article .news-blockquote,
.feature-byline {
	background: rgb(255 255 255 / 95%);
	border-left: 3px solid var(--colMid);
	border-radius: 0;
	box-shadow: unset;
	color: rgb(50,50,50);
	margin: 20px auto;
	padding: 1px 15px 5px 15px;
	position: relative;
	width: 100%;
}

	.news-blockquoteauthor {color: unset;}

.bqauthor {
	background: var(--colDark);
	border: 2px solid rgb(0 0 0);
	color: var(--colLight);
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	padding: 3px 5px;
	position: absolute;
	right: 10px;
	top: -10px;
}

.comments li .comment-content .comment-text .news-blockquote .news-blockquoteauthor {
	font-size: 12px;
}

iframe, object, .embedVideo {
	border-bottom: 3px solid var(--colMid) !important;
	border-radius: 0;
	box-shadow: unset;
	display: block;
	margin: 20px auto;
	max-width: 100% !important;
}

iframe.twitterEmbed {
	border-bottom: 0 !important;
}

.embedAudio {
	max-width: 85%;
	width: unset;
}




.caption {
	background: var(--colLight);
	font-size: 12px;
	line-height: 1.3em;
	margin-top: -20px;
	padding: 10px;
}

.source {
	font-size: 12px;
	text-align: right;
}

.news-subline {
	background: rgb(255 255 255 / 95%);
	border-radius: 0;
	box-shadow: unset;
	color: rgb(0 0 0);
	display: grid;
	font-family: tgn-soft-round, sans-serif;
	font-size: 20px;
	font-weight: 800;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 20px;
	padding: 10px;
	text-align: left;
}

	.news-subline a {
		font-weight: 800;
		text-decoration: none;
	}

	.news-subline div:last-of-type {
		position: relative;
		text-align: right;
	}
	
	.news-subline div:last-of-type span {
		background: var(--colDark);
		border: 2px solid rgb(0 0 0);
		color: var(--colLight);
		font-size: 12px;
		font-weight: 600;
		line-height: 1em;
		padding: 5px;
		position: absolute;
		right: 0;
		top: -30px;
	}
	
	.news-subline div:last-of-type span[aria-hidden="true"] {
		opacity: 0;
		transform: scale(0);
		transition: .2s all;
		visibility: hidden;
	}
	
	.news-subline div:last-of-type span[aria-hidden="true"] {
		opacity: 1;
		transform: scale(1);
		visibility: hidden;
	}

@media(max-width: 640px) {  
	.articleText {
		font-size: 18px;
		line-height: 1.3em;
	}
}


.comments li,
.comments li:nth-child(even) {
	background: rgb(255 255 255);
	border-radius: 0;
	box-shadow: unset;
}

.articleHeaderHeadingCommentCount {
	margin-bottom: 25px;
}

.comments li .avatar-big,
.feature-byline img {
	box-shadow: unset;
	right: -10px;
	top: -10px;
}

	.feature-byline img {
		left: unset;
		right: -10px;
		width: 32px;
	}

.comments li .comment-content {
	color: rgb(0 0 0 / 75%);
}

.comments li .comment-content .comment-text .news-blockquote {
	background: rgb(253 250 255);
}

.commentformBB {
	background: var(--colLight);
	border-radius: 0;
	box-shadow: unset;
}

.article .input, 
.article textarea, 
.article [type="submit"], 
.article [type="button"],
.comment-quote-link a {
	border: 1px solid rgb(0 0 0);
	border-radius: 0;
}

.comment-quote-link a {
	background: var(--colDark);
}

#loginform2 {
	margin: 0 auto;
	width: 320px;
}

#loginform2 p {
	display: grid;
	gap: 6px;
	grid-template-areas: 'accountform_username2 accountform_username2' 
						'accountform_password2 accountform_submit2';
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
}

#accountform_username2 {grid-area: accountform_username2; width: 100%;}
#accountform_password2 {grid-area: accountform_password2;}
#accountform_submit2 {background: var(--colDark); font-family: trade-gothic-next, sans-serif; font-size: 18px; font-weight: bold; grid-area: accountform_submit2;}


.fileDownloader a {
	border: 0;
	border-left: 3px solid var(--colDark);
	border-radius: 0;
	box-shadow: unset;
}

	 .fileDownloader.compact a {
		 font-size: 16px;
		 font-weight: 500;
		 line-height: 1.3em;
	 }

@media(max-width: 600px) {
	.fileDownloader {
		grid-template-columns: 100%;
	}
}

/* ************************* X/EX Feature Killer ************************* */

.featureimage.featureimageHeader {
	border-radius: 0;
	box-shadow: unset;
}

.featureimage img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

ul.pagelisting {
	background: var(--colLight);
	border-radius: 0;
	box-shadow: none;
	margin: -30px 0 0 2.5%;
	padding: 0;
	position: relative;
	width: 95%;
	z-index: 1;
}

	ul.pagelisting li {
		border-bottom: 1px solid rgb(0 0 0 / 10%);
	}

		ul.pagelisting li a {
			border-radius: 0;
			padding: 10px;
			text-decoration: none;
		}

	ul.pagelisting li:last-of-type {
		border-bottom: 0;
	}

.toggler {
	background: var(--colLight);
	border-radius: 0;
	box-shadow: none;	
}

#mainFooter .socials {
	margin-left: -110px;
	position: relative;
	transform: unset;
	width: 225px;
}

	#mainFooter .socials li:first-of-type {
		padding-left: 0;
	}

	#mainFooter .socials a {
		color: var(--colDark);
		/* color: rgb(0 0 0 / 75%); */
		text-shadow: unset;
	}
	
@media(max-width: 640px) { 
	ul.pagelisting li {
		font-size: 14px;
	}
}

/* ************************* X/EX Media Killer ************************* */

.abitmore {
	display: none;
}

.media-description {
	background: var(--colLight);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mediacontent figure img {
	border-radius: 0;
	box-shadow: none;
}

/* ************************* X/EX Footer Killer ************************* */

#mainFooter .news-blockquote,
.innerFooter {
	max-width: 720px;
}

	.innerFooter {
		margin: 0 auto;
		padding: 0 20px;
	}

#mainFooter.content {
	padding-top: 0;
}

.community-item {
	margin-top: 0;
}

#friendsOfMojo,
.article table {
	border-collapse: separate;
	border-spacing: 0 1px;
	width: 100%;
}

#friendsOfMojo thead,
.article thead {
	display: none;
}

#friendsOfMojo tr,
.article table tbody tr,
.article table tbody tr:nth-child(odd)  {
	background: var(--colLight);
}

	#friendsOfMojo tr td:first-of-type,
	.article table tbody tr td:first-of-type  {
		border-left: 3px solid var(--colDark);
	}

	#friendsOfMojo td,
	.article table tbody tr td {
		padding: 15px;
	}

	#friendsOfMojo tr:nth-of-type(even),
	.article table tbody tr:nth-child(even)  {
		background: rgb(255 255 255 / 100%);	
	}
	
#mojoNetwork {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	max-width: 350px;
}

#mojoNetwork li {
	display: block;
	margin: 0 !important;
	width: unset;
}

#mojoNetwork h3 {
	margin-bottom: 0;	
}

@media(max-width: 640px) {  
	#mojoNetwork h3 {
		font-size: 14px;
		line-height: 1.2em;
	}
	
	.community-item {
		line-height: 1.3em;
		margin-top: 0;
	}
}

#lightboxContainer[aria-hidden="true"] * { display: none; }
#lightboxContainer[aria-hidden="false"] * { display: unset; }
#lightboxContainer img { height: unset; }

/* ************************* NEW CONTENT ************************* */

.text-post-media {
	width: 100% !important;
}	

/* ****************** BOX ART LIST ****************** */

.boxList {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

	.boxList li {
		background: var(--colLight);
		list-style: none;
		margin: 0;
		padding: 10px;
		text-align: center;
	}
	
	.boxList figure {
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
	
	.boxList img {
		height: 250px;
		width: unset;
	}
	
	.boxList span,
	.boxList time {
		background: var(--colLight);
		display: block;
	}

/* ************************* NEW PLAYER ************************* */

.glueTube {
	position: relative;
}

.playButton {
	background: rgb(255 0 0) url("/_theme/EXPlus/images/play.webp") 38px center no-repeat;
	background-size: 12px;
	border-radius: 20px;
	height: 60px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
}

#mdbVideoModal {
	background: rgb(255 255 255 / 90%);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
}

#mdbVideoModalInner {
	left: 50%;
	max-width: 700px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

#mdbVideoEmbed {
	height: auto;
	min-width: 300px;
	width: 100%;
}

	#mdbVideoModal[aria-hidden="true"] {
		display: none;
	}
	
	#mdbVideoModal[aria-hidden="false"] {
		display: block;
	}
	
	#mdbVideoModalInner p {
		padding-top: 50px;
		text-align: center;
	}
	
	#mdbVideoModalInner a {
		background: rgba(255,255,255,.3) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1cHgiIGhlaWdodD0iMjVweCIgdmlld0JveD0iMCAwIDI1IDI1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNSAyNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjI1IiB5Mj0iMjUiIC8+CjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIyNSIgeTE9IjAiIHgyPSIwIiB5Mj0iMjUiIC8+Cjwvc3ZnPg==) no-repeat center center;
		border: 0;
		border-radius: 50px;
		color: rgb(0 0 0);
		cursor: pointer;
		font-weight: bold;
		margin: 20px auto 0;
		outline: none;
		overflow: hidden;
		padding: 60px 0 0;
		text-decoration: none;
		text-indent: -100000px;
		transition: .15s transform;
		transform: scale(0);
		transition-delay: .15s;
	}
	
	iframe#mdbVideoEmbed {
		height: 500px;
		max-width: 600px;
		width: 600px;
	}
	
		@media(max-width: 650px) {
			iframe#mdbVideoEmbed {
				height: 200px;
				width: 300px;
			}
		}