* { box-sizing: border-box; }
body {
    background: #091443 url(/img/bg2.png) no-repeat center center fixed;
    background-size: cover;
    margin: 0;
}

#modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* ini untuk pidi_blade, hapus kalau sudah gk perlu */
.wrapper { width: 1000px; margin: 20px auto; }
#banner { display: flex; align-items: center; justify-content: space-between; }
#banner a { height: 50px; }
#banner img { width: 100%; height: 100%; }

/* yang terbaru */
button { height: 30px; padding: 0 10px; font: bold 11px arial; background: linear-gradient(#fff, #eee); border-radius: 3px; border: 1px solid #ccc; }
button:hover { cursor: pointer; background: linear-gradient(#eee, #fff); }
button:active { outline: none; background: #800; color: #fff; border-radius: 3px; }

#wrapper { width: 1500px; margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; margin: 40px auto; }
header a { height: 70px; }
header img { display: block; width: 100%; height: 100%; }

.arrow {
    align-items: center;
    color: #fff;
    display: flex;
    font: bold 2em arial;
    height: 120px;
    justify-content: center;
    width: 100px;
}

.flow1 { display: flex; }
.flow2 { display: flex; justify-content: flex-end; }
.flow2 .arrow { height: 100px; width: 280px; }
.flow3 { display: flex; justify-content: flex-end; }

.work {
    margin: 0; width: 300px; height: 242px; padding: 10px; background: linear-gradient(#fff 0, #ccc 10%, #ccc 100%); border-radius: 6px;
}
.workname { font: bold 16px arial; margin: 5px 0 10px 0; text-align: center; }
.worktools {
    display: flex; align-items: center; justify-content: space-between; margin-top: 5px;
}
.worktools button {
    height: 30px; padding: 0 10px; font: bold 11px arial; background: linear-gradient(#fff, #eee); border-radius: 3px; border: 1px solid #ccc;
}
.worktools button:hover { cursor: pointer; background: linear-gradient(#eee, #fff); }
.worktools button:active { outline: none; background: #800; color: #fff; border-radius: 3px; }
.worktime { font: bold 12px arial; }
.worktime span { font-weight: normal; }
.work img {
    border-radius: 3px;
    display: block;
    /* max-height: 180px; */
    max-width: 100%;
}
.workarrow { align-items: center; color: #fff; display: flex; font: bold 2em arial; height: 242px; justify-content: center; width: 100px; }