/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 25 2026 | 16:39:21 */
/* ==========================================
   MB EXPANDING PANELS SYSTEM
   ========================================== */

/* Base Layout */

.mb-exp-panel,
.mb-exp-panel-auto{
    display:flex;
    overflow:hidden;
    height:150px;
}

/* Panels */

.mb-exp-panel .mb-panel,
.mb-exp-panel-auto .mb-panel{
    flex:1;
    overflow:hidden;
    position:relative;
    height:100%;
    transition:flex 1s ease;
}

/* Vertical Title */

.mb-panel-title{
    position:absolute;
    bottom:1rem;
    left:.75rem;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    white-space:nowrap;
    margin:0;
    opacity:1 !important;
    transition:opacity .6s ease !important;
    z-index:2;
    will-change:opacity;
}

.mb-panel-title-1{
    opacity:1 !important;
    transition:opacity .6s ease !important;
    will-change:opacity;
}

.mb-exp-panel .mb-panel:hover .mb-panel-title-1,
.mb-exp-panel-auto .mb-panel.is-active .mb-panel-title-1{
    opacity:0 !important;
}

.mb-exp-panel .mb-panel:hover .mb-panel-title{
    opacity:0 !important;
}

/* Panel Content */

.mb-panel-content{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;

    height:100%;

    opacity:0;
    transform:translateY(100px);

    transition:
        opacity .5s ease,
        transform .5s ease;

    pointer-events:none;
}

/* ==========================================
   MANUAL VERSION
   ========================================== */

.mb-exp-panel .mb-panel:hover{
    flex:4.5;
}

.mb-exp-panel:hover .mb-panel:not(:hover){
    flex:.8;
}

.mb-exp-panel .mb-panel:hover .mb-panel-title{
    opacity:0;
}

.mb-exp-panel .mb-panel:hover .mb-panel-content{
    opacity:1;
    transform:translateY(0);
    transition-delay:.5s;
    pointer-events:auto;
}

/* ==========================================
   AUTO VERSION
   ========================================== */

.mb-exp-panel-auto .mb-panel.is-active{
    flex:8;
}

.mb-exp-panel-auto.has-active .mb-panel:not(.is-active){
    flex:.5;
}

.mb-exp-panel-auto .mb-panel.is-active .mb-panel-title{
    opacity:0;
}

.mb-exp-panel-auto .mb-panel.is-active .mb-panel-content{
    opacity:1;
    transform:translateY(0);
    transition-delay:.5s;
    pointer-events:auto;
}