<header>
  <div class="markets">1</div>
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">LOGO</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class=""><a href="#">Join now</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Insights & ideas</a></li>
          <li><a href="#">SMSF</a></li>
          <li><a href="#">IPOs</a></li>
          <li><a href="#">Help</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-search"></i></a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div class="alerts">

    <div class="alert alert-info animated bounceInRight">
      <div class="icon pull-left">
        <i class="fa fa-info fa-2x"></i>
      </div>
      <div class="copy">
        <h4>Information</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <a class="close">
        5
      </a>
    </div>
    <div class="alert alert-success animated bounceInRight">
      <div class="icon pull-left">
        <i class="fa fa-check fa-2x"></i>
      </div>
      <div class="copy">
        <h4>Success</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <a class="close">
        5
      </a>
    </div>
    <div class="alert alert-warning animated bounceInRight">
      <div class="icon pull-left">
        <i class="fa fa-exclamation-circle fa-2x"></i>
      </div>
      <div class="copy">
        <h4>Warning</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <a class="close">
        <i class="fa fa-times"></i>
      </a>
    </div>
    <div class="alert alert-danger animated bounceInRight">
      <div class="icon pull-left">
        <i class="fa fa-exclamation-triangle fa-2x"></i>
      </div>
      <div class="copy">
        <h4>Something bad just happened!</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <a class="close">
        <i class="fa fa-times"></i>
      </a>
    </div>

  </div>
  
</header>
<section class="hero"></section>

@grey:   #A3ADB2;
@green:  #A4B123;
@orange: #E7B600;
@red:    #C20000;

.alerts {
  position: absolute;
  top: 120px;
  right: 30px;
  width: 400px;
  min-height: 300px;
  // background-color: rgba(0,0,0,.1);
  .alert {
    position: relative;
    border: none !important;
    margin-bottom: 8px;
    text-shadow: 0 -1px 1px rgba(0,0,0,.2);
    .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin-left: -15px;
      width: 80px;
      text-align: center;
    }
    .copy {
      margin-left: 60px;
      padding-left: 20px;
      border-left: 1px solid rgba(255,255,255,.3);
      line-height: 1.2;
      h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
      }
      p {
        font-size: 14px;
        margin-bottom: 0;
      }
    }
    .close {
      opacity: 1;
      background-color: #eee;
      width: 30px;
      height: 30px;
      line-height: 26px;
      text-align: center;
      border-radius: 50%;
      border: 2px solid #333;
      position: absolute;
      top: 50%;
      right: -15px;
      transform: translateY(-50%);
    }
    &.alert-info {
      background-color: @grey;
      color: #eee;
      box-shadow: 0 0 20px 5px fade(@grey, 50%);
      .close {
        color: @grey;
        border-color: @grey;
      }
    }
    &.alert-success {
      background-color: @green;
      color: #eee;
      box-shadow: 0 0 20px 5px fade(@green, 50%);
      .close {
        color: @green;
        border-color: @green;
      }
    }
    &.alert-warning {
      background-color: @orange;
      color: #eee;
      box-shadow: 0 0 20px 5px fade(@orange, 40%);
      .close {
        color: @orange;
        border-color: @orange;
      }
    }
    &.alert-danger {
      background-color: @red;
      color: #eee;
      box-shadow: 0 0 20px 5px fade(@red, 30%);
      .close {
        color: @red;
        border-color: @red;
      }
    }
  }
}

.hero {
  min-height: 500px;
  background-color: #555;
}
header {
  position: relative;
  .markets {
    background-color: black;
    height: 30px;
  }
  .navbar {
    border-radius: none;
    margin-bottom: 0;
    .navbar-brand {
      padding-top: 25px;
      padding-bottom: 25px;
    }
    .navbar-nav {
      > li {
        > a {
          padding-top: 25px;
          padding-bottom: 25px;
        }
      }
    }
  }
}

$('.close').on('click',function(){
  var alertBox = $(this).parent();
  alertBox.removeClass('bounceInRight');
  alertBox.addClass('bounceOutRight');
  alertBox.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    alertBox.hide();
  });
});