<div class="container">
  <div class="rule">
    <div class="textmain">TEXT</div>
    <div class="sdmain">STAGE DIRECTION</div>
    <div class="vo">VOICEOVER</div>
    <div class="sound">SOUND DESIGN</div>
    <div class="example">EXAMPLE</div>
  </div>
  
<div class="maincontainer">
  <h3>SHOT — 1</h3>
  <div class="sd">Thunderbolt logo revealing in darkness...</div>
  <div class="vo">Incorporating thunder is a very hard task
  </div>
  <div class="text">Thunderbolt - A Beverly Hills Creative Digital Technology Company</div>
  <div class="sd">Logo goes into the darkness... </div>
  <h3>SHOT — 2</h3>
  <div class="sound">Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</div>
  <h3>SHOT — 3</h3>
  <div class="text">Introducing the Thunderbolt Engine</div>
  <div class="sd">Pistons and Gears start to appear in the background in darkness... There are some sparks coming out - to give the feeling of it is just starting...
  </div>
  
  <div class="vo">A Digital Platform connecting the most creative entrepreneurs
with the most Active Private Investors
</div>
  <h3>SHOT — 4</h3>
  
  <div class="sd">Showing other angles of the pistons & gears, lets add some flames coming out on this and the camera starts shaking ( things are getting faster ... )</div>
  <div class="text">Influencers
</div>
  <h3>SHOT — 5</h3>
  <div class="sd">Showing other angles of the pistons & gears, we can add some smoke effect on this part. ( things are getting faster now... )
</div>
  <div class="text">Mentors
</div>
  <div class="sound">Sound goes off  - everything goes off slient and e sound effect of a ringing in the ears would be cool here...</div>
  <div class="sd">Lets make this our peek point in the animation
</div>
  <h3>SHOT — 6</h3>
  <div class="text">In A Digital Private Crowd Investment Platform
</div>
  <div class="sd">Things slow down it is all dark again</div>
  <h3>SHOT — 7</h3>
  <div class="example">Showing some computer chips in the bg, coming together slowly... ( this should similar to surveillance video ) 1:12
</div>
  <div class="vo">The Thunderbolt engine connects </div>
  <div class="text">TEXT: INVESTORS (left - investor color - please get their colors from Kala )
</div>
  <h3>SHOT — 8</h3>
  <div class="vo">Directly to Startups.
</div>
  <div class="text">TEXT: STARTUPS (right - startup color - please get their colors from Kala )
</div>
  <h3>SHOT — 9</h3>
  <div class="text">TEXT: PRIVATE, MENTORSHIP, FEEDBACK (center, stacked, glowing)
</div>
  <div class="vo">The Thunderbolt Engine allows your private startup to remain private</div>
  <div class="sd">PRIVATE glows 
</div>
  <div class="vo">Allows experienced business owners, influencers and experts to mentor up and get involved with young startups
</div>
  <div class="sd">MENTORSHIP glows</div>
  <div class="vo">And give instantaneous feedback towards new ideas.
</div>
  <div class="sd">FEEDBACK glows</div>
  <h3>SHOT — 10</h3>
  <div class="vo">The engine allows startups raise seed level investments in a matter of days.
</div>
  <div class="text">TEXT: FASTER FUNDRAISING
</div>
  <h3>SHOT — 11</h3>
  <div class="vo">The engine allows investors to invest into digital startups without having any technical knowledge.
</div>
  <div class="text">TEXT: REVOLUTIONZING ENTREPRENEURSHIP AS WE KNOW IT
</div>
  <div class="text">TEXT: INTELLIGENT  INVESTING</div>
  <h3>SHOT — 12</h3>
  <div class="vo">Thunderbolt Engine, Power your Business
</div>
</div>
   <div class="countercontainer">
    <div class="wordcount"><div class="wcheader">WORD COUNT</div>93</div>
      <div class="lettercount"><div class="lcheader">LETTER COUNT</div>633</div>
    </div>
  
  <div class="durationcontainer">
    <div class="duration"><div class="durationheader">DURATION</div>50"</div>
  </div>
</div>  

$lightblue: #00FFFF;
$blue: blue;
$white: #FFFFFF;
$whitegray: #f1f1f1;
$red: red;
$green: springgreen;
$yellow: yellow + (150);


@import "susy";

$susy: (
  columns: 12,
  gutter: 1/4,
  math: fluid,
  output: float,
  debug: (
  image: hide,
    color: rgba(red, .25),
    output: background,
  ),
  );


@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
* {
  padding: 0;
  margin: 0;
  font-family: "ROBOTO";
}

.container {
  @include container;
  
}
.maincontainer {
  @include span(last 9);
  }

.vo {
  padding:10px;
  background-color: $lightblue ;
}

.text {
  padding: 10px 10px;
  background-color: $whitegray;
  cursor: pointer;
}

.texthide {
  display: none;
  
  
}

.textmain {
  padding: 10px 10px;
  background-color: $whitegray;
  cursor: pointer;
}

.textmain:after {
  content:"OFF";
  background-color: white;
  float: right;
  background-color: $whitegray;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  border: 1px solid white;
  transition: all .5s ease;
}

.textmain.changed:after {
  content:"ON";
  background-color: white;
  font-size: 12px;
  border: 1px solid white;
  float: right;
  background-color: white;
  cursor: pointer;
  padding: 2px 4px;
  transition: all .5s ease;
}


.sdmain {
  background-color: $blue;
  color: $white;
  padding: 10px 10px;
  cursor: pointer;
}

.sdmain:after {
    content:"OFF";
    font-size: 12px;
    float: right;
    border: 1px solid white;
    padding: 2px 4px;
    box-sizing: border-box;
}

.sdmain.changed:after {
    content:"ON";
    font-size: 12px;
    float: right;
    border: 1px solid white;
    padding: 2px 4px;
    box-sizing: border-box;
}

.sd {
  background-color: $blue;
  color: $white;
  padding: 10px 10px;
}

.sdhide {
  display: none;
}

.rule {
  @include span(3);
  
  margin-bottom: gutter();
}

.countercontainer {
 @include layout(12 1/4 float fluid);
  @include span(3);
  margin-bottom: gutter();
  
  
  .wordcount{
    
    background-color: $lightblue;
    box-sizing: border-box;
    border: 10px solid $lightblue;
    @include layout(2 0 fluid float);
    @include span(1);
    .wcheader{
      padding: 3px 0px;
      margin-bottom: 3px;
      font-size: 10px;
      border-bottom: 1px solid black;
    }
  }
  .lettercount {
    background-color: $lightblue;
    box-sizing: border-box;
    border: 10px solid $lightblue;
   @include span(last 1);
    .lcheader{
      padding: 3px 0px;
      margin-bottom: 3px;
      font-size: 10px;
      border-bottom: 1px solid black;
    }
   
  }
}

.durationcontainer {
  @include layout(12 1/4 fluid float);
  @include span(3);
  background-color: $lightblue;
  color: black;
  .duration{
    box-sizing: border-size;
    border: 10px solid $lightblue;
    
    .durationheader{
      padding: 3px 0px;
      margin-bottom: 3px;
      font-size: 10px;
      border-bottom: 1px solid black;
    }
  }
  
}

h3 {
  font-weight: 500;
  padding: 3px 0px;
  text-align: left;
  margin: 10px 0px;
  color: black;
  font-size: 10px;
  width: 70px;
  text-align: center;
  border: 1px solid black;
  
}

.sound {
  background-color: $green;
  color: black;
  padding: 10px;
  
}

.example {
  padding: 10px;
  background-color: $yellow;
}

$(document).ready(function(){
  $(".sdmain").click(function(){
    $(".sd").slideToggle("slow").toggleClass(".sdhide");
    $(this).toggleClass("changed");
  });
 $(".textmain").click(function(){
   $(".text").slideToggle("fast").toggleClass(".texthide");
   $(this).toggleClass("changed");
 });
});