/*===================================== uses: .element { @include prefixer(transform, scale(1.5), ms webkit spec); } =======================================*/ /*===================================== uses: .element { @include transform(scale(1.5)); } =======================================*/ /*===================================== uses: .element { @include transition(all 300ms ease); } =======================================*/ /*===================================== uses: .element { font-size:em(20px); } =======================================*/ /*===================================== uses: .element { line-height:lh(20px,24px); } =======================================*/ #mobile-nav { overflow: hidden; position: fixed; z-index: 99999991; text-align: left; top: 0; bottom: 0; right: 0; width: 0px; width: 100%; -ms-transition: all linear 100ms; -webkit-transition: all linear 100ms; transition: all linear 100ms; } #mobile-nav.closed { width: 0px; } #mobile-nav ul { display: block; margin: 0; list-style: none; background: #003d79; padding-top: 50px; height: 100vh; overflow-x: hidden; overflow-y: scroll; } #mobile-nav ul.level-1 { background: rgba(0, 61, 121, 0.95); } #mobile-nav li { display: flex; align-items: stretch; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } #mobile-nav li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.5); } #mobile-nav a { display: block; flex-grow: 1; color: #FFFFFF; font-size: 17px; line-height: 18px; } #mobile-nav a:hover { text-decoration: none; } #mobile-nav span { display: block; width: 100%; padding: 15px; color: #FFFFFF; } #mobile-nav span.level-switch { max-width: 48px; min-width: 48px; min-height: 48px; background: #004a93; text-align: center; display: flex; justify-content: center; align-items: center; } #mobile-nav span.level-switch i { display: block; color: #FFFFFF; } #mobile-nav ul.child { position: absolute; top: 0; left: 100%; width: 100%; height: 100vh; z-index: 10001; -ms-transition: all linear 100ms; -webkit-transition: all linear 100ms; transition: all linear 100ms; margin-top: 0; } #mobile-nav ul.child.show { left: 0; } #mobile-nav ul.child.lock { overflow: hidden; } @media (min-width: 501px) { #mobile-nav { max-width: 300px; } #mobile-nav.open { width: 300px; } #mobile-nav ul { width: 300px; } } .nav-toggle { display: block; position: absolute; z-index: 99999992; padding: 16px 8px 8px; right: 0px; top: 0px; -ms-transition: all ease 200ms; -webkit-transition: all ease 200ms; transition: all ease 200ms; } .nav-toggle .bar { display: block; height: 4px; background: #003d79; border-radius: 2px; margin-top: 4px; position: relative; width: 40px; } .nav-toggle .bar:first-child { margin-top: 0; } .nav-toggle:hover { text-decoration: none; } .nav-toggle.open { box-shadow: none; background: none; position: fixed; height: 50px; border: none; } .nav-toggle.open .bar { background: #FFFFFF; width: 50px; } .nav-toggle.open .bar1 { transform: rotate(225deg); transform-origin: left; left: 50px; top: 32px; } .nav-toggle.open .bar2 { transform: translate(-150px) rotate(360deg); opacity: 0; } .nav-toggle.open .bar3 { transform: rotate(-225deg); transform-origin: left; left: 50px; top: -20px; } .nav-toggle .bar { -ms-transition: all 500ms ease; -webkit-transition: all 500ms ease; transition: all 500ms ease; } @media (max-width: 1024px) { .nav-toggle { padding-top: 12px; } } @media (max-width: 500px) { .nav-toggle { background: #FFFFFF; border-top: 4px solid #ffdb35; border-radius: 0 0 0 5px; position: fixed; padding-top: 10px; } .scrolled .nav-toggle { border-top-width: 0px; box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.5); } .nav-toggle .bar { width: 30px; } } .nav-close { display: none !important; z-index: 100; position: absolute; top: 0; right: 0; width: 50px; height: 50px; opacity: 0; -ms-transition: all ease 200ms; -webkit-transition: all ease 200ms; transition: all ease 200ms; } .nav-close:before, .nav-close:after { display: block; height: 3px; background: #FFFFFF; margin-top: 5px; position: relative; content: ''; width: 40px; } .nav-close:before { transform: rotate(225deg); transform-origin: left; left: 38px; top: 32px; } .nav-close:after { transform: rotate(-225deg); transform-origin: left; left: 38px; top: -4px; } .open .nav-close { opacity: 1; } @media (min-width: 1025px) { .nav-toggle, #mobile-nav { display: none !important; } } @media screen and (max-width: 600px) { #header header { flex-wrap: wrap; } #header header .logo { margin-left: auto; margin-right: auto; } #header header .head-right { flex: unset; width: 100%; align-items: center; } #header header .head-right .top > * { margin-left: 5px; margin-right: 5px; } } /*# sourceMappingURL=/assets/_css/themes-mysite-css-responsive.css.map */