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

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

.menu-button {
    color: #000000;
    cursor: pointer; 
    display: inline-block;
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    position: relative;
}

    #top .menu-button {
        margin-left: 40px;
    }
    
        #top .menu-button::before {
            background-color: #d1d1d1;
            content: '';
            height: 30px;
            margin-top: -15px;
            position: absolute;
            top: 50%;
            left: -20px;
            width: 1px;
        }
    
    nav.off-canvas-nav .menu-button {
        margin: 17px 0 30px 0;
    }
    
    /* ICON */

    #nav-toggle { 
        display: inline-block;
        
        padding: 8px 0 8px 0px;
        margin-top: -2px;
        margin-left: 5px;
        height: 20px;
        position: relative;
        vertical-align: middle;
        width: 25px;
    }
    
        #nav-toggle span, 
        #nav-toggle span:before, 
        #nav-toggle span:after {
            background: #000000;
            content: '';
            display: block;
            height: 4px;
            position: absolute;
            transition: all 300ms ease-in-out;
            width: 100%;
        }
        
        
            .menu-button:hover #nav-toggle span,
            .menu-button:hover #nav-toggle span::before,
            .menu-button:hover #nav-toggle span::after {
                background-color: #467ca7;
            }
    
            #nav-toggle span:before {
              top: -8px; 
            }
            
            #nav-toggle span:after {
              top: 8px;
            }
    
    
            .menu-button.active:hover #nav-toggle span,
            .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: inline-block;
    font-family: 'Montserrat';
    font-weight: 400;
    position: relative;
    padding: 0 10px;   
}
   
    /* OFF CANVAS NAV */
        nav.off-canvas-nav .menu {
            background-color: #e8e8e8;
            display: none;
            padding-top: 30px;
            position: fixed;
            overflow-y: scroll;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 900;
        }
        
            @media screen and ( min-width: 992px ){
                nav.off-canvas-nav .menu {
                    padding-top: 50px;
                }
            }
            
            
            nav.off-canvas-nav ul {
                margin: 0;
                padding: 0;
            }
            
                nav.off-canvas-nav ul li  {
                    border-bottom: 1px solid #b2b2b2;
                    list-style-type: none;
                }
                
                    nav.off-canvas-nav ul li:first-of-type {
                        border-top: 1px solid #b2b2b2;    
                    }
                    
                    nav.off-canvas-nav ul li a {
                        color: #000000;
                        display: inline-block;
                        font-size: 15px;
                        padding: 15px 0;
                        text-decoration: none;
                    }
                    
                    nav.off-canvas-nav ul li a.button {
                        color: #FFF;
                        font-size: 16px;
                        margin: 15px 0;
                        padding: 18px 20px;
                    }
                    
                    @media screen and ( min-width: 992px ){
                        nav.off-canvas-nav ul li a {
                            font-size: 24px;
                            padding: 30px 0;
                        }
                        
                        nav.off-canvas-nav ul li a.button {
                            margin: 30px 0;
                        }
                        
                    }
                    
                    
            
            /*
            nav.off-canvas-nav ul li .touch-button {
                display: block;
                position: absolute;
                top: 0px;
                right: 0;
                bottom: 0;
                width: 30px;
            }
            
                nav.off-canvas-nav ul li .touch-button .fa {
                    position: absolute;
                    top: 50%;
                    margin-top: -6px;
                    left: 50%;
                    margin-left: -6px;
                }
                
                @media screen and ( min-width: 768px ){
                    nav.off-canvas-nav ul li .touch-button {
                        display: none;
                    }
                }
            */
            
    /* MAIN NAV */
        nav.main-nav ul {
            display: block;
            margin: 0 0 -10px 0;
            padding: 0;
    		text-align: left;
        }
        
            nav.main-nav ul li {
                display: inline-block;
                list-style-type: none;
                position: relative;
            }
            
                nav.main-nav ul li:first-of-type {
                    border-top: 0;
                }
                

                    
                nav.main-nav ul li a {
                    color: #000000;
                    display: inline-block;
                    font-size: 16px;
                    padding: 10px 20px;
                    position: relative;
                    text-decoration: none;
                }
                
                     nav.main-nav ul li:hover a,
                     nav.main-nav ul li.current-menu-item a, 
                     nav.main-nav ul li.current-menu-parent a {
                        color: #467ca7;
                        text-decoration: none;
                    }
                        
                        nav.main-nav ul li.current-menu-item a::after, 
                        nav.main-nav ul li.current-menu-parent a::after {
                            background-color: #467ca7;
                            content: '';
                            position: absolute;
                            height: 2px;
                            bottom: 5px;
                            left: 20px;
                            right: 20px;
                        }
                    
                
                nav.main-nav ul ul {
                    display: none;
                }
                    
                    
                    nav.main-nav ul ul {
                        background-color: #FFF;
                        min-width: 100%;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        text-align: left;
                        z-index: 200;
                    }
            
                    nav.main-nav ul li ul li {
                        display: block;
                        border: 0;
                        text-align: left;
                    }
                
                        nav.main-nav ul li ul li.current-menu-item {
                            background-color: blue;
                        }
                
                        nav.main-nav ul li ul li a {
                            color: #000;
                            display: block;
                            font-size: 14px;
                            white-space: nowrap;
                        }
                        
                            nav.main-nav ul li ul li a:hover,
                            nav.main-nav ul li:hover ul li a:hover {
                                background-color: #000;
                                color: #FFF;
                            }