/* NAVBAR */

header .navbar
{
    min-height: 20px;
    margin-top: 30px;

    border: none;
    background: #96b347;
}

/* NAVBAR HEADER + BRAND */

header .navbar .navbar-header
{
    border-bottom: none !important;
}

header .navbar a.navbar-brand
{
    position: relative;
    z-index: 2;

    display: block !important;

    width: 100%;
    max-width: 210px;
    margin: -6px 0 0 0 !important;
    /* Transition logo width */

    -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
         -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
}

header .navbar .navbar-header button.navbar-toggle
{
    border: none;
    background: #fff !important;
}

/* NAVBAR PRIMARY UL */

header .navbar ul.navbar-nav
{
    float: right;
}

header .navbar ul.navbar-nav > li
{
    /*margin: 0 20px 0 !important;*/
    margin: 0 !important;

    background-repeat: none !important;
}

header .navbar ul.navbar-nav > li:hover
{
    background: #206553;
}

header .navbar ul.navbar-nav > li.selected
{
    background-color: #f39728 !important;
}

header .navbar ul.navbar-nav > li.open > a
{
    background-color: #206553 !important;
}

header .navbar .navbar-nav > li > a
{
    font-size: 16px;
    font-weight: 500;

    padding: 58px 30px 10px;

    -webkit-transition: .5s ease-in;
       -moz-transition: .5s ease-in;
         -o-transition: .5s ease-in;
            transition: .5s ease-in;
    text-align: center;
    text-transform: none;

    color: #fff !important;
    background-position: top center;
}

header .navbar .navbar-nav > li:nth-of-type(1) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconB.png);
}

header .navbar .navbar-nav > li:nth-of-type(2) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconC.png);
}

header .navbar .navbar-nav > li:nth-of-type(3) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconH.png);
}

header .navbar .navbar-nav > li:nth-of-type(4) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconJ.png);
}

header .navbar .navbar-nav > li:nth-of-type(5) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconN.png);
}

header .navbar .navbar-nav > li:nth-of-type(6) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconP.png);
}

header .navbar .navbar-nav > li:nth-of-type(7) > a
{
    background-image: url(/templates/nokomispetclinic/skins/v1/structure/icons/iconA.png);
}


/* NAVBAR DROPDOWN MENU */

header .navbar ul.dropdown-menu
{
    border: none;
    border-radius: 0;
}
header .navbar ul.dropdown-menu > li
{
    margin-bottom: 0;
}
header .navbar ul.dropdown-menu > li > a
{
    font-size: 1em !important;
    padding-top: 5px;
    padding-bottom: 5px;
}
header .navbar ul.dropdown-menu > li > a:hover
{
    color: #fff;
    background: #ff8600;
}


/* CUSTOM BREAKPOINTS - MUST BE DECLARED BEFORE COLLAPSE */

@media (max-width: 990px)
{
    header .navbar a.navbar-brand
    {
        width: 200px;
    }

    header .navbar .navbar-nav > li > a
    {
        padding: 58px 20px 10px;
    }
}


/* NAVBAR COLLAPSE */

header .navbar .collapsing,
header .navbar .collapse.in
{
    position: relative;
    z-index: 1;

    padding-top: 30px;

    border-top: none;
    background: #fff;
}

@media (max-width: 767px)
{
    
    header .navbar
    {
        margin: 0 !important;
    }

    header .navbar .navbar-nav
    {
        float: none;
    }

    header .navbar-header
    {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .navbar a.navbar-brand
    {
        width: 135px;
        top: -6px !important;
    }
    
    header .navbar .collapse,
    header .navbar .collapsing,
    header .navbar .collapse.in
    {
        /*border: 1px solid blue;*/
        padding: 0 !important;
    }

    header .navbar .navbar-nav
    {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 15px !important;
    }

    header .navbar ul.navbar-nav > li,
    header .navbar ul.navbar-nav > li.open > a
    {
        background: #fff !important;
    }

    header .navbar .navbar-nav > li > a
    {
        width: 100% !important;

        padding: 15px 20px;

        text-align: left;

        color: #666 !important;
        background-image: none !important;
        background: #fff !important;
    }

    header .navbar ul.dropdown-menu > li > a
    {
        text-align: left;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 1.1em !important;
    }

}