/* Font Styles */
body {font-family:'Poiret One', sans-serif;}
h1,h2,h3,h4 {font-family:'Alegreya Sans SC', sans-serif;}
h1 {letter-spacing:4px;}
#firstHeader {
    display: block;
    vertical-align: inherit;
    line-height: 1.4;
    margin: 0 auto;
    padding: 20rem 0;
    margin-top: 0;
}

/* Font classes */
.t-center {text-align:center;}
.t-left {text-align:left;}
.t-right {text-align:right;}
.t-justify {text-align:justify;}

.t-small {font-size:0.65em;}
.t-uppercase {text-transform:uppercase;}


/* Page, Container, Misc */
.pageOne {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000194+0,000555+100 */
background: #000194; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #000194 0%, #000555 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #000194 0%,#000555 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #000194 0%,#000555 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000194', endColorstr='#000555',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
min-height:100vh;
}
.pageOne *, .pageTwo * {color:#fff;}
.pageOne > .pageContainer {
	background-color:rgba(000,000,255,0);
	background-image: linear-gradient(white 0px, transparent 0px),
	linear-gradient(90deg, white 0px, transparent 0px),
	linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
	min-height:100vh;
	width:100%;
	display:inline-block;
	vertical-align:middle;
}
.pageTwo {
	background:#1f1f33;
	padding:3rem 0;	
}

a#nextPageButton {
    position: relative;
	display:block;
    margin: 0 auto;
    width: 268px;
    left: 0;
    right: 0;
}
a#nextPageButton img {
    width: 100%;
}
/* HEXAGON */

.hexagon {
    background: url(../images/hexagon.png);
    background-position: 50% 70%;
    background-repeat: no-repeat;
    background-size: 520px;
}

.iconlink {
    height: 60px;
    font-size: 18px;
    text-align: center;
    width: 100%;
    display: block;
	margin-bottom: 5rem;
}
.iconlink img {
    height: inherit;
    display: block;
    margin: 0 auto;
}

/* Medie Queries */
@media screen and (min-width:600px){
#firstHeader {
    padding: 36rem 0;
    margin-top: -10rem;
}	
.hexagon {
    background-size: 880px;
}
}

/* Fading */
/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
 
.fade-in.fade-one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.fade-two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.fade-three {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}

.fade-in.fade-four {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}