<?php get_header(); ?>

<div class="aftermenubar"></div>
<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

<?php while ( have_posts() ) : the_post(); 
	break;
	endwhile;
	rewind_posts();
	
?>
<div class="row-fluid">
	<div class="span12"><h1>IN HET NIEUWS</h1><div class="blueline"></div></div>
</div>
<br><br>
<div class="dgreybg" style="background-color: white">
<div class="row-fluid">
<?php 
	$i = 0;
	while ( have_posts() ) : the_post(); 
		$postId = $post->ID;
		$title = get_the_title();
		$image = get_field('afbeelding');
		$author = strtoupper(get_the_author()); 
		$image = get_field('afbeelding');

		if($i >0 && $i % 3 == 0)
			echo '</div><div class="row-fluid">';
		?>		
			<div class="span4 blogitem" style="cursor:pointer" onclick="window.location='<?php the_permalink()?>'">
                <div><img src="<?php echo $image['sizes']['blog-medium']?>" alt="<?php echo $image['alt']?>" width="<?php echo $image['sizes']['blog-medium-width']?>"/></div>
                <div class="blog_title" style="max-width: 290px;<?php if(strlen(get_the_title()) > 20) echo 'top: -80px;';?>"><h2 style="padding-left: 15px;<?php if(strlen(get_the_title()) > 20) echo 'line-height: 35px;'?>"><?php the_title()?></h2></div>
                <div style="position: relative; <?php if(strlen(get_the_title()) > 20) echo 'top: -80px;'; else echo 'top: -50px;';?> color: #333;">
	                <?php the_date('j F Y')?>, Door: <?php the_author()?>
	                <br><br>
                	<em><?php echo substr(strip_tags(get_the_content()), 0, 180).'...'?></em>                		           
		        </div>
           </div>
<?php $i++; endwhile;?> 

	<br>
	<style>
		.pagination a, .pagination .current {background-color: #223a54;color: #ffffff;font-weight: bold;padding: 6px 10px 8px 10px;display: inline-block !important;
			margin-bottom: 3px;list-style: none;font-size: 14px !important; }
		.pagination a:hover, .pagination .current {transition: all 300ms !important; background-color: #ef6530; text-decoration: none;}
		.pagination .next {background-color: none;};
	</style>
	<div class="text-center pagination">
		<?php //echo paginate_links(); ?>
	</div>

</div>
</div>
<script>
	$('.blog_title').mouseenter(function(e){
		e.stopPropagation();
		$(this).css('opacity',1);
	});
	$('.blog_title').mouseleave(function(e){
		e.stopPropagation();
		$(this).css('opacity',0.8);
	});
	setTimeout(function(){
		$('.blog_title').each(function(index){
			if($(this).height() > 70)
				$(this).css('top','-115px');
		});
	}, 500);
</script>	
	




	<?php get_footer(); ?>