#nav-btn-toggle, #nav-bg {
  display: none; }

#nav-bg {
  opacity: 0; }

.mobile .visible {
  display: block !important;
  opacity: 1 !important; }
.mobile #nav-bg {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5d3e8a; }
.mobile #nav-btn-toggle {
  position: fixed;
  display: block;
  z-index: 100;
  right: 15px;
  top: 15px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer; }
  .mobile #nav-btn-toggle:focus {
    outline: 0; }
  .mobile #nav-btn-toggle.fa-times {
    color: #fff; }
.mobile .nav-vertical {
  position: fixed;
  z-index: 99;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -145px;
  display: none; }
  .mobile .nav-vertical ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .mobile .nav-vertical ul li a {
      box-sizing: border-box;
      display: block;
      width: 150px;
      height: 40px;
      margin-bottom: 20px;
      text-decoration: none;
      text-align: center;
      color: #fff;
      transition: all 0.3s ease;
      border-bottom: 2px solid transparent; }
      .mobile .nav-vertical ul li a:hover {
        border-bottom-color: purple;
        color: #555; }