body {
	display: block;
}
.same-line {
	display: inline-block;
}

.bdd-comic-panel#top-panel {
	padding-top: 0 !important;
}

.bdd-comic-panel .bdd-logo {
	height: 30px;
	margin-top: 0%;
}

.bdd-comic-panel .bdd-logo-img {
	height: 30px;
	margin-top: 6px;
}

.bdd-logo {
	height: 50px;
	margin-top: -0.5%;
	margin-bottom:  1%;
	display: inline-block;
}

.bdd-logo-img {
	height: 50px;
}

.bdd-nav-item li {
	padding-top: 10;
}



/************************************
 * Title Banner Section
 ************************************/
.banner {
	margin-top: 3.5%;
	padding: 0%;
}

.banner-full {
	width: 100%;
}

/************************************
 * Profile/Explanation Section 
 ***********************************/
#bdd-intro {
	/*padding-top:5%;
	padding-bottom: 0;*/
	padding: 5% 0 0 0;
	background-color: #eaeaea;
}

/* Style help from url: https://codepen.io/AndreiDodu/pen/gziqn */
#bdd-intro:after {		/* For zigzag effect */
	background: 
		linear-gradient(-45deg, #052239 3em, transparent 0), 
		linear-gradient(45deg, #052239 3em, transparent 0);
    background-size: 5em;
    content: "  ";
    display: block;
    height: 8em;
}


#bdd-exp {
	width: 70%;
	text-align: justify;
	padding-left: 10%;
	/*border: 1px solid green;*/
	color: #052239;		/* Bumkko dark color */
}

#bdd-exp h1 {
	color: #113653;		/* Bumkko main color */
	font-size: 5em;
	font-weight: bold;
	padding-bottom: 3%;
}

#bdd-exp p {
	font-size: 1.7em;
	padding-bottom: 1%;
}

#bdd-exp p .link-ref {
	cursor: pointer;
	font-style: italic;
}

#bdd-exp p.notice {
	font-size: 1.9em;
	font-weight: bold;
}

#bdd-exp p.ps {
	font-size: 1.3em;
	margin-top: 5%;
	color: #e07c18;
}

#bdd-exp p.ps a {
	color: #a85706;
}



#bdd-profile {
	width: 25%;
	/*border: 2px solid blue;*/
	padding: 4% 10% 4% 0;
	text-align: center;
}

.pic-profile {
	width: 100%;
}

.div-app-icon {
	display: inline-block;
	vertical-align: top;
	margin-top: 5%;
	margin-right: 3%;
	margin-bottom: 10%;
}

.app-download {
	vertical-align: top;
	display: inline-block;
	width: 70%;
	margin-top: 4%;
	margin-bottom: 5%;
}

.app-download p {
	font-size: 1.6em;
	margin-bottom: 7%;
}

.app-download .download-link {
	margin: 0 2% 0 0;
}

/*****************************************
 * List Section
 ****************************************/
#bdd-list {
	background-color: #052239;
	padding-bottom: 10%;
	text-align: center;
}

#bdd-list h1 {
	text-align: center;
	color: white;
	margin: 2% 0 7% 0;
	font-size: 3em;
	font-weight: bold;
}


.bdd-comic-lists {
	text-align: justify; 
	/*text-align: left;	/**** for now ****/
	max-width: 1310px;
	margin: auto;
}

.bdd-list-item {
	position: relative;
	vertical-align: top;
	width: 240px;
	height: 28em;
	text-align: center;
	display: inline-block;
	background-color: #fff4ea;
	overflow: hidden;
	border-radius: 5px;
	margin: 0 10px 8% 10px; 
	/*margin-right: 5%;	/**** For now ***/
}

.bdd-comic-lists:after {
	content: '';
	width: 100%;
	display: inline-block;
}

.bdd-list-item:hover {
	background-color: #707070;
}

.pic-thumb {
	margin-top: 15%;
	margin-bottom: 10%;
	width: 80%;
	border-radius: 50%;
	border: 3px solid  #052239;
}

.bdd-episode {
	padding: 0 7%;
	margin-top: 5%;
}

.bdd-episode p {
	font-size: 1.4em;
	color: black;
}

.bdd-list-item:hover .bdd-episode p{
	color: white;
}

/*************************************************
 ** reference page
 *************************************************/
#bdd-reference {
	background-color: #ebe0ff;
}

#bdd-reference h1 {
	text-align: center;
	font-size: 3em;
	font-weight: bold;
	color: #1b0444;
	text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
}

#bdd-reference p {
	text-align: center;
	font-size: 1em;
	color: #645e70;
	margin-bottom: 5%;
}

.ref-episode {
	margin: 1% 10%;
}

.ref-episode h2 {
	font-size: 1.8em;
	margin: 2% 0;
	cursor: pointer;
	font-weight: bold;
	color: #2d2d2d;
}

.ref-episode h2:hover {
	color: white;
	text-shadow: -1px 0 #2d2d2d, 0 1px #2d2d2d, 1px 0 #2d2d2d, 0 -1px #2d2d2d;
}

table.ref-list-items {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1em;
	margin: 4% 0;
}

table.ref-list-items tr:first-child th:first-child {
	border-top-left-radius: 15px;
}

table.ref-list-items tr:first-child th:last-child {
	border-top-right-radius: 15px;
}

.ref-list-items tr:nth-child(even) {
	background-color: #f0e8ff;
}

.ref-list-items th {
	padding: 3% 1%;
	font-weight: bold;
	border-bottom: 2px solid #dbcaf9;
	background-color: #dbcaf9;
}

.ref-list-items td {
	padding: 2% 1%;
	border-bottom: 1px solid #f0e8ff;
}

.bdd-bn {
	background-color: #ebe0ff;
}


/*************************************************
 *************************************************
 *** Webtoon Page ***
 *************************************************
 *************************************************/
#bdd-epi-info {
	margin: 50px 10% 0 10%;
	width: 80%;
	border-bottom: 2px solid #b7b1a8;
	padding-bottom: 0;
	padding: 3% 0 0 0;
}


#bdd-epi-title {
	font-size: 2.5em;
	font-weight: bold;
	color: black;
}

#bdd-epi-date {
	color: #515151;
}

.upload-date {
	font-weight: bold;
}

#bdd_reader {
	background:  white;	
	text-align: center;
	display: block;
	padding: 3% 0;
}

#bdd_reader_pages {
	width: 690px;
	margin: auto;
	margin-bottom: 10%;
}

.bdd_page img {
	width: 100%;
}

.bdd-reader-nav {
	display: block;
	position: fixed;
	bottom: 0;
	z-index: 2;
	background:#cbd6f6;
}

.bdd-reader-nav p {
	font-size: 0.8em;
}

.nav-epi-title {
	text-align: center;
}

.bdd-bottom-nav {
	margin: 10px 0 2% 0;
	font-size: 1.5em;
}


.bdd-arrow {
	width: 25px;
}

.arrow-prev {
	margin-right: 2%;
}

.arrow-next {
	margin-left: 2%;
}

.not-active {
	visibility: hidden;
}