﻿
#myBtn123{
    left:30px;
    float:left;
}
#sideNavBox {
    display: none;
}
/* adjust position of content on site page */
#WebPartWPQ1_ChromeTitle {
    display: none;
}

#contentBox {
    margin-left: 20px !important;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
}

#container {
    float: left;
    padding: 1em;
    width: 100%;
    margin-top: -30px;
}

.organizational-chart p {
    margin: 0px;
    color: #666 !important;
}

    .organizational-chart p a:visited, .organizational-chart p a {
        color: #fff;
    }

ol.organizational-chart,
ol.organizational-chart ol,
ol.organizational-chart li,
ol.organizational-chart li > div {
    position: relative;
}

    ol.organizational-chart,
    ol.organizational-chart ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

ol.organizational-chart {
    text-align: center;
    max-width: 1110px;
}

    ol.organizational-chart ol {
        padding-top: 1em;
    }

        ol.organizational-chart ol:before,
        ol.organizational-chart ol:after,
        ol.organizational-chart li:before,
        ol.organizational-chart li:after,
        ol.organizational-chart > li > div:before,
        ol.organizational-chart > li > div:after {
            background-color: #b7a6aa;
            content: '';
            position: absolute;
        }

        ol.organizational-chart ol > li {
            padding: 1em 0 0 1em;
        }

    ol.organizational-chart > li ol:before {
        height: 1em;
        left: 50%;
        top: 0;
        width: 3px;
    }

    ol.organizational-chart > li ol:after {
        height: 3px;
        left: 3px;
        top: 1em;
        width: 50%;
    }

    ol.organizational-chart > li ol > li:not(:last-of-type):before {
        height: 3px;
        left: 0;
        top: 2em;
        width: 1em;
    }

    ol.organizational-chart > li ol > li:not(:last-of-type):after {
        height: 100%;
        left: 0;
        top: 0;
        width: 3px;
    }

    ol.organizational-chart > li ol > li:last-of-type:before {
        height: 3px;
        left: 0;
        top: 2em;
        width: 1em;
    }

    ol.organizational-chart > li ol > li:last-of-type:after {
        height: 2em;
        left: 0;
        top: 0;
        width: 3px;
    }

    ol.organizational-chart li > div {
        background-color: #fff;
        border-radius: 3px;
        min-height: 2em;
        padding: 0.5em;
    }

    /*** PRIMARY ***/
    ol.organizational-chart > li > div {
        margin-right: 1em;
    }

        ol.organizational-chart > li > div:before {
            bottom: 2em;
            height: 3px;
            right: -1em;
            width: 1em;
        }

        ol.organizational-chart > li > div:first-of-type:after {
            bottom: 0;
            height: 2em;
            right: -1em;
            width: 3px;
        }

        ol.organizational-chart > li > div + div {
            margin-top: 1em;
        }

            ol.organizational-chart > li > div + div:after {
                height: calc(100% + 1em);
                right: -1em;
                top: -1em;
                width: 3px;
            }

    /*** SECONDARY ***/
    ol.organizational-chart > li > ol:before {
        left: inherit;
        /* right: 0; */
    }

    ol.organizational-chart > li > ol:after {
        left: 19px;
        width: 100%;
    }

    ol.organizational-chart > li > ol > li > div {
        background-color: #666666!important;
    }

    /*** TERTIARY ***/
    ol.organizational-chart > li > ol > li > ol > li > div {
        /* background-color: #e0e0e0; */
        border: 1px solid #cdcdcd;
        border-radius: 5px;
    }

        ol.organizational-chart > li > ol > li > ol > li > div a {
            color: #000 !important;
        }

    /*** QUATERNARY ***/
    ol.organizational-chart > li > ol > li > ol > li > ol > li > div {
        background-color: #fca858;
    }

    /*** QUINARY ***/
    ol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div {
        background-color: #fddc32;
    }

    .main-head {
        padding-bottom: 20px;
        color: #000 !important;
    }

    .top-desk {
        width: 65%;
        margin: 0 auto;
    }

    .top-desk .desk-row {
        justify-content: space-between;
        margin-bottom: 20px;
        display: flex;
    }

    .top-desk div.prime {
        background-color: #666666;
        border-radius: 3px;
        min-height: 2em;
        padding: 5px 25px;
        width: 185px;
    }

    .top-desk div.non-prime {
        background-color: #transparent;
        border-radius: 3px;
        min-height: 2em;
        padding: 5px 25px;
        width: 200px;
    }
.bgtrans p a {
    color: #666 !important;
}
.bgtrans{
	 background:transparent !important;
}

    .top-desk div.non-prime.prime-revert {
        background-color: #666666;
        color: #fff;
    }
    .top-desk div.non-prime.prime-revert p a {
        color: #fff;
    }

    .top-desk div.desk-left, .top-desk div.desk-right {
        position: relative;
        margin:auto 0;
    }

    .top-desk div.prime:after, .top-desk div.non-prime:after {
        background-color: #b7a6aa;
        content: '';
        position: absolute;
        height: 3px;
        bottom: 50%;
    }

    .top-desk div.prime:after {
        right: 100%;
        width: 86%;
    }

    .top-desk div.non-prime:after {
        left: 100%;
        width: 71%;
    }

    .top-desk div.non-prime.prime-revert::after {
       /* bottom: 68%; */
    }
organizational-chart { 
	 position: relative; 
  z-index: 99; 
     max-width: 1110px;
         
	
 }
 .organizational-chart:before { 
 content: '';
    position: absolute;
    left: 7.2%;
    width: 37%;
    z-index: 99;
    top: 70px;
  }
   .organizational-chart:after { 
  content:'';
   position:absolute;
   left: 6.5%;
   height: 44%;
   z-index: 999;
   /* width: 100%; */
   top: 70px;
  }
  
  .bgdirectors {
    background: #666;
    font-size: 16px;
    color: #fff;
    padding: 0 80px;
    display: inline-block;
    border-radius: 3px;
}
.bgdirectors .boarddirectors {
    padding: 7px;
    display: block;
    color: #fff;
}
.bgdirectors .chairmnboard {
    display: block;
    background: #fff;
    border: 1px solid #000;
    margin: 10px;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 13px;
    color: #000;
}
.borderbottm:before {
   /* height: 48px !important; */
    left: 50% !important;
    width: 3px !important;
    background-color: #b7a6aa;
    content: '';
    position: absolute;
    /*margin-top: 87px; */
}

/*** MEDIA QUERIES ***/

@media only screen and ( min-width: 1500px) {
	.organizational-chart:after { 
  content:'';
   height: 42.2%;
	}
}

@media only screen and ( min-width: 62em ) {

    ol.organizational-chart {
        margin:auto;
    }

        /* PRIMARY */
        ol.organizational-chart > li > div {
            display: inline-block;
            float: none;
            margin: 0 1em 1em 1em;
            vertical-align: bottom;
        }

            ol.organizational-chart > li > div:only-of-type {
                margin-bottom: 0;
                width: calc((100% / 1) - 2em - 4px);
            }

            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
                width: calc((100% / 2) - 2em - 4px);
            }

            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
                width: calc((100% / 3) - 2em - 4px);
            }

            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
                width: calc((100% / 4) - 2em - 4px);
            }

            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
            ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
                width: calc((100% / 5) - 2em - 4px);
            }

            ol.organizational-chart > li > div:before,
            ol.organizational-chart > li > div:after {
                bottom: -1em !important;
                top: inherit !important;
            }

            ol.organizational-chart > li > div:before {
                height: 1em !important;
                right: 50% !important;
                width: 3px !important;
            }

            ol.organizational-chart > li > div:only-of-type:after {
                display: none;
            }

            ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after,
            ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
                bottom: -1em;
                height: 3px;
                width: calc(50% + 1em + 3px);
            }

            ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after {
                left: calc(50% + 3px);
            }

            ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
                left: calc(-1em - 3px);
            }

            ol.organizational-chart > li > div + div:not(:last-of-type):after {
                height: 3px;
                left: -2em;
                width: calc(100% + 4em);
            }

        /* SECONDARY */
        ol.organizational-chart > li > ol {
            display: flex;
            flex-wrap: nowrap;
        }

            ol.organizational-chart > li > ol:before,
            ol.organizational-chart > li > ol > li:before {
                height: 1em !important;
                right: 50% !important;
                top: 0 !important;
                width: 3px !important;
            }

        ol.organizational-chart > li.li-chart-up > div:before {
            height: 425px !important;
        }

        ol.organizational-chart > li.li-chart-down > ol::before {
            height: 0px !important;
        }

        ol.organizational-chart > li > ol:after {
            display: none;
        }

        ol.organizational-chart > li > ol > li {
            flex-grow: 1;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 1em;
        }

            ol.organizational-chart > li > ol > li:only-of-type {
                padding-top: 0;
            }

                ol.organizational-chart > li > ol > li:only-of-type:before,
                ol.organizational-chart > li > ol > li:only-of-type:after {
                    display: none;
                }

            ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after,
            ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
                height: 3px;
                top: 0;
                width: 50%;
            }

            ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after {
                right: 50%;
            }

            ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
                right: 0;
            }

            ol.organizational-chart > li > ol > li + li:not(:last-of-type):after {
                height: 3px;
                left: 0;
                top: 0;
                width: 100%;
            }
}

@media only screen and( max-width: 991px) {
	.organizational-chart:before { 
	content:none;
	}
	 .organizational-chart:after{content:none;}

.Mnone {
	display:none;
}

    ol.organizational-chart ol > li {
        padding: 1em 0 0 2em;
        width: 96%;
    }

    ol.organizational-chart > li ol > li:not(:last-of-type):before {
        height: 3px;
        left: 0;
        top: 2em;
        width: 2em;
    }

    ol.organizational-chart > li ol > li:last-of-type:before {
        height: 3px;
        left: 0;
        top: 2em;
        width: 2em;
    }

    ol.organizational-chart > li > ol:before {
        right: 50%;
        width: 0%
    }

    ol.organizational-chart > li > div:first-of-type:after, ol.organizational-chart > li > div:before {
        width: 0%;
    }

    ol.organizational-chart li.li-chart-down.container > ol {
        padding-top: 0px;
        margin: 0px;
    }

    ol.organizational-chart > li.li-chart-up > ol::before {
        width: 3px;
    }

    ol.organizational-chart > li.li-chart-up > ol::after {
        width: 46%;
        left: 27px;
    }

    ol.organizational-chart > li.li-chart-up ol > li:last-of-type::after {
        height: 5em;
    }

    ol.organizational-chart > li.li-chart-down ol:after {
        left: 27px;
        width: 46%;
    }

    ol.organizational-chart > li.li-chart-down > ol::after {
        width: 0%;
    }
}

@media only screen and ( max-width: 767px) {
.width100 {width:100%;}
.bgdirectors {display: block; padding: 10px 20px; text-align:center;}
.organizational-chart:before { 
	content:none;
	}
	 .organizational-chart:after{content:none;}

.Mnone {
	display:none;
}
    ol.organizational-chart > li.li-chart-up > ol::after {
        width: 50%;
        left: 0px;
    }

    ol.organizational-chart > li.li-chart-down ol:after {
        left: 3px;
        width: 50%;
    }
}

@media only screen and (min-width:75em) {
    .top-desk div.non-prime:after {
        width: 78%;
    }

    .top-desk .desk-row:nth-child(3) div.prime::after { /*width: 91%;*/
    }

    .top-desk div.prime:after {
        width: 95%;
    }
}

.color-inverse {
    background-color: #fff !important;
}
div.move-top {
    float: left !important;
}
