/* ///////////////////////////////////////// */ /* New Mobile Nav styles */ body.mobile-menu-open { overflow: hidden; } .mobile-menu-subheader .input-group { position: relative; display: flex; } .mobile-menu-container .search-container { box-sizing: border-box; transition: 0.3s; width: 100%; display: flex; position: relative; } .mobile-menu-container .search-container input[type="text"] { box-sizing: border-box; background: #fff; border: none; z-index: 1; color: #313131; box-shadow: none; font-size: 14px; padding: 5px 1em; width: 100%; max-width: calc(100% - 50px); transition: 0.3s; } .close-mobile-menu { position: relative; } .close-mobile-menu { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; cursor: pointer; } .close-mobile-menu:before, .close-mobile-menu:after { content: ''; position: absolute; width: 100%; top: 50%; left: 0; margin-top: -1px; height: 3px; background: #313131; } .close-mobile-menu:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-mobile-menu:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-menu-container { -webkit-transform: translateX(100%); transform: translateX(100%); position: fixed; max-width: 100%; width: 100%; overflow-x: hidden; -webkit-transition: all .25s; transition: all .25s; z-index: 2001; background: #fff; max-height: 100%; top: 0; height: calc(100vh); } .mobile-menu-open .mobile-menu-container { -webkit-transform: translateX(0%); transform: translateX(0%); } .mobile-menu-header { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; background: #fff; height: 60px; padding: 5px 10px; } .mobile-menu-logo { width: auto; height: 100%; background-repeat: no-repeat; background-position: left center; background-size: contain; } .mobile-menu-logo img { display: block; max-height: 100%; max-width: 200px; } .mobile-menu-ticket-btn { box-sizing: border-box; display: block; position: relative; padding: 1em; font-size: 14px; font-weight: bold; border-bottom: 1px solid #fff; color: #313131; text-decoration: none; background: #ddd; transition: 0.3s; } .mobile-menu-ticket-btn:hover, .mobile-menu-ticket-btn:active { background: #999; color: #fff; transition: 0.3s; } .mobile-menu-subheader { box-sizing: border-box; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; height: 50px; width: 100%; background: #ddd; border-bottom: 1px solid #fff; transition: 0.3s; overflow: hidden; } .mobile-menu-subheader a { color: #313131; text-decoration: none; } .mobile-menu-subheader a span { font-size: 14px; } .mobile-menu-subheader-btn, .search-submit-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; min-width: 50px; max-width: 50px; height: 50px; font-size: 20px; } .mobile-menu-subheader-btn { background: #ddd; } .search-submit-btn { background: #fff; text-decoration: none; color: #313131; } .mobile-menu-subheader-btn:hover, .mobile-menu-subheader-btn:active, .mobile-menu-login-links a:hover { cursor: pointer; color: #fff; transition: 0.3s; } .mobile-menu-subheader-btn:hover i, .mobile-menu-subheader-btn:hover span, .mobile-menu-subheader-btn:active i, .mobile-menu-subheader-btn:active span, .mobile-menu-login-links a:hover i, .mobile-menu-login-links a:hover span { color: #fff; } .mobile-menu-login { display: flex; align-items: center; background: #aaa; transition: 0.3s; } .mobile-menu-subheader.mobile-menu-login-showlinks .mobile-menu-login { background: #999; transition: 0.3s; } .mobile-menu-subheader.mobile-menu-login-showlinks { height: 100px; } .mobile-menu-subheader .mobile-menu-login-links a { font-size: 14px; margin-left: 10px; transition: 0.3s; } .mobile-menu-login-links { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-around; padding-right: 15px; transition: 0.3s; } .mobile-menu-login-links a { display: inline-block; margin-left: 0; font-size: 0; transition: 0.3s; } .mobile-menu-cart > span { padding-left: 5px; font-size: 14px; } .mobile-menu-footer-links { padding: 15px; } .mobile-menu-footer-links a { display: block; padding: 5px 0; color: #313131; text-decoration: none; font-size: 12px; } .mobile-menu-footer-links a:active { text-decoration: underline; } .mobile-menu-slider { position: relative; transition: 0.3s; } .menu-panel, .sub-menu-panel, .mega-menu-panel { max-width: 100%; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; display: flex; flex-direction: column; } .sub-menu-panel:not(.show), .mega-menu-panel:not(.show) { display: none; } .menu-panel a { position: relative; padding: 1em; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-decoration: none; font-weight: bold; transition: 0.3s; } .menu-panel a:hover, .menu-panel a:active { background: #aaa; transition: 0.3s; } .menu-panel a.has-subitems:after { content: '>'; display: flex; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; width: 30px; height: 100%; } .sub-header { position: relative; } .menu-panel .sub-header.subContainer { position: relative; padding: 0; box-shadow: 0px -3px 10px #000; } .menu-back-link { position: absolute; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; height: 100%; cursor: pointer; padding: 0 5px; z-index: 1; } .sub-header a { width: 100%; display: block; text-align: center; box-sizing: border-box; } .saffireMobileSize.mobileNavShowing #mainNavigation { display: none; } nav#mobile-nav { position: relative; transition: 0.3s; left: 0; } nav#mobile-nav * { box-sizing: border-box; } nav#mobile-nav.show-level-2 { left: -100%; transition: 0.3s; } nav#mobile-nav.show-level-3 { left: -200%; transition: 0.3s; } nav#mobile-nav.show-level-4 { left: -300%; transition: 0.3s; } #mobile-nav .nobile-menu-slider { min-height: 400px; } #mobile-nav ul { list-style-type: none; padding: 0; margin: 0; background: #fff; } #mobile-nav ul.level-2-showing { z-index: 9; height: auto !important; overflow: visible !important; } #mobile-nav li { margin: 1px 0; } #mobile-nav li:first-child { margin: 0; } #mobile-nav a { display: flex; align-items: center; line-height: 1; height: 40px; font-size: 14px; color: #313131; text-decoration: none; padding: 0 1em !important; background: #ddd; } #mobile-nav a:hover { background: #ccc; transition: 0.2s; } #mobile-nav .m-groups { position: static; } #mobile-nav .m-items, #mobile-nav .m-subitems { position: absolute; top: 0; left: 100%; } #mobile-nav .has-subitems { display: flex; width: 100%; align-items: center; } #mobile-nav .has-subitems a { flex: 1 1 80%; } #mobile-nav .has-subitems span { display: flex; align-items: center; justify-content: center; line-height: 1; height: 40px; max-width: 100px; flex: 1 0 20%; background: rgba(0, 0, 0, 0.25); text-align: center; padding: 0 15px; height: 40px; position: relative; font-size: 14px; color: #fff; } #mobile-nav .has-subitems .m-items, #mobile-nav .has-subitems .m-subitems { top: 0; width: 100%; height: 0; overflow: hidden; transition-property: height; transition-delay: 0.3s; } #mobile-nav .next-level-btn:active, #mobile-nav .next-level-btn:hover { cursor: pointer; background: rgba(0, 0, 0, 0.5); transition: 0.2s; } .mobileNavContainer .mobileMenuPanelContainer a { line-height: 1; border: none; } /*# sourceMappingURL=mobile-nav.css.map */