.menu {
	float:left;
    z-index: 1;
}
.menu ul{
	margin-left:6px;
}
.menu li{
	float:left;	
}
.menu li a{
	 color:#FFF;
	 font-size:1em;
	 padding:25px 50px;
	 display: block;
	 text-align:center;
	 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;
	}
 }