/* .lightbox_g57 .normal-disp,
.lightbox_g57 .retina-disp {
    display: none;
} */
.lightbox_g57 .lb-thum-box {
    padding: 15px !important;
    height: auto !important;
}
.lightbox_g57 .lb-thum-box a, .lightbox_g57 .lb-thum-box img {
    display: block;
}
.lightbox_g57 .lb-thum-box a {
    position: relative;
}
.lightbox_g57 .lb-thum-box img {
    width: 100%;
    opacity: 1;
}
.ccm-page .lightbox_g57 .lb-thum-box a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000;
}
.ccm-page .lightbox_g57 .lb-thum-box a img {
    width: 100%;
     /*-moz-transition: -moz-transform 0.2s ease;
        -webkit-transition: -webkit-transform 0.2s ease;
        -o-transition: -o-transform 0.2s ease;
        -ms-transition: -ms-transform 0.2s ease;*/ 
    /*transition: all 0.8s ease-out;*/
}
.ccm-page .lightbox_g57 .lb-thum-box a:hover img {
    /* -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1); */
    /* transform: scale(1.1);
    opacity: 0.8; */
}
.lightbox_g57 .lb-thum-box a:hover {
    background: #333;
}
.lightbox_g57 .lb-thum-box a:hover img.thum {
    opacity: 0.5;
}

.lightbox_g57 .lb-thum-box a .arrow {
    color: #000;
    text-decoration: none;
    font-size: 15px;
    display: none;
    width: 30px;
    height: 30px;
    padding: 0;
    position: absolute;
    /*top: auto;*/
    left: 50%;
    bottom: 20%;
    margin-top: -15px;
    margin-left: -15px;
}
.lightbox_g57 .lb-thum-box .arrow:before,
.lightbox_g57 .lb-thum-box .arrow:after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.lightbox_g57 .lb-thum-box:hover .arrow {
    display: block;
}
.lightbox_g57 .lb-thum-box .right-arrow:before{
    left: 0;
    width: 20px;
    height: 1px;
    background: #FFF;
}
.lightbox_g57 .lb-thum-box .right-arrow:after{
    left: 0;
    width: 15px;
    height: 15px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.lightbox_g57 .lb-thum-box .title {
    color: #FFF;
    text-align: center;
    line-height: 20px;
    width: 100%;
    margin-top: -10px;
    display: none;
    position: absolute;
    top: 50%;
}
.lightbox_g57 .lb-thum-box:hover .title {
    display: block;
}
.lightbox_g57 .lb-thum-box .description {
    color: #FFF;
    text-align: left;
    line-height: 1.2;
    width: 100%;
    padding: 0 10px;
    display: none;
    position: absolute;
    bottom: 30%;
}
.lightbox_g57 .lb-thum-box .product {
    color: #FFF;
    text-align: left;
    line-height: 1.2;
    width: 100%;
    padding: 0 10px;
    display: none;
    position: absolute;
    bottom: 30%;
}
.lightbox_g57 .lb-thum-box .product a {
    color: #FFF;
}
.lightbox_g57 .lb-thum-box .description br {
    line-height: 1.8rem;
}
.lightbox_g57 .lb-thum-box:hover .description {
    display: block;
}
.lightbox_g57 .lb-thum-box:hover .product {
    display: block;
}
.lightbox_g57 .lb-thum-box .product  p {
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .lightbox_g57 .lb-thum-box a .arrow {
        top: auto;
        bottom: 30%;
    }
    .lightbox_g57 .lb-thum-box .description {
        text-align: center;
        bottom: 40%;
    }
    .lightbox_g57 .lb-thum-box .product {
        text-align: center;
        bottom: 40%;
    }
}

/*#page .page-num {
    cursor: pointer;
    float: left;
    color: #ffffff;
    font-size: 2rem;
    line-height: 30px;
    font-weight: normal;
    text-align: center;
    margin: 0 5px 0 0;
    border-radius: 3px;
    width: 30px;
    background: #81C3B4;
}
#page .page-num.active {
    background: #3D3D3D;
}*/

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:visible;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{outline:0;}
#cboxContent{margin-top:32px; overflow:visible; background:#FFF;}
    .cboxIframe{background:#FFF;}
    #cboxError{padding:50px; border:1px solid #ccc;}
    #cboxLoadedContent{background:#FFF; padding:1px;}
    #cboxLoadingGraphic{background:url(./loading.gif) no-repeat center center;}
    #cboxLoadingOverlay{background:#000;}
    /*#cboxTitle{position:absolute; top:-22px; left:0; color:#4C3324;}*/
    #cboxTitle{position:absolute; top:auto; bottom:15px; left:15px; color:#333; font-weight:bold;padding:10px;background:transparent;display:none !important;}
    #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

    /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
    /*#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(./controls.png) no-repeat 0 0;}*/
    #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:30px; height:30px; position:absolute; top:auto;}

    /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
    #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

    /*#cboxPrevious{background-position:0px 0px; right:44px;}*/
    #cboxPrevious{background:url(./arrow-prev.png) no-repeat;background-position:0 0; background-size:contain; top:50%; left:0; margin-top:-15px;}
    /*#cboxPrevious:hover{background-position:0px -25px;}*/
    #cboxNext{background:url(./arrow-next.png) no-repeat;background-position:0 0; background-size:contain; top:50%; right:0; margin-top:-15px;}
    /*#cboxNext:hover{background-position:-25px -25px;}*/
    #cboxClose{background:url(./close.png) no-repeat;background-position:0 0; background-size:contain; left:0; top:0;}
    /*#cboxClose:hover{background-position:-50px -25px;}*/
    .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{left:0;}
    .cboxSlideshow_on #cboxSlideshow{background:url(./slideshow.png) no-repeat;background-position:0 0; background-size:100% 200%; bottom:0; right:0;}
    .cboxSlideshow_on #cboxSlideshow:hover{background-position:0 -30px;}
    .cboxSlideshow_off #cboxSlideshow{background:url(./slideshow.png) no-repeat;background-position:0 -30px; background-size:100% 200%; bottom:0; right:0;}
    .cboxSlideshow_off #cboxSlideshow:hover{background-position:0 0;}

@media (min-width: 768px) {
    #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:50px; height:50px; position:absolute; top:auto;}

    #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

    /*#cboxPrevious{background-position:0px 0px; right:44px;}*/
    #cboxPrevious{background:url(./arrow-prev.png) no-repeat;background-position:0 0; top:50%; left:-50px; margin-top:-25px;}
    /*#cboxPrevious:hover{background-position:0px -25px;}*/
    #cboxNext{background:url(./arrow-next.png) no-repeat;background-position:0 0; top:50%; right:-50px; margin-top:-25px;}
    /*#cboxNext:hover{background-position:-25px -25px;}*/
    #cboxClose{background:url(./close.png) no-repeat;background-position:0 0; left:-25px; top:-25px;}
    /*#cboxClose:hover{background-position:-50px -25px;}*/
    .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{left:-30px;}
    .cboxSlideshow_on #cboxSlideshow{background:url(./slideshow.png) no-repeat;background-position:0 0; bottom:0; right:0;}
    .cboxSlideshow_on #cboxSlideshow:hover{background-position:0 -50px;}
    .cboxSlideshow_off #cboxSlideshow{background:url(./slideshow.png) no-repeat;background-position:0 -50px; bottom:0; right:0;}
    .cboxSlideshow_off #cboxSlideshow:hover{background-position:0 0;}
}

.content {
    display: block;
}
.look-image {
    text-align: center;
    /*float: none;*/
    display: block;
}
.look-image img {
    max-width: 100%;
    max-height: 100%;
}
.product-wrapper {
    width: 100%;
    margin-top: 15px;
    /*float: none;*/
    display: block;
}
.product-wrapper .product {
    float: left;
    /*width: 25%;*/
    /*padding: 10px;*/
}
.product-wrapper .product a {
    color: #333;
    font-size: 1rem;
    display: block;
    padding: 10px;
}
.product-wrapper .product .product-image img {
    max-width: 100%;
    max-height: 100%;
}

@media (min-width: 768px) {
    .content {
        display: table;
    }
    .look-image {
        /* width: 70%; */
        /*height: 100%;*/
        min-width: 400px;
        /*float: left;*/
        display: table-cell;
    }
    .look-image img {
        max-width: 100%;
        max-height: 100%;
    }
    .product-wrapper {
        /* width: 30%; */
        width: auto;
        /*float: left;*/
        display: table-cell;
    }
    .product-wrapper .product {
        /*padding: 10px;*/
        /*padding-left: 10px;*/
        float: none;
    }
    .product-wrapper .product a {
        display: block;
        padding: 0 10px 10px;
    }
    .product-wrapper .product .product-image img {
        max-width: 100%;
        max-height: 100%;
    }
}