body {
    font-family:Arial;
    background: url(../images/wood-481329.jpg)no-repeat fixed;
    background-color: transparent;
    background-size: cover;
    
}


/*
.title{
    width:548px;
    height:119px;
    position:absolute;
    top:400px;
    left:150px;
    background:transparent url(title.png) no-repeat top left;
    }

a.back{
    background:transparent url(back.png) no-repeat top left;
    position:fixed;
    width:150px;
    height:27px;
    outline:none;
    bottom:0px;
    left:0px;
    }

#content{
    margin:0 auto;
    }
*/
.navigation{
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}
.navigation .item{
    position:absolute;
}

.about{
   top:90px;
   left:625px;
}
.work{
   top:230px;
   left:835px;
}
.projects{
   top:420px;
   left:950px;
}
a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}

.about a.icon{
    background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.work a.icon{
    background:transparent url(../images/camera.png) no-repeat 0px 0px;
}
.projects a.icon{
    background:transparent url(../images/fav.png) no-repeat 0px 0px;
}
.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}


footer {
    background: #666;
    opacity: 0.5;
    height: auto;
    text-align: left;
    padding: 0.6%;
    font-size: 0.8em;
    position:absolute;
    top:570px;
    left:25px;
}

/* //////////// media queries //////////// */

@media screen and (max-width: 800px) {
    .about{
    top:90px;
    left:350px;
    }
    .work{
       top:260px;
       left:350px;
    }
    .projects{
       top:460px;
       left:350px;
    }
    a.icon{
        width:52px;
        height:52px;
        position:absolute;
        top:0px;
        left:0px;
        cursor:pointer;
    }

    .navigation .item a.active{
        background-position:0px -52px;
    }
    .item img.circle{
        position:absolute;
        top:0px;
        left:0px;
        width:52px;
        height:52px;
        opacity:0.1;
    }
    .item h2{
        position:absolute;
        width:147px;
        height:52px;
        color:#222;
        font-size:18px;
        top:0px;
        left:52px;
        text-indent:10px;
        line-height:52px;
        text-shadow:1px 1px 1px #fff;
        text-transform:uppercase;
    }
    .item h2.active{
        color:#fff;
        text-shadow:1px 0px 1px #555;
    }
    .item ul{
        list-style:none;
        position:absolute;
        top:60px;
        left:25px;
        display:none;
    }
    .item ul li a{
        font-size:15px;
        text-decoration:none;
        letter-spacing:1.5px;
        text-transform:uppercase;
        color:#222;
        padding:3px;
        float:left;
        clear:both;
        width:100px;
        text-shadow:1px 1px 1px #fff;
    }
}

@media screen and (max-width: 500px) {
    .about{
    top:90px;
    left:150px;
    }
    .work{
       top:290px;
       left:150px;
    }
    .projects{
       top:480px;
       left:150px;
    }
    a.icon{
        width:52px;
        height:52px;
        position:absolute;
        top:0px;
        left:0px;
        cursor:pointer;
    }

    .navigation .item a.active{
        background-position:0px -52px;
    }
    .item img.circle{
        position:absolute;
        top:0px;
        left:0px;
        width:52px;
        height:52px;
        opacity:0.1;
    }
    .item h2{
        position:absolute;
        width:147px;
        height:52px;
        color:#222;
        font-size:18px;
        top:0px;
        left:52px;
        text-indent:10px;
        line-height:52px;
        text-shadow:1px 1px 1px #fff;
        text-transform:uppercase;
    }
    .item h2.active{
        color:#fff;
        text-shadow:1px 0px 1px #555;
    }
    .item ul{
        list-style:none;
        position:absolute;
        top:60px;
        left:25px;
        display:none;
    }
    .item ul li a{
        font-size:15px;
        text-decoration:none;
        letter-spacing:1.5px;
        text-transform:uppercase;
        color:#222;
        padding:3px;
        float:left;
        clear:both;
        width:100px;
        text-shadow:1px 1px 1px #fff;
    }
    
}