:root {
	--header-height: 50px;
	--footer-height: 50px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.fullwidth { width: 100%; }

/* ----------------------------------------------------------------------- */
/*                        8 COLUMN FLEX LAYOUT                             */
/* ----------------------------------------------------------------------- */

.flex-col-1 {     flex-basis: 12%;  }
.flex-col-2 {     flex-basis: 24%;  }
.flex-col-3 {     flex-basis: 36%;  }
.flex-col-4, .flex-col-half {     flex-basis: 48%;  }
.flex-col-5 {     flex-basis: 60%;  }
.flex-col-6 {     flex-basis: 72%;  }
.flex-col-7 {     flex-basis: 84%;  }
.flex-col-8, .flex-col-all {     flex-basis: 96%;  }

.flex-col-50 {     flex-basis: 50%;  }
.flex-col-100 {     flex-basis: 100%;  }

.flex-col-third { flex-basis: 32%; }
.flex-col-twothird { flex-basis: 64%; }

.flex-col-center { justify-content: center; align-items: center; }
.flex-col-right { justify-content: right; align-items: top; }
.flex-col-left { justify-content: left; align-items: top; }

.flex-col-1, .flex-col-2, .flex-col-3, .flex-col-4, .flex-col-5, .flex-col-6, .flex-col-7, .flex-col-8, .flex-col-all, .flex-col-half, .flex-col-third, .flex-col-twothird {  
	text-align: center;
	box-sizing: border-box;
	/* padding: 5px; */
	display: flex;
}


.desktoponly { display: block; }
.mobileonly { display: none; }

.desktoponlyflex { display: flex; }
.mobileonlyflex { display: none; }

@media only screen and (max-width: 723px) {
	.desktoponly { display: none; }
	.mobileonly { display: block; }

	.desktoponlyflex { display: none; }
	.mobileonlyflex { display: flex; }

    .flex-col-1, .flex-col-2, .flex-col-3, .flex-col-4, .flex-col-5, .flex-col-6, .flex-col-7, .flex-col-8, .flex-col-all, .flex-col-half, .flex-col-third, .flex-col-twothird {  flex-basis: 96%; }
}

@media only screen and (max-width: 330px) {
	.flex-col-1, .flex-col-2, .flex-col-3, .flex-col-4, .flex-col-5, .flex-col-6, .flex-col-7, .flex-col-8, .flex-col-all, .flex-col-half, .flex-col-third, .flex-col-twothird {  flex-basis: 96%; padding-left: 2px; padding-right: 2px; }
		
}


.padding-normal { padding: 8px; }
.padding-small { padding: 4px; }

h1 { clear: right; }


#animation_container {
    position:absolute;
    margin:auto;
	max-width: 100%;
    left:0;right:0;
    top: var(--header-height);
}

#comic_header {
	height: var(--header-height);
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background-color: #777777;
	display: flex;
	align-items: center;
	/*border-bottom: 1px solid #e0e0e0; */
	box-sizing: border-box;
}
#comic_header_col-left {
	height: calc(var(--header-height) - 10px);
	justify-content: left;
	text-align: left;
	align-items: center;
	padding-left: 10px;
	width: 50%;
}
#comic_header_col-right {
	height: calc(var(--header-height) - 10px);
	justify-content: right;
	text-align: right;
	align-items: center;
	padding-right: 10px;
	width: 50%;
}


#comic_footer {
	height: var(--footer-height);
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background-color: #555555;
	display: flex;
	align-items: center;
	/*border-bottom: 1px solid #e0e0e0; */
	box-sizing: border-box;	
	color: #e0e0e0;
}
#comic_footer_col-left {
	height: calc(var(--footer-height) - 10px);
	justify-content: left;
	text-align: left;
	align-items: center;
	padding-left: 10px;
	width: 50%;
}
#comic_footer_col-right {
	height: calc(var(--footer-height) - 10px);
	justify-content: right;
	text-align: right;
	align-items: center;
	padding-right: 10px;
	width: 50%;
}



body {
	background-color: #999999;
	font-family: "Winky Sans", system-ui;
	font-weight: 400;
	font-style: normal;	
	font-size: 16px;
}

@media only screen and (max-width: 768px) {
	body {
		font-size: 12px;
	}
}

#content_container { width: 100%; background-color: #e0e0e0; color: black; text-align: left; 
	padding-left: 40px; padding-right: 40px; 
	padding-top: 20px; padding-bottom: 20px; 
}

.content_block { text-align: left; }
h1 { margin-bottom: 4px; }
p { margin-top: 0px; }

.left-panel-comic {
	border: 1px solid black;
	margin: 20px;
}

#email-error, #password-error { clear: left; color: red; padding-left: 5px;}

#NotValidMessage, #recaptchaResponse { display: none; }

#NotValidMessage { color: red; }

.pageMessage { color: red; font-size: 140%; font-weight: bold; }

    input {
      /* width: 100%;  */
      max-width: 300px;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      box-sizing: border-box;
      position: relative;
    }

    .input_text {
      width: 300px;
    }