<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>FOMO Coffee</title>
	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
	<link rel="stylesheet" type="text/css" href="examples.css" />
	<style>
	/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 8em;
		font-family:"Trebuchet MS", arial, helvetica;
		font-weight: 400;
		color: #fff;
		margin:0;
		padding:0;
	}
	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}
	#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:3;
	}
	/* Backgrounds will cover all the section
	* --------------------------------------- */
		/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#section0 .layer{
		position: absolute;
		z-index: 4;
		width: 100%;
		left: 0;
		top: 43%;
	}
	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
	}
	#section0,
	#section1,
	#section2,
	#section3{
		background-size: cover;
	}
	/* Defining each section background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(coffeePour.png);
		padding: 12% 0 0 0;
	}
	#section2{
		background-image: url(http://www.memphisdailynews.com/Editorial_Images/20436.jpg);
		padding: 45% 0 0 0;
	}
 	/*Adding background for the slides
	* --------------------------------------- */
	#slide1{
		background-image: url(greenCoffee.png);
		background-size: contain;
		padding: 6% 0 0 0;
	}
	#slide2{
		background-image: url(letItRoast.png);
		background-size: contain;
		padding: 12% 0 0 0;
	}
	#slide3{
		background-image: url(coffeePour.png);
		background-size: contain;
		padding: 6% 0 0 0;
	}
	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}
	</style>

	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

	<script type="text/javascript" src="jquery.fullPage.js"></script>

	<script type="text/javascript" src="examples.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				verticalCentered: false,
				afterRender: function(){
					//playing the video
					$('video').get(0).play();
				}
			});
		});
	</script>

</head>
<body>


<div id="fullpage">
	<div class="section " id="section0">
		<video autoplay loop muted controls="false" id="myVideo">
			<source src="coffeeRoastLow.mp4" type="video/mp4">
		</video>
		<div class="layer">
			<h1>Fomo Coffee</h1>
		</div>
	</div>
	<div class="section" id="section1">
	    <div class="slide" id="slide1"><h1>Import Beans</h1></div>
	    <div class="slide" id="slide2"><h1>Let it Roast</h1></div>
	    <div class="slide" id="slide3"><h1>Drip Coffee</h1></div>
	</div>
	<div class="section" id="section2"><h1>FOMO's Future</h1></div>
</div>

</body>
</html>

</html>