/* ------------------------------------------------------------------- 
 * ## bricks masonry 
 * ------------------------------------------------------------------- */
.bricks {
    max-width     : var(--width-wide) !important;
    margin-top    : var(--vspace-3) !important;
    margin-bottom : var(--vspace-3) !important;
}

.bricks .masonry {
    overflow : hidden !important;
}

.bricks-wrapper {
    display  : block !important;
    position : relative !important;
}

.bricks-wrapper .grid-sizer,
.bricks-wrapper .brick {
    width : 25% !important;
}

.bricks-wrapper .grid-sizer--double,
.bricks-wrapper .brick--double {
    width : 50% !important;
}

.bricks-wrapper .brick {
    float   : left !important;
    padding : 0 !important;
}

/* ------------------------------------------------------------------- 
 * ## masonry entries 
 * ------------------------------------------------------------------- */
.bricks-wrapper .entry {
    overflow : hidden !important;
    position : relative !important;
}

.bricks-wrapper .entry__link {
    display  : block !important;
    position : relative !important;
}

.bricks-wrapper .entry__link img {
    vertical-align : bottom !important;
    transition     : all 0.3s ease-in-out !important;
    margin         : 0 !important;
}

.bricks-wrapper .entry__link::before {
    z-index    : 1 !important;
    content    : "" !important;
    display    : block !important;
    background : rgba(0, 0, 0, 0.6) !important;
    opacity    : 0 !important;
    visibility : hidden !important;
    width      : 100% !important;
    height     : 100% !important;
    transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    position   : absolute !important;
    top        : 0 !important;
    left       : 0 !important;
}

.bricks-wrapper .entry__link::after {
    z-index        : 1 !important;
    display        : block !important;
    content        : "..." !important;
    font-family    : georgia, serif !important;
    font-size      : 2.4rem !important;
    height         : 90px !important;
    width          : 90px !important;
    letter-spacing : .2rem !important;
    line-height    : 90px !important;
    margin-left    : -45px !important;
    margin-top     : -55px !important;
    text-align     : center !important;
    color          : white !important;
    opacity        : 0 !important;
    visibility     : hidden !important;
    transform      : scale(0.5) !important;
    transition     : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    position       : absolute !important;
    left           : 50% !important;
    top            : 50% !important;
}

.bricks-wrapper .entry {
    position : relative !important;
}

.bricks-wrapper .entry__info {
    z-index    : 2 !important;
    transform  : translateY(-100%) !important;
    opacity    : 0 !important;
    visibility : hidden !important;
    transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    position   : absolute !important;
    top        : var(--vspace-0_75) !important;
    left       : var(--vspace-0_75) !important;
}

.bricks-wrapper .entry__cat,
.bricks-wrapper .entry__title {
    font-family : var(--font-2) !important;
}

.bricks-wrapper .entry__cat {
    font-size   : calc(var(--text-size) * 0.7778) !important;
    line-height : 1.8 !important;
    color       : rgba(255, 255, 255, 0.3) !important;
}

.bricks-wrapper .entry__title {
    font-weight : 500 !important;
    font-size   : calc(var(--text-size) * 0.9444) !important;
    line-height : 1.2 !important;
    margin      : 0 !important;
    color       : white !important;
}

/* on hover */
.bricks-wrapper .entry:hover .entry__link::before {
    opacity    : 1 !important;
    visibility : visible !important;
}

.bricks-wrapper .entry:hover .entry__link::after {
    opacity    : 1 !important;
    visibility : visible !important;
    transform  : scale(1) !important;
}

.bricks-wrapper .entry:hover .entry__link img {
    transform : scale(1.05) !important;
}

.bricks-wrapper .entry:hover .entry__info {
    opacity    : 1 !important;
    visibility : visible !important;
    transform  : translateY(0) !important;
}

/* ------------------------------------------------------------------- 
 * ## modal popup
 * ------------------------------------------------------------------- */
.modal-popup {
    max-width        : 680px !important;
    background-color : white !important;
    font-size        : calc(var(--text-size) * 0.9447) !important;
    line-height      : var(--vspace-0_875) !important;
    color            : rgba(0, 0, 0, 0.75) !important;
    overflow-y       : auto !important;
    position         : relative !important;
}

.modal-popup img {
    margin-bottom : var(--vspace-0_75) !important;
}

.modal-popup h5 {
    font-family   : var(--font-1) !important;
    font-size     : var(--text-size) !important;
    line-height   : var(--vspace-1) !important;
    font-weight   : 500 !important;
    color         : black !important;
    margin-top    : 0 !important;
    margin-bottom : var(--vspace-0_25) !important;
}

.modal-popup__desc {
    padding : 0 var(--vspace-1_25) var(--vspace-0_25) !important;
}

.modal-popup__cat {
    list-style   : none !important;
    margin-left  : 0 !important;
    font-size    : var(--text-sm) !important;
    line-height  : var(--vspace-0_5) !important;
    color        : rgba(0, 0, 0, 0.6) !important;
    padding-left : calc(0.875 * var(--space)) !important;
    position     : relative !important;
}

.modal-popup__cat::before {
    content             : "" !important;
    display             : block !important;
    height              : calc(0.625 * var(--space)) !important;
    width               : calc(0.625 * var(--space)) !important;
    background-repeat   : no-repeat !important;
    background-position : center !important;
    background-size     : contain !important;
    background-image    : url(../images/icons/icon-tag.svg) !important;
    position            : absolute !important;
    left                : 0 !important;
    top                 : -0.15em !important;
}

.modal-popup__cat li {
    display      : inline !important;
    padding-left : 0 !important;
}

.modal-popup__cat li::after {
    content : ", " !important;
}

.modal-popup__cat li:last-child::after {
    display : none !important;
}

.modal-popup__details {
    background-color : rgba(0, 0, 0, 0.3) !important;
    font-size        : var(--text-xs) !important;
    line-height      : var(--vspace-1_25) !important;
    color            : white !important;
    padding          : 0 1.2rem !important;
    position         : absolute !important;
    top              : var(--vspace-1) !important;
    left             : var(--vspace-1) !important;
}

.modal-popup__details:focus,
.modal-popup__details:hover {
    background-color : var(--color-gray-19) !important;
    color            : white !important;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * portfolio
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .bricks-wrapper .entry__cat {
        font-size : calc(var(--text-size) * 0.6667);
    }

    .bricks-wrapper .entry__title {
        font-size : calc(var(--text-size) * 0.8333);
    }
}

@media screen and (max-width: 1000px) {

    .bricks-wrapper .grid-sizer,
    .bricks-wrapper .brick {
        width : 50%;
    }
}

@media screen and (max-width: 800px) {
    .s-folio {
        padding-top    : var(--vspace-4);
        padding-bottom : var(--vspace-4_5);
    }

    .bricks {
        margin-top    : var(--vspace-1_75);
        margin-bottom : var(--vspace-2);
    }
}

@media screen and (max-width: 550px) {

    .bricks-wrapper .grid-sizer,
    .bricks-wrapper .brick {
        width : 100%;
        float : none;
    }
}