<style>
	body {
		background-color: #f1f6ff;
	}

	.owl-carousel .owl-wrapper {
	}

	.owl-carousel .owl-item {
		width: 300px !important;
		max-width: 300px !important;
	}

	#news-slider {
		margin-top: 0px;
		width: 100%;
		background: yellow;
		margin: 0;
	}

	.post-slide {
		background: none;
		margin: 20px 15px 20px;
		border-radius: 15px;
		-moz-border-radius:15px; 
		-webkit-border-radius:15px;
		padding-top: 1px;
		max-height:163px;
		overflow:hidden;
		/*box-shadow: 0px 14px 22px -9px #bbcbd8;*/
	}
	.post-slide h2 {
		color: #FFF;
		text-align: center;
		padding: 0;
		margin: 0;
		font-style: italic;
		font-weight: 300;
	}
	.post-slide .post-img {
		background: #2b82be;
		width:270px;
		min-height:163px;
		line-height:163px;
		position: relative;
		overflow: hidden;
		border-radius: 10px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		/*    margin: -12px 15px 8px 15px;
		margin-left: -10px;*/
		text-align: center;
		color: #fff;
		font-size: 22px;
		font-weight:600;
/*		vertical-align: middle;
		line-height: normal;
		display: inline-block;*/
	}
/*	.post-slide .post-img .postcontent {
		display: inline-block;
		vertical-align: middle;
		line-height: normal;	
		background:red;	
	}*/
	.post-slide .post-img:hover {
		background: linear-gradient(-45deg, rgba(6, 190, 244, 0.75) 0%, rgba(45, 112, 253, 0.6) 100%);
		transition: all 0.50s linear;
	}
	.post-slide .post-img span {
		display: inline-block;
		vertical-align: middle;
		line-height: normal;
	}

	.post-slide .post-img img {
		width: 300px;
		height: auto;
		transform: scale(1, 1);
		transition: transform 0.2s linear;
	}

	.post-slide:hover .post-img img {
		transform: scale(1.1, 1.1);
	}

	.post-slide .over-layer {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		background: linear-gradient(-45deg, rgba(6, 190, 244, 0.75) 0%, rgba(45, 112, 253, 0.6) 100%);
		transition: all 0.50s linear;
	}

	.post-slide:hover .over-layer {
		opacity: 1;
		text-decoration: none;
	}

	.post-slide .over-layer i {
		position: relative;
		top: 45%;
		text-align: center;
		display: block;
		color: #fff;
		font-size: 25px;
	}

	.post-slide .post-content {
		/*background: #fff;*/
		padding: 2px 20px 40px;
		border-radius: 15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		width:270px;
		min-height:163px;
		line-height:163px;
		max-height:163px;
		overflow:hidden;
	}

	.post-slide .post-title a {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		display: inline-block;
		text-transform: uppercase;
		transition: all 0.3s ease 0s;
	}

	.post-slide .post-title a:hover {
		text-decoration: none;
		color: #3498db;
	}

	.post-slide .post-description {
		line-height: 24px;
		color: #808080;
		margin-bottom: 25px;
	}

	.post-slide .post-date {
		color: #a9a9a9;
		font-size: 14px;
	}

	.post-slide .post-date i {
		font-size: 20px;
		margin-right: 8px;
		color: #CFDACE;
	}

	.post-slide .read-more {
		padding: 7px 20px;
		float: right;
		font-size: 12px;
		background: #2196F3;
		color: #ffffff;
		/*box-shadow: 0px 10px 20px -10px #1376c5;*/
		border-radius: 25px;
		-moz-border-radius:25px;
		-webkit-border-radius:25px;
		text-transform: uppercase;
	}

	.post-slide .read-more:hover {
		background: #3498db;
		text-decoration: none;
		color: #fff;
	}
	
	a.over-layer {
		color: #fff !important;
		font-weight:600;
		position: relative;
		/*top: 45%;*/
		text-align: center;
		display: block;
		font-size: 25px;
		line-height:153px;
	}
	
	.owl-controls .owl-buttons {
		text-align: center;
		margin-top: 20px;
	}

	.owl-controls .owl-buttons .owl-prev {
		background: none;
		position: absolute;
		top: 43%;
		left: 15px;
		padding: 0 18px 0 15px;
		border-radius: 50px;
		-moz-border-radius:50px;
		-webkit-border-radius:50px;
		/*box-shadow: 3px 14px 25px -10px #92b4d0;*/
		transition: background 0.5s ease 0s;
	}

	.owl-controls .owl-buttons .owl-next {
		background: none;
		position: absolute;
		top: 43%;
		right: 15px;
		padding: 0 15px 0 18px;
		border-radius: 50px;
		/*box-shadow: -3px 14px 25px -10px #92b4d0;*/
		transition: background 0.5s ease 0s;
	}

	.owl-controls .owl-buttons .owl-prev:after,
	.owl-controls .owl-buttons .owl-next:after {
		content: "\f104";
		font-family: FontAwesome;
		color: #fff;
		font-size: 30px;
	}

	.owl-controls .owl-buttons .owl-next:after {
		content: "\f105";
	}

	@media only screen and (max-width:1280px) {
		.post-slide .post-content {
			padding: 0px 15px 25px 15px;
		}
	}
</style>

<script type='text/javascript' src=''> </script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'> </script>
<script type='text/javascript' src=''> </script>

<!--<body oncontextmenu='return false' class='snippet-body'>-->
<!--<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

<div class="container-fluid" style="background:none; width:100%; margin:0; padding:0;">
	<div class="row"  style="background:none; width:100%; margin:0; padding:0;">
		<div class="col-md-12"  style="background:none; width:100%; margin:0; padding:0;">
			<div id="news-slider" class="owl-carousel"  style="background:none; width:100%; margin:0; padding:0;">
				<!--<div style="font-weight:300; font-size:14px;"></div>-->
				<?php
				foreach ($challenges as $challenge) {
				?>
				<a href="/ft/<?= $challenge['id'] ?>"><div class="post-slide" style="overflow:hidden; position:relative">
					
					<div class="post-img" style="display:nonex; overflow:hidden; z-index:9999999999999;
						background: url(/static/collections/<?= $challenge['images'] ?>) center center no-repeat; background-size:cover;">
						<!--<img src="/<?= $leaderboard['main_img'] ?>" alt="" 
						style="overflow:hidden; z-index:-9;" />-->
						
					</div>
					<!--  z-index:99999999999999 -->
					<div style="background:rgba(0,0,0,.4); width:100%; height:100%; display:block;
					position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999999999"></div>
					
					<!--<?= substr($challenge['shorttitle'],0,20) . '...'; ?>
					<a href="/ft/<?= $challenge['id'] ?>" class="over-layer">
						<i class="fa fa-link"></i></a>-->
						<div class="post-content" style="width:100%; height:100%; display:block;
							position:absolute; display:nonex; overflow:hidden; color:#fff;
						z-index:99999999999; top:0; right:0; bottom:0; left:0;  font-size:22px">
<!--						<h2 class="post-title">
							<a href="#">Lorem ipsum dolor sit amet.</a>
						</h2>-->
						<?= substr($challenge['shorttitle'],0,20) . '...'; ?>
						<!--<p class="post-description">Lorem ipsum dolor sit amet, consectetur 
						adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa 
						laudantium necessitatibus neque quae tempora......</p>
						<span class="post-date">
							<i class="fa fa-clock-o"></i>Out 27, 2019</span>
						<a href="#" class="read-more">read more</a>-->
					</div>
				</div></a>
				<?php
				}
				?>  
				<!-- CONTENT DIV STYLE -->
<!--				<div class="post-slide">
					<div class="post-img">
						<span>
							#1
							<div style="font-weight:300;">@kdavis</div>
							<div style="font-weight:300; font-size:14px;">Score: 4 | Time: 2:14</div>
						</span>
					</div>
				</div>-->
				
<!--				<div class="post-slide">
					<div class="post-img">
						<img src="https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=503" alt="">
						<a href="#" class="over-layer">
							<i class="fa fa-link"></i></a>
					</div>
					                   <div class="post-content">
					<h3 class="post-title">
					<a href="#">Lorem ipsum dolor sit amet.</a>
					</h3>
					<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
					<span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
					<a href="#" class="read-more">read more</a>
					</div>
				</div>-->
			</div>
		</div>
	</div>
</div>
<!--<script src='https://code.jquery.com/jquery-1.12.0.min.js'> </script>-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'> </script>

<script type='text/javascript'>$(document).ready(function () {
		$("#news-slider").owlCarousel({
			items: 4,
			itemsDesktop: [1199, 4],
			itemsDesktopSmall: [980, 2],
			itemsMobile: [600, 1],
			navigation: true,
			navigationText: ["", ""],
			pagination: true,
			autoPlay: true });
	});
</script>