html,body{
	background:url('/images/bg.png');
	font-family:"Metropolis";
	margin:0;
	padding:0;
}
a{
color:#d3407e;
text-decoration:none;
}

@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Black.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-Black.otf") format("opentype"), url("/fonts/Metropolis-Black.woff") format("woff"), url("/fonts/Metropolis-Black.ttf") format("truetype"), url("/fonts/Metropolis-Black.svg#Metropolis-Black") format("svg");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-BlackItalic.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-BlackItalic.otf") format("opentype"), url("/fonts/Metropolis-BlackItalic.woff") format("woff"), url("/fonts/Metropolis-BlackItalic.ttf") format("truetype"), url("/fonts/Metropolis-BlackItalic.svg#Metropolis-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic; }
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-Bold.otf") format("opentype"), url("/fonts/Metropolis-Bold.woff") format("woff"), url("/fonts/Metropolis-Bold.ttf") format("truetype"), url("/fonts/Metropolis-Bold.svg#Metropolis-Bold") format("svg");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-BoldItalic.otf") format("opentype"), url("/fonts/Metropolis-BoldItalic.woff") format("woff"), url("/fonts/Metropolis-BoldItalic.ttf") format("truetype"), url("/fonts/Metropolis-BoldItalic.svg#Metropolis-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic; }
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-Regular.otf") format("opentype"), url("/fonts/Metropolis-Regular.woff") format("woff"), url("/fonts/Metropolis-Regular.ttf") format("truetype"), url("/fonts/Metropolis-Regular.svg#Metropolis-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-RegularItalic.eot?#iefix") format("embedded-opentype"), url("/fonts/Metropolis-RegularItalic.otf") format("opentype"), url("/fonts/Metropolis-RegularItalic.woff") format("woff"), url("/fonts/Metropolis-RegularItalic.ttf") format("truetype"), url("/fonts/Metropolis-RegularItalic.svg#Metropolis-RegularItalic") format("svg");
  font-weight: normal;
  font-style: italic; }
  
img{
	max-width:100%;
	vertical-align:bottom;
}	
  
  
#wrapper{
	width:1000px;
	max-width:100%;
	margin: 0 auto;
}
#topwrap{
	padding:20px;
	background:#000;
}
#topspace{
	width:728px;
	height:90px;
	background:#ccc;
	margin: 0 auto;
}
#menu{
	display:flex;
	justify-content:space-around;
	background:#d3d3d3;
	padding:10px;
	box-sizing:border-box;
}
#menuclick{
	display:none;
}
#mobilemenu{
	display:none;
}
#menu a{
	display:block;
	background-size:100%;
	flex-grow:0;
}
#menu a:hover{
	background-position:0 100%;
}
#menu a:before{
	display:block;
	content:'';
}
#about{
	width:calc(85% * (172/899));
	background-image:url('/images/about.png');
}
#about:before{
	padding-bottom:calc(100% * (88/172));
}
#archive{
	width:calc(85% * (215/899));
	background-image:url('/images/archive.png');
}
#archive:before{
	padding-bottom:calc(100% * (88/215));
}
#cast{
	width:calc(85% * (161/899));
	background-image:url('/images/cast.png');
}
#cast:before{
	padding-bottom:calc(100% * (88/161));
}
#extras{
	width:calc(85% * (175/899));
	background-image:url('/images/extras.png');
}
#extras:before{
	padding-bottom:calc(100% * (88/175));
}
#shop{
	width:calc(85% * (176/899));
	background-image:url('/images/shop.png');
}
#shop:before{
	padding-bottom:calc(100% * (88/176));
}
@media screen and (max-width:770px){
	#topwrap{
		display:none;
	}
	#about{
		width:calc(95% * (172/899));
	}
	#archive{
		width:calc(95% * (215/899));
	}
	#cast{
		width:calc(95% * (161/899));
	}
	#extras{
		width:calc(95% * (175/899));
	}
	#shop{
		width:calc(95% * (176/899));
	}
}
@media screen and (max-width:600px){
	
	#menu{
		display:none;
	}
	#mobilemenu{
		background:#353750;
	}
	#mobilemenu a{
		display:block;
		padding:15px;
		font-size:1.1em;
		font-weight:bold;
		color:#fff;
		text-decoration:none;
		text-align:center;
	}
	#menuclick{
		display:block;
		color:#353750;
		cursor:pointer;
		padding:20px;
		font-size:1.4em;
		font-weight:900;
		text-align:center;
		background:#d3d3d3;
	}
	
}
@media screen and (max-width:450px){
	
	#menuclick{
		padding:15px;
		font-size:1.3em;
	}
	
}

#middle{
	background:#fff;
	padding:20px;
	display:flex;
	justify-content:space-around;
}
#middleleft{
	order:0;
width:100%;
}
#middleright{
	order:1;
	width:180px;
	flex-grow:0;
	flex-shrink:0;	
margin-left:20px;
}
.cc-nav{
	width:100%;
	display:flex;
	box-sizing:border-box;
	padding:10px;
}
.cc-nav a{
	display:block;
	background-size:100%;
}
.cc-nav a:hover{
	background-position:0 100%;
}
.cc-nav a:before{
	content:'';
	display:block;
}
.cc-first{
	width:calc(100% * (344/1694));
	background-image:url('/images/first.png');
}
.cc-first:before{
	padding-bottom:calc(100% * (207/344));
}
.cc-prev{
	width:calc(100% * (401/1694));
	background-image:url('/images/prev.png');
}
.cc-navaux{
	width:calc(100% * (204/1694));
	background-image:url('/images/rss.png');
}
.cc-next{
	width:calc(100% * (401/1694));
	background-image:url('/images/next.png');
}
.cc-last{
	width:calc(100% * (344/1694));
	background-image:url('/images/last.png');
}
#rightspace{
	width:160px;
	height:600px;
	border:10px solid black;
	background:#ccc;
}
#social a,#hiveworks{
	background-size:100%;
}
#social a:hover,#hiveworks:hover{
	background-position:0 100%;
}
#social{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	margin-top:10px;
}
#social a{
	width:48%;
}
#social a:before{
	padding-bottom:100%;
}
#twitter{
	background-image:url('/images/twitter.png');
}
#instagram{
	background-image:url('/images/instagram.png');
}
#youtube{
	background-image:url('/images/youtube.png');
}
#facebook{
	background-image:url('/images/facebook.png');
}
#hiveworks{
	display:block;
	width:160px;
	background-image:url('/images/hiveworks.png');
	margin: 0 auto;
	margin-top:10px;
}
#hiveworks:before,#social a:before{
	content:'';
	display:block;
}
#hiveworks:before{
	padding-bottom:calc(100% * (483/423));
}
@media screen and (max-width:900px){
	#middle{
		padding:10px;
	}
	#rightspace{
		display:none;
	}
}
@media screen and (max-width:720px){
	#middle{
		flex-wrap:wrap;
		padding:10px 0;
	}
	#middleleft{
		width:100%;
	}
	#middleright{
		width:85%;
		display:flex;
		justify-content:space-around;
		align-items:center;
		box-sizing:border-box;
		padding:10px 0;
	}
	#social{
		width:82%;
		margin-left:5px;
		margin-top:0;
		flex-grow:1;
	}
	#social a{
		width:24%;
	}
	#hiveworks{
		margin:0;
		flex-shrink:2;
		width:17%;
	}
}

#hw-jumpbar{
	margin:20px 35px;
}	
	
#bottom{
	background:url('/images/500.png');
	padding:20px;
	display:flex;
	align-items:flex-start;
}
#bottomleft{
	background:#fff;
	padding:20px;
width:100%;
}
#bottomright{
	order:1;
	width:320px;
	flex-grow:0;
	flex-shrink:0;
	margin-left:20px;
}
#patreon,#discord{
	width:320px;
	background: #0e0f16;
}
#discord{
	margin-top:20px;
}
#patreonlink,#discordlink{
	width:320px;
	height:120px;
	background-size:100%;
	display:block;
	margin: 0 auto;
}
#patreonlink{
	background-image:url('/images/patreon.png');
}
#discordlink{
	background-image:url('/images/discord.png');
}
#patreonlink:hover,#discordlink:hover{
	background-position:0 100%;
}
#othercomics{
	margin-top:20px;
	background: #0e0f16;
	color:#fff;
	text-align:center;
}
#oc-header{
	padding:10px;
}
#bottomspacewrap{
	padding:10px;
	width:320px;
	height:270px;
	background: #0e0f16;
	margin-top:20px;
	box-sizing:border-box;
}
#bottomspace{
	background:#ccc;
	width:300px;
	height:250px;
	margin: 0 auto;
}
.cc-newsheader{
	font-weight:bold;
	font-size:2em;	
}
.cc-publishtime{
	font-weight:bold;
}
@media screen and (max-width:800px){
	
	#bottom{
		flex-wrap:wrap;
	}
	#bottomleft{
		order:2;
		margin-top:20px;
	}
	#bottomright{
		margin:0;
		width:100%;
	}
	#patreon, #discord{
		float:left;
		width:150px;
	}
	#discordlink,#patreonlink{
		width:150px;
		height:56px;
	}
	#discord{
		margin-top:0;
		margin-left:20px;
	}
	#bottomspacewrap{
		float:left;	
	}
	#othercomics{
		float:right;
		margin:0;
		width:calc(100% - 340px);
	}
	#oc-header{
		box-sizing:border-box;
		height:40px;
	}
	#othercomics a{
		height:153px;
		overflow:hidden;
		display:flex;
		align-items:center;
	}
	#othercomics a img{
		min-width:100%;
		min-height:100%;
		object-fit:cover;	
	}
	
}
@media screen and (max-width:650px){
	#bottomspace,#othercomics,#patreon{
		float:none;
	}
	#bottomspacewrap{
		width:100%;
		margin-top:20px;
	}
	#patreon,#discord{
		width:100%;
		clear:both;
	}
	#discord{
		margin: 20px 0;
	}
	#discordlink,#patreonlink{
		width:320px;
		height:120px;
		margin: 0 auto;
	}
	#othercomics{
		width:100%;
		clear:both;
	}
	#othercomics a img{
		max-width:100%;
		min-width:auto;
		min-height:none;
		object-fit:fill;
	}
	#othercomics a{
		height:auto;
	}
	#bottom{
		padding:20px 0;
	}
}

.cast-img{
width:250px;
float:left;
clear:left;
}
.cast-text{
width:calc(100% - 270px);
float:right;
clear:right;
}
.cast-box{
padding:10px 0;
clear:both;
}
@media screen and (max-width:550px){
.cast-img,.cast-text{
float:none;
padding:10px 0;
width:100%;
}
.cast-img{
text-align:center
}
}
#hw-privacy{
	text-align:center;
	padding:20px;
}
#hw-privacy a{
	color:#343750;
}