#ctrlmenu {
  display: none;
}

header {
  height     : 44px;
  position   : fixed;
  font-size  : 0;
  line-height: 0;
  top        : 4%;
  left       : 0;
  width      : 100%;
  z-index    : 5;

  .logo {
    width  : auto;
    display: inline-block;

    a {
      display: inline-block;
      height : 44px;

      img {
        display: inline-block;
        width  : auto;
        height : 100%;
      }
    }
  }

  nav {
    height     : 44px;
    margin-left: 5%;

    a {
      line-height: 44px;
      display    : inline-block;
      font-weight: bold;
      color      : #fff;
      @include header-size($header-sizes);
    }
  }

  .lang {
    font-size    : 16px;
    line-height  : 44px;
    color        : #fff;
    padding-right: 65px;

    a {
      font-family: "helveticalight";
      color      : #fff;
      display    : inline-block;
      line-height: 44px;
      padding    : 0 0.5em;

      &.on {
        font-weight: bold;
      }
    }
  }
}

label.myInput {
  display   : inline-block;
  width     : 65px;
  height    : 44px;
  cursor    : pointer;
  margin    : 0;
  z-index   : 100;
  transition: $tr4;
  overflow  : hidden;
  position  : fixed;
  @include menu-btn($menu-btn);
  z-index   : 99;
  top       : 4%;

  .menu {
    margin-top: 12px;
    width     : 25px;
    padding   : 0 20px;

    .bar {
      height            : 3px;
      width             : 25px;
      border-radius     : 50px;
      margin            : 5px 0;
      display           : block;
      position          : relative;
      background-color  : #fff;
      -moz-transition   : 0.4s;
      -o-transition     : 0.4s;
      -webkit-transition: 0.4s;
      transition        : 0.4s;
    }
  }
}

.nav-tan {
  background-color: #1a3253;
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  z-index         : 5;
  opacity         : 0;
  visibility      : hidden;
  transition      : $tr4;

  .list {
    overflow: hidden;

    ul {
      float  : left;
      padding: 0;
      margin : 0;

      li {
        color  : #fff;
        width  : 100%;
        display: block;

        &.tit {
          font-size    : 24px;
          font-weight  : bold;
          border-bottom: 1px solid #8995a6;
          padding      : 0 100px 50px 0;
          margin-bottom: 50px;
        }

        a {
          color      : #fff;
          font-size  : 18px;
          line-height: 48px;
        }
      }
    }
  }
}

#ctrlmenu:checked ~ label.myInput {
  .bar {
    background-color: #fff;

    &:nth-of-type(1) {
      transform: translateY(8px) rotate(45deg);
    }

    &:nth-of-type(2) {
      transform : translateX(100px);
      transition: 0.6s;
    }

    &:nth-of-type(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  }
}

#ctrlmenu:checked ~ .nav-tan {
  opacity   : 1;
  visibility: visible;
  transition: $tr4;
}

article {
  // padding-top: 110px;
  //@include article-top($header-sizes);
}