.elementor-1401 .elementor-element.elementor-element-5970e0c{--display:flex;}.elementor-1401 .elementor-element.elementor-element-5970e0c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1401 .elementor-element.elementor-element-c8b1333{text-align:center;}.elementor-1401 .elementor-element.elementor-element-c8b1333 .elementor-heading-title{font-family:"Roboto Serif", Sans-serif;font-weight:600;color:#000000;}@media(max-width:1024px) and (min-width:768px){.elementor-1401 .elementor-element.elementor-element-5970e0c{--width:753.857px;}}/* Start custom CSS for html, class: .elementor-element-b2a7386 *//* =========================================================
   PSPPI ORGANISASI - FINAL
   ========================================================= */

.psppi-org-final {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 20px 0 30px;
}


/* =========================================================
   BOARD
   ========================================================= */

.psppi-org-board {
    position: relative;
    width: 1200px;
    height: 900px;
    margin: 0 auto;
}


/* =========================================================
   SVG GARIS
   ========================================================= */

.psppi-org-svg {
    position: absolute;
    left: 0;
    top: 0;

    width: 1200px;
    height: 900px;

    z-index: 1;

    pointer-events: none;
}


/* SEMUA GARIS */

.psppi-org-svg line {
    stroke: #603b35;
    stroke-width: 4;
    stroke-linecap: square;
}


/* =========================================================
   PERSON
   ========================================================= */

.psppi-final-person {
    position: absolute;

    width: 220px;

    text-align: center;

    z-index: 5;
}


/* =========================================================
   FOTO
   ========================================================= */

.psppi-final-photo {
    width: 170px;
    height: 170px;

    margin: 0 auto -18px;

    border-radius: 50%;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            #df666b 0%,
            #df666b 54%,
            #ffffff 56%,
            #df666b 60%,
            #ffffff 66%,
            transparent 67%
        );
}


.psppi-final-photo.yellow {
    background:
        radial-gradient(
            circle,
            #eeee45 0%,
            #eeee45 54%,
            #ffffff 56%,
            #eeee45 60%,
            #ffffff 66%,
            transparent 67%
        );
}


.psppi-final-photo img {
    position: absolute;

    width: 120px;
    height: 120px;

    left: 25px;
    top: 25px;

    border-radius: 50%;

    object-fit: cover;
}


/* =========================================================
   NAMA
   ========================================================= */

.psppi-final-box {

    width: 220px;

    min-height: 70px;

    box-sizing: border-box;

    padding: 8px 10px;

    background: #f3e743;

    border-radius: 6px;

    text-align: center;
}


.psppi-final-box strong {
    display: block;

    color: #222;

    font-size: 14px;

    line-height: 1.12;

    font-weight: 800;
}


.psppi-final-box span {
    display: block;

    margin-top: 4px;

    color: #80651e;

    font-size: 12px;

    line-height: 1.1;

    font-weight: 700;
}


/* =========================================================
   KOORDINATOR
   ========================================================= */

.psppi-final-person.coordinator {
    left: 0;
    top: 310px;
}


.psppi-final-box.red {
    background: #dc5d5d;
}


.psppi-final-box.red strong {
    color: white;
}


.psppi-final-box.red span {
    color: #fff1c9;
}


/* =========================================================
   BARIS ATAS
   ========================================================= */

.psppi-final-person.eko {
    left: 400px;
    top: 15px;
}


.psppi-final-person.marsetyo {
    left: 815px;
    top: 15px;
}


/* =========================================================
   BARIS TENGAH
   ========================================================= */

.psppi-final-person.abdul {
    left: 400px;
    top: 295px;
}


.psppi-final-person.sudirman {
    left: 605px;
    top: 295px;
}


.psppi-final-person.rustam {
    left: 810px;
    top: 295px;
}


/* =========================================================
   BARIS BAWAH
   ========================================================= */

.psppi-final-person.astrul {
    left: 515px;
    top: 590px;
}


.psppi-final-person.habib {
    left: 805px;
    top: 590px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .psppi-org-final {
        overflow-x: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .psppi-org-final {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .psppi-org-board {
        margin-left: 10px;
        margin-right: 10px;
    }

}/* End custom CSS */