/* -----------------------------------
 * Slidebars
 * Version 0.10 Development
 * http://plugins.adchsm.me/slidebars/
 *
 * Written by Adam Smith
 * http://www.adchsm.me/
 *
 * Released under MIT License
 * http://plugins.adchsm.me/slidebars/license.txt
 *
 * -------------------
 * Slidebars CSS Index
 *
 * 001 - Box Model, Html & Body
 * 002 - Site
 * 003 - Slidebars
 * 004 - Animation
 * 005 - Helper Classes
 *
 * ----------------------------
 * 001 - Box Model, Html & Body
 */

html, body, #sb-site, .sb-site, .sb-slidebar {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

html, body {
   width: 100%;
   xoverflow-x: hidden; /* Stops horizontal scrolling. */
   /* Overflow-x: hidden : Disables scrollspy. Move to body if needed*/
}

html {
   height: 100%; /* Site is as tall as device. */
}

body {
   min-height: 100%;
   overflow-x: hidden; /* Stops horizontal scrolling. */
   position: relative;/* Required for static Slidebars to function properly. */
}

html.sb-lock.sb-active:not(.sb-static) {
   overflow: hidden; /* Prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
}

/* ----------
 * 002 - Site
 */

#sb-site, .sb-site {
   /* You may now use .sb-site as your site container if you wish to use your own id. However please make sure you don't set any of the follwoing styles any differently on your id. */
   width: 100%;
   position: relative;
   z-index: 1; /* Site sits above Slidebars */
   background-color: #ffffff; /* Default background colour, overwrite this with your own css. */
}

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
   height: 100%;
   overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
   position: fixed;
   top: 0;
   z-index: 0; /* Slidebars sit behind sb-site. */
   visibility: hidden; /* Initially hide the Slidebars. */
   background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
}

.sb-left {
   left: 0; /* Set Slidebar to the left. */
}

.sb-right {
   right: 0; /* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
   position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
   visibility: visible; /* Makes Slidebars visibile when open. */
}

.sb-slidebar.sb-style-overlay {
   z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}

/* Slidebar widths for devices that don't support media queries. */
   .sb-slidebar {
      width: 30%;
   }
   
   .sb-width-thin {
      width: 15%;
   }
   
   .sb-width-wide {
      width: 45%;
   }

@media (max-width: 480px) { /* Slidebar width on extra small screens. */
   .sb-slidebar {
      width: 70%;
   }
   
   .sb-width-thin {
      width: 55%;
   }
   
   .sb-width-wide {
      width: 85%;
   }
}

@media (min-width: 481px) { /* Slidebar width on small screens. */
   .sb-slidebar {
      width: 55%;
   }
   
   .sb-width-thin {
      width: 40%;
   }
   
   .sb-width-wide {
      width: 70%;
   }
}

@media (min-width: 768px) { /* Slidebar width on small screens. */
   .sb-slidebar {
      width: 40%;
   }
   
   .sb-width-thin {
      width: 25%;
   }
   
   .sb-width-wide {
      width: 55%;
   }
}

@media (min-width: 992px) { /* Slidebar width on medium screens. */
   .sb-slidebar {
      width: 30%;
   }
   
   .sb-width-thin {
      width: 15%;
   }
   
   .sb-width-wide {
      width: 45%;
   }
}

@media (min-width: 1200px) { /* Slidebar width on large screens. */
   .sb-slidebar {
      width: 20%;
   }
   
   .sb-width-thin {
      width: 5%;
   }
   
   .sb-width-wide {
      width: 35%;
   }
}

/* ---------------
 * 004 - Animation
 */

.sb-slide, #sb-site, .sb-site, .sb-slidebar {
   -webkit-transition: -webkit-transform 400ms ease;
      -moz-transition: -moz-transform 400ms ease;
        -o-transition: -o-transform 400ms ease;
           transition: transform 400ms ease;
   -webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
   -webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}

/* --------------------
 * 005 - Helper Classes
 */
 
.sb-hide { 
   display: none; /* May be applied to control classes when Slidebars is disabled over a certain width. */
}

.hide-for-mobile {
   display: none;
   visibility: hidden;
}

/* =========================
   Custom Navigation Styles 
   ========================== */

/* Casts a shadow onto the Slidebars from site. */
#sb-site,
.sb-site {
   xbox-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}


.sb-slidebar {
   height: 100%;
   overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
   position: fixed;
   top: 0;
   z-index: 0; /* Slidebars sit behind sb-site. */
   visibility: hidden; /* Initially hide the Slidebars. */
   background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
}

/* --------------------
 * 005 - MOBILE NAVBAR
 */

/* NAVBAR */
.navbar {
   left: 0; 
   right: auto;
   top: 0;
   position: fixed;
   border-bottom: 1px solid rgba(226, 226, 226, 0);
   z-index: 10;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #efefef;
}

.navbar.alt {
}

/* Toggle Button */
.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
   cursor: pointer;
}

.navbar .sb-toggle-right,
.navbar .sb-toggle-left {
   display: block;
   width: 52px;
   padding: 14px;
}

.navbar .sb-toggle-right {
   float: right;
} 

.navbar .sb-toggle-left {
   float: left;
} 

.navicon-line {
   width: 24px;
   height: 4px;
   border-radius: 1px;
   background-color: #5E5E5E;
   margin-bottom: 3px;
}

.navbar .container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

/* Logo */
.navbar-brand p {
   text-align: center;
   float: right;
   color: #6969FF;
   position: relative;
   display: block;
   margin: 0;
   padding: 10px;
   font-size: 20px;
}
/* Slidbar Menu */
.sb-slidebar {
   background-color: #FFFFFF;
   border-left: 1px solid rgba(226, 226, 226, 1);;
}
.sb-menu {
   padding: 0;
   margin: 0;
   list-style-type: none;
}
.sb-menu li {
   padding: 0;
   margin: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   width: 100%;
}
.sb-menu li a {
   width: 100%;
   display: inline-block;
   padding: 1em;
   text-decoration: none;
   color: #000;
}

.sb-menu li.active a {
   color: #1DC56E;
}

.nav li.active a {
   color: #5964E4
}

.nav .active a {
   color: #efefef
}

/* --------------------
 * 00 - Desktop Navbar
 */
@media (min-width: 768px) {

   .navbar {
      left: 0; 
      right: auto;
      top: 0;
      position: fixed;
      border-bottom: 1px solid rgba(226, 226, 226, 0);
      z-index: 10;
      width: 100%;
      background: transparent;
      -webkit-transition: ease-out 0.2s;
         -moz-transition: ease-out 0.2s;
          -ms-transition: ease-out 0.2s;
           -o-transition: ease-out 0.2s;
           transition: ease-out 0.2s;
           padding-top: 40px;
           padding-bottom: 40px;
 
   }

   /* Alt. Scrolled Navbar */
   .navbar.alt {
      padding: 0px;
      background: #fff;
      border-bottom: 1px solid #D3D3D3;
         -moz-transition: ease-out 0.2s;
          -ms-transition: ease-out 0.2s;
           -o-transition: ease-out 0.2s;

      -webkit-transition: padding 0.2s ease-out;
              transition: padding 0.2s ease-out; 
   }

  .navbar-brand {
      font-size: 24px;
   }
   /* Navbar Menu */
   .navbar-nav {
      margin: 0 auto;
      list-style-type: none;
      width: auto;
      position: relative;
      visibility: visible;
      display: block;
      float: right;
      padding-right: 15px;
   }
   .navbar-nav li {
      width: auto;
      border-top: none;
      border-bottom: none;
      display: inline-block;
      list-style-type: none;
   }
   .navbar-nav li a {
      color: rgb(190, 190, 190);
      font-family: "Open Sans", sans-serif;
      font-size: 1em;
      line-height: 60px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      margin: 0 0 0 30px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .2px;
      padding-top: 0;
      padding-bottom: 0;
   }
   
   .nav {
      margin: 0;
      padding: 0;
   }
   .nav > li > a {
      display: block;
      font-size: 13px;
   }
  
   /* Hide Mobile Toggle */
   .navbar .sb-toggle-right,
   .navbar .sb-toggle-left {
      display: none;
   }

   .navbar-brand p {
     text-align: center;
     float: left;
     position: relative;
     display: block;
     padding: 0;
     margin: 0;
     line-height: 60px;
     font-size: 30px;
     font-weight: 700;;;;
   }
}