/* ========== [ Variables ] ========== */
/* ========== [ Mixins ] ========== */
/* ========== [ Header Part ] ==========*/
header {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 9;
  transform: translateY(-120%);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear; }
  header.showHd {
    transform: translateY(0); }
  header .headerInner {
    display: flex;
    color: white; }
    header .headerInner .headerItem {
      width: 25%;
      border-left: 1px solid white;
      display: flex;
      justify-content: center;
      align-items: center; }
      header .headerInner .headerItem:first-child {
        border-left: none; }
      header .headerInner .headerItem a {
        padding: 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #9d1c1c;
        border-bottom: 1px solid white;
        font-size: 1.2rem;
        line-height: 1.6rem;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear; }
        header .headerInner .headerItem a::before {
          content: "";
          width: 100%;
          height: 20px;
          display: block;
          bottom: -7px;
          left: 0;
          position: absolute;
          border-bottom-left-radius: 7px;
          border-bottom-right-radius: 7px;
          background: #BC2B2B;
          border-bottom: 1px solid white;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          -webkit-transition: all 0.3s linear;
          -moz-transition: all 0.3s linear;
          -ms-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          transition: all 0.3s linear; }
        header .headerInner .headerItem a.active {
          position: relative;
          background: #BC2B2B;
          border-bottom: none; }
          header .headerInner .headerItem a.active::before {
            opacity: 1;
            visibility: visible;
            pointer-events: visible; }

@media screen and (min-width: 768px) {
  header .headerInner .headerItem a {
    font-size: 1.6rem;
    line-height: 2.2rem; } }