/*
    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:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#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;}
.cboxIframe{width: 640px; height: 360px; display:block; border:1px solid #ae894a; }
#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:#000;}
#colorbox{}
    #cboxContent{}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:1px solid #ae894a; background:#000;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(http://www.theactlv.com/wp-content/themes/the-act/images/loading.gif) no-repeat center center;}
        #cboxPrevious,
        #cboxNext { position: absolute; top: 10px; width: 17px; height: 24px; background: url(http://www.theactlv.com/wp-content/themes/the-act/images/arrows.png) no-repeat; }
        #cboxPrevious { left: 10px; background-position: 0 0; }
        #cboxPrevious:hover { background-position: 0 bottom; }
        #cboxNext { left: 37px; background-position: right 0; }
        #cboxNext:hover { background-position: right bottom; }
        #cboxClose { position: absolute; top: 10px; right: 10px; width: 28px; height: 26px; background: url(images/close.png) no-repeat 0 0; z-index: 1; }
        #cboxClose:hover { background-position: 0 bottom; }
        #cboxTitle { position: absolute; top: 10px; left: 71px; right: 48px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  color: #b08943; font-size: 24px; line-height: 1; font-family: 'trajan-pro', serif; font-weight: bold; z-index: 0; }

        #cboxSlideshow,
        #cboxCurrent,
        #cboxTopCenter,
        #cboxBottomCenter { display: none; }

        .cboxPhoto { margin: 60px; }
        .cboxIframe { margin: 44px 10px 10px; }

@media (max-width: 767px) {
    .cboxPhoto { margin: 44px 5% 5%; max-width: 90%; }

    #cboxClose { width: 14px; height: 13px; } 
    #cboxClose {
        -webkit-background-size: 14px 26px;
        -moz-background-size: 14px 26px;
        background-size: 14px 26px;  
    } 

    #cboxPrevious,
    #cboxNext { width: 8px; height: 12px; }
    #cboxNext { left: 28px; }

    #cboxPrevious,
    #cboxNext {
        -webkit-background-size: 16px 24px;
        -moz-background-size: 16px 24px;
        background-size: 16px 24px;
    }
}