/*
 * Style tweaks
 * --------------------------------------------------
 */

@media (max-width: 767px) {

.row-offcanvas {
	position: relative;
	-webkit-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;	

}

.row-offcanvas-right { right: 0; }

.row-offcanvas-left { left: 0; }


.row-offcanvas-left  .sidebar-offcanvas-left { left: -50%; }/* 6 columns */ 
.row-offcanvas-right  .sidebar-offcanvas-right { right: -50%;  }/* 6 columns */

/*.row-offcanvas-right.active { right: 50%; }/* 6 columns */ 
/*.row-offcanvas-left.active { left: 50%; } /*6 columns */ 

/*當左邊按下，畫面往left50%跑*/
.row-offcanvas-left.active{
	left: 50%;
}
.row-offcanvas-right.active2{
	right:50%;
	left: -50%;
}


.sidebar-offcanvas {
	position: absolute;
	top: 0;
	width: 50%; /* 6 columns */
}

/**/
.navbar-offcanvas {
	position: fixed;
	height: 100%;
	width: 250px;
	max-width: 100%;
	left: -250px;
	top: 0;
	z-index: 999;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
	background-color: #fff;
}

.navbar-offcanvas.in { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }

.navbar-offcanvas.navbar-offcanvas-fade { opacity: 0; }

.navbar-offcanvas.navbar-offcanvas-fade.in { opacity: 1; }

.navbar-offcanvas.offcanvas-transform.in {
	-webkit-transform: translateX(250px);
	-ms-transform: translateX(250px);
	transform: translateX(250px);
}

.navbar-offcanvas.offcanvas-position.in { left: 0; }

.navbar-offcanvas.navbar-offcanvas-right {
	left: auto;
	right: -250px;
}

.navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {
	-webkit-transform: translateX(-250px);
	-ms-transform: translateX(-250px);
	transform: translateX(-250px);
}

.navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in {
	left: auto;
	right: 0;
}

.navbar-offcanvas .dropdown.active .caret {
	border-top: 0;
	border-bottom: 4px solid;
}

.navbar-offcanvas .dropdown-menu {
	position: relative;
	display: block;
	width: 100%;
	background: inherit;
	border: inherit;
	box-shadow: none;
	padding: 0;
	overflow: hidden;
	-webkit-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
	height: 0;
}

.navbar-offcanvas .dropdown-menu.shown { height: auto; }

.navbar-offcanvas .dropdown-menu > li > a {
	color: #777;
	padding: 5px 15px 5px 30px;
}
}

.offcanvas-toggle { background: #f8f8f8; }

.offcanvas-toggle .icon-bar { background: #000; }

.offcanvas-toggle.offcanvas-toggle-close { margin-right: 0; }

.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1) {
	-webkit-transform: rotate(45deg) translate(5px, 4px);
	-ms-transform: rotate(45deg) translate(5px, 4px);
	transform: rotate(45deg) translate(5px, 4px);
}

.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2) { opacity: 0; }

.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3) {
	-webkit-transform: rotate(-45deg) translate(4px, -4px);
	-ms-transform: rotate(-45deg) translate(4px, -4px);
	transform: rotate(-45deg) translate(4px, -4px);
}