/* #Top Menu Styles
================================================== */
.menu-toggle{
    display:none;
    background:#3fb7de;
    padding:10px;
    text-align:right;
    color:#ffffff;
}

.menu-toggle i{
    color:#ffffff;
    font-size:30px;
    padding:0px 0px 0px 10px;

}

.menu-wrapper{
    background:url('img/menu-bg.jpg') no-repeat #3fb8df;
}

.menu {
    border: solid 0px #000000;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.menu ul {
    margin: 0px;
    margin-left: 10px;
    padding: 0px;
}

.menu ul ul li {
    border:none;
}

.menu ul ul{display:none;}
.menu ul li.menu-1{border-top:solid 3px #32366f;}
.menu ul li.menu-2{border-top:solid 3px #2f9cbe;}
.menu ul li.menu-3{border-top:solid 3px #f47321;}
.menu ul li.menu-4{border-top:solid 3px #a72729;}
.menu ul li.menu-5{border-top:solid 3px #b94b99;}
.menu ul li.menu-6{border-top:solid 3px #f4d921;}
.menu ul li.menu-7{border-top:solid 3px #68a952;}
.menu ul li.menu-8{border-top:solid 3px #2492b7;}

.menu{
    margin: 0;
    padding: 0;
    z-index: 100;
}

.menu ul {
    margin: 0px 0px 0px 30px;
    padding: 0px;
}

.menu ul li {
    float: left;
    list-style: none;
    padding: 0px 0px 0px 0px;
    position: relative;
    list-style-type: none;
    text-transform:  uppercase;
    font-size: 13px;
    border-top:solid 3px red;
    margin:-3px 2px 0px 2px;
}

.menu ul li a {
    color: #ffffff;
    display: block;
    font-size: 1em;
    margin: 0px 0px 0px 0px;
    padding: 0px 15px 0px 10px;
    text-decoration: none;
    line-height:50px;
    cursor:pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.menu ul li.active a, .menu ul li.hover a,.menu ul li a:hover {
    background:#ffffff;
    color: #838383;
}

.menu ul li.active ul a, .menu ul li.hover ul a,.menu ul ul li a:hover {
    background:#444444;
    color: #ffffff;
}

.menu ul ul {
    display: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    position: absolute;
    width: 200px;
    z-index: 2000;
    background: #4D4F50;
    top:100%;
}

.menu ul ul li {
    float: none;
    height: auto;
    list-style: none;
    margin: 0px;
    padding:0;
    z-index: 2001;
}

.menu ul li ul li a,.menu ul li.hover ul li a{
    border-top: 0px solid #EEEEEE;
    color: #ffffff;
    display: block;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    padding: 8px 22px 8px 10px;
    z-index: 2002;
    line-height:17px;
    font-family:Arial;
}

.menu ul ul li>a:hover,.menu ul li.active ul li>a:hover,.menu ul li.hover ul li>a:hover {
    color:#444444;
    background:#ffffff;
}

.menu ul ul li:first-child a,.menu ul li.active ul li:first-child a,.menu ul li.hover ul li:first-child a {
    margin-left: 0px;
    border-top: none;
}

.menu ul ul ul {
    top: 0px;
    left: 100%;
}

.menu ul li .sub-arrow {
    background: url('img/sub-bottom-ffffff.png') no-repeat;
    top: 50%;
    display: block;
    height: 6px;
    right: 0px;
    margin: 0px 0px 0px -3px;
    position: absolute;
    text-indent: -9999px;
    width: 9px;
}

.menu ul li ul li a.sub .sub-arrow {
    background: url('img/sub-right-ffffff.png') no-repeat;
    top: 50%;
    display: block;
    height: 9px;
    left: auto;
    right: 5px;
    margin: -4px 0px 0px 0px;
    position: absolute;
    text-indent: -9999px;
    width: 7px;
}

.menu ul li ul li a.sub:hover .sub-arrow {
    background: url('img/sub-right-ffffff.png') no-repeat;
}

@media screen and (max-width: 767px) {
    .menu-wrapper{
        background-image: none;
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .menu ul li.menu-1,
    .menu ul li.menu-2,
    .menu ul li.menu-3,
    .menu ul li.menu-4,
    .menu ul li.menu-5,
    .menu ul li.menu-6,
    .menu ul li.menu-7{
        border:none;
    }
    .menu-wrapper ul{
        padding:0;
        margin:0;
    }
    .menu ul li{
        float:none;
        padding:0px;
        margin:0;
    }

    .menu ul ul {
        display: block;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        position: relative;
        width: 100%;
        z-index: 2000;
        background: #4D4F50;
        top:0px;
    }

    .menu ul li a{border-top:solid 1px #ffffff;}
}