/*! Pushy - v0.9.2 - 2014-9-13 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ /* Menu Appearance */ /* Fixed Menu */ .menu_wrapper { /* transition: all 0.8s ease;*/ z-index: 2; } /* Fixed Menu End*/ .menu-btn{ display:none; } /*.pushy ul{ margin:25px 0 0 0; padding:0; float:right; } .pushy ul li{ list-style:none; float:left; position:relative; } /* .pushy ul li a.active{ background:white; color:#a27d93; } .pushy ul li a{ font-size:14px; color:#fff; text-decoration:none; padding:10px 15px; font-weight:500; text-transform:uppercase; } .pushy ul li a:hover{ color:#a27d93; } .pushy ul li ul.sub-menu{ display: none; position:absolute; top:10px; width:150px; background:#a27d93; } .pushy ul li:hover ul.sub-menu{ display:block; } .pushy ul li ul.sub-menu li{ margin:10px 0; display:block; } */ .pushy { margin-top:0px } .pushy ul { list-style:none; position:relative; margin:0; padding:0; float:right; } .pushy ul a { color:#fff; text-decoration:none; font-size:14px; padding:15px; text-transform:uppercase; } .pushy ul li { position:relative; float:left; margin:0; padding:0 } .pushy ul li.current-menu-item { background:#ddd; } .pushy ul li:hover { /*background:#8a6b7e;*/ } .pushy ul ul { display:none; position:absolute; top:100%; left:0; /*background:#fff;*/ padding:0; z-index:9999; } .pushy ul ul li { float:none; width:200px } .pushy ul ul a { line-height:120%; padding:10px 15px; /* color:#333;*/ } .pushy ul ul li:hover > a { color:white; } .pushy ul ul ul { top:0; left:100% } .pushy ul li:hover > ul { display:block; } @media screen and (max-width: 1200px){ #nav_wrapper{ opacity:1 !important; } .menu-btn{ position:fixed !important; z-index:2; } .pushy-open ul.pull-right{ float:none !important; } .header_wrapper nav ul li{ display:block; text-align:left; padding:0px; margin:0px; } .header_wrapper nav ul li a:hover, .header_wrapper nav ul li a:hover, .header_wrapper nav ul li a.active, .header_wrapper nav ul li a.active:hover{ background:black; color:white; border:0px; font-weight:normal; } .pushy ul ul ul { left:0%; top: inherit; } .pushy { margin-top:0px } .fadeInDown { animation-name: none; } .fixed.float{ background:none; position: absolute; } .menu-btn{ display: block; right: 25px; position: absolute; top: 20px; background:#2d2d2d; padding:10px; cursor:pointer; font-size:14px; color:white; } .pushy ul{ float: none; margin:0; } .pushy ul li{ display:block; float:none; } .pushy{ font-size: 1.0em; } .pushy{ position: fixed; width: 200px; height: 100%; top: 0; left:0; z-index: 9999; background: #2d2d2d; font-size: 0.9em; font-weight: bold; overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } .pushy a{ display: block; /*color: #b3b3b1;*/ padding: 15px 30px; /* border-bottom: 1px solid rgba(0, 0, 0, .1); border-top: 1px solid rgba(255, 255, 255, .1);*/ text-decoration: none; } .pushy a:hover{ } /* Menu Movement */ .pushy-left{ -webkit-transform: translate3d(-200px,0,0); -moz-transform: translate3d(-200px,0,0); -ms-transform: translate3d(-200px,0,0); -o-transform: translate3d(-200px,0,0); transform: translate3d(-200px,0,0); } .pushy-open{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .container-push, .push-push{ -webkit-transform: translate3d(200px,0,0); -moz-transform: translate3d(200px,0,0); -ms-transform: translate3d(200px,0,0); -o-transform: translate3d(200px,0,0); transform: translate3d(200px,0,0); } /* Menu Transitions */ .pushy, #container, .push{ -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); transition: transform .2s cubic-bezier(.16, .68, .43, .99); } /* Site Overlay */ .site-overlay{ display: none; } .pushy-active .site-overlay{ display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; background-color: rgba(0,0,0,0.5); -webkit-animation: fade 500ms; -moz-animation: fade 500ms; -o-animation: fade 500ms; animation: fade 500ms; } @keyframes fade{ 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade{ 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade{ 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade{ 0% { opacity: 0; } 100% { opacity: 1; } } ul.sub-menu{ background:black !important; } }