<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
	<!DOCTYPE html>
	<html lang="pt">
	<head>
<?php $this->load->view('includes/header',isset($data) ? $data : NULL);?>		

	</head>
	<body>
<?php $this->load->view('includes/top',isset($data) ? $data : NULL);?>	

<div class="xs-spacer30 sm-spacer30">
</div>




<div class="home">
<div class="mod-banner">





<div id="banner">

         <style>
         #homepage_slider video { 
    min-height: 100% !important;
    min-width: 100% !important;
	height: auto !important;
    width: auto !important;
	overflow: hidden;
}

#homepage_slider img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.carousel-inner>.item>img {
  display: block;
  line-height: 1;
}

/* button to display if user choses to not autoplay the video: */
#slider-play-button button { 
	display: inline-block;
	border: 0.06666em solid #fff;
	font-size: 2rem;
	background: rgba(255,255,255,0.23);
	color: #fff;
	cursor: pointer;
	transition: .3s background;
	line-height: 1.3em;
	height: 1.5em;
	width: 2.5em;
	border-radius: 0.3em;
	position: absolute;
	opacity: .7;
	right: 1em;
	top: 20%;
}
.play-video-button:before {
	font-family: FontAwesome;
	content: "\f04b";
}
.pause-video-button:before {
	font-family: FontAwesome;
	content: "\f04c";
}  
</style>
<!-- Slider begins here -->
<div id="homepage_slider" class="carousel slide hidden-xs">

			  
  <!-- Carousel items -->
<div class="carousel-inner">
		<!-- slide #1 -->
		<div data-slide="0" class="item active">
			<div class="slider-hide-on-mobile">
<h1 class="slice" style="position: absolute;top:150px;left: 25px">
<span>MXGP OF TURKEY 2018</span>
</h1>	


<h1 class="slice" style="position: absolute;top:250px;right: 25px">
<span>01-02 September</span>
</h1>

<!--
<a href="/hotels/" class="btn btn-default slice hidden-xs"  style="position: absolute;top:350px;left: 25px">
<span>Hotels</span>
</a>-->			
				<video title="MXGP TURKEY" id="bgvid" autoplay loop muted poster="/assets/images/banner.jpg"><source src="/assets/videos/afyon_mxgp_turkey_2018.mp4" type="video/mp4">Your browser does not support the video tag.</video>
			</div>
	</div>
			  			  

 
  </div> <!-- end of '.carousel-inner' -->

	<!-- Carousel nav -->
<!-- 	<div id="slider-play-button"><button class="play-video-button" type="button" title="Play Video"></button></div> -->
	
  </div> <!-- end of '#homepage_slider' -->
  <!-- Slider ends here -->
 

</div>  <!-- end of "#banner" -->
  


<script>
	// without this script, the slider doesn't start on it's own:
  !function ($) {
    $(function(){
      $('#homepage_slider').carousel()
    })
  }(window.jQuery)


// if user chooses to not autoplay the video, the button should be uncommented in html and this script will make the button work:
var vid = document.getElementById("bgvid");
var playButton = document.querySelector("#slider-play-button button");

playButton.addEventListener("click", function() {
  if (vid.paused) {
    vid.play();
	playButton.classList.remove("play-video-button");
    playButton.classList.add("pause-video-button");
  } else {
    vid.pause();
	playButton.classList.add("play-video-button");
    playButton.classList.remove("pause-video-button");
  }
});
</script>







</div>


<div class="xs-spacer120 sm-spacer120 visible-xs">
</div>


<div class="mod-path">
<div class="container-fluid">



<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 xs-tacenter sm-tacenter">
<h1 class="slice">
<span>Afyon <small style="color: #ffffff"> Type of soil: Hard pack</small> </span>
</h1>
</div>
</div>
<div class="xs-spacer30 sm-spacer30">
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 sm-tacenter">


<p>
<img alt="path map MXGP" src="/assets/images/turkey-1040x692.jpg" />
</p>



</div>
</div>
<div class="xs-spacer60 sm-spacer120">
</div>
</div>
</div>
<div class="mod-counts">
<div class="container-fluid">
<div class="xs-spacer60 sm-spacer120">
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row sm-tacenter">
<div class="col-xs-12 col-sm-4 col-md-4 xs-tacenter">
<h2 id="countUp-val1" class="val1">1650</h2>
<h3>
<i>meter track</i>
</h3>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 xs-tacenter">
<h2 id="countUp-val2" class="val2">30000</h2>
<h3>
<i>visitors</i>
</h3>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 xs-tacenter">
<h2 id="countUp-val3" class="val3">220</h2>
<h3>
<i>riders</i>
</h3>
</div>
</div>
</div>
</div>
<div class="xs-spacer60 sm-spacer120">
</div>
</div>

</div>


</div>

	<?php $this->load->view('includes/footer',isset($data) ? $data : NULL);?>	


	</body>
	</html>