:root {
	--background-color: #f5f5f5;
	--text-color: #252525;
	--white-text-color: #fff;
	--border-color: rgba(0, 0, 0, 0.15);
}

li[data-type="posts"] {
	margin: 0 0 20px 0;
}
li[data-type="posts"]:nth-last-of-type(1) {
	margin: 0;
}

[data-name="post"] {
	width: calc(100% - 30px);
	margin: 10px 15px;
	/*background: #fff;
	background: rgba(255, 255, 255, 0.35);
	-webkit-box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2);
	   -moz-box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2);*/
	cursor: pointer;
}
[data-name="post"]:hover {
	/*background: rgba(255, 255, 255, 0.55);*/
}
[data-name="post"]:nth-of-type(1) {
	margin: 0 15px 10px 15px;
}
[data-name="post"]:nth-last-of-type(1) {
	margin: 10px 15px 0 15px;
}
[data-name="post"] * {
	cursor: pointer;
}
[data-name="post"]::before {
	content: "";
	width: 100%;
	height: 1px;
	margin: -10px 0 0 0;
	background: #d5d5d5;
	position: relative;
	float: left;
	pointer-events: none;
	cursor: unset;
}
[data-name="post"]:nth-of-type(1)::before {
	content: unset;
}

[data-name="post"] [type="thumbnails"],
[data-name="post"] timestamp,
[data-name="post"] headline,
[data-name="post"] description {
	position: relative;
	float: left;
}
[data-name="post"] timestamp {
	font-size: 0.875rem;
	float: right;
	margin: 0 3px 0 0;
}

[data-name="post"] categories {
	font-size: 0.875rem;
	padding: 2.5px;
	position: absolute;
	bottom: calc(100% - 150px); left: 0;
}
[data-name="post"] categories span {
	padding: 2.5px 5px;
	margin: 2.5px;
	position: relative;
	float: left;
	color: var(--white-text-color);
	border: 1px dashed rgba(0, 0, 0, 0.15);
	background: rgba(0, 0, 0, 0.2);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}




[data-name="post"] [type="thumbnails"] {
	width: 180px;
	min-width: 180px;
	height: 100px;
	min-height: 100px;
	/*border-radius: 5px;*/
}
[data-name="post"] headline {
	font-family: "Kanit-Regular";
	line-height: 1.063rem;
	padding: 0 10px 2px 10px;
	margin: 0 0 2px 0;
	max-height: 65px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
[data-name="post"] description {
	display: none;
}

[data-name="post"] authors {
	font-size: 0.938rem;
	padding: 0 0 0 10px;
	position: relative;
	float: left;
	color: #757575;
}

[data-name="post"]:hover headline {
	text-decoration: underline;
	color: #0a68ce;
}
[data-name="post"]:hover timestamp,
[data-name="post"]:hover authors {
	color: #0a68ce;
	opacity: 0.5;
}
[data-name="post"] authors::before {
	margin: 0 5px 0 0;
	position: relative;
	float: left;
}
[data-name="post"][nature="opinion"] authors::before {
	content: "Opinion by:";
}
[data-name="post"][nature="news"] authors::before {
	content: "By:";
}
[data-name="post"] authors span {
	margin: 0 20px 0 0;
	position: relative;
	float: left;
}
[data-name="post"] authors span::before {
	content: "&";
	margin: 0 5px 0 -15px;
	position: relative;
	float: left;
	pointer-events: none;
}
[data-name="post"] authors span:first-of-type::before {
	content: unset;
}



[data-name="main"] [data-name="post"] headline {
	width: calc(100% - 180px);
}



[data-name="aside"][data-position="left"] [data-name="post"] {
	width: calc(100% - 15px);
	margin: 10px 15px 10px 0;
	/*background: #fff;*/
	cursor: pointer;
}
[data-name="aside"][data-position="left"] [data-name="post"]:nth-of-type(1) {
	margin: 0 15px 10px 0;
}
[data-name="aside"][data-position="left"] [data-name="post"]:nth-last-of-type(1) {
	margin: 10px 15px 0 0;
}


[data-name="aside"][data-position="left"] [type="thumbnails"] {
	width: 80px;
	min-width: 80px;
	height: 80px;
	min-height: 80px;
}
[data-name="aside"][data-position="left"] headline {
	width: calc(100% - 80px);
}
[data-name="aside"][data-position="left"] authors {
	display: none;
}


[data-name="aside"][data-position="left"] > li::before,
[data-name="main"] > li:nth-of-type(n+2)::before {
	font-family: "Kanit-Regular";
	content: attr(data-name);
	width: calc(100% - 15px);
	padding: 0 20px 3px 5%;
	margin: 0 15px 10px 0;
	/*margin: 0 0 0 0;*/
	position: relative;
	float: left;
	text-transform: capitalize;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	/*background: #fff;
	text-align: center;*/
}
[data-name="main"] > li:nth-of-type(n+2)::before {
	width: calc(100% - 30px);
	/*padding: 10px 20px 15px 20px;*/
	margin: 0 15px 10px 15px;
}
















[data-name="main"] [data-name="latest-all"]::before {
	content: unset;
}
[data-name="main"] > li:nth-of-type(2)::before {
	content: "";
	margin: 0 15px 5px 15px;
}



[data-name="main"] [data-name="latest-all"] ul {
	padding: 0 5px;
}

[data-name="latest-all"] [data-name="post"] {
	width: calc(50% - 20px);
	margin: 10px 10px 20px 10px;
}
[data-name="latest-all"] [data-name="post"]::before {
	content: unset;
}

[data-name="latest-all"] [data-name="post"] [type="thumbnails"] {
	width: 100%;
	min-width: 100%;
	height: 150px;
	min-height: 150px;
}

[data-name="latest-all"] [data-name="post"] timestamp {
	/*margin: 0 3px 0 0;
	position: absolute; float: unset;
	top: 0; right: 0;*/
}

[data-name="latest-all"] [data-name="post"] headline {
	width: 100%;
	max-height: 63px;
	padding: 0 0 2px 0;
}
[data-name="latest-all"] [data-name="post"] authors {
	padding: unset;
	/*width: 100%;*/
}



















@media (max-width: 1280px) {
	[data-name="latest-all"] [data-name="post"] {
		width: calc(100% - 20px);
		margin: 10px 10px 20px 10px;
	}
}




@media (max-width: 1100px) {
	[data-name="post"] {
		width: calc(100% - 15px);
		margin: 10px 15px 10px 0;
	}
	[data-name="post"]:nth-of-type(1) {
		margin: 0 15px 10px 0;
	}
	[data-name="post"]:nth-last-of-type(1) {
		margin: 10px 15px 0 0;
	}
	[data-name="latest-all"] [data-name="post"] {
		width: calc(50% - 20px);
		margin: 10px 10px 20px 10px;
	}
	[data-name="aside"][data-position="left"] [data-name="post"] {
		margin: 10px 0 10px 15px;
	}

	[data-name="aside"][data-position="left"] [data-name="post"]:nth-of-type(1) {
		margin: 0 0 10px 15px;
	}
	[data-name="aside"][data-position="left"] [data-name="post"]:nth-last-of-type(1) {
		margin: 10px 0 0 15px;
	}
}
@media (max-width: 980px) {
	li[data-type="posts"]:nth-last-of-type(1) {
		margin: 0 0 20px 0;
	}
	[data-name="post"] {
		width: 100%;
		margin: 10px 0;
	}
	[data-name="post"]:nth-of-type(1) {
		margin: 0 0 10px 0;
	}
	[data-name="post"]:nth-last-of-type(1) {
		margin: 10px 0 0 0;
	}

	[data-name="latest-all"] [data-name="post"] {
		width: calc(33.333% - 20px);
		margin: 10px 10px 20px 10px;
	}

	[data-name="aside"][data-position="left"] [data-name="post"] {
		margin: 10px 0;
	}

	[data-name="aside"][data-position="left"] [data-name="post"]:nth-of-type(1) {
		margin: 0 0 10px 0;
	}
	[data-name="aside"][data-position="left"] [data-name="post"]:nth-last-of-type(1) {
		margin: 10px 0 0 0;
	}

	[data-name="aside"][data-position="left"] > li::before,
	[data-name="main"] > li:nth-of-type(n+2)::before {
		width: 100%;
		margin: 0 0 10px 0;
	}
	[data-name="main"] > li:nth-of-type(n+2)::before {
		width: 100%;
		margin: 0 0 10px 0;
	}

}
@media (max-width: 720px) {
	[data-name="latest-all"] [data-name="post"] {
		width: calc(50% - 20px);
		margin: 10px 10px 20px 10px;
	}
}
@media (max-width: 680px) {
	[data-name="post"] {
		width: 100%;
		/*padding: 0 0 0 10px;*/
		margin: 10px 0;
	}
	[data-name="post"]:nth-of-type(1) {
		margin: 0 0 10px 0;
	}
	[data-name="post"]:nth-last-of-type(1) {
		margin: 10px 0 0 0;
	}
	[data-name="latest-all"] [data-name="post"] {
		width: calc(50% - 20px);
		margin: 10px 10px 20px 10px;
	}

	[data-name="post"] [type="thumbnails"] {
		width: 100px;
		min-width: 100px;
		margin: 0 0 0 10px;
	}
	[data-name="main"] [data-name="post"] headline {
		width: calc(100% - 110px);
	}
	[data-name="aside"][data-position="left"] headline {
		width: calc(100% - 80px);
	}


}