body {
    font-family: calibri;
    padding: 0px;
  }
  
  /* header */
  .logo {
    color:black;
    display:inline-lock;
    padding-left: 20px;
  }
  .header {
      background-color: #fff;
      box-shadow: 1px 1px 4px 0 rgba(0,0,0,.5);
      position: fixed;
      width: 100%;
      z-index: 3;
  }
  
  .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      background-color: #fff;
      padding-right: 20px;
      font-size: 1.2rem;
  }
  
  .header li a {
      display: block;
      padding: 20px 20px;
      text-decoration: none;
      color: black;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
      background-color: #f4f4f4;
      color: #007bff;
  }
  
  .header .logo {
      display: block;
      float: left;
      font-size: 2em;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
      clear: both;
      max-height: 0;
      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: #333;
      display: block;
      height: 2px;
      position: relative;
      transition: background 0.2s ease-out;
      width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
      background: #333;
      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;
  }
  
  /* menu btn */
  
  .header .menu-btn {
      display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
      max-height: 300px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
      .header li {
          float: left;
      }
      .header li a {
          padding: 22px 14px;
      }
      .header .menu {
          clear: none;
          float: right;
          max-height: none;
      }
      .header .menu-icon {
          display: none;
      }
  }