/* CSS Document */
@keyframes showdetail {
	from {
		top: 200%;
	}
	to {
		top: 0px;
	}
}
@keyframes hidedetail {
	from {
		top: 0px;
	}
	to {
		top: 200%;
	}
}
body {
	background-color: #242424;
}
footer {
	color: white;
}
footer a {
	color: white;
}
h2 {
	margin: 0px;
	font-family: 'Noto Sans Thai', sans-serif;
	font-weight: 200;
	font-size: 32px;
	line-height: 36px;
}
h3 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 200;
	font-size: 15px;
}
.media-column {
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fill, 33%);
}
.media-container {
	display: grid;
	height: auto;
	margin: 10px 10px;
	padding: 0px;
	background-color: white;
}
.media-title {
	padding: 0px 10px;
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 24px;
	font-weight: 200;
	color: white;
}
.media-poster {
	width: auto;
	aspect-ratio: 16 / 9;
	position: relative;
	background-position: center;
	background-repeat: repeat;
	background-size: cover;
	overflow: hidden;
	box-sizing: inherit;
	cursor: pointer;
}
.media-info {
	display: grid;
	padding: 20px;
	text-align: center;
	align-items: stretch;
	align-content: center;
	font-family: 'Noto Sans Thai', sans-serif;
}
#media-detail {
	position: fixed;
	padding: 1%;
	top: 200%;
	z-index: 300;
	width: 100%;
	height: 100%;
	background-color: white;
	justify-content: center;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	overflow: auto;
	box-sizing: border-box;
}
#media-detail-content {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
}
.media-detail-control {
	width: 100%;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
}
.mediacontent {
	padding: 0px 10px;
	font-family: 'Noto Sans Thai', sans-serif;
	font-weight: 200;
	font-size: 18px;
}
.mediacontent img {
	padding: 10px 0px;
}
.mediacontent-grid-2-1 {
	width: 100%;
	display: grid;
	align-items: center;
	grid-template-columns: 50% 50%;
}
.mediacontent-caption {
	text-align: center;
	font-size: 12px;
	padding-bottom: 10px;
}
.mediacontent-youtube {
	padding: 10px;
	aspect-ratio: 16 / 9;
}
.mediacontent-quote {
	padding: 10px;
	font-family: 'Noto Sans Thai', sans-serif;
	font-weight: 200;
	font-size: 36px;
	color: #666;
	text-align: center;
}
@media only screen and (max-width: 2048px) {}
@media only screen and (max-width: 1280px) {
	.media-column {
		grid-template-columns: repeat(auto-fill, 50%);
	}
}
@media only screen and (max-width: 768px) {
	.media-column {
		grid-template-columns: repeat(auto-fill, 100%);
	}
}
@media only screen and (max-width: 500px) {
	h2 {
		font-size: 26px;
	}
	h3 {
		font-size: 15px;
	}
	.media-container-nimg {
		padding: 20px 10px;
		grid-template-columns: 100%;
	}
	.media-container-wimg {
		grid-template-columns: 100%;
	}
	.mediacontent-grid-2-1 {
		grid-template-columns: 100%;
	}
}