<div class="boxy-clean-template">
<link rel='stylesheet' id='ocmp-blog-fonts-css'  href='https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
{% if (blogs) %} 
	<section class="ocmp-blog-wrap {{ blog_manager_post_list_layout }}">
		<div class="ocmp-blog-content">
			<div class="row">
				 {% set j = 0 %} 
				{% for blog in blogs %} {% set ocmp_class = j%2 == 0 ? 'odd_class' : 'even_class' %} {% set j = j + 1 %} 
					<div class="blog-template ocmp-blog-template blog-wrap {{ ocmp_class }}">
						<div class="col-sm-4 col-xs-12 blog-box">
							<div class="post_wrapper box-blog">
								<div class="post-header">
									<div class="date-wrap">
										{% if (blog_manager_post_date) %}<i class="fa fa-calendar"></i>&nbsp;
											<div class="post-date">
											 
												{% set date = blog['date_publish_2'] %} 
												{{ '<div class="month-day">' }}
												{{ 	' <span class="day">' ~ date|date('d') ~'</span>' }}
												{{ 	' <span class="month">' ~ date|date('M') ~'</span>' }}
												{{ 	' <span class="year">' ~ date|date('Y') ~'</span>' }}
												{{ '</div>' }}
																					
											</div>
										{% endif %}									
										{% if (blog_manager_author_name) %} 
											<span classs="pipe-line">&nbsp;|&nbsp;</span>
											<div class="author" title="{{ blog['author_name'] }}"><i class="fa fa-user"></i> <a href="{{ blog['author_href']}}"> {{ blog['author_name'] }}</a></div>
										{% endif %} 
									</div>
									<div class="ocmp-blog-title">
										<h3 class="text-center"><a href="{{ blog['href'] }}">{{ blog['name'] }}</a></h3> 					
									</div>							
									<div class="post-video-thumb">
										{% if (blog['blog_type'] == 'video') %} 
											<div class="ocmp-blog-youtube">
												<iframe src=""></iframe>
											</div>
										{% else %} 
											<img src="{{ blog['thumb'] }}" alt="{{ blog['name'] }}" title="{{ blog['name'] }}" class="img-responsive" />
										{% endif %}	 
									</div>	
								</div>
								{#if($blog_manager_post_date || $blog_manager_comment_total || $blog_manager_no_views){ ?>
									<div class="date-comment">

										<?php if($blog_manager_comment_total){?>
											<span class="comment-total">
											<i class="fa fa-comment"></i><a href="<?php echo $blog['href']; ?>#comments"><span class="total"><?php echo ($blog['comment'] > 0) ? $blog['comment'] : 0; ?></span></a></span>
										<?php } ?>									
										<?php if($blog_manager_no_views){ ?>
											<span class="comment-total viewed"><i class="fa fa-eye"></i> <?php echo $blog['viewed']; ?></span>
										<?php } ?>
									</div>	
								#}
								<div class="post-content">
									<div class="ocmp-blog-details">
										{% if (blog_manager_show_content_from and blog['short_description'] != '') %} 
											{{ blog['short_description'] }} 
										{% else %}	
											{{ blog['description'] }} 
										{% endif %} 
									</div>
									<div class="overlay"><div class="read_more"><a href="{{ blog['href'] }}"><i class="fa fa-link"></i> &nbsp;{{ text_readmore }}</a></div></div>	
								</div>
								
								<div class="content-footer">
									{% if (blog_manager_post_category) %} 
										<span class="categories"><i class="fa fa-folder"></i> {{ text_categories }} 
											{% set q = 0 %}{% for q in q..categories %} 
												{% if (q < (categories|length) - 1) %} 
													<a href="{{ categories[q]['href'] }}">{{ categories[q]['name'] }}</a>,
												{% else %} 
													<a href="{{ categories[q]['href'] }}">{{ categories[q]['name'] }}</a>
												{% endif %}	
											{% endfor %} 
										</span>
									{% endif %}		
									{% if (blog_manager_post_tag) %} 
										{% if (blog['tags']) %} 
											<span class="tags"><i class="fa fa-tags"></i> {{ text_tags }} 
												{% set i = 0 %}{% for i in i..blog %} 
												{% if (i < (blog['tags']|length) - 1) %} 
												<a href="{{ blog['tags'][i]['href'] }}">{{ blog['tags'][i]['tag'] }}</a>,
												{% else %} 
												<a href="{{ blog['tags'][i]['href'] }}">{{ blog['tags'][i]['tag'] }}</a>
												{% endif %} 
												{% endfor %} 
											</span>
										 {% endif %} 
									{% endif %}		
								</div>
								{% if (blog_manager_show_social_link) %} 
									<div class="social-component default_social_style_1 bottom">
										{% if (blog_manager_facebook_status) %} 
											<div class="social-share">
											  <a href="https://www.facebook.com/sharer/sharer.php?u={{ blog['href'] }}" target= _blank class="ocmp-facebook-share ocmp-social-share"><i class="fa fa-facebook"></i></a>
											</div>  
										{% endif %} 
										{% if (blog_manager_twitter_status) %} 
											<div class="social-share">
											   <a href="https://plus.google.com/share?url={{ blog['href'] }}" target="_blank" class="ocmp-google-share ocmp-social-share"><i class="fa fa-twitter"></i></a>
											 </div>
										{% endif %} 
										{% if (blog_manager_google_status) %} 
											<div class="social-share">
											 <a href="https://twitter.com/share?text={{ blog['name'] }}&url={{ blog['href'] }}" target="_blank" class="ocmp-twitter-share ocmp-social-share"><i class="fa fa-google"></i></a>
											</div>
										{% endif %} 
										{% if (blog_manager_linkedin_status) %} 
											<div class="social-share">
											  <a href="https://www.linkedin.com/shareArticle?url={{ blog['href'] }}" target="_blank" class="ocmp-linkedin-share ocmp-social-share"><i class="fa fa-linkedin"></i></a>
											</div>
										{% endif %} 
										{% if (blog_manager_pintrest_status) %} 
											<div class="social-share">
												<a href="//pinterest.com/pin/create/button/?url={{ blog['href'] }}&media={{ blog['image'] }}&description={{ blog['name'] }}" target="_blank" class="ocmp-pinterest-share ocmp-social-share"><i class="fa fa-pinterest"></i></a>
											</div>	
										{% endif %} 
										{% if (blog_manager_tumblr_status) %} 
											<div class="social-share">
											 <a href="http://www.tumblr.com/share/link?url={{ blog['href'] }}&amp;title={{ blog['name'] }}" target="_blank" class="ocmp-tumblr-share ocmp-social-share"><i class="fa fa-tumblr"></i></a>
											</div>
										{% endif %} 
									</div>
								{% endif %} 
							
						</div>	
					</div>
				{% endfor %} 
			</div>
		</div>
	</section>	
	<div class="row">
		<div class="ocmp-padination-box">
			<div class="col-sm-6 text-left">{{ pagination }}</div>
			<div class="col-sm-6 text-right">{{ results }}</div>
		</div>	
	</div>
{% endif %} 
{% if (not blogs) %}	
	<div class="buttons">
		<div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
	</div>
{% endif %} 
<style>
.blog-template.ocmp-blog-template h3.ocmp-blog-title a{
	{% if (blog_manager_post_title_background_color) %} 
		background:  {{ blog_manager_post_title_background_color }};
	{% endif %}	
	{% if (blog_manager_post_title_color) %} 
	color:  {{ blog_manager_post_title_color }};
	{% endif %}	
}
.blog-template.ocmp-blog-template .content-area, 
.blog-template.ocmp-blog-template .content-area .ocmp-blog-desc{
	{% if (blog_manager_post_content_color) %} 
	color:  {{ blog_manager_post_content_color }};
	{% endif %}	
}
{% if (blog_manager_alternative_bg_color) %} 
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .ocmp-padination-box .pagination > li > a:hover{
	{% if (blog_manager_alternative_bg_hover_color) %} 
	background-color:{{ blog_manager_alternative_bg_hover_color }};
	border:1px solid {{ blog_manager_alternative_bg_hover_color }};
	{% endif %} 
}
{% endif %} 
.glossary_template{
	{% if (blog_manager_alternative_bg_color) %} 
	background:{{ blog_manager_alternative_bg_color }};
	{% endif %} 
}
.author a, .ocmp-blog-template.blog-wrap .comment-total a,.ocmp-blog-template.blog-wrap .posted_by a,
.ocmp-blog-template .categories a,
.ocmp-blog-template .tags a{
	{% if (blog_manager_alternative_link_color) %} 
	color:{{ blog_manager_alternative_link_color }};
	{% endif %} 
}
.author:hover a, .ocmp-blog-template.blog-wrap .comment-total a:hover, 
.ocmp-blog-template.blog-wrap .posted_by a:hover,
.ocmp-blog-template .categories a:hover,
.ocmp-blog-template .tags a:hover{
	{% if (blog_manager_alternative_hover_color) %} 
	color:{{ blog_manager_alternative_hover_color }};
	{% endif %} 
}

.ocmp-blog-template.blog-wrap .read_more a, .ocmp-blog-template.blog-wrap .read_more i{
	{% if (blog_manager_post_readmore_bg_color) %} 
	background:{{ blog_manager_post_readmore_bg_color }};
	{% endif %} 
	{% if (blog_manager_post_readmore_text_color) %} 
	color : {{ blog_manager_post_readmore_text_color }};
	{% endif %} 
}
.ocmp-blog-template.blog-wrap .read_more a:hover, .ocmp-blog-template.blog-wrap .read_more a:hover i{
	{% if (blog_manager_post_readmore_bg_hover_color) %} 
	background:{{ blog_manager_post_readmore_bg_hover_color }};
	{% endif %} 
	{% if (blog_manager_post_readmore_text_hover_color) %} 
	color:{{ blog_manager_post_readmore_text_hover_color }};
	{% endif %} 
}


{% if (blog_manager_alternative_text_color) %} 
.ocmp-blog-template .ocmp-blog-desc, .comment-total, .viewed, .post-date, .posted_by, .categories, .tags{
	color: {{ blog_manager_alternative_text_color }} 
}
{% endif %} 

{% if (blog_manager_social_link_bg_color) %} 
.social-component .social-share a{
  background-color :  {{ blog_manager_social_link_bg_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_color) %} 
.social-component .social-share a{
  color :  {{ blog_manager_social_link_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_hover_color) %} 
.social-component .social-share a:hover{
  color :  {{ blog_manager_social_link_hover_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_hover_bg_color) %} 
.social-component .social-share a:hover{
  background-color :  {{ blog_manager_social_link_hover_bg_color }};
}  
{% endif %} 
</style>
<script>
 var blog_box_height = $('.blog-box').outerHeight();
 $('.blog-box').css('min-height', blog_box_height + 30);
</script>
</div>