/* - - - Division - - - */

/* .menu */
.menu {
  color:rgba(0, 0, 0, 0.3);
  font-style:italic;
    width:100%;
      align-items:center;
      display:-ms-flex; display:flex;
      -ms-flex-wrap:wrap; flex-wrap:wrap;
      padding:15px 0;
}
.menu div {
  line-height:30px;
  text-align:center;
  white-space:nowrap;
    height:30px;
      display:inline-block;
      margin:5px 7px 5px 0;
      vertical-align:top;
}
.menu div:last-child {
  margin-right:0;
}
.menu hr {
  margin:14px 0 12px;
}
.menu image, .menu img, .menu svg {
  width:32px; height:32px;
    margin-top:-2px;
    vertical-align:middle;
}
.menu span {
  vertical-align:middle;
}
.menu .button {
  min-width:30px;
    border-radius:5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding:0 7px;
}
.menu .button.share image, .menu .button.share img, .menu .button.share svg {
  width:100%; max-width:24px; height:100%; max-height:24px;
    margin-top:-4px;
}
.menu .button.tag {
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
}
.menu .button.tag image, .menu .button.tag img, .menu .button.tag svg {
  margin:-2px -4px 0 -6px;
}
.menu .button.share {
  margin-left:5px; padding:0;
}
.menu .gap {
  width:100%; height:0;
    display:block;
    flex:1;
    margin:0; padding:0;
}

/* .menu.head */
.menu.head {
  color:#000;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; font-style:normal; font-weight:500;
    padding:0;
}
.menu.head div {
  line-height:70px;
    height:70px;
      margin:0;
}
.menu.head .button {
  background-color:transparent;
    border-radius:0;
    padding:0;
}
.menu.head .button.logo {
  margin-right:5px;
}
.menu.head .date {
  z-index:-1;
    position:absolute;
    top:0; right:0; left:0;
}
.menu.head .button.logo image,
.menu.head .button.logo img,
.menu.head .button.logo svg {
  width:40px; height:40px;
}
.menu.head .button.logo svg g,
.menu.head .button.logo:hover svg g {
  fill:#000;
}
.menu.head .button.logo image.black,
.menu.head .button.logo img.black {
  display:inline-block;
}
.menu.head .button.logo image.blue, .menu.head .button.logo img.blue,
.menu.head .button.logo image.green, .menu.head .button.logo img.green,
.menu.head .button.logo image.red, .menu.head .button.logo img.red,
.menu.head .button.logo image.white, .menu.head .button.logo img.white,
.menu.head .button.logo image.yellow, .menu.head .button.logo img.yellow {
  display:none;
}

/* .menu.head */
.menu.head.top {
  z-index:100;
    position:fixed;
    top:0; right:0; left:0;
}
.menu.head.top .button {
  width:70px;
}
.menu.head.bottom {
  z-index:10;
    margin:70px 0;
    position:relative;
}
.menu.head.bottom div {
  width:16.66%;
    flex:1;
}
.menu.head.back:after, .menu.head.back:before {
  content:'';
    width:100%;
    top:0; left:0;
}
.menu.head.back:after {
  background-color:#fff;
  height:70px;
  z-index:90;
    box-shadow:0 1px 10px 1px rgba(0, 0, 0, 0.15);
    position:fixed;
}
.menu.head.back:before {
  background-color:rgba(0, 0, 0, 0.03);
  height:140px;
    position:absolute;
}


/* .menu.foot */
.menu.foot {
  border-top:1px solid rgba(0, 0, 0, 0.2);
  margin:70px 0;
}

/* - - - Responsive - - - */

/* mobile */
@media screen and (max-width:799px) {

  /* .menu */
  .menu div {
    line-height:25px;
      height:25px;
        margin:0 4px 0 0;
  }
  .menu .button {
    background-color:transparent;
      box-shadow:none;
      padding:0;
      top:0px;
  }
  .menu .button.share image, .menu .button.share img, .menu .button.share svg {
    margin-top:-3px;
  }
  .menu .button.tag {
    top:-1px;
  }
  .menu .gap {
    flex:none;
  }

  /* .menu.head */
  .menu.head div {
    line-height:60px;
      height:60px;
  }
  .menu.head .gap {
    flex:1;
  }

  /* .menu.head.bottom */
  .menu.head.bottom {
    margin:60px 0 40px;
  }
  .menu.head.back:after {
    height:60px;
  }
  .menu.head.back:before {
    height:120px;
  }

  /* .menu.foot */
  .menu.foot {
    margin:60px 0;
  }

}