/*
|--------------------------------------------------------------------------
| Belib main css
|--------------------------------------------------------------------------
|
| DO NOT CHANGE ANYTHING IN THIS FILE!!!!!!!!!!!!
| ANY CUSTOMIZATION, PLEASE DO IT IN 'client' FOLDER ONLY!!!!!!!!!!!!
|
|--------------------------------------------------------------------------
|
*/

/*
|--------------------------------------------------------------------------
| Google fonts
|--------------------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krub:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');


/*
|--------------------------------------------------------------------------
| Core files
|--------------------------------------------------------------------------
*/
@import 'topbar.css';
@import 'carousel.css';
@import 'breadcrumb.css';
@import 'button.css';
@import 'text-and-background.css';
@import 'form.css';
@import 'bookshelf.css';
@import 'autocomplete.css';
@import 'footer.css';



/*
|--------------------------------------------------------------------------
| General
|--------------------------------------------------------------------------
*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:focus {
    outline: 0 !important
}
html {
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Kanit', sans-serif;
}
body {
	font-family: 'Krub', sans-serif;
	font-size: 1rem !important;
}
p {
    font-size: 1rem;
}
p.lead {
    font-size: 1.25rem;
}
a:hover,
a:active,
a:focus,
a.text-dark:hover,
a.text-dark:active,
a.text-dark:focus,
a figcaption:hover,
a figcaption:active,
a figcaption:focus {
	color: #015BA9 !important;
	text-decoration: none;
	cursor: pointer !important;
}
a i:not(.fab):hover,
a i:not(.fab):active,
a i:not(.fab):focus {
	color: #015BA9 !important;
	text-decoration: underline;
}
.container { 
	padding-left: 25px !important; 
	padding-right: 25px !important; 
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'Kanit', sans-serif;
  color: #eee;
  opacity: 0.5; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: 'Kanit', sans-serif;
  color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
  font-family: 'Kanit', sans-serif;
  color: #eee;
}

.media img { width: 40px; height: 40px; }
.media img.big { width: 60px; height: 60px; }

.cursor-pointer { cursor: pointer !important; }

.font-pri-,
.font-pri-th { font-family: 'Kanit', sans-serif !important; }
.font-sec-th { font-family: 'Krub', sans-serif !important; }
.font-pri-en { font-family: 'Poppins', sans-serif !important; }
.font-sec-en { font-family: 'Kanit', sans-serif !important; }

.fs-bigger { font-size: 1.2em !important; }
.fs-large { font-size: 1.5em !important; }

/*
|--------------------------------------------------------------------------
| Page header
|--------------------------------------------------------------------------
*/
.page-header-pri {
	font-family: 'Kanit', sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
}
.page-header-sec {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	font-style: italic; 
}
.sub-page-header {
	font-family: 'Kanit', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	color: #015BA9;
}
.border-bottom-thick {
	border-bottom: 3px solid #333;
}




/*
|--------------------------------------------------------------------------
| Optimize for all devices
|--------------------------------------------------------------------------
*/
/*--- Small devices (landscape phones, 576px and up) ---*/
@media (min-width: 576px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.2rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.2rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1rem;
	}
}
/*--- Medium devices (tablets, 768px and up) ---*/
@media (min-width: 768px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1rem !important; }
	.container { 
		padding-left: 15px !important; 
		padding-right: 15px !important; 
	}
	.page-header-pri {
		font-weight: 600;
		font-size: 1.4rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.4rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1rem;
	}
}
/*--- Large devices (desktops, 992px and up) ---*/
@media (min-width: 992px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1.25rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.8rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.8rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1.1rem;
	}
}
/*--- Extra large devices (large desktops, 1200px and up) ---*/
@media (min-width: 1200px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1.25rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.8rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.8rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1.1rem;
	}
}