/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 19, 2021, 11:24:31 AM
    Author     : melissa
*/


#menu, #menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 150;
}
#menu{
   
    width: 711px;
   margin: 50px auto;
    border-radius: -2px
}
#menu:before,
#menu:after{
    content: '';
    display: table;
}
#menu:after{
    clear: both;
}
#menu li{
    float: left;
    box-shadow: 1px 0 0 #444;
    position: relative;
}
#menu a{
    float: left;
    padding: 12px 30px;
    text-transform: uppercase;
    font-family: Baloo;
    text-decoration: none;
    color:#fff;
}
#menu li:hover > a{
   color: #b6f29d !important;
    
   
}
#menu ul{
    margin: 20px 0 0 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 46px;
    left: 0;
    background: #262626;
    border-radius: 3px;
    transition: all .3s ease-in-out;
}
#menu li:hover > ul{
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#menu ul ul{
    top: 0;
    left: 185px;
    margin: 0 0 0 20px;
}
#menu ul li{
    float: none;
    display: block;
    border: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
}
#menu ul li:last-child{
    box-shadow: none;
}
#menu ul a{
    padding: 10px;
    width: 180px;
    display: block;
   
    float: none;
    text-transform: uppercase;
}
#menu ul a:hover{
    background-color: #1ba18f;
}
#menu ul li:first-child > a{
    border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after{
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff; 
}
#menu ul li:first-child > a:after{
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #fff; 
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
}
#menu ul li:first-child a:hover:after{
    border-bottom-color: #fff;
}
#menu ul ul li:first-child a:hover:after{
    border-bottom-color: #fff;
    border-bottom-color: transparent; 
}   
#menu ul li:last-child >a {
    border-radius: 0 0 3px 3px;
}