﻿/*Blog Listing*/
ul.blog-listing
{
	list-style-type:none;
	padding:0;
	margin:80px 0 40px 0;
}
ul.blog-listing li.blog-item a
{
	display:inline-block;
	width:100%;
}
ul.blog-listing li.blog-item a:hover
{
	text-decoration:none;
}
ul.blog-listing li.blog-item a img
{
	width:100%;
	border-radius:16px;
}
ul.blog-listing li.blog-item a .content
{
	margin-top:16px;
}
ul.blog-listing li.blog-item a .content .date
{
	color:var(--basic-700);
	font-size:0.875rem;
	margin-bottom:2px;
}
ul.blog-listing li.blog-item a .content .title
{
	font-size:1.125rem;
	font-weight:700;
	margin-bottom:0;
}
@media all and (max-width:767px)
{
	ul.blog-listing
	{
		margin:0;
	}
}

/*Blog Listing - Not Swiper*/
ul.blog-listing:not(.swiper-wrapper)
{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:60px 30px;
	margin:40px 0;
}
@media all and (max-width:1199px)
{
	ul.blog-listing:not(.swiper-wrapper)
	{
		grid-template-columns:repeat(3, 1fr);
	}
}
@media all and (max-width:767px)
{
	ul.blog-listing:not(.swiper-wrapper)
	{
		grid-template-columns:repeat(2, 1fr);
	}
}
@media all and (max-width:575px)
{
	ul.blog-listing:not(.swiper-wrapper)
	{
		grid-template-columns:1fr;
	}
}

/*Blog Listing - Category Navigation*/
.blog-category-navigation
{
	display:inline-block;
	width:100%;
	margin:24px 0;
}
.blog-category-navigation ul
{
	display:flex;
	align-items:center;
	list-style-type:none;
	padding:0;
	margin:0;
}
.blog-category-navigation ul li:not(:last-child)
{
	margin-right:16px;
}
.blog-category-navigation ul li a
{
	display:inline-block;
	color:var(--basic-700);
	font-size:0.875rem;
	border-radius:8px;
	padding:8px 16px;
}
.blog-category-navigation ul li a.all
{
	color:var(--basic-900);
	background-color:var(--basic-200);
}
.blog-category-navigation ul li a:hover
{
	color:var(--primary-700);
	text-decoration:none;
}

/*Blog Listing - Paging*/
.blog .paging
{
	display:inline-block;
	width:100%;
	margin-top:40px;
}
.blog .paging ul
{
	display:flex;
	justify-content:center;
	align-items:center;
	list-style-type:none;
	padding:0;
	margin:0;
}
.blog .paging ul li:not(.next-page):not(.previous-page) a,
.blog .paging ul li span
{
	display:inline-block;
	width:24px;
	height:24px;
	color:var(--basic-700);
	line-height:1.325;
	font-weight:600;
	text-align:center;
	border:1px solid transparent;
	border-radius:50%;
	margin:0 8px;
	transition:all var(--transition-fast);
}
.blog .paging ul li.next-page a,
.blog .paging ul li.previous-page a
{
	display:inline-block;
	color:var(--tertiary-400);
	font-size:0;
	padding:10px 16px;
	border:1px solid var(--basic-300);
	border-radius:50%;
	background-color:transparent;
	transition:all var(--transition-fast);
}
.blog .paging ul li.next-page a::before
{
	content:'\e01e';

	color:inherit;
	font-family:'Font Awesome Kit';
	font-size:1.375rem;
	line-height:1.5;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	text-rendering:auto;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
.blog .paging ul li.previous-page a::before
{
	content:'\e01d';

	color:inherit;
	font-family:'Font Awesome Kit';
	font-size:1.375rem;
	line-height:1.5;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	text-rendering:auto;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
.blog .paging ul li span
{
	color:var(--tertiary-400);
	border-color:var(--tertiary-400);
}
.blog .paging ul li a:not(.next-page):not(.previous-page):hover,
.blog .paging ul li span:hover
{
	border-color:var(--basic-700);
	text-decoration:none;
	transition:all var(--transition-fast);
}
@media all and (max-width:767px)
{
	.blog .paging ul li.next-page a,
	.blog .paging ul li.previous-page a
	{
		padding:12px 16px;
	}
	.blog .paging ul li:not(.next-page):not(.previous-page) a,
	.blog .paging ul li span
	{
		line-height:1.5;
	}
}
@media all and (max-width:575px)
{
	.blog .paging ul li.next-page a,
	.blog .paging ul li.previous-page a
	{
		padding:3px 8px;
	}
	.blog .paging ul li:not(.next-page):not(.previous-page) a,
	.blog .paging ul li span
	{
		margin:0 4px;
	}
}

/*Blog Details*/
.blog-details .blog-image
{
	margin-bottom:40px;
}
.blog-details .blog-image img
{
	width:100%;
	object-fit:cover;
}
.blog-details .date
{
	color:var(--basic-700);
}
.blog-details .content
{
	margin-top:40px;
	margin-bottom:var(--section-spacing-md);
}

/*Related Blog*/
.related-blog
{
	margin-top:var(--section-spacing-md);
}