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

body,html{
	margin:0;
	padding:0;
	font-family: 'Josefin Sans', sans-serif;
}
img{
	max-width:100%;
}
a{
color:#611d22;
text-decoration:none;
}

#headerwrap{
	background: #611d22;
}
#header{
	width:1020px;
	padding:10px;
	max-width:100%;
	box-sizing:border-box;
	display:flex;
	justify-content:space-around;
	margin: 0 auto;
	align-items:center;
}
#topspace{
	width:728px;
	height:90px;
	background:#ccc;
	flex-shrink:0;
	flex-grow:0;
	margin-left:20px;
overflow:hidden;
}
#logo{
	max-width:250px;
}
#menu{
	background:#000;
	text-align:center;
}
#menu a{
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
	padding:20px 0px 15px 0px;
	margin: 0 20px;
	display:inline-block;
	border-bottom:3px solid #000;
}
#menu a:hover{
	border-bottom:3px solid #fff;
}
#menuclick{
	display:none;
}

@media screen and (max-width:900px){
	#header{
		flex-wrap:wrap;
		justify-content:center;
		padding:10px 0 20px;
	}
	#topspace{
		margin: 0;
	}
}
@media screen and (max-width:750px){
	#header{
		display:block;
	}
	#topspace{
		width:320px;
		height:50px;
		margin: 0 auto;
	}
	#logo{
		margin: 0 auto;
		display:block;
	}
}
@media screen and (max-width:600px){
	#menuclick-text{
		color:#fff;
		font-weight:bold;
		font-size:1.4em;
		padding:20px 0px 12px 0px;
		margin: 0 auto;
		display:inline-block;
		border-bottom:3px solid #fff;
		
	}
	#menuclick{
		background:#000;
		display:block;
		text-align:center;
		cursor:pointer;
	}
	#menu{
		padding:10px 0;
		display:none;
	}
	#menu a{
		display:block;
		width:100%;
		text-align:center;
		margin:0;
		border:none;
	}
	#menu a:hover{
		border-bottom:none;
		color:#611d22;
	}
}

#middlewrap{
	background:url('/https/www.speakdevil.com/images/bg.png') repeat-x #a8a8a8;
}
#middle{
	display:flex;
	width:1020px;
	padding:16px 16px 50px 16px;
	box-sizing:border-box;
	max-width:100%;
	margin:0 auto;
	position:relative;
	align-items:flex-start;
}
#bottombuildings{
	background-position:bottom center;
	background-repeat:no-repeat;
	background-image:url('/https/www.speakdevil.com/images/skyline.png');
	padding-bottom:20px;
}
#middleleft{
	width:100%;
	background:#000;
	padding:4px;
	box-sizing:border-box;
}
#middleright{
	width:160px;
	flex-grow:0;
	flex-shrink:0;
	margin-left:20px;
	order:1;
}
#rightspace{
	width:160px;
	height:600px;
	background:#ccc;
}
.cc-nav{
	display:flex;
	justify-content:space-around;
	padding:10px;
	max-width:80%;
	margin: 0 auto;
}
.cc-nav a, .cc-nav div{
	width:90px;
	height:77px;
	display:block;
	flex-grow:0;
	flex-shrink:0;
	background-size:100%;
}
.cc-nav a:hover{
	background-position:0 100%;
}
.cc-next,.cc-next-dis{
	margin-left:200px;
}
.cc-first{
	background-image:url('/https/www.speakdevil.com/images/first.png');
}
.cc-prev{
	background-image:url('/https/www.speakdevil.com/images/prev.png');
}
.cc-next{
	background-image:url('/https/www.speakdevil.com/images/next.png');
}
.cc-last{
	background-image:url('/https/www.speakdevil.com/images/latest.png');
}

#social{
	display:flex;
	flex-wrap:wrap;
	margin-top:10px;
	justify-content:center;
}
#social a{
	display:block;
	background-size:100%;
	width:100%;
	background-repeat:no-repeat;
}
#social a:before{
	content:'';
	display:block;
}
#hiveworks:hover,#tumblr:hover,#twitter:hover{
	background-position: 0 100%;
}
#hiveworks{
	background-image:url('/https/www.speakdevil.com/images/hive.png');
}
#hiveworks:before{
	padding-bottom:calc(100% * (540/480));
}
@media screen and (min-width:900px){
#tumblr,#twitter{
	width:50% !important;
}
}
#tumblr:before,#twitter:before{
	padding-bottom:100%;
}
#tumblr{
	background:url('/https/www.speakdevil.com/images/tumblr.png');
}
#twitter{
	background:url('/https/www.speakdevil.com/images/twitter.png');
}
#patreon{
	background:url('/https/www.speakdevil.com/images/patreon.png');
	margin-top:10px;
}
#patreon:before{
	padding-bottom:calc(100% * (551/484));
}
#updatedays{
	font-size:.9em;
	color:#fff;
	text-align:center;
	margin-top:20px;
}

@media screen and (max-width:900px){
	
	#middle{
		padding:0;
		flex-wrap:wrap;
	}
	#middleleft{
		padding:0;
	}
	#middleright{
		width:100%;
		margin:0;
	}
	#rightspace{
		display:none;
	}
	#social{
		flex-wrap:nowrap;
		align-items:center;
		justify-content:space-around;
	}
	#social a{
		margin:10px;
		max-width:150px;
	}
	#updatedays{
		display:none;
	}
	#bottombuildings{
		background:none;
	}
	
}

@media screen and (max-width:700px){
	.cc-next{
		margin:0;
	}
}

@media screen and (max-width:500px){
	#social a{
		margin:5px;
	}
}

#bottomwrap{
	background:#000;
}
#hw-jumpbar{
	width:1020px;
	margin: 20px auto 0 auto;
	max-width:100%;
}
#bottom{
	display:flex;
	max-width:1020px;
	margin: 0 auto;
}
#bottomleft{
	width:100%;
	background:#fff;
	padding:30px 0 30px 30px;
	color:#404139;
}
#bottomright{
	width:360px;
	padding:30px;
	box-sizing:border-box;
	order:1;
	flex-grow:0;
	flex-shrink:0;
	background:#fff;
}
#bottomspace{
	width:300px;
	height:250px;
	background:#ccc;
}
.cc-newsarea{
	border-bottom:1px solid #404139;
margin-bottom:30px;
}
.cc-newsarea,#textarea,.cc-blogpost{
	font-size:1.1em;
	line-height:1.5em;

}
.cc-newsheader,.cc-blogtitle{
	width:100%;
	padding-bottom:10px;
	font-size:1.5em;
	border-bottom:1px solid #404139;
}
.cc-publishtime, .cc-blog-publishtime{
	font-size:.9em;
	margin-top:5px;
	text-align:right;
}

@media screen and (max-width:800px){
	
	#bottom{
		flex-wrap:wrap;
	}
	#bottomleft{
		order:2;
		padding:30px;
		
	}
	#bottomright{
		padding:0 0 20px 0;
		margin: 0 auto;
		width:300px;
		background:none;
	}
	
}

#textarea{
	background:#fff;
	padding:30px;
}

.cast-img{
width:110px;
float:left;
clear:left;
}
.cast-text{
width:calc(100% - 130px);
float:right;
clear:right;
}
.cast-box{
padding:10px 0;
clear:both;
}
#hw-privacy{
	text-align:center;
	padding:20px;
	background:#000;
}
#hw-privacy a{
	color:#fff;
	text-decoration:none;
}