.menu {
    float:left;
    z-index: 1;

}
.menu ul{
    margin-left:6px;
}
.menu li{
    float:left;	
}
.menu li a{
    font-family: 'aller';
    color:#FFF;
    font-size:1em;
    padding:25px 28px;
    display: block;
    text-align:center;
    text-transform: uppercase;
    color:#FFF;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;	
    position:relative;
}

.menu li a:hover{
    background:#50597b;	
    border-bottom:5px solid #11a8ab;
}
.menu li.active a{
    background:#50597b;	
    border-bottom:5px solid #11a8ab;
}
.menu li i img{
    margin-bottom:-10px;
    margin-right:10px;
}
.menu li a span.messages{
    position:absolute;
    top:10px;
    right:20px;
    font-size:1em;
    color:#FFF;
    background:#e64c65;
    padding: 3px 0px 0px 0px;
    width: 25px;
    height: 22px;
    border-radius:0.8em;
    -webkit-border-radius:0.8em;
    -moz-border-radius:0.8em;
    -o-border-radius:0.8em;
}
.toggleMenu {
    display:  none;
    background:#50597B;
    padding:10px 10px 5px 10px;
    border-radius:2em; 
    -webkit-border-radius:2em;
    -moz-border-radius:2em;
    -o-border-radius:2em; 
}
.toggleMenu:hover{
    background:#1F253D;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav > li > a {
    display: block;
}
@media screen and (max-width:800px) {
    .menu {
        margin: 20px 0px 20px 15px;
    }
    .active {
        display: block;
    }
    .menu li a{
        text-align:left;
    }
    .nav {
        list-style: none;
        *zoom: 1;
        width:100%;
        position: absolute;
        left: 0;
        background:#292F46;
        top:95px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
    }
    .nav:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -9px;
        border-left:10px solid rgba(0, 0, 0, 0);
        border-right:10px solid rgba(0, 0, 0, 0);
        border-bottom:10px solid #292F46;
    }
    .menu li a span.messages{
        text-align:center;
        top:15px;
    }
    .nav li ul{
        width:100%;   	
    }
    .menu ul{
        margin:0;
    }
    .nav > li.hover > ul {
        width:100%;
    }
    .nav > li {
        float: none;
        display:block;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
    .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
    .nav li a{
        border-bottom:5px solid rgba(39, 39, 39, 0);
        border-top:1px solid #1F253D;
    }
}
@media all and (max-width: 1024px) {
    .menu li a {
        padding:25px 35px;
    }
}