/* Initially hide the caption in the list item template */
.kaelar-portfolio-item .caption {
    display: none;
}

.fancybox-custom-layout .fancybox-caption{
    padding: 30px 20px;
    background: #f1ecec;
    color: #6c6f73;
}

/* Remove background from all buttons */
.fancybox-custom-layout .fancybox-button,
.fancybox-custom-layout .fancybox-navigation button:before {
    background: transparent;
}

/* Navigation arrows */
.fancybox-custom-layout .fancybox-navigation .fancybox-button div {
    padding: 6px;
    background: #fcfaf9;
    border-radius: 50%;
    transition: opacity .2s;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    opacity: .7;
}

.fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]):hover div {
    opacity: 1;
}

.fancybox-custom-layout .fancybox-navigation .fancybox-button[disabled] {
    color: #999;
}

.fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]) {
    color: #333;
}

@media all and (min-width: 600px) {
    /* Set color for background element */
    .fancybox-custom-layout .fancybox-bg {
        background: #f6f6f6;
    }
    
    .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
        opacity: 1;
    }
    
    /* Move toolbar to the right side */
    .fancybox-custom-layout .fancybox-toolbar {
        background: #3b3b45;
        bottom: 0;
        left: auto;
        right: 0;
        top: 0;
        width: 44px;
    }
    
    /* Adjust content area position */
    .fancybox-custom-layout .fancybox-stage {
        right: 300px;
    }
    
    /* Move caption area to the right side */
    .fancybox-custom-layout .fancybox-caption {
        top: 0;
        right: 44px;
        bottom: 0;
        left: auto;
        width: 256px;
        pointer-events: all;
    }
    
    .fancybox-custom-layout .fancybox-caption h3 {
        color: #444;
        font-size: 21px;
        line-height: 1.3;
        margin-bottom: 24px;
    }
    
    .fancybox-custom-layout .fancybox-caption a {
        color: #444;
    }
    
    /* Reposition right arrow */
    .fancybox-custom-layout .fancybox-button--arrow_right {
        right: 308px;
    }
}