@media screen and (max-width: 991px){
  .sidebar-collapse{
    @include navbar-collapse();

    &.menu-on-left{
      .navbar-collapse{
        right: auto;
        left: 0;
        @include transform-translate-x(-300px);
      }
    }

    .nav-open &{
      .navbar-collapse{
        @include transform-translate-x(0px);
      }

      .wrapper{
        @include transform-translate-x(-150px);
      }

      .navbar-translate{
        @include transform-translate-x(-300px);
      }

      &.menu-on-left{
        .navbar-collapse{
          @include transform-translate-x(0px);
        }

        .navbar-translate{
          @include transform-translate-x(300px);
        }

        .wrapper{
          @include transform-translate-x(150px);
        }

        #bodyClick{
          right: auto;
          left: 300px;
        }
      }
    }
  }

  .bootstrap-collapse{
    .navbar .navbar-collapse{
      background: none !important;
    }
    @include navbar-responsive();
  }

  .profile-photo .profile-photo-small{
    margin-left: -2px;
  }

  .button-dropdown{
    display: none;
  }

  .navbar-nav{
    .nav-link{
      i.fa,
      i.now-ui-icons{
        opacity: .5;
      }
    }
  }

  .navbar .navbar-nav.navbar-logo{
    display: none;
  }
}

@media screen and (min-width: 992px){
  .burger-menu{
    @include navbar-collapse();

    .nav-open & .navbar-collapse{
      @include transform-translate-x(0px);
    }

    .navbar-collapse {
      display: block !important;

      .navbar-nav {
        margin-top: 53px;
        height: 100%;
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: column;

        .nav-item{
          margin: 0;
        }
      }
    }

    &.menu-on-left .navbar-collapse{
      right: auto;
      left: 0;
      @include transform-translate-x(-300px);
    }

    [class*="navbar-expand-"]{
      .navbar-nav .dropdown-menu{
        position: static;
        float: none;
      }

      .navbar-toggler{
        display: inline-block;
      }
    }

    .section-navbars .navbar-collapse{
      display: none !important;
    }

    .nav-open &{
      &.menu-on-left .navbar .navbar-translate{
        @include transform-translate-x(300px);
      }

      .navbar .navbar-translate{
        @include transform-translate-x(-300px);
      }

      &.menu-on-left .navbar-collapse{
        @include transform-translate-x(0px);
      }

      &.menu-on-left #bodyClick{
        right: auto;
        left: 300px;
      }
    }

    &.menu-on-left .navbar-brand{
      float: right;
      margin-right: 0;
      margin-left: 1rem;
    }
  }

  .navbar-nav{
    .nav-link{
      &.profile-photo{
        padding: 0;
        margin: 7px $padding-base-horizontal;
      }

      &.btn:not(.btn-sm){
        margin: 0;
      }
    }

    .nav-item:not(:last-child){
      margin-right: 5px;
    }

  }
}

@media screen and (min-width: 768px){
  .image-container{
    &.image-right{
      top: 80px;
      margin-left: - 100px;
      margin-bottom: 130px;
    }

    &.image-left{
      margin-right: -100px;
    }
  }
}

@media screen and (max-width: 768px){
  .image-container{
    &.image-left{
      margin-bottom: 220px;

      p.blockquote{
        margin: 0 auto;
        position: relative;
        right: 0;
      }
    }
  }

  .nav-tabs{
    display: inline-block;
    width: 100%;
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;

    .nav-item > .nav-link{
      margin-bottom: 5px;
    }
  }
}

@media screen and (max-width: 576px){
  .navbar[class*='navbar-expand-'] .container{
    margin-left: 0;
    margin-right: 0;
  }

}

@media screen and (max-width: 517px) {
  .alert .alert-icon{
    margin-top: 10px;
  }
}

// Ipad responsive portrait mode
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and ( orientation : portrait){
}

@media screen and (max-width: 580px) {
  .alert{
    button.close{
      position: absolute;
      right: 11px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}