.menu-wrapper {
    text-align: right;
}

.menu-wrapper ul {
    list-style-type: none;
    padding-left: 0;
}

.menu-wrapper ul li {
    text-align: left;
    background: transparent;
}

.menu-wrapper ul li a,
.menu-wrapper .sf-menu a {
    display: block;
    padding: 30px 22px 12px 12px !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    color: #050505;
}

.menu-wrapper ul .current_page_item a,
.menu-wrapper ul a:hover {
    background-color: #27c6f4;
    box-shadow: 1px 3px 0px 0.00px rgba(29, 125, 183, 0.88);
    color: #ffffff;
}

.menu-wrapper .sf-menu a {
    border: 0;
    padding: .75em 1em;
    text-decoration: none;
    zoom: 1;
}

.menu-wrapper .sf-arrows .sf-with-ul:after {
    right: 4px;
    border: 5px solid transparent;
    border-top-color: rgba(8, 8, 8, 0.5);
    border-top-color: rgba(8, 8, 8, 0.5);
    top: 63%;
}

.menu-wrapper .sf-menu ul li {
    background: #ccc;
}
.menu-wrapper .sf-menu li:hover,
.menu-wrapper .sf-menu li.sfHover {
	background: #ccc;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}
.menu-wrapper ul.sf-menu li ul li a{
    padding-top: 12px !important;
}
.menu-wrapper .sf-arrows ul .sf-with-ul:after{
    top: 50%;
}
.menu-wrapper .sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-top-color: transparent;
	border-left-color: rgba(8, 8, 8, 0.5); /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(8, 8, 8, 0.5);
}