@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pridi&display=swap');

body {
	font-family: 'Pridi', serif;
	font-size: 18px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Pridi', serif;
}

.row {
	margin-right: unset;
	margin-left: unset;
}

.nowrap {
	white-space: nowrap;
}

/* ----- page 1 ----- */
#page-1 {
	background-image: url("../img/bg-page-1.svg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	height: 67vh;
}
/* header */
#page-1 .header {
	background-image: url("../img/bg-header.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* menu bar */
#page-1 .menu-bar {
	width: 100%;
	text-align: right;
	background: transparent;
}
#page-1 .menu-bar span>span {
	color: #292929;
}
#page-1 .menu-bar a button {
	background-color: transparent;
	color: #292929;
}
#page-1 .menu-bar a button:hover {
	color: #7B191A;
}
/* logo */
#page-1 .logo-block {
	margin-top: -20px;
}
#page-1 .logo-block .logo-image {
	width: 84vh;
	padding: 5px 0px 20px 100px;
}
/* search block */
#page-1 .search-tab {
	background-color: rgba(255, 255, 255, 0.8);
	margin-top: 10vh;
	padding: 0px;
	border-radius: 5px;
}
#page-1 .search-tab ul.nav-tabs li {
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background-color: #f0f0f0;
}
#page-1 .search-tab ul.nav-tabs li.active {
	border-bottom: 3px solid #7B191A;
}
#page-1 .nav-tabs>li>a {
	color: #292929;
	font-size: 22px;
	border-color: #f0f0f0;
}
#page-1 .nav-tabs>li>a:hover {
	background-color: transparent;
	color: #7B191A;
}
#page-1 .nav-tabs>li.active>a,
#page-1 .nav-tabs>li.active>a:focus,
#page-1 .nav-tabs>li.active>a:hover {
	background-color: #FFFFFFC3;
	color: #7B191A;
}
#page-1 .tab-content {
	padding: 20px 120px;
	text-align: center;
	background: #FFFFFF3B;
}
#page-1 .tab-content .search-block {
	padding: 5% 0%;
}
#page-1 .tab-content .search-input {
	width: 75%;
	height: 5vh;
}
#page-1 .tab-content .search-button {
	width: 20%;
	height: 5vh;
	color: #FFFFFF;
	background-color: #7B191A;
	border: none;
}
#page-1 .tab-content .feature-search a {
	color: #7B191A;
	font-size: 16px;
}
#page-1 .tab-content .feature-search span {
	padding: 0px 25px;
}
/* ----- page-1 ----- */

/* ----- page-2 ----- */
#page-2 {
	background-image: url("../img/bg-page-2.svg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
/* new book */
#page-2 .new-book {
	padding: 20px 0px;
}
#page-2 .new-book #coverflow {
	overflow: hidden;
	padding: 25px 0px;
}
#page-2 .new-book #coverflow .koha-coverflow .flipster__item__content p {
	min-height: 55px;
}
#page-2 .new-book #coverflow .flipster__item__content {
	background-color: #FFFFFF;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
	text-align: center;
}
#page-2 .new-book #coverflow .flipster__item .flipster__item__content p {
	display: -webkit-box !important;
	margin: 5px auto;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.8;
}
#page-2 .new-book .indicator {
	border-bottom: 3px solid #7B191A;
}
#page-2 .new-book .title label {
	font-size: 24px;
}
#page-2 .flipster--flat .flipster__item--past,
#page-2 .flipster--flat .flipster__item--future {
	opacity: unset;
}
/* suggestion menu */
#page-2 .suggestion-menu {
	padding: 20px 0px;
}
#page-2 .suggestion-menu .content {
	text-align: center;
	padding: 25px 0px;
}
#page-2 .suggestion-menu .row > div {
    padding: 0px 5px;
}
#page-2 .suggestion-menu .indicator {
	border-bottom: 3px solid #7B191A;
}
#page-2 .suggestion-menu .title label {
	font-size: 24px;
}
#page-2 .suggestion-menu .squre {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 50px 0px;
	cursor: pointer;
	border-radius: 5px;
}
#page-2 .suggestion-menu .squre:hover {
	box-shadow: 0px 0px 10px 0px #434343;
}
#page-2 .suggestion-menu .squre.renew {
	background-image: url("../img/renew-book.svg");
}
#page-2 .suggestion-menu .squre.interest {
	background-image: url("../img/interest-book.svg");
}
#page-2 .suggestion-menu .squre.suggest {
	background-image: url("../img/suggestion-book.svg");
}
#page-2 .suggestion-menu .squre.most {
	background-image: url("../img/most-popular-book.svg");
}
#page-2 .suggestion-menu .squre p {
	color: #FFFFFF;
	font-size: 28px;
	margin: 0px;
	cursor: pointer;
}
#page-2 .suggestion-menu .squre span {
	color: #FFFFFF;
	font-size: 24px;
	cursor: pointer;
}
/* ----- page-2 ----- */

/* ----- page-3 ----- */
#page-3 {
	background-color: #7B191A;
}
/* category book */
#page-3 .category-book {
	padding: 20px 0px;
}
#page-3 .category-book .content {
	text-align: center;
	padding: 25px 0px;
}
#page-3 .category-book .squre:hover {
	box-shadow: inset 0px 0px 10px 0px #6B6B6B;
	cursor: pointer;
	border-radius: 10px;
}
#page-3 .category-book .row > div {
    padding: 0px;
}
#page-3 .category-book .indicator {
	border-bottom: 3px solid #FFFFFF;
}
#page-3 .category-book .title label {
	font-size: 24px;
	color: #FFFFFF;
	font-weight: unset;
}
#page-3 .category-book .squre img {
	max-width: 100%;
}
/* ----- page-3 ----- */

/* ---- footer ---- */
footer.footer {
	background-image: url("../img/bg-footer.svg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
footer .contact {
	padding: 20px 0px;
}
footer .contact .content {
	padding: 25px 0px;
	padding-bottom: 0px;
}
footer .contact .indicator {
	border-bottom: 3px solid #FFFFFF;
}
footer .contact .title label {
	font-size: 24px;
	color: #FFFFFF;
	font-weight: unset;
}
footer .contact .content .row {
	display: flex;
	margin-bottom: 5px;
}
footer .contact .content i {
	color: #FFFFFF;
	padding-right: 10px;
}
footer .contact .content i.fa-envelope {
	line-height: 1.3;
}
footer .contact .content p {
	color: #FFFFFF;
	margin: 0px;
}
footer .contact .content a {
	color: #FFFFFF;
}
/* license */
footer.license .container {
	margin: 5px auto;
	text-align: center;
}
footer.license span {
	font-size: 16px;
}
/* ---- footer ---- */

.submenu {
	display: none;
}

.overlay-content {
	display: flex;
}
.overlay-menu {
	width: 200px;
	cursor: pointer;
}
.overlay-menu img {
	width: 100%;
}

a.overlay-menu {
	margin: 4px;
	height: 40px;
	width: 100%;
	font-size: 30px;
}

a.overlay-menu button {
	width: 95%;
	background-color: black;
	border: none;
	color: white;
	border-radius: 5px;
	height: 40px;
	font-size: 14px;
}

.tippy-box[data-theme~='light'] {
	background-color: white;
	color: black;
  }
  
  .tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
	border-top-color: white;
  }
  .tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: white;
  }
  .tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
	border-left-color: white;
  }
  .tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
	border-right-color: white;
  }
.tippy-box {
	max-width: 1000px !important;
}


/* lg */
/* @media (max-width: 991px) {
	#page-1 .nav-tabs>li>a>span {
		display: none;
	}
	footer .contact>div {
		padding-bottom: 20px;
	}
	#page-1 .search-tab {
		width: 90%
	}
	footer .contact p>span a {
		text-decoration: underline;
	}
} */

/* md */
/* @media (max-width: 767px) {
	#page-1 {
		height: 60vh;
	}
	#page-1 .nav-tabs>li {
		width: 25%;
		float: left;
	}
	#page-1 .tab-content {
		padding: 5% 3%;
	}
	#page-1 .tab-content .feature-search span {
		padding: 0px 2px;
	}
	#page-1 .tab-content .feature-search a {
		font-size: 14px;
	}
	#page-1 .tab-content .search-block form input {
		font-size: 14px;
	}
	#page-1 .tab-content .feature-search span {
		padding: 0px 5px;
	}
	#page-1 .tab-content .search-button {
		width: 23%;
	}
	#page-1 .search-tab ul.nav-tabs li.active a {
		background-color: #FDFDFD;
		border-color: #FDFDFD;
	}
	#page-1 .search-tab ul.nav-tabs li.active {
		background-color: #FDFDFD;
	}
	#page-2 .access-link .title h1 {
		font-size: 36px;
	}
	footer .title h1 {
		font-size: 36px;
	}
} */

@media (max-width: 992px) {
	#page-1 .logo-block .logo-image {
		width: 70vh;
		padding: 5px 0px 20px 20px;
	}

	#page-1 {
		background-size: cover;
    background-attachment: unset;
	}

	#page-1 .search-tab {
		width: 90%;
		margin-top: 12vh;
	}

	#page-1 .nav-tabs > li > a > span {
		font-size: 0px;
	}

	.title {
		padding: 0px 20px;
	}

	#page-3 .category-book > .content > .row {
    display: flex;
	}

	footer .contact .content {
		padding: 25px 20px;
	}
}

@media screen and (max-width: 767px) {
	#page-1 .logo-block .logo-image {
		width: 55vh;
		padding: 25px 20px;
	}

	#page-1 .search-tab {
		width: 90%;
		margin-top: 5vh;
	}

	#page-1 .nav-tabs > li > a {
		padding: 2px 0px;
	}

	#page-1 .nav-tabs > li > a > span {
		font-size: 0px;
	}

	#page-1 .search-tab ul.nav-tabs li {
		width: 25%;
		float: left;
	}

	#page-1 .tab-content .search-block {
		padding: 0px 0px 5px 0px;
		font-size: 13px;
	}

	#page-1 .tab-content .feature-search a {
		font-size: 13px;
	}

	#page-1 .tab-content {
		padding: 15px 5px;
	}

	#page-1 .tab-content .feature-search span {
		padding: unset;
	}

	.title {
		padding: 0px 20px;
	}

	#page-2 .suggestion-menu .row > div {
		padding: 5px 20px;
		width: 100%;
	}

	#page-3 .category-book > .content > .row {
		width: 35%;
    display: inline-block;
    margin: auto;
	}

	footer .contact .content {
		padding: 25px 20px;
	}
}