/* ---------------------------------------
   tutorial Custom Post Type 
----------------------------------------*/

.tutorial-posts,
.tutorial-cats {
	max-width: 100%;
	display: block;
	margin: 0 auto!important;
    text-align: center!important;
}

.tutorial-cats li {
	list-style: none;
    display: inline-block;
    background: #000;
	border-radius: 5px;
    text-transform: uppercase;
    font-size: .75em!important;
    padding: 5px 15px;
    margin: 0 8px;    
}

.tutorial-cats li a {
	color: #fff!important;
}

.tutorial-posts,
.tutorial-posts-all {
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem 1rem;
	margin: 3% 0 8%!important;
	padding: 0;
}

.tutorial-posts li,
.tutorial-posts-all li {
	list-style: none;
	vertical-align: text-top;
	margin: .5%!important;
	position: relative;
	background: #000;
	border-radius: 3px;
	padding: 8px;
	text-align: center;
}

.tutorial-posts span1,
.tutorial-posts-all span1 {
	opacity: .5;
}

.tutorial-posts li a,
.tutorial-posts-all li a {
	font-size: 1.35em!important;
	font-family: 'Shadows into Light', cursive;
	font-weight: 400!important;
	color: #fff!important;
}

.tutorial-posts .category,
.tutorial-posts-all .category { 
    background: #eaeaea;
    text-transform: uppercase;
    font-size: .75em!important;
    padding: 3px;
    display: inline;
    margin: 0 2px;
} 

.tutorial-posts .category a,
.tutorial-posts-all .category a {
    background: #eaeaea;
    padding: 4px;
} 

/* Display Tutorials */

.display-tutorials {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 2.5% 0;
}

.display-box {
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	padding: 15px!important;
	text-align: center;
	box-sizing: border-box;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.display-box li {
	list-style: none;
}

.read-me {
	margin-top: 3px;
	text-transform: uppercase;
	font-family: 'Tahoma', sans-serif;
	font-size: .70em;
	letter-spacing: 2px;
	opacity: .7;
}

/* -- Pagination -- */

.tutorial-pagination {
	display: block!important;
	margin: 5% auto!important;
}
 
.tutorial-pagination li {
    display: inline;
	border-bottom: 0px!important;
}

.tutorial-pagination .span {
	border: 1px solid #e1e1e1!important;
	background: #e1e1e1!important;
    padding: 12px;
}

.tutorial-pagination li a,
.tutorial-pagination li.active a,
.tutorial-pagination li.disabled {
	color: #535353;
    padding: 12px;
    padding: 0.75rem;
    text-decoration:none;
}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 960px) {
	
	.tutorial-pagination {
		margin: 5.8% 2.5%!important;
}
}

@media only screen and (max-width: 650px), only screen and (max-device-width: 199px) {
.tutorial-posts {
	grid-template-columns: 1fr 1fr;
}
	
.tutorial-posts-all {
	grid-template-columns: 1fr!important;
}
}

/* -- Credits -- */

.tutorial-credit {
	text-align: center;
	font-size: 11px;
	margin: 15px auto;
	font-family: 'Arial', sans-serif;
	display: block;
	clear: both;
	filter: opacity(50%);
}