:root {
  --greenDark:#6C883D;
  --green: #728F40;
  --greenLight:#7C9C46;
  --white: #ffffff;
  --black: #666666;
  --greyLight: #eeeeee;
}

button.slide-btn {
  background-color: inherit;
  border: 0px;
  cursor: pointer;
  margin-left: 2px;
}

button.slide-btn .icon-bar {
  margin-bottom: 3px;
  background-color: #666666;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
}

.slide-menu {
  width: 40%;
  background-color: var(--white);
  opacity:1;
  border:1px solid var(--greyLight);
}
@media screen and (max-width:600px){ /*sm (576px) */ 
  .slide-menu {
    width: 60%;
  }
}

.slide-menu, .slide-menu a { 
  color: var(--black);
}

.slide-menu a{ 
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  padding-top:  .9rem; 
  padding-left: 5px;
  padding-bottom:  .9rem; 
  border-bottom: 1px dotted var(--greenDark); 
  text-decoration: none;
}

.link-button {
  font-size: inherit;
  background: none;
  border: none;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  padding-top:  .9rem; 
  padding-bottom:  .9rem; 
  border-bottom: 1px dotted var(--green);
  font-weight: lighter;
  width: 100%;
  text-align: left;

}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}

.slide-menu a:hover, .link-button:hover {
  background-color: var(--greyLight);
}

.slide-menu li.active > a{
  color: var(--black);
}

.slide-menu .controls {
  display: flex;
  margin-bottom: 1rem;
  background-color: var(--greenDark);
}
.slide-menu .btn {
  cursor: pointer;
  padding: .75rem 1.5rem;
  flex: 1 0 auto;
  font-size: 90%;
  color: var(--white);
  
  text-transform: uppercase;
  border:0px;
}
.slide-menu .btn:first-of-type { 
  text-align: left;
}


.slide-menu .btn:first-of-type:before {
  /*
  content: "<";
  margin-right: .5rem;
  */
}
.slide-menu .btn:last-of-type {
  text-align: right;
}
.slide-menu .btn:last-of-type:before {
  /*
  content: "✕";
  margin-right: .5rem;
  */
}


.slide-menu .slide-menu__backlink {
  text-transform: uppercase;
}
