/* menu css */

video{
  overflow-x: hidden;
}
    .overlay {
      height: 150%;
      width: 1;
      z-index: 1;
      top: 0;
      left: 0;
      overflow-x: hidden;
      transition: 0.5s;
      text-align: right;
      background-color: black;
    }
      .overlay .header{
        font-size: 50px;
        font-weight: 400;
        padding-top: 100px;
      }
      .overlay .subheading{
        font-size: 22px;
        line-height: 29px;
        }

    .overlay .menu-content-right{
      background-color: black;
      color: white;
      text-align: right;
      line-height: 30px;
      padding-right: 20px;
      padding-bottom: 100px;
    }

    .overlay .menu-content-left{
      background-color: white;
      color: black;
      text-align: left;
      line-height: 30px;
      padding-left: 20px;
      padding-bottom: 100px;
    }


    #full-page-video { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; }
    .close-full-page-video { cursor: pointer; color: white; font-size: 60px; position: absolute; top: 20px; left: 20px; font-weight: 300; }



/*
    <div id="myNav" class="overlay">
  	  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"></a>
  		<div class="container">
  			<div class="row">
  				<div class="col-lg-6">
  					<div class="overlay-content">
  	    			<a href="#">About</a>
  	    			<a href="#">Services</a>
  	    			<a href="#">Clients</a>
  	    			<a href="#">Contact</a>
  	  			</div>
  				</div>
  				<div class="col-lg-6">
  					<div class="overlay-content">
  						<a href="#">About</a>
  						<a href="#">Services</a>
  						<a href="#">Clients</a>
  						<a href="#">Contact</a>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>