@font-face {
  src: url(/font/thaisanslite_r1.ttf);
  font-family:'thaisanslite';
  font-style: normal;
}

@font-face {
  src: url(/font/DSNSIN.TTF);
  font-family:'DSN_Single';
  font-style: normal;
}
@font-face {
  src: url(/font/DSNLP.TTF);
  font-family:'DSN_LardPhrao';
  font-style: normal;
}



body{
	font-family:thaisanslite, Tahoma, sans-serif;
	color:#393939;
	}
	
	h1{ color:#395b96; font-family: 'Prompt', sans-serif; font-weight: bold;}
	h2{ color:#395b96; font-family: 'thaisanslite', sans-serif; text-transform:uppercase; font-weight: bold;}
	h3{ color:#395b96; font-family: 'Prompt', sans-serif; font-weight: bold;}
	h4{ color:#395b96; text-transform:uppercase; font-family: 'Prompt', sans-serif;}
	h5{ color:#395b96; text-transform:uppercase; font-family: 'Prompt', sans-serif;}
	h6{ color:#395b96; text-transform:uppercase; font-family: 'Prompt', sans-serif;}

.bg-danger {
  background-color: #f4553c !important; 
}

a { color:#393939;}

.bg-warning{ background-color:#fdf4cf !important; color:#826515; border:solid #fcefbd 1px; }

.list-unstyled { font-size:small;}


.table-comcare { font-family: 'Prompt', sans-serif;}


.bg-light{ background-color:#F60  !important; }

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #f4553c !important; 
}
 
	

.box {
  position: relative;
}	
	
.ribbon2 {
    position: absolute;
    left:20px;
	bottom: 0px;
    /* z-index: 1; */
    /* overflow: hidden; */
    width:90%;
    height:30px;
    text-align: right;
}
.ribbon2 span2 {
	top: 0px; /* เธ•เธณเนเธซเธ™เนˆเธ‡เธ‚เธญเธ‡ box เธ‚เน‰เธญเธ„เธ‡เธงเธฒเธก เน€เธฃเธดเนˆเธก 0 เธˆเธฒเธเธšเธ™*/
    left: 0px;
	
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 13px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    width:90%;
    display: block;
    background: rgba(2, 2, 2, 0.63);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;

}



#img_container {
    position:relative;
    display:inline-block;
    text-align:center;
}

.button {
    position:absolute;
    bottom:2px;
    width:100%;
	font-size:small;
}



       <!-- Css facebook Chat -->
			#b-c-facebook .fbchat_box,#chat_f_b_smal,#f_bt_start_chat{background:#3a5897}
			#fbchat_box{padding-right:15px;max-width:210px;max-height:50px;display:block;transition:all .3s}
			#b-c-facebook .f-chat-conent .chat-single a,#chat_f_b_smal{font-family:Arial,sans-serif}
			#b-c-facebook .fbchat_box,#chat_f_b_smal{text-shadow:0 1px 0 rgba(0,0,0,.1);background-repeat:repeat-x;background-size:auto;background-position:0 0;background:#3a5897;text-decoration:none}
			.chat_f_vt{position:fixed;right:10px}
			#chat_f_b_smal{padding:0 10px;cursor:pointer;width:90px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;margin-right:12px;font-size:14px;z-index:999999999;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;bottom:-400px;transition:all .3s;text-align:center;display:block}
			#chat_f_b_smal:hover{background-color:#3B5998;opacity:1}
			#b-c-facebook{background:#3a5897;margin-right:50px;bottom:0;z-index:9999999999;transition:all .3s;width:250px;height:auto;max-height:375px;min-height:38px;box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;display:block}
			#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}
			#b-c-facebook .f-chat-conent .chat-single{float:left;position:absolute;bottom:0;left:0;background-color:#fff;line-height:25px;color:#fff;width:100%}
			#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#0C5BB5;font-size:12px}
			#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}
			#b-c-facebook .fbchat_box label{width:185px}
			#b-c-facebook .f-chat-conent .chat-single label{float:right;color:silver;margin-right:5px;font-size:12px;font-family:Arial}
			#b-c-facebook .fbchat_box,#b-c-facebook .fbchat_box label{line-height:20px;margin:0;cursor:pointer;font-family:Arial,sans-serif;font-size:14px}
			#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}
			#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}
			#b-c-facebook .fbchat_box{float:left;padding:0 25px;padding-left:15px;width:250px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;z-index:9999999;margin-right:12px}
			#b-c-facebook .fbchat_box label{position:absolute;top:10px}
			#fbchat_box img.chat-logo { padding-right: 15px;max-width: 50px;max-height: 50px; margin-top: 10px;}
			//Widget 
			.close_chatfb {background-color: #3a5897;}
			.title-f-chat-icon{margin-left:-10px}
			#t_f_chat{float:left;position:absolute;right:15px;top:-5px}
			#t_f_chat a{color:#fff;font-size:17px;font-family:verdana;text-decoration:none}
			#t_f_chat a:hover i{color:#ff0;text-decoration:none}
			.chat-left-5{margin-left:2px}
			#start_chat{position:absolute;width:248px;height:239px;top:70px;left:0;background-color:#fff;padding:10px;float:left;display:none}
			#start_chat em{font-size:11px;color:gray}
			.msg_b{color:#434a54;width:80%;word-wrap:break-word;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;background:#edeef1;padding:10px;min-height:13px;margin-bottom:5px;position:relative;margin:5px;border-radius:5px;border:1px solid #dfe3e9}
			#close_chat{opacity:0.5}
			#close_chat:hover{opacity:1}
			.msg_b a{text-decoration:underline;color:#01509E}
			#f_bt_start_chat{margin:auto;background-color:#3a5897;border-radius:3px;color:#fff;font-family:Arial;font-size:14px;font-weight:bold;padding:9px 35px;text-decoration:none}
			#f_bt_start_chat:hover{text-decoration:none;opacity:0.8}
			#start_chat p{margin-top:30px}
			#fb_alert_num{background-color:#ff0;padding:0 7px;color:red;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:55px;top:12px;height:20px;line-height:20px;display:none!important}
			.hide_chatbox{display:none}
			#f_enter_3{margin-top:30px}
			


.overlay a {
	position:relative; /*important*/
	float:left; /*important*/
	display:inline; /* also important here */
	list-style-type:none;
	padding:0;
	margin:0;
	color:#CCC;
	font-size:9px;
}

.overlay a:hover{color:#CCC;}

.overlay a .desc {
	position:absolute; /* Important */
	width:100%; /* Important */
	bottom:0; /* Important */
	left:0;
	background-color:rgba(0, 0, 0, 0.3);
	filter:alpha(opacity=10);
	font-size:9px;
}
.overlay a .desc div {
	padding:3px;
	text-align:center;
	font-size:9px;
}
.overlay a img {
	vertical-align:top;
	border:0px solid gray; /* or 0px */
}




.nav-link a{ color:#FFF;}


	@media only screen and (max-width:200px) {
		
		
			body{
				font-size:15.5px;
				line-height:13px;
			}
		
		
			.display-1 {font-size:16px; line-height:20px;}
			.display-2 {font-size:30px; line-height:30px;}
			.display-3 {font-size:20px; line-height:15px;}
			.display-4 {font-size:10px; line-height:30px;}
			.display-5 {font-size:5px; line-height:5px;}
			
			.btn-sm {font-size:10px;}

	}


	@media only screen and (max-width:320px) {
		
			body{
				font-size:15.5px;
				line-height:13px;
			}
		
		
			.display-1 {font-size:16px; line-height:20px;}
			.display-2 {font-size:30px; line-height:30px;}
			.display-3 {font-size:20px; line-height:15px;}
			.display-4 {font-size:10px; line-height:30px;}
			.display-5 {font-size:5px; line-height:5px;}
			
			.btn-sm {font-size:10px;}

	}
	
	@media only screen and (min-width:321px) and (max-width:768px) {
		

			body{
				font-size:15.5px;
				line-height:14px;
			}
		
			.display-1 {font-size:35px; line-height:40px;}
			.display-2 {font-size:40px; line-height:30px;}
			.display-3 {font-size:35px; line-height:30px;}
			.display-4 {font-size:15px; line-height:20px;}
			
			.display-5 {font-size:14px; line-height:5px;}
			
			h4 {font-size:12px; line-height:12px;} /* topic list */
			.btn-sm {font-size:9px;}
	}
	
	
	@media only screen and (min-width:769px) {
		
			body{
				font-size:15.5px;
				line-height:14px;
			}
			
			.display-1 {font-size:80px; line-height:70px;}
			.display-2 {font-size:40px; line-height:30px;}
			.display-3 {font-size:48px; line-height:40px;}
			.display-4 {font-size:15px; line-height:20px;} 
			
			.display-5 {font-size:14px; line-height:15px;}
			
			h4 {font-size:12px; line-height:12px;}
	}
	
	@media only screen and (min-width:800px) and (max-width:991px) {
		
			body{
				font-size:15.5px;
				line-height:14px;
			}
			
			h2{ font-size:22px;}
			
			.display-1 {font-size:80px; line-height:70px;}
			.display-2 {font-size:40px; line-height:30px;}
			.display-3 {font-size:48px; line-height:40px;}
			.display-4 {font-size:15px; line-height:20px;} 
			
			.display-5 {font-size:14px; line-height:15px;}
			
			h4 {font-size:12px; line-height:12px;}
	}
	 
	
	@media only screen and (min-width:992px) and (max-width:1920px) {
		
			body{
				font-size:18px;
				line-height:17px;
			}

			
			.display-1 {font-size:60px; line-height:55px; font-family: 'Prompt', sans-serif;}
			.display-2 {font-size:40px; line-height:30px;}
			.display-3 {font-size:60px; line-height:50px;}
			.display-4 {font-size:15px; line-height:20px;}
			
			.display-5 {font-size:15px; line-height:15px;}
			
			h2 {font-size:20px; line-height:12px;}
			h4 {font-size:18px; line-height:12px;}
			

	}