/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

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

  .row-offcanvas-left {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .row-offcanvas-left.active {    
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -ms-transform: translateX(70%);
    -o-transform: translateX(70%);
    transform: translateX(70%);
  }


  
  .sidebar-offcanvas {
    background: #2c2c2c;
    color: #34404e;
    position: absolute;
    top: 0;
    left:0;
    width: 70%; /* 6 columns */
    height: 100%;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }


  .sidebar-offcanvas.active{
    left: -15px; 
  }


}