@charset "UTF-8";
/* =======================================================
* column-details.php
* ======================================================= */
#column-details-container .flex-space-between {
	padding-top: 4%;
}

#column-details-container .social a,
#column-details-container .column-inner .social a {
	margin-left: 15px;
}

#column-details-container .social img,
#column-details-container .column-inner .social img {
	width: 27px;
}

.column-inner {
	background: none;
	padding: 2% 0;
}

.day {
	padding-bottom: 3.5%;
}

#column-details-container .column-inner p:first-of-type {
	border-top: 1px solid #282828;
	padding-top: 3.5%;
}

#column-details-container .column-inner img {
	width: 100%;
	border-radius: 4px;
	margin: 4% 0;
}

.nav_links {
	width: 800px;
	margin: 0 auto;
}

.nav_links i {
	margin-right: 10px;
}

#related-article {
	max-width: 800px;
	border-top: 2px solid #DBDBDB;
	border-bottom: 2px solid #DBDBDB;
	padding: 3% 0 1%;
	margin: 0 auto 2%;
}

#related-article h3 {
	padding-bottom: 2%;
}

.related-inner {
  width: calc(25% - 30px / 4);
  margin: 0 15px 15px 0;
}

.related-inner:last-of-type {
	margin-right: 0;
}

.column-thumbnail {
	position: relative;
	overflow: hidden;
	padding-top: 50%;
}

.column-thumbnail img {
	border-radius: 4px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-inner .column-inner {
	padding: 6% 0;
}

.related-inner .day {
	color: #757575;
}

/* =======================================================
* max-width: 768px
* ======================================================= */
@media screen and (max-width: 768px) {
	#column-details-container .column-inner .social {
		padding-bottom: 3.5%;
	}

	#column-details-container .column-inner .social a {
		padding: 0;
	}

	#column-details-container .column-inner .social a:first-of-type {
		margin-left: 0;
	}

	.nav_links {
    padding-left: 4%;
	}

	#related-article {
		padding: 0 4%;
	}

	#related-article h3 {
    padding-top: 4%;
	}

	#related-article .flex {
		flex-wrap: wrap;
	}

	.related-inner {
	  width: calc(50% - 15px / 2);
	  margin: 0 15px 15px 0;
	}

	.related-inner:nth-of-type(2n) {
		margin-right: 0;
	}

}