*{
  padding:0;
  margin:0;
}

#center{
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
  visibility: visible;
  display: block;
}

#front{
  position: absolute;
  left: 50%;
  width: 870px;
  height: 164px;
  top: -82px;
  margin-left: -435px;
  visibility: visible;
}

#front span{
  display: none;
}

#home{
  display: block;
  float: left;
  width: 162px;
  height: 162px;
  margin-right: 15px;
  background: url("../img/home-front.png") no-repeat 0 -324px;
}

#home:hover{ 
  background-position: 0 -324px;
}

#nonprofit{
  display: block;
  float: left;
  width: 162px;
  height: 162px;
  margin-right: 15px;
  background: url("../img/nonprofit-front.png") no-repeat 0 -162px;
}

#nonprofit:hover{ 
  background-position: 0 -324px;
}

#portfolio{
  display: block;
  float: left;
  width: 162px;
  height: 162px;
  margin-right: 15px;
  background: url("../img/portfolio-front.png") no-repeat 0 -162px;
}

#portfolio:hover{ 
  background-position: 0 -324px;
}

#about{
  display: block;
  float: left;
  width: 162px;
  height: 162px;
  margin-right: 15px;
  background: url("../img/about-front.png") no-repeat 0 -162px;
}

#about:hover{ 
  background-position: 0 -324px;
}

#contact{
  display: block;
  float: left;
  width: 162px;
  height: 162px;
  background: url("../img/contact-front.png") no-repeat 0 -162px;
}

#contact:hover{ 
  background-position: 0 -324px;
}