header,nav>ul>li,nav>ul>li>a{position:relative}header{padding:30px 0 10px;width:100%;display:block}nav>ul{margin:10px 0;padding:0;list-style:none;text-align:center}nav>ul>li{display:inline-block;padding:10px 15px}nav>ul>li>a{outline:0;color:#666;text-decoration:none;letter-spacing:1px;text-transform:uppercase}nav>ul>li>a>i{margin-right:5px}nav>ul>li>a:focus,nav>ul>li>a:hover{outline:0;text-decoration:none;color:#ec971f}.cl-effect-4>ul>li>a{padding:0 0 8px}.cl-effect-4>ul>li>a::after{position:absolute;top:100%;left:0;width:100%;height:1px;background:#666;content:'';opacity:0;-webkit-transition:height .3s,opacity .3s,-webkit-transform .3s;-moz-transition:height .3s,opacity .3s,-moz-transform .3s;transition:height .3s,opacity .3s,transform .3s;-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);transform:translateY(-10px)}.cl-effect-4>ul>li>a:focus::after,.cl-effect-4>ul>li>a:hover::after{height:3px;opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0)}.breadcrumb{padding:0;background:0 0;margin-top:8px}.breadcrumb li{float:left}.breadcrumb li.active a{background:0 0;color:#666}.breadcrumb li.completed a{color:#ffc107}.breadcrumb li a{color:#fff;text-decoration:none;position:relative;display:block;float:left}.breadcrumb li:first-child a{padding-left:15px}.breadcrumb li a:hover{background:0 0;color:#ffc107}

 #sidebar-wrapper {
    margin-right: -250px;
    right: 0;
    width: 250px;
    background: rgb(0,0,0);
    position: fixed;
    height: 100%;
    overflow-y: auto;
    z-index: 1000;
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
  }

  .sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar-nav li {
    line-height: 40px;
    text-indent: 20px;
	border-bottom: thin solid #FBBC05
  }

  .sidebar-nav li a {
    color: #999999;
    display: block;
    text-decoration: none;
  }

  .sidebar-nav li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.2);
    text-decoration: none;
  }

  .sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
  }

  .sidebar-nav > .sidebar-brand {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
  }

  .sidebar-nav > .sidebar-brand a {
    color: #999999;
  }

  .sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
  }

  #menu-toggle {
    top: 0;
    right: 35px;
    position: fixed;
    z-index: 1;
    margin:0;
    border-radius:0;
    background-color:#FBBC05;
    border:none;
    padding:13px 16px;
    color:#fff

  }

  #sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
  }

  .toggle {
    margin: 5px 5px 0 0;
  }


@media screen and (max-width: 1024px) {
    nav > ul{
		margin:3px 0 0
		}
	nav > ul > li {
		padding:10px 5px;
		}
	nav > ul > li > a > i {
		margin-right:0px
		}
}

@media screen and (max-width: 980px) {
    nav > ul{
		margin:3px 0 0
		}
	nav > ul > li {
		padding:10px;
		}
	nav > ul > li > a > i {
		margin-right:5px
		}
}

@media screen and (max-width: 800px) {
    nav > ul{
		margin:3px 0 0
		}
	nav > ul > li {
		padding:10px 5px;
		}
	nav > ul > li > a {
		font-size:small	
		}
	nav > ul > li > a > i {
		margin-right:0px
		}
}

@media screen and (max-width: 768px) {
    nav > ul{
		margin:3px 0 0
		}
	nav > ul > li {
		padding:10px 3px;
		}
	nav > ul > li > a {
		font-size:small	
		}
	nav > ul > li > a > i {
		margin-right:0px
		}
}