.menu{display:block;margin:0;padding:0;text-align:right}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{
font-weight:500;
text-decoration:none;
padding:15px 30px 14px 30px;
display:block;
color:#fff;
transition:all 0.2s ease-in-out 0s;
text-shadow:0px 1px 1px #111;
font-family:'Roboto Condensed', arial, sans-serif;
font-size:14px;
text-transform:uppercase
}
.menu li a:hover,
.menu li:hover>a {color:#fff;font-weight:500}
.menu ul{
visibility:hidden;
opacity:0;
margin:0;
padding:0;
width:190px;
position:absolute;
left:0px;
box-shadow:1px 1px 20px 1px #BBB;
background:#ebfffc;
z-index:99;
transform:translate(0, 20px);
transition:all 0.2s ease-out;
}
.menu ul:after{
bottom:100%;
left:20%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(255, 255, 255, 0);
border-bottom-color:#fff;
border-width:6px;
margin-left:-6px;
}
.menu ul li{
display:block;
float:none;
background:none;
margin:0;
padding:0;
text-align:left;
background-color:#fff
}
.menu ul li a{
font-size:15px;
font-weight:normal;
display:block;
color:#693033;
text-transform:capitalize;
text-shadow:none;
border:1px solid #CCC;
border-top:none;
padding:10px 19px;
}
.menu ul li a:hover{
background-color:#8500ff;
color:#fff;
}
.menu ul li:hover>a {
background:#8500ff;
color:#fff;
}
.menu li:hover>ul {
visibility:visible;
opacity:1;
transform:translate(0, 0);
}
.menu ul ul {
left:169px;
top:0px;
visibility:hidden;
opacity:0;
transform:translate(20px, 20px);
transition:all 0.2s ease-out;
}
.menu ul ul:after {
left:-6px;
top:10%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(255, 255, 255, 0);
border-right-color:#fff;
border-width:6px;
margin-top:-6px;
}
.menu li>ul ul:hover {
visibility:visible;
opacity:1;
transform:translate(0, 0);
}
.responsive-menu {
display:none;
width:100%;
padding:20px 15px;
background:#E95546;
color:#fff;
text-transform:uppercase;
font-weight:600;
}
.responsive-menu:hover {
background:#E95546;
color:#fff;
text-decoration:none;
}

@media (min-width:768px) and (max-width:979px) {
.mainWrap { width:768px; }
.menu ul { top:37px; }
.menu li a { font-size:12px; }
a.homer { background:#E95546; }
}

@media (max-width:767px) {
.mainWrap{width:auto;padding:50px 20px}
.menu{display:none}
.responsive-menu{display:block}
.menu li{display:block;margin:0}
.menu li a{background:#fff;color:#797979}
.menu li a:hover,
.menu li:hover>a{background:#FC6D58;color:#fff}
.menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
.menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}
.menu ul ul{left:0;transform:initial}
.menu li>ul ul:hover{transform:initial}
}