@charset "utf-8";
/* CSS Document */

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  left: 0;
	top:0;
	text-align: center;
	padding:5% 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f2f2f2;
  width: 100%;
  height:100%;
}

h1{font-size: 10em;text-transform: uppercase;font-family: "Roboto", sans-serif; font-weight: 700;line-height: 1em;}

p{font-size: 1.5em;font-family: "Roboto", sans-serif; font-weight: 500;line-height: 1.5em;padding:0 20%;margin-top:-5%;}

ion-icon{font-size: 4.5em;position: fixed;center: 0;bottom:5%;}
ion-icon:hover{transform: scale(1.5);transition: all 0.6s ease;cursor: pointer;}

/* ----------- NAVIGATION ----------- */

.header{background-color:transparent;position:absolute;width:100%;z-index: 1;}

nav{margin:auto;}
nav img{width:18%;padding:1% 5%;}
nav img:hover{padding:1% 7%;transition: all 0.6s ease;}

.header ul{list-style:none;overflow:hidden;padding-right:5%;background:#f2f2f2;}
.header ul a{display:block;padding:20px;font-size:2em;text-decoration:none;color:#1a1a1a;}
.header ul a:hover{background:#1a1a1a;color:#f2f2f2;transition: all 0.6s ease;}

.header .menu-icon{padding: 28px 20px;position:relative;float:right;cursor: pointer;}
.header .menu-icon .nav-icon{background:#f2f2f2;display:block;height:2px;width:18px;position:relative;transition:background .2s ease-out;}
.header .menu-icon .nav-icon:before{background:#f2f2f2;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:5px;}
.header .menu-icon .nav-icon:after{background:#f2f2f2;content:"";display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out;top:-5px;}

.header .menu-btn{display:none;}
.header .menu-btn:checked ~ .menu{max-height:300px;}
.header .menu-btn:checked ~ .menu-icon .nav-icon{background:transparent;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{transform: rotate(-45deg);top:0;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{transform: rotate(45deg);top:0;}

.header .menu{clear:both;max-height:0;transition:max-height .2s ease-out;text-align: right;font-weight: bold;}