*{
	box-sizing: border-box;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	background-image:url("/img/cloud.jpg");
	background-color:#3F80C4;
	background-position: 0 100;
	background-repeat:no-repeat;
	margin:0;
	padding: 10 0 0 0;
}
.main {
	background-color:#fff;
	border-radius:10px;
	max-width:710pt;
	width:710pt;
	padding-left:20px;
	padding-right:20px;
	margin-top:20px;
}
.main h1{
	font-family:"Gloria", Helvetica, sans-serif;
	margin:0;
}
.main h4{
	margin:0;
	padding-top:20px;
}
#blog {
	padding-bottom:20px;
}
#footer {
	padding-top:20px;
	padding-bottom:20px;
	font-size:10pt;
}
@font-face {
	font-family:"Gloria";
	src: url("GloriaHallelujah-Regular.ttf");
}
#center {
	max-width:710pt;
	width:710pt;
	margin: auto;
}
#logo img {
	height:75%;
	margin:auto;
}
#tag img {
	height:25%;
	padding-left:10px;
}
#comic {
    height: calc(80vh - 20px);
    position: relative;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
	margin-top: 10px;
}
#comic_img {
	max-height:100%;
	max-width:100%;
	display:inline;
	position:relative;
	cursor:pointer;
}
#comic_bonus_link {
	position:relative;
	background: #fff;
	height:4vh;
	border-radius: 10px;
	margin-top:-5vh;
	text-align:center;
	cursor:pointer;
	font-family:"Gloria", Helvetica, sans-serif;
}
#bonus {
	z-index:1000;
	display:none;
	position:absolute;
	max-height:100%;
	max-width:100%;
	margin:auto;
	cursor:pointer;
}
.tab {
	border-radius:10px 10px 0 0;
	background-color: #fff;
	padding: 20px;
}
.header {
	position:relative;
	height:20%;
	display:flex;
}
.header-left {
	position:relative;
	width:50%;
	display:inline;
}
.header-right {
	position:relative;
	display:flex;
	width:50%;
	justify-content: flex-end;
}

.header-right > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.nav-wrapper{
	display:flex;
	align-items:end;
}
.nav {
	position:relative;
	width:50%;
	font-size:100%;
	font-family:"Gloria", Arial, sans-serif;
	color:#fff;
}
.menu {
	font-size:100%;
	font-family:"Gloria", Helvetica, sans-serif;
	color:#fff;
}
.menu div {
	display:inline;
	margin-left:5pt;
}
.menu div a {
	text-decoration:none;
	color:#fff;
}
.topleftnav {
	 left:0;
	 height:36px;
	 max-height:36px;
	 text-align:center;
 }
.toprightnav {
	height:36px;
	max-height:36px;
}
.topleftnav a {
	color: #fff;
	text-decoration:none;
}
.toprightnav a {
	color: #fff;
	text-decoration:none;
}
.leftnav {
	left:0;
	height:36px;
	max-height:36px;
	text-align:center;
}
.leftnav a {
	color: #fff;
	text-decoration:none;
}
.leftnavinner {
	margin-left:15pt;
	margin-top:2pt;
}
.rightnav {
	left:0;
	height:36px;
	max-height:36px;
}
.rightnav a {
	color: #fff;
	text-decoration:none;
}
.rightnavinner {
	margin-left:20pt;
	margin-top:2pt;
}
.leftactive {
	color:#FFF;
}
.leftinactive {
	color:#DDD;
}
.rightactive {
	color:#FFF;
}
.rightinactive {
	color:#DDD;
}
.spacer {
	width:10px;
}
label {
	padding:5px;
}
input {
	margin:10px;
}
.social {
	margin-right:0pt;
	text-align:right;
}
.cmtx_comments_heading {
	padding-top:10pt;
}
@media (max-width: 800px){
	#center{
		max-width: 100%;
		width: 90%;
		margin: auto;
	}

	.social {
		margin-right:0pt;
	}
	.social img {
		height:30px;
	}

	.main{
		width: 100%;
		margin-top: 10px;
	}

	#tag img
	{
		height: 25%;
	  }

	.menu div {
		display: inline;
		margin-left: 5px;
		font-size: 14px;
	}

	.spacer {
		width: 2px;
	}

	#logo img
	{
		height: 75%;
	}

	.header
	{
		position: relative;
		height: 13%;
	}
	.topleftnav {
		left: 0;
		max-width: 99px;
		width: 80px;
		height: 50px;
		text-align:center;
	}
	.toprightnav {
		max-width: 99px;
		width: 99px;
		height: auto;
	}
	.topleftnav a {
		text-decoration:none;
	}
	.toprightnav a {
		text-decoration:none;
	}
	.leftnav
	{
	  left: 0;
	  max-width: 99px;
	  width: 80px;
	  height: 50px;
	}

	.leftnavinner
	{
	  margin-left: 15pt;
	  margin-top: 2pt;
	  font-size: 14px;
	}

	.rightnav
	{
	  max-width: 99px;
	  width: 99px;
	  height: auto;
	}

	.rightnavinner
	{
	  margin-left: 20pt;
	  margin-top: 2pt;
	  font-size: 14px;
	  height: 50px;
	}

	#center{
		width: 100%;
	}

	#comic{
		height: auto;
		margin-top: 10px;
	}

	#comic_bonus_link {
		position:relative;
		background: #fff;
		height:4vh;
		border-radius: 10px;
		margin-top:-3vh;
		text-align:center;
		cursor:pointer;
		font-family:"Gloria", Helvetica, sans-serif;
	}
}