@import url('//fonts.googleapis.com/css?family=Lato:400,400i,700i,900');

body,html{
	font-family: 'Lato', sans-serif;
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
	color:#ac82a6;
}
a:hover{
	color:#3d3e53;
}
img{
	max-width:100%;
}
html{
	background: url('images/gradient.jpg') repeat-x #aa85a6;
}
body{
	background-image:url('images/pentabg.png');
	background-position: center 110px;
	background-repeat:no-repeat;
	font-size:1.2em;
	color:#58585a;
	line-height:1.7em;
}
#wrapper{
	max-width:1120px;
	margin: 0 auto;
}
@media screen and (max-width: 1100px){
	body{
		background:none;
	}
}


#logo{
	max-width:85%;
	width:800px;
	background-size:100%;
	background-image:url('images/logo.png');
	margin: 0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
#logo, #social a, #patreonbig, .cc-navaux{
	background-size:100%;
	display:block;
}
#logo:hover, #social a:hover, #patreonbig:hover, .cc-navaux:hover{
	background-position:0 -100%;
}
#logo:before, #social a:before, #patreonbig:before, .cc-navaux:before{
	display:block;
	content:'';
}
#logo:before{
	padding-top:calc(100% * (106/844));
}
#menu{
	margin: 0 auto;
	background:#e4d6e3;
	padding:5px;
	box-sizing:border-box;
	width:728px;
	display:flex;
	justify-content:space-around;
	max-width:100%;
	text-align:center;
}
#menu a{
	color:#3d3e53;
	font-size:1em;
}
#menu a:hover{
	color:#58585a;
}
#topspace{
	margin:0 auto;
	width:728px;
	height:90px;
	background:#ccc;
	margin-top:20px;
}
#menuclick{
	display:none;
}
@media screen and (max-width:750px){
	#menu{
		width:100%;
		flex-wrap:wrap;
		padding:0 0 10px 0;
		display:none;
	}
	#menu a{
		width:100%;
		box-sizing:border-box;
		padding:10px;
		display:block;
	}
	#topspace{
		display:none;
	}
	#menuclick{
		display:block;
		font-size:1.2em;
		color:#3d3e53;
		cursor:pointer;
		background:#e4d6e3;
		padding:15px;
		text-align:center;
		font-weight:bold;
	}
}
@media screen and (max-width:500px){
	#logo{
		max-width:90%;
		margin-top:30px;
		margin-bottom:30px;
	}
}

#middle{
	margin-top:20px;
	display:flex;
	justify-content:space-around;
}
#middleleft,#middleright{
	width:160px;
	flex-shrink:0;
	flex-grow:0;
	margin:0 15px;
}
#middleleft{
	order:1;
}
#contentarea{
	flex-grow:0;
	max-width:728px;
	order:2;
	width:100%;
}
#middleright{
	order:3;
}
#leftspace{
	width:160px;
	height:600px;
	background:#ccc;
}
#patreonbig{
	width:100%;
	display:block;
	background-image:url('images/patreon.png');
}
#patreonbig:before{
	padding-top: calc(100% * (350/160));
}
.cc-nav{
	display:flex;
	padding: 20px;
	align-items:center;
	justify-content:space-around;
}
.cc-nav a,.cc-nav div{
	color:#fff;
	font-size:2.5em;
}
.cc-nav div{
	opacity:.5;
}
.cc-nav a:hover{
	opacity:.5;
}
.cc-navaux{
	background-image:url('images/archive.png');
	width:17%;
}
.cc-nav a.cc-navaux:hover{
	opacity:1;
}
.cc-navaux:before{
	padding-top:100%;
}
#social{
	margin-left:20px;
	width:80px;
	text-align:center;
}
#social a{
	width:80px;
	display:inline-block;
}
#social a:before{
	padding-top: calc(100% * (124/120));
}
#social a#hiveworks:before{
	padding-top: calc(100% * (138/120));
}
#patreon{
	background-image:url('images/porb.png');
}
#twitter{
	background-image:url('images/torb.png');
}
#instagram{
	background-image:url('images/iorb.png');
}
#tumblr{
	background-image:url('images/tuorb.png');
}
#facebook{
	background-image:url('images/forb.png');
}
#rss{
	background-image:url('images/rssorb.png');
}
#hiveworks{
	background-image:url('images/hw.png');
}
@media screen and (max-width:950px){
	#middleleft{
		display:none;
	}
	#middleright{
		flex-shrink:2;
	}
}
@media screen and (max-width:728px){
	#middle{
		flex-wrap:wrap;
		margin-top:0;
	}
	#middleright{
		width:100%;
	}
	#social{
		width:100%;
		margin: 0 auto;
	}
	#social a{
		width:80px;
	}
}
@media screen and (max-width:500px){
	.cc-nav a, .cc-nav div{
		font-size:3em;
	}
	.cc-navaux{
		display:none;
	}
}

#hw-jumpbar{
	margin: 20px 0;
	max-width:100%;
	line-height:.8em;
}
#bottom{
	background:#fff;
	padding:30px;
	margin-bottom:30px;
	display:flex;
}
#bottomleft{
	width:100%;
}
#bottomright{
	width:300px;
	flex-shrink:0;
	flex-grow:0;
	margin-left:30px;
}
#bottomspace{
	width:300px;
	height:250px;
	background:#ccc;
	margin: 0 auto;
}
.cc-newsheader{
	font-size:3em;
	line-height:1.2em;
}
.cc-publishtime{
	font-size:1.3em;
	padding: 10px 0;
	line-height:1.8em;
	font-style:italic;
}
@media screen and (max-width: 750px){
	#bottom{
		flex-wrap:wrap;
	}
	#bottomleft{
		order:1;
	}
	#bottomright{
		margin:0;
		padding-bottom:30px;
		width:100%;
	}
}
@media screen and (max-width:500px){
	#bottom{
		padding:15px;
	}
}

#textarea{
	background:#fff;
	padding:30px;
	margin-bottom:20px;
}
#hw-privacy{
	padding-bottom:30px;
	text-align:center;
}
#hw-privacy a{
	color:#000;
}