*, *:after, *::before { -moz-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width:720px) and (min-width:0px){ .st-content { height: 100%; }} .st-container { position: relative; overflow: hidden; } .st-pusher { position: relative; right: 0; z-index:50; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0,0,0,0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu { position: absolute; top: 0; right: 0; z-index: 100; visibility: hidden; width: 250px; height: 100%; background: #0078D7; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate3d(250px, 0, 0); transform: translate3d(250px, 0, 0); } .st-menu::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu-open .st-menu::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } /* content style */ .st-menu ul { margin: 0; padding: 0; list-style: none; } .st-menu h2 { margin: 0; padding: 1rem; color: rgba(0,0,0,0.25); color:#FFF; text-shadow: 0 0 1px rgba(0,0,0,0.1); font-weight:bold; font-size: 2em; } .st-menu ul li a { display: block; padding: 1rem; outline: none; color: #FFF; letter-spacing: 1px; font-weight: 400; box-shadow: inset 0 -1px rgba(0,0,0,0.1); /* text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,0.1); */ -webkit-transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s; } .st-menu ul li:first-child a { } .st-menu ul li:last-child a { box-shadow: inset 0 -1px rgba(0,0,0,0); } .st-menu ul li a:hover { background: rgba(0,0,0,0.2); box-shadow: inset 0 -1px rgba(0,0,0,0); color: #fff; } /* Effect 2: Reveal */ .st-effect-2.st-menu-open .st-pusher { -webkit-transform: translate3d(-250px, 0, 0); transform: translate3d(-250px, 0, 0); } .st-effect-2.st-menu { z-index: 100; } .st-effect-2.st-menu-open .st-effect-2.st-menu { visibility: visible; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .st-effect-2.st-menu::after { display: none; }