@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body{
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
main{
	position:relative;
	z-index:12;
	max-width:1130px;
	margin: 0 auto;
	margin-top:15px;
}

/* HEADER STYLES */
header{
	max-width:1130px;
	margin: 0 auto;
	position:relative;
	z-index:50;
	font-family: 'Bebas Neue', sans-serif;
	height:225px;
	word-spacing: .3em;
}
#layout-topbar1{
	height:84px;
	background:#f7e6cd;
	width:100%;
	float:left;
}
#layout-topbar2{
	height:78px;
	background:#1a1919;
	width:100%;
	float:left;
}
#logo{
	width:210px;
	height:253px;
	left:5px;
	background:url('images/logo.svg');
	position:absolute;
	background-size:210px 253px;
	top:-30px;
}
#logotext{
	width: 400px;
	height: 65px;
	background:url('images/logotext.svg') no-repeat left/contain;
	position:absolute;
	top:90px;
	left:220px;
}
header a, #menu a{
	text-decoration:none;
}
#currentpromo, #top-space { margin: -2.5em auto 1em; text-align: center; }
#currentpromo img {
    transition: ease-in 200ms;
    z-index: 50;
    position: relative;
	max-width: 100%; }
#currentpromo a:hover img { transform: scale(1.1); }
#menu{
	color:#1a1919;
	position:relative;
	z-index:60;
	font-family: 'Bebas Neue', sans-serif;
	max-width:1130px;
	width:100%;
	margin: 0 auto;
	word-spacing: .3em;
}
#aboutmenu{
	display:none;
	position:absolute;
	background:#ffb400;
}
#aboutmenu a{
	padding:5px;
}
#aboutmenu a:hover{
	color:#ffffff;
	transition: color .2s;
}
#menu a{
	color:#0E0E0E;
}
#menu a:hover{
	transition: background-color .4s;
	background-color:#ffb400;
}
#menu ul li{
	float:right;
}
ul#menu li:first-child{
	margin-left:220px;
}
#topbuttons{
	position:absolute;
	bottom:13px;
	right:0px;
}
#topbuttons a{
	padding:10px;
	border:4px solid black;
	border-radius:1vw;
	margin:5px;
	font-size:18px;
	color:black;
	cursor:pointer;
}
#topbuttons a:hover{
	background:#000;
	color:#fff;
	transition:0.4s;
}
#socialbuttons{
	position:absolute;
	right:10px;
	top:93px;
	text-align:right;
	display: flex;
	justify-content: center;
}
#socialbuttons a{
	line-height:60px;
	color:#ffb300;
	margin-left:10px;
	font-size:60px;
}
#socialbuttons a:hover{
	color:#fff;
	transition:0.4s;
}
#socialbuttons a:hover svg g { fill: #fff; transition:0.4s; }
#whatishiveworks{
	display:none;
	top:110%;
	position:absolute;
	width:120%;
	right:3vw;
	background:#000;
	font-family: 'Bebas Neue', sans-serif;
	color:#fff;
	padding:2vw;
	border-radius:10px;
	word-spacing: .3em;
}
.black{
	background:#000;
	color:#fff !important;
}


/* HAMBURGER MENU STYLES */
.menu-collapser{
	position:relative;	font-family: 'Bebas Neue', sans-serif;	z-index:60; top:42px;	padding:0 8px;	font-size:40px;	line-height:82px; text-align:right;	box-sizing:border-box;	-moz-box-sizing:border-box;	-webkit-box-sizing:border-box;
	word-spacing: .3em;}
.collapse-button{
	position:absolute;	right:8px;	top:50%;	width:72px;	padding:10px 13px;	font-size:14px;	text-align:center;	background-color:#0E0E0E;	border-radius:6px;	cursor:pointer;	transform:translate(0, -50%);
	-o-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.collapse-button:hover,.collapse-button:focus{color:#FFF;background-color:#040404}
.collapse-button .icon-bar{display:block;height:6px;width:46px;margin:5px 0;background-color:#f7e6cd;}
ul.slimmenu{width:100%;margin:0;padding:0;list-style-type:none; background:#0e0e0e;
	height:0px}
ul.slimmenu:before,ul.slimmenu:after{content:'';display:table}
ul.slimmenu:after{clear:both}
ul.slimmenu.collapsed li{display:block;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background:#0e0e0e; color:#fff !imp;}
ul.slimmenu.collapsed li>ul{position:static;display:none}
ul.slimmenu.collapsed li a{display:block;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;color:#fff !important;}
ul.slimmenu.collapsed li .sub-toggle{height:40px}
ul.slimmenu.collapsed li:first-child{margin-left:0px !important;}
ul.slimmenu li{position:relative;display:inline-block;}
ul.slimmenu.collapsed li{float:left;}
ul.slimmenu li ul{margin:0;list-style-type:none}
ul.slimmenu li ul li{background:#bbbbbb}
ul.slimmenu li>ul{position:absolute;left:0;top:100%;z-index:999;display:none;width:100%}
ul.slimmenu li>ul>li ul{position:absolute;left:100%;top:0;z-index:999;display:none;width:100%}
ul.slimmenu li a{display:block;padding:44px 10px 8px 10px;font-size:24px;font-weight:400;transition:background-color 0.5s ease-out;-o-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-webkit-transition:background-color 0.5s ease-out}
ul.slimmenu.collapsed li a{padding-top:12px;}
ul.slimmenu li a:hover{text-decoration:none;}
ul.slimmenu li .sub-toggle{background:none repeat scroll 0 0 rgba(0,0,0,0.075);position:absolute;right:0;top:0;z-index:999;width:48px;height:100%;text-align:center;cursor:pointer}
ul.slimmenu li .sub-toggle:before{content:'';display:inline-block;height:100%;margin-right:-0.25em;vertical-align:middle}
ul.slimmenu li .sub-toggle>i{display:inline-block;color:#333;font-size:18px;vertical-align:middle}
ul.slimmenu>li:first-child,ul.slimmenu>li.has-submenu+li{border-left:0}


/* HEADER ELEMENT RESIZING */
@media screen and (max-width:1000px){

	ul.slimmenu{
		height:auto;
	}
	#aboutmenu{
		position:relative;
	}
}
@media screen and (max-width: 800px) {
	#socialbuttons{
		top:15px;
		left:210px;
		text-align:left;
	}
	#socialbuttons a, 
	#socialbuttons a svg g{
		color:#0e0e0e;
		fill:#0e0e0e;
	}
	#layout-topbar1{
		top:0px;
	}
	#layout-topbar2{
		top:0px;
	}
}
@media screen and (max-width:620px) {
	#logo{
		width:168px;
		height:202px;
		background-size:168px 202px;
		top:-24px;
	}
	#logotext{
		width:360px;
		height:45px;
		top:71px;
		left:176px;
	}
	#currentpromo, #top-space { margin: 1em; text-align: center; }
	#layout-topbar1{
		height:67px;
	}
	#layout-topbar2{
		height:55px;
	}
	.collapse-button{
		right:5px;
		width:54px;
		padding:7px 10px;
	}
	.collapse-button .icon-bar{
		height:4px;
		width:34px;
	}
	.menu-collapser{
		top:34px;
	}
	header{
		height:178px;
	}
	#socialbuttons{
		left:169px;
		top:17px;
		z-index:70;
	}
	#socialbuttons a{
		font-size:50px;
		line-height:50px;
	}
	#topbuttons a{
		font-size:15px;
		padding:6px;
		border:3px solid black;
	}
}
@media screen and (max-width:470px){
	#logo{
		width:126px;
		height:152px;
		background-size:126px 152px;
		top:-18px;
	}
	#logotext{
		top:52px;
		left:132px;
		width: 275px;
		height: 35px;
	}
	#layout-topbar1{
		height:50px;
	}
	#layout-topbar2{
		height:41px;
	}
	.collapse-button{
		width:41px;
		padding:5px 8px;
	}
	.collapse-button .icon-bar{
		height:3px;
		width:26px;
	}
	.menu-collapser{
		top:25px;
	}
	header{
		height:134px;
	}
	#socialbuttons{
		left:127px;
		top:9px;
	}
	#socialbuttons a{
		font-size:37px;
		line-height:37px;
		margin-left: 5px;
	}
	#socialbuttons a svg { height: 37px; width: 37px;}
	#topbuttons{
		bottom:13px;
	}
	#topbuttons a{
		font-size:13px;
		padding:5px;
	}
}
@media screen and (max-width:400px){
	#topbuttons{
		bottom:17px;
	}
	#topbuttons a{
		font-size:11px;
		padding:4px 2px;
		right:2px;
		margin: 1px;
		border:2px solid black;
	}
	#logotext{
		width: 140px;
		top:53px;
	}
}

/* STYLES FOR THE TOP BOX */
#topwrap{
	max-width:1130px;
	margin: 0 auto;
	height:460px;
}
#topwrap img{
	height:100%;
	width: auto;
	margin-left: -110px;
}
#topwrap #completedbutton img{
	margin-left: -180px;
}
#topwrap .rotationslide img { margin-left: 0; }
#rotation{
	height:460px;
	width:805px;
	float:left;
	overflow:hidden;
}
.slick-prev{
	left:10px !important;
	z-index:20;
}
.slick-next{
	right:10px !important;
	z-index:20;
}
#rightside{
	float:right;
	width:308px;
	height:460px;
}
#topwrap #originalsbutton, #topwrap #kidsbutton, #topwrap #completedbutton{
	margin-bottom:12px;
}
#topwrap .catbutton{
	width:100%;
	position:relative;
	height:117px;
	display:block;
	overflow:hidden;
	margin-bottom:12px;
}
.catbutton img{
	width:100%;
	
}
#sortmenus{
	width:100%;
	height:90px;
}
#sortmenuleft{
	float:left;
	width:48%
}
#sortmenuright{
	float:right;
	width:48%
}
.sortdropdown{
	width:100%;
	height:30px;
	margin-bottom:12px;
	border:1px solid black;
	position:relative;
	font-family: 'Bebas Neue', sans-serif;
		display:flex;
		align-items: center;
	box-sizing:border-box;
		justify-content:space-between;
		cursor:pointer;
	word-spacing: .3em;
}
.sortdropdown .arrow{
	height:28px;
	width:30px;
	display:block;
	background:#ffb300;
}
.arrow span{
	font-size:20px;
	padding:4px 5px;
}
.sortoptions{
	position:absolute;
	top:100%;
	width:calc(100% + 2px);
	left:-1px;
	max-height:200px;
	background:#fff;
	border-width: 0px 1px 1px 1px;
	border-style:solid;
	display:none;
	z-index:10;
	overflow-y:auto;
	overflow-x:hidden;
	box-sizing:border-box;
}
.sortoptions::-webkit-scrollbar {
    width: 12px;
}
 
.sortoptions::-webkit-scrollbar-track {
  background:transparent;
}
 
.sortoptions::-webkit-scrollbar-thumb {
    background:#000;
	cursor:default !important;
}
.sortoptions::-webkit-scrollbar-button {
    background: transparent;
	height:0px;
}
.sortoptions a{
	text-decoration:none;
	color:black;
	display:block;
	font-size:20px;
	padding:0px 10px;
	line-height:27px;
}
.sortoptions a:hover{
	background:#ffb300;
}
.dropdowntext{
	margin-left:.5vw;
	font-size: 1.5em;
}
#updatedayselect{
	width:100%;
	height:60px;
	background:#1a1919;
	margin-top:20px;
	display:flex;
	justify-content:center;
}
#updatedayselect a{
	height:60px;
	text-decoration:none;
	font-family: 'Bebas Neue', sans-serif;
	line-height:60px;
	padding:0px 10px;
	color:#fff;
	font-size:26px;
	word-spacing: .3em;
}
#updatedayselect a:hover{
	background:#ffb400;
	transition:0.3s;
}
#updatedayselect .selected{
	background:#ffb400;
}
#updatedaydropdown{
	display:none;
}
.catbutton{
	color:#fff;
	text-decoration:none;
}
.buttonoverlay{
	width:150%;
	background:url('images/transparency.png');
	height:100%;
	position:absolute;
	left:-100%;
	top:0;
	display:flex;
	align-items:center;
}
.catdescription{
	width:60%;
	left:3%;
	font-size:11px;
	height:85%;
	position:absolute;
	display:block;
	text-decoration:none;
	color:#fff;
	word-spacing: .3em;
}
.cattitle{
	font-family: 'Bebas Neue', sans-serif;
	text-align:center;
	width:33%;
	position:absolute;
	right:0;
	font-size:26px;
	word-spacing: .3em;
}

/* TOP BOX RESIZING */

@media screen and (max-width:1130px){
	#topbuttons a{
		border-radius:1vw;
	}
	.arrow{
		background:transparent !important;
	}
	#topwrap{
		max-width:1110px;
		height:auto;
		display:flex;
		align-content:stretch;
	}
	#rotation{
		width:64%;
		height:auto;
	}
	#rightside{
		width:36%;
		height:auto;
	}
	#topwrap .catbutton{
		margin:0 !important;
	}
	#updatedayselect a{
		font-size:2.5vw;
	}
	#sortmenus{
		height:40%;
		margin:0;
		border-box:box-sizing;
	}
	#sortmenuright,#sortmenuleft{
		height:100%;
		width:45%;
	}
	#sortmenuleft{
		margin-left:3%;
	}
	#sortmenuright{
		margin-right:3%;
	}
	.sortdropdown{
		margin-top:5%;
		border-radius:1.5vw;
		height:41%;
		background:#191919;
		border:none;
		color:#fff;
		justify-content:center;
		font-size:2.5vw;
	}
	.fa-chevron-down{
		position:relative;
		font-size:2.5vw;
		padding-left:1vw;
	}
	.sortoptions{
		top:80%;
		width:100%;
		padding: 1vw 0vw;
		border:none;
		left:0px;
		border-radius:0px 0px 10px 10px;
		background:#191919;
	}
	.sortoptions::-webkit-scrollbar-thumb {
		background:#fff;
		border-radius:5px;
	}
	.sortoptions a{
		font-size:2.5vw;
		line-height:2.5vw;
		padding:1vw 1vw;
		color:#fff;
	}
	#updatedayselect{
		margin-top:0px;
	}
	.cattitle{
		font-size:2.6vw;
	}
	.catdescription{
		font-size:1.5vw;
	}
}
@media screen and (max-width:1130px){
	#topwrap{
		display:block;
	}
	#rotation{
		width:100%;
		clear:both;
	}
	#rightside{
		clear:both;
		width:100%;
		float:none;
	}
	#topwrap .cattitle{
		font-size:7vw;
	}
	#topwrap .catdescription{
		font-size:1em;
	}
	#sortmenus{
		height:auto;
		padding:1%;
		width:98%;
	}
	.sortdropdown{
		width:48%;
		margin:0;
		font-size:3vw;
		line-height:8vw;
	}
	#sortmenuleft,#sortmenuright{
		display:flex;
		justify-content:space-around;
		width:50%;
		height:auto;
		margin:0;
	}
	#sortmenuright{
		clear:right;
	}
	#updatedaydropdown{
		display:flex;
		align-items:center;
		justify-content:center;
		background:#1a1919;
		color:#fff;
		font-family: 'Bebas Neue', sans-serif;
		font-size:4.5vw;
		line-height:60px;
		height:60px;
		cursor:pointer;
	word-spacing: .3em;
	}
	#updatedayselect{
		display:none;
		text-align:center;
		height:auto;
	}
	#updatedayselect a{
		display:block;
		font-size:4.5vw;
	}
	.cattitle{
		font-size:4vw;
	}
}
@media screen and (max-width:600px){
	#sortmenuleft, #sortmenuright{
		width:100%;
	}
	.sortdropdown{
		font-size:4.5vw;
		line-height:10.5vw;
	}
	.sortoptions a{
		font-size:4vw;
		line-height:5vw;
	}
	#sortmenuright{
		margin-top:1vw;
	}
}

/* ROTATION SLIDE STYLING */
.rotationslide{
	position:relative;
}
.rotationslide .description{
  background:url('images/transparency.png');
  position:absolute;
  bottom:0;
  width:97%;
  padding:2% 1.5%;
  font-size:26px;
  font-family: 'Bebas Neue', sans-serif;
	word-spacing: .3em;
}
.rotationslide .yellowtext{
	color:#ffb300;
}
.rotationslide .title{
	color:#fff;
	float:right;
}
#merchblock img, #partnersblock img{
	width:100%;
}
#partnersblock{
	margin-bottom:20px;
}
#partnersblock a{
	width:25%;
	display:block;
	float:left;
}
#storeslider{
	width:calc(100%*(720/1130));
	float:left;
}
#merchslider{
	width:calc(100%*(410/1130));
	float:right;
	clear:right;
}
@media screen and (max-width:1300px){
	.rotationslide .description{
	font-size:2vw;
  }
}
@media screen and (max-width:800px){
	.rotationslide .description{
		font-size:3.5vw;
	}
}

/* COMIC GRID STUFF */
#comicgrid{
	max-width:1130px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top:20px;
	overflow:hidden;
	height:760px;
}
#completedcomicgrid{
	max-width:1130px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top:20px;
	overflow:hidden;
}
.comicblock{
	display:block;
	width:210px;
	height:175px;
	overflow:hidden;
	position:relative;
	margin-bottom:20px;
	max-width:300px;
}		
.comicblock img{
	width:100%;
	height:auto;
}
.comicrollover{
	width:100%;
	height:100%;
	position:absolute;
	background:url('images/transparency.png');
	top:100%;
	color:#fff;
	box-sizing:border-box;
	padding:3%;
	font-size:12px;
	border-right:5px solid #ffb300;
}
.mmrollover{
	border-right:5px solid #86728a !important;
}
.comicrollover h1{
	color:#ffb300;
	font-family: 'Bebas Neue', sans-serif;
	padding-top:0px;
	margin-top:0px;
	font-size:16px;
	margin-bottom:2px;
	text-decoration:none;
	word-spacing: .3em;
}
.mmrollover h1{
	color:#86728a;
	background-image: url('images/mmskull.png');
	background-position: top right;
	background-repeat:no-repeat;
	background-size: 20px auto;
}
.comicrollover .comiclink{
	text-decoration:none;
	color:#fff;
	display:block;
	height:70%;
	font-size:.9em;
}
.comicrollover h2{
	font-size:12px;
	margin-top:0px;
	margin-bottom:2px;
	font-weight:bold;
}
.comicabout{
	width:30%;
	display:block;
	color:black;
	background: #ffb300;
	border-radius:5px;
	line-height:30px;
	font-weight:bold;
	text-align:center;
	position:absolute;
	bottom: 3%;
	text-decoration:none;
}
.mmrollover .comicabout{
	background:#86728a;
}
.comicrating{
	width:62%;
	text-align:right;
	color: #ffb300;
	line-height:30px;
	position:absolute;
	bottom:3%;
	right:3%;
}
.mmrollover .comicrating{
	color:#86728a;
}
@media screen and (max-width:1130px){
	.comicblock{
		display:inline-block;
		width:20%;
		height:auto;
		margin-bottom:0px;
	}
}
@media screen and (max-width:616px){
	.comicrollover{
		font-size:10px;
	}
	.comicrollover h1{
		font-size:18px;
	}
	.mmrollover h1{
		background-size:21px 23px;
	}
	.comicrollover h2{
		font-size:12px;
	}
	.comicabout, .comicrating{
		line-height:20px;
	}
}
@media screen and (max-width:1050px){
	.comicblock{
		width:25%;
	}
}
@media screen and (max-width:900px){
	.comicblock{
		width:calc(100%/3);
	}
}
@media screen and (max-width:600px){
	.comicblock{
		width:50%;
	}
	#partnersblock a{
		width:50%;
	}
}
@media screen and (max-width:300px){
	.comicblock{
		width:100%;
	}
}
a#morecomics{
	font-family: 'Bebas Neue', sans-serif;
	font-size:26px;
	cursor:pointer;
	text-decoration:none;
	float:right;
	clear:right;
	margin-right:5px;
	padding:10px;
	border-radius:15px;
	border:4px solid black;
	margin-top:10px;
	word-spacing: .3em;
}
a#morecomics:hover{
	background:black;
	color:white;
	transition:.5s;
}

.homepageheader{
	background:#1a1919;
	line-height:60px;
	font-size:30px;
	font-family: 'Bebas Neue', sans-serif;
	color:#fff;
	padding:0px 15px;
	margin-top:10px;
	word-spacing: .3em;
}
#moremerch { 
	background: #ffb300;
    line-height: 60px;
    font-size: 30px;
    font-family: 'Bebas Neue', sans-serif;
    color: #fff;
    padding: 0px 15px;
    margin: -1px 0 1;
    word-spacing: 0.3em;
    text-align: right;
}
#moremerch a { color: #000; text-decoration: none; }
#moremerch a:hover { text-decoration: underline; }
#merchblock { max-height: 200px; overflow: hidden;}

#newsletter { max-width: 700px; margin: 0 auto; }

footer{
	width:100%;
	background:#1a1919;
	margin-top:30px;
	font-family: 'Bebas Neue', sans-serif;
	position:relative;
	word-spacing: .3em;
}
#footerwrap{
	max-width:1110px;
	margin: 0 auto;
	padding:30px 0px;
}
#footerleft{
	float:left;
	width:370px;
}
#footerleft .col{
	width:130px;
	float:left;
	position:relative;
}
#footerleft #footerstore{
	width:110px;
}
#footerleft h1{
	color: #ffb300;
	margin:0;
	font-size:22px;
	letter-spacing:1px;
}
#footerleft a{
	display:block;
	color:#fff;
	text-decoration:none;
}
#footerright{
	float:right;
	width:740px;
}
#leaderboard, #bottom-spot{
	width:728px;
	height:90px;
	background: #ffb300;
	border-radius:6px;
	padding:6px;
}
#copyright{
	text-align:right;
	color:#fff;
	margin-top:3px;
}
#copyright a{
	color:#ffb300;
	text-decoration:none;
}
.footerexpand{
	display:none;
}
@media screen and (max-width:1130px){
	#comicgrid{
		display:block;
	}
	.comicblock{
		float:left;
	}
	.homepageheader{
		padding:0 1vw;
		margin-top:10px;
	}
	.footerexpand{		
		width:6vw;
		height:5vw;
		position:absolute;
		display:block;
		right:1vw;
		top:3.2vw;
		cursor:pointer;
	}
	.footerbar{
		width:6vw;
		height:.8vw;
		margin-top:.8vw;
		background:#ffb300;
		display:block;
	}
	#footerwrap{
		padding:0vw 0vw 2vw 0vw;
	}
	#leaderboard, #bottom-spot{
		display:none;
	}
	.expandthis{
		display:none;
	}
	#footerright,#footerleft{
		float:none;
		width:100%;
		clear:both;
	}
	#footerleft .col, #footerleft #footerstore{
		width:33.3%;
		padding:0vw 1vw;
		box-sizing:border-box;
		font-size:4vw;
		line-height:8vw;
	}
	#footerleft h1{
		line-height:12vw;
		font-size:3.6vw;
		cursor:pointer;
	}
	#footerstore,#footerhiveworks{
		border-right:1vw solid #ffb300;
	}
	#copyright{
		width:100%;
		text-align:center;
		padding:1vw;
		font-size:3vw;
	}
}

/* SIDE PAGE STYLES */
#sidepagetop{
	width:100%;
	display:flex;
	margin-bottom:20px;
	justify-content:space-between;
}
#sidepagetop .catbutton{
	width:370px;
	margin-right:10px;
	height:auto;
	position:relative;
	overflow:hidden;
}
#sidepagetop #hiatusbutton{
	margin-right:0px;
}
#sidepagetop .buttonoverlay{
	height:100%;
}
.sidepageheader{
	background:#1a1919;
	line-height:60px;
	font-size:30px;
	font-family: 'Bebas Neue', sans-serif;
	color:#fff;
	padding:0px 15px;
	margin-bottom:20px;
	text-align:center;
	word-spacing: .3em;
}
.textwrap{
	box-sizing:border-box;
	border:3px solid black;
	padding:20px;
	font-size:18px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.textwrap a{
	color:#000;
}
.textwrap img{
	max-width:100%;
}
.sidepagetopper{
	width:100%;
	position:relative;
}
.sidepagetopper img{
	width:100%;
	height:auto;
}
.topperleft{
	width:40%;
	z-index:10;
	background:url('images/transparency.png');
	height:100%;
	position:absolute;
	top:0px;
	padding:20px;
	box-sizing:border-box;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
}
.topperleft h1{
	color:#ffb300;
	font-family: 'Bebas Neue', sans-serif;
	font-size:30px;
	word-spacing: .3em;
}
#originalscomicgrid{
	width:100%;
}
.originalsblock{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	margin-top:20px;
}
.originalsblock img{
	width:100%;
	height:auto;
}
.originalsoverlay{
	width:100%;
	position:absolute;
	left:-100%;
	top:0;
	height:100%;
	background:url('images/transparency.png');
	box-sizing:border-box;
	border-right:25px solid #ffb400;
}
.originalsoverlay .col1{
	width:50%;
	margin-left:2%;
	margin-top:2%;
	float:left;
}
.originalsoverlay .header{
	font-family: 'Bebas Neue', sans-serif;
	font-size:30px;
	line-height:40px;
	vertical-align:middle;
	color:#ffb400;
	word-spacing: .3em;
}
.originalsoverlay .byline{
	font-size:24px;
	line-height:40px;
	vertical-align:middle;
	margin-left:5px;
	color:#fff;
}
.originalsoverlay .description{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	margin-top:10px;
}
.originalsoverlay .col2{
	margin-left:2%;
	margin-top:2%;
	float:left;
	width:15%;
	color:#ffb400;
}
.originalsoverlay .col2 .agegroup{
	color:#fff;
}
.originalsoverlay .col2 a{
	padding:7px;
	border-radius:5px;
	display:block;
	margin-bottom:4%;
	font-size:28px;
	text-align:center;
	text-decoration:none;
	font-family: 'Bebas Neue', sans-serif;
	color:#000;
	background:#ffb400;
	word-spacing: .3em;
}
.originalsoverlay .col3{
	width:28%;
	position:absolute;
	right:1%;
	bottom:0px;
}
.originalsoverlay .col3 img{
	position:absolute;
	bottom:0px;
	right:0px;
	max-width:100%;
	height:auto;
}
#kidscomicgrid{
	width:100%;
	margin-top:20px;
	max-width:1130px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#kidscomicgrid .comicblock{
	max-width:365px;
	width:365px;
	height:auto;
}
#kidscomicgrid .comicblock img{
	width:100%;
	height:auto;
}
#kidscomicgrid .comicrollover h1{
	font-size:36px;
}
#kidscomicgrid .comicrollover h2{
	font-size:20px;
	font-weight:normal;
}
#kidscomicgrid .comicrollover{
	font-size:14px;
	border-right:8px solid #ffb300;
}
#kidscomicgrid .comicrollover .genre{
	margin-top:10px;
	color:#ffb400;
}
#kidscomicgrid .description{
	width:60%;
}
.kidscharacter{
	width:65%;
	position:absolute;
	bottom:0%;
	right:0;
}


@media screen and (max-width:1130px){
	#kidscomicgrid .comicblock{
		max-width:calc(1/3*100%);
		width:calc(1/3*100%);
	}
	#kidscomicgrid .comicrollover h1{
		font-size:3.5vw;
	}
	#kidscomicgrid .comicrollover h2{
		font-size:1.8vw;
	}
	#kidscomicgrid .comicrollover{
		font-size:1.3vw;
		border-right:1vw solid #ffb300;
	}
	#kidscomicgrid .comicrollover .genre{
		margin-top:1vw;
		color:#ffb400;
	}
	.topperleft{
		font-size:1.5vw;
		padding:1vw 2vw;
	}
	.topperleft h1{
		font-size:3vw;
	}
	#sidepagetop{
		margin-bottom:2vw;
	}
	#sidepagetop .cattitle{
		font-size:2vw;
	}
	#sidepagetop .catdescription{
		font-size:1.2vw;
	}
	#sidepagetop .catbutton{
		margin:0;
	}
	.sidepageheader{
		font-size:4vw;
		line-height:8vw;
		padding:0 1vw;
		margin-top:10px;
		margin-bottom:2vw;
	}
	.textwrap{
		font-size:1.1em;
	}
	.originalsoverlay .header{
		font-size:3vw;
		line-height:4vw;
	}
	.originalsoverlay .byline{
		font-size:2.2vw;
		margin-left:.5vw;
		line-height:4vw;
	}
	.originalsoverlay .description{
		font-size:1.3vw;
		margin-top:1vw;
	}
	.originalsoverlay .col2 a{
		padding:.7vw;
		border-radius:.5vw;
		font-size:2.5vw;
	}
	.originalsoverlay .col2 p{
		font-size:1.3vw;
	}
	.originalsoverlay{
		border-right:2.5vw solid #ffb400;
	}
}
@media screen and (max-width:900px){
	.topperleft h1{
		font-size:2.5vw;
		margin-bottom:0;
		margin-top:1vw;
	}
	.topperleft p{
		margin-top:1vw;
		font-size:1.8vw;
	}
	#sidepagetop{
		display:block;
		height:auto;
	}
	#sidepagetop .catbutton{
		width:50%;
		float:left;
	}
	div#sidepagetop .catbutton:nth-child(5)
	{
		width: 100%;
		height: 75px;
	}
	#sidepagetop .cattitle{
		font-size:4vw;
	}
	#sidepagetop .catdescription{
		font-size:2.3vw;
	}
}
@media screen and (max-width:800px){
	#kidscomicgrid .comicblock{
		width:50%;
		max-width:50%;
	}
	#kidscomicgrid .comicrollover h1{
		font-size:5.5vw;
	}
	#kidscomicgrid .comicrollover h2{
		font-size:2.8vw;
	}
	#kidscomicgrid .comicrollover{
		font-size:1.8vw;
		border-right:1vw solid #ffb300;
	}
	#kidscomicgrid .comicrollover .genre{
		margin-top:1vw;
		color:#ffb400;
	}
}
@media screen and (max-width:600px){
	.originalsblock{
		margin-top:1vw;
	}
	.originalsoverlay .col1{
		width:97%;
	}
	.originalsoverlay .header{
		width:39%;
		text-align:center;
		font-size:2.5vw;
		line-height:3vw;
	}
	.originalsoverlay .byline{
		font-size:1.5vw;
		line-height:3vw;
	}
	
	.originalsoverlay .description{
		font-size:1.8vw;
		width:58%;
		top:0vw;
		right:1%;
		position:absolute;
	}
	.originalsoverlay .col2{
		width:36%;
		position:absolute;
		left:0vw;
		top:5vw;
	}
	.originalsoverlay .col2 a{
		width:100%;
		font-size:3vw;
		float:left;
		font-size:3vw;
	}
	.originalsoverlay .col2 p{
		display:none;
	}
	.originalsoverlay .col3{
		display:none;
	}
}
@media screen and (max-width:420px){
	#kidscomicgrid .comicblock{
		width:100%;
		max-width:100%;
	}
	#kidscomicgrid .comicrollover h1{
		font-size:10vw;
	}
	#kidscomicgrid .comicrollover h2{
		font-size:5.8vw;
	}
	#kidscomicgrid .comicrollover{
		font-size:3.8vw;
		border-right:1vw solid #ffb300;
	}
	#kidscomicgrid .comicrollover .genre{
		margin-top:1vw;
		color:#ffb400;
	}
}

/* STAFF PAGE HEXES *//* Thanks to dmac37 for this hex technique */

#staffhexes {
  margin: 0 auto;
  text-align: center;
  width: 1130px;
  margin-top:-100px;
//  min-height:730px;
}

.hex_row_even {
  display: inline-block;
  margin: 0 auto -250px auto;
  overflow: hidden;
}

.hex_row_odd {
  display: inline-block;
  margin: 0 auto -250px auto;
  overflow: hidden;
}

.center {
  float: left;
  margin: 20px 10px;
  width: 200px;
}

.hexagon {
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
  height: 400px;
  overflow: hidden;
  visibility: hidden;
  width: 200px;
}

.hex1 {
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.hex2 {
	background-position:center;
	background-repeat:no-repeat;
	background-size: 15em;
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  height: 100%;
  /*@include background-size(($width + ($width * .20)) ($width + ($width * .20)));
  background-position: 50%;*/
  position: relative;
  visibility: visible;
  width: 100%;
}

/* STAFF IMAGES */
.isa{
	background-image:url('images/staff/Isa.png');
}
.xel{
	background-image:url('images/staff/Xel.png');
}
.megan{
	background-image:url('images/staff/Meg.png');
}
.kisai{
	background-image:url('images/staff/Kis.png');
}
.beegirl{
	background-image:url('images/staff/Abee.png');
}
.kevin{
	background-image:url('images/staff/Kev.png');
}
.kiri{
	background-image:url('images/staff/Kiri.png');
}
.atla{
	background-image:url('images/staff/Atl.png');
}
.reimena{
	background-image:url('images/staff/Ena.png');
}
.ren{
	background-image:url('images/staff/Ren.png');
}
.gisele{
	background-image:url('images/staff/Gis.png');
}
.misha{
	background-image:url('images/staff/Mis.png');
}
.katie{
	background-image:url('images/staff/KT.png');
}
.brad{
	background-image:url('images/staff/Brad.png');
}
.collaboratorsandconsultants{
	background-image:url('images/staff/collaboratorsandconsultants.jpg');
}
.partners{
	background-image:url('images/staff/partners.jpg');
}

.desc {
	display:block;
	text-decoration:none;
  color: white;
  font-family: 'Bebas', sans-serif;
  font-size: 1.2em;
  font-weight: 300;
  height: 330px;
  line-height: 1.6em;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  width: 200px;
  top:100%;
	background:url('images/transparency.png');
	word-spacing: .3em;
}
.desc h2 {
  margin: 165px 5px 0 5px;
}
.desc p {
  font-size: .8em;
  text-transform: lowercase;
  line-height:1em;
}
.staffname{
	font-weight:bold;
}
.staffname a{
	margin-left:20px;
	text-decoration:none;
	font-weight:normal;
	color:#000;
}
.collaboratorsandconsultants .desc,.partners .desc{
	background:rgba(255,180,0,.75);
}





@media screen and (max-width:2160px){
	#staffhexes {
		height:730px;
	}

}

@media screen and (max-width:1130px){

	.center{
		width:18vw;
		margin:1.3vw .4vw;
	}
	.hexagon{
		height:36vw;
		width:18vw;
	}
	.hex_row_even, .hex_row_odd{
		margin-bottom:-22.5vw;
	}
	#staffhexes{
		width:100%;
		height:62vw;

		margin-top:-8vw;
		float:left;
	}
	.hex2{
		background-size:24vw;
	}
	#staffhexes h2 img{
		width:70%;
		height:auto;
	}
	.desc{
		width:18vw;
		height:29vw;
	}
	.desc h2{
		font-size:2.5vw;
		line-height:2.7vw;
		margin:15vw 0vw 0vw 0vw;
	}
	.desc p{
		font-size:1.5vw;
		line-height:1.5vw;
	}
}



	.aboutitem{
box-sizing: border-box;display: table-cell;text-align:center;width:calc( 50% - 20px );
	}

@media screen and (max-width:480px){
	.aboutitem{
box-sizing: border-box;display: table-cell;text-align:center;width:calc( 100% - 20px );
	}

}



/* COMICCONTROL STYLES */

.cc-blogtitle, .cc-blogtitle a{
	font-family: 'Bebas Neue', sans-serif;
	font-size:4vh;
	text-decoration:none;
	word-spacing: .3em;
}