/*#region GENERAL */

#nav-button {
    display: none;
}

#nav-wrapper {
    margin: 0;
    padding: 0;
    height: 60px;
    width: 100%;
    text-transform: uppercase;
}

#nav-menu {
    float: right;
    height: 100%;
}

#nav {
    margin: 0;
    padding: 0;
    position: relative;
    top: 32px;
    height: 0;
    z-index: 1000;
    font-weight: 600;
}

    #nav a {
        text-decoration: none;        
    }

    #nav li {
        margin: 0;
        float: left;
        display: block;
    }

        #nav li a {            
            color: #fff;
            /*font-weight: 800;*/
            font-size: 100%;
            display: block;
            position: relative;
            padding: 0;
            padding-right: 20px;
            width: auto;
            -webkit-transition: color 400ms ease-in-out;
            -moz-transition: color 400ms ease-in-out;
            -ms-transition: color 400ms ease-in-out;
            -o-transition: color 400ms ease-in-out;
            transition: color 400ms ease-in-out;
        }

            #nav li a i {
                font-style: normal;
            }

/*#endregion */


@media screen and (min-width:740px) {

    /*#region LEVEL 1 */

    #nav > li.nav-selected > a,
    #nav > li > a.nav-selected {
        color: #989790;
    }

        #nav li.nav-active a,
        #nav > li.nav-selected > a:hover {
            color: #8B347C;
        }


    /* following to fix FF inheritence on level2 */
    #nav li.nav-active li a {
        color: transparent;
    }
    /*#endregion */

    /*#region LEVEL 2 */

    #nav-level2-box.nav-level2-expand {
        height: 45px;
        border-bottom: 1px solid #494747;
    }

    #nav.nav-level2-expand {
        height: 80px;
    }

    #nav li > .nav-level2 {
        display: none;
        left: 0;
        padding-left: 0;
        margin-top: 7px;
        position: absolute;
        width: 100%;
        -webkit-transition: margin-top 300ms ease-in-out 300ms;
        -moz-transition: margin-top 300ms ease-in-out 300ms;
        -ms-transition: margin-top 300ms ease-in-out 300ms;
        -o-transition: margin-top 300ms ease-in-out 300ms;
        transition: margin-top 300ms ease-in-out 300ms;
    }
        #nav li > .nav-level2 li {
            margin-right: -8px;     }

        #nav li > .nav-level2 a {            
            color: transparent;
            -webkit-transition: color 500ms linear 400ms;
            -moz-transition: color 500ms linear 400ms;
            -ms-transition: color 500ms linear 400ms;
            -o-transition: color 500ms linear 400ms;
            transition: color 500ms linear 400ms;
        }

    #nav.nav-level2-expand li.nav-active > .nav-level2 li a {
        color: #fff;
        float: left;
        width: auto;
        padding-right: 15px;
        -webkit-transition: color 300ms ease-in-out;
        -moz-transition: color 300ms ease-in-out;
        -ms-transition: color 300ms ease-in-out;
        -o-transition: color 300ms ease-in-out;
        transition: color 300ms ease-in-out;
    }

    /* transition delay put in for FF*/
    #nav.nav-level2-expand li.nav-active > .nav-level2 li.nav-selected > a,
    #nav.nav-level2-expand li.nav-active > .nav-level2 li > a.nav-selected {
        color: #989790;
        -webkit-transition-delay: 100ms;
        -moz-transition-delay: 100ms;
        -ms-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }


        #nav.nav-level2-expand li.nav-active > .nav-level2 li > a:hover,
        #nav.nav-level2-expand li.nav-active > .nav-level2 li.nav-active > a,
        #nav.nav-level2-expand li.nav-active > .nav-level2 li.nav-selected > a:hover {
            color: #8B347C;
        }

    #nav li:hover > .nav-level2 {
        display: block;
        z-index: 6000;
    }

    #nav li.nav-active > .nav-level2 {
        display: block;
        margin-top: 24px;
        -webkit-transition: margin-top 300ms ease-in-out 300ms;
        -moz-transition: margin-top 300ms ease-in-out 300ms;
        -ms-transition: margin-top 300ms ease-in-out 300ms;
        -o-transition: margin-top 300ms ease-in-out 300ms;
        transition: margin-top 300ms ease-in-out 300ms;
    }

        #nav li.nav-active > .nav-level2.nav-subnav-visible {
            -webkit-transition: margin-top 300ms ease-in-out;
            -moz-transition: margin-top 300ms ease-in-out;
            -ms-transition: margin-top 300ms ease-in-out;
            -o-transition: margin-top 300ms ease-in-out;
            transition: margin-top 300ms ease-in-out;
        }

            #nav li.nav-active > .nav-level2.nav-subnav-visible a {
                -webkit-transition: none;
                -moz-transition: none;
                -ms-transition: none;
                -o-transition: none;
                transition: none;
            }


    /*#endregion */

    /*#region LEVEL 3 */

    #nav-level3-box.nav-level3-expand {
        height: 200px;
        z-index: 99;
        border: 0;
    }

    #nav.nav-level3-expand {
        height: 235px;
    }

    #nav li > .nav-level3 {
        display: none;
        position: absolute;
        left: 0;
        height: 0;
        /*padding-left: 180px;*/
        padding-left: 0;
        margin-top: 34px;
        font-size: 0;
    }

        #nav li > .nav-level3 li a {
            font-size: 100%;
        }

    /*#nav li > .nav-level2 li > .nav-level3 li a {
            color: transparent;
        transition: color 20ms linear 800ms;
    }*/


    #nav li:hover > .nav-level3, #nav li.nav-active > .nav-level2 li.nav-active > .nav-level3 {
        display: inline;
        z-index: 6000;
    }

    #nav li.nav-active > .nav-level2 li.nav-active > .nav-level3 {
        width: 250px;        
        margin-top: 40px;
        font-size: 100%;
        -webkit-transition: margin-top 300ms ease-in-out 300ms, font-size 300ms linear 300ms;
        -moz-transition: margin-top 300ms ease-in-out 300ms, font-size 300ms linear 300ms;
        -ms-transition: margin-top 300ms ease-in-out 300ms, font-size 300ms linear 300ms;
        -o-transition: margin-top 300ms ease-in-out 300ms, font-size 300ms linear 300ms;
        transition: margin-top 300ms ease-in-out 300ms, font-size 300ms linear 300ms;
    }

    #nav.nav-level2-expand li.nav-active > .nav-level2 li > .nav-level3 li a {
        /* make sure this isn't inheriting from level 2*/
        color: transparent;
        width:250px;
        /*transition: color 2000ms ease-in-out 2000ms;*/
    }

    #nav.nav-level3-expand li.nav-active > .nav-level2 li.nav-active > .nav-level3 li a {
        color: #fff;
        -webkit-transition: color 300ms ease-in-out;
        -moz-transition: color 300ms ease-in-out;
        -ms-transition: color 300ms ease-in-out;
        -o-transition: color 300ms ease-in-out;
        transition: color 300ms ease-in-out;
    }

        #nav.nav-level3-expand li.nav-active > .nav-level2 li.nav-active > .nav-level3 li a.nav-selected {
            color: #989790;
        }

            #nav li.nav-active > .nav-level2 li.nav-active > .nav-level3 li a:hover,
            #nav.nav-level3-expand li.nav-active > .nav-level2 li.nav-active > .nav-level3 li a.nav-selected:hover {
                color: #8B347C;
            }


    #nav li.nav-active > .nav-level2 li.nav-active > .nav-level3.nav-subnav-visible {
        -webkit-transition: margin-top 300ms ease-in-out;
        -moz-transition: margin-top 300ms ease-in-out;
        -ms-transition: margin-top 300ms ease-in-out;
        -o-transition: margin-top 300ms ease-in-out;
        transition: margin-top 300ms ease-in-out;
    }

        #nav li.nav-active > .nav-level2 li.nav-active > .nav-level3.nav-subnav-visible a {
            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            -o-transition: none;
            transition: none;
        }


    /*#endregion */

}

@media screen and (min-width:870px) {
    #nav li a {
        font-size: 110%;
        padding-right: 35px;
    }

    #nav li > .nav-level3 li a {
        font-size: 110%;
    }

    #nav.nav-level2-expand li.nav-active > .nav-level2 li a {
        padding-right: 30px;
    }
}

@media screen and (max-width:739px) {

    #nav-button {
        display: block;
        float: right;
        margin: 25px 20px 0 0;
        color: white;
        cursor: pointer;
    }

    /* push out the content areas */
    .box3.nav-mobile-expand, .box4.nav-mobile-expand, .box5.nav-mobile-expand, .box6.nav-mobile-expand {
        margin-left: 80%;
        opacity: 0.5;
    }

    #nav-level2-box {
        height: 100%;
        width: 0;
        min-width: 0;
        background-color: #1c181b;
        -moz-transition: width 400ms ease-in, min-width 400ms ease-in;
        -o-transition: width 400ms ease-in, min-width 400ms ease-in;
        -webkit-transition: width 400ms ease-in, min-width 400ms ease-in;
        transition: width 400ms ease-in, min-width 400ms ease-in;
        
    }

        #nav-level2-box.nav-mobile-expand {
            height: 100%;
            min-width: 200px;
            width: 80%;
            display: block;         
        }

    #nav {
        position: absolute;
        top: 65px;
        min-width: 200px;
        width: 80%;
        height: 100%;
        min-height: 100%;
        /*float: left;*/
        /*-moz-animation: slidein 400ms ease-in;
        -o-animation: slidein 400ms ease-in;
        -webkit-animation: slidein 400ms ease-in;
        animation: slidein 400ms ease-in;*/
        -moz-transition: left 400ms ease-in;
        -o-transition: left 400ms ease-in;
        -webkit-transition: left 400ms ease-in;
        transition: left 400ms ease-in;
        left: -200%;
        display: block;
        overflow-y:auto;
        
    }

        #nav li {
            float: none;
            height: 100%;
            width: 100%;
            border-top: dotted 1px #40383e;
            height:60px;
        }

            #nav li:last-child {
                border-bottom: dotted 1px #40383e;
            }


            #nav li.nav-back-level1, #nav li.nav-back-level2 {
                border-top: none;
            }


        /*#nav > li {
            position: relative;
            width: 100%;
            display: block;
            left: -200%;
            -moz-transition: left 400ms ease-in;
            -o-transition: left 400ms ease-in;
            -webkit-transition: left 400ms ease-in;
            transition: left 400ms ease-in;
        }*/


        #nav li a {
            min-width: 200px;
            width: 85%;
            height: 100%;
            padding-left: 40px;
            margin-right: 0;
            padding-right: 0;            
            
        }

            #nav li a i {
                position: absolute;
                top: 20px;
            }

        #nav li > .nav-level2,
        #nav li > .nav-level3 {
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            top: 0;
            left: -200%;
            -moz-transition: left 400ms ease-in;
            -o-transition: left 400ms ease-in;
            -webkit-transition: left 400ms ease-in;
            transition: left 400ms ease-in;
        }

        #nav.nav-mobile-expand {
            left: 0;
            padding-left: 0;
            
        }      

       
        #nav.nav-mobile-level2-expand > li > a,
        #nav.nav-mobile-level3-expand > li > a
        
         {
            left: -200%;
            
        }

        #nav.nav-mobile-level2-expand li.nav-active > .nav-level2 {
            left: 0;
            padding-left: 0;
        }


        #nav.nav-mobile-level3-expand li .nav-level2 li > a {
            left: -200%;
        }


        #nav.nav-mobile-level3-expand li.nav-active > .nav-level3 {
            left: 200%;
            padding-left: 0;
            
        }

}