html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
 	height: 100%;
}
body {
  	height: 100%;
}


.flex {max-width: 100%}


body.singlecolor {
	background: #04579f;
}



p {
	font-size: 9px;
    line-height: 1.4;
 	height: 100%;
}



/* ----- Main area ----- */
.mainarea h2 {
	margin: 0 0 57px 0;
	font-family: 'Exo 2', sans-serif;
	font-weight: 100;
	font-size: 72px;
	color: #fffefe;
	text-align: center;
}
.mainarea h3 {
	margin: 0 0 35px 0;
	color: #fffefe;
	font-family: 'Exo 2', sans-serif;
	font-weight: 100;
	font-size: 36px;
	text-align: center;
}



/*------------------------------------------------------------------
[2. Clock]
*/

#clock {
	position: absolute;
	width: 100%;
	top: 50%;
	position: absolute;
	opacity: 0;
	z-index: -1;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	-ms-transform: scale(0.3,0.3);
    -webkit-transform: scale(0.3,0.3);
    transform: scale(0.3,0.3);
}
#clock.active {
	opacity: 1;
	z-index: 30;
	-ms-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}
.clock-container {
	text-align: center;
	margin-bottom: 53px;
}




/*------------------------------------------------------------------
[7. Social]
*/

.social-container {
	position: absolute;
	bottom: 56px;
	right: 50px;
	z-index: 50;
}
.social {
	margin: 0;
	padding: 0;
	list-style: none;
}
.social li {
	float: left;
	margin: 0 8px;
}
.social li a:hover {
	opacity: 0.7;
}