.global-navigation {
  font-size: 1.8em;
  font-weight: $font-bold;
  margin:.5em 0 0 0;


  ul {
    list-style: none;
    margin:0;
    padding:0;

    li {
      display:inline-block;
      margin:0;
      line-height: 2;
      width: 49%;
      text-align: center;

      a {
        padding:0 .25em;

        &.translation-flag {
          position: relative;

          img {
            position: relative;
            top:2px;
          }

          span {
            display:none;
          }

          @include respond-to('small') {
            span {
              display:inline;
            }
          }

        }
      }
    }
  }

  .delimiter {
    display:none;
  }


  @include respond-to('tiny') {
    ul li {
      width: auto;
      text-align: left;
      display:inline-block;
    }

    .delimiter {
      color:lighten($color-font-secondary, 50%);
      display:inline-block;
    }
  }


  @include respond-to('small') {
    float:right;
    display:block;
    text-align: right;
    padding-top: 30px;
  }
}

// ----------------------------------------------------------------------------
// Global Header
// ----------------------------------------------------------------------------
.global-header {

  .burger-menu-button {
    display: none;
  }

  &.fixed {
    position: fixed;
    z-index: 999;
    height:40px;
    top:-40px;
    left:0;
    background-color: $color-bg-no-color;
    box-shadow: 0 0 5px 0px #999;
    animation: slide-down 1s ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    .wrapper {
      padding-top: 5px;
    }

    .logo {
      float:left;
      width: 85px;
    }

    .burger-menu-button {
      float:right;
      display: block;
      font-size:1.8em;
      margin-top: 2px;

      @include respond-to('small') {
        display:none;
      }
    }


    .global-navigation {
      clear:both;
      float:right;
      text-align: right;
      background-color: $color-bg-no-color;
      margin-top: 3px;
      height:0;
      transition:height 1s ease;

      &.open {
        height:auto;
        transition:height 1s ease;
        border-bottom:1px solid #CCC;
        border-left:1px solid #CCC;
        border-right:1px solid #CCC;

      }

      ul {
        li {
          display:block;
          width:100%;
          padding-left:1em;
          padding-right:1em;
          text-align: left;

          // Für mobile Schrift größer :)
          font-size:1.4em;

          .translation-flag {
            span {
              display:inline;
            }
          }

          @include respond-to('small') {
            width: auto;
            text-align: left;
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            font-size:1em;
          }
        }
      }

      @include respond-to('small') {
        height:auto;
        background-color: transparent;
        clear:none;
        padding-top: 0;
        margin-top: 0;

        &.open {
          height:auto;
        }
      }

      .delimiter {
        @include respond-to('tiny') {
          display: none;
        }
        @include respond-to('small') {
          display:inline-block;
        }
      }
    }

    // Animation für global-header bei .fixed
    @keyframes slide-down {
      0% { top: -40px; }
      100% { top: 0px; }
    }
  }
}