/*
    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; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;    z-index: 200000;}
#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{cursor:default !important;float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin: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; opacity: 0.9; filter: alpha(opacity = 90);cursor:default !important;}
#colorbox{outline:0;z-index: 300000;
box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
    /*max-height:80%;
    max-width:92%;*/
}
#cboxContent            {overflow:visible; background:#FFF;}
.cboxIframe             {background:#fff;}
#cboxError              {padding:50px; border:1px solid #ccc;}
#cboxLoadedContent      {background:#FFF; padding:10px;}
#cboxLoadingGraphic     {background:url(../../images/colorbox/loading.gif) no-repeat center center;}
#cboxLoadingOverlay     {background:#FFF;}
#cboxTitle              {position:absolute; top:-22px; left:0; color:#000;}
#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 */
{
    border:0; 
    padding:0; 
    margin:0; 
    overflow:visible; 
    text-indent:-9999px; 
    width:36px; 
    height:36px; 
    position:absolute; 
    top:50%; 
    left:-45px;
    margin-top:-18px;
    background: #FFF url('../../images/colorbox/cbox_l.png') center center no-repeat;
    background-size: 16px 16px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}


#cboxNext 
{
    border:0; 
    padding:0; 
    margin:0; 
    overflow:visible; 
    text-indent:-9999px; 
    width:36px; 
    height:36px; 
    position:absolute; 
    top:50%; 
    right:-45px;
    margin-top:-18px;
    background: #FFF url('../../images/colorbox/cbox_r.png') center center no-repeat;
    background-size: 16px 16px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

#cboxClose{
    border:0; 
    padding:0; 
    margin:0; 
    overflow:visible; 
    text-indent:-9999px; 
    width:36px; 
    height:36px; 
    position:absolute; 
    top:-45px; 
    right:-45px;
    background: #FFF url('../../images/colorbox/cbox_close.png') center center no-repeat;
    background-size: 16px 16px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

#cboxContent:hover #cboxPrevious       {left:5px;}
#cboxContent:hover #cboxNext           {right:5px;}
#cboxContent:hover #cboxClose          {right:0;top:0;}

@media screen and (max-width:999px) {
    #cboxContent #cboxPrevious         {left:5px;}
    #cboxContent #cboxNext             {right:5px;}
    #cboxContent #cboxClose            {right:0;top:0;}
}



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


.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow        {background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow:hover  {background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow       {background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover {background-position:-75px -25px;}
