/* ----------------------------------------------------------------------------- * 
 *                                  #navigation                                 *
 * ----------------------------------------------------------------------------- */


#navigation ul {
    padding: 0px;
    margin: 0px;
    float:right;
   
}

#navigation ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

#navigation ul,#navigation ul li{
    background-color: none;
}
#navigation ul li {
    list-style: none;
    float:left;
}
#navigation ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 8px 35px 8px 35px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

#navigation ul li.menu1:hover a, #navigation ul li.menu1:hover > ul li a  {
    background-color: #a03232;
}
#navigation ul li.menu2:hover a, #navigation ul li.menu2:hover > ul li a  {
    background-color: #a03232;
}
#navigation ul li.menu3:hover a, #navigation ul li.menu3:hover > ul li a {
    background-color: #a03232;
}
#navigation ul li.menu4:hover a, #navigation ul li.menu4:hover > ul li a {
    background-color: #a03232;
}
#navigation ul li.menu5:hover a, #navigation ul li.menu5:hover > ul li a {
    background-color: #a03232;
}

#navigation ul li:hover > a {
    color: #FAFAFA;
}
#navigation ul li:hover > ul {
    visibility: visible;
}

#navigation ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
#navigation ul li ul li{
	float: none;
}
#navigation ul li ul li a {
    color: #FAFAFA;
}
#navigation ul li ul li a:hover{
	color: #333;
	background-color: #FAFAFA !important;
}


/* ====================================================================================================================================== * 
 *                                Media Queries  max-width: 820px = 51.25em                                                               *
 * ====================================================================================================================================== */

@media only screen and (max-width: 51.25em) {  

#navigation ul li a {
  
    padding: 4px 10px 4px 10px;

}




}


/* ====================================================================================================================================== * 
 *                                Media Queries  max-width: 480px                                                                         *
/* ====================================================================================================================================== */
 
 
 @media only screen and (max-width: 30em) {  

 #navigation ul li a {
  float:left;
    padding: 5px 35px 5px 35px;
    margin: 3px 0 0 0;


}

 
}