@media only screen and (min-width: 600px){
  header{
    max-width: 1080px;
    margin: auto;
  }
}
header *{
  color: white;
}
header{
  background-color :#155eb1;
  height: 72px;
}
header .logo{
  margin-top: 5px;
  float: left;
  height: 66px;
  transition: 0.8s;
}
.showing{
  max-height: 100em;
}
header ul{
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
header ul li{
  float: left;
}
header ul li a{
  display: block;
  padding: 21px;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 1.1em;
  text-decoration: none;
  transition: 0.5s;
  font-weight: 400;
  height: 30px;
}
header ul li a:hover{
  background-color: #17abe6;
  padding-bottom: 51px;
}
header ul li.active a{
    background-color: #17abe6;;
    padding-bottom: 51px;
}
header .menu-toggle{
  display: none;
}
  /*MEDIA QUERIES */
  @media only screen and (max-width: 600px){

    header {
      position: relative;

    }
    header ul{
      width: 100%;
      background-color: #4279b8;
      max-height: 0px;
      overflow: hidden;
      margin-bottom: 30px;
    }

    header ul li{
    width: 100%;
    }
    header ul li a{
      width: 100%;
      padding-bottom: 45px;
      }

    header .menu-toggle{
      display: block;
      position: absolute;
      right: 20px;
      top: 2px;
      font-size: 2.3em;
      margin-top: 15px;
    }
  }