*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;  
}
.header {
  background-color: #78dadd;
  box-shadow: 1px 1px 4px 1px rgba(0,0,0,.1);
  position: absolute;
  width: 100%;
  z-index: 3;
  height: auto;
  PADDING: 0.5% 4% 0% 4%;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  background-color: #78dadd;
}

.header li a {
  color: #111;
  display: inline;
  padding: 20px 20px;
  text-decoration: none;
  font-size:20px;
  float: left;
}

.header li a:hover,
.header .menu-btn:hover {
  color: #111;
  background: #fff;
  border-color: black;
  border-style: solid;
  
}
.header li a:active,
.header .menu-btn:active {
  color: #111;
  background: #fff;
  border-color: black;
  border-style: solid;
  
}
.header li a:focus, 
.header .menu-btn:focus {
  color: #111;
  background: #fff;
  border-color: black;
  border-style: solid;
  
}

.header .logo a {
  display: block;
  float: left;
  font-size: 35px;
  font-weight: 550;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}

.header .logo-img{
  float: left;
}

/* menu */

.header .menu {
  clear: both;
  max-height: auto;
  font-size: 18px;
  flex-wrap: wrap;
  display: inline;
  color:black;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: rgb(8, 8, 8);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: rgb(5, 5, 5);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


}