<nav class="navbar navbar-default navbar-fixed-top wide ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#myPage"><img src="https://dl.dropboxusercontent.com/s/jt5zasccso76ydy/audiphile-logo.png?dl=0" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <a href="#"><img src="https://dl.dropboxusercontent.com/s/whocnuoxnby7dql/audiphile-banner.jpg?dl=0" /></a>
      <div class="carousel-caption">
        <h3>Automate your <br> Home Theatre System</h3>
        <button type="button" class="btn btn-warning">Click if you're an audiphile</button>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="https://dl.dropboxusercontent.com/s/whocnuoxnby7dql/audiphile-banner.jpg?dl=0" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="https://dl.dropboxusercontent.com/s/whocnuoxnby7dql/audiphile-banner.jpg?dl=0" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12 text-center">
      <h1>Our Services</h1></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-4 text-center">
      <div class="service-box">
        <i class="glyphicon glyphicon-cog"></i>
        <p>Home Theatre Automation Services</p>
        <button type="button" class="btn btn-primary">Inquire this</button>
      </div>
    </div>

    <div class="col-md-4 text-center">
      <div class="service-box">
        <i class="glyphicon glyphicon-music"></i>
        <p>High Definition Music System</p>
        <button type="button" class="btn btn-primary">Inquire this</button>
      </div>
    </div>
    
<div class="col-md-4 text-center">
      <div class="service-box">
        <i class="glyphicon glyphicon-wrench"></i>
        <p>Installation & Fixing</p>
        <button type="button" class="btn btn-primary">Inquire this</button>
      </div>
    </div>    
  </div>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="bg"></div>
<div class="jumbotron">
  <h1>Bootstrap Jumbotron</h1>
  <p class="lead">+ Parallax Effect using jQuery</p>
</div>
  </div>
</div>
<!-- /.container -->

* {font-family:'helvetica'}
.navbar {background-color:transparent; border-bottom:none; transition: all 1s ease 0s; height:100px; }
.carousel-inner img {width:100%}
#myNavbar {padding-top:20px}

/*slider*/
.carousel-caption {top:30%; text-align:left; left:12%}
.carousel-caption h3 {font-size:38px; }
.btn-warning {background-color:#de554b; border:none}
.btn-warning:hover {background-color:#b52015;}

/*services*/
.service-box i {font-size:55px; color:#DB554A}
.service-box p {font-size:20px}
.btn-primary {background-color:#080A13; border:none}
.service-box .btn-primary:hover {background-color:#101935; border:none}

/*featured banner*/
.bg {
  background: url('/assets/example/bg_blueplane.jpg') no-repeat center center;
  position: fixed;
  width: 100%;
  height: 350px; /*same height as jumbotron */
  top:0;
  left:0;
  z-index: -1;
}

.jumbotron {
  height: 350px;
  color: white;
  text-shadow: #444 0 1px 1px;
  background:transparent;
}

window.addEventListener("scroll", function() {
    if (window.scrollY > 1000) {
        $('.navbar').css('background-color','#060913');
    }
    else {
        $('.navbar').css('background-color','transparent')
    }
},false);