/************************************************

Stylesheet: Related Posts Stylesheet

*************************************************/
.plugin-width {
    margin: auto;
    max-width: 1250px;
}
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}
 
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
    padding: 0 0 0 1rem;
}
 
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
    padding: 0 1rem 0 0;
}
.related-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.related-grid a {
	color: #000;
	display: flex;
	align-items: center;
}
.related-grid {

	justify-content: center;
}
.related-box-grid::before, .related-box-grid::before {
 position: absolute;
 content: attr(data-title);
 opacity: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 2;
 color: white;
 font-weight:bold;
 font-size: 1.5em;
 line-height: 1em;
}
.related-box-grid, .related-box-grid {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 15px 15px 25% 15px;
}
.related-box-grid:hover, .related-box-grid:hover {
  transform: scale(1.025);
  transition: all 0.3s ease-in-out;
  z-index:999;
}
.related-box-grid img:hover, .related-box-grid img:hover {
  background: rgba(0,0,0,0.5);
  transition: opacity 300ms ease-in-out, transform 300ms;
  opacity: 0.25;
}
.related-box-grid:hover::before, .related-box-grid::before {
  display: flex;
  color: #000;
  text-align: center;
  width: 90%;
  opacity: 1;
  text-transform: uppercase;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  z-index:-1;
}
.related-box-grid::before {
	color: black;
}
.related-box-grid::after, .related-box-grid::after {
	content: attr(data-title);
	position: absolute;
	top: calc(100% + 10px);
	font-size: 1.0em;
	line-height: 1.2em;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
}
.related-box-grid img, .related-box-grid img {
  height: 180px;
  min-width: 315px;
  max-width: 315px;
  border: 2px solid white;
  object-fit: cover;
}
@media (max-width:430px) {
	.related-box-grid, .related-box-grid {
		margin: 15px 15px 20% 15px;
	}
}
@media screen and (min-width:620px) {
	
	.archive-box a, .related-grid a {
	width: 32%;
	padding: 0.5rem;
	margin: 0.25rem;
	}
	.archive-box, .related-grid {
		width: 100%;
	}
	
}