.box
{
	display: inline-block;
   float:left;
	height:350px;/*200px;*/
	overflow: hidden;
	width:20%;

	-webkit-transition: width 1s;
	-moz-transition: width 1s;
        transition: width 1s;
}
.box.home      { background-color: #2d89ef; }
.box.about     { background-color: #00a300; }
.box.portfolio { background-color: #e3a21a; }
.box.services  { background-color: #9f00a7; }
.box.contact   { background-color: #ee1111; }

.box a
{
	color:#FFF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	height:100%;
	display:block;
   padding-top: 10px;/*20px;*/
}

.box span
{
    display:block;
    position:relative;
    top:100%;
    text-align: center;

    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    transition: top 1s;
}

.nav:hover .box { width:10%; }

.nav .box:hover { width: 60%; }

.box:hover span{ top:25%; }