/******************* Hamburger Menu *******************/
.menu {
  transition: 0.1s transform linear;
  position: relative;
  background: 0;
  float: right;
  margin: 10px 10px 0 0;
  height: 2.2rem;
  width: 2.6rem;
  z-index: 3;
  outline: 0;
  padding: 0;
  border: 0;
}
.bar, .bar::before, .bar::after {
  transition: 0.2s; 
  background: linear 0.1s 0.2s;
  border-radius: 5px;
  top: linear 0.2s 0.2s;
  transform: linear;
  position: absolute;
  background: #444;
  margin: auto;
  width: 100%;
  height: 5px;
  content: '';
  top: 50%;
  right: 0;
}
.bar {
  margin-top: -0.2rem;
}
.bar::before {
  top: -0.9rem;
}
.bar::after {
  top: 0.9rem;
}
.bar::before, .bar::after {
  transform: rotate(180deg);
}
.active .bar {
  background: 0;
}
.active .bar::before {
  transform: rotate(45deg);
}
.active .bar::after {
  transform: rotate(-45deg);
}
.active .bar::before, .active .bar::after {
  top: 0;
}
.active .bar, .active .bar::before, .active .bar::after {
  transition: 0.2s; 
  background: linear 0.1s 0.2s; 
  top: linear 0.2s; 
  transform: linear 0.2s;
}
.ham {
  border: 2px solid #666;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
  z-index: 2;
  right: -10px;
  width: 175px;
  height: 100%;
  background: rgba(136, 136, 136, 0.95);
  text-align: left;
  color:ghostwhite;
  position: fixed;
  transform: translateX(185px);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  padding-top: 5rem;
  -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
     -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
          box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
.menu-open .ham {
  transform: translateX(0);
  -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
     -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
          box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
.ham ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.ham ul li {
  color: ghostwhite;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  -o-transition:color .2s ease-out, background .2s ease-in;
  -ms-transition:color .2s ease-out, background .2s ease-in;
  -moz-transition:color .2s ease-out, background .2s ease-in;
  -webkit-transition:color .2s ease-out, background .2s ease-in;
}
.ham ul li:hover {
  background: #c0392b; 
  -o-transition:color .5s ease-out, background .2s ease-in;
  -ms-transition:color .5s ease-out, background .2s ease-in;
  -moz-transition:color .5s ease-out, background .2s ease-in;
  -webkit-transition:color .5s ease-out, background .2s ease-in;
}

@media only screen and (max-width: 799px) {
  /* social icons */
  ul#social-1, ul#social-2 {
    max-width: 50%;
    margin-right: 0px;
    float: left;
  }
  #social-1 li {
    text-align: center;
    display: inline-block;
    max-width: 100%;
  }
  #social-2 li {
    text-align: center;
    display: inline-block;
    max-width: 100%;
  }
}




/******************* Desktop View!!! *******************/
@media only screen and (min-width: 800px) {
  .ham {
    width: 300px;
    transform: translateX(310px);
  }
  .ham ul li {
    color: ghostwhite;
    padding: 1rem 2.5rem;
  }
}