@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prosto+One&display=swap');

/* Template Version: 3.0 (Latest Update 17 Feb 2017) 

/* CSS Reset 

/*-----------------------------------------------------------------------------------*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }



.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */

.clear { clear:both;}

/* General Setup

/*-----------------------------------------------------------------------------------*/

html{ height:100%;}

body{font-family:Kanit, Arial, Helvetica, sans-serif;padding:0;font-size:14px;margin:0 auto;height: 100%;position: relative;line-height:19px;}
body{
	/*background: url(images/bg-green.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/ 
}

a, span.tag{ text-decoration:none;}

a.view_details{padding:0 0 0 15px;}

/*#wrapper{ width:800px;height:100%;margin:0 auto;position:relative;}*/
#wrapper{ width:100%; max-width:1024px; height:100%;margin:0 auto;position:relative;}

#content{ width:100%;height:100%;}

#header{ position:fixed; top:0px; left:0px; z-index:9999; width:100%; height:35px;padding:6px 0%; box-sizing: unset;}



/* Headings

/*------------------------------------------*/

h1, h2, h3, h4, h5, h6{font-weight:normal; margin:0px;padding:10px 0 20px 0;clear:both; letter-spacing:-1px;}

h1{ font-size:30px;}

h2{ font-size:26px;}

h3{ font-size:22px;}

h4{ font-size:18px;}

h5{ font-size:14px;}

h6{ font-size:12px;}

p{ padding:0 0 10px 0; margin:0px;}

h2.page_title{ font-size:30px;padding:0 0 20px 0; color:#fff;}

h3.page_title { line-height: 32px; color:#fff;}
 

h2.post_title{ font-size:25px;padding:0 0 20px 0; line-height:28px; color: #fff; font-weight: bold;}

/* Border radius

/*------------------------------------------*/

.radius4{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

.radius6{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}

.radius8{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}

.radius20{-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}



/*----------header and footer buttons---------------*/

.gohome{ width:35px; height:35px; float:left; margin:0 0 0 10px;}

.gohome a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;}

.gohome a img{display:inline-block;max-height:22px; margin:5px 0 0 0;}



.gohomemenu{ width:40px; height:40px; float:left; margin:0 0 0 10px;}

.gohomemenu a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;}

.gohomemenu a img{display:inline-block;max-height:25px; margin:7px 0 0 0;}



.gomenu{ width:35px; height:35px;float:right;margin:0 10px 0 0;}

.gomenu a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;}

.gomenu a img{display:inline-block;max-height:25px; margin:5px 0 0 0;}



.scrolltop{ width:40px; height:40px;margin:auto; display:block;}

.scrolltop a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:12px; display:block; text-align:center;}

.scrolltop a img{display:inline-block;max-height:28px; margin:5px 0 0 0;}

/*----------page buttons---------------*/

a.button_12{ width:48%; margin:0 1% 10px 1%;padding:10px 0; float:left; display:block;font-size:16px; text-decoration:none; text-align:center;}

a.button_11{ width:98%; margin:0 0 10px 1%;padding:15px 0; float:left; display:block;font-size:16px; font-weight: bold; text-decoration:none; text-align:center; }

.green{ background-color:#1578bb;}

.blue{ background-color:#29aae3;}

.darkblue{ background-color:#035792;}

.red{ background-color:#c53238;}

.purple{ background-color:#8b2767;}

.pink{ background-color:#f87c68;}

.orange{ background-color:#f17225;}

.black{ background-color:#272625;}

.gray{ background-color:#6e6e6e;}

.yellow{ background-color:#ffb606;}

.bluegreen{ background-color:#06a78b;}



.green_borderbottom{border-bottom:3px #14669d solid;}

.blue_borderbottom{border-bottom:3px #198bbd solid;}

.red_borderbottom{border-bottom:3px #8e262c solid;}

.purple_borderbottom{border-bottom:3px #0073ac solid;}

.pink_borderbottom{border-bottom:3px #d36755 solid;}

.orange_borderbottom{border-bottom:3px #c55512 solid;}

.black_borderbottom{border-bottom:3px #000000 solid;}

.gray_borderbottom{border-bottom:3px #535150 solid;}

.yellow_borderbottom{border-bottom:3px #e3a000 solid;}

.bluegreen_borderbottom{border-bottom:3px #058770 solid;}

.darkblue_borderbottom{border-bottom:3px #003a62 solid;}



/* Page layout and elements

/*------------------------------------------*/

.image_single{ padding:5px; margin-bottom:10px;}

.image_single img{display:block;max-width:100%;}

.image_caption{ width:100%; text-align:center; color:#FFFFFF;padding:10px 0; font-size:18px;margin-bottom:10px;}



blockquote{padding:10px 0; font-style:italic; margin-bottom:10px;}

span.quote_author{ font-style:normal; font-weight:bold; text-decoration:underline;}

ul.listing{ list-style:none; padding:0 0 10px 0;}

ul.listing li { padding:5px 0 5px 10px; margin:0 0 10px 10px; border-left:2px #ececec solid;}

ul.listing_detailed{ list-style:none; padding:0 0 10px 0;}

ul.listing_detailed li { padding:5px 0 5px 40px; margin:0 0 10px 0;}

ul.listing_detailed li a{}



/* Toggle

/*------------------------------------------*/

.toogle_wrap{width:92%; padding:3% 4%; margin:0 0 10px 0;}

.trigger{padding:0px;margin:0;}

.trigger a{text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-weight:normal; }

.toggle_container{overflow: hidden;padding:15px 0 0 0;clear: both;}



.toogle_wrap_blog{width:92%; padding:3% 4%; margin:0 0 10px 0;}

.trigger_blog{padding:0px;margin:0;}

.trigger_blog a{text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-weight:normal; }

.toggle_container_blog{overflow: hidden;padding:15px 0 0 0;clear: both;}



/* Tabs

/*------------------------------------------*/

ul.tabsmenu{ padding:0; position:relative; bottom:-1px;}

ul.tabsmenu li a{ width:31.2%; float:left; padding:12px 0 12px 0; margin:0 2% 0 0;text-align:center;}

ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;}

ul.tabsmenu li.active a{font-weight:bold;}

.tabcontent{ padding:5% 4%; clear:both; margin:0 0 10px 0;}

/*-----------------Photo Gallery style-------------------*/



ul.photo_gallery_13{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;}

ul.photo_gallery_13 li{ width:28.6%; padding:1%; float:left; margin:1%;}

ul.photo_gallery_13 li img{ max-width:94%; display:block; padding:3%;}



ul.photo_gallery_13_round{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;}

ul.photo_gallery_13_round li{ width:28.5%; padding:1%; float:left; margin:1%;}

ul.photo_gallery_13_round li img{ max-width:100%; display:block;}



ul.photo_gallery_12{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;}

ul.photo_gallery_12 li{ width:45.3%; padding:1%; float:left;  margin:1%;}

ul.photo_gallery_12 li img{ max-width:96%; display:block;padding:2%;}



ul.photo_gallery_11{ width:100%; list-style:none; padding:0px; margin:0 0 10px 0; float:left; clear:both;}

ul.photo_gallery_11 li{ width:99.5%; padding:0; float:left; margin:0px 0 10px 0;}

ul.photo_gallery_11 li img{ max-width:96%; display:block;padding:2%;}



/*-----------------Blog posts style-------------------*/

ul.posts{ padding:0px; margin:0px; width:100%; display:block;}

ul.posts li.post{ width:100%; height:90px; margin:0 0 10px 0; position:relative; margin-top: 15px;}

.post_left{width:25%; height:90px; text-align:center;position:absolute; top:0px; left:0px; }

span.day{ display:block; font-size:40px; padding:15px 0 0 0;}

span.month{ display:block; font-size:22px; padding:10px 0 0 0;}

.post_right_reveal{width:65%; height:90px; position:absolute; top:0px; left:25%;padding:0 0 0 5%; z-index:99;}

.post_right_unreveal{width:65%; height:80px; position:absolute; top:0px; left:25%;padding:0 0 0 5%; z-index:88; line-height:24px;font-size:14px;}

.post_right_reveal h4{ padding:10px 10px 0 0; font-size:18px; line-height:32px;}

.post_right_unreveal a{font-weight:bold;}

a.post_more{display:block;position:absolute; top:0px; right:0px;  width:10%; height:90px;overflow:hidden;}

span.post_comments{ display:block; padding:0 0 0 25px;}

a.post_readmore{ padding:0 0 0 15px;font-weight:normal; font-size:12px;}

#loadMore{width:92%; padding:3% 4%; margin:0 0 10px 0; text-align:center; font-size:14px; display:block; cursor:pointer;}

#showLess{width:92%; padding:3% 4%; margin:0 0 10px 0; text-align:center; font-size:14px; display:none;}



.post_details_page{ }

a.backtoblog{width:70%; padding:3% 4%; margin-left: auto; margin-right: auto; text-align:center; font-size:16px; font-weight: bold; display:block; cursor:pointer; box-sizing:unset;}



.comment_row{ width:100%; float:left; clear:both; padding:0 0 5px 0; margin:0 0 10px 0;}

.comm_avatar{float:left;}

.comm_avatar img{ display:block; width:50px; height:50px;}

.comm_content{ float:left; width:75%; padding:0 0 0 5%; font-style:italic;}



/*-----------------Video page style-------------------*/

.videocontainer{ max-width:96%; padding:2%; display: block; margin:0 0 10px 0;}



/*-----------------Portfolio style-------------------*/

.portfolio_item{width:100%; padding:3%; margin:0 0 10px 0; float:left; clear:both;}

.portfolio_image{ width:25%; float:left;}

.portfolio_image img{ display:block; max-width:100%;}

.portfolio_image_round{ width:30%; float:left;}

.portfolio_image_round img{ display:block; max-width:100%;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}

.portfolio_details{ width:74.8%; float:left; padding:0 0 0 3%;}

.portfolio_details h4{ padding:0 0 5px 0; font-size:16px;}

.portfolio_details p{ padding:0 0 5px 0; line-height:18px;}



/*-----------------Service page style-------------------*/

.service_box{ width:100%; float:left; clear:both; padding:0 0 5px 0;margin:0 0 10px 0;}

.services_icon{ padding:6% 0; width:28%;height:auto; float:left; display:block; text-align:center;}

.services_icon img{ display:block; max-width:70%; margin:auto;}

.service_content{ float:left; width:67%; padding:0 0 0 4%;}

.service_content h4{ padding:0px 0 10px 0;}



/*-----------------Clients page style-------------------*/

.client_row{width:100%; float:left; clear:both; padding:0 0 5px 0;margin:0 0 10px 0;}



/*-----------------Responsive table-------------------*/

ul.responsive_table{ width:100%; float:left; clear:both; margin:0 0 10px 0; padding:0px; list-style:none;}

li.table_row{width:100%; float:left; clear:both; line-height:30px;padding:0px; list-style:none;margin:0 0 1px 0;}

.table_section_small{width:18%; float:left; padding:0 0 0 2%;}

.table_section{ width:38%; float:left;padding:0 0 0 2%;}



/*-----------------Latest tweets style-------------------*/

.tweet{ width:100%; float:left; clear:both; margin:0;}

.tweet ul { list-style:none;}

.tweet li{width:94%; padding:3%; margin:0 0 10px 0; float:left; clear:both;}

.tweet li a{ font-weight:bold;}



/* Form

/*------------------------------------------*/



.form{padding:0 0 15px 0;}

.form label{padding:0 0 3px 0; display:block; font-size:16px;font-weight:normal;}

.form label.error{padding:0 0 10px 0; width:100%; text-align:left; font-size:14px;}

.form_input{padding:10px; width:93%; margin:0 0 5px 0;}

.form_textarea{padding:10px; width:99%; height:90px; margin:0 0 15px 0; color: #000; }

.form_select{padding:10px; width:97%; margin:0 0 5px 0;}

.form_radio { margin:7px;}

.form_checkbox { margin:7px;}

.form_submit{ width:100%;padding:4% 0 4% 0; margin:0; font-weight:normal;text-align:center;

cursor:pointer; font-size:20px; border-left: none;border-right: none;border-top: none; cursor:pointer;

}
.form_reset{ width:100%;padding:4% 0 4% 0; margin:0; font-weight:normal;text-align:center;

cursor:pointer; font-size:20px; border-left: none;border-right: none;border-top: none; cursor:pointer;

}
.form_submit2{ width:48%;padding:2% 0 2% 0; margin:0; font-weight:normal;text-align:center;

cursor:pointer; font-size:20px; border-left: none;border-right: none;border-top: none; cursor:pointer;

}
.form_reset2 { width:48%;padding:2% 0 2% 0; margin:0; font-weight:normal;text-align:center;

cursor:pointer; font-size:20px; border-left: none;border-right: none;border-top: none; cursor:pointer;

}

.form_div_label { margin-bottom:5px;  }
.form_div_control { margin-bottom:10px; }
.form_div_control { margin-bottom:10px; }


ul.social{ list-style:none; padding:0px; margin:0px 0 15px 0; width:100%;}

ul.social li{ list-style:none; margin:1% 0 2% 4%; padding:6.5% 0; width:28%;height:auto; float:left; display:block; text-align:center;}

ul.social li img{ display:inline-block;max-width:50%;}

li.social_facebook{ background-color:#3f5aa9;}

li.social_twitter{ background-color:#29aae3;}

li.social_google{ background-color:#f2b700;}

li.social_pinterest{ background-color:#d3172f;}

li.social_flickr{ background-color:#90489c;}

li.social_digg{ background-color:#8aaf50;}



a.call_button{ float:left; clear:both;

width:94%; display: block; text-align:center; font-size:24px; 

padding:12px 3%; margin:0 0 15px 0;

}

a.map_button{ float:left; clear:both;

width:94%; display: block; text-align:center; font-size:24px; 

padding:12px 3%; margin:0 0 15px 0;

}





/* CSS Media Queries

/*-----------------------------------------------------------------------------------*/

@media screen and (max-width: 800px) {

#wrapper{ width:100%;}

.services_icon{ padding:4.5% 0;}

}

@media screen and (max-width: 480px) {

.round_img{padding:15% 0px;}

ul.social li{padding:6% 0;}

.services_icon{padding:4.3% 0;}

}

@media screen and (max-width: 360px) {

.services_icon{padding:4.5% 0;}

}

@media screen and (max-width: 320px) {

.borders ul li{padding:4% 0.1%;width:27%;}

}




/*---------------------style  program list--------------------------------------------------------------*/
.tbl-program {
	width:100%;
	border:0px; 
	border-bottom: 1px solid #ececec;
	font-size:13px;
    background-color:#fff;
}
.tbl-program  p {
	padding: 0 0 5px 0;
	margin: 0px;
}
 
.tbl-program .tr-program-list:hover {
	background-color:#268bd0;
	color:#FFF;
}
.tbl-program .tr-program-list:hover a  { 
	color:#FFF;
}
.tbl-program .td-program-header {
	background-color: #f4f4f4;
	border: 1px solid #ececec;
	text-align:center;
	padding:10px;
	font-weight:600;
}
.tbl-program .td-program-time {
	width:15%; 
	max-width:75px;
	text-align:center;
	padding:2px;
	vertical-align:top;
	border: 1px solid #ececec;
	border-bottom: 0px;
	color: #000;
	background-color: #a5a5a5;
}
.tbl-program .td-program-timesub {  
	text-align:center;
	padding:2px;
	vertical-align:top;
	border: 0px;
	border-left: 1px solid #ececec;
}
.tbl-program .td-program-list {
	/*width:60%;*/
	text-align:left;
	padding:2px;
	vertical-align:top;
	border: 1px solid #ececec;
	border-bottom: 0px;
	color: #000;
	background-color: #a5a5a5;
}
.tbl-program .td-program-list a {
	color:#000; 
}
.tbl-program .td-program-listsub {
	/*width:60%;*/
	text-align:left;
	padding:2px;
	vertical-align:top;
	border: 0px;
	border-left: 1px solid #ececec;
}
.tbl-program .td-program-listsub a {
	color:#5e5e5e;
}
.tbl-program .td-program-room {
	width:10%;
	text-align:center;
	padding:2px; 
	vertical-align:top;
	border: 1px solid #ececec; 
	border-bottom: 0px;
	color: #000;
	background-color: #a5a5a5;
}
.tbl-program .td-program-roomsub { 
	text-align:center;
	padding:2px; 
	vertical-align:top;
	border: 0px ;
	border-left: 1px solid #ececec;
	border-right: 1px solid #ececec;
}
.tbl-program .td-program-reminder {
	width:35px;
	text-align:center;
	padding:2px; 
	vertical-align:top;
	border: 1px solid #ececec; 
	border-bottom: 0px;
	color: #000;
	background-color: #a5a5a5;
}
.tbl-program .td-program-remindersub { 
	width:35px;
	text-align:center;
	padding:2px; 
	vertical-align:top;
	border: 0px ;
	border-left: 1px solid #ececec;
	border-right: 1px solid #ececec;
}
.tbl-program  .td-program-listsub .p-sublist {
	padding-left:5px;	
}
.tbl-program  .td-program-listsub .p-sublist .imgdot {
 	width:5px;
	margin-bottom:2px;
	margin-right:7px;
}
			
			
.notify {
	position: absolute;
	top: 0;
	right: 5px;
}
.notify a {
	color:#FFF;
} 

.notify .nav > li > a:focus, .nav > li > a:hover {
	background-color:transparent !important;	
}
			
			
.notify2 {
	position: absolute;
	top: 0;
	right: 5px;
}
.notify2 a { 
	color:#254783;
} 

.notify2 .nav > li > a:focus, .nav > li > a:hover {
	background-color:transparent !important;	
}


.newsfeed {
	border: 1px rgba(100, 200, 200, .5) solid;
	background-color: rgba(255, 255, 255, .2);
	/*padding: 10px;*/
	margin: 10px;
	border-radius: 3px;
	padding: 5px;
}
.newsfeed .feed-item {
	color:#FFF;
	margin-left:10px;
	margin-right:10px;
	padding: 10px;
	border-radius:3px;
}
.newsfeed h4 {
	margin:0px; 
	padding-bottom:10px;
	color:#FFF;
}
.newsfeed .feed-item p {
	margin:0px;
}
.newsfeed .feed-item:hover {
	background-color: rgba(255, 255, 255, .2);
}

.pages_container {
  box-sizing:unset;
  margin: 0px 0%;
  background-color: transparent;
  padding: 20px 2.5%;
    padding-top: 20px;
	padding-top: 20%;
	padding-bottom: 0px;
  border: 0px;
  width: 95%;
}
a:hover {
  text-decoration: none;
}




/*-----------------Program style-------------------*/

div.programs { padding:0px; margin:0px; width:100%; display:block;}

div.program { width:100%; min-height:80px; margin:0 0 18px 0; position:relative;}

.program_left{
	width:25%; 
	height:90px; 
	text-align:center; 
	left:0px; 
    color: #FFFFFF;
    background-color: #1578bb;
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;

}
span.day{ display:block; font-size:40px; padding:15px 0 0 0;}
span.day sup{ font-size: 24px;} 

span.month{ display:block; font-size:22px; padding:10px 0 0 0;}

.program_right_reveal{width:65%; height:90px; position:absolute; left:25%;padding:0 0 0 5%; z-index:99; background-color: #f4f4f4;}

.program_right_unreveal{width:65%; height:90px; position:absolute;  left:25%;padding:0 0 0 5%; z-index:88; line-height:24px;font-size:14px;}

.program_right_reveal h4{ padding:10px 10px 0 0; font-size:18px; line-height:32px;}

.program_right_unreveal a{font-weight:bold;}

a.program_more{
	display:block;
	position:absolute; 
	right:0px;  
	width:10%; 
	height:90px;
	overflow:hidden;
	background: url(images/bullet_cross_big.png) no-repeat center center #e2e2e2;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
}

span.program_comments{ display:block; padding:0 0 0 25px;}

a.program_readmore{ padding:0 0 0 15px;font-weight:normal; font-size:12px;}
 
.program_details_page{ }
div.programs .program_details{ 
	margin-top:10px;

}

.post_details_page .program_detail {
	
}


.viewiframe {  
	-webkit-overflow-scrolling: touch;  
	width:100%; 
	height:550px; 
	overflow:hidden;
}
@media screen and (max-height: 1280px) {
.viewiframe {  height:1195px !important; } 
}
@media screen and (max-height: 1024px) {
.viewiframe {  height:940px !important; } 
}
@media screen and (max-height: 812px) {
.viewiframe {  height:7250px !important; }
}
@media screen and (max-height: 740px) {
.viewiframe {  height:650px !important; }
}
@media screen and (max-height: 730px) {
.viewiframe {  height:580px !important; } 
} 
@media screen and (max-height: 667px) {
.viewiframe {  height:580px !important; } 
}


@media screen and (max-width: 414px) { 
	span.day{ display:block; font-size:30px; padding:15px 0 0 0;} 
	span.day sup{ font-size: 18px;} 
	span.month{ display:block; font-size:18px; padding:10px 0 0 0;}
	.post_right_reveal h4 {  }
	h2.page_title { font-size: 25px;  }
	h4 { font-size: 16px; }
 
}


ul.reminder{ list-style:none; padding:0px; margin:0px 0 15px 0; width:100%;}

ul.reminder li{ list-style:none; margin:1% 0 2% 4%; padding:46px 0; width:150px;height:150px; float:left; display:block; text-align:center; border-radius: 200px;}
ul.reminder li span.day { display: block; font-size: 40px; padding: 3px 0 0 0; }
ul.reminder li span.day sup { font-size: 24px; }
ul.reminder li span.month { display: block; font-size: 22px; padding: 10px 0 0 0; } 
ul.reminder li img{ display:inline-block;max-width:50%;}

li.reminder_blue{ background-color:#29aae3; color:#FFF;}

li.reminder_blue2{ background-color:#3f5aa9; color:#FFF;}

li.reminder_red{ background-color:#d3172f; color:#FFF;}

li.reminder_green{ background-color:#8aaf50; color:#FFF;} 

li.reminder_yellow{ background-color:#f2b700; color:#FFF;}