/* Главное меню */
#burger { display:none; }
UL.mainmenu { display:block; margin:0px; padding:0px; font-size:110%; font-family:verdana,sans-serif; }
UL.mainmenu .popupmenu { display:none; margin:0px; padding:0px; }
UL.mainmenu .popupmenu UL { margin:0px; padding:0px; }
UL.mainmenu LI { list-style-type:none; margin:0px; padding:0px; }
UL.mainmenu>LI>.popupmenu { font-size:92%; font-family:arial,sans-serif; }
UL.mainmenu A { display:block; text-decoration:none; white-space:nowrap; padding:4px 20px 5px 20px; }
UL.mainmenu A:hover { text-decoration:none; }
UL.mainmenu .popupmenu A { padding-right:15px; }

/* для десктопов */
@media all and (min-width:801px) {
#burger { display:none; }
UL.mainmenu { position:static; white-space:nowrap; background-color:transparent; }
UL.mainmenu .popupmenu UL { min-width:10em; background-color:#fff; border:1px solid #889; box-shadow:1px 1px 2px #bbc; }
UL.mainmenu A { color:226; }
UL.mainmenu A:visited { color:#226; }
UL.mainmenu A:hover { color:#fff; background-color:#889; }
UL.mainmenu>LI { display:inline-block; min-width:6em; vertical-align:top; }
UL.mainmenu>LI>.popupmenu { position:absolute; z-index:10; }
UL.mainmenu>LI:hover { background-color:#F6F2E4; }
UL.mainmenu>LI:hover>.popupmenu { display:block; }
UL.mainmenu>LI:hover>.popupmenu>UL>LI:hover { background-color:#F6F2E4; }
UL.mainmenu>LI:hover>.popupmenu>UL>LI:hover>.popupmenu { display:block; }
UL.mainmenu>LI>.popupmenu>UL>LI { position:relative; }
UL.mainmenu>LI>.popupmenu>UL>LI>.popupmenu { float:right; }
UL.mainmenu>LI>.popupmenu>UL>LI>.popupmenu>UL { position:absolute; top:0px; margin-left:-8px; }
UL.mainmenu>LI>.popupmenu>UL>LI:first-child>.popupmenu>UL { top:-1px; }
UL.mainmenu>LI>.popupmenu>UL>LI:last-child  A.popuphref { padding-bottom:10px; }
UL.mainmenu A.popuphrefup { padding-right:7px; }
UL.mainmenu A.popuphrefup>SPAN { padding-right:20px; background-repeat:no-repeat; background-position:100% 50%; }
UL.mainmenu A.popuphrefup>SPAN { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUlJVX///8HSlS8AAAAAnRSTlP/AOW3MEoAAAABYktHRAH/Ai3eAAAAJklEQVR42mNgRAMMtBJggIhCKAY4EyYMk4TyYWYwwPiM6DRtXAoAgJkA8Vjm9Q4AAAAASUVORK5CYII=); }
UL.mainmenu A.popuphrefup:hover>SPAN { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAABYktHRACIBR1IAAAAH0lEQVR42mNgoBdgZESm4EwkPpiDwgeJMKKbQ1NXAgAJhwARPBzqhQAAAABJRU5ErkJggg==); }
UL.mainmenu .popupmenu A { padding-top:6px; padding-bottom:6px; }
UL.mainmenu .popupmenu A.popuphref { background-repeat:no-repeat; background-position:3px 50%; padding-top:8px; padding-bottom:8px; }
UL.mainmenu .popupmenu A.popuphref { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUAAJn///9lkTHzAAAAAnRSTlP/AOW3MEoAAAABYktHRAH/Ai3eAAAAKElEQVR42mNgRAMMxAowYAgwoGuBiyBkMDUz4FeBbgaGLQykOx2PAACACQDxa8jN/QAAAABJRU5ErkJggg==); }
UL.mainmenu .popupmenu A.popuphref:hover { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAABYktHRACIBR1IAAAAF0lEQVR42mNgIBcwYghQRYRUPqY7KAIAChcAEUdfgakAAAAASUVORK5CYII=); }
}
/* для смартфонов */
@media all and (max-width:800px) {
#burger { display:block; }
UL.mainmenu { position:absolute; left:-20em; width:19em; overflow:hidden; z-index:10; background-color:#F6F2E4; border:1px solid #889; box-shadow:1px 1px 2px #bbc; }
UL.mainmenu { left:-20em; } UL.hidemainmenu { left:-20em; transition: left 200ms linear 0s; } UL.showmainmenu { left:0px !important; transition: left 200ms linear 0s; }
UL.mainmenu A { color:#226; }
UL.mainmenu A:visited { color:#226; }
UL.mainmenu A:hover { color:#fff; background-color:#889; }
UL.mainmenu .popupmenu UL { background-color:#fff; }
UL.mainmenu .popupmenu A { color:#226; }
UL.mainmenu .popupmenu A:visited { color:#226; }
UL.mainmenu .popupmenu A:hover { color:#fff; background-color:#889; }
UL.mainmenu>LI { display:block; }
UL.mainmenu>LI>.popupmenu { position:static; }
UL.mainmenu>LI>.popupmenu A { padding-left:35px; }
UL.mainmenu>LI>.popupmenu>UL .popupmenu A { padding-left:50px; }
UL.mainmenu>LI>.showpopupmenu { display:block; }
UL.mainmenu>LI>.popupmenu>UL>LI>.showpopupmenu { display:block; }
UL.mainmenu A.popuphrefup { padding-left:0px; padding-top:5px; padding-bottom:6px; }
UL.mainmenu A.popuphrefup>SPAN { padding-left:20px; background-repeat:no-repeat; background-position:3px 50%; }
UL.mainmenu A.popuphrefup>SPAN { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUlJVX///8HSlS8AAAAAnRSTlP/AOW3MEoAAAABYktHRAH/Ai3eAAAAKElEQVR42mNgRAMMxAowYAgwoGuBiyBkMDUz4FeBbgaGLQykOx2PAACACQDxa8jN/QAAAABJRU5ErkJggg==); }
UL.mainmenu A.popuphrefup:hover>SPAN { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAABYktHRACIBR1IAAAAF0lEQVR42mNgIBcwYghQRYRUPqY7KAIAChcAEUdfgakAAAAASUVORK5CYII=); }
UL.mainmenu .popupmenu A.popuphref { background-repeat:no-repeat; background-position:17px 50%; }
UL.mainmenu .popupmenu A.popuphref { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUAAJn///9lkTHzAAAAAnRSTlP/AOW3MEoAAAABYktHRAH/Ai3eAAAAJklEQVR42mNgRAMMtBJggIhCKAY4EyYMk4TyYWYwwPiM6DRtXAoAgJkA8Vjm9Q4AAAAASUVORK5CYII=); }
UL.mainmenu .popupmenu A.popuphref:hover { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX///////9VfPVsAAAAAnRSTlMA/1uRIrUAAAABYktHRACIBR1IAAAAH0lEQVR42mNgoBdgZESm4EwkPpiDwgeJMKKbQ1NXAgAJhwARPBzqhQAAAABJRU5ErkJggg==); }
}