/*
#################################################################################################
# CUSTOM POST GRID                                                                              #
# ----------------                                                                              #
# CREATED BY: Simon Edge                                                                        #
# DATE: 03/01/2019                                                                              #
# DESCRIPTION:                                                                                  #
# CSS code to display a custom Posts Grid. This will display a grid of all WordPress posts      #
# sorted in descennding date published order. Features of this grid will include:               #
#  - Lazy Loading - Only first X feature images are loaded as normal image ('<img>') sources.   #
#                   The remaining images default to a loading image and are replaced by         #
#                   JavaScript after the page loads.                                            #
#  - Load More - After X posts a 'Load More' button is displayed and the remaining posts are    #
#                hidden. Pressing the 'Load More' will unhide X number of posts at a time.      #
#  - Taxonomy Filter - To instantly hide/unhide posts based on their taxonomy classification.   #
#################################################################################################
*/

.mp_clear_floats {
	float:none;
	clear:both;
	width:100%;
	height:1px;
}

/* ### CATEGORY FILTER FOR GRID ### */
#mp_cat_filter_wrapper {
	padding:60px 0px 20px;
	text-align:center;
	background: #00548B;
	background: -moz-linear-gradient(left, #00548B 0%, #38A4DC 100%);
	background: -webkit-linear-gradient(left, #00548B 0%,#38A4DC 100%);
	background: linear-gradient(to right, #00548B 0%,#38A4DC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00548B', endColorstr='#38A4DC',GradientType=1 );
}
#mp_cat_filter {
	display:inline-block;
}
#mp_cat_filter a {
	display:block;
	float:left;
	margin:0px 30px;
	padding:0px;
	cursor:pointer;
}
#mp_cat_filter a .mp_filter_image {
	width:128px;
	height:128px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#mp_cat_filter a .mp_filter_image img {
	display:block;
	width:100%;
	height:100%;
	border-radius:10px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#mp_cat_filter a.mp_inactive .mp_filter_image img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
}
#mp_cat_filter a.mp_active .mp_filter_image img,
#mp_cat_filter a:hover .mp_filter_image img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
}
#mp_cat_filter a h4 {
	padding:10px 0px 0px;
	font-family:'Open Sans';
	font-weight:700;
	font-size:16px;
	line-height:22px;
	color:#ffffff;
	max-width:128px;
}
#mp_view_all_button {
	display:block;
	float:none;
	clear:both;
	margin:5px auto 0px;
	padding:0px 10px;
	width:150px;
	text-align:center;
	font-weight:400;
	font-size:15px;
	line-height:30px;
	color:#60a9d0;
	font-style:italic;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#mp_view_all_button:hover {
	color:#ffffff;
}
@media only screen and (max-width:980px) {
	#mp_cat_filter a { margin:0px 20px; }
}
@media only screen and (max-width:767px) {
	#mp_cat_filter_wrapper { padding:55px 0px 15px; }
	#mp_cat_filter a { margin:0px 10px; }
	#mp_cat_filter a .mp_filter_image { width:110px; height:110px; }
	#mp_cat_filter a h4 { font-size:14px; line-height:18px; max-width:110px; }
	#mp_view_all_button { margin:0px auto;  font-size:14px; }
}
@media only screen and (max-width:399px) {
	#mp_cat_filter a { margin:0px 6px; }
	#mp_cat_filter a .mp_filter_image { width:100px; height:100px; }
	#mp_cat_filter a h4 { font-size:13px; line-height:16px; max-width:100px; }
}

/* ### SORT ORDER LINKS, SEARCH BOX ('AJAX SEARCH LITE' PLUGIN SHORTCODE) & EXTRA CATEGORIES DROPDOWN ### */
#mp_search_sort_wrapper {
	max-width:1140px;
	margin:0px auto;
	padding:60px 20px 0px;
	position:relative
}
/* search box ('ajax search lite') */
#mp_search_sort_wrapper #mp_blog_search {
	position:relative;
	z-index:1;
}
#mp_search_sort_wrapper  #mp_blog_search #ajaxsearchlite1 {
	width:100%;
	background-image:none !important;
	background-color:transparent !important;
}
#mp_search_sort_wrapper #mp_blog_search #ajaxsearchlite1 .probox {
	width:320px;
	float:right;
}
#ajaxsearchliteres1 {
	z-index:99998 !important;
}

#mp_blog_search #ajaxsearchlite1 .probox {
	height:42px !important;
	border-radius:5px !important;
	background-color:#f6f6f6 !important;
	background-image:none !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proinput {
	margin:0px !important;
	padding:0px 5px 0px 15px !important;
	background-color:#f6f6f6 !important;
	background-image:none !important;
	height:42px !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input {
	color:#000000 !important;
	font-family:'Open Sans' !important;
	font-size:14px !important;
	line-height:42px !important;
	height:42px !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .promagnifier,
#mp_blog_search #ajaxsearchlite1 .probox .proclose {
	background-color:#f6f6f6 !important;
	background-image:none !important;
	width:42px !important;
	height:42px !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proclose svg{
	background:#f6f6f6 !important;
	background-image:none !important;
	border-width:0px !important;
	box-shadow:none !important;
	width:30px !important;
	height:30px !important;
	margin-top:-15px !important;
	margin-left:-15px !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input.autocomplete {
	opacity:0 !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proloading {
	width:42px !important;
	height:42px !important;
	padding:5px !important;
}
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input::-webkit-input-placeholder { color:#6c6c6c !important; }
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-moz-placeholder { color:#6c6c6c !important; }
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input::-moz-placeholder {  color:#6c6c6c !important; }
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-ms-input-placeholder { color:#6c6c6c !important; }
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-webkit-autofill,
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-webkit-autofill:hover,
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-webkit-autofill:focus
#mp_blog_search #ajaxsearchlite1 .probox .proinput form input:-webkit-autofill {
	-webkit-box-shadow:0 0 0px 1000px #000000 inset !important;
	-webkit-text-fill-color:#f6f6f6 !important;
}



/* sort order links */
#mp_search_sort_wrapper #mp_sort_order {
	position:relative;
	margin-top:-42px;
	width:200px;
	z-index:1;
}
#mp_search_sort_wrapper #mp_sort_order span  {
	display:inline-block;
	font-weight:500;
	font-size:16px;
	line-height:16px;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#mp_search_sort_wrapper #mp_sort_order span.current {
	margin:13px 20px 6px 0px;
	padding:0px 0px 5px 0px;
	border-bottom:solid 2px #000000;
	cursor:default;
	color:#000000;
}
#mp_search_sort_wrapper #mp_sort_order span.link {
	margin:13px 20px 13px 0px;
	padding:0px;
	color:#b0b0b0;
	cursor:pointer;
}
#mp_search_sort_wrapper #mp_sort_order span.link:hover {
	color:#000000;
}
/* extra categories dropdown */
#mp_search_sort_wrapper #mp_extra_categories_wrap {
	position:absolute;
	top:0px;
	right:360px;
	padding-top:60px;
	z-index:1;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select {
	width:300px;
	float:none;
	margin:0px auto;
	padding-left:15px;
	padding-right:42px;
	background-color:#f6f6f6;
	color:#6c6c6c;
	border-style:none;
	font-size:14px;
	line-height:42px;
	height:42px !important;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select:after {
	right:18px;
	width:8px;
	height:8px;
	margin-top:-7px;
	margin-right:0px;
	border-color:#60a9d0;
	border-width:3px;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul {
	width:300px;
	max-height:280px;
	overflow:auto;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul li {
	font-weight:400;
	font-size:14px;
	line-height:40px;
	min-height:40px;
	color:#6c6c6c;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul li.selected {
	font-weight:400;
	color:#60a9d0 !important;
	background-color:#f6f6f6;
}
#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul li:hover {
	background-color:#f6f6f6;
}
@media only screen and (max-width:999px) {
	#mp_search_sort_wrapper { padding:60px 30px 0px; }
	#mp_search_sort_wrapper #mp_blog_search #ajaxsearchlite1 .probox { width:240px; }
	#mp_search_sort_wrapper #mp_extra_categories_wrap { right:290px; }
	#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select { width:220px; }
	#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul { width:220px; }
	#mp_search_sort_wrapper #mp_sort_order span,
	#mp_search_sort_wrapper #mp_sort_order a { margin-right:15px; }
}
@media only screen and (max-width:767px) {
	#mp_search_sort_wrapper { max-width:360px; padding:112px 0px 0px; }
	#mp_search_sort_wrapper #mp_extra_categories_wrap { top:0px; right:auto; left:0px; padding-top:50px; width:100% }
	#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select { width:100%; }
	#mp_search_sort_wrapper #mp_extra_categories_wrap .nice-select ul { width:100%; }
	#mp_search_sort_wrapper #mp_blog_search #ajaxsearchlite1 .probox { width:100%; }
	#mp_search_sort_wrapper #mp_sort_order { margin-top:20px; width:100%; text-align:center; }
	#mp_search_sort_wrapper #mp_sort_order a,
	#mp_search_sort_wrapper #mp_sort_order span { margin-top:0px; margin-left:10px; margin-right:10px; }
}
@media only screen and (max-width:399px) {
	#mp_search_sort_wrapper { max-width:320px; }
}

/* ### MASONRY GRID ### */
#masonry_posts {
	display:none;
	width:100%;
	max-width:1140px;
	margin:0px auto;
	padding:55px 0px 0px;
	clear:both;
	float:none;
}
#masonry_posts_loading {
	padding:100px 0px 150px;
	text-align:center;
	font-weight:400;
	font-size:20px;
	line-heught:100%;
	color:#c0c0c0;
}
#masonry_posts .mp_item {
	float:left;
	width:33.3333%;
	height:550px;
	overflow:hidden;
	padding:0px 1.6666% 0px;
}
#masonry_posts .mpi_show {
	display:block;
}
#masonry_posts .mpi_hide {
	display:none;
}
#masonry_posts .mpi_wrap {
	padding:0px;
	border:solid 1px #f0f0f0;
	background-color:#ffffff;
}
@media only screen and (max-width:999px) {
	#masonry_posts .mp_item { width:50%; height:560px; padding:0px 2.5% 0px; }
}
@media only screen and (max-width:849px) {
	#masonry_posts .mp_item { height:550px; }
}
@media only screen and (max-width:799px) {
	#masonry_posts .mp_item { height:540px; }
	#masonry_posts { padding:45px 0px 0px; }
}
@media only screen and (max-width:599px) {
	#masonry_posts { max-width:340px; }
	#masonry_posts .mp_item { width:100%; height:auto; overflow:visible; margin:0px 0px 50px; }
}
/* image and image hover overlay (image link, post date, social share icons) */
#masonry_posts .mpi_wrap .mp_imgw {
	position:relative;
}
#masonry_posts .mpi_wrap .mp_imgw img {
	position:absolute;
	top:0px;
	left:0px;
	display:block !important;
	width:100% !important;
}
#masonry_posts .mpi_wrap .mp_imgw .mp_imgo {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#808080;
	cursor:pointer;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap .mp_imgw:hover .mp_imgo {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity:0.9;
	opacity:0.9;
}
/* MAKE IMAGE HOVER WRAPPER A CLICKABLE 'READ MORE' LINK & DISABLE SHARE LINKS - 3 AUG 2019 (START) */
#masonry_posts .mpi_wrap .mp_imgw .mp_imgo > a {
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0);
}
#masonry_posts .mpi_wrap .mp_imgw .mp_imgo > a span {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:10px 15px;
	border:solid 1px rgba(255,255,255,0.5);
	color:#ffffff;
	font-weight:700;
	font-size:12px;
	line-height:12px;
}
/* COMMENT OUT PREVIOUS CSS... */
/*
#masonry_posts .mpi_wrap .mp_imgw .mp_imgo > a {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:auto;
	padding:10px 15px;
	border:solid 1px rgba(255,255,255,0.5);
	background-color:rgba(0,0,0,0);
	color:#ffffff;
	font-weight:700;
	font-size:12px;
	line-height:12px;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap .mp_imgw .mp_imgo > a:hover {
	background-color:rgba(0,0,0,0.2);
}
*/
/* MAKE IMAGE HOVER WRAPPER A CLICKABLE 'READ MORE' LINK & DISABLE SHARE LINKS - 3 AUG 2019 (END) */
/* social share icons */
#masonry_posts .mpi_wrap .mp_imgw .mp_social {
	position:absolute;
	bottom:5px;
	left:5px;
}
#masonry_posts .mpi_wrap .mp_imgw .mp_social a,
#masonry_posts .mpi_wrap .mp_imgw .mp_social span {
	display:inline-block;
	margin-right:2px;
	border:solid 1px rgba(255,255,255,0.5);
	width:26px;
	text-align:center;
	font-size:14px;
	line-height:26px;
	color:#ffffff;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap .mp_imgw .mp_social a:hover,
#masonry_posts .mpi_wrap .mp_imgw .mp_social span:hover {
	background-color:rgba(0,0,0,0.3);
}
/* post date */
#masonry_posts .mpi_wrap .mp_imgw .mp_date {
	position:absolute;
	top:5px;
	right:5px;
	padding:5px;
	border:solid 1px rgba(255,255,255,0.5);
	text-align:center;
	background-color:#60a9d0;
	color:#000000;
	font-size:13px;
	line-height:14px;
}
#masonry_posts .mpi_wrap .mp_imgw .mp_date b {
	display:inline-block;
	font-size:20px;
	line-height:22px;
}

/* category links */
#masonry_posts .mpi_wrap .mp_cats {
	position:relative;
	bottom:auto;
	display:block;
	padding:20px 0px 10px 10px;
}
#masonry_posts .mpi_wrap .mp_cats span {
	display:inline-block;
	margin:0px 5px 5px 0px;
	padding:5px 10px;
	font-size:13px;
	line-height:16px;
	background-color:#60a9d0;
	color:#000000;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap .mp_cats span:hover {
	background-color:#000000 !important;
	color:#ffffff;
}
/* post title, author and excerpt*/
#masonry_posts .mpi_wrap h2.mp_title {
	margin:0px;
	padding:0px 10px 7px;
	font-weight:500;
	font-size:20px;
	line-height:24px;
	max-height:96px; /* max of 4 lines */
	overflow:hidden;
}
#masonry_posts .mpi_wrap h2.mp_title a {
	color:#000000;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap h2.mp_title a:hover {
	color:#60a9d0;
}
#masonry_posts .mpi_wrap .mp_author {
	margin:0px;
	padding:0px 10px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
}
#masonry_posts .mpi_wrap .mp_date {
	margin:0px;
	padding:0px 10px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
}
#masonry_posts .mpi_wrap .mp_excerpt {
	margin:0px;
	padding:0px 10px;
	font-size:14px;
	line-height:20px;
	color:#6c6c6c;
	max-height:120px; /* max of 6 lines */
	overflow:hidden;
}
/* read more button */
#masonry_posts .mpi_wrap .mp_link {
	margin:10px 0px 15px;
}
#masonry_posts .mpi_wrap .mp_link a {
	display:inline-block;
	padding:10px;
	font-weight:400;
	font-size:16px;
	line-height:16px;
	font-style:italic;
	color:#6c6c6c;
	background-color:#ffffff;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#masonry_posts .mpi_wrap .mp_link a:hover {
	color:#60a9d0;
}
/* load more (pagination) button */
#mp_load_more {
	margin:0px auto 30px;
	clear:both !important;
	border:solid 1px #e0e0e0;
	padding:15px 0px;
	width:150px;
	text-align:center;
	font-weight:400;
	font-size:14px;
	line-height:14px;
	color:#6c6c6c;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#mp_load_more:hover {
	border-color:#60a9d0;
	background-color:#60a9d0;
	color:#ffffff;
}
/* sorting posts message */
#masonry_posts > h4 {
	padding:20px 0px 0px;
	text-align:center;
	font-weight:400;
	font-size:18px;
	line-height:24px;
	color:#c0c0c0;
}