/* ==========================================================
   FAFA - COMPONENTS.CSS
   Herbruikbare componenten
   ========================================================== */


/* ==========================================================
   ORGANIGRAM MENU
   ========================================================== */

.orgchart{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.orgbox{

    width:100%;
    max-width:220px;

    padding:12px;

    background:yellow;

    border:2px solid #ff5a00;
    border-radius:8px;

    text-align:center;
    font-weight:bold;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}

.orgbox:hover{

    transform:translateY(-2px);

    box-shadow:0 4px 8px rgba(0,0,0,.20);

}

.orgbox a{

    color:#000;
    text-decoration:none;

}

.orgconnector{

    width:4px;
    height:40px;

    background:#222;

    margin:5px 0;

    position:relative;

}

.orgconnector::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-12px;

    transform:translateX(-50%);

    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:12px solid #222;

}


/* ==========================================================
   GALLERY
   ========================================================== */

.gallery{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;

}

.gallery > a{

    flex:0 1 300px;
    max-width:320px;

    color:inherit;
    text-decoration:none;

}




/* ==========================================================
   GALLERY ITEMS
   ========================================================== */

.item{

    width:100%;

    background:#fff;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.item:hover{

    transform:scale(1.02);

    box-shadow:0 5px 14px rgba(0,0,0,.25);

}

.item img{

    width:100%;
    height:auto;

    display:block;

}

.caption{

    padding:10px;

    text-align:center;

    font-size:14px;

}


/* ==========================================================
   LIGHTBOX
   ========================================================== */

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    z-index:9999;

    background:rgba(0,0,0,.9);

    cursor:pointer;

}

.lightbox img{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    max-width:95%;
    max-height:95%;

}

.close{

    position:absolute;

    top:15px;
    right:25px;

    color:#fff;

    font-size:42px;

    font-weight:bold;

}


/* ==========================================================
   ALGEMEEN
   ========================================================== */

h1{

    text-align:center;

}