/* RESET STYLES */
*,  ul, ol, li { margin:0; padding:0 }










nav{display:block;
font-size: 18px; font-weight: lighter; text-align:center;
}

.menu{display:block; text-align: right; }

.menu li{display: inline-block; transition: all 0.3s;
position: relative;
padding: 0px 3px;
text-align: left;
z-index:100;}

.menu li:first-child{margin-left:0; }

.menu li a {
text-decoration:none;
padding: 7px 5px 6px 5px;
display:block;
color: white;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover> a{color:#ffffff; 
background: white;
color: black;}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 160px;
position: absolute;
top: 34px;
left: 0px;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:16px;
display:block;
color:#797979;
border-left:3px solid gray;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid gray;
color:#797979;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
	top: 0px;
}





.mobile-menu
{display:none; transition: all 0.3s;
font-size: 18px; color: white; font-weight: lighter; text-align:right; text-decoration:none; 
width:100%;
padding: 7px 0px 6px 0px;

}
.mobile-menu:hover{background: none;
color:white;
text-decoration: underline;
}




@media (max-width: 1270px) {



.menu{display:none; }

.mobile-menu{display:block;  transition: all 0.3s;}

nav{margin: 0; 
background:none;}

.menu li{
	display:block;	
	margin:0;
	text-align: right;
}

.menu li a {background:#ffffff;
color:black;
border-top:1px solid #e0e0e0;
border-right:3px solid gray;
padding-right: 10px;
}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-right:3px solid gray;}

.menu ul {display:block;
position:relative;
top: 0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}





@media all and (max-width: 615px) {

/*.mobile-menu{display:block; transition: all 0.3s;
font-family: 'Roboto', sans-serif; font-size: 15px; color: white; font-weight: lighter; text-align:right; text-decoration:none; 
width:100%;
padding: 6px 0px 6px 0px;
text-transform:uppercase;
}
.mobile-menu:hover{background: black;
color:white;
text-decoration: underline;
}*/


}