/* Navigation ___________________________________________________________________________________________ */

.nav, 
.lvl-0, 
.lvl-0-item, 
.lvl-0-link, 
.lvl-1, 
.lvl-1-item, 
.lvl-1-link,
.lvl-2, 
.lvl-2-item, 
.lvl-2-link,
.lvl-3, 
.lvl-3-item, 
.lvl-3-link { display: block; padding: 0; margin: 0; list-style: none;}

.nav {  
   z-index: 10;
}



/*  Navigation: Level 1 _________________________________________________________________________________ */

  .nav {  }
        
  .lvl-0 { 
        font-family: 'sandwich', arial, helvetica, sans-serif;
        font-size: 3em;
    } 
        
        .lvl-0-item { 
            position: relative;
            display: block; 
            background: #ddd;
            margin: 0;
            padding: 0;
            border: 0;
    }

        .lvl-0-item + .lvl-0-item {
            margin-top: 5px;
        }

        .lvl-0-link {
            display: block; 
            padding: 0.75em 30px 0.65em 0.35em; 
            font-weight: normal; 
            text-transform: uppercase;
            color: white;
            background: #eee top right no-repeat;
            background-position: calc(100% - 5px) 50%;
            background-size: auto 40px;
          }

        .lvl-0-item:nth-child(4n+1) .lvl-0-link { 
                background-color: #CD3301; 
                background-image: url('/getfile.php?type=icons&id=wartpig black.svg');                
    }

                .lvl-0-item:nth-child(4n+1) .lvl-1 { 
                        background-color: #eee;
                }

        .lvl-0-item:nth-child(4n+2) .lvl-0-link { 
                background-color: #F8D001; 
                color: #111;
                background-image: url('/getfile.php?type=icons&id=guinea black.svg'); 
    }
                .lvl-0-item:nth-child(4n+2) .lvl-1 { 
                        background-color: #eee;
                }

        .lvl-0-item:nth-child(4n+3) .lvl-0-link { 
                background-color: #339A00;
                background-image: url('/getfile.php?type=icons&id=bird 1 black.svg'); 
    }
                .lvl-0-item:nth-child(4n+3) .lvl-1 { 
                        background-color: #eee;
                }


        .lvl-0-item:nth-child(4n+4) .lvl-0-link { 
                background-color: #00349A; 
                background-image: url('/getfile.php?type=icons&id=aardvark black.svg'); 
    }
                .lvl-0-item:nth-child(4n+4) .lvl-1 { 
                        background-color: #eee;
                }


        .lvl-0-link:hover {
        text-decoration: none;
                
        }

                 
           

    /* Styling between 300 and 720px wide */
    @media all and (max-width: 719px) { 
               
            .lvl-0 {
                    font-size: 2em;
            }            
            
    }
    
    
    /* Styling over 950 px wide */
    @media all and (min-width: 720px) { 
    

    
    }



/* __ Navigation: Level 2 _______________________________________________________________________________ */


    .lvl-1 {
        display: none;
        z-index: 1000;
    }

        .lvl-1-link { 
            font-weight: normal;
            position: relative;
            display: block; 
            margin: 0;
            border: 0;
            color: #111;
            text-decoration: none;
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: auto 30px;
    }

        .lvl-1-item:nth-child(4n+1) .lvl-1-link { background-image: url('/getfile.php?type=icons&id=Africa button RED.svg'); }

        .lvl-1-item:nth-child(4n+2) .lvl-1-link { background-image: url('/getfile.php?type=icons&id=Africa button YELLOW.svg'); }

        .lvl-1-item:nth-child(4n+3) .lvl-1-link { background-image: url('/getfile.php?type=icons&id=Africa button GREEN.svg'); }

        .lvl-1-item:nth-child(4n+4) .lvl-1-link { background-image: url('/getfile.php?type=icons&id=Africa button BLUE.svg'); }

        .lvl-1-link:hover {
            background-color: #ccc;
                text-decoration: none;
          }

    /* Styling between 300 and 720px wide */
    @media all and (max-width: 719px) { 
               
            .lvl-1 {
                display: none;
                position: static;
                width: 100%;
            }
            
            .lvl-1-link { 
                padding: 0em 0.5em 0em 45px;
                background-position: 5px 4px;
                line-height: 2em;
            }
    }
    
    
    /* Styling over 950 px wide */
    @media all and (min-width: 720px) { 
    
            .lvl-1 {
                display: none;
                position: absolute;
                left: 100%;
                top: 0;
                width: 275px;
            }
            
            .lvl-1-link { 
                padding: 0.5em 0.5em 0.5em 45px;
                background-position: 10px 15px;
                line-height: 1em;
            }
    
    }







/* ____ Navigation: Level 3 _____________________________________________________________________________ */


    .lvl-2 {
            display: none;
    }





/* Navigation: Event handling ___________________________________________________________________________ */

.lvl-0-item:hover .lvl-1 { display: block;  }
/*
.lvl-1-item:hover .lvl-2 { display: block;  }
*/








/* Navigation ___________________________________________________________________________________________ */

.foot-lvl-0,
.foot-lvl-0-item,
.foot-lvl-0-link { display: block; padding: 0; margin: 0; list-style: none; border: none; }

.foot-lvl-0 { overflow: auto; float: left; width: 750px; }

.foot-lvl-0-item { display: inline-block; }

.foot-lvl-0-link { display: inline-block; padding: 0 10px 0 0; background: none; }
    .foot-lvl-0-link:hover,
    .foot-lvl-0-link:focus { color: #444; }

.foot-lvl-0-item:last-child .foot-lvl-0-link { padding-right: 0; }