i tried to add logo to the nav bar, but its not working. why?

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS transform skew and animation</title>

<style>
html,body {
    margin:0;
    height:100%;
    background-image:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,1.0));
 }
#box0,#box1,#box2,#box3 {
    position:relative;
    z-index:3;
    float:left;

    width:22%;
    height:100%;
    margin:-100% 1% 0 1%;

    background-image:url(autumn.jpg);
    background-size:100% 100%;	
    box-shadow:10px 10px 10px rgba(0,0,0,1.0),
          inset 1px  1px  1px rgba(0,0,0,1.0);

    -webkit-transform:skew(-10deg);
    -moz-transform:skew(-45deg);
    -ms-transform:skew(-10deg);
    -o-transform:skew(-10deg);
    transform:skew(-10deg);

    animation-delay:0s;
    animation-duration:1s;
    animation-name:slideDown;
    animation-fill-mode:forwards;

    -webkit-animation-delay:0s;
    -webkit-animation-duration:1s;
    -webkit-animation-name:slideDown;
    -webkit-animation-fill-mode:forwards;
 }
#box1 {
    z-index:2;
    background-image:url(blood.jpg);
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
 }
#box2 {
   z-index:1;
   background-image:url(buddha.jpg);
   animation-delay:1s;
   -webkit-animation-delay:1s;
 }
#box3 {
    z-index:0;
    background-image:url(avenue.jpg);
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
 }

#nav {
    position:absolute;
    z-index:4;

    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid rgb(0,0,0);
    border-bottom:1px solid rgb(0,0,0);
    bottom:10%;

    list-style-type:none;
    line-height:100px;
    text-align:center;
    background-color:rgb(247,247,247);
    box-shadow:0 0 30px rgba(0,0,0,0.8),
         inset 0 0 30px rgba(0,0,0,0.8);
    opacity:0;

    animation-delay:2.5s;
    animation-duration:2.0s;
    animation-name:show;
    animation-fill-mode:forwards;

    -webkit-animation-delay:2.5s;
    -webkit-animation-duration:2.0s;
    -webkit-animation-name:show;
    -webkit-animation-fill-mode:forwards;
 }
#nav li { 
    display:inline;
    margin:0 20px;
 }
 
.logo {
	background-image:url(images/vensta_logo.jpg);
}

#nav a {
    color:rgb(0,0,0); 
    text-transform:uppercase;
    text-decoration:none;
 }
@keyframes slideDown{
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }
@-webkit-keyframes slideDown {
    from {margin-top:-100%;}
    to   {margin-top:0;}
 }

@keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
@-webkit-keyframes show {
    from {opacity:0}
    to   {opacity:1;}
 }
</style>

</head>

<body>

<div id="box0"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<ul id="nav">
 <li><a href="#"><span class='logo'>One</span></a></li>
 <li><a href="#">ABOUT </a></li>
 <li><a href="#">PROPERTY DEVELOPMENT</a></li>
 <li><a href="#">CONTACT US</a></li>
</ul>

</body>
</html>