body {
  width: 100vw;
  height: 20vh;
  background-color: #42d9f4;
  position: absolute;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.header {
  width: 800px;
  height: 300px;
  margin: auto;
  float: none;
  text-align: center;
  padding-top: calc(50vh - 150px);
  transition: all 0.5s;
}

.header label {
  cursor: inherit;
}

.header a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  transition: all 0.4s;
}

.header a:hover {
  color: #ccc;
}

.header h1 {
  color: #fff;
  position: relative;
  font-size: 3rem;
}

.header ul {
  position: relative;
  text-align: center;
  padding: 0;
  list-style: none;
}

.header ul li {
  display: inline-block;
  line-height: 40px;
}

.header ul li div {
  position: relative;
  z-index: -1;
  border-radius: 50%;
  margin: 0 auto;
  top: 20px;
  height: 0;
  width: 0%;
  background-color: #fff;
  transition: all 0.4s;
}

.header ul li:not(.divider) {
  width: 20%;
}

.header ul li a {
  padding: 15px 25px;
  transition: all 0.4s;
}

.header ul li a:hover {
  color: #555;
}

.header ul li:hover div {
  margin-bottom: -4px;
  width: 80%;
  height: 4px;
}

.header ul li.divider {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  border-radius: 50%;
  width: 2px;
  height: 40px;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9tZXBhZ2UuY3NzIiwic291cmNlcyI6WyJob21lcGFnZS5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbImJvZHkge1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMjB2aDtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzQyZDlmNDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IDA7XG4gIGZvbnQtZmFtaWx5OiAnUm9ib3RvJywgc2Fucy1zZXJpZjtcbn1cblxuaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IC05OTk5cHg7XG4gIGxlZnQ6IC05OTk5cHg7XG59XG5cbi5oZWFkZXIge1xuICB3aWR0aDogODAwcHg7XG4gIGhlaWdodDogMzAwcHg7XG4gIG1hcmdpbjogYXV0bztcbiAgZmxvYXQ6IG5vbmU7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgcGFkZGluZy10b3A6IGNhbGMoNTB2aCAtIDE1MHB4KTtcbiAgdHJhbnNpdGlvbjogYWxsIDAuNXM7XG4gIGxhYmVsIHtcbiAgICBjdXJzb3I6IGluaGVyaXQ7XG4gIH1cbiAgYSB7XG4gICAgY29sb3I6ICNmZmY7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGZvbnQtc2l6ZTogMnJlbTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC40cztcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiAjY2NjO1xuICAgIH1cbiAgfVxuICBoMSB7XG4gICAgY29sb3I6ICNmZmY7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogM3JlbTtcbiAgfVxuICB1bCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgbGkge1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgbGluZS1oZWlnaHQ6IDQwcHg7XG4gICAgICBkaXYge1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIHotaW5kZXg6IC0xO1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIG1hcmdpbjogMCBhdXRvO1xuICAgICAgICB0b3A6IDIwcHg7XG4gICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgd2lkdGg6IDAlO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC40cztcbiAgICAgIH1cbiAgICAgICY6bm90KC5kaXZpZGVyKSB7XG4gICAgICAgIHdpZHRoOiAyMCU7XG4gICAgICB9XG4gICAgICBhIHtcbiAgICAgICAgcGFkZGluZzogMTVweCAyNXB4O1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC40cztcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgY29sb3I6ICM1NTU7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBkaXYge1xuICAgICAgICAgIG1hcmdpbi1ib3R0b206IC00cHg7XG4gICAgICAgICAgd2lkdGg6IDgwJTtcbiAgICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgJi5kaXZpZGVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjYpO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgd2lkdGg6IDJweDtcbiAgICAgICAgaGVpZ2h0OiA0MHB4O1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiQUFBQSxBQUFBLElBQUksQ0FBQztFQUNILEtBQUssRUFBRSxLQUFNO0VBQ2IsTUFBTSxFQUFFLElBQUs7RUFDYixnQkFBZ0IsRUFBRSxPQUFRO0VBQzFCLFFBQVEsRUFBRSxRQUFTO0VB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 */
