/*
|--------------------------------------------------------------------------
| 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/css?family=Trirong:300,300i,400,400i,500,500i,600&display=swap&subset=thai');
@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?z=20200713';
@import 'breadcrumb.css';
@import 'button.css';
@import 'text-and-background.css';
@import 'form.css';
@import 'search.css';
/*@import 'autocomplete.css';*/
@import 'footer.css';
@import 'contact.css';
@import 'pagination.css';
@import 'comment.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: 'Trirong', sans-serif;
	font-size: 1rem !important;
	/*font-weight: 300;*/
	line-height: 1.6rem;
}
p {
    font-size: 1rem;
}
p.lead {
    font-size: 1.25rem;
}
a:hover,
a:active,
a:focus {
	/*color: #ea234a !important;*/
	color: #494949 !important;
	text-decoration: none;
}
/* footer links open in a new tab and keep :focus on return - don't leave them dark on the dark footer */
footer a.text-white:focus:not(:hover) {
	color: #fff !important;
}
a i:not(.fab):hover,
a i:not(.fab):active,
a i:not(.fab):focus {
	/*color: #ea234a !important;*/
	color: #494949  !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: #ccc !important;
  opacity: 0.5; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: 'Kanit', sans-serif;
  color: #ccc !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  font-family: 'Kanit', sans-serif;
  color: #ccc !important;
}

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

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

.fs-bigger { font-size: 1.1em !important; }
.fs-bigger-2 { font-size: 1.2em !important; }
.fs-smaller { font-size: 0.9em !important; }
.fs-smaller-2 { font-size: 0.8em !important; }
.fs-large { font-size: 1.5em !important; }
.fs-bigger-r { font-size: 1.1rem !important; }
.fs-bigger-2-r { font-size: 1.2rem !important; }
.fs-large-r { font-size: 1.5rem !important; }


/*
|--------------------------------------------------------------------------
| Content detail
|--------------------------------------------------------------------------
*/
.content-description { word-break: break-word; }
.content-description img {
	max-width: 100% !important;
	height: auto !important;
}
.arrow-right {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 0 14px 14px;
	border-color: transparent transparent transparent #ea234a;
	float:right;
}
.print-and-share {

}
.icon-print,
.icon-share {
	width: 24px;
	height: 24px;
}


/*
|--------------------------------------------------------------------------
| Optimize for all devices
|--------------------------------------------------------------------------
*/
/*--- Small devices (landscape phones, 576px and up) ---*/
@media (min-width: 576px) {
	
}
/*--- Medium devices (tablets, 768px and up) ---*/
@media (min-width: 768px) {
	
}
/*--- Large devices (desktops, 992px and up) ---*/
@media (min-width: 992px) {
	.print-and-share {
		position: absolute;
		top: 0;
		left: -3%;
	}
}
/*--- Extra large devices (large desktops, 1200px and up) ---*/
@media (min-width: 1200px) {
	.print-and-share {
		left: -4%;
	}
}