@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700,900|Roboto+Slab:400,900|Fugaz+One');
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
html,body {
	height: 100%;
}
html, body {
    min-height: 100%;
    width: 100%;
}
.mainbox {
	padding-right: 2rem;
	padding-left: 2rem;
	margin: 0 auto;
	margin-top: 2rem;
}
a {
	font: inherit;
	color: inherit;
	border-bottom: 1px dotted rgba(0,0,0,0.5);
}
div#topnav {
	padding: 0 2rem;
	/*position: sticky;*/
	top: 0;
}
div#topnav figure {
	margin-top: -5px;
	width: 7rem;
	background-color: #f8e434;
	border: 4px solid white;
	border-top: 0;
	-webkit-box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
}
a#menu-btn,
a#search-btn {
	border-bottom: 0;
	padding: 0.5rem;
	margin-top: 1.5rem;

}
a#menu-btn i,
a#search-btn i {
	font-size: 1.5rem;

}
a.close-btn {
	color: white;
}
a.close-btn i {
	font-size: 1.5rem;
}
#overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
#overlay li>a {
	color: white;
	padding: 1rem 2rem;
}
figure.imgtitle {
	width: 25vh;
}
figure img {
	width: 100%;
	height: auto;
}
figure a,
.booklist a {
	border: 0;
}
body {
	background: url(/assets/images/komikm_bg2020-1.png) top no-repeat #f8e434;
	background-size: cover;
	/*background-color: #f8e434; */
	background-attachment: fixed;
}
strong {
	color: inherit;
}
div#topnav ul {
	list-style: none;
	border: 2px solid rgba(255,255,255,1);
	-webkit-box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	text-transform: uppercase;
	background-color: #f8e434;
	background-color: black;
}
div#topnav li>a {
	margin: 0 0.1rem;
	display: block;
	padding: 0.5rem 1rem;
	color: black;
	color: white;
	font: 900 1.2rem "Fugaz One";
	border-bottom: none;
}
div#topnav li>a>span {
	font: inherit;
}
body#sh li.sh>a,
body#hp li.hp>a,
body#ap li.ap>a,
body#kt li.kt>a {
	border-color: white;
}
#brand {
	display: inline-flex;
	padding: 0.05rem;
	padding-bottom: 2.5rem;
	background: white;
	width: 5rem;
}
#brand img {
	width: 100%;
	height: auto;
}
#parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
#header h1 {
	font: 500 2.5rem/2.2rem "Fugaz One";
	padding: 1rem 2rem;
	text-transform: uppercase;
	color: black;
}
#header h1>strong {
	font-weight: 900;
}

.booklist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 2rem;
	position: relative;
}
.booklist>div {
	text-align: center;
	width: 14rem;
	padding: 1.5rem 0.5rem;
	margin: 0.5rem;
	background-color: #f8e434;
	position: relative;
}
.booklist img.book-cover {
	width: 100%;
	height: auto;
	border-radius: .1rem;
	border: 3px solid white;
	-webkit-box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
}
.opbooks img.book-cover {
	width: 80% !important;
}
.booklist h3 {
	margin-top: 0.2rem;
}
.booklist h3>a {
	font: 700 1rem/1.2rem "DM Sans";
	color: rgba(0,0,0,0.8);
}
.booklist div.upcoming {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255,255,255, 0.8);
	font: 700 1.2rem "DM Sans";
	text-transform: uppercase;
	width: 95%;
	padding: 0 1rem;
	display: block;
}
h3.title {
	display: inline-flex;
	padding: 1rem;
	font: 900 1.2rem "Roboto Slab";
	font: 900 1.2rem "DM Sans";
	color: white;
	border-bottom: 3px solid white;
	margin-bottom: 2rem;
	background-color: rgba(0,0,0,0.9);
	background-color: #f8e434;
	color: black;
	text-transform: uppercase;
	-webkit-box-shadow: 0 0 0 16px rgba(0,0,0,1);
	box-shadow: 0 0 0 16px rgba(0,0,0,1);
}
h3.title>a {
	color: inherit;
}
.grid-center {
	display: grid;
	place-items: center;
}
h4.bubbletitle {
	background: url('/assets/images/komikm_title.png') repeat-none;
}
h4 {
	color: black;
	line-height: 4rem;
}
div.buy {
	display: inline-flex;
	margin-top: 0.5rem;
}
div.buy>a {
	padding: 0.5rem 1rem;
	background-color: black;
	color: white;
}
div#footer {
	margin-top: 2rem;
	padding: 2rem;
}
div#footer p {
	font: 400 1rem "DM Sans";
	text-align: center;
}
div#book {
	display: grid;
	place-items: center;
}
div#book figure {
	width: 20rem;
	margin-bottom: -4rem;
	z-index: 1000;
}
div#book figure>img {
	width: 100%;
	height: auto;
	border: 0.5rem solid white;
}
div#bookbody {
	padding: 5rem 3rem;
	background: black;
	width: 100%;
}
div#bookbody>div {
	max-width: 760px;
	margin: 0 auto;
}
div#bookbody p {
	font: 400 1.1rem/1.5rem "DM Sans";
	margin-bottom: 1rem;
	color: white;
}
div#bookspec {
	margin-bottom: 2rem;
	text-align: center;
}
div#bookspec h5 {
	margin-bottom: 2rem;
}
div#bookspec p {
	font: 400 1rem "DM Sans" !important;
	margin-bottom: 0.25rem !important;
}
div#bookbutton {
	padding: 2rem;
}
div#bookbutton a {
	border: 2px solid white;
	padding: 0.5rem;
	margin: 0.15rem;
}
div#bookbutton a>span {
	color: white;
	font: 500 1rem "DM Sans";
}
div.bookbutton2 {
	padding: 2rem;
}
div.bookbutton2 a {
	border: 2px solid white;
	padding: 0.5rem;
	margin: 0.15rem;
}
div.bookbutton2 a>span {
	color: black;
	font: 500 1rem "DM Sans";
}
div#bookbutton h6,
div.bookbutton2 h6 {
	font: 500 1.3rem "DM Sans";
	width: 100%;
	text-align: center;
	margin-bottom: 0.5rem;
	color: white;
}
div#bodytext {
	padding: 2rem 0;
}
div#booktoon {
	padding: 5rem 3rem;
	width: 100%;
}
div#booktoon figure {
	max-width: 760px;
	margin: 0 auto;
	border: 2px solid black;
}
a.btn {
	margin-top: 0.5rem;
	display: inline-block;
	padding: 0 0.5rem;
	border-radius: 0.2rem;
}
a.btn>span {
	font: 600 0.7rem/1.5rem "DM Sans";
	color: white;
	text-transform: uppercase;
}
a.shopee {
	background-color: #EA501F;
}
a.whatsapp {
	background-color: #35C436;
}
a.lazada {
	background-color: #f3037b;
}
a.bcafe {
	background-color: #652f91;
}
a.google {
	background-color: #039be5;
}
a.esentral {
	background-color: #08589a;
}

p.author {
	color: rgba(0,0,0,0.7);
	font: 400 0.9rem "DM Sans";
	margin: 0.5rem 0;
}
p.price {
	color: rgba(0,0,0,0.5);
	font: 400 1rem "DM Sans";
	margin: 0.5rem 0;
}
.booklist>div.paginate {
	width: 50% !important;
}
div.paginate a {
	padding: 0.3rem 0.5rem;
	margin: 0 0.1rem;
}
a.current-pg {
	border: 2px solid black;
	padding: 0.3rem;
}
a.bigbutton {
	border: 2px solid rgba(255,255,255,1);
	-webkit-box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	box-shadow: -5px 5px 0 0 rgba(0,0,0,1);
	background-color: black;
	margin: 0 0.1rem;
	display: block;
	padding: 0.5rem 1rem;
}
a.bigbutton>span {
	text-transform: uppercase;
	color: white;
	font: 900 1.2rem "Fugaz One";	
}
a.buy {
	display: inline-flex;
	align-items: center;
}
a.buy img {
	height: 1.5rem;
	width: auto;
	margin-right: 0.5rem;
}
a.buy_ebook {
	background-color: black;
	padding: 0.25 !important;
}
a.buy_ebook img {
	height: 2rem !important;
}
div#spec p {
	font: 400 0.9rem/1.1rem "DM Sans";
	margin-bottom: 0;
	color: rgba(255,255,255,0.8);
}
div#spec p.spec {
	color: white;
	font-size: 1rem;
}
div#spec>div {
	width: 30%;
	margin: 0.5rem;
}
/*	SEARCH FORM	*/
form[name="search_form"] {
	padding: 1rem 0;
}
form[name="search_form"] button {
	border: 2px solid white;
	padding: 1rem 1.5rem;
	background: none;
	margin-top: 1rem;
}
form[name="search_form"] button:hover {
	cursor: pointer;
}
form[name="search_form"] button>span {
	font: 400 1.2rem "Fugaz One";
	text-transform: uppercase;
	color: white;
}
form[name="search_form"] button>i {
	color: white;
}
div#search {
	width: 40%;
	margin: 2rem auto;
	border-bottom: 2px solid black;
	padding-right: 2rem;
}
input[name="keywords"] {
	height: 4rem;
	line-height: 4rem;
	font: 500 1.5rem "DM Sans";
	border: 0;
	padding: 2rem 1rem;
	width: 100%;
	background: white;
	-webkit-box-shadow: 4px 4px 0 0 #f8e434;
	box-shadow: 4px 4px 0 0 #f8e434;
	outline: 2px solid black;
}
/* mobile menu */
#menuLeft,
#menuRight {
    background-color: black;
    padding-bottom: 5em;
    height: 100vh;
    overflow: auto;
    padding: 3rem;
}
#menuLeft>div,
#menuRight>div {
	padding: 2rem 0;
}
#menuLeft ul {
	display: flex;
	flex-wrap: wrap;
}
#menuLeft li {
	width: 25%;
	color: white;
	list-style: none;
	padding: 1rem 0.5rem;
}
#menuLeft li>a {
	padding: 1rem 0.5rem;
}
#menuLeft li span {
	font-size: 1.2rem;
}
#menuLeft h3,
#menuRight h3 {
	font: 400 1.5rem "Fugaz One";
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	color: #f8e434;
	margin-bottom: 1rem;
}
.pagelay {
	position: fixed;
	top: 0;
	z-index: 2000;
	display: block;
	width: 100%;
	box-sizing: border-box;
	-webkit-animation-duration: 0.5s !important;
	animation-duration: 0.5s !important;
}
.closeme {
    visibility: visible;
    transform: translateX(-2999px);
    -webkit-transform: translateX(-2999px);
}
div#socialfooter a {
	padding: 1rem;
	border-bottom: 0;
}
div#socialfooter i {
    font-size: 1.5rem;
    color: rgba(0,0,0,1);
}
div.bestseller>div {
	counter-increment: pts-bestseller;
	/*width: 12rem;*/
}
div.bestseller>div::after {
	content: counter(pts-bestseller);
	text-align: center;
	line-height: 2.5rem;
	height: 2.5rem;
	width: 2.5rem;
	top: 1rem;
	right: 0;
	position: absolute;
	background-color: #e7245c;
	border-radius: 100px;
	color: white;
	font: 900 1.1rem/2.5rem "DM Sans";
}
@media screen and (max-width: 640px) {
	div#spec {
		
	}
	div#spec>div {
		padding: 0.5rem 0;
		width: 42%;
	}
	#menuLeft li {
		width: 50%;
	}
}
@media screen and (max-width: 540px) {
	body {
		background-size: contain;
	}
	#brand {
		width: 4rem;
		padding-bottom: 1rem;
		justify-content: center;
	}
	.booklist>div {
		width: 42%;
		margin: 0.5rem;
	}/*
	div#topnav {
		display: block;
		text-align: center;
		padding: 0 0.5rem;
		margin-bottom: 2rem;
	}*/
	div#topnav {
		align-items: flex-start;
	}
	div#topnav li {
		margin: 0.1rem 0rem;
	}
	div#topnav li>a {
		font-size: 1rem;
		font-weight: 500;
	}
	div#topnav ul {
		flex-wrap: wrap;
		align-items:  flex-start;
		justify-content: center;
		margin: 1rem 2rem;
	}
	div#topnav figure {
		width: 5rem;
		margin: 0 auto;
		margin-bottom: 1rem;
		margin-top: -5px;
	}
	#header h1 {
		text-align: center;
	}
	div#search {
		width: 80%;
		padding-right: 0.5rem;
	}
	input[name="keywords"] {
		width: 100%;
	}
	div#spec {
		
	}
	div#spec>div {
		padding: 0.5rem 0;
		width: 42%;
	}
	div#bookbutton {
		display: block;
		text-align: center;
	}
	div#bookbutton a {
		margin:  0.25rem auto;
	}

}