*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

/*body{
    display:grid;
    align-items:center;
}*/

.tree{
    width:100%;
    height:auto;
    text-align:center;
    padding-top:5px;
}

.tree ul{
    padding-top:60px;
    position:relative;
    transition:.5s;
}

.tree li {
    display:inline-table;
    text-align:center;
    list-style-type:none;
    position: relative;
    padding:60px 2px 10px 2px;
    transition: .5s;
    }

    .tree li a.assistan1{
        display: inline-table;
        text-align: center;
        list-style-type: none;
        position:absolute ;
        padding: 10px 2px 10px 2px;
        margin-top:40px;
        width:150px;
        height:50px;
        margin-right:150px;
        /*background-color:#808080;*/
        transition: .5s;
    }

        .tree li a.assistan1:after {
            content: '';
            border-bottom: 1px solid #808080;
            width: 100px;
            height: 35px;
            position: absolute;
            top: 20px;
            right:-100px;
        }

        .tree li a.assistan2 {
            display: inline-table;
            text-align: center;
            list-style-type: none;
            position: absolute;
            padding: 10px 2px 10px 2px;
            margin-top: 45px;
            width: 150px;
            height: 50px;
            margin-right: -197px;
            /*background-color: #e4dfdf;*/
            transition: .5s;
        }
    .tree li a.assistan2:before {
        content: '';
        border-bottom: 1px solid #808080;
        width: 100px;
        height: 35px;
        position: absolute;
        top: 20px;
        left: -100px;
    }

    .tree li:before, .tree li:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        border-top:2px solid #808080;
        width:53%;
        height:25px;
    }
    .tree li:after {
        /*خط عمودی*/
        /*از طبقات بالا به پایین*/
        right: auto;
        left: 53%;
        border-left: 2px solid #808080;
    }

    .tree li:first-child:after, .tree li:last-child:after {
        border-left: none;
    }


    .tree li:only-child:before, .tree li:only-child:after {
        display: none;
    }

    .tree li:only-child{
        padding-top:0;
    }

    .tree li:first-child:before, .tree li:last-child:only-child:after {
        border-top: 2px solid #808080;
        border-right: 2px solid #808080;
        border-radius: 0px 5px 0px 0px;
    }

    .tree li:last-child:after {
        /*گوشه چپ*/
        /*border-top: 1px solid #0812c7;
        border-left: 1px solid #0812c7;*/
        border-top: 2px solid #808080;
        border-left: 2px solid #808080;
        border-radius: 5px 0px 0px 0px;
        width:50%;
    }

    .tree li:last-child:before{
        border-right:2px solid #ff0000;
        border-radius:0px 5px 0px 0px;
        border:0 none;
    }
    .tree li:first-child:after {
        /*border-radius: 0px 5px 0px 0px;
        border-left: 1px solid #cb880f;*/
        border-top:0;
        border-right:none;
    }

    .tree ul ul:before {
        /*خط عمودی*/
        /*از طبقات بالا به پایین*/
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-right: 2px solid #808080;
        width: 0;
        height: 60px;
    }

    .tree a {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-top: 15px solid #0b42ae;
        padding: 8px;
        border-radius: 5px;
        display: inline-grid;
        text-decoration-line: none;
        transition: .5s;
        width: 140px;
        background: linear-gradient(to bottom,#e8e7e7,rgba(0, 0, 0, 0.2));
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        min-height: 130px !important;
    }

        .tree a.king {
            border: 1px solid rgba(0, 0, 0, 0.19);
            border-top: 15px solid #b91616;
            padding: 8px;
            border-radius: 5px;
            display: inline-grid;
            text-decoration-line: none;
            transition: .5s;
            width: 150px;
            background: linear-gradient(to bottom,#e8e7e7,rgba(0, 0, 0, 0.2));
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        }

    .tree img{
        width:80px;
        height:80px;
        border-radius:50%;
        margin-top:-60px !important;
        margin:auto;
    }

    .tree a span {
        /*border: 1px solid #000;
        border-radius: 5px;*/
        color: #000;
        margin-top: 5px;
        padding:8px;
        font-size: 0.8em;
        /*font-weight:600;*/
        /*transform:rotate(-90deg);*/
    }

    .tree li a:hover, .tree li a:hover img,  .tree li a:hover + ul li a {
        background: linear-gradient(to top,#f2f8fc,#c8d8f8);
        /*background: #c8e4f8;*/
        color: #fff;
        /*border: 2px solid #5f5f5f;*/
        box-shadow: 0px 0px 8px -5px #5f5f5f;
    }

        .tree li a:hover + ul li:after, .tree li a:hover + ul li:before, .tree li a:hover + ul:before, .tree li a:hover + ul ul:before {
            border-color: #000;
        }


#info_view.p_email {

    padding-top: 60px;
}

#info_view.titr-modal {
    color: #303f9f;
    font-family: 'bmi_bold';
    font-size: 1.8rem;
    line-height: 52px;
}

#info_view:before {
    content: "";
    background-color: #fff;
    width: 60%;
    height: 100%;
    border-radius: 50% 0 0 50%;
    position: absolute;
    top: 0;
    right: 0;
}

.modal_person_style {
    margin-top: 100px;
    margin-right: 30px;
    border-radius: 50%;
    margin-bottom: 50px;
}

#info_view .titr-modal {
    color: #303f9f;
    font-family: 'bmi_bold';
    font-size: 1.8rem;
    line-height: 52px;
}
.p_100 {
    padding-top: 100px;
}

#info_view .p_email {
    padding-top: 60px;
}

.titr-h3 {
    color: #303f9f;
    font-family: 'bmi-medium';
    font-size: 1.7rem;
    line-height: 40px;
}

@media screen and (max-width:576px) {

    #info_view {
        padding: 0 0 25px 0;
    }

    #info_view p{
        text-align: center !important;
    }

    #info_view.p_email {
            padding-top: 0;
    }

    #info_view:before {
            width: 100%;
            height: 60%;
            border-radius: 0 0 40% 40%;
    }

}