#xo-smart-menu-button { display: inline-block; margin: 0; padding: 10px 8px; width: 42px; height: 42px; border: #ccc solid 1px; border-radius: 3px; background-color: #fff; cursor: pointer; }
#xo-smart-menu-button .button-icon { width: 100%; height: 100%; background-image: url('images/menu_button.svg'); background-size: 100% 100%; }

#xo-smart-menu-overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: #000; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; z-index: 100000; }
#xo-smart-menu-close-button { display: none; position: absolute; top: 6px; left: -40px; cursor: pointer; }
#xo-smart-menu-close-button:before { content:" "; display:inline-block; width: 32px; height: 32px; background-image: url('images/close-button.svg'); background-repeat: no-repeat; background-size: 28px 28px; background-position: 4px 4px; }
#xo-smart-menu-slide { position: fixed; top: 0; right: -70%; width: 70%; max-width: 320px; height: 100%; opacity: 0; z-index: 100001; transition: 0.3s ease-in-out; }
#xo-smart-menu-slide nav { overflow: auto; background-color: #fafafa; height: 100%; }
#xo-smart-menu-slide.smart-menu-open { opacity: 1; right: 0; }
#xo-smart-menu-menu { border-top: solid 1px #ccc; background-color: #fafafa; }
#xo-smart-menu-menu,
#xo-smart-menu-menu ul { list-style: none; margin: 0; }
#xo-smart-menu-menu a { display: block; text-decoration: none; text-align: left; color: #333; padding: .5rem 0; font-size: 1.0em; font-weight: normal; border-bottom: solid 1px #ddd; }
#xo-smart-menu-menu a:hover { background-color: #eee; }
#xo-smart-menu-menu li { white-space: nowrap; }
#xo-smart-menu-menu li > a { padding-left: 1em; }
#xo-smart-menu-menu li li a { padding-left: 2em; }
#xo-smart-menu-menu li li li a { padding-left: 3em; }
#xo-smart-menu-menu li li li li a { padding-left: 4em; }
#xo-smart-menu-menu li li li li li a { padding-left: 5em; }