.navigation { @include box-shadow(0px 1px 2px rgba(0,0,0,.15)); background-color: #fff; /*margin-bottom: 20px;*/ position: relative; width: 100%; z-index: 99; top: 0;  //top: 0;
  &:hover {
    .secondary-navigation { @include opacity(1); }
  }
  .navbar-collapse { padding-right: 0; }
  .navbar { border: none; margin-bottom: 0; min-height: inherit; padding: 30px 0; /**/ display: table; width: 100%;
    .collapse { display: table-cell !important; vertical-align: middle; float: none !important; }
    .navbar-brand { height: inherit; line-height: 0; padding: 0; }
    .navbar-nav { float: right;
      > li {
        &:hover {
          > .child-navigation { @include opacity(1); visibility: visible; }
        }
        &:last-child {
          a { padding-right: 0; }
        }
        &.active {
          a { @include opacity(1);
            &:after { @include opacity(1); }
          }
          .child-navigation {
            a { color: $color-grey-medium;
              &:after { display: none; }
            }
            li {
              &:first-child {
                a {
                  &:after { display: block; }
                }
              }
            }
          }
          .child-navigation {
            &.position-bottom {
              li {
                &:last-child {
                  a {
                    &:after { display: block; }
                  }
                }
              }
            }
          }
        }
        &.has-child { position: relative;
          &:after { @include font-awesome; content: "\f0d7"; color: $color-default; font-size: 8px; height: 10px; position: absolute; top: 3px; bottom: 0; margin: auto; right: 2px; }
        }
        a { @include opacity(.7); color: $color-grey-dark; line-height: 0;  margin: 0; padding-bottom: 5px; padding-top: 9px; position: relative;
          &:after { @include opacity(0); @include transition(.2s); background-color: $color-default; bottom: -5px; content: ""; left: 16px; height: 1px; position: absolute; width: 10px; }
          &:hover { @include opacity(1); background-color: transparent; }
          &:active, &:focus { background-color: transparent; }
        }
        > .child-navigation { margin-top: 11px;
          &.navigation-to-left { right: 15px; left: inherit;
            > li {
              &:first-child {
                a {
                  &:after { left: inherit; right: 10px; }
                }
              }
            }
            &.position-bottom {
              > li {
                &:last-child {
                  a {
                    &:after { left: inherit; right: 10px; }
                  }
                }
              }
            }
          }
          &.position-bottom { bottom: 25px;
            > li {
              &:first-child {
                a {
                  &:after { border-color: transparent !important; }
                }
              }
              &:last-child {
                &:hover {
                  a {
                    &:after { border-color: $color-default transparent transparent transparent; }
                  }
                }
                > a {
                  &:after { @include opacity(1); background-color: transparent; border-color: $color-grey-light transparent transparent transparent; border-style: solid; border-width: 7.5px 7.5px 0 7.5px; content: ""; height: 0px; position: absolute; left: 10px; bottom: -7px; width: 0px; }
                  &:before { @include opacity(1); background-color: transparent; content: ""; height: 8px; left: 0; width: 100%; position: absolute; bottom: -8px; }
                }
              }
              .child-navigation { bottom: 0; margin-top: inherit; }
            }
          }
          > li { position: relative;
            &:first-child {
              &:hover {
                a {
                  &:hover {
                    &:after { border-color: transparent transparent $color-default transparent; }
                  }
                }
              }
              a {
                &:after { @include opacity(1); background-color: transparent; border-color: transparent transparent $color-grey-light transparent; border-style: solid; border-width: 0 7.5px 7px 7.5px; content: ""; height: 0px; position: absolute; left: 10px; top: -7px; width: 0px; }
                &:before { @include opacity(1); background-color: transparent; content: ""; height: 8px; left: 0; width: 100%; position: absolute; top: -8px; }
              }
            }
          }
        }
        .child-navigation { @include opacity(0); @include transition(.2s); @include shadow; background-color: $color-grey-light; position: absolute; visibility: hidden; list-style: none; padding-left: 0; left: 15px; min-width: 240px; z-index: 100;
          li {
            &:hover {
              .child-navigation { @include opacity(1); @include transition-delay(.2s); visibility: visible; }
            }
            a { border-bottom: 1px solid rgba(0,0,0,.1); display: block; padding: 20px 10px 15px 10px; position: relative;
              &:hover { @include shadow; background-color: $color-default; color: #fff; }
            }
            .child-navigation { @include opacity(0); margin-top: -41px; }
          }
        }
        // Mobile submit button (visible only on mobile devices)
        &.mobile-submit { display: none; }
      }
      li {
        .child-navigation {
          li {
            &.has-child {
              &:after {  @include opacity(1); @include font-awesome; background-color: transparent; color: $color-default; content: "\f105"; height: 14px; position: absolute; top: 0; bottom: 0; margin: auto;  left: inherit; right: 8px; width: 5px; z-index: 2; }
              &:hover {
                &:after { color: #fff; }
              }
            }
          }
        }
      }
    }
  }
  //.add-your-property { position: absolute; bottom: -39px; right: 0;
  //  figure { @include opacity(.6); display: inline-block; vertical-align: middle; margin-right: 10px; }
  //  .btn { width: 38px; }
  //}
  .add-your-property { position: absolute; right: 0; bottom: -39px; //top: 27px;
    &:hover {
      .text { @include opacity(.9); right: 50px; pointer-events: none; }
    }
    .btn { width: 38px; //background-color: #fff; color: $color-default-darker; position: absolute; right: 0px; top: 60px; width: 38px;
      //&:hover { background-color: #fff; color: $color-default; }
    }
    .text { @include opacity(0); @include shadow; @include transition(.4s); color: $color-grey-medium; background-color: #fff; padding: 10px; position: absolute; right: 40px; text-align: right; top: 0; pointer-events: none;
      &:after { width: 0; height: 0; content: ""; border-style: solid; border-width: 4px 0 4px 4px; border-color: transparent transparent transparent #fff; position: absolute; top: 0; right: -4px; bottom: 0; margin: auto; }
    }
  }
  .secondary-navigation { @include opacity(.6); @include transition(.4s); border-bottom: 1px solid $color-grey-light; display: table; font-size: 12px; padding: 5px 0; width: 100%;
    a { color: $color-grey-medium; margin-left: 10px;
      &:hover { color: $color-default-darker; }
      &.promoted { color: $color-default;
        &:hover { color: $color-default-darker; }
      }
    }
    .contact { float: left;
      figure { margin-right: 10px;
        strong { margin-right: 5px; }
      }
    }
    .user-area { float: right;
      .actions { float: left; }
      .language-bar { float: right; }
    }
    figure { display: inline-block; }
  }
}

.navigation-fixed-bottom {
  .navigation { bottom: 0; position: absolute; top: inherit; }
}

.navigation-fixed-top {
  .navigation { top: 0; position: fixed; bottom: inherit; }
}

.navigation-fix-to-top { position: fixed !important; bottom: inherit !important; top: 0 !important; }