menu item special class doesn't work

Hi
I’m trying to change the color of one menu item (first one phone number) to stand up more by using CSS Class( special-color) under menu options. Then I’m adding the code that is below to quick css. I tried few times and nothing seems to work to change just the color of first menu item. Can you help with that? Thank you

(833) 4-TelCom
Custom Link ↑ | ↓Edit Menu Item
URL
#
Navigation Label
(833) 4-TelCom
Title Attribute
CSS Classes (optional)
special-color
Menu Style

———

special-color {

color: ##e3622b !important;
}

This is my whole quick css

.home main {
padding-top:0 !important;
}

.avia-content-slider .slide-meta { display: none; }

.text-slider .maintitle, .text-slider .subtitle {
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

#menu-item-383 > a > .avia-menu-text { color: #c3512f; }

#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: transparent;
color: #333333;
border-bottom: 0px !important;
}

a:hover .avia-menu-text {
background-color: #0e76bc !important;
color: #fff !important;
}

.sub-menu > li > a {
opacity:1;

}
.sub-menu > li:hover > a {
color: #ffffff !important;
font-weight: bold !important;
background: #0e76bc !important;
border: #333333 !important;
}

.post-meta-infos{
display: none;
}

.avia-content-slider .slide-entry .slide-content {
color: #555555;
}

.avia-content-slider .slide-entry-title {
font-size: 16px;
color: #333333 !important;
}

.center_this {
left: 50%;
transform: translateX(-50%);
}

special-color {

color: ##e3622b !important;
}