@keyframes fade {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }


 nav ul ul {
     display: none;
     box-shadow: 2px 2px 6px #000;
 }

 nav > ul > li {
     display: inline-block;
 }

 nav > ul > li {
     position: relative;
 }

 nav > ul {

     padding: 0 10px;
     list-style: none;
     position: relative;

 }



 /*nav ul:after {
		content: ""; clear: both; display: block;
	}*/

 nav ul li:hover {

     transition: all .5s ease-out;

 }

 nav > ul > li:hover a {
     background: #eee;
border-radius:6px;
 }

 nav ul li a {
     display: block;
     padding: 7px 20px 2px 20px;
     color: #000;
     text-decoration: none;
 }




 nav ul li:hover > ul {
     display: block;
     animation: fade .3s ease-out;

 }


 nav ul ul {
    
     list-style: none;
     border-radius: 0px;
     padding: 0;
     position: absolute;
     top: 100%;
     
 }
nav ul ul ul{
     position: absolute;
    left: 100%;
    top: -20%;
}

 nav ul ul li {

     background: #000 !important;
     position: relative;
 }

 nav ul ul li a {
     padding: 10px 40px;
     color: #fff;
     background:#000 !important;
 }

 nav ul ul:hover li a:hover {

     background: #ed1c24 !important;
border-radius:0px !important;
     transition: all .3s ease-out;

 }
 @media only screen and (max-width: 600px) {
     
     nav ul ul{
         width:auto;
         max-width: 200px;
     transform:translateX(-10px);} 
}