.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    box-shadow: 0 4px 0 0 rgba(204, 204, 204, .7);
    -webkit-box-shadow: 0 4px 0 0 rgba(204, 204, 204, .7);
    border: 1px solid #ccc;
    margin-bottom: 30px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 4px;
    overflow: hidden;
}

main a:hover {
    text-decoration: none
}

main a:focus {
    text-decoration: none
}

main#content {
    padding: 0
}

.org-chart {
    display: block;
    clear: both;
    margin-bottom: 30px;
    position: relative
}

.org-chart.cf {
    *zoom: 1
}

.org-chart.cf:before {
    content: " ";
    display: table
}

.org-chart.cf:after {
    content: " ";
    display: table;
    clear: both
}

.org-chart .org-legend {
    margin-left: 0px !important;
    margin-top: 15px;
    padding: 0 7px
}

.org-chart .org-legend .datetime {
    width: 60%;
    float: left
}

.org-chart .org-legend .datetime p {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 160% !important
}

.org-chart .org-legend .org-toggle {
    width: 40%;
    margin-bottom: 0;
    float: right;
    text-align: right
}

.org-chart .org-legend .org-toggle a {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 160% !important;
    color: #00529e
}

.org-chart ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.org-chart ul.departments {
    padding: 0 0 0 20px;
}

.org-chart ul li {
    position: relative
}

.org-chart ul li .section-container {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    -webkit-transition: all linear .1s;
    -moz-transition: all linear .1s;
    -o-transition: all linear .1s;
    transition: all linear .1s;
    background: #fff;
    padding: 4px
}

.org-chart h2 {
    font-family: "Alegreya Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 21px;
    color: #4f4f4f !important;
    left: 20px;
    text-align: left
}

.org-chart .lvl-b {
    margin-left: -23px;
    margin-right: 65px;
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    border-radius: 5px;
    border: none;
    background: #f3f3f3 !important
}

.org-chart .board {
    width: 70%;
    margin: 0 auto;
    display: block;
    position: relative
}

.org-chart .board:before {
    content: "";
    display: block;
    position: absolute;
    height: 600px;
    width: 0;
    border-left: 5px solid #ccc;
    margin-left: 49%;
    top: 15px
}

.org-chart ul.columnOne {
    height: 90px;
    position: relative;
    width: 100%;
    display: block;
    clear: both
}

.org-chart .departments {
    width: 100%;
    display: block;
    clear: both
}

.org-chart li.department {
    padding: 0;
    list-style-type: none
}

.org-chart .departments:before {
    content: "";
    display: block;
    width: 85%;
    height: 22px;
    border-top: 5px solid #ccc;
    border-left: 5px solid #ccc;
    border-right: 5px solid #ccc;
    margin: 0 auto;
    top: 0
}

.org-chart .department {
    border-left: 5px solid #ccc;
    width: 13.2%;
    float: left;
    margin: 0 4px
}

.org-chart .department .department-content {
    margin: 30px 30px 35px 30px
}

.org-chart .department .lvl-secondary .department-content {
    margin: 30px
}

.org-chart .department:after {
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 22px;
    border-left: 5px solid #ccc;
    left: 50%;
    top: -22px
}

.org-chart .department:first-child:after, .org-chart .department:last-child:after {
    display: none
}

.org-chart .department.central:after {
    display: none
}

.org-chart .department li {
    padding-left: 25px;
    border-bottom: 5px solid #ccc;
    margin-bottom: 90px;
    height: 82px;
    transition: margin .2s ease-out
}

.org-chart .department li:first-child {
    height: 65px
}

.org-chart .department li:first-child.short-c > .card.text-only {
    top: 18px
}

.org-chart .department li .section-container {
    background: #fff;
    top: 35px;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: auto;
    vertical-align: middle;
    right: 0;
    line-height: 14px;
    border: 3px solid gray
}

.org-chart .department li.short-c > .card.text-only {
    left: 95%;
    top: 35px
}

.org-chart .short-c .section-container {
    left: 40%;
    padding: 10px 25px;
    background: #fff;
    text-align: left;
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    border-radius: 5px;
    border: none !important
}

.org-chart .department .sections {
    margin-top: 0;
    padding-left: 0 !important;
    transition: max-height .2s ease-out
}

.org-chart .department .sections .sub-department {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out
}

.org-chart li.long-section {
    height: 77px;
    width: 10%;
    margin-bottom: 190px
}

.org-chart li.long-section.two-head {
    margin-bottom: 315px
}

.org-chart li.long-section .section-container {
    left: 95%;
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 #ababab, inset 1px 0 0 #ababab, inset -1px 1px 0 #ababab;
    border-radius: 5px;
    border: none;
    background: #f3f3f3
}

.org-chart .card {
    width: 330px;
    height: 125px !important;
    margin: 20px auto !important
}

.org-chart .card p {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 140% !important;
    font-style: normal
}

.description p {
    margin-top: 35px;
    margin-bottom: 35px
}

.org-content {
    font-family: Verdana;
    font-size: 14px;
    position: relative
}

.org-content * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@media all and (max-width: 768px) {
    .org-chart .board {
        margin: 0;
        width: 100%
    }

    .org-chart .departments:before {
        border: none
    }

    .org-chart .department {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 40px
    }

    .org-chart .department .department-content {
        margin: 30px
    }

    .org-chart .lvl-b {
        margin-left: -20px;
        margin-right: 13vw
    }

    .org-chart .department:before {
        content: "";
        display: block;
        position: absolute;
        width: 15px;
        height: 60px;
        border-left: 5px solid #ccc;
        z-index: 1;
        top: -45px;
        left: 0%;
        margin-left: -2px
    }

    .org-chart .department:after, .org-chart .department:first-child:before {
        display: none
    }
}

.org-responsive-content {
    margin: 0 auto
}

.org-responsive-content .org-chart .board {
    margin: 0;
    width: 100%
}

.org-responsive-content .org-chart .departments:before {
    border: none
}

.org-responsive-content .org-chart .department {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 40px
}

.org-responsive-content .org-chart .department:before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 60px;
    border-left: 5px solid #ccc;
    z-index: 1;
    top: -45px;
    left: 0%;
    margin-left: -2px
}

.org-responsive-content .org-chart .department:after, .org-responsive-content .org-chart .department:first-child:before {
    display: none
}

.org-chart .card {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 160% !important
}

.org-chart .card .card-text {
    font-size: 14px;
    line-height: 160%;
    margin: 1.2rem 0 0 !important;
}

.org-chart .card .card-title {
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    line-height: 180%;
    color: #00529e;
    margin-bottom: 1px;
    font-weight: 500;
}

.org-chart .card .clear-p {
    padding-left: 0
}

.org-chart .card .card-body {
    padding: 5px;
    margin-left: -5px
}

.org-chart .card.text-only {
    height: auto !important
}

.org-chart .card.text-only .card-body {
    padding: 12px;
    margin-left: 0
}

.org-chart .card.text-only .card-body h5 {
    font-family: "Alegreya Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 18px;
    line-height: 22px;
    color: #4f4f4f;
    margin-bottom: 2px
}

.org-chart .card.text-only .card-body p {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 180% !important;
    color: #4f4f4f;
    margin-bottom: 1px
}

.org-chart .card.text-only .card-body p .uppercase {
    text-transform: uppercase
}

.org-chart .card.text-only .card-body small {
    font-family: "Roboto", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 160% !important;
    color: #4f4f4f
}

.org-chart .lvl-b .card {
    margin-top: 25px;
    padding-left: 0
}

.org-chart .short-c {
    width: 18%
}

.org-chart .short-c .section-container {
    left: 30%;
    padding: 10px 14px
}

.org-chart .more {
    width: 100%;
    text-align: right;
    margin-bottom: -17px
}

.org-chart .more a {
    font-weight: 500;
    cursor: pointer
}

@media all and (max-width: 768px) {
    .org-chart .card {
        width: 330px;
        height: 105px !important
    }

    .org-chart .card .card-title {
        margin-bottom: 1px
    }
}

@media (max-width: 768px)and (min-width: 651px) {
    .organizational-chart {
        max-width: 472px;
        margin-left: 20vw
    }
}

@media (max-width: 650px)and (min-width: 591px) {
    .organizational-chart {
        max-width: 472px;
        margin-left: 15vw
    }
}

@media (max-width: 590px)and (min-width: 551px) {
    .organizational-chart {
        max-width: 472px;
        margin-left: 10vw
    }
}

@media (max-width: 550px)and (min-width: 480px) {
    .organizational-chart {
        max-width: 472px;
        margin-left: 5vw
    }

    .org-chart li.long-section {
        width: .2%;
    }
}

@media all and (min-width: 480px) {
    .org-chart .department .lvl-b {
        width: 400px
    }

    .org-chart .department li div.lvl-secondary {
        width: 400px
    }

    .org-chart .org-legend {
        width: 400px
    }
}

@media all and (min-width: 768px) {
    .org-chart .department .lvl-b, .org-chart .department li div.lvl-secondary, .org-chart .org-legend {
        width: 600px
    }
    .org-chart .card {
        width: 100%;
    }
    .org-chart .card.text-only, .org-chart .sub-department .card {
        width: 444px;
    }
    .org-chart .sub-department h2 {
        margin-left: 43px;
    }
    .org-chart .card .row > div[class*=col-xxs-5]:first-child {
        max-width: 120px;
    }
    .org-chart .card .row > div[class*=col-xxs-5]:first-child + div{
        width: calc(100% - 120px);
    }
}
.sub-department .card-wrapper {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}
.sub-department .card-wrapper::before {
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: lightgray;
}
.sub-department .card-wrapper::after {
    width: 50px;
    height: 3px;
    top:50%;
    position: absolute;
    left: 0;
    background-color: lightgray;
    z-index: -1;
}
.sub-department .card-wrapper:last-child::before {
    width: 3px;
    height: 50%;
    background-color: lightgray;
}
.sub-department .card::before {
    content: "";
    width: 30%;
    height: 3px;
    position: absolute;
    background-color: lightgray;
    margin-left: -45px;
    margin-top: 105px;
    z-index: -1;
    overflow: visible;
}
.tier-department {
    display: flex;
    padding-left: 50px;
    flex-direction: column;
    justify-content: stretch;
}
.tier-department:not(:last-child)::before {
    content: "";
    height: 100%;
    width: 3px;
    position: absolute;
    left: 0;
    background-color: lightgray;
}
.org-chart .section-expand, .org-expand {
    background-position: bottom !important;
}
.org-chart .section-expand .section-expand--close {
    display: none;
}
.org-chart .section-expand.expanded .section-expand--open {
    display: none;
}
.org-chart .section-expand.expanded .section-expand--close {
    display: inline;
}
.org-chart .super-direction-level::after {
    content: "" !important;
    height: 88% !important;
    width: 12px !important;
    position: absolute;
    left: -10px;
    top: 65px !important;
    background-color: #F3F3F3;
    border: none;
    z-index: 1;
    display: block;
}
.org-chart .super-direction-level > .department:last-child::after {
    content: "" !important;
    height: 100% !important;
    width: 12px !important;
    position: absolute;
    left: -35px;
    top: 270px !important;
    background-color: #fff;
    border: none;
    z-index: 2;
    display: block;

}
.super-direction-level > .department:not(:nth-child(1)){
    top: 40px;
}
.super-direction-level > .department:nth-child(3) {
    top: 120px
}
@media screen and (min-width: 560px) {
    .tier-department:last-child::after  {
        content: "";
        width: 3px;
        height: 96px;
        left: 0;
        top: -96px;
        position: absolute;
        background-color: #F3F3F3;

    }
}
@media all and (max-width: 766px) {
    .sub-department .card-wrapper {
        padding-left: 20px;
    }
}


@media all and (max-width: 480px) {
    .org-chart .lvl-b {
        margin-right: 8px !important
    }

    .org-chart .org-legend {
        width: 100%
    }

    .org-chart li.long-section {
        width: 100%
    }

    .org-chart li.long-section .section-container {
        left: 9%
    }

    .org-chart .card .card-body {
        padding: 5px 5px 5px 0
    }

    .org-chart .department .department-content {
        margin: 10px
    }

    .org-chart .department .department-content .card {
        width: 100%
    }

    .org-chart .department .lvl-secondary .department-content {
        margin: 10px
    }

    .org-chart .department li.short-c {
        width: 13%
    }

    .org-chart .department li.short-c > .card.text-only {
        left: 95%
    }

    .org-chart .more {
        margin-bottom: 0
    }
}

@media all and (max-width: 380px) {
    .col-xxs-5 {
        width: 41.66666667%
    }

    .col-xxs-7 {
        width: 58.33333333%
    }

    .org-chart .department-content .card {
        width: 100%;
        height: 105px !important
    }

    .org-chart .department li {
        margin-bottom: 100px
    }

    .card.text-only {
        width: 70vw
    }
}

html body ul li {
    background: none !important
}

li::before, dt::before {
    border: none !important
}

.card img {
    width: 100%
}

.org-chart li:before, .org-chart dt:before {
    content: "";
    border-style: none
}

.nav-margin {
    margin-top: 0;
    position: initial;
    padding-top: 0 !important;
    padding-bottom: 0
}

@media (max-width: 767px) {
    .nav-margin .logo-div {
        padding-top: 11px
    }
}

li.sub-section {
    border: none !important;
    min-height: 200px !important
}

li.sub-section .lvl-b.section-container {
    border: none;
    width: 400px;
    left: 0
}