/*
    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;}
#cboxWrapper {
    max-width: none;

    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#cboxOverlay,
#colorbox {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;padding:5px;text-align:center;background: rgba(255, 255, 255, 0.61);}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto {
    margin: auto;
    border: 0;
    display: inline-block;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    width: auto !important;
    -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{ /* opacity: 0.7; */ background-color: #000;  overflow: hidden;  -moz-opacity: 0.8;  -khtml-opacity: 0.8;  opacity: 0.8;  filter: alpha(opacity = 80);}
#colorbox{outline:0;width: 100%;height: 100%;}
#cboxContent{
    background: #FFF; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.196);

}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}

#cboxTitle {
    position: absolute;
    bottom: 0;
    color: #000;
    width: 100%;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}
#cboxTitle a {color:#000;text-decoration:underline;}
#cboxTitle a:hover {text-decoration:none;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color: #FFF;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* 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; width:auto; background:none; }

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

#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;border-radius: 5px;  box-shadow: 0 0 5px #899;}
#cboxPrevious,
#cboxNext {
    position:absolute;
    top:50%;
    margin-top:-32px;
    width:47px;
    height:65px;
    color:#000;
    background: rgba(255, 255, 255, 0.7);
    -moz-border-radius: 0 15px 15px 0;
    -webkit-border-radius: 0 15px 15px 0;
    -khtml-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
}
#cboxPrevious {
    left:5px;
}
#cboxPrevious:after,
#cboxNext:after{
    font-family: FontAwesome;
    content:'\f190';
    color:#8e8e8e;
    font-size: 40px;
    -webkit-transition: color .4s;
    -moz-transition: color .4s;
     -o-transition: color .4s;
    transition: color .4s; 
}
#cboxNext {
    right:5px;
    -moz-border-radius: 15px 0 0 15px;
    -webkit-border-radius: 15px 0 0 15px;
    -khtml-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
}
#cboxNext:after {
    content:'\f18e';
}
#cboxPrevious:hover:after,
#cboxNext:hover:after {
    color:#000;
}
#cboxClose{
    position:absolute;
    top:0;
    right:0;
    display:block;
    padding: 10px;
    line-height: 120%;
}
#cboxClose:after {
    font-family: FontAwesome;
    content:'\f00d';
    color:#616161;
    font-size: 24px;
    -webkit-transition: color .3s;
    -moz-transition: color .3s;
     -o-transition: color .3s;
    transition: color .3s; 
}
#cboxClose:hover:after{color:#000;}
@media screen and (max-height: 550px) {
  #cboxTitle {
    display:none !important;
  } 
}