/*

Advanced example - Customized layout

*/

@media all and (min-width: 600px) {

    /* Change color for backdrop */
    .fancybox-custom-layout .fancybox-bg {
        background: #fcfaf9;
    }

    .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
        opacity: 1;
    }

    /* Move caption area to the right side */
    .fancybox-custom-layout .fancybox-caption {
        background: #f1ecec;
        bottom: 0;
        color: #6c6f73;
        left: auto;
        padding: 30px 20px;
        right: 44px;
        top: 0;
        /*width: 256px;*/
        width: 25%;
    }

    .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;
    }

    /* Remove gradient from caption*/
    .fancybox-custom-layout .fancybox-caption::before {
        display: none;
    }

    /* Adjust content area position */
    .fancybox-custom-layout .fancybox-stage {
        width: 73%;
        right: 300px;
    }

    /* Align buttons at the right side  */
    .fancybox-custom-layout .fancybox-toolbar {
        background: #3b3b45;
        bottom: 0;
        left: auto;
        right: 0;
        top: 0;
        width: 44px;
    }

    /* Remove background from all buttons */
    .fancybox-custom-layout .fancybox-button {
        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;
    }

    /* Reposition right arrow */
    .fancybox-custom-layout .fancybox-button--arrow_right {
        right: 465px;
    }
}