#navigation { position: absolute; top: 0; left: 0; }
#navigation ul{ width:900px; padding-left: 20px; margin: 0; }
#navigation ul a, #navigation ul .linkClass{
    position: relative;
    padding: 7px 15px 7px 15px; 
    background-color: rgba(60,30,5,0.4); 
    border-radius: 0px 0px 4px 4px; 
    box-shadow: 0px 0px 3px 1px rgba(100,60,24,0.9);
    padding-bottom: 7px; 
    transition: background-color 1s, padding-bottom 1s;
    -moz-transition: background-color 1s, padding-bottom 1s;
    -webkit-transition: background-color 1s, padding-bottom 1s;
    -o-transition: background-color 1s, padding-bottom 1s;
    font-size: 20px; 
    text-shadow: 2px 2px 2px #000; 
    margin-right: 12px; 
    display: inline-block;
}
#navigation ul a:hover{ 
    background-color: rgba(185,104,33,0.4);  
    padding-bottom: 14px; 
    transition: background-color 0.3s, padding-bottom 0.3s;
    -moz-transition: background-color 0.3s, padding-bottom 0.3s;
    -webkit-transition: background-color 0.3s, padding-bottom 0.3s;
    -o-transition: background-color 0.3s, padding-bottom 0.3s;
    text-decoration: none;
}
#navigation ul .linkClass:hover{ 
    z-index: 7; 
    background-color: rgba(185,104,33,0.4);  
    transition: background-color 0.8s, padding-bottom 0.8s;
    -moz-transition: background-color 0.8s, padding-bottom 0.8s;
    -webkit-transition: background-color 0.8s, padding-bottom 0.8s;
    -o-transition: background-color 0.8s, padding-bottom 0.8s;
    cursor: default;
}

#navigation ul .linkClass.n1:hover{ 
    padding-bottom: 30px; 
}
#navigation ul .linkClass.n2:hover{ 
    padding-bottom: 50px; 
}
#navigation ul .linkClass.n3:hover{ 
    padding-bottom: 70px;
}
#navigation ul .linkClass.n4:hover{ 
    padding-bottom: 90px;
}
#navigation ul .linkClass.n5:hover{ 
    padding-bottom: 110px;
}
#navigation ul .linkClass.n6:hover{ 
    padding-bottom: 130px;
}
#navigation ul .linkClass.n7:hover{ 
    padding-bottom: 150px;
}
#navigation ul .linkClass.n8:hover{ 
    padding-bottom: 170px;
}
#navigation ul .linkClass.n9:hover{ 
    padding-bottom: 190px;
}
#navigation ul .linkClass.n10:hover{ 
    padding-bottom: 210px;
}

#navigation ul ul{ 
    opacity: 0;
    width: 150px;
    display: block; 
    position: absolute;
    top:30px;
    left:15px;
    z-index: 5;
    padding-left: 0;
    transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
}

#navigation  ul .n5 ul{ 
    width: 110px;

}

#navigation ul ul li{ 
    height: 20px;
    display: block;
    line-height: 23px;
}

#navigation ul ul a{ 
    font-size: 14px;
    letter-spacing: 0;
    background: none;
    box-shadow: none;
    padding: 2px 5px 2px 0px;
    color: #f8dbc3;
    transition: color 0.4s;
    -moz-transition: color 0.4s;
    -webkit-transition: color 0.4s;
    -o-transition: color 0.4s;
}
#navigation ul ul a:hover{
    color: #fff;
    background: none;
    transition: color 0.4s;
    -moz-transition: color 0.4s;
    -webkit-transition: color 0.4s;
    -o-transition: color 0.4s;
    
}
#navigation ul li:hover > ul     { 
    opacity: 1; 
    transition: opacity 0.5s linear 0.3s;
    -moz-transition: opacity 0.5s linear 0.3s;
    -webkit-transition: opacity 0.5s linear 0.3s;
    -o-transition: opacity 0.5s linear 0.3s;
}


/*-----------------------------------------------------------------------------------------*/


@media only screen and (max-width: 1180px){ 
    #navigation ul a, #navigation ul .linkClass{ font-size: 18px; }
    #navigation ul li, #navigation ul li a, #navigation ul .linkClass { padding-left: 6px; padding-right: 6px; margin-right:-4px;  }
    #navigation ul .linkClass { margin-right: 0px; margin-left: 4px;}
    #navigation ul ul a{ padding: 2px; }
    #logo img{ max-width: 20%; }
    
    #navigation ul ul{ 

    left:1px;

}
}

.linkClass span{ margin-left: 0px;}