﻿body > nav.mobile-menu { display: none; }
body.mobile .EndUserStatus,
body.mobile header .Menu,
nav.mobile-menu .toggle-nav { display: none; }
@media only screen and (max-width: 480px) {
    header .Menu .tabs,
    header .EndUserStatus .tabs { display: none; }

    body { margin-top: 60px; }
    body.block-ui { position: relative; }
    body > nav.mobile-menu,
    nav.mobile-menu { display: block; position: absolute; left: 0; top: -60px; padding: 0; width: 100%; background: #0f97d3; }
    nav.mobile-menu .mobile-menu-icon { box-sizing: border-box; display: inline-block; position: relative; margin: 0 5px 0 0; padding: 0; width: 18px; height: 14px; font-size: 0; text-indent: -9999px; appearance: none; transition: background 0.3s; }
    nav.mobile-menu .mobile-menu-icon:focus { outline: none; }

    nav.mobile-menu .toggle-nav { display: block; }
    nav.mobile-menu .mobile-menu-icon span { display: block; position: absolute; top: 50%; margin: -1px 0 0; left: 0; right: 0; height: 2px; background: #fff; transition: background 0s 0.2s; }
    nav.mobile-menu .mobile-menu-icon:after,
    nav.mobile-menu .mobile-menu-icon:before { position: absolute; display: block; left: 0; right: 0; height: 2px; background-color: #fff; content: ""; transition-duration: 0.2s, 0.2s; transition-delay: 0.2s, 0s; }

    nav.mobile-menu .mobile-menu-icon:before { top: 0; transition-property: top, transform; }
    nav.mobile-menu .mobile-menu-icon:after { bottom: 0; transition-property: bottom, transform; }

    nav.mobile-menu.active .mobile-menu-icon span { background: none; display: none; }
    nav.mobile-menu.active .mobile-menu-icon:before { top: 50%; margin-top: -1px; transform: rotate(45deg); transition-property: top, transform; }
    nav.mobile-menu.active .mobile-menu-icon:after { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); transition-property: bottom, transform; }

    nav.mobile-menu.active .mobile-menu-icon:before,
    nav.mobile-menu.active .mobile-menu-icon:after { transition-delay: 0s, 0.2s; }

    nav.mobile-menu > ul { z-index: 1000; box-sizing: border-box; display: none; width: 100%; position: absolute; top: 100%; left: 0px; padding: 10px 15px; box-shadow: 0px 3px 5px rgba(0,0,0,0.3); border-radius: 3px; background: #303030; }
    nav.mobile-menu > ul:after { width: 0px; height: 0px; position: absolute; top: 0%; left: 17px; content: ''; transform: translate(0%, -100%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #303030; }
    nav.mobile-menu li { margin: 5px 0px 5px 0px; padding: 0; display: block; list-style: none; font-size: 17px; float: none; }
    nav.mobile-menu li:last-child { margin-right: 0px; }
    nav.mobile-menu li > ul.dropdown { margin: 0 0 0 15px; background: none; display: none; }
    nav.mobile-menu li > ul.dropdown a { background: none; color: #fff; }
    nav.mobile-menu li.active > ul.dropdown { display: block; }
    nav.mobile-menu li a.divider { content: ''; overflow: hidden; height: 0; display: block; border-top: 1px solid #fff; }
    nav.mobile-menu a { display: block; padding: 0; }
    nav.mobile-menu a.current { color: #666; }
    nav.mobile-menu a:hover,
    nav.mobile-menu .current-item a { text-decoration: none; color: #999; }
    nav.mobile-menu a.toggle-nav { padding: 15px; float: left; display: inline-block; color: #fff; opacity: 0.8; font-size: 20px; transition: opacity linear 0.15s; }
    nav.mobile-menu a.toggle-nav:hover,
    nav.mobile-menu.active a.toggle-nav { text-decoration: none; color: #fff; opacity: 1; }
    nav.mobile-menu.active { width: 100%; }
    nav.mobile-menu.active > ul { display: block; }
    nav.mobile-menu li.end-user-login-divider { display: none; }
    nav.mobile-menu .welcome-label { display: none!important; }

    .menu.vertical { display: block; float: none!important; }

    body nav.mobile-menu a { color: #fff; }

    .section nav.mobile-menu { position: relative; background: #fff!important; left: 0; top: 0; border: 1px solid #ededed; box-shadow: 0px 2px 3px rgba(0,0,0,0.3); border-radius: 5px; }
    .section nav.mobile-menu a.toggle-nav { color: #000; float: none; padding: 5px 15px; display: block; }
    .section nav.mobile-menu ul { width: 100%; background-color: #fff; position: relative; left: auto; top: auto; border: none; box-shadow: none; }
    .section nav.mobile-menu .mobile-menu-icon span,
    .section nav.mobile-menu .mobile-menu-icon:after,
    .section nav.mobile-menu .mobile-menu-icon:before { background-color: #ccc; }
    .section nav.mobile-menu a { color: initial; }
    .section .menu.vertical li a.menu-header, 
    .section .menu.vertical li a.menu-header:hover { background: #fff; color: #000; font-weight: bold; }

    .menu.vertical .tabs ul.dropdown, 
    .section .menu.vertical .tabs ul.dropdown { left: 0; top: 0; position: relative; float: none; background: none; border: none; box-shadow: none; margin: 0 0 0 10px; padding: 0; }
    .menu.vertical ul.dropdown a { color: initial; }

    .menu .mobile-menu ul.dropdown { white-space: normal!important; }
}