/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}

/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
		overflow: hidden;
	}

	#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: white; /* 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;
	}



	/* 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%;

		/*
		* Preventing flicker on some browsers
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	.section{
		background-size: cover;
	}
	.slide{
		background-size: cover;
	}

	/* Defining each section background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(../img/bg1.jpg);
	}
	#section0 h1{
		top: 50%;
		transform: translateY(-50%);
		position: relative;
	}
	#section2{
		background-image: url(../img/bg3.jpg);
		padding: 6% 0 0 0;
	}
	#section3{
		background-image: url(../img/bg4.jpg);
		padding: 6% 0 0 0;
	}
	#section3 h1{
		color: #000;
	}


	/*Adding background for the slides
	* --------------------------------------- */
	#slide1{
		background-image: url(../img/bg2.jpg);
		padding: 6% 0 0 0;
	}
	#slide2{
		background-image: url(../img/bg5.jpg);
		padding: 6% 0 0 0;
	}


	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}
	#menu li {
		display:inline-block;
		margin: 10px;
		color: #000;
		background:#fff;
		background: rgba(255,255,255, 0.5);
		-webkit-border-radius: 10px;
				border-radius: 10px;
	}
	#menu li.active{
		background:#666;
		background: rgba(0,0,0, 0.5);
		color: #fff;
	}
	#menu li a{
		text-decoration:none;
		color: #000;
	}
	#menu li.active a:hover{
		color: #000;
	}
	#menu li:hover{
		background: rgba(255,255,255, 0.8);
	}
	#menu li a,
	#menu li.active a{
		padding: 9px 18px;
		display:block;
	}
	#menu li.active a{
		color: #fff;
	}
	#menu{
		position:fixed;
		top:0;
		left:0;
		height: 40px;
		z-index: 70;
		width: 100%;
		padding: 0;
		margin:0;
	}