/* Switch to hamburger menu on small devices */
@media only screen and ( max-width:768px) {
  #side-menu {display: none;}
  #ham-button {display: block;}
}
.side-menu a:hover {
  background-color: darkred;
  color: white;
  -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;
}
body {
  background-color:#FFF;
}

/* general link formate*/
a {
  text-decoration: none;
}
/* Side Menu Container */
.side-menu {
  display: flex;
  background-color: #111;
  padding: 10px;
  border-radius: 5px;
  color: #F4FFFE;
  font-family: Helvetica, sans-serif;
  text-justify:distribute;
  box-sizing:border-box;
  width: 100%;
  text-align:center;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Side Menu Links */
.side-menu a {
  display:block;
  color: #818181;
  padding: 8px;
  font-size: 16px;
  border-radius: 4px;
  background-size: 50px; 
}

/* When mouse hover on links in side Menu */
.side-menu a:hover {
  background-color: darkred;
  color: white;
  -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;
}

/* Side Menu Heading */
.side-menu h3 {
  padding: 8px;
  text-align:center;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
	position: relative;
	background-color:#FFF;
}
/* Hamburger Menu Button */
#ham-button {
  display: none;
  height:40px;
  width:40px;
  background-color:#666666;
  appearance:push-button;
  margin: 6px 0;
}
.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
	align-items: center;
}
nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
}
nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
@media only screen and (max-width: 768px) {
}
/* Switch to hamburger menu on small devices */
@media only screen and ( max-width:768px) {
 #side-menu {display: none; width: 100%; text-align:center}
  #ham-button {display: block;}
  }