@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'fontawesome';
	src:url('menufonts/fontawesome.eot');
	src:url('menufonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('menufonts/fontawesome.svg#fontawesome') format('svg'),
		url('menufonts/fontawesome.woff') format('woff'),
		url('menufonts/fontawesome.ttf') format('truetype');
}

.navigation {width:1000px; Height:36px; background-color: #ff0000; }

.navigation ul{ /* positioning */ position:relative; z-index:1000; /* remove the bullets next to list items: */ list-style:none; /* get rid of any default or inherited margins and padding: */ margin:0 auto; width:888px; padding:0; 
/* styling: */ font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: normal; font-size: 15px; border:0px solid blue}

    /* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li { /* positioning */ position: relative; float: left; /* styling: */ margin-right: 10px; font-weight: 900; font-size: 14px;}
.navigation > ul > li > a { /* positioning */ display:block; background-color: #ff0000; margin:0 10px; padding:9px 30px 10px 30px; text-decoration:none; color:#fff;
    -webkit-transition: background-color 400ms linear;
    -moz-transition: background-color 400ms linear;
    -o-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;}
.navigation > ul > li > a:hover{background-color:#000; color:#fff; }

/******dropdown area******/

.navigation ul ul{width:375px; /* increase width to accommodate 2nd sub menu */ position:absolute; z-index:100; height: 0; overflow: hidden;border:1px solid yellow

   visibility: hidden;
    opacity: 0;
   }

    /* don't display tertiary box yet */
.navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{height:0;

}
    /* tertiary drop-down box */
.navigation ul ul ul{left:210px; width:180px;}
.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul, .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{height:480px; /* increase height to accommodate more menu links */ 

  visibility: visible;
  opacity: 1;
    -webkit-transition: opacity 400ms linear;
    -moz-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    -ms-transition: opacity 400ms linear;    
    transition: opacity 400ms linear;
    }

    /* drop-down item styles */
    /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */

.navigation ul ul li{width:210px;}
.navigation ul ul.widenav li{width:330px;}
.navigation ul ul li, .navigation ul ul.widenav li{ background-color:#444; 

		-webkit-transition: background-color 0.5s ease;
		-moz-transition: background-color 0.5s ease;
		-o-transition: background-color 0.5s ease;
		-ms-transition: background-color 0.5s ease;
		transition: background-color 0.5s ease;
    }
    
.navigation ul ul li:hover {background-color:#555;}
.navigation ul ul li a{width:200px;}
.navigation ul ul.widenav li a {width:320px;}
.navigation ul ul li a, .navigation ul ul.widenav li a {display:block; margin:0; padding:10px 0 10px 10px; text-decoration:none; font-size: 14px; font-weight: 300; color:#fff;}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {color:#fff;border:solid red 0px}

.navigation ul ul li + li a{border-top:0px solid #999; }
.navigation ul ul li:hover + li a{border-top:0px solid #999; }

.navigation ul ul ul li a{border:0px none !important; }
.navigation ul ul ul li + li a{border-top:0px solid #999 !important; }
.navigation ul ul ul li:hover + li a{border: 0px none !important; }
.navigation ul ul ul li:hover + li{border-top:0px solid #999 !important;}

body#home a#home, body#products a#products, body#deals a#deals, body#trainee a#trainee, body#adi a#adi, body#info a#info {color: #fff; background: #000;}