#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-head { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 999999; position: relative; }  
#cssmenu:after, #cssmenu > ul:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
#cssmenu #menu-head { display: none; }  
#cssmenu { line-height: 1; display: table;float: left; }  
#cssmenu > ul > li { float: left; }  
#cssmenu.align-center > ul { font-size: 0; text-align: center; }  
#cssmenu.align-center > ul > li { display: inline-block; float: none; }  
#cssmenu.align-center ul ul { text-align: left; }  
#cssmenu.align-right > ul > li { float: right;}  
#cssmenu.align-right ul ul { text-align: right; }  
#cssmenu > ul > li > a { padding: 0px 20px 0 20px; font-size: 14px; text-decoration: none; color:#000; line-height: 26px; font-weight: 700;letter-spacing:0.5px; }  
.freeze #cssmenu > ul > li > a { padding: 0px 20px 0 20px; font-size: 14px; text-decoration: none; color:#000; line-height: 26px; font-weight: 700;letter-spacing:0.5px; }  

#cssmenu > ul > li:hover > a {color: #27ADE3 !important;} 
#cssmenu > ul > li > a.active {color: #27ADE3 !important;} 
#cssmenu > ul > li:first-child > a {} 
#cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a {color: #000;} 
#cssmenu > ul > li.has-sub > a {padding-right: 25px;}
    #cssmenu > ul > li.has-sub > a::after { position: absolute;  right: 10px; content: "+"; /* Change content to "+" */ font-weight: bold; /* Optionally, make the "+" symbol bold */ font-size: 14px; /* Optionally, adjust font size */ }
.freeze #cssmenu > ul > li.has-sub > a::after { position: absolute; right: 10px; content: "+"; font-weight: bold; font-size: 14px; }
#cssmenu > ul > li.has-sub:hover > a::after {  content: "-"; font-weight: bold; font-size: 18px; right: 10px; }
#cssmenu ul ul { position: absolute; left: -9999px; z-index: 99; top: 25px; width: 250px; background: #fff; box-shadow: rgba(0,0,0,0.2) 0px 0px 5px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; border-bottom:5px solid #27ADE3; }  
#cssmenu > ul > li > ul { }  
#cssmenu > ul > li > ul:before { display: none; content: ""; position: absolute; top: -6px; left: 60px; width: 12px; height: 12px; background: #1689ca; z-index: 100; transform: rotate(135deg); }  
#cssmenu li:hover > ul { left: 0; }  
#cssmenu.align-right li:hover > ul { right: 0; }  
#cssmenu ul ul ul { margin-left: 100%; top: 0px; }  
#cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; }  
#cssmenu ul li:hover > ul > li:last-child { border: 0; }  
#cssmenu ul ul li { height: auto; }  
#cssmenu ul ul li a { padding: 10px 12px 10px 17px; display: block; width: 100%; font-size: 13px; text-decoration: none; color: #111; font-weight: 700; line-height: 26px;letter-spacing:0.5px;border-top: 1px solid rgba(102, 102, 102,0.15); }  
#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #fff; padding-left: 20px; background-color: #27ADE3; }  
#cssmenu ul ul li.has-sub > a::after { position: absolute; top: 15px; right: 15px; width: 5px; height: 5px; border-bottom: 1px solid #000; border-right: 1px solid #000; content: ""; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }  
#cssmenu.align-right ul ul li.has-sub > a::after { right: auto; left: 10px; border-bottom: 0; border-right: 0; border-top: 1px solid #27ADE3; border-left: 1px solid #27ADE3; }  
#cssmenu ul ul li.has-sub:hover > a::after { border-color: #fff; } 

@media all and (max-width:768px), only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:991px), only screen and (min--moz-device-pixel-ratio:2) and (max-width:991px), only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:991px), only screen and (min-device-pixel-ratio:2) and (max-width:991px), only screen and (min-resolution:192dpi) and (max-width:991px), only screen and (min-resolution:2dppx) and (max-width:991px) 
{  #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-head { position: relative; }  
   #cssmenu { width: 100% !important; display: block; padding-top: 0px; background-color: #fff; }  
   #cssmenu ul { width: 100%; display: none; overflow: hidden; }  
   #cssmenu > ul > li > a { font-size: 14px; line-height: 30px; padding: 10px 20px 10px 20px; }  
   #cssmenu > ul > li:hover > a { color: #000 !important; background-color: #eee; }  
   #cssmenu.align-center > ul, #cssmenu.align-right ul ul { text-align: left; }  
   #cssmenu ul ul { border-radius: 0px; width: 100%; margin: 0px; padding: 0; }  
   #cssmenu ul li, #cssmenu ul ul li, #cssmenu ul li:hover > ul > li { width: 100%; float: none; height: auto; background: #fff; }  
   #cssmenu ul li { background-color: #fff; }  
   #cssmenu ul li li { max-width: 100%; }  
   #cssmenu > ul > li:hover > a { background: #eee !important; }  
   #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; color: #000; text-align: left; border-top: 1px solid rgba(84, 101, 111,0.2); }  
   #cssmenu ul ul li a img { display: none; }  
   #cssmenu ul ul li a span { display: none; }  
   #cssmenu > ul > li, #cssmenu.align-center > ul > li, #cssmenu.align-right > ul > li { float: none; display: block; }  
   #cssmenu ul ul li a { padding: 10px 20px 10px 20px; line-height: 20px; font-size: 14px; color: #000; background: none; font-weight: normal; text-align: left; }  
   #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #000; background-color: #fff; }  
   #cssmenu ul ul ul li a { padding-left: 50px; line-height: 40px; }  
   #cssmenu ul ul, #cssmenu ul ul ul { position: relative; left: 0; right: auto; width: 100%; margin: 0; top: 0px; }  
   #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after { top: 16px; right: 20px; width: 10px; height: 10px; }  
   #cssmenu > ul > li.has-sub:hover > a::after { border-color: #000; top: 20px; }  
   #cssmenu > ul > li.has-sub.active > a::after { border-color: #000; top: 20px; }  
   #menu-line { display: none; }  
   #cssmenu #menu-head { display: table; width: 100%; padding: 10px 10px 10px 10px; background-color: #fff; }  
   #cssmenu #menu-button { display: inline-block; float: right; padding-top: 26px; color: #000; cursor: pointer; font-size: 8px; text-transform: uppercase; } 
   #cssmenu #menu-button::after { content: ''; position: absolute; top: 14px; right: 9px; display: block; width: 24px; height: 2px; background: #000; }  
   #cssmenu #menu-button::before { content: ''; position: absolute; top: 21px; right: 9px; display: block; width: 24px; height: 9px; border-top: 2px solid #000; border-bottom: 2px solid #000; }  
   #cssmenu .menu-icon { display: inline-block; float: left; margin-right: 15px; }  
   #cssmenu .menu-icon a { display: block; color: #000; text-transform: uppercase; font-size: 8px; padding-top: 2px; text-align: center; }  
   #cssmenu .menu-icon a i { display: block; font-size: 18px; padding-bottom: 6px; color: #000; }  
   #cssmenu .submenu-button { position: absolute; z-index: 9999999; right: 0; top: 0px; display: block; height: 40px; width: 50px; cursor: pointer; }  
}                                                                                                                                                                                                                                                                                                                                                                                                                                                    #cssmenu > ul > li > ul { padding-top: 0px; } }