@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* Google Font 'Open Sans' */
/* Typography */
h2 {
	font-weight: 300;
	font-size: 2.5em;
	line-height: 1.5em;
	width: 75%;
	padding-top: .5em;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: .5em;
	margin: 0 auto;
}
/* Variables */
/* timer */
/* Custom / Personal reset */
* {
  margin: 0;
  padding: 0;
}
body {
	font: 16px/1.5em 'Open Sans', Tahoma, sans-serif;
}
.container {
	max-width: 940px;
	margin-top: 1%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1%;
	border-radius: 0.5em;
	background-color: #8AE0E3;
	z-index: 2;
	position: relative;
	float: none;
}
a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 300;
}
/* Utility classes */
.reset-position {
  top: 0;
  left: 0;
}
.align-v {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.align-h {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.align-vh {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* Main style */
.navigation {
	margin-bottom: 0;
	padding-left: 282px;
}

.navigation:after {
  content: '';
  display: block;
  clear: both;
}
.navigation li {
	list-style: none;
	float: left;
	display: inline-block;
	margin: .5em;
}
.navigation li a {
	display: block;
	width: 7em;
	height: 4em;
	border-radius: 0.33333333em;
	line-height: 4em;
	position: relative;
	text-align: center;
	background-color: #2eb8b3;
	border: 0.08333333em solid #2baca7;
	overflow: hidden;
	z-index: 2;
}
.navigation li a i {
  display: block;
  position: absolute;
  font-size: 1.66666667em;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.navigation li a span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	font-size: 1em;
	text-transform: uppercase;
	-webkit-transition: all 0.25s 0.125s ease;
	-moz-transition: all 0.25s 0.125s ease;
	-o-transition: all 0.25s 0.125s ease;
	-ms-transition: all 0.25s 0.125s ease;
	transition: all 0.25s 0.125s ease;
}
.navigation li a:hover.to.bottom i {
  -webkit-transform: translate(-50%, 5em);
  -moz-transform: translate(-50%, 5em);
  -o-transform: translate(-50%, 5em);
  -ms-transform: translate(-50%, 5em);
  transform: translate(-50%, 5em);
}
.navigation li a:hover.to.top i {
  -webkit-transform: translate(-50%, -5em);
  -moz-transform: translate(-50%, -5em);
  -o-transform: translate(-50%, -5em);
  -ms-transform: translate(-50%, -5em);
  transform: translate(-50%, -5em);
}
.navigation li a:hover.to.left i {
  -webkit-transform: translate(-5em, -50%);
  -moz-transform: translate(-5em, -50%);
  -o-transform: translate(-5em, -50%);
  -ms-transform: translate(-5em, -50%);
  transform: translate(-5em, -50%);
}
.navigation li a:hover.to.right i {
  -webkit-transform: translate(5em, -50%);
  -moz-transform: translate(5em, -50%);
  -o-transform: translate(5em, -50%);
  -ms-transform: translate(5em, -50%);
  transform: translate(5em, -50%);
}
.navigation li a:hover i {
  -webkit-transform: translate(-50%, 5em);
  -moz-transform: translate(-50%, 5em);
  -o-transform: translate(-50%, 5em);
  -ms-transform: translate(-50%, 5em);
  transform: translate(-50%, 5em);
  color: rgba(255, 255, 255, 0.4);
}
.navigation li a:hover span {
  opacity: 1;
}