/* ---------------------------------- */

/*
 *
 * Stories.css
 *
 * 
 */
 
 
/* ---------------------------------- */

/*
 *  TABLE OF CONTENTS
 *  
 *  @Home
 *  @Free
 *  @WorldChampionshipJersey
 *  @Soweto
 *  @NYCBasketball
 *  @HomelessWorldCup
 *  @NikeN7
 *  @CardboardBox
 *  @GreenRubber
 *  @Counter
 *
 */

/* ---------------------------------- */



.story article {
  z-index: 999
}
  

/* @Home */



#story-home {
  width: 100%;
  background: url(../../images/home2.jpg) 100% 0 no-repeat fixed;
  margin: -300px 0 0 0;
  height: 618px;
  overflow: hidden;
  z-index: 200;
  
  
}

  #story-home h1 {
    position: absolute;
    left: 0;
    z-index: 1000;
    text-align: center;
    top: 350px;
    display: block;
    color: #fff !important;
    font-size: 80px !important;
    z-index: 100;
    line-height: 60px; 
    width: 100%;
    height: 289px;
    text-transform: none !important;
    text-indent: -9000px;
    overflow: hidden;
    background: url(../img/Home_text.png) 50% 50% no-repeat;
  }






/* ---------------------------------- */

/* @about */

#story-about {
  width: 100%;
  background: url(../../images/about1.jpg) 0 0 no-repeat fixed;
  margin: 0;
  height: 1300px;
  overflow: hidden;
}

  #story-about header {    
    top: 70px;
  }
  
  #story-about section.article-content {    
    padding: 10px 10px;
    width: 600px;
    background: #FFF9F4;
    margin: 0px 0 0 0;
    position: relative;
    top: 200px;
  }

   #story-about .bg { 
      position: absolute;
      width: 1600px;
      height: 1200px;
      top: 0;
      left: 100px;
      background: url(../../images/fg_about.png) 0 0 no-repeat fixed;

   }

/* ---------------------------------- */

/* @Clients */

#story-clients {
  width: 100%;
  background: url(../../images/clients.jpg) 50% 0 no-repeat fixed;
  height: 1200px;
  overflow: hidden;

}


#story-clients header {
  top: 40px;
    background: #FFF9F4;
}

  #story-clients .bg {
    position: absolute;
    width: 100%;
    height: 1600px;
    top: 0;
    left: 0%;
  }
  
 #story-clients section.article-content {    
    padding: 10px 10px;
    width: 600px;
    background: #FFF9F4;
    margin: 0px 0 0 0;
    position: relative;
    top: 120px;
  }


/* ---------------------------------- */


/* ---------------------------------- */

/* @Candidates */

#story-candidates {
  width: 100%;
  background: url(../../images/candidates.jpg) 50% 0 no-repeat fixed;
  height: 1200px;
  overflow: hidden;

}


#story-candidates header {
  top: 300px;
}

  #story-candidates .bg {
    position: absolute;
    width: 100%;
    height: 1600px;
    top: 0;
    left: 0%;
  }

 #story-candidates section.article-content {    
    padding: 10px 10px;
    width: 600px;
    background: #FFF9F4;
    margin: 0px 0 0 0;
    position: relative;
    top: 100px;
    left:350px
  }

/* ---------------------------------- */

/* @Proof-Points */

.proof-points {
  margin: 20px auto;
  position: relative;
 /*width: 900px;*/
  height: 900px;
   background: url(../../images/people.jpg) 50% 0 no-repeat fixed;
 
}
  
  .proof-points-mask {
    position: absolute;
    top: 200px;
   /* left: 50%;
    margin-left: -450px;
    */overflow: hidden;
    height: 350px;
    width: 100%;
    
    z-index: 101;
  }
  
  .proof-points-container {
    position: relative;
    /*width: 900px;*/
    z-index: 101;
  }
  
  .proof-point {
    width: 900px;
    margin: 20px auto;
    padding: 20px 20px;
    background: #FFF9F4;
    display: block;
    height: 580px;
    overflow: hidden;
    z-index: 101;
  }
  
  .proof-points .active {
    visibility: visible !important;
    z-index: 101;
  }

  .proof-points h1 {
    font-family: "Helvetica Neue Light","Helvetica Neue","Helvetica";
    font-size: 40px;
    line-height: 50px;
    color: #811114;
    margin: 10px 0 10px 0;
    text-align: left;
    letter-spacing: -1px
    
  }
  
  .proof-description {
    width: 900px;
    background: #FFF9F4;
    color:#999;
  }
  
    .proof-description p {
      display: block;
      width: 900px;
      margin: 0 0;
      text-align: left;
    }
    
    .proof-description aside {
      float: left;
      width: 80px;
    }
    
  nav.more {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -49px;
    top: 500px;
    z-index: 99999;
    background: url(../img/icon_more.png) 50% 50% no-repeat;
    height: 118px;
    width: 98px;
   
  }
  
    nav.more a {
      display: block;
      height: 118px;
      width: 98px;
      background: url(../img/refresh.gif) 0 0 no-repeat;
      position: absolute;
      left: 0; 
      top: 0;
      -webkit-transition: -webkit-transform .3s ease-in;
      /*-moz-transition: -moz-transform .3s ease-in;*/
    } 
    
    nav.more a._down{
      opacity: .5 !important;
      
    }
  
  nav.more a:hover {
    
  }

/* ---------------------------------- */



/* @contact */

#story-contact {
  width: 100%;
  background: url(../../images/contact2.jpg) 50% 0 no-repeat fixed;
  height: 1200px;
  overflow: hidden;

}


#story-contact header {
  top: 340px;
}

  #story-contact .bg {
    position: absolute;
    width: 100%;
    height: 1600px;
    top: 0;
    left: 0%;
  }

 #story-contact section.article-content {    
    padding: 10px 10px;
    max-width: 250px;
    margin: 0px 0 0 0;
    position: relative;
    background: #FFF9F4;
    
    top: 440px;
    left:150px
    
  }

/* ---------------------------------- */