@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);

*{margin:0; padding:0; box-sizing:border-box ;}
html, body, #info {width:100%; height:100% ;}

body { position: relative; overflow: hidden; background-color: rgb(2,3,3); }

h1{
	  display:inline;
	  position:absolute;
	  top:50%; left:50%;
	  margin:-50px 0 0 -215px;
	  letter-spacing:-3px;
	  font:300 72px/1.4 'Open sans',Helvetica;
	  color:#c0c0c0;
	  cursor:default;
	  transition:margin 330ms linear;
}

#menu{
	  display:block;
	  width:26px; height:20px;
	  position:relative;
	  top:310px;
	  z-index:3;
	  margin:0 auto;
	  padding-top:2px;
	  border-radius:3px;
	  cursor:pointer;
}

#menu>span{display:block; width:26px; height:2px; position:relative; margin:0 auto; border-radius:1px; background:#d0d0d0; transition:all 300ms ease-out;}
#menu span+span{margin-top:5px;}
.two{opacity:1;}

#info{position:absolute; top:100%; left:0; color:#ccc;transition:top 300ms linear;}
#info div { width:100%; position:absolute; top:50%; left:0; margin:-16px 0 0 0; text-align:center; }
#info span{display:block; letter-spacing:1px; font:300 16px/16px 'Open sans',Helvetica;}
#info span:not(:first-child){margin-top:15px;}
#info span:nth-child(2) { margin-top: 35px; }
#info em{font-style:normal; color:#454545; margin-right:2px;}

.close .one{top:7px; transform:rotate(405deg) translate3d(0,0,0);}
.close .two{opacity:0; transform:rotate(720deg) translate3d(0,0,0); transition-duration:0ms;}
.close .thr{top:-7px; transform:rotate(315deg) translate3d(0,0,0);}

.info h1{margin-top:-136px;}
.info #info{top:0;}