.slideout-menu{position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: 0;width: calc(100vw - 60px);overflow-y: auto;-webkit-overflow-scrolling: touch;background: #F9F9F9;}
.slideout-panel{position:relative;z-index: 1;background: #FFF;}
.slideout-open,.slideout-open body,.slideout-open .slideout-panel{overflow: hidden;}
.slideout-open .slideout-menu{display: block !important;}
#menu{display: none;width: calc(100vw - 60px);position: fixed;}

@media screen and (min-width: 767px) {
#containerSite {transform: none !important;}
#menu {display: none !important;}
.slideout-open {overflow: auto !important;}
}

@media screen and (max-width: 768px){
#containerSite{-webkit-box-shadow: 0 0 5px 0 rgb(102,102,102);-moz-box-shadow: 0 0 5px 0 rgb(102,102,102);box-shadow: 0 0 5px 0 rgb(102,102,102);}
.search-mobile{position: relative;padding: 15px 15px 14px 6px; display: none}
.search-mobile button{float: left;width: 35px;height: 24px;padding: 0;background: none;border: 0;border-radius: 0;border-right: 1px solid #CCC;}
.search-mobile button::before{content: '';display: block;width: 17px;height: 17px;margin: 0 auto;background: url('/sysimages/search.png') no-repeat left bottom;background-size: 17px;}
.search-mobile input{float: left;width: calc(100% - 35px);padding: 3px 10px;background: none;border: 0 !important;}
.menu-mobile{border-top: 1px solid #CCC;background: #FAFAFA; border-top-width: 0;}
.menu-mobile ul{padding: 9px 15px 29px;background: #FFF;}
.menu-mobile ul li a{position: relative;display: block;border-bottom: 1px solid #CCC;padding: 15px 0px 4px;}
.menu-mobile ul li ul.sub-mobile{display: none;margin: 0 -15px;padding: 10px 20px 0;}
.menu-mobile ul li ul.sub-mobile li a{padding: 7px 0; font-size: 16px;}
.menu-mobile ul li.hasSub > a::after{content: '';position: absolute;top: 50%;right: 15px;width: 8px;height: 8px;margin-top: -4px;background: url('/sysimages/sys07.png') no-repeat left top;background-size: 8px auto;}
.menu-mobile ul li.active > a::after{background-position: left bottom;}
.menu-mobile ul.menu-inst{padding: 20px 0 30px;background: #F9F9F9;}
.menu-mobile ul.menu-inst li a{position: relative;border: 0;padding: 7px 15px 7px 40px;}
.menu-mobile ul.menu-inst li a::before{content: '';position: absolute;top: 50%;left: 15px;width: 14px;height: 14px;margin-top: -7px;}
.menu-mobile ul.menu-inst li.user a::before{background: url('/sysimages/user.png') no-repeat left bottom;background-size: 14px;}
.menu-mobile ul.menu-inst li.wish a::before{background: url('/sysimages/wish.png') no-repeat left bottom;background-size: 14px;}
.menu-mobile ul.menu-inst li.logout a::before{background: url('/sysimages/logout.png') no-repeat left bottom;background-size: 14px;}
.menu-mobile ul.menuAux {background-color: #f9f9f9;padding: 0;border-top: 1px solid #eee;border-bottom: 0px;}
.menu-mobile ul.menuAux li a {border-bottom: 1px solid #eee;display: block;padding: 8px 16px;}
.menu-mobile ul.menuAux li ul.sub-mobile {margin:0px;background-color: #f9f9f9;border-bottom: 1px solid #eee;}
.menu-mobile ul.menuAux li ul.sub-mobile li:last-child a{border-bottom:0px;}
.menu-mobile ul.menuAux li.hasSub > a::after {right: 30px;}

#containerSite{-webkit-box-shadow: 0 0 5px 0 rgb(102,102,102);-moz-box-shadow: 0 0 5px 0 rgb(102,102,102);box-shadow: 0 0 5px 0 rgb(102,102,102);}
.show-containerSite #containerSite-mask {transform: translateX(calc(100% - 60px)) !important;}
.account-mobile-menu #account-menu.slideout-menu {width: calc(100vw - 60px);}
}