<!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 @yield('title')</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">

	@yield('meta')
	
	<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">
	@yield('extra_css')
	<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;
			}
		}

		@if($home->image != '')
			@media (min-width: 400px) {
				.bg-adv
				{
					background-color: white;
				}
				.adv
				{
					background-color: white;
				}
			}
			
			@media (min-width: 1170px) {
				.navbar-nav>li>a {
					padding: 20px 10px 20px 10px;
					z-index: 2;
				}
				#container {
					margin-top:120px;
				}
				.container {
					width: 1040px !important;
				}
				.bg-adv
				{
					/*https://source.unsplash.com/twukN12EN7c/1920x1080*/
					background: url('/files/{{$home->image}}') ;
					background-size: 1920px!important;
					background-repeat: no-repeat;
  					background-attachment: fixed;
  					background-position: top;
				}
				
				.adv
				{
					
					max-width: 1040px;
					padding-right: 5px;
					padding-left: 5px;
					margin-right: auto;
					margin-left: auto;
					/* margin-top: 120px!important; */
					background-color: white;
				}
				
			}
		@endif

		.togglesearch {
			background:#FFFFFF;
			position: absolute;
			top: 0px;
			z-index:99999;
			right: 8%;
			width: 350px;
			height: 60px;
			box-shadow: 0 0 10px rgba(0,0,0,.5);
			
			display: none;
		}
	</style>
</head>
<body class="bg-adv">

	@if(isset($aHome))
		@foreach($aHome as $id => $img)
			<input type="hidden" id="img{{$id}}" value="{{$img["image"]}}">
			<input type="hidden" id="url{{$id}}" value="{{$img["url"]}}">
		@endforeach
	@endif

	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v3.0";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<!-- Container -->
	<div id="container" class="adv">

		@yield('banner_top')

		@include('layouts.header_page')

		@yield('content')

		@yield('banner_bottom')

		

	</div>

	<button onclick="topFunction()" id="btTop" title="Go to top">Top</button>
	<!-- 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">

		var count = 0;
		var max_count = {{sizeof($aHome)}};

		$( document ).ready(function() {

			$(".fa-search").click(function(){
				$(".togglesearch").toggle();
				$("input[type='text']").focus();
			});

			//$('body').css('cursor', 'pointer');
			$('body').click(function(event) {
				if (event.target == event.currentTarget)
				{
					var url = $("#url" + count).val();
					document.location.href = url;
				}
			});
		});

		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 (max_count > 0)
		 {
			setInterval(function(){ 
			
				count = count + 1;
				if (count == max_count)
					count = 0;
				
				var img = $("#img" + count).val();
				$(".bg-adv").css("background-image", "url('/files/" + img + "')");  


			}, 5000);
		}

		$(function () {
			$(document).ready(function(){
				if(window.matchMedia("(max-width: 767px)").matches){
					$(".desktop-advert").remove();
					$(".tablet-advert").remove();		
				} else{
					
				}
			});
			$('.carousel').carousel();
		});

		mybutton = document.getElementById("btTop");

		// When the user scrolls down 20px from the top of the document, show the button
		window.onscroll = function() {scrollFunction()};

		function scrollFunction() {
		if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			mybutton.style.display = "block";
		} else {
			mybutton.style.display = "none";
		}
		}

		// When the user clicks on the button, scroll to the top of the document
		function topFunction() {
		document.body.scrollTop = 0; // For Safari
		document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
		}
		
	</script>

	<script>window.twttr = (function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0],
		  t = window.twttr || {};
		if (d.getElementById(id)) return t;
		js = d.createElement(s);
		js.id = id;
		js.src = "https://platform.twitter.com/widgets.js";
		fjs.parentNode.insertBefore(js, fjs);
	  
		t._e = [];
		t.ready = function(f) {
		  t._e.push(f);
		};
	  
		return t;
	  }(document, "script", "twitter-wjs"));</script>
	  

</body>
</html>