<!doctype html>
<html lang="it" class="no-js">
<head>

	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12619965-34"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'UA-12619965-34');
	</script>

	<title>Calcio a 5 Anteprima</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900,400italic' rel='stylesheet' type='text/css'>
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/jquery.bxslider.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/css/owl.theme.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/ticker-style.css"/>
	<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">
	<link rel="stylesheet" type="text/css" href="/css/custom.css" media="screen">

	<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

<style>
		nav#menu-container {

			position:relative;
			width:100%;
			height: 56px;
		}
		#btn-nav-previous {
			text-align: center;
			color: black;
			cursor: pointer;
			font-size: 18px;
			position: absolute;
			left: 0px;

			fill:#FFF;
		}
		#btn-nav-next {
			text-align: center;
			color: black;
			cursor: pointer;
			font-size: 18px;
			position: absolute;
			right: 0px;

			fill:#FFF;
		}
		.menu-inner-box
		{
			width: 90%;
			white-space: nowrap;
			margin: 0 auto;
			overflow: hidden;
			padding: 0px 5px;
			box-sizing: border-box;
		}
		.menu
		{
			padding:0;
			margin: 0;
			list-style-type: none;
			display:block;
			text-align: center;
		}
		a.menu-item
		{
			color:#fff;
			text-decoration:none;
			text-align:center;
			white-space:no-wrap;
		}
		.menu-item:hover {
			text-decoration:underline;
		}


		@media only screen and (max-width: 480px) {
		  #btn-nav-previous {
			display:none;
		  }
		  #btn-nav-next {
			display:none;
		  }
			.menu-inner-box
			{
				width:100%;
				overflow-x:auto;
			}
		}
	</style>
</head>

<body class="bg-adv">
	<a href="{{$home->url}}">
	<!-- Container -->
	<div id="container" class="adv">

		@include('layouts.header')

		<section class="block-wrapper">
			<div class="container">
				<div class="row" style="border-bottom: 1px solid #ccc;">
					<div class="col-sm-8">
						<div class="title-section">
							<h1><span>Primo piano</span></h1>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="title-section">
							<h1><span>Video</span></h1>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-8">

						<!-- block content -->
						<div class="block-content">
							<div class="carousel-box owl-wrapper" >
								@if(isset($home->slide1) && $home->slide1 != '')
									<div class="image-slider snd-size">

										<div class="news-post image-post">
											<span class="top-stories">PRIMO PIANO</span>
											@if($home->slide1->live)
												<span class="top-live">LIVE</span>
											@endif
											<a href="{{$home->slide1->slug}}"><img src="/files/news/{{$home->slide1->image}}" alt=""></a>
											<div class="box-title">
												<div class="inner-hover">
													<h2><a href="/{{$home->slide1->slug}}">{{$home->slide1->title}}</a></h2>
													<ul class="post-tags">
														<li><i class="fa fa-clock-o"></i><span>{{date("d/m/Y", strtotime($home->slide1->date))}}</span></li>
													</ul>
												</div>
											</div>
										</div>

									</div>

								@endif
							</div>
								<div class="row">
									<div class="col-md-6">
										<div class="carousel-box owl-wrapper">
											<div class="image-slider snd-size">
												<ul class="{{$home->hasSlider('left') ? 'bxslider bxsliderLeft' : ''}}">
													@if(isset($home->left1) && $home->left1 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->left1->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->left1->slug}}">{{$home->left1->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->left1->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->left2) && $home->left2 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->left2->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->left2->slug}}">{{$home->left2->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->left2->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->left3) && $home->left3 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->left3->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->left3->slug}}">{{$home->left3->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->left3->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->left4) && $home->left4 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->left4->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->left4->slug}}">{{$home->left4->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->left4->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->left5) && $home->left5 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->left5->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->left5->slug}}">{{$home->left5->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->left5->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
												</ul>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="carousel-box owl-wrapper">
											<div class="image-slider snd-size">
												<ul class="{{$home->hasSlider('right') ? 'bxslider bxsliderRight' : ''}}">
													@if(isset($home->right1) && $home->right1 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->right1->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->right1->slug}}">{{$home->right1->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->right1->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->right2) && $home->right2 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->right2->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->right2->slug}}">{{$home->right2->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->right2->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->right3) && $home->right3 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->right3->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->right3->slug}}">{{$home->right3->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->right3->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->right4) && $home->right4 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->right4->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->right4->slug}}">{{$home->right4->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->right4->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
													@if(isset($home->right5) && $home->right5 != '')
														<li>
															<div class="item news-post standard-post">
																<div class="post-gallery">
																	<img src="/files/news/{{$home->right5->image}}" alt="">
																</div>
																<div class="post-content">
																	<h2><a href="{{$home->right5->slug}}">{{$home->right5->title}}</a></h2>
																	<ul class="post-tags">
																		<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($home->right5->date))}}</li>
																	</ul>
																</div>
															</div>
														</li>
													@endif
												</ul>
											</div>
										</div>
									</div>
								</div>

						</div>
						<!-- End block content -->

					</div>

					<div class="col-sm-4 sidebar">

						<!-- sidebar -->
						<div class="sidebar">
							<!-- slider-caption-box -->
							<div class="slider-caption-box">
								<div class="slider-holder">

									<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 216px;">
										<ul class="slider-call" style="width: 1015%; position: relative; transition-duration: 0s; transform: translate3d(-328px, 0px, 0px);">

										@foreach($videos as $idx => $video)
											<li style="float: left; list-style: outside none none; position: relative; width: 288px;" class="bx-clone">
												<div class="news-post image-post2">
													<div class="post-gallery">
														<img src="/files/videos/{{$video->image}}" alt="">
														<div class="hover-box">
															<div class="inner-hover">
																<a class="video-link" href="{{$video->url}}" style="color:#fff; font-size: 2.5em;"><i class="fa fa-play-circle-o"></i></a>
																<h2><a href="{{$video->url}}" class="video-link">{{$video->title}}</a></h2>
																<ul class="post-tags">
																	<li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($video->date))}}</li>

																</ul>
															</div>
														</div>
													</div>
												</div>
											</li>
										@endforeach


									</ul>
								</div><div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div></div></div>
								</div>



								<div id="bx-pager">

									@foreach($videos as $idx => $video)

										<a data-slide-index="{{$idx}}" href="" class="{{$idx == 0 ? 'active' : ''}}">
											<img alt="" src="/files/videos/{{$video->image}}" class="img-responsive">
										</a>

									@endforeach

								</div>
							</div>
							<!-- End slider-caption-box -->


							@if($home->radio1_file != '' || $home->radio1_url != '' || $home->radio2_file != '' || $home->radio2_url != '' || $home->radio3_file != '' || $home->radio3_url != '')
								<div class="block-content" style="margin-top: 2em;">
									<div class="title-section">
										<h1><span>Web Radio</span></h1>
									</div>
									@if($home->radio1_file != '')
										<audio id="player" src="/files/{{$home->radio1_file}}"></audio>
									@else
										@if($home->radio1_url != '')
											<audio id="player" src="{{$home->radio1_url}}"></audio>
										@else
											@if($home->radio2_file != '')
												<audio id="player" src="/files/{{$home->radio2_file}}"></audio>
											@else
												@if($home->radio2_url != '')
													<audio id="player" src="{{$home->radio2_url}}"></audio>
												@else
													@if($home->radio3_file != '')
														<audio id="player" src="/files/{{$home->radio3_file}}"></audio>
													@else
														@if($home->radio3_url != '')
															<audio id="player" src="{{$home->radio3_url}}"></audio>
														@else
														@endif
													@endif
												@endif
											@endif
										@endif
									@endif

									<div>
									<button class="btn btn-success btn-lg" onclick="document.getElementById('player').play()"><i class="fa fa-play"></i> Play</button>
									<button class="btn btn-danger btn-lg" onclick="document.getElementById('player').pause()"><i class="fa fa-pause"></i> Pause</button>
									<button class="btn  btn-lg" onclick="document.getElementById('player').volume += 0.1"><i class="fa fa-volume-up"></i> +</button>
									<button  class="btn btn-lg" onclick="document.getElementById('player').volume -= 0.1"><i class="fa fa-volume-down"></i> -</button>
									</div>
								</div>
							@endif
							<!-- END Web Radio -->

							<div class="advertisement">
								<div class="desktop-advert">
									@if(isset($home->banner_first) && $home->banner_first != '')
										<a href="{{$home->banner_first_url}}"><img src="/files/{{$home->banner_first}}" alt=""></a>
									@endif
								</div>
								<div class="tablet-advert">
									@if(isset($home->banner_first) && $home->banner_first != '')
										<a href="{{$home->banner_first_url}}"><img src="/files/{{$home->banner_first}}" alt=""></a>
									@endif
								</div>
								<div class="mobile-advert">
									@if(isset($home->banner_first) && $home->banner_first != '')
										<a href="{{$home->banner_first_url}}"><img src="/files/{{$home->banner_first}}" alt=""></a>
									@endif
								</div>
							</div>

						</div>
						<!-- End sidebar -->

					</div>

				</div>

			</div>
		</section>

		@if(false)
			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<ins class="adsbygoogle"
					style="display:inline-block;width:728px;height:90px"
					data-ad-client="ca-pub-0209495346002620"
					data-ad-slot="1234567890"></ins>
				<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		@endif

		<div class="container">
			<div class="advertisement">
				<div class="desktop-advert">
					@if(isset($home->banner_middle) && $home->banner_middle != '')
						<a href="{{$home->banner_middle_url}}"><img src="/files/{{$home->banner_middle}}" alt=""></a>
					@endif
				</div>
				<div class="tablet-advert">
					@if(isset($home->banner_middle) && $home->banner_middle != '')
						<a href="{{$home->banner_middle_url}}"><img src="/files/{{$home->banner_middle}}" alt=""></a>
					@endif
				</div>
				<div class="mobile-advert">
					@if(isset($home->banner_middle) && $home->banner_middle != '')
						<a href="{{$home->banner_middle_url}}"><img src="/files/{{$home->banner_middle}}" alt=""></a>
					@endif
				</div>
			</div>
		</div>


		@yield('content')

		@include('layouts.footer')

	</div>
	</a>
	<!-- End Container -->

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.migrate.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
	<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.ticker.js"></script>
	<script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
  	<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
	<script type="text/javascript" src="js/owl.carousel.min.js"></script>
	<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
	<script type="text/javascript" src="js/plugins-scroll.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<script type="text/javascript">
		function scroll_to(id) {
		$('html,body').animate({
			scrollTop: $('#'+id).offset().top-120
		},'slow');
		}
		$('#btn-nav-previous').click(function(){
			$(".menu-inner-box").animate({scrollLeft: "-=150px"});
		});

		$('#btn-nav-next').click(function(){
			$(".menu-inner-box").animate({scrollLeft: "+=150px"});
		});
		/*setTimeout(function(){
			window.location.reload(1);
		 }, 180000);*/
		 @if($home->url != '')
			$('body.bg-adv').click(function() {
				document.location.href = '{{$home->url}}';
			})
			$('body>*').click(function(e) {
						e.stopPropagation()
			})
		@endif
	</script>

</body>
</html>
