/*

        Advanced example - Customized layout

    */

    .ad {
        display: none;
    }

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

        .fancybox-custom-layout {
            border: 20px solid #c7bfbf;
        }

        .fancybox-custom-layout .fancybox-bg,
        .fancybox-custom-layout.fancybox-container--ready .fancybox-bg {
            background: #efefef;
            opacity: 1;
        }

        .fancybox-custom-layout .fancybox-controls {
            opacity: 1;
            position: absolute;
            top: 0;
            left: auto;
            right: 0;
            bottom: 0;
            width: 44px;
            background: #5E4950;
        }

        .fancybox-custom-layout .fancybox-button {
            background: transparent;
        }

        .fancybox-custom-layout .fancybox-buttons button:hover {
            background: rgba(20, 20, 20, 0.4);
        }

        .fancybox-custom-layout .fancybox-caption-wrap {
            top: 0;
            right: 44px;
            bottom: 0;
            left: auto;
            width: 250px;
            padding: 0;
            box-shadow: none;
            background: #FF6666;
            font-weight: bold;


            /* Disable transitions */
            opacity: 1;
            visibility: visible;
            -webkit-transition: none;
               -moz-transition: none;
                    transition: none;
        }

        .fancybox-custom-layout .fancybox-caption {
            border: 0;
            padding: 50px 15px;
            color: #fff;
        }

        .fancybox-custom-layout .fancybox-slider-wrap {
            right: 294px;
        }

        .fancybox-custom-layout.fancybox-container--thumbs .fancybox-controls {
            right: 220px;
        }

        .fancybox-custom-layout.fancybox-container--thumbs .fancybox-slider-wrap {
            right: 514px;
        }

        .fancybox-custom-layout.fancybox-container--thumbs .fancybox-caption-wrap {
            right: 264px;
        }

        .fancybox-custom-layout .fancybox-thumbs {
            top: 0;
            bottom: 0;
            background: #c7bfbf;
        }

        .fancybox-custom-layout .fancybox-thumbs > ul > li {
            border-color: #c7bfbf;
        }

        /* Border around active element */
        .fancybox-custom-layout .fancybox-thumbs > ul > li::before {
            border-color: #FF6666
        }

        .ad {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 15px;
            color: #fff;
        }

        .ad p {
            margin-top: 0px;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .ad p a {
            color: #fff;
        }

    }


    /*

        Advanced example - Morphing modal window

    */

    .morphing-btn-wrap {
        text-align: center;
        display: inline-block;
        position: relative;
    }

    .open_morphing {
        -webkit-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
           -moz-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
             -o-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
                transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
        white-space: nowrap;
    }

    .to-circle {
        color: transparent;
        padding-left: 0;
        padding-right: 0;
        width: 35.6px !important; /* Override inline style rule */
        -webkit-transition: color 0.2s 0s, width .2s 0.2s;
           -moz-transition: color 0.2s 0s, width .2s 0.2s;
             -o-transition: color 0.2s 0s, width .2s 0.2s;
                transition: color 0.2s 0s, width .2s 0.2s;
    }

    .clone {
        position: fixed;
        background: #FF6666;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        z-index: 3;
        font-size: 0.875em;
        -webkit-transition: all 0.5s ease-out;
           -moz-transition: all 0.5s ease-out;
             -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
    }

    .is-visible {
        -webkit-transform : scale(1) !important;
        -moz-transform : scale(1)  !important;
        -ms-transform : scale(1) !important;
        -o-transform : scale(1)  !important;
        transform : scale(1) !important;
    }

    #morphing {
        margin: 0;
        position: relative;
        background: transparent;
        color: #fff;
        padding: 6em 10vw;
        line-height: 2;

        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            z-index: 3;
    }

    #morphing a {
        color: #fff;
    }

    .morphing-close {
        position: fixed;
        top: 5%;
        right: 5%;
        background: rgba(0,0,0,0.2);
        text-indent: -9999px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 0;
        overflow: hidden;
        transition: background-color 0.2s ease 0s, transform .2s ease-in-out;;
        z-index: 99993;
        cursor: pointer;
        outline: none;
    }

    .morphing-close:hover {
        background: rgba(0,0,0,0.3);

        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);

    }

    .morphing-close:active {
        margin-top: -1px;
    }

    .morphing-close:before,
    .morphing-close:after {
        content: "";
        position: absolute;
        left: 12px;
        top: 24px;
        width: 26px;
        height: 1.5px;
        background: #fff;
    }

    .morphing-close:before {
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .morphing-close:after {
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /*

        Advanced example - Confirm dialog

    */

    .my_dialog {
        max-width: 550px;
        padding: 50px !important;
        box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 13px 19px 2px rgba(0,0,0,.14), 0 5px 24px 4px rgba(0,0,0,.12);
        border-radius: 4px;
        opacity: 0;
        transition: all .3s;
            transform: translate(30%) translateZ(600px) rotate(10deg);
    }

    .fancybox-slide--complete .my_dialog {
        opacity: 1;
        transform: translate(0%) translateZ(0) rotate(0deg);
    }

    /*

        Advanced example - Product quick view

    */

    .quick-view-container {
        background: rgba(10,10,10,0.85);
    }

    .quick-view-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        max-width: 980px;
        max-height: 650px;
    }

    .quick-view-carousel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 57%;
        background: #fff;
    }

    .quick-view-carousel .fancybox-slider-wrap {
        bottom: 30px;
    }

    .quick-view-aside {
        position: absolute;
        top: 30px;
        right: 0;
        bottom: 30px;
        left: auto;
        width: 43%;
        padding: 50px 0 30px 0;
        background: #fff;
        color: #777;
    }

    .quick-view-aside::before, .quick-view-aside::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .quick-view-aside::before {
        width: 8px;
        background: #f4f4f4;
    }

    .quick-view-aside::after {
        width: 1px;
        background: #e9e9e9;
    }

    .quick-view-aside > div {
        height: 100%;
        overflow: auto;
        padding: 5vh 30px 0 30px;
        text-align: center;
    }

    .quick-view-aside > div > p {
        font-size: 90%;
    }

    .quick-view-close {
        position: absolute;
        top: 30px;
        right: 0;
        width: 44px;
        height: 44px;
        background: #F0F0F0;
        padding: 0;
        margin: 0;
        border: 0;
        cursor: pointer;
        font-family: Arial;
        font-size: 14px;
        color: #222;
        text-indent: -99999px;
        transition: all .2s;
    }

    .quick-view-close:hover {
        background: #e4e4e4;
    }

    .quick-view-close::before,
    .quick-view-close::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 22px;
        width: 1px;
        height: 18px;
        background-color: #222;
    }

    .quick-view-close:before {
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    .quick-view-close:after {
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }


    .quick-view-bullets {
        list-style: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        z-index: 99999;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .quick-view-bullets li {
        display: inline-block;
        vertical-align: top;
    }

    .quick-view-bullets li a {
        display: block;
        height: 30px;
        width: 20px;
        position: relative;
    }

    .quick-view-bullets li a span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 10px;
        height: 10px;
        border-radius: 99px;
        text-indent: -99999px;
        overflow: hidden;
        background: #d4d2d2;

    }

    .quick-view-bullets li.active a span {
        background: #FF6666;
    }

    /*
        // End of examples
    */