body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #455a64;
}

*{
	box-sizing:border-box;
}

#pageHolder{
	
	max-width:1280px;
	width:100%;
	margin:0 auto;
	 margin-bottom:50px;
}

/* HERO IMAGE */
.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* NAVBAR */
.navbar {
  background: #000;
}
.navbar ul {
  margin: 0;
  padding: 0 0 0 50px;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.navbar li {
  padding: 14px 20px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}
.navbar a {
  color: #b0bec5;
  text-decoration: none;
}
.navbar a:hover {
  color: #455a64;
}

/* LAYOUT */
.layout {
  display: flex;
  min-height: 70vh;
  background:#000;
}
/* MAIN CONTENT */
.content {
  flex: 1;
  margin-left: 20px;
  padding: 20px;
  background: #fff;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  height: 100%;          /* fills the .layout height (70vh) */
  overflow: hidden;      /* prevents sidebar from stretching */
  background: #000;
  color: #fff;
  padding: 20px 0;
 /*border: 1px solid red;*/
}

/* Base UL/LI reset */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  cursor: pointer;
}

.sidebar li:hover {
  color: #455a64;
}

/* Category list container */
.cat_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat_item {
  margin-bottom: 6px;
}

/* Category title (click to open) */
.cat_title {
  display: block;
  padding: 6px 8px;
  cursor: pointer;
  font-weight: bold;
}

/* Entries inside a category */
.cat_entries {
  list-style: none;
  padding: 0;
  margin: 0;

  /* 🔥 The important part */
  max-height: 300px;     /* set the scroll area height */
  overflow-y: auto;      /* scrolls inside instead of stretching sidebar */
}

/* Individual entry */
.cat_entry {
  margin: 0;
}

/* The button inside each entry */
.jq_drop_sub {
  width: 100%;
  text-align: left;
  padding-left: 20px;    /* indent */
  border: none;
  background: none;
  color: #b0bec5;
  cursor: pointer;
}

.jq_drop_sub:hover {
  color: #455a64;
}


/*CUSTOM SCROLL BAR  Chrome, Edge, Safari */

.cat_entries::-webkit-scrollbar {
  width: 6px;              /* skinny scrollbar */
}

.cat_entries::-webkit-scrollbar-track {
  background: #111;         /* dark track */
}

.cat_entries::-webkit-scrollbar-thumb {
  background: #555;         /* thumb color */
  border-radius: 4px;       /* rounded thumb */
}

.cat_entries::-webkit-scrollbar-thumb:hover {
  background: #777;         /* hover color */
}

/* Firefox */
.cat_entries {
  scrollbar-width: thin;    /* thin scrollbar */
  scrollbar-color: #555 #111; /* thumb color | track color */
}






/* MAIN CONTENT */
.content {
  flex: 1;
  margin-right: 20px;
  padding: 20px;
  background: #fff;
}

/* FOOTER */
.footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 15px;
 
}

.footer a{
	color:#b0bec5;
}

.footer a:hover{
	color:#455a64;
}






/* RESPONSIVE */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
}