.dropdowns {
    width:auto;
}

.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {
    margin: 0; padding: 0;
}

.dropdowns a {
    text-decoration: none;
}

.mobile_nav {
    display:  none;
}

.nav {
    list-style: none;
     *zoom: 1;
}

.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}

.nav:after {
    clear: both;
}

.nav ul {
    list-style: none;
    width:9em;
}

.nav a {
    padding: 5px 10px;
    margin: 0 13px;
    color:#fff;
}

.nav li{
    position: relative;
}

.nav > li {
    float: left;
}

.nav > li > a >i{
    font-size:21px;
}

.nav > li > a {
    display: block;
    padding: 12px 0px 13px;
    font-size: 14px;
    font-weight: 400;
    transition:color 0.5s ease;
}

.nav > li:first-child > a {
    padding:12px 0px 13px;
}

.nav > li:last-child > a {
    padding:12px 0px 13px;
}

.nav > li > a:hover {
    color:#b77c02;
}

.nav li li{
    min-width:200px;
    width:auto;
}

.nav li ul {
    position: absolute;
    left: -9999px;
}

.nav > li.hover > ul {
    left: 0;
}

.nav li li.hover ul {
    left: 100%;
    top: 0;
}

.nav li li a {
    display: block;
    position: relative;
    z-index:100;
    background: #21272a;
}

.nav li li li a {
    z-index:200;
    background:#21272a;
}

@media only screen and (max-width: 1080px) and (min-width: 960px) {

    .nav > li > a {
        display: block;
        padding: 12px 0px 13px;
        font-size: 14px;
        font-weight: 300;
    }

}

@media only screen and (max-width: 960px) and (min-width: 768px) {

    .mobile_nav {
        display:block;
        width:100%;
    }

    a.toggleMenu {
        color: #fff;
        padding:4px 10px; 
        margin:5px;
        font-size:21px;
        float:right;
    }

    a.call{
        color:#fff;
        padding:4px 10px; 
        margin:5px;
        font-size:21px;
    }

    a.map{
        color:#fff;
        padding:4px 13px; 
        margin:5px;
        font-size:21px;
    }

    a.toggleMenu:hover, a.call:hover, a.map:hover{
        color:#000;
        background:#fff;
    }

    .active {
        display: block;
    }
    
    .nav > li:first-child {
        margin:15px 0 0 0;
    }
    
    .nav > li:last-child {
        margin:0 0 10px 0;
    }

    .nav > li {
        float: none;
    }

    .nav > li > .parent {
        background-position: 95% 50%;
    }

    .nav ul {
        display: block;
        width: 100%;
    }

   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

    .nav > li > a {
        padding: 10px 10px;
    }

    .nav li li a {
        padding:10px 10px;
    }
}

@media screen and (max-width: 768px) {
    
    .mobile_nav {
        display:block;
        min-height:50px;
        width:100%;

    }

    a.toggleMenu {
        color: #fff;
        padding:4px 10px; 
        margin:5px;
        font-size:21px;
        float:right;
    }

    a.call{
        color:#fff;
        padding:4px 10px; 
        margin:5px;
        font-size:21px;
    }

    a.map{
        color:#fff;
        padding:4px 13px; 
        margin:5px;
        font-size:21px;
    }

    a.toggleMenu:hover, a.call:hover, a.map:hover{
        color:#000;
        background:#fff;
    }

    .active {
        display: block;
    }

    .nav > li {
        float: none;
    }

    .nav > li > .parent {
        background-position: 95% 50%;
    }

    .nav ul {
        display: block;
        width: 100%;
    }

   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

    .nav > li > a {
        padding: 10px;
    }

    .nav li li a {
        padding:10px;
    }

    .nav > li:first-child > a {
    padding:10px;
    }

    .nav > li:last-child > a {
        padding:10px;
    }

}