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

.menu-btn{
	width:45px;
	right:0;
	font-size:1.5em;
	height:38px;
	background:#2F2F2F;
	color:#FFF;
	vertical-align:middle;
	text-align:center;
	cursor:pointer;
	z-index:9999;
}

.menu-btn img{
	width:19px;
	display:inline-block;
	margin-top:0;
	margin-top:5px \9; 
	vertical-align:middle;
	}

.menu-btn:hover{
	background:#FCD001;
	color: #00b4ff;
}

.other_bg{
	background-color:#D40f7d;
	}

/* Menu Appearance */

.pushy{
    position:fixed;
    width:130px;
    top:38px;
    z-index:9999;
    background:#2F2F2F;
    font-size:1em;
    font-weight:bold;
   /* -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .3);
    box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .3);*/
    overflow:auto;
    -webkit-overflow-scrolling:touch; /* enables momentum scrolling in iOS overflow elements */
}

.pushy a{
    display: block;
    color: #FFFFFF;
	font-family:微軟正黑體;
	text-align:right;
    padding:10px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
	font-size: 16px;
}

.pushy a:hover{
    background:#79090B;
    color:#FFF;
}

#container{
	position:relative;padding:0; width: 100%;
	margin:0 auto;}
.menu-btn:hover{background:#79090B;color:#fff}footer{font-size:.9em;text-align:center}footer i{font-size:1.5em}
.pushy{position:fixed;width:165px;height:100%;top:0;z-index:9999;overflow:auto;-webkit-overflow-scrolling:touch;}
.pushy a{display:block;}
.pushy a:hover{color:#fff}
.pushy ul:first-child{}
.pushy-left{-webkit-transform:translate3d(-165px,0,0);-moz-transform:translate3d(-165px,0,0);-ms-transform:translate3d(-165px,0,0);-o-transform:translate3d(-165px,0,0);transform:translate3d(-165px,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(165px,0,0);-moz-transform:translate3d(165px,0,0);-ms-transform:translate3d(165px,0,0);-o-transform:translate3d(165px,0,0);transform:translate3d(165px,0,0)}
.pushy-submenu ul{display:none;padding-left:15px}
.pushy-submenu>a{position:relative}
.pushy-submenu>a::after{content:'';display:block;background-size:8px 11px;height:11px;width:8px;position:absolute;top:50%;bottom:auto;right:15px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}
.pushy-submenu>a.pushy-submenu-open::after{
	-webkit-transform:translateY(-50%) rotate(90deg);-moz-transform:translateY(-50%) rotate(90deg);	-ms-transform:translateY(-50%) rotate(90deg);-o-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}
.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{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,.5);
	-webkit-animation:fade 500ms;
	-moz-animation:fade 500ms;
	-ms-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 */

@media screen and (max-width: 768px){
    .pushy{
        font-size:1em;
    }
}