/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
/***************************/
/* Navigation              */
/**************************/
.nav-offcanvas {
	position: fixed;
	background-color: #cad8e3;
    top: 80px;
	width: 85vw;
	height: 100%;
	padding: 0px;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }
.nav-offcanvas-left {left: -85vw}
.nav-offcanvas-left .nav-offcanvas {left: 0vw}
.nav-offcanvas-left.active {left: 0vw}

.nav-offcanvas-right {right: -85vw}
.nav-offcanvas-right .nav-offcanvas {right: 0vw}
.nav-offcanvas-right.active {right: 0vw}
/***************************/
/* SIDEBARS                */
/**************************/	
  .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-right
  .sidebar-offcanvas {
    right: -0%; /* 6 columns */
  }

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

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

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

  .sidebar-offcanvas {
    position: relative;
    width: 100%; /* 6 columns */
  }
}