.navigation-wrapper { color: #fff; position: relative;
  a { color: #fff;
    &:hover { color: $color-secondary; }
  }
  .background { background-color: $color-primary; overflow: hidden; }
  .secondary-navigation-wrapper { background-color: rgba(0,0,0,.1); border-bottom: 1px solid rgba(255,255,255,0.1); /*padding: 15px 0;*/ position: relative; height: 40px; line-height: 40px; overflow: hidden;
    ul { margin-bottom: 0; float: right; display: inline-block;
      li { display: inline-block; margin-left: 20px; padding: inherit;
        i { color: $color-secondary; margin-right: 5px; }
      }
    }
    .search { float: right; display: inline-block;
      .input-group { @include transition(.8s); margin-bottom: 0; width: 1px; overflow: hidden;
        &:hover { width: 240px;
          input {  margin-left: 20px; right: 0; }
        }
        input { @include transition(.8s); border: none; right: -20px; position: relative; }
        .btn { margin-left: 0 !important; padding: 8px 12px; position: relative; z-index: 2; }
      }
    }
  }
  .primary-navigation-wrapper { @include transition(.4s); padding: 30px 0px; position: relative;
    header { border: 0; margin-bottom: 0;
      .navbar-brand { @include transition(.4s); padding: 0 0 0 15px; position: relative;
        img { @include transition(.4s); max-height: 50px; position: relative; z-index: 1; }
        &:before { @include transition(.4s); background-color: #fff; content: ""; height: 190px; width: 3000px; position: absolute; top: -30px; right: -80px; z-index: 0; }
        &:after {  background-color: $color-secondary; background-image: url("../img/background-city.png"); background-position: 0; content: ""; height: 215px; width: 3000px; position: absolute; top: 158px; overflow: hidden; right: -80px; z-index: 0; }
      }
      nav { padding: 0; position: relative; z-index: 99;
        .navbar-nav {
          li { padding: inherit;
            a { font-size: 14px; padding: 10px; padding-left: 20px;
              &:last-child { padding-right: 0; }
              &:hover, &:focus, &:active { background-color: transparent; cursor: pointer; }
              &.has-child {
                &:after { @include font-awesome; color: #fff; content: "\f107"; display: inline-block; font-size: 10px; margin-left: 5px; margin-right: -10px; position: relative; top: 0px; }
              }
            }
            &.active {
              a { color: $color-secondary; }
            }
            &:hover {
              .child-navigation { @include opacity(1); visibility: visible; }
            }
            .child-navigation { @include opacity(0); @include transition(.2s); background-color: darken($color-primary, 8%); visibility: hidden; position: absolute; top: 45px; min-width: 200px;
              li { border-bottom: 1px solid rgba(255,255,255,.05); padding: inherit;
                a { @include transition(.3s); background-color: transparent; color: #fff; display: block; text-transform: none; padding: 10px; white-space: nowrap;
                  &:hover { background-color: $color-secondary; color: #fff;
                  }
                }
                &:first-child {
                  a {
                    &:after { @include transition(.3s); border-color: transparent transparent darken($color-primary, 8%) transparent; border-style: solid; border-width: 0 7.5px 7px 7.5px; content: ""; height: 0px; position: absolute; left: 30px; top: -7px; width: 0px; }
                    &:before { background-color: transparent; content: ""; height: 7px; width: 100%; position: absolute; top: -7px; }
                    &:hover {
                      &:after { border-color: transparent transparent $color-secondary transparent; }
                    }
                  }
                }
                &:last-child { border: none; }
              }
            }
          }
        }
      }
    }
  }
}

