/* -- Slideout Sidebar -- */

.attention {
    padding-left: 25px !important;
    background: #e76b21;
    line-height: 37px;
}

.slideout-sidebar ul.submenu.dropdown-menu{
	box-shadow: none;
}
.slideout-sidebar .dropdown-menu{
	width:100%;
	border:none;
}
.slideout-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 1001;
  width: 350px;
  height: 100%;
  transition: all 300ms ease-in-out;
  max-width: 350px;
}
.slideout-sidebar * {
	position:relative;
	z-index: 701;
}
#menu-toggle:checked ~ .slideout-sidebar:after {
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity: .85;
	z-index: 501;
}

.slideout-sidebar ul {
  list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #4c4c4c;
}
.slideout-sidebar > ul {
    padding-top: 66px;
}

.slideout-sidebar ul li {
  cursor: pointer;
  padding: 10px 0 10px 25px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
	
}

.slideout-sidebar ul li:last-child {
  border-bottom: 0;
}

.slideout-sidebar ul li:hover {
  color: rgba(244,244,244,1);
}

#menu-toggle {
  display: none;
}

.menu-icon {
  position: absolute;
  top: 18px;
  right: 30px;
  font-size: 24px;
  z-index: 1002;
  transition: all 300ms ease-in-out;
  color:#e76b21;
}


/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar {
  right: 0px;
}


#menu-toggle:checked ~ .content-container {
  padding-left: 190px;
}

@media (max-width: 991px) {
	.nav-item .submenu {position:relative; left:0;}
  
  .content-container {
    max-width: 480px;
  }
  
}

@media (max-width: 991px) {
  
  .content-container {
    max-width: 100%;
    margin: 30px auto 0;
  }
  
  #menu-toggle:checked ~ .content-container {
    padding-left: 0;
  }
  
  .slideout-sidebar ul {
    text-align: left;
    max-width: 100%;
    margin: 0px;
  }
  
  .menu-icon {
    right: 20px
  }
  
  #menu-toggle:checked ~ .slideout-sidebar {
    width: 100%;
	max-width: 100%;
	padding-left:20%;
  }
  
  @media screen  
    and (max-width: 991px) 
    and (orientation: landscape) {
      
      .slideout-sidebar {
        padding: 0;
      }
      
      .slideout-sidebar ul {
        max-width: 100%;
        margin: 0px;
      }
      
      .slideout-sidebar ul li {
        display: inline-block;
        border-bottom: 0;
      }

  }
  
}