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

body {
  padding-top: 70px;
}
footer {
  padding: 30px 0;
}

.sidebar-offcanvas{
  display:none;
}

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}


/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {


  .container{
    margin:0px 40px;
  }


  .row-offcanvas {
    display:block;
    
    /* 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-right
  .sidebar-offcanvas {
    right: -60%; /* 6 columns */
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
  }

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

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

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

  div.sidebar-offcanvas {
    display:block;
    position: fixed;
  bottom:0;
  top:70px;
  background:rgba(255,255,255,.9);
  border-left:1px solid #000;
  overflow:auto;
    
}

.row-offcanvas-right.active
  .sidebar-offcanvas{
    right:0px;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
  }


}