.close-offcanvas { position: absolute; top: 10px; right: 10px; z-index: 1; color: #000; border: 2px solid #eee; border-radius: 100%; width: 22px; height: 22px; line-height: 18px; text-align: center; font-size: 12px; }
.close-offcanvas:hover { background: #000; color: #fff; }
.offcanvas-menu { width: 280px; height: 100%; background: #fff; color: #999; position: fixed; top: 0; opacity: 0; z-index: 9999; overflow-y: scroll; }
.offcanvas-menu .offcanvas-inner { padding:30px 10px 10px; }
.offcanvas-menu .offcanvas-inner > div { margin-top: 10px; }
.offcanvas-menu .offcanvas-inner > div ul > li { border: none; position: relative; list-style: none;}
.offcanvas-menu .offcanvas-inner > div ul > li a {  color: #333; border-bottom: 1px dotted #e8e8e8; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; padding:5px; display: block; line-height:130%;}
.offcanvas-menu .offcanvas-inner > div ul > li a:hover { background: #f5f5f5; }
.offcanvas-menu .offcanvas-inner > div ul > li >a:before { display: none; }
.offcanvas-menu .offcanvas-inner > div:first-child { margin-top: 0; }
.offcanvas-menu .offcanvas-inner > div ul { margin: 0; padding:0; }
.offcanvas-menu .offcanvas-inner .search { margin-top: 25px; }
.offcanvas-menu .offcanvas-inner .search input { width: 100%; border-radius: 0; border: 1px solid #eee; box-shadow: none; -webkit-box-shadow: none; }
.ltr .offcanvas-menu { -webkit-transition: opacity 400ms cubic-bezier(0.7, 0, 0.3, 1), right 400ms cubic-bezier(0.7, 0, 0.3, 1); transition: opacity 400ms cubic-bezier(0.7, 0, 0.3, 1), right 400ms cubic-bezier(0.7, 0, 0.3, 1); }
.ltr #t1-main:after { right: 0; }
.ltr .offcanvas-menu { right: -280px; }
.ltr.offcanvas .offcanvas-menu { right: 0; }
#t1-main:after { position: absolute; top: 0; width: 0; height: 0; background: rgba(0,0,0,0.8); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; z-index: 9990; }
.offcanvas { width: 100%; height: 100%; position: relative; }
.offcanvas #t1-main:after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.offcanvas .offcanvas-menu { opacity: 1; }

.offcanvas-inner h3 {font-size: 18px!important; margin:0 5px;}
.offcanvas-inner > div > ul > li > a{text-transform: uppercase;}
.offcanvas-inner ul.nav-child a{font-size: 14px; padding-left: 15px!important;}