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

	.owl-carousel .owl-wrapper {
	}

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

	#challenges-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="challenges-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) {
				?>
				<div class="post-slide" style="overflow:hidden;">
					<div class="post-img" style="display:nonex; overflow:hidden; z-index:9999999999999;
						background: url(/<?= $challenge['main_img'] ?>) center center no-repeat; background-size:cover;">
						<!--<img src="/<?= $leaderboard['main_img'] ?>" alt=""
						style="overflow:hidden; z-index:-9;" />-->
						<?= substr($challenge['title'],0,20) . '...'; ?>
						<a href="/challenge/<?= $challenge['id'] ?>" class="over-layer">
							<i class="fa fa-link"></i></a>
					</div>
					<div class="post-content" style=" display:none; overflow:hidden;">
						<h2 class="post-title">
							<a href="#">Lorem ipsum dolor sit amet.</a>
						</h2>
						<!--<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>
				<?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 () {
		$("#challenges-slider").owlCarousel({
			items: 4,
			itemsDesktop: [1199, 4],
			itemsDesktopSmall: [980, 2],
			itemsMobile: [600, 1],
			navigation: true,
			navigationText: ["", ""],
			pagination: true,
			autoPlay: true });
	});
</script>