/* http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly */ 

/* Effect 13: three circles */
#theMenu li a.effect {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

#theMenu li a.effect::before {
    position: absolute;
    top: 65%;
    left: 50%;
    color: transparent;
    content: '•';
    text-shadow: 0 0 transparent;
    font-size: 1.3em;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
    -moz-transition: text-shadow 0.3s, color 0.3s;
    transition: text-shadow 0.3s, color 0.3s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}


#theMenu li:hover a.effect::before,
#theMenu li.current a.effect::before,
#theMenu li a.effect.current::before,
#theMenu li a.effect:hover::before,
#theMenu li a.effect:focus::before {
    color: #b7154b;
    text-shadow: 10px 0 #b7154b, -10px 0 #b7154b;
}

#theMenu li:hover a.effect,
#theMenu li.current a.effect,
#theMenu li a.effect.current,
#theMenu li a.effect:hover,
#theMenu li a.effect:focus {
    color:#b7154b;
}  




    #theMenu > a {
        display: none;
    }
    
    #theMenu li {
        position: relative;
    }
    
        #theMenu li a {
            color:#9a939e;
            display: block;
        }
        
        #theMenu li.current a,
        #theMenu li a:active {
            color: #b7154b !important;
        }
        
          
    /* first level */
   
    #theMenu > ul {
        
    }
    
        #theMenu > ul > li {
            height: 100%;
            display:inline-block;
            margin: 0px 1.5em;
        }
        #theMenu > ul > li.short {
            
        }
        
        #theMenu > ul > li.subCatBtn.short {
            min-width: 65px;
            margin: 0px 0em;
        }
        
        
        
            #theMenu > ul > li > a {
                height: 100%;
                text-align: center;
            }
            
                #theMenu > ul > li:not( :last-child ) > a {
                    
                }
                
               /* #theMenu > ul > li.current > a,
                #theMenu > ul > li:hover > a,
                #theMenu > ul:not( :hover ) > li.current > a,
                #theMenu > ul:not( :hover ) > li.active > a {
                    color:#b7154b;
                }*/
 
 
 
    /* second level */
   
    #theMenu li ul {        
        position: absolute;
        left: -75%;
        width: 250%;
        top: 34px;
        box-sizing:border-box;

        background-color:rgba(242,242,242,0);
        text-align:center;
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;
        overflow: hidden;
    }
    
    /* hide/close subcats when JS is enabled => so google can read links without js */
    .js #theMenu li ul {
        height:0px;
    }
        
    .js #theMenu li:hover ul {
        height:150px;           
    }   
    
    .js #theMenu li ul a {
        visibility :hidden;
        opacity:0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        color:#fff !important;
    }
    .js #theMenu li:hover ul a {
        visibility :visible;
        opacity:1;
    }
        
       /* #theMenu li:hover ul {
            display: block;            
        }*/
       
       
        
            #theMenu li:not( :first-child ):hover ul {
                
            }
            
            #theMenu li ul a {
                text-align: center;
                padding: 0 5px;
            }
                #theMenu li ul li.current a,
                #theMenu li ul li a:hover,
                #theMenu li ul:not( :hover ) li.current a,
                #theMenu li ul:not( :hover ) li.active a {
                    color: #b7154b                }
        

nav#theMenu ul.subCat li {
    padding:0px;
    padding-top: 1em;
    height:2.188em;
    
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    
    position: relative;
    top: -4px;

    -webkit-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);
    -moz-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);

     -moz-border-bottom-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -moz-border-bottom-right-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

nav#theMenu ul.subCat li:not(:first-child) {
    margin-top: -4px;
}

nav#theMenu ul.subCat li:nth-child(1) {
    background-color:#9E005D;
    z-index:4;
}
nav#theMenu ul.subCat li:nth-child(2) {
    background-color:#BB145B;
    z-index:3;
}
nav#theMenu ul.subCat li:nth-child(3) {
    background-color:#D4145A;
    z-index:2;
}
nav#theMenu ul.subCat li:nth-child(4) {
    background-color:#E5156A;
    z-index:1;
}

nav#theMenu ul.subCat li:hover, nav#theMenu ul.subCat li.current {  
    background-color:#b1b1b1;
}