.space-top {
    --cpn-space-top : 60px;
    --cpn-space-min-top : 30px;
}
.space-bottom {
    --cpn-space-bottom : 60px;
    --cpn-space-min-bottom : 30px;
}

.project-detail-section-main {
    position: relative;
}

/* .pj-content-row,
.pj-content-row>.title-row,
.pj-content-row>.content-row,
.pj-content-row>.button-row {
    position: relative;
}
.pj-content-row>.title-row+.content-row {
    margin-top: 30px;
} */

/* ============================================================================================== */
/* ============================================= header ========================================= */
/* ============================================================================================== */
/* 
#header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-right .site-menu-item.is-menu {
    display: none;
} */
.modal-nav-menu.site-project .modal-body .title-row {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(var(--cpn-color-black),1);
}
.modal-nav-menu.site-project .modal-body .site-menu-item {
    text-align: center;
}
.modal-nav-menu.site-project .modal-body .project-category {
    opacity: 0.6;
}
/* .modal-nav-menu.site-project .modal-body .site-menu-item+.site-menu-item {
    border-top: 1px solid rgba(var(--cpn-color-black),0.1);
} */

/* --------------------------------------------------------------- */
/* ----------------------- logo project -------------------------- */
/* --------------------------------------------------------------- */

.logo-on-header .logo-project {
    position: relative;
    display: block;
    width: 200px;
    height: 25px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
#header-secondary .logo-on-header .logo-project.on-banner {
    display: block;
}
#header-secondary .logo-on-header .logo-project.on-header {
    display: none;
}

/* hover + fixed */
#header-secondary:hover .logo-on-header .logo-project.on-banner,
#header-secondary.fixed .logo-on-header .logo-project.on-banner,
#header-secondary.on-banner-disable .logo-on-header .logo-project.on-banner {
    display: none;
}
#header-secondary:hover .logo-on-header .logo-project.on-header,
#header-secondary.fixed .logo-on-header .logo-project.on-header,
#header-secondary.on-banner-disable .logo-on-header .logo-project.on-header {
    display: block;
}

#header-secondary .logo-banner-for-project {
    width: 0;
    height: 0;
    overflow: hidden;
}
#header-secondary .logo-banner-for-project,
#header-secondary .logo-banner-for-project img {
    position: relative;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    /* ============================================================================================== */
    /* ============================================= header ========================================= */
    /* ============================================================================================== */

    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-left {
        width: 300px;
    }   
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-right {
        display: none;
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-center {
        width: calc(100% - 300px);
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-center ul.site-menu-group {
        justify-content: flex-end;
    }

    /* --------------------------------------------------------------- */
    /* ----------------------- logo project -------------------------- */
    /* --------------------------------------------------------------- */

    .logo-on-header .logo-project {
        width: 160px;
        height: 20px;
    }

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* ============================================================================================== */
    /* ============================================= header ========================================= */
    /* ============================================================================================== */

    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-left {
        width: 250px;
    }   
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-right {
        display: none;
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-center {
        display: block;
        width: calc(100% - 250px);
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-center ul.site-menu-group {
        justify-content: flex-end;
    }

}

/* md - sm - xs */
@media (max-width: 991.98px) {

    /* ============================================================================================== */
    /* ============================================= header ========================================= */
    /* ============================================================================================== */

    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-center {
        display: none;
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-left,
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-right {
        width: 50%;
    }
    #header-section[data-header="site-project"] #header-secondary .header-row>.header-col.this-col-right .site-menu-item.is-menu {
        display: block;
    }

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {

    .space-top {
        --cpn-space-top : 40px;
        --cpn-space-min-top : 30px;
    }
    .space-bottom {
        --cpn-space-bottom : 40px;
        --cpn-space-min-bottom : 30px;
    } 

    /* ============================================================================================== */
    /* ============================================= header ========================================= */
    /* ============================================================================================== */

    /* --------------------------------------------------------------- */
    /* ----------------------- logo project -------------------------- */
    /* --------------------------------------------------------------- */

    .logo-on-header .logo-project {
        width: 160px;
        height: 20px;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}