/* STRUKTUR ORGANISASI */

      /* Varaibles - config */
      /* SCSS*/

      .content {
        font-size: 14px;
        position: relative;
        margin: 2em;
      }
      .content * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .org-chart {
        display: block;
        clear: both;
        margin-bottom: 30px;
        position: relative;
        /**
      * For IE 6/7 only
      * Include this rule to trigger hasLayout and contain floats.
      */
        /* Box colors */
        /* 1 column */
        /* 2 column */
        /* 3 column */
        /* DEPARTMENTS COLUMNs */
      }
      .org-chart.cf:before,
      .org-chart.cf:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
      }
      .org-chart.cf:after {
        clear: both;
      }
      .org-chart.cf {
        *zoom: 1;
      }
      .org-chart ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .org-chart ul li {
        position: relative;
      }
      .org-chart ul li .span {
        display: block;
        border: 3px solid #3e4095;
        text-align: center;
        overflow: hidden;
        text-decoration: none;
        color: #ffffff;
        font-size: 12px;
        box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
        -webkit-transition: all linear 0.1s;
        -moz-transition: all linear 0.1s;
        transition: all linear 0.1s;
        background: #92d4a8;
        /* padding: 4px; */
        height: 90px;
      }
      .org-chart .board ul.columnThree li .span {
        background: #3e4095;
      }
      .org-chart .board ul.columnOne li .span,
      .org-chart .board ul.columnTwo li .span,
      .org-chart .board ul.columnTwoChild li .span {
        background: #6469a2;
      }
      .org-chart ul li .span img {
        width: 100%;
      }
      .org-chart .span.lvl-b {
        background: rgb(202, 154, 76);
        color: #ffffff;
        height: 90px;
      }
      .org-chart .span.lvl-b.lvl-2 {
        padding: 1em;
        height: 70px;
        color: #000000;
      }
      .org-chart .board {
        width: 75%;
        margin: 0 auto;
        display: block;
        position: relative;
      }
      .org-chart .board:before {
        content: "";
        display: block;
        position: absolute;
        height: 545px;
        width: 0px;
        border-left: 2px solid #3e4095;
        margin-left: 49%;
        top: 15px;
      }
      .org-chart ul.columnOne {
        height: 90px;
        position: relative;
        width: 100%;
        display: block;
        clear: both;
      }
      .org-chart ul.columnOne li {
        width: 30%;
        margin: 20px auto;
        top: 20px;
      }
      .org-chart ul.columnTwo,
      .org-chart ul.columnTwoChild {
        position: relative;
        width: 100%;
        display: block;
        height: 88px;
        clear: both;
        margin-top: 35px;
      }
      .org-chart ul.columnTwo li:first-child,
      .org-chart ul.columnTwoChild li:first-child {
        width: 30%;
        float: left;
      }
      .org-chart ul.columnTwo li,
      .org-chart ul.columnTwoChild li {
        width: 30%;
        float: right;
      }
      .org-chart ul.columnTwo:before {
        content: "";
        display: block;
        position: relative;
        width: 80%;
        height: 10px;
        border-top: 2px solid #3e4095;
        margin: 0 auto;
        top: 40px;
      }
      .org-chart ul.columnTwoChild li {
        margin-top: -25px;
      }
      .org-chart ul.columnTwoChild li:before {
        content: "";
        display: block;
        position: relative;
        width: 0%;
        height: 20px;
        border-left: 2px solid #3e4095;
        margin: 0 auto;
        top: 0px;
      }
      .org-chart ul.columnThree {
        position: relative;
        width: 100%;
        display: block;
        clear: both;
      }
      .org-chart ul.columnThree li:first-child {
        width: 30%;
        float: left;
        margin-left: 0;
      }
      .org-chart ul.columnThree li {
        width: 30%;
        margin-left: 5%;
        float: left;
      }
      .org-chart ul.columnThree li:last-child {
        width: 30%;
        float: right;
        margin-left: 0;
      }
      .org-chart ul.columnThree:before {
        content: "";
        display: block;
        position: relative;
        width: 80%;
        height: 10px;
        border-top: 2px solid #3e4095;
        margin: 0 auto;
        top: 40px;
      }
      .org-chart .departments {
        width: 100%;
        display: block;
        clear: both;
      }
      .org-chart .departments:before {
        content: "";
        display: block;
        width: 85%;
        height: 22px;
        border-top: 2px solid #3e4095;
        border-left: 2px solid #3e4095;
        border-right: 2px solid #3e4095;
        margin: 12px auto 0px auto;
        top: 0px;
      }
      .org-chart .department {
        border-left: 2px solid #3e4095;
        /* width: 13.2%; */
        width: 16.1%;
        float: left;
        margin: 0px 4px;
      }
      .org-chart .department:after {
        content: "";
        position: absolute;
        display: block;
        width: 10px;
        height: 22px;
        border-left: 2px solid #3e4095;
        left: 50%;
        top: -22px;
      }
      .org-chart .department:first-child:after {
        display: none;
      }
      .org-chart .department:last-child:after {
        display: none;
      }
      .org-chart .department.central:after {
        display: none;
      }
      .org-chart .department .span {
        border-left: 1px solid #3e4095;
      }
      .org-chart .department li {
        padding-left: 25px;
        border-bottom: 2px solid #3e4095;
        height: 80px;
      }
      .org-chart .department li .span {
        background: #ffffff;
        color: #000000;
        top: 38px;
        position: absolute;
        z-index: 1;
        width: 95%;
        height: auto;
        vertical-align: middle;
        right: 0px;
        line-height: 14px;
        border: 3px solid #3e4095;
      }
      .org-chart .department .sections {
        margin-top: -20px;
      }

      /*--------- TO BE REMOVED FROM YOUR CSS --*/
      /* this is just to display the behaviour of responsive on codepen */
      .responsive-content {
        width: 767px;
        margin: 0px auto;
      }
      .responsive-content .org-chart .board {
        margin: 0px;
        width: 100%;
      }
      .responsive-content .org-chart .departments:before {
        border: none;
      }
      .responsive-content .org-chart .department {
        float: none;
        width: 100%;
        margin-left: 0;
        background: #f5eec9;
        margin-bottom: 40px;
      }
      .responsive-content .org-chart .department:before {
        content: "";
        display: block;
        position: absolute;
        width: 15px;
        height: 60px;
        border-left: 2px solid #3e4095;
        z-index: 1;
        top: -45px;
        left: 0%;
        margin-left: -2px;
      }
      .responsive-content .org-chart .department:after {
        display: none;
      }
      .responsive-content .org-chart .department:first-child:before {
        display: none;
      }

      /* FLEX */
      .flex {
        display: flex !important;
      }
      .inline-flex {
        display: inline-flex;
      }
      .flex.alignment__justify--between,
      .inline-flex.alignment__justify--between {
        justify-content: space-between;
      }
      .flex.alignment__items--center,
      .inline-flex.alignment__items--center {
        align-items: center;
      }

      .foto {
        width: 17%;
      }
      .desc {
        width: 83%;
      }

      .department .foto {
        width: 20%;
      }
      .department .desc {
        width: 80%;
        padding: 1em;
      }

      .va-table {
        display: table !important;
      }
      .va-middle {
        display: table-cell;
        vertical-align: middle;
      }

      .height-pp-k {
        height: 75px !important;
      }
      /* MEDIA QUERIES */
      @media all and (max-width: 767px) {
        .org-chart .board {
          margin: 0px;
          width: 100%;
        }
        .org-chart .departments {
          border-left: 2px solid #3e4095;
        }
        .org-chart .board:before {
          top: 30px;
          height: 700px;
          margin-left: 50%;
        }
        .org-chart .departments:before {
          border: none;
        }
        .org-chart .department {
          float: none;
          width: 100%;
          margin-left: 0;
          border-left: none;
          margin-bottom: 60px;
        }
        .org-chart .department:before {
          content: "";
          display: block;
          position: absolute;
          width: 15px;
          height: 60px;
          border-left: 2px solid #3e4095;
          z-index: 1;
          top: -45px;
          left: 0%;
          margin-left: -2px;
        }
        .org-chart .department:after {
          display: none;
        }
        .org-chart .department:first-child:before {
          display: none;
        }
        .org-chart ul.columnTwo li:first-child,
        .org-chart ul.columnTwoChild li:first-child,
        .org-chart ul.columnTwo li,
        .org-chart ul.columnTwoChild li {
          width: 100%;
          float: left;
        }
        .org-chart ul.columnThree li {
          width: 100%;
          margin-left: 0%;
          float: left;
          margin-top: 1em;
        }
        .org-chart ul.columnThree li:last-child,
        .org-chart ul.columnThree li:first-child {
          width: 100%;
          float: left;
          margin-left: 0;
        }
        .org-chart ul.columnOne li {
          width: 100%;
          margin: 20px auto;
          top: 20px;
        }
        .org-chart .span.lvl-b.lvl-2 {
          height: auto;
          width: 100%;
        }
        .org-chart .board ul.columnTwo li .span,
        .org-chart .board ul.columnTwoChild li .span {
          margin-bottom: 2em;
        }
        .mar-b-0-m {
          margin-bottom: 0 !important;
        }
      }
      @media only screen and (min-width: 1199px) {
        .org-chart .span.lvl-b.lvl-2 {
          height: 105px;
        }
        .org-chart .department {
          width: 15.8%;
        }
        .foto img {
          display: none;
        }
        .foto,
        .department .foto {
          width: 25%;
        }
        .desc,
        .department .desc {
          width: 75%;
        }
        .foto-01 {
          background: url("../../foto/01-bambangsubiyanto.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-02 {
          background: url("../../foto/02-thomasdjamaluddin.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-03 {
          background: url("../../foto/03-syamsuddinharis.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-04 {
          background: url("../../foto/04-syahririkra.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-05 {
          background: url("../../foto/05-huseinavicenna.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-06 {
          background: url("../../foto/06-hadisupratikta.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-07 {
          background: url("../../foto/07-ahyar.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-08 {
          background: url("../../foto/08-sofiearie.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-09 {
          background: url("../../foto/09-indahhuruswati.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-10 {
          background: url("../../foto/10-trinafizzanty.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-11 {
          background: url("../../foto/11-budisuhariyanto.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-12 {
          background: url("../../foto/12-tahlimsudaryanto.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-13 {
          background: url("../../foto/13-ririskatharina.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-14 {
          background: url("../../foto/14-ahmadbudi.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-15 {
          background: url("../../foto/15-sariphidayat.jpg") top center;
          height: 100%;
          background-repeat: no-repeat;
        }
        .foto-01,
        .foto-02,
        .foto-03,
        .foto-04,
        .foto-05,
        .foto-06,
        .foto-07,
        .foto-08,
        .foto-09 {
          background-size: 110%;
        }
        .foto-10,
        .foto-11,
        .foto-12,
        .foto-13,
        .foto-14,
        .foto-15 {
          background-size: 120%;
        }
      }
      @media only screen and (min-width: 1400px) {
        .foto-01,
        .foto-02,
        .foto-03,
        .foto-04,
        .foto-05,
        .foto-06,
        .foto-07,
        .foto-08,
        .foto-09 {
          background-size: 75%;
          background-position: left top;
        }
        .foto-10,
        .foto-11,
        .foto-12,
        .foto-13,
        .foto-14,
        .foto-15 {
          background-size: 120%;
        }
      }