/* RESET */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6,
pre, form, p, blockquote, fieldset, input, abbr, article, aside, command,
details, figcaption, figure, footer, header, hgroup, mark, meter, nav,
output, progress, section, summary, time {margin: 0;padding: 0;}
a{text-decoration: none;}

html {
	margin: 0; padding: 0; border: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

body {
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #030B14;
	color: #fff;
	font-family: "futura-pt", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
}

/*
#grain {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(grain.png);
	background-image: -webkit-image-set( url(grain.png) 1x, url(grain.png) 2x);
	z-index: 10;
	pointer-events: none;
	opacity: 0.5;
}
*/

nav {
	font-size: 13px;
	color: rgba(248, 247, 237, .5);
	text-transform: uppercase;
	padding: 20px;
	text-align: right;
}
nav a {
	color: rgba(248, 247, 237, .5);
	text-decoration: none;
	margin-right: 10px;
}
#center {
	width: 460px;
	height: 460px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 -230px;	
}
#hex {
	position: absolute;
	z-index: 5;
	background-image: url(hex.jpg);
	background-image: -webkit-image-set( url(hex.png) 1x, url(hex_2x.png) 2x);
	width: 471px;
	height: 477px;
}
#shine {
	position: absolute;
	margin-top: 30px;
	background-image: url(hex_shine.png);
	background-image: -webkit-image-set( url(hex_shine.png) 1x, url(hex_shine_2x.png) 2x);
	width: 450px;
	height: 413px;
	opacity: 1;
	transform: rotate(10deg);
	-webkit-animation: shine 10s infinite, rotation 40s infinite;
	-moz-animation:    shine 10s infinite, rotation 40s infinite; 
	-o-animation:      shine 10s infinite, rotation 40s infinite; 
	animation:         shine 10s infinite, rotation 40s infinite; 
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-o-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}

h1 {
	position: absolute;
	bottom: 10%;
	font-size: 25px;
	color: #FFFFFF;
	letter-spacing: 4.84px;
	width: 100%;
	text-align: center;
}




@-webkit-keyframes shine {
  0%   { opacity: 0; }
  100% { opacity: 0.7; }
}
@-moz-keyframes shine {
  0%   { opacity: 0; }
  100% { opacity: 0.7; }
}
@-o-keyframes shine {
  0%   { opacity: 0; }
  100% { opacity: 0.7; }
}
@keyframes shine {
  0%   { opacity: 0; }
  100% { opacity: 0.7; }
}

@-webkit-keyframes rotation {
  0%   { transform: rotate(-60deg); }
  100% { transform: rotate(60deg); }
}
@-moz-keyframes rotation {
  0%   { transform: rotate(-60deg); }
  100% { transform: rotate(60deg); }
}
@-o-keyframes rotation {
  0%   { transform: rotate(-60deg); }
  100% { transform: rotate(60deg); }
}
@keyframes rotation {
  0%   { transform: rotate(-60deg); }
  100% { transform: rotate(60deg); }
}