html, body { height: 100%; } body { display: flex; flex-direction: column; } #wrapper { flex: 1 0 auto; } #footer { flex-shrink: 0; padding: 0.5em; } .text-align-right { text-align: right; } .pure-menu-item a img { padding: .1em .5em; max-height: 2.4em; min-width: 2.4em; } .menu-wrapper { background-color: #E7732F; margin-bottom: 2.5em; white-space: nowrap; position: relative; } .menu { display: inline-block; width: auto; vertical-align: middle; -webkit-font-smoothing: antialiased; } .menu .pure-menu-link, .menu .pure-menu-heading { color: black; } .menu .pure-menu-link:hover, .menu .pure-menu-heading:hover { background-color: transparent; } .menu-top { position: relative; padding-top: .5em; padding-bottom: .5em; } .menu-brand { display: block; text-align: center; position: relative; color: black; } .menu-toggle { width: 44px; height: 44px; display: block; position: absolute; top: 3px; right: 0; display: none; } .menu-toggle .bar { background-color: white; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 22px; right: 12px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .menu-toggle .bar:first-child { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .menu-toggle.x .bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .menu-toggle.x .bar:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-screen { background-color: #E7732F; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; height: 3em; position: absolute; top: 0; z-index: -1; } .menu-tucked .menu-screen { -webkit-transform: translateY(-44px); -moz-transform: translateY(-44px); -ms-transform: translateY(-44px); transform: translateY(-44px); width: auto; } @media (min-width: 62em) { .menu-screen { margin-top: 2.9em; z-index: 1; right: 0em; } } @media (max-width: 62em) { .menu { display: block; } .menu-toggle { display: block; display: none\9; } .menu-bottom { position: absolute; width: 100%; border-top: 1px solid #E7732F; background-color: #808080\9; z-index: 100; } .menu-bottom .pure-menu-link { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .menu-bottom.menu-tucked .pure-menu-link { -webkit-transform: translateX(-140px); -moz-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); opacity: 0; opacity: 1\9; } .pure-menu-horizontal.menu-tucked { z-index: -1; top: 45px; position: absolute; overflow: hidden; } .menu-untucked { height: 3.1em; } .pure-menu-horizontal.pure-menu-scrollable.menu-untucked { overflow-x: auto; } }