@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i');



body,html{

	padding:0;

	margin:0;

	font-family: 'Source Sans Pro', sans-serif;

}

body{

	background:url('images/bg.png') #161618;

}



img{

	max-width:100%;

}

a{

	color:rgb(158, 11, 15);

	text-decoration:none;

}



@font-face {

  font-family: 'BebasNeue';

  src: url('fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),  url('fonts/BebasNeueRegular.otf')  format('opentype'),

	     url('fonts/BebasNeueRegular.woff') format('woff'), url('fonts/BebasNeueRegular.ttf')  format('truetype'), url('fonts/BebasNeueRegular.svg#BebasNeueRegular') format('svg');

  font-weight: bold;

  font-style: normal;

}

@font-face {

  font-family: 'BebasNeue';

  src: url('fonts/BebasNeueBook.eot?#iefix') format('embedded-opentype'),  url('fonts/BebasNeueBook.otf')  format('opentype'),

	     url('fonts/BebasNeueBook.woff') format('woff'), url('fonts/BebasNeueBook.ttf')  format('truetype'), url('fonts/BebasNeueBook.svg#BebasNeueBook') format('svg');

  font-weight: normal;

  font-style: normal;

}







#header{

	background:#9b0a11;

	font-family: 'BebasNeue';

}

#headerborder{

	height:57px;

	background-image:url('images/headerbottom.png');

	width:100%;

}

#headerwrap{

	display:flex;

	max-width:1050px;

	box-sizing:border-box;

	padding:20px 20px 0 20px;

	margin:0 auto;

	text-align:center;

	font-size:1.2em;

	align-items:center;

	justify-content:space-evenly;

}

#headerleft{

	margin-right:20px;

	color:#fff;

	max-width:200px;

}

#headerright{

	width:728px;

	flex-shrink:0;

}

#leaderboard{

	width:728px;

	height:90px;

	background:#ccc;

}

#menuclick{

	display:none;

}

#menu{

	display:flex;

	width:100%;

	justify-content:space-evenly;

}

#menu div{

	width:100%;

	position:relative;

}

#menu a{

	background:#fff;

	height:40px;

	display:flex;

	align-items:center;

	width:100%;

	justify-content:center;

	color:#000;

	text-decoration:none;

	overflow:hidden;

	flex-wrap:wrap;

	position:relative;

}

#menu a:hover{

	background:#bfbfbf;

}

#menu div div{

	position:absolute;

	display:none;

	z-index:10;

}



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

	

	#headerwrap{

		flex-wrap:wrap;

	}

	#headerleft{

		margin: 0 0 20px 0;

	}

	

}

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

	

	#leaderboard{

		display:none;

	}

	#headerborder{

		display:none;

	}

	#headerwrap{

		padding: 20px 0 0 0;

		font-size:1.7em;

	}

	#headerright{

		width:100%;

	}

	#menuclick{

		background:#d1d3d4;

		font-weight:bold;

		color:#414042;

		display:block;

		padding:10px;

		font-size:1.2em;

	}

	#menu{

		display:none;

	}

	#menu a{

		height:50px;

	}

	

}



#middle{

	margin: 0 auto;

	padding:20px 10px;

	box-sizing:border-box;

	width:1020px;

	max-width:100%;

	display:flex;

	align-items:flex-start;

}

#middleleft{

	padding:10px;

	background:#000;

	width:100%;

	order:0;

}

#middleright{

	width:160px;

	flex-grow:0;

	flex-shrink:0;

	margin-left:20px;

	order:1;

}

#rightspace{

	width:160px;

	height:600px;

	background:#ccc;

}



.cc-nav{

	text-align:center;

	justify-content:space-between;

}

.cc-nav, .cc-nav a, .cc-nav div{

	color:#fff;

	font-family: 'BebasNeue';

	display:flex;

	align-items:center;

	width:100%;

	text-align:center;

}

.cc-nav a, .cc-nav div{

	justify-content:center;

	font-size:1.5em;

}

.cc-nav a i, .cc-nav div i{

	font-size:.6em;

	padding:5px;

}



@media screen and (min-width: 700px){

	#bottomnav .cc-nav{

		width:655px;

		margin: 0 auto;

	}

	#bottomnav .cc-nav a, #bottomnav .cc-nav div{

		display:flex;

		align-items:flex-end;

		height:100px;

		background-repeat:no-repeat;

	}

	#bottomnav span{

		height:0;

	}

	#bottomnav .cc-nav a:hover{

		background-position: 0 -100px;

	}

	#bottomnav .cc-first, #bottomnav .cc-first-dis{

		width:92px;

		background-image:url('images/first.png');

	}

	#bottomnav .cc-prev, #bottomnav .cc-prev-dis{

		width:198px;

		background-image:url('images/prev.png');

	}

	#bottomnav .cc-navaux{

		width:75px;

		background-image:url('images/archive.png');

	}

	#bottomnav .cc-next, #bottomnav .cc-next-dis{

		width:198px;

		background-image:url('images/next.png');

	}

	#bottomnav .cc-last, #bottomnav .cc-last-dis{

		width:92px;

		background-image:url('images/last.png');

	}

}



#hiveworks{

	width:160px;

	height:174px;

	background:url('images/hw.png');

	margin-top:20px;

	display:block;

}

#social{

	display:flex;

	justify-content:space-evenly;

	margin: 20px 0;

}

#rightbuttons a{

	display:block;

}

#social a{

	color:#fff;

	font-size:3em;

}

#supporttbwf{

	margin-top:20px;

}

#topwebcomics{

	margin-top:20px;

	display:block;

}



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

	#supporttbwf{

		display:none;

	}

}

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

	#middle{

		flex-wrap:wrap;

		padding:20px 0;

	}

	#middleright{

		width:100%;

		margin:0;

		max-width:600px;

		margin: 0 auto;

	}

	#hiveworks{

		display:none;

	}

	#rightbuttons a#topwebcomics,#rightbuttons div#supporttbwf,#rightspace{

		display:none;

	}

	#rightbuttons{

		box-sizing:border-box;

		display:flex;

		flex-wrap:wrap;

		margin-top:20px;

	}

	#rightbuttons a, #rightbuttons div{

		flex-basis:50%;

		padding:5px;

		box-sizing:border-box;

		text-align:center;

		align-items:center;

	}

	#social{

		margin: 0;

	}

	#social a{

		font-size:3.5em;

	}

}



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

	

	.cc-nav a, .cc-nav div{

		font-size:1.25em;

		height:40px;

	}

	#social a{

		font-size:2.5em;

	}

	

}



#bottom{

	max-width:100%;

	width:0 10px;

	margin: 0 auto;

	width:1020px;

	padding:10px;

	box-sizing:border-box;

	margin: 0 auto;

	display:flex;

}

#bottomwrap{

	padding:0 20px 20px 20px;

	font-size:1.2em;

	color:#58595b;

	line-height:1.7em;

}

#blogheader{

	padding:10px 20px;

	display:flex;

}

#blogheader{

	background:#9a0a10;

	color:#fff;

	align-items:center;

}

.cc-newsheader{

	width:100%;

	margin-right:20px;

	font-family:'BebasNeue', sans-serif;

	font-size:3em;

	font-weight:bold;

}

.cc-publishtime{

	font-size:1.5em;

}

#bottomleft{

	width:100%;

	margin-right:20px;

	background:#fff;

}

#bottomright{

	width:300px;

	flex-shrink:0;

	text-align:center;

	order:1;

}

.bottomlinks{

	

}

#bottomright a{

	font-size:1.2em;

	font-weight:bold;

	color:#fff;

	text-decoration:none;

	font-family:'BebasNeue',sans-serif;

	display:block;

	margin-bottom:10px;

}

#bottomright a:hover{

	color:rgb(158, 11, 15);

}

#bottomspace{

	background:#ccc;

	width:300px;

	height:250px;

		margin:0 auto;

	margin-bottom:20px;

	flex-shrink:0;

}



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

	

	#bottom{

		padding:0;

		flex-wrap:wrap;

	}

	#bottomleft{

		order:2;

		margin:0;

	}

	#bottomright{

		display:flex;

		width:100%;

		box-sizing:border-box;

		padding:10px;

		align-items:center;

	}

	.bottomheader{

		display:none;

	}

	#bottomlinkswrap{

		display:flex;

		width:100%;

	}

	.bottomlinks{

		width:100%;

	}

	

}



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



	#bottomright{

		display:block;

	}

	

}



h1,h2,h3{

	font-family:'BebasNeue',sans-serif;

}



#textwrap{

	background:#fff;

	padding:20px;

}

#hw-privacy{
	text-align:center;
	clear:both;
	padding:20px;
}
#hw-privacy a{
	color:#fff;
}