/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Kanit');
@import url('https://fonts.googleapis.com/css?family=Pridi');


@font-face {
  font-family: 'Cloud-Bold';
  src: url('fonts/Cloud-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Cloud-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Cloud-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Cloud-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Cloud-Bold.svg#d286acfdd35ab44334d1b22d005bb3f7') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Cloud-Light';
  src: url('fonts/Cloud-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/Cloud-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Cloud-Light.woff') format('woff'), /* Modern Browsers */
       url('fonts/Cloud-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Cloud-Light.svg#3a54df4959035d286a8c5506f7932125') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Galano-Bold';
  src: url('fonts/Galano Grotesque Alt Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Galano Grotesque Alt Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Galano Grotesque Alt Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Galano Grotesque Alt Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Galano Grotesque Alt Bold.svg#619193b89a46b015aee10047b7fc355f') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Lato-Bold';
  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Lato-Bold.svg#eea591db52cf6ebc8992abb7621b9256') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Lato-Regular';
  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Lato-Regular.svg#48e70b8825d557df57af3e4f7d4c31be') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	overflow: auto;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
* {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}
body {
	width: 100%;
	overflow: hidden;
	font-family: 'Pridi'/*'Kanit'*/, sans-serif;
	letter-spacing: 0.25px;
}
p {
	font-size: 15px;
	color: #333;
	line-height: 1.5em;
}
h1, h2, h3 {
	font-weight: bold;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 35px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 25px;
}
section {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
	@media screen and (min-width: 1024px) {
		width: 960px;
		padding: 0;
	}
	@media screen and (min-width: 1280px) {
		width: 1200px;
	}
	@media screen and (min-width: 1440px) {
		width: 1280px;
	}
}
a {
	text-decoration: none;
}
.clear {
	clear: both;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {
	#fancy-line {
		background: url(images/fancy-line.png) no-repeat;
		background-size: 100% 7px;
		width: 100%;
		height: 7px;
	}// fancy-line
	#brand {
		width: 300px;
		height: 78px;
		overflow: hidden;
		margin: 60px auto 40px;
		@media screen and (min-width: 1024px) {
			margin: 60px auto;
		}
		@media screen and (min-width: 1440px) {
			margin: 60px 0;
			float: left;
		}
	}// brand
	nav {
		display: none;
		@media screen and (min-width: 1024px) {
			display: block;
			position: relative;
			z-index: 9999p
		}
		.menu-menu-1-container {
			background: #1776D8;
			width: 100%;
			height: 50px;
			margin: 0 0 2px;
			ul {
				margin: 0 0 20px;
				padding: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				list-style: none;
				li {
					margin: 0 15px;
					a {
						color: #fff;
						font-family: 'Pridi'/*'Kanit'*/, sans-serif;
						font-size: 15px;
						font-weight: bold;
						line-height: 50px;
						transition: color ease 0.5s;
						&:visited {
							color: #fff;
						}
						&:hover {
							color: #202328;
						}
					}
				}
			}
		}
		#seach-button {
			background: url(images/icon-search-white.png) no-repeat;
			background-size: 16px 16px;
			width: 16px;
			height: 16px;
			position: absolute;
			z-index: 99;
			right: 40px;
			bottom: 15px;
		}
	}// nav
	#mobile-nav {
		display: block;
		margin: 0 0 30px;
		#mobile-nav-line {
			border-bottom: 10px solid #F5F5F5;
			width: 100%;
			margin: 0 0 30px;
		}// libne-title
		@media screen and (min-width: 1024px) {
			display: none;
		}
		#mobile-nav-button {
			width: 125px;
			height: 21px;
			margin: 0 auto;
		}
	}
}// header


/* Mobile Nav */
#mobile-nav-list {
	.menu-menu-1-container {
		ul {
			list-style: none;
			margin: 0;
			position: 0;
			li {
				width: 100%;
				height: auto;
				margin: 0;
				padding: 15px 20px;
				border-top: 1px solid #e5e5e5;
				transition: background ease 0.5s, color ease 0.5s;
				&:hover {
					cursor: pointer;
					border: none;
					color: #fff;
					&.blue {
						background: #1776D8;
					}
					&.green {
						background: #41C9A3;
					}
					&.yellow {
						background: #EACA43;
					}
					&.red {
						background: #D6422E;
					}
					a {
						color: #fff;
					}
				}
				a {
					height: 30px;
					color: #202328;
					font-family: 'Pridi'/*'Kanit'*/, sans-serif;
					font-size: 15px;
					font-weight: bold;
					transition: color ease 0.5s;
				}
			}
		}
	}
}// mobile-nav


/* Search Style */ 
#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
	       -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
	     -moz-transform: translate(0px, -100%) scale(0, 0);
	      -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
	          transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}
#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
    	  -ms-transform: translate(0px, 0px) scale(1, 1);
	       -o-transform: translate(0px, 0px) scale(1, 1);
	           transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 999;
    display: block;
}
#search input[type="text"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 60%;
    margin-left: 20%;
    color: #fff;
  	background: rgba(255,255,255,0.2);
  	border: 1px solid #fff;
    font-size: 30px;
  	font-family: 'Pridi'/*'Kanit'*/, sans-serif;
    text-align: center;
    outline: none;
  	padding: 10px;
} 
#search .close {
    position: fixed;
    top: 40px;
    right: 40px;
	opacity: 1;
	font-size: 27px;
  	color: #fff;
}
#search .close:hover{
  color: #FC2121;
  cursor: pointer;
}


/* Feture Banner */ 
#feature-banner {
	position: relative;
	#feature-image {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		margin: 0 0 -10px;
		@media screen and (min-width: 1024px) {
			width: 80%;
			height: 413px;
		}
		@media screen and (min-width: 1280px) {
			width: 75%;
			height: 500px;
		}
		img {
			transition: transform ease 0.5s;
			transform: scale(1); 
		}
	}
	&:hover {
		#feature-image img {
			transform: scale(1.05);
		}
	}
	#feature-info {
		background: #1776d8;
		width: 100%;
		height: auto;
		padding: 30px 20px;
		@media screen and (min-width: 1024px) {
			background: url(images/bg-slide-content.png) no-repeat;
			background-size: 100% 413px;
			width: 300px;
			height: 413px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 99;
			padding: 20px 20px 20px 40px;
		}
		@media screen and (min-width: 1280px) {
			background-size: 100% 500px;
			width: 480px;
			height: 500px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 99;
			padding: 40px 40px 40px 60px;
		}
		#feature-date {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 15px;
			color: #fff;
			letter-spacing: 2px;
			margin: 0 0 15px;
			@media screen and (min-width: 1024px) {
				margin: 0 0 10px;
			}
			@media screen and (min-width: 1280px) {
				margin: 0 0 50px;
			}
		}
		#feature-title {
			margin: 0 0 20px;
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 25px;
				color: #fff;
				@media screen and (min-width: 1024px) {
					font-size: 23px;
				}
			}
		}
		#feature-excerpt {
			font-weight: 300;
			p {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #fff;
				margin: 0;
			}
		}
		#feature-button {
			background: #ffcc00;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			color: #000;
			padding: 0 15px;
			margin: 35px auto 0;
			@media screen and (min-width: 640px) {
				width: 150px;
				margin: 30px 0 0;
				float: right;
			}
			@media screen and (min-width: 1024px) {
				width: 100%;
				margin: 20px 0 0;
				float: left;
			}
			@media screen and (min-width: 1280px) {
				width: 100px;
				margin: 30px 0 0;
			}
		}
	}
}


/*--------------------------------------------------------------
# Featured
--------------------------------------------------------------*/
#featured {
	margin: 0;
	padding: 0;
	.wpsisac-slider-nav {
		margin: 6px 0;
		.slick-slide img {
			-o-object-position: center center;
			object-position: center center;
		}
		.slick-current.slick-image-nav {
			border: none;
			opacity: 0.3;
		}
		.slick-current.slick-image-nav,
		.slick-image-nav {
			height: 80px;
			@media screen and (min-width: 640px) {
				height: 120px;
			}
			@media screen and (min-width: 768px) {
				height: 100px;
			}
			@media screen and (min-width: 1024px) {
				height: 140px;
			}
			@media screen and (min-width: 1440px) {
				height: 180px;
			}
		}
	}
	/*----- All Featured Area Size -----*/
	.wpsisac-slick-slider.wpsisac-image-fit .wpsisac-img-wrap {
		height: auto;
		min-height: 220px;
		@media screen and (min-width: 480px) {
			min-height: 300px;
		}
		@media screen and (min-width: 640px) {
			min-height: 450px;
		}
		@media screen and (min-width: 1280px) {
			min-height: 600px;
		}
		@media screen and (min-width: 1440px) {
			min-height: 700px;
		}
	}
	/*----- Image Size -----*/
	.wpsisac-image-fit img.wpsisac-slider-img {
		-o-object-position: center center;
		object-position: center center;
		height: 220px;
		@media screen and (min-width: 480px) {
			height: 300px;
		}
		@media screen and (min-width: 640px) {
			height: 450px;
		}
		@media screen and (min-width: 1280px) {
			height: 600px;
		}
		@media screen and (min-width: 1440px) {
			height: 700px;
		}
	}
	/*----- Content Area Size -----*/
	.wpsisac-slider-content {
		text-align: center;
		background: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		position: absolute;
		padding: 20% 0 0;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		/*----- H2 Title -----*/
		.wpsisac-slide-title {
			width: 80% !important;
			height: 100% !important;
			font-size: 20px !important;
			line-height: 1.5em !important;
			letter-spacing: 1px !important;
			background: none;
			color: #fff;
			text-shadow: none;
			margin: 0 auto !important;
			padding: 0 !important;
			@media screen and (min-width: 640px) {
				width: 70% !important;
				font-size: 30px !important;
				line-height: 1.3em !important;
			}
		}
		/*----- Read More Button -----*/
		.wpsisac-readmore {
			display: none;
		}
	}
}// featured


#news {
	.section-title {
		margin: 40px auto;
		h2 {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 25px;
			font-weight: bold;
			color: #1776d8;
			text-align: center;
		}// title
		.line-title {
			width: 50px;
			height: 6px;
			background: #D7D7D7;
			margin: 10px auto 0;
		}// libne-title
	}// section-title
	.news-item {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto 40px;
		&:nth-child(8) {
			margin: 0 auto 20px;
		}
		@media screen and (min-width: 640px) {
			width: 48%;
			margin: 0 0 40px 0;
			float: left;
			&:nth-child(1),
			&:nth-child(3),
			&:nth-child(5) {
				margin: 0 4% 40px 0;
			}
		}
		@media screen and (min-width: 1024px) {
			width: 300px;
			height: 330px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5) {
				margin: 0 30px 30px 0;
			}
			&:nth-child(3),
			&:nth-child(6) {
				margin: 0 0 30px 0;
			}
		}
		@media screen and (min-width: 1280px) {
			width: 380px;
			height: 430px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5) {
				margin: 0 30px 30px 0;
			}
			&:nth-child(3),
			&:nth-child(6) {
				margin: 0 0 30px 0;
			}
		}
		@media screen and (min-width: 1440px) {
			width: 400px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5) {
				margin: 0 40px 40px 0;
			}
			&:nth-child(3),
			&:nth-child(6) {
				margin: 0 0 30px 0;
			}
		}
		&:hover {
			.news-pic {
				transform: scale(1.05); 
			}
			.news-title h2 {
				color: #1776d8;
			}
			.new-author a {
				color: #1776d8;
			}
		}
		.news-pic {
			width: 100%;
			height: auto;
			margin: 0 0 5px;
			transition: transform ease 0.5s;
			transform: scale(1);
			@media screen and (min-width: 1280px) {
				width: 400px;
				height: 270px;
				margin: 0 0 20px;
			}
		}// news-pic
		.news-title {
			height: auto;
			max-height: 55px;
			overflow: hidden;
			margin: 0;
			@media screen and (min-width: 1280px) {
				margin: 0 0 15px;
			}
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #202328;
				transition: color ease 0.5s;
			}
		}// news-title
		.new-author {
			font-size: 15px;
			margin: 0 0 10px;
			a {
				color: #333;
				transition: color ease 0.5s;
			}
		}
		.news-excerpt {
			height: auto;
			max-height: 65px;
			overflow: hidden;
			p {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 15px;
				color: #202328;
			}
		}// news-excerpt
	}// news-item
}// news


#news.template-grid {
	.news-line {
		border-bottom: 10px solid #F5F5F5;
		width: 100%;
		margin: 0;
		&.bottom {
			margin: 0 0 40px;
		}
	}
	.news-item {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto 40px;
		&:nth-child(8) {
			margin: 0 auto 20px;
		}
		@media screen and (min-width: 640px) {
			width: 48%;
			margin: 0 0 40px 0;
			float: left;
			&:nth-child(1),
			&:nth-child(3),
			&:nth-child(5) {
				margin: 0 4% 40px 0;
			}
		}
		@media screen and (min-width: 1024px) {
			width: 300px;
			height: 330px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5) {
				margin: 0 30px 30px 0;
			}
			&:nth-child(3),
			&:nth-child(6) {
				margin: 0 0 30px 0;
			}
		}
		@media screen and (min-width: 1280px) {
			width: 380px;
			height: 430px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5),
			&:nth-child(7),
			&:nth-child(8),
			&:nth-child(10),
			&:nth-child(11) {
				margin: 0 30px 30px 0;
			}
			&:nth-child(3),
			&:nth-child(6),
			&:nth-child(9),
			&:nth-child(12) {
				margin: 0 0 30px 0;
			}
		}
		@media screen and (min-width: 1440px) {
			width: 400px;
			float: left;
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5),
			&:nth-child(7),
			&:nth-child(8),
			&:nth-child(10),
			&:nth-child(11) {
				margin: 0 40px 40px 0;
			}
			&:nth-child(3),
			&:nth-child(6),
			&:nth-child(9),
			&:nth-child(12) {
				margin: 0 0 30px 0;
			}
		}
		&:hover {
			.news-pic {
				transform: scale(1.05); 
			}
			.news-title h2 {
				color: #1776d8;
			}
			.new-author a {
				color: #1776d8;
			}
		}
		.news-pic {
			width: 100%;
			height: auto;
			margin: 0 0 5px;
			transition: transform ease 0.5s;
			transform: scale(1);
			@media screen and (min-width: 1280px) {
				width: 400px;
				height: 270px;
				margin: 0 0 20px;
			}
		}// news-pic
		.news-title {
			height: auto;
			max-height: 55px;
			overflow: hidden;
			margin: 0;
			@media screen and (min-width: 1280px) {
				margin: 0 0 15px;
			}
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #202328;
				transition: color ease 0.5s;
			}
		}// news-title
		.new-author {
			font-size: 15px;
			margin: 0 0 10px;
			a {
				color: #333;
				transition: color ease 0.5s;
			}
		}
		.news-excerpt {
			height: auto;
			max-height: 65px;
			overflow: hidden;
			p {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 15px;
				color: #202328;
			}
		}// news-excerpt
	}// news-item
	#news-previous-button {
		background: #1776D8;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		margin: 20px 0 60px;
		transition: all ease 0.5s;
		&:hover {
			background: #ffcc00;
			color: #000;
		}
		@media screen and (min-width: 640px) {
			width: 320px;
			margin: 20px auto 60px;	
		}
		@media screen and (min-width: 1280px) {
			width: 380px;
		}
		@media screen and (min-width: 1440px) {
			width: 400px;
		}
	}
}// news-template-grid


.two-column {
	width: 100%;
	@media screen and (min-width: 1024px) {
		width: 960px;
		margin: 0 auto;
		content: "";
		display: table;
		clear: both;
	}
	@media screen and (min-width: 1280px) {
		width: 1200px	
	}
	@media screen and (min-width: 1440px) {
		width: 1280px	
	}
}
.left-column {
	width: 100%;
	@media screen and (min-width: 1024px) {
		width: 450px;
		float: left;
		margin: 0;
	}
	@media screen and (min-width: 1280px) {
		width: 570px;
	}
	.section-item {
		width: 100%;
		@media screen and (min-width: 1024px) {
			margin: 0 0 40px;
			padding: 0;
		}
	}
}
.right-column {
	width: 100%;
	@media screen and (min-width: 1024px) {
		width: 450px;
		float: right;
	}
	@media screen and (min-width: 1280px) {
		width: 570px;
	}
	.section-item {
		width: 100%;
		@media screen and (min-width: 1024px) {
			margin: 0 0 40px;
		}
	}
}
.left-column,
.right-column {
	.section-title {
		margin: 0 auto 40px;
		h2 {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 25px;
			font-weight: bold;
			color: #1776d8;
			text-align: center;
		}// title
		.line-title {
			width: 50px;
			height: 6px;
			background: #D7D7D7;
			margin: 10px auto 0;
		}// line-title
	}// section-title
	.item {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto 40px;
		&:nth-child(8) {
			margin: 0 auto 20px;
		}
		@media screen and (min-width: 640px) {
			width: 48%;
			margin: 0 0 40px 0;
			float: left;
			&:nth-child(1),
			&:nth-child(3),
			&:nth-child(5) {
				margin: 0 4% 40px 0;
			}
		}
		@media screen and (min-width: 1024px) {
			width: 210px;
			height: 300px;
			float: left;
			&:nth-child(1),
			&:nth-child(3) {
				margin: 0 30px 0 0;
				content: "";
				display: table;
				clear: both;
			}
			&:nth-child(2),
			&:nth-child(4) {
				margin: 0;
			}
			&:nth-child(1),
			&:nth-child(2) {
				margin-bottom: 20px;
			}
			&:nth-child(3),
			&:nth-child(4) {
				.excerpt p {
					margin: 0 !important;
				}
			}
		}
		@media screen and (min-width: 1280px) {
			width: 270px;
			height: 350px;
			float: left;
			&:nth-child(1),
			&:nth-child(3) {
				margin: 0 30px 0 0;
				content: "";
				display: table;
				clear: both;
			}
			&:nth-child(2),
			&:nth-child(4) {
				margin: 0;
			}
			&:nth-child(1),
			&:nth-child(2) {
				margin-bottom: 20px;
				.excerpt p {
					margin: 0 !important;
				}
			}
			&:nth-child(3),
			&:nth-child(4) {
				.excerpt p {
					margin: 0 !important;
				}
			}
		}
		&:hover {
			.pic {
				transform: scale(1.05); 
			}
			.title h2 {
				color: #1776d8;
			}
			.author a {
				color: #1776d8;
			}
		}
		.pic {
			width: 100%;
			height: auto;
			margin: 0 0 5px;
			transition: transform ease 0.5s;
			transform: scale(1);
			@media screen and (min-width: 1280px) {
				margin: 0 0 20px;
			}
		}// pic
		.title {
			height: auto;
			max-height: 55px;
			overflow: hidden;
			margin: 0;
			@media screen and (min-width: 1280px) {
				margin: 0 0 15px;
			}
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #202328;
				transition: color ease 0.5s;
			}
		}// title
		.author {
			font-size: 15px;
			margin: 0 0 10px;
			a {
				color: #333;
				transition: color ease 0.5s;
			}
		}
		.excerpt {
			height: auto;
			max-height: 65px;
			overflow: hidden;
			p {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 15px;
				color: #202328;
			}
		}// excerpt
	}// item
}//


#story{
	.news-line {
		border-bottom: 10px solid #F5F5F5;
		width: 100%;
		margin: 0;
		&.bottom {
			margin: 0 0 40px;
		}
	}
	.section-title {
		margin: 20px auto 40px;
		h2 {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 25px;
			font-weight: bold;
			color: #1776d8;
			text-align: center;
		}// title
		.line-title {
			width: 50px;
			height: 6px;
			background: #D7D7D7;
			margin: 10px auto 0;
		}// libne-title
	}// section-title
	.story-item {
		width: 100%;
		height: auto;
		background: #fff;
		overflow: hidden;
		float: left;
		margin: 0 40px 40px 0;
		padding: 0 0 20px;
		position: relative;
		@media screen and (min-width: 640px) {
			width: 48%;
			float: left;
			margin: 0 4% 40px 0;
			&:nth-child(2) {
				margin: 0 0 40px;
			}
			&:nth-child(3) {
				display: none;
			}
		}
		@media screen and (min-width: 1280px) {
			width: 380px;
			height: 320px;
			margin: 0 30px 0 0;
			&:nth-child(2) {
				margin: 0 30px 0 0;
			}
			&:nth-child(3) {
				display: inline;
				margin: 0;
			}
		}
		@media screen and (min-width: 1440px) {
			width: 400px;
			margin: 0 40px 0 0;
		}
		&:nth-child(3) {
			margin: 0 0 40px;
		}
		.most-view-pic {
			background: #000;
			width: 100%;
			height: auto;
			margin: 0 0 20px;
			@media screen and (min-width: 1280px) {
				width: 400px;
				height: 270px;
			}
			img {
				transition: opacity ease 0.5s, transform ease 0.5s;
				opacity: 0.5;
				transform: scale(1); 
			}
		}// most-view-pic
		&:hover .most-view-pic img {
			opacity: 1;
			transform: scale(1.05); 
		}
		.most-view-title {
			height: auto;
			max-height: 70px;
			overflow: hidden;
			margin: 0;
			padding: 20px;
			position: absolute;
			z-index: 99;
			bottom: 70px;
			transition: opacity ease 0.5s;
			@media screen and (min-width: 1280px) {
				margin: 0 0 15px;
			}
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #fff;
			}
		}// most-view-title
		&:hover .most-view-title {
			opacity: 0;
		}
		.most-view-count {
			background: #ffcc00;
			width: auto;
			height: 30px;
			position: absolute;
			z-index: 99;
			bottom: 25px;
			right: 20px;
			text-align: center;
			color: #000;
			line-height: 30px;
			padding: 0 15px;
			@media screen and (min-width: 1280px) {
				height: 40px;
				bottom: 30px;
				line-height: 40px;
			}
		}
		.most-view-line {
			background: url(images/fancy-line-mini.png);
			background-size: 100%;
			width: 100%;
			height: 5px;
			position: absolute;
			bottom: 0;
		}
	}// most-view-item
}// story


#most-view {
	background: #F0F0F0;
	width: 100%;
	height: auto;
	margin: 40px 0;
	padding: 20px 0 30px;
	@media screen and (min-width: 1280px) {
		padding: 20px 0 60px;
	}
	.section-title {
		margin: 20px auto 40px;
		h2 {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 25px;
			font-weight: bold;
			color: #1776d8;
			text-align: center;
		}// title
		.line-title {
			width: 50px;
			height: 6px;
			background: #D7D7D7;
			margin: 10px auto 0;
		}// libne-title
	}// section-title
	.most-view-item {
		width: 100%;
		height: auto;
		background: #fff;
		overflow: hidden;
		float: left;
		margin: 0 40px 40px 0;
		padding: 0 0 20px;
		position: relative;
		@media screen and (min-width: 640px) {
			width: 48%;
			float: left;
			margin: 0 4% 40px 0;
			&:nth-child(2) {
				margin: 0 0 40px;
			}
			&:nth-child(3) {
				display: none;
			}
		}
		@media screen and (min-width: 1280px) {
			width: 380px;
			height: 320px;
			margin: 0 30px 0 0;
			&:nth-child(2) {
				margin: 0 30px 0 0;
			}
			&:nth-child(3) {
				display: inline;
				margin: 0;
			}
		}
		@media screen and (min-width: 1440px) {
			width: 400px;
			margin: 0 40px 0 0;
		}
		&:nth-child(3) {
			margin: 0 0 40px;
		}
		.most-view-pic {
			background: #000;
			width: 100%;
			height: auto;
			margin: 0 0 20px;
			@media screen and (min-width: 1280px) {
				width: 400px;
				height: 270px;
			}
			img {
				transition: opacity ease 0.5s, transform ease 0.5s;
				opacity: 0.5;
				transform: scale(1); 
			}
		}// most-view-pic
		&:hover .most-view-pic img {
			opacity: 1;
			transform: scale(1.05); 
		}
		.most-view-title {
			height: auto;
			max-height: 70px;
			overflow: hidden;
			margin: 0;
			padding: 20px;
			position: absolute;
			z-index: 99;
			bottom: 70px;
			transition: opacity ease 0.5s;
			@media screen and (min-width: 1280px) {
				margin: 0 0 15px;
			}
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				color: #fff;
			}
		}// most-view-title
		&:hover .most-view-title {
			opacity: 0;
		}
		.most-view-count {
			background: #ffcc00;
			width: auto;
			height: 30px;
			position: absolute;
			z-index: 99;
			bottom: 25px;
			right: 20px;
			text-align: center;
			color: #000;
			line-height: 30px;
			padding: 0 15px;
			@media screen and (min-width: 1280px) {
				height: 40px;
				bottom: 30px;
				line-height: 40px;
			}
		}
		.most-view-line {
			background: url(images/fancy-line-mini.png);
			background-size: 100%;
			width: 100%;
			height: 5px;
			position: absolute;
			bottom: 0;
		}
	}// most-view-item
}// most-view


#single.template-single {
	
	@media screen and (min-width: 1280px) {
		width: 1200px;
		margin: 0 auto;
	}
	@media screen and (min-width: 1440px) {
		width: 1280px;
		margin: 0 auto;
	}
	
	#breadcrumb {
		margin: 20px 0;
		padding: 0 0 20px;
		opacity: 0.7;
		border-bottom: 1px solid #ddd;
		a {
			color: #1776d8 !important;
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 15px;
			font-weight: bold;
			transition: color ease 0.5s;
			&:visited {
				color: #1776d8 !important;
			}
			&:hover {
				color: #202328 !important;
			}
		}
	}
	#content {
		width: 100%;
		height: auto;
		min-height: 500px;
		padding-top: 10px;
		padding-bottom: 50px;
		@media screen and (min-width: 1024px) {
			width: 960px;
		}
		@media screen and (min-width: 1280px) {
			width: 850px;
			float: left;
		}
		@media screen and (min-width: 1440px) {
			width: 920px;
		}
		#feature-image-area {
			width: 100%;
			height: auto;
			margin: 0 0 40px;
		}
		#date-area {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 15px;
			font-weight: 400;
			color: #818183;
			letter-spacing: 1px;
			margin: 0 0 10px;
		}
		#single-page-title-area h1 {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 30px;
			font-weight: bold;
			color: #1776D8;
			margin: 0;
		}
		#author-area {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 15px;
			font-weight: normal;
			color: #818183;
			letter-spacing: 1px;
			margin: 0 0 30px;
			#author-name {
				font-weight: bold;
				color: #1776D8;
				transition: color ease 0.5s;
				a:hover {
					color: #333;
				}
				a:visited {
					color: #1776D8;
				}
			}
		}
		#content-area {
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			//color: #202328;
			p {
				font-size: 18px;
				font-weight: 300;
				margin: 0 0 30px;
				color: #000;
				letter-spacing: 0.5px;
			}
			// Share Plugins
			p.dpsp-share-text {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 18px;
				font-weight: bold;
				color: #818183;
				letter-spacing: 1px;
				margin: 10px 15px 0 0;
				float: left;
			}
			// end
			.dpsp-content-bottom {
				margin: 0;
				float: left;
			}
			ul {
				list-style: disc;
				margin-bottom: 30px;
				li {
					font-size: 18px;
					margin: 0 0 10px;
				}
			}
			ol {
				list-style: decimal;
				margin-bottom: 30px;
				li {
					font-size: 18px;
					margin: 0 0 10px;
				}
			}
			blockquote {
				background: url(images/fancy-line-mini.png) no-repeat bottom center;
				background-size: 300px 5px;
				padding: 50px 0 5px;
				margin: 30px 0 80px;
				p {
					width: 50%;
					text-align: center;
					font-size: 23px;
					margin: 0 auto 30px;
				}
			}
			img {
				width: 100%;
				display: block;
			}
		}
	}
	#sidebar {
		width: 100%;
		@media screen and (min-width: 1024px) {
			width: 960px;
			margin: 0 auto;
		}
		@media screen and (min-width: 1200px) {
			width: 300px;
			float: right;
		}
		#new-article {
			section {
				padding: 0;
			}
			.section-title {
				margin: 0 0 20px;
				h2 {
					font-family: 'Pridi'/*'Kanit'*/, sans-serif;
					font-size: 25px;
					font-weight: bold;
					color: #1776d8;
				}// title
			}// section-title
			.item {
				width: 100%;
				height: auto;
				overflow: hidden;
				margin: 0 auto 40px;
				@media screen and (min-width: 640px) {
					width: 48%;
					float: left;
					margin: 0 0 40px 0;
					&:nth-child(1),
					&:nth-child(3) {
						margin-right: 4%;
					}
				}
				@media screen and (min-width: 960px) {
					width: 23%;
					float: left;
					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-right: 2.6%;
					}
				}
				@media screen and (min-width: 1280px) {
					float: none;
					width: 300px;
					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-right: 0;
					}
				}
				&:hover {
					.pic {
						transform: scale(1.05); 
					}
					.title h2 {
						color: #1776d8;
					}
					.new-author a {
						color: #1776d8;
					}
				}
				.pic {
					width: 100%;
					height: auto;
					margin: 0 0 5px;
					transition: transform ease 0.5s;
					transform: scale(1);
					@media screen and (min-width: 1280px) {
						width: 300px;
						height: 200px;
						margin: 0;
					}
				}// pic
				.title {
					height: auto;
					max-height: 55px;
					overflow: hidden;
					margin: 0;
					@media screen and (min-width: 1280px) {
						margin: 0 0 15px;
					}
					h2 {
						font-family: 'Pridi'/*'Kanit'*/, sans-serif;
						font-size: 18px;
						color: #202328;
						transition: color ease 0.5s;
					}
				}// title
				.new-author {
					font-size: 15px;
					margin: 0 0 10px;
					a {
						color: #333;
						transition: color ease 0.5s;
					}
				}
				.excerpt {
					height: auto;
					max-height: 65px;
					overflow: hidden;
					p {
						font-family: 'Pridi'/*'Kanit'*/, sans-serif;
						font-size: 15px;
						color: #202328;
						margin: 0;
					}
				}// excerpt
			}// item
		}// news
	}
}// single


#single.template-page {
	
	@media screen and (min-width: 1280px) {
		width: 1200px;
		margin: 0 auto;
	}
	@media screen and (min-width: 1440px) {
		width: 1280px;
		margin: 0 auto;
	}
	
	#breadcrumb {
		margin: 20px 0;
		padding: 0 0 20px;
		opacity: 0.7;
		border-bottom: 1px solid #ddd;
		a {
			color: #1776d8 !important;
			font-family: 'Pridi'/*'Kanit'*/, sans-serif;
			font-size: 15px;
			font-weight: bold;
			transition: color ease 0.5s;
			&:visited {
				color: #1776d8 !important;
			}
			&:hover {
				color: #202328 !important;
			}
		}
	}
	#content {
		width: 100%;
		height: auto;
		min-height: 500px;
		padding-top: 10px;
		padding-bottom: 50px;
	}
}

body.error404 #single.template-single #content {
	min-height: 200px;
}


footer {
	#social {
		.section-title {
			margin: 20px auto 40px;
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 25px;
				font-weight: bold;
				color: #1776d8;
				text-align: center;
			}// title
			.line-title {
				width: 50px;
				height: 6px;
				background: #D7D7D7;
				margin: 10px auto 0;
			}// libne-title
		}// section-title
		.fb-wrap {
			width: 100%;
			margin: 0 auto 70px;
			@media screen and (min-width: 640px) {
				width: 70%;
			}
			@media screen and (min-width: 1024px) {
				width: 50%;
			}
			@media screen and (min-width: 1280px) {
				margin-left: 345px;
			}
			@media screen and (min-width: 1440px) {
				margin-left: 390px;
			}
		}
		.fb-like-box,
		.fb-like-box span,
		.fb-like-box span iframe[style] {
			width: 100% !important;
		}
		#social-line {
			border-bottom: 10px solid #F5F5F5;
			width: 100%;
			margin: 0 0 70px;
		}
	}
	#subscribe {
		margin: 0 0 70px;
		.section-title {
			margin: 20px auto 40px;
			h2 {
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 20px;
				font-weight: bold;
				color: #202328;
				text-align: center;
				span.blue {
					color: #1776d8;
				}
			}// title
		}
		form {
			margin: 0 auto;
			position: relative;
			@media screen and (min-width: 640px) {
				width: 300px;
			}
			#subscribe-email {
				background: #EBEBEB;
				width: 100%;
				height: 40px;
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 13px;
				line-height: 40px;
				color: #202328;
				padding: 0 55px 0 15px;
				border: none;
				@media screen and (min-width: 640px) {
					width: 300px;
					margin: 0 auto;
					font-size: 15px;
				}
			}
			#subscribe-button {
				background: url(images/button-send.png) no-repeat;
				background-size: 40px 40px;
				width: 40px;
				height: 40px;
				position: absolute;
				z-index: 99;
				right: 0;
			}
		}
	}
	#footer {
		background: #1776D8;
		width: 100%;
		height: auto;
		@media screen and (min-width: 1280px) {
			height: 150px;
		}
		padding: 50px 0;
		clear: both;
		#footer-left {
			@media screen and (min-width: 1280px) {
				float: left;
			}
			#footer-brand {
				width: 200px;
				height: 52px;
				margin: 0 auto;
				@media screen and (min-width: 1280px) {
					margin: 0;
				}
			}
		}
		#footer-right {
			@media screen and (min-width: 1280px) {
				float: right;
			}
			#footer-copyright {
				text-align: center;
				font-family: 'Pridi'/*'Kanit'*/, sans-serif;
				font-size: 15px;
				color: #fff;
				margin: 40px 0 0;
				@media screen and (min-width: 1280px) {
					text-align: right;
					margin: 0;
				}
			}
			#footer-social {
				ul {
					list-style: none;
					padding: 0;
					margin: 30px auto 0;
					text-align: center;
					@media screen and (min-width: 1280px) {
						text-align: inherit;
						margin: 10px 0 0;
					}
					li {
						margin: 0 5px;
						display: inline;
						@media screen and (min-width: 1280px) {
							display: inherit;
							float: right;
							margin: 0 0 0 20px;
						}
						img {
							width: 24px;
							height: 24px;
						}
					}
				}
			}
		}
	}
}


#pagenavi {
	width: 100%;
	height: auto;
	margin: 20px 0 40px;
	padding: 0;
}
.wp-pagenavi {
	clear: both;
}
.wp-pagenavi a:link,
.wp-pagenavi a:visited,
.wp-pagenavi span {
	font-size: 13px !important;
	text-decoration: none !important;
	padding: 7px 10px !important;
	margin: 5px 10px 5px 0 !important;
	background: #ddd !important;
	color: #333;
	border: none !important;
	transition: color ease 0.5s, background ease 0.5s;
}
.wp-pagenavi a:hover,
.wp-pagenavi a:active,
.wp-pagenavi span.current {
	background: #1776D8 !important;
	color: #fff;
	border: none !important;
}



/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/
.banner-72890 {
	display: none;
	@media screen and (min-width: 768px) {
		display: block;
		background: url(images/FrontlineNews_Banner_72890_PNG.png);
		width: 728px;
		height: 90px;
		margin: 0 auto 40px;
	}
}
header {
	.banner-72890 {
		display: none;
		@media screen and (min-width: 1440px) {
			display: block;
			margin: 60px 0 0;
			float: right;
		}
	}
}
.banner-300250 {
	display: none;
	@media screen and (min-width: 480px) {
		display: block;
		background: url(images/FrontlineNews_Banner_300250_PNG.png);
		width: 300px;
		height: 250px;
		margin: 0 auto 40px;
	}
}



/*--------------------------------------------------------------
# Related Post
--------------------------------------------------------------*/
/* You may also lke */
.shareaholic-recommendations-container {
	.shareaholic-recommendations-header {
		font-size: 18px !important;
	}
}

/* Plugin Name */
.shareaholic-recommendations-container .shareaholic-recommendations-attribution-container {
	display: none;
}

/* a cover img+title */
.shareaholic-recommendations-container .shareaholic-recommendations .shareaholic-recommendation .shareaholic-recommendation-article-link:hover {
	div.shareaholic-image {
		transform: scale(1.05);
	}
	.shareaholic-recommendation-article-title {
		color: #1776d8;
	}
}

/* Img Cover */
.shareaholic-recommendations-container .shareaholic-recommendations .shareaholic-recommendation .shareaholic-recommendation-article-link:hover div.shareaholic-image {
	transition: ease transform 0.5s;
	transform: scale(1);
	&:hover {
		transform: scale(1.05);
	}
}

/* Title */
.shareaholic-recommendations-container .shareaholic-recommendations .shareaholic-recommendation .shareaholic-recommendation-article-link .shareaholic-recommendation-article-title {
	color: #202328;
	transition: ease color 0.5s;
	&:hover {
		color: #1776d8;
	}
}