/*! 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 */

ul#mobnavmenu li ul { display:none;}

#mobile-nav {display:none}
#mobile-nav ul li       { color:#fff; margin:0; padding:0;  font-size:30px}
#mobile-nav ul li>div   { padding:15px 10px 10px 50px; margin-left:-50px; line-height:1.4; 
                            border-bottom: 1px solid rgba(0, 0, 0, .1);
                               border-top: 1px solid rgba(255, 255, 255, .2);}
#mobile-nav ul li>div:hover {  background-color: #880656; color:#fff;}
#mobile-nav ul li>ul { margin:0; padding:10px}
#mobile-nav ul li>ul li a            { color:#fff; text-indent:-20px; padding:10px 30px; line-height:1.4;}
#mobile-nav ul li>ul li a:before { content: "•"; color:#880656; padding-right:8px;}
#mobile-nav ul li>ul li a:hover  { color:#999;}

.pushy{ margin-left:-25px; position:fixed; width:500px; height:100%; top:0; z-index:999999;
        background:#333; font-size:1.6em; font-weight:normal; padding:0px;
            -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
               -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
                    box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
                      overflow: auto;
    -webkit-overflow-scrolling: touch;}

.pushy a { display:block; color:#fff; text-decoration:none;}

.pushy a:hover{ color:#fff;}


/* Menu Movement */

.pushy-left{
    -webkit-transform: translate3d(-680px,0,0);
    -moz-transform: translate3d(-680px,0,0);
    -ms-transform: translate3d(-680px,0,0);
    -o-transform: translate3d(-680px,0,0);
    transform: translate3d(-680px,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(680px,0,0);
    -moz-transform: translate3d(680px,0,0);
    -ms-transform: translate3d(680px,0,0);
    -o-transform: translate3d(680px,0,0);
    transform: translate3d(680px,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; }
}

/* Example Media Query */

/* =============================================================================
    = iPad Portrait Styles
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
    #mobile-nav ul li       { color:#fff; margin:0; padding:0;  font-size:16px}
}


/* =============================================================================
    = iPad Landscape Styles
   ============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #mobile-nav ul li       { color:#fff; margin:0; padding:0;  font-size:16px}
}

@media only screen and (max-device-width: 699px) {
    #mobile-nav {display:inline-block;}
}