.slick-arrow{
	width:50% !important;
	height:100% !important;
}
#startreadingx{
	position:absolute;
	top:10px;
	cursor:pointer;
	right:10px;
	background:url('images/popupx.png');
	width:30px;
	height:30px;
	z-index:40;
}
#twitterframe{
	background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow-x: hidden;
	width:100%;
	height:650px;
}
h1{
	text-align:center;
}
blockquote{
	padding:10px;
	border-radius:10px;
	background:#eee;
}
.slick-prev{
	left:10px !important;
	z-index:20;
	text-align:left;
}
.slick-next{
	right:10px !important;
	z-index:20;
	text-align:right;
}.slick-slide {
    text-align: center;
}

.slick-slide::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slick-slide img {
    vertical-align: middle;
    display: inline-block !important;;
}
body{
	background:#efefef;
	margin:0;
	padding:0;
	font-family:Arial,Helvetica,sans-serif;
	height:100%;
	color:#332a25;
}
html{
	height:100%;
}
a{
	color:#840000;
	text-decoration:none;
}
#rightside a{
	font-weight:bold;
}
#bgcontain{
	width:1330px;
	position:relative;
	margin:0 auto;
	background:#6a000c;
	min-height:100%;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
#mainwrap{
	width:1250px;
	position:relative;
	background:url('images/whitebg.png');
	min-height:100%;
	display:flex;
	left: 40px;
	box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.15); 
}
#leftside{
	position:relative;
	width:300px;
	padding:15px;
	background:#fff;
	border-right:15px solid #342b26;
	min-height:100%;
	box-shadow: 9px 0px 18px 0px rgba(0, 0, 0, 0.2);
	float:left;
}
#logo{
	width:300px;
	height:240px;
	background:url('images/logo.png');
	display:block;
}
#menu{
	margin-top:25px;
}
#menu a{
	width:280px;
	height:24px;
	padding:3px 10px;
	background:#840000;
	display:block;
	color:#fff;
	font-size:18px;
	margin-top:5px;
}
#menu a:first-of-type{
	margin-bottom:20px;	
}
#box{
	width:300px;
	height:250px;
	background:#ccc;
	margin-top:20px;
}
#hiveworks{
	width:300px;
	margin-top:10px;
	height:160px;
	background:url('images/hiveworks.png');
	display:block;
}
#rightside{
	width:860px;
	float:left;
	margin-left:20px;
}
#leaderboard{
	background:#fff;
	width:728px;
	height:90px;
	padding:15px;
	margin: 0 auto;
	border:1px solid #e9e9e9;
	margin-top:15px;
}
#leadwrap{
	width:728px;
	margin:0 auto;
	height:90px;
}
#social{
	width:300px;
	height:170px;
	margin-top:20px;
}
#social a{
	background-size:100% 100%;
	display:block;
	float:left;
}
#patreon{
	width:100%;
	height:calc((90/170)*100%);
	background:url('images/patreon.png');
}
#facebook,#twitter,#tumblr{
	width:calc((1/3)*100%);
	height:calc((80/170)*100%);
}
#facebook{
	background:url('images/facebook.png');
}
#twitter{
	background:url('images/twitter.png');
}
#tumblr{
	background:url('images/tumblr.png');
}
#comicarea{
	width:800px;
	padding:28px;
	border:1px solid #e9e9e9;
	background:#fff;
	margin-top:15px;
	position:relative;
}
#comicarea img{
	max-width:100%;
	height:auto;
}
.nav{
	width:312px;
	height:66px;
	background:#fff;
	padding:15px;
	border:1px solid #e9e9e9;
	margin:0 auto;
	margin-top:15px;
}
.nav a{
	display:block;
	height:66px;
}
.first{
	width:72px;
	background:url('images/pcfirst.png');
	float:left;
}
.prev{
	width:78px;
	background:url('images/pcprev.png');
	float:left;
}
.next{
	width:84px;
	background:url('images/pcnext.png');
	float:right;
}
.last{
	width:78px;
	float:right;
	background:url('images/pclast.png');
}
#newsarea,#blogarea,#pagearea{
	width:820px;
	padding:18px;
	background:#fff;
	margin-top:15px;
	border:1px solid #e9e9e9;
	margin-bottom:15px;
}
#newsarea img,#blogarea img,#pagearea img{
	max-width:100%;
	height:auto;
}
#newsleft{
	width:410px;
	float:left;
	margin-top:15px;
}
#newsright{
	float:right;
	width:300px;
	margin-top:15px;
}
#box2{
	width:300px;
	height:250px;
	background:#ccc;
}
#ibar{
	width:800px;
	height:49px;
	padding:10px 10px;
	background:#332a25;
}
.cc-newsheader, #blogheader, .cc-blogtitle, #storytitle{
	font-family:Arial black;
	font-size:24px;
}
#blogheader,#storytitle{
	padding:18px;
	background:#fff;
	display:inline-block;
	border:1px solid #e9e9e9;
}
#blogheadercontain,#storytitlecontain{
	text-align:center;
}
#storytitlecontain{
	margin-top:15px;
}
.cc-newsbody{
	padding:10px 10px 10px 30px;
}
.cc-blogcontent{
	padding:10px;
}
.cc-tagline, .cc-publishtime, .cc-blogpublishtime{
	color:#989898;
}
#menuarrow{
	display:none;
}
#menuwrap{
	width:300px;
	margin:0 auto;
}
#header{
	display:none;
}

@media screen and (max-width:1330px){
	#bgcontain{
		max-width:100%;
	}
	#mainwrap{
		left:calc((100% - 1250px) / 2);
	}
}
@media screen and (max-width:1250px){
	#mainwrap{
		max-width:100%;
		box-shadow:none;
		left:0px;
		position:absolute;
	}
	#leftside{
		position:fixed;
		width:330px;
		background:url('images/redbg.png');
		left:-330px;
		padding:0px;
		border-right:90px solid #6a000c;
		box-shadow:none;
		z-index:100;
	}
	#menuarrow{
		background-image:url('images/menuarrow.png');
		width:87px;
		position:absolute;
		right:-90px;
		height:104px;
		display:block;
	}
	#box{
		display:none;
	}
	#logo{
		background:url('images/mobilelogo.png');
		background-size:100%;
		margin-top:15px;
	}
	#hiveworks{
		display:none;
	}
	#patreon{
		background:url('images/mobilepatreon.png');
	}
	#facebook{
		background:url('images/mobilefacebook.png');
	}
	#tumblr{
		background:url('images/mobiletumblr.png');
	}
	#twitter{
		background:url('images/mobiletwitter.png');
	}
	#menu a{
		background:none;
		font-size:24px;
		height:38px;
	}
	#rightside{
		width:calc(100% - 90px);
		position:relative;
		left:70px;
	}
	#header{
		background-size:100% 100%;
		width:684px;
		display:block;
		max-width:100%;
		max-height:calc((92/684)*(87vw));
		height:92px;
		background-image:url('images/header.png');
		margin:0 auto;
		margin-top:15px;
	}
	#leaderboard{
		width:100%;
		border:none;
		padding:10px 0;
	}
	#comicarea{
		text-align:center;
		width:100%;
		padding:3vw 0;
		border-left:none;
		border-right:none;
	}
	.nav{
		width:100%;
		background:#6a000c;
		padding:0;
		border:none;
		height:87px;
	}
	.nav a{
		height:87px;
		background-size:100%;
	}
	.first,.last{
		width:172px;
	}
	.prev,.next{
		width:131px;
	}
	.first{
		background-image:url('images/mobilefirst.png');
	}
	.prev{
		background-image:url('images/mobileprev.png');
	}
	.next{
		background-image:url('images/mobilenext.png');
	}
	.last{
		background-image:url('images/mobilelast.png');
	}
	#newsarea,#blogarea,#pagearea{
		width:100%;
		box-sizing:border-box;
		border-left:none;
		border-right:none;
	}
	#ibar{
		width:100%;
		box-sizing:border-box;
		height:69px;
	}
}
@media screen and (max-width:860px){
	#newsleft,#newsright{
		width:100%;
	}
	#box2{
		margin: 0 auto;
	}
}
@media screen and (max-width: 818px){
	#leaderboard{
		display:none;
	}
	.nav{
		height:9vw;
	}
	.nav a{
		height:9vw;
	}
	.first, .last{
		width:calc((172/87)*9vw);
	}
	.prev,.next{
		width:calc((131/87)*9vw);
	}
}
@media screen and (max-width:800px){
	#leftside{
		width:50vw;
		left:-50vw;
		padding:0px;
		border-right:11vw solid #6a000c;
		box-shadow:none;
		z-index:100;
	}
	#menu{
		margin-top:2vw;
	}
	#menu a{
		font-size:3.8vw;
		height:6vw;
	}
	#rightside{
		width:calc(100% - 11vw);
		left:calc(11vw - 20px);
	}
	#menuarrow{
		width:11vw;
		height:calc(11vw * (104/90));
		background-size:200%;
		right:-11vw;
		top:0px;
	}
	#menuwrap{
		max-width:100%;
	}
	#menuwrap *{
		max-width:100%;
		box-sizing:border-box;
	}
	#logo{
		max-height:calc( .8 * 50vw );
	}
	#social{
		max-height:calc( (17/30) * 50vw);
	}
}
@media screen and (max-width:1250px) and (orientation:landscape){
	#leftside{
		width:25vw;
		left:-25vw;
	}
	#menuwrap{
		width:23vw;
		padding:1vw;
	}
	#logo{
		width:80%;
		height:14.8vw;
		margin:0 auto;
	}
	#social{
		width:80%;
		height:10.5vw;
		margin: 0 auto;
		margin-top:1vw;
	}
	#menu{
		margin-top:1vw;
	}
	#menu a:first-of-type{
		margin-bottom:0px;
	}
	#menu a{
		font-size:2vw;
		height:2.6vw;
	}
	#box{
		display:none;
	}
	#hiveworks{
		display:none;
	}
}
#comicoverlay{
	background:url('images/popupbg.png');
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:25;
}
#howtoread{
	width:80%;
	top:20%;
	left:10%;
	color:#fff;
	font-size:15px;
	text-align:center;
	z-index:30;
	position:absolute;
}
#howtoread a{
	color:#fff;
}
@media screen and (max-width:800px){
	#howtoread h2{
		margin-top:0;
		margin-bottom:4vw;
	}	
	#howtoread{
		font-size:2.5vw;
		top:5%;
		left:5%;
		width:90%;
	}
}