/**********************************
 *
 * NAV.CSS
 * Default CSS is mobile layout
 * 
 **********************************/

html.off-canvas, html.off-canvas body {
    height: 100%;
    overflow: hidden !important;
    position: relative;
}

.menu-button-container {
    justify-content: flex-end;
    text-align: right;
}

.menu-button {
    color: #000;
    display: block;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 15px; 
}
    
    
    /* ICON */

    #nav-toggle { 
        display: inline-block;
        cursor: pointer; 
        padding: 8px 0 8px 0px;
        margin-top: -2px;
        height: 20px;
        position: relative;
        vertical-align: middle;
        width: 25px;
    }
    
        #nav-toggle span, 
        #nav-toggle span:before, 
        #nav-toggle span:after {
            background: #000;
            border-radius: 2px;
            content: '';
            display: block;
            height: 4px;
            position: absolute;
            transition: all 300ms ease-in-out;
            width: 100%;
        }
    
            #nav-toggle span:before {
              top: -8px; 
            }
            
            #nav-toggle span:after {
              top: 8px;
            }
    
    
            .active #nav-toggle span {
              background-color: transparent;
            }
    
                .active #nav-toggle span:before, 
                .active #nav-toggle span:after {
                  top: 0;
                }
    
                    .active #nav-toggle span:before {
                      transform: rotate(45deg);
                    }
                    
                    .active #nav-toggle span:after {
                      transform: rotate(-45deg);
                    }
                
    /* END of ICON */

nav {
    display: block;
    position: relative;
    padding: 0 10px;   
}
    

    nav.off-canvas-nav .menu {
        background-color: #ebebeb;
        display: none;
        position: fixed;
        overflow-y: scroll;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 450;
    }
    
        nav.off-canvas-nav .menu ul {
            padding: 30px;
        }
        
            
        nav ul {
            display: block;
            margin: 0;
            padding: 0;
    		text-align: left;
        }
        
            nav ul li {
                border-top: 1px solid #b5b5b6;
                display: block;
                list-style-type: none;
                position: relative;
            }
            
                nav ul li:first-of-type {
                    border-top: 0;
                }
                                
                
                nav ul li .touch-button {
                    display: none;
                    position: absolute;
                    top: 0px;
                    right: 0;
                    bottom: 0;
                    width: 30px;
                }
                
                    nav ul li .touch-button .fa {
                        position: absolute;
                        top: 50%;
                        margin-top: -6px;
                        left: 50%;
                        margin-left: -6px;
                    }
                    
                    
                nav ul li a {
                    color: #d70056;
                    display: block;
                    font-family: 'exo_2bold_condensed', verdana, sans-serif;
                    font-size: 22px;
                    padding: 15px;
                    text-transform: uppercase;
                    text-decoration: none;
                }
                
                    nav ul li.page_item_has_children a {
                        padding-bottom: 0;
                    }
                
                     nav ul li.current-menu-item a, 
                     nav ul li.current-menu-parent a {
                        background-color: red;
                        color: #FFF;
                        text-decoration: none;
                    }
                    
                
                nav.off-canvas-nav .menu ul li ul {
                    display: block;
                    padding: 0;
                }
                    
            
                    nav ul li ul li {
                        display: block;
                        border: 0;
                        text-align: left;
                    }
                
                        nav ul li ul li.current-menu-item {
                            background-color: blue;
                        }
                
                        nav ul li ul li a {
                            color: #00ad68;
                            display: block;
                            font-family: 'exo_2regular_condensed', verdana, sans-serif;
                            font-size: 18px;
                            padding: 15px !important;
                            white-space: nowrap;
                        }