/* ---- reset ------*/
html, body, div, a {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 10;
  vertical-align: baseline; }

html {
  line-height: 1; }


/* --- basic styles ----*/

body {
  font-family: Verdana;
  font-size: 1em;
  font-weight: bold;
  background: #00226a;
  }

/* --- for all three examples ----*/

.nav {
  text-align: center;
  overflow: hidden;

  min-width: 646px;
    max-width: 646px;
  position: relative; }

.nav a {
    display: inline;
    position: relative;
		float: left;
		padding: 1em 0;
    width: 15%;
		text-decoration: none;
	  color: #f3e716;
	  -webkit-transition: .7s;
	  -moz-transition: .7s;
	  -o-transition: .7s;
	  -ms-transition: .7s;
	  transition: .7s; }
	  
	  .nav a:hover {
	    color: #FFFFFF; }

.effect {
	position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }