CSS BOOTSTRAP RESPONSIVE 3COL ORG CHART

in progress adapted from https://codepen.io/siiron/pen/aLkdE - still have some clean up to do...

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="orgchart">
  <div class="container-fluid">
    <h1>CSS BOOTSTRAP RESPONSIVE ORG CHART</h1>
<div class="row ">
<div class="level-1 col-xs-12 col-sm-8 col-sm-offset-2">
        <div class="org-cell"> 
          <a href="#" class="org-name">Organization</a>
          <a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a>
          <a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a>
        </div>
         </div>
</div>

        <div class="level-2">
  
          <div class="level-2-org col-xs-6 col-sm-4 col-nopadding">
          <div class="org-cell"> <a href="#" class="org-name">Division B</a><a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a>
              <a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a></div>

            <ul class="level-3 list-unstyled">
              <li class="section">
                <div class="org-cell"><a href="#">Section B1</a><a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a>
                  <a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a></div>
              </li>
              <li class="section">
                <div class="org-cell"><a href="#">Section B2</a><a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a>
                  <a href="#" class="org-contact"><i class="fa fa-envelope-o"></i> Contant One</a></div>
              </li>
              <li...

SCSS

/*  Document Presets */
body { background: #0199DA}
$line-style: 4px solid rgba(255,255,255,.6);
$border-style: 4px solid rgba(255,255,255,.5);
$link-color: #ffffff;
$org-cell-base-color: #00548b;
h1 { 
color: $link-color;
text-align:center;
}

/* Scss Document */

.orgchart {
  
  * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  }

  .level-1 .org-cell {
    background-color: darken( $org-cell-base-color, 10% );
    border: $border-style;
      &:hover {
            background-color: lighten( $org-cell-base-color, 10% );
            height:90px;
            padding-top:10px;
      }
  }
  
  .level-2 .org-cell {
    background-color: $org-cell-base-color;
        border: $border-style;
         &:hover {
            background-color: lighten( $org-cell-base-color, 10% );
            height:90px;
            padding-top:10px;
      }

  }
  
  .level-3 li > .org-cell {
    background-color: lighten( $org-cell-base-color, 10% );
    border: $border-style;
     &:hover {
            background-color: lighten( $org-cell-base-color, 15% );
            height:90px;
            padding-top:10px;
      }

  }
  
  a {
    color: $link-color;
    text-decoration: none;

    &:hover {
      color: $link-color;
      text-decoration: none;
      background-color: rgba(255,255,255,.20);
      padding: 3px;
      width:95%;
      margin:0 auto;
    }
  }
  
  .org-cell {
    display: block;
    text-align: center;
    overflow: hidden;
    margin-bottom: -26px;
    box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
    -webkit-transition: all linear .1s;
    -moz-transition: all linear .1s;
    transition: all linear .1s;
    height: 85px;
    padding-top: 5px;
    border-radius:3px
  }
  
  .org-name {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing:.1em;
    font-weight:800;
  }
  
  .org-contact {
    font-size: 13px;
    font-weight:200;


  }

  a {
    display: block;
   ...