@import "css/font-awesome.min.css";

@font-face {
  font-family: 'ToranongPro';
  src: url('fonts/ToranongPro/ToranongPro.eot?#iefix') format('embedded-opentype'),  url('fonts/ToranongPro/ToranongPro.otf')  format('opentype'),
	     url('fonts/ToranongPro/ToranongPro.woff') format('woff'), url('fonts/ToranongPro/ToranongPro.ttf')  format('truetype'), url('fonts/ToranongPro/ToranongPro.svg#ToranongPro') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ToranongMediumPro';
  src: url('fonts/ToranongMediumPro/ToranongMediumPro.eot?#iefix') format('embedded-opentype'),  url('fonts/ToranongMediumPro/ToranongMediumPro.otf')  format('opentype'),
	     url('fonts/ToranongMediumPro/ToranongMediumPro.woff') format('woff'), url('fonts/ToranongMediumPro/ToranongMediumPro.ttf')  format('truetype'), url('fonts/ToranongMediumPro/ToranongMediumPro.svg#ToranongMediumPro') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'PSL096pro';
    src: 	url('fonts/kittithada/PSL096pro.eot');
    src: 	url('fonts/kittithada/PSL096pro.eot?#iefix') format('embedded-opentype'),
         	url('fonts/kittithada/PSL096pro.woff') format('woff'),
         	url('fonts/kittithada/PSL096pro.ttf') format('truetype'),
		 	url('fonts/kittithada/PSL096pro.svg#PSL096pro') format('svg');
			font-weight: normal;
			font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'PSL096pro';
            src: url('fonts/kittithada/PSL096pro.svg#PSL096pro') format('svg');
    }
}

@font-face {
    font-family: 'PSL072pro';
    src: 	url('fonts/panpilas/PSL072pro.eot');
    src: 	url('fonts/panpilas/PSL072pro.eot?#iefix') format('embedded-opentype'),
         	url('fonts/panpilas/PSL072pro.woff') format('woff'),
         	url('fonts/panpilas/PSL072pro.ttf') format('truetype'),
		 	url('fonts/panpilas/PSL072pro.svg') format('svg');;
}
@font-face {
    font-family: 'Butterfly';
    src: 	url('fonts/butterfly/PSL212pro.eot');
    src: 	url('fonts/butterfly/PSL212pro.eot?#iefix') format('embedded-opentype'),
         	url('fonts/butterfly/PSL212pro.woff') format('woff'),
         	url('fonts/butterfly/PSL212pro.ttf') format('truetype'),
			url('fonts/butterfly/PSL212pro.svg') format('svg');
}

.top-bar {
width: 100%; 
height: 35px; 
background: #d1000d; 
font-size: 14px;	
color: #FFF;
}
.top-bar a{
color: #FFF;
}
.top-bar a:hover{
color: #ccc;
}

.top-bar-menu {
width: 100%; 
height: 70px;
background: #FFF; 
border-bottom: 1px solid #d1000d; 
}

.header-bar  ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.header-bar  ul li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
  padding: 5px 0;
}
.header-bar  ul li:last-child {
  margin-right: 0;
}
.header-bar  ul li:hover ul {
  transform: scaleY(1);
  visibility: visible;
  opacity: 1;
}
.header-bar  ul li ul {
  position: absolute;
  background: rgba(209, 0, 13, 0.9);
  left: 0;
  opacity: 0;
  top: 35px;
  transform: scaleY(0);
  transform-origin: 0 0 0;
  transition: all 0.5s ease 0s;
  width: 200px;
  z-index: 9999999999;
  text-align: left;
  visibility: hidden;
}
.header-bar  ul li ul li {
  display: block;
  border-bottom: 1px solid #d1000d;
  margin: 0;
  padding: 0;
}
.header-bar  ul li ul li a {
  display: block;
  padding: 7px 10px;
  text-decoration: none;
}
.header-bar  ul li a {
  display: block;
  transition: all 0.5s ease 0s;
  color: #ffffff;
  font-weight: 300;
  text-decoration: none;
}
.header-bar  ul li a:hover {
  color: #D3D3D3;
}
.header-bar  ul li a i {
  margin-right: 10px;
}

.container_aboutus {
	max-width: 730px;
	position: relative;
}
 .aboutus-main {
  position: relative;
  *zoom: 1;
}
.aboutus-main img {
  max-width: 100%;
  }

.box-aboutus {
	min-width: 1003px;
	background: #455692;
	min-height: 39px;
}
/*  Follow us*/

.footer-bottom-top {
	width: 100%;
	height: 80px;
	background: #000;
	padding: 10px 0;
	border-bottom: 5px solid #d1000d;
}

.footer-followus {
	font-size: 16px;
	color: #FFF;
	margin: 0px 15px;
}

.footer-followus p{
	font-size: 16px;
	color: #FFF;
}

.footer-followus a{
	color: #FFF;
}

.footer-followus a:hover{
	color: #d1000d;
}

.footer-widget {}
.footer-title {
  font-family: 'ToranongMediumPro';
  font-size: 22px;
  color: #FF0000;
  line-height:40px;
  border-bottom: 1px dotted #73716f;
  margin-bottom: 10px;
 
}
/*footer-logo*/

.footer-logo > li {
  
	float: left;
	overflow: hidden;
    padding-top: 10px;
}

/*footer-latest-news*/
.footer-widget.middle {
  margin: auto;
  width: calc(100% - 100px);
}

.footer-contact-title {
  font-family: 'ToranongMediumPro';
  font-size: 22px;
  color: #FF0000;
  line-height:40px;
  border-bottom: 1px dotted #73716f;
  margin-bottom: 3px;
}

.footer-contact > li  {
    border-bottom: 1px solid #ccc;
    
}
.footer-contact > li {
    overflow: hidden;
    padding-top: 8px;
	padding-bottom: 10px;
}

/*copyright*/
.footer-bottom {
  background: #FFFFFF;
  border-top: 1px dotted #CCC;
  margin-top: 15px;
  padding: 20px 0;
}
.copyright > p {
  font-size: 13px;
  font-weight: 300;
  margin-bottom: 0;
}
.copyright a {
  color: #000;
}

.address-info > span,
.latest-news-info > p,
.footer-contact > p,
.copyright > p {
  /*color: #919191;*/
  color: #000;
}

/* Two Columns */
.columnsContainer { 
position: relative; 

}

.leftColumn { margin-bottom: .5em; }


/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
	.leftColumn { margin-right: 19.5em; }
	.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
}
.table_webboard {
	border-spacing: 2px;
    border-collapse: collapse;
}

.table_webboard td {
padding: 2px;
border: none;
}

.table_admin {
	border-spacing: 10px;
    border-collapse: collapse;
}

.table_admin td {
text-align: left;
padding: 10px;
border: none;
}

.admin_main {
	border-spacing: 15px;
    border-collapse: collapse;
}

.admin_main td {
padding: 15px;
border: none;
}

.borderless tr, .borderless td, .borderless th {
    border: none !important;
	
}

.borderless2 tr, .borderless2 td, .borderless2 th {
    border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#icon_admin {
text-align: left;
width: 50px;
font-size: 30px;
}

.img_responsive {
    width: 100%;
    max-width: 160px;
    height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.img_responsive_banner {
    width: 100%;
	max-width: 100%;
    height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.img_responsive_banner_index {
    width: 100%;
    max-width: 300px;
    height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.img_res_detail {
    width: 100%;
    max-width: 700px;
    height: auto;
}

.banner_topic {
  font-family: 'ToranongMediumPro';
  font-size: 28px;
  color: #d1000d;
  line-height:26px;
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: center;
}

.text-slide-responsive {
  font-family: 'ToranongMediumPro';
  font-size: 20%;
  color: #0000FF;
  line-height:24px;
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: center;
}

.text_aboutus {
  font-family: 'ToranongMediumPro';
  font-size: 135%;
  color: #0000FF;
  line-height:24px;
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: center;
}

.text_aboutus_grey {
  font-family: 'ToranongMediumPro';
  font-size: 110%;
  color: #999999;
  line-height:20px;
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: center;
}

.text_aboutus_topic {
  font-family: 'ToranongMediumPro';
  font-size: 26px;
  color: #000000;
  line-height:24px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.link_red a{
	color: #b5271c;
	font-size: 14px;
}

.link_red a:hover{
	color: #ff1200;
}

.form-control .editform{
margin-bottom: -15px;	
}

.topic_knowledge {
  font-family: 'ToranongMediumPro';
  font-size: 32px;
  color: #000000;
  line-height:24px;
  font-weight: normal;
 
}

.responsive_knowledge{
	width: 100%;
    max-width: 700px;
    height: auto;
	display: block;
}

.owner_pic{
	width: 100%;
    max-width: 70px;
    height: auto;
	display: block;
}

.text_owner {
 font-family: 'ToranongMediumPro';
  font-size: 22px;
  color: #000000;
  line-height:22px;
  font-weight: normal;	
}
.account-login {
	background: none repeat scroll 0 0 #fff;
	border: 1px solid #e5e5e5;
	margin: 15px 0px 20px;
	overflow: hidden;
	padding: 25px 25px;
}
.account-login .page-title {
	border-bottom: 1px solid #e5e5e5;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	margin: -15px -25px 25px;
	padding: 15px 25px 20px;
	position: relative;
	text-transform: uppercase;
}
.account-login .page-title h2 {
	font-weight: 600;
}
.account-login .form-list input.input-text {
	background: #fff;
	border: 1px solid #f0f0f0;
	padding: 10px;
	width: 80%;
	margin-top: 5px;
	outline: none;
	margin-bottom: 10px;
}
.account-login .col2-set .col-1 {
	float: left;
	padding-bottom: 0;
	padding: 0px;
	text-align: left;
	width: 49%;
	min-height: 362px;
	background: #fff;
	border-right: 1px solid #eaeaea;
	padding: 25px 25px 0 0;
	margin-bottom: 15px;
}
.account-login .col2-set .col-2 {
	float: right;
	padding-bottom: 0;
	padding: 0 0 0 55px;
	text-align: left;
	width: 48%;
	background: #fff;
	padding: 25px 0;
	margin-bottom: 25px;
}
.account-login strong {
	font-size: 14px;
	color: #000;
	margin-bottom: 15px;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.account-login .content {
	margin-top: 8px;
	padding-top: 12px;
}
.account-login .content p {
	margin-bottom: 10px;
	font-size: 13px;
}
.account-login .content p.required {
	font-size: 12px;
}
.account-login .content .form-list label {
	font-size: 13px;
	color: #333;
	margin-bottom: 5px;
}
.required {
	color: #ff0000;
}
.form-list li.control input.radio, .form-list li.control input.checkbox {
	margin: 0 8px 0 0;
}
input.radio {
	display: inline-block;
	margin: 0 5px 0 0;
	vertical-align: middle;
}
.form-list {
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
form-list label.required em {
	font-style: normal;
}
.required em {
	color: #ff0000;
}
.form-list label {
	color: #333;
	font-weight: normal;
}
.form-list label {
	color: #333;
	display: inline-block;
	font-size: 12px;
	text-align: left;
	white-space: normal;
}
.button.login {
	background-color: #394771;
	color: #fff;
	border: 1px #394771 solid;
	padding: 5px;
}
.button.login_red {
	background-color: #9f0000;
	color: #fff;
	border: 1px #999 solid;
	padding: 5px 15px;
}

.button.login_red:hover{
	background-color: #bb1a1a;
	color: #fff;
	border: 1px #ccc solid;
	padding: 5px 15px;
}
.member_text {
  font-family: 'ToranongMediumPro';
  font-size: 28px;
  color: #9f0000;
  line-height:40px;
}
/*   Tittle  */
.banners-title {
  font-family: 'ToranongMediumPro';
  font-size: 32px;
  color: #FF0000;
  line-height:40px;
  margin-bottom: 25px;
  font-weight: normal;
}

.banners-title span{
  font-family: 'Tahoma';
  font-size: 18px;
  color: #FF0000;
  line-height:40px;
  float:right;
  margin-bottom: 25px;
  font-weight: normal;
}



.topic-top {
  font-family: 'ToranongMediumPro';
  font-size: 24px;
  color: #b91313;
  line-height:24px;
  font-weight: normal;
 
}

.webboard-title {
  font-family: 'ToranongMediumPro';
  font-size: 28px;
  color: #FF0000;
  line-height:10px;
  font-weight: normal;
}

.webboard-topic {
  font-family: 'ToranongMediumPro';
  font-size: 22px;
  color: #b91313;
  line-height:20px;
  font-weight: normal;
}

.webboard-viewall {
  font-family: 'ToranongMediumPro';
  font-size: 20px;
  color: #999;
  line-height:20px;
  margin-bottom: 10px;
  position: absolute;
  right: 280px;
  top: 70px;
}
.services-area {
  margin-top: 50px;
  padding: 50px 0;
  background: #f1f1f1;
}
.services-area .serving-list-area .single-service {
  margin-bottom: 70px;
}
.services-area .serving-list-area .single-service.last-child {
  margin-bottom: 0px;
}
.services-area .serving-list-area .single-service:hover > a {
  border: 1px solid #9f0000;
  color: #ffffff;
  background: #9f0000;
}
.services-area .serving-list-area .single-service:hover h3 a {
  color: #1969d6;
}
.services-area .serving-list-area .single-service > a {
  width: 100px;
  height: 100px;
  margin: auto;
  text-align: center;
  border: 1px solid #333333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  line-height: 90px;
  font-size: 50px;
  transition: all 0.5s ease 0s;
  color: #444444;
  margin-bottom: 20px;
}
.services-area .serving-list-area .single-service h3 {
  margin-bottom: 10px;
}
.services-area .serving-list-area .single-service h3 a {
  margin: auto;
  text-align: center;
  display: block;
  font-size: 14px;
  transition: all 0.5s ease 0s;
  color: #444444;
}
.services-area .services-featured-images {
  width: 100%;
}
.services-area .services-featured-images:hover {
  opacity: .9;
}

.box-border {
	margin-top: 30px;
}

#button-search {
	background-color: #cc3f41;
	border: medium none;
	color: #fff;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	min-width: 105px;
	padding: 0 10px;
	text-transform: uppercase;
	border-radius: 3px;
}
#button-search:hover {
	background: #cd1518;
	color: #fff;
}

#button-search2 {
	background-color: #cc3f41;
	border: medium none;
	color: #fff;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	min-width: 90px;
	padding: 0 10px;
	text-transform: uppercase;
	border-radius: 3px;
}
#button-search2:hover {
	background: #cd1518;
	color: #fff;
}

#button-reset {
	background-color: #F0F0F0;
	border: medium none;
	color: #ccc;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	min-width: 60px;
	padding: 0 10px;
	border-radius: 3px;
}
#button-reset:hover {
	background: #e1dede;
	color: #999;
}

.btn_detail_cal {
	background-color: #cc3f41;
	border: medium none;
	color: #fff;
	font-size: 1em;
	padding: 0 4px;
	text-transform: uppercase;
	border-radius: 3px;
}
.btn_detail_cal:hover {
	background: #cd1518;
	color: #fff;
}


form.callus{
	margin-top:25px;
}
form.callus input.form-control{
  color: #111;
  height: 40px;
}
form.callus textarea{
  width:100%;
  min-height:160px;
  resize: none;
  padding:8px 12px;
}
form.callus textarea,form.callus input.form-control{
	border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: none;
}
form.callus .btn-submit2{
  border: transparent;
  border-radius: 25px;
  background:#ff3332;
  color:#fff;
  cursor:pointer;
}



form.edit_member input.form-control{
  color: #111;
  width:100%;
  height: 35px;
  line-height: 35px;
}
form.edit_member textarea{
  width:100%;
  min-height:160px;
  resize: none;
  padding:8px 12px;
}
form.edit_member textarea,form.edit_member input.form-control{
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: none;
}


.blog-item{
	max-width: 800px;
	text-align:left;
	padding-bottom: 5px;
}

.blog-heading h4{
	font-family: "ToranongMediumPro";
	color: #000000;
	font-size:32px;
	padding-top:0px;
}

.blog-heading h5{
	font-family: "ToranongMediumPro";
	color: #FF0000;
	font-size:32px;
	padding-top:0px;
	line-height: 10px;
}

.blog-item p {
	font-family: "Tahoma";
	color: #000000;
	font-size:15px;
	padding-top:0px;
	line-height: 20px;
}

.blog-item img {
	width: 100%;
	margin-bottom: 10px;
}

.blog-item .blog-caption .blog-heading a:hover{
	color:#ffe000;
}

.blog-list > .blog-item:last-child{
	margin-bottom:0px;
}
.blog-lg .blog-item{
	margin-bottom:30px;
}
.blog-md .blog-item{
	margin-bottom:20px;
}
.blog-sm .blog-item{
	margin-bottom:10px;
}

#cropimage { 
	object-fit: cover; 
	object-position: center;
	width: 280px;
	height:150px;
	
}

@media (min-width: 487px) {
  .container {
    max-width: 750px;
  }
  .col-sm-6 {
    width: 50%;
  }
}

@media (min-width: 900px) {
  .container {
    max-width: 970px;
  }
  .col-md-4 {
    width: 33.33333333333333%;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
  .col-lg-3 {
    width: 25%;
  }
  }
}



.metr {
            width: auto;
            padding: 5px;
            height: auto;
            display: table;
}

.metrostyle {
            height: 250px;
            width: 250px;
            float: left;
            margin: 0 0px 0 0;
            padding: 2px;
}

.metrostyle:hover {
                background-color: #FFF;
}

.metrostylelarge {
            width: 240px;
            height: 260px;
}
		
.calendar_topic {
  color: #999999;
  font-family: 'ToranongMediumPro';
  font-size: 22px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 7px;
}

.topic-banner-modal {
	color: #d1000d;
	font-family: 'ToranongMediumPro';
	font-size: 32px;
	font-weight: 400;
	line-height: 22px;
	margin-top: 7px;
}

.box-calendar_number {
		font-family: 'ToranongMediumPro';
		font-size: 40px;
}

.box-calendar_c_topic {
		font-family: 'ToranongMediumPro';
		font-size: 28px;
		line-height: 110%;
		padding-top: 5px;
}
.alumni-name {
  font-family: 'ToranongMediumPro';
  font-size: 28px;
  color: #FF0000;
  line-height:22px;
  font-weight: normal;
  margin-bottom: 10px;
  margin-left: 20px;
}
.alumni-name span{
  font-family: 'Tahoma';
  font-size: 14px;
  float: right;
  color: #FF0000;
  line-height:22px;
  font-weight: normal;
}
#box-banners-border {
 border: 1px solid #ccc;
 padding: 10px;
 margin-bottom: 10px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
#box-banners-border:hover {
 border: 1px solid #455692;
 padding: 10px;
 margin-bottom: 10px;
-webkit-box-shadow: 0 8px 6px -6px #455692;
-moz-box-shadow: 0 8px 6px -6px #455692;
box-shadow: 0 8px 6px -6px #455692;
}
.customer-sponsor {
  font-family: "ToranongMediumPro";
  display: block;
  text-align: center;
  color: #b91313;
  font-size: 32px;
  margin: 0;
  padding: 0;
}
.customer-sponsor-img {
  position: relative;
  margin-bottom: 10px;
  transition: all 0.5s ease 0s;
}
.customer-sponsor-img:hover {
  -webkit-box-shadow: 0px 25px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 25px 30px 0px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(0, -5px) rotate(0.01deg);
  -o-transform: translate(0, -5px) rotate(0.01deg);
  -ms-transform: translate(0, -5px) rotate(0.01deg);
  transform: translate(0, -5px) rotate(0.01deg);
  -webkit-transition: box-shadow 0.3s ease 0s, transform 0.3s ease 0s;
  -moz-transition: box-shadow 0.3s ease 0s, transform 0.3s ease 0s;
  -o-transition: box-shadow 0.3s ease 0s, transform 0.3s ease 0s;
  transition: box-shadow 0.3s ease 0s, transform 0.3s ease 0s;
}
/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */
        div#google_translate_element div.goog-te-gadget-simple {
            border: none;
            background-color: transparent;
            /*background-color: #17548d;*/ /*#e3e3ff*/
        }

        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {
            text-decoration: none;
        }

        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
            color: #FFF;
			font-size: 14px;
        }

        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
            color: #aaa;
        }
        
        .goog-te-gadget-icon {
            /*display: none !important;*/
            background: url("images/globe.png") 0 0 no-repeat !important;
        }

        /* Remove the down arrow */
        /* when dropdown open */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {
            display: none;
        }
        /* after clicked/touched */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {
            display: none;
        }
        /* on page load (not yet touched or clicked) */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {
            display: none;
        }

        /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {
            display: none;
        }
        /* Remove span with left border line | (next to the arrow) in Edge & IE11 */
        div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
            display: none;
        }
        /* HIDE the google translate toolbar */
        .goog-te-banner-frame.skiptranslate {
            display: none !important;
        }
        .resize_picture {
width: 250px;
height : auto;
}

        /* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */