#NextPrevPosts {
	white-space: nowrap;
}
#NextPrevPosts .arrow {
	/*padding: 20px;*/
	width: 70px;
	height: 100px;
	background: #F5F7FA;
	display: inline-block;
	z-index: 1003;
}
#NextPrevPosts .arrow>a {
	display:inline-block;
	width:100%;
	height:100%;
	padding: 20px;
}
#NextPrevPosts .prev .arrow { float: left; }
#NextPrevPosts .next .arrow { float: right; }

#NextPrevPosts .next svg, #NextPrevPosts .prev svg {
	width: 25px;
	height: 60px;
}

#NextPrevPosts .next, #NextPrevPosts .prev {
	position: fixed;
	top: 50%;
	margin-top: -50px;
	padding: 0px;
	height: 100px;
	background: white;
	width: 70px;
	overflow: hidden;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	white-space: nowrap !important;
	z-index: 909;
  	/*cursor: pointer;*/
}
#NextPrevPosts .prev {
	left: 0 !important;
	-webkit-box-shadow: 5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow:    5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	box-shadow:         5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	text-align: left !important;
	height: 100px;
	max-height: 100px;
	
}
#NextPrevPosts .next {
	right: 0 !important;
	-webkit-box-shadow: -5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow:    -5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	box-shadow:         -5px 0px 20px 0px rgba(50, 50, 50, 0.1);
	text-align: right !important;
	height: 100px;
	max-height: 100px;

}



#NextPrevPosts .preview { height: 100px; width: 370px; position: relative; display: inline-block; z-index: -1; position: absolute; top: 0;}
#NextPrevPosts .preview:after { content: ''; display: block; clear: both;}

#NextPrevPosts .next .preview { float: right; right: 70px;}
#NextPrevPosts .prev .preview { float: left; left: 70px;}

#NextPrevPosts .preview .featuredImg {
	width: 100px; height: 100px;
	/*background: url(http://lorempixel.com/100/100/) center center no-repeat;*/
	background-size: cover !important;
	z-index: 1002; top: 0;
	
}
#NextPrevPosts .next .preview .featuredImg { float: right !important;}
#NextPrevPosts .prev .preview .featuredImg { float: left !important;}

#NextPrevPosts .preview .preview-content {
	width: 270px; height: 100px; display: table; vertical-align: middle;
	position: absolute; white-space: normal !important;
	z-index: -1; top: 0;
	
	zoom: 1;
	filter: alpha(opacity=30);
	opacity: 0.3;
}


#NextPrevPosts .next .preview:not(.no-pic) .preview-content { right: 100px; float: right;}
#NextPrevPosts .prev .preview:not(.no-pic) .preview-content { left: 100px;float: left;}

#NextPrevPosts .preview .preview-content span, #NextPrevPosts .preview .preview-content p {margin: 0; padding: 0;}
#NextPrevPosts .preview .preview-content span { color: #434A54; line-height: 1.25; font-size: 18px; margin: auto; display: table-cell; vertical-align: middle; font-weight: 300 !important; padding: 15px 20px;}





#NextPrevPosts .prev .preview .featuredImg { margin-left: -100px;}
#NextPrevPosts .prev .preview .preview-content { margin-left: -370px;}

#NextPrevPosts .next .preview .featuredImg { margin-right: -100px;}
#NextPrevPosts .next .preview .preview-content { margin-right: -370px;}


#NextPrevPosts .next .preview .featuredImg, #NextPrevPosts .next .preview .preview-content,
#NextPrevPosts .prev .preview .featuredImg, #NextPrevPosts .prev .preview .preview-content {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#NextPrevPosts .next:hover, #NextPrevPosts .prev:hover {
	width: 440px;
}
#NextPrevPosts .next:hover .preview .featuredImg, #NextPrevPosts .next:hover .preview .preview-content,
#NextPrevPosts .next:focus .preview .featuredImg, #NextPrevPosts .next:focus .preview .preview-content,
#NextPrevPosts .next:active .preview .featuredImg, #NextPrevPosts .next:active .preview .preview-content,

#NextPrevPosts .prev:hover .preview .featuredImg, #NextPrevPosts .prev:hover .preview .preview-content,
#NextPrevPosts .prev:focus .preview .featuredImg, #NextPrevPosts .prev:focus .preview .preview-content,
#NextPrevPosts .prev:active .preview .featuredImg, #NextPrevPosts .prev:active .preview .preview-content {
	margin-left: 0; margin-right: 0;
	zoom: 1;
	filter: alpha(opacity=100);
	opacity: 1;
}
@media only screen and (max-width: 768px) {
	#NextPrevPosts {
		display:none;
	}
}