/*



    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%;

}

#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;

  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;

}

#colorbox {

  outline: 0;

}

#cboxTopLeft {

  width: 25px;

  height: 25px;

  background: url(images/border1.png) no-repeat 0 0;

}

#cboxTopCenter {

  height: 25px;

  background: url(images/border1.png) repeat-x 0 -50px;

}

#cboxTopRight {

  width: 25px;

  height: 25px;

  background: url(images/border1.png) no-repeat -25px 0;

}

#cboxBottomLeft {

  width: 25px;

  height: 25px;

  background: url(images/border1.png) no-repeat 0 -25px;

}

#cboxBottomCenter {

  height: 25px;

  background: url(images/border1.png) repeat-x 0 -75px;

}

#cboxBottomRight {

  width: 25px;

  height: 25px;

  background: url(images/border1.png) no-repeat -25px -25px;

}

#cboxMiddleLeft {

  width: 25px;

  background: url(images/border2.png) repeat-y 0 0;

}

#cboxMiddleRight {

  width: 25px;

  background: url(images/border2.png) repeat-y -25px 0;

}

#cboxContent {

  overflow: hidden;

}

.cboxIframe {

  background: #fff;

}

#cboxError {

  padding: 50px;

  border: 1px solid #ccc;

}

#cboxLoadedContent {

  background: linear-gradient(180deg, #009abb 0%, #00577d 100%);

  margin-bottom: 20px;

}

#cboxTitle {

  position: absolute;

  bottom: 0px;

  left: 0;

  text-align: center;

  width: 100%;

  color: #999;

}

#cboxCurrent {

  position: absolute;

  bottom: 0px;

  left: 0;

  color: #999;

}

#cboxLoadingOverlay {

  background: #fff url(images/loading.gif) no-repeat 5px 5px;

}

/* 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;

  bottom: 0px;

  right: 42px;

  color: #444;

}

#cboxPrevious {

  position: absolute;

  top: 0;

  right: auto;

  bottom: 2em;

  left: 0;

  width: 50%;

  color: #444;

  /*background-color: rgba(100,100,100,0.1);*/

}

#cboxPrevious:before {

  content: "";

  position: absolute;

  left: 0;

  top: calc(50% - 10em);

  width: 5em;

  height: 20em;

  background-image: url(images/fleche_gauche.png);

  background-size: contain;

  background-position: right;

  background-repeat: no-repeat;

  opacity: 0.2;

}

#cboxPrevious:hover:before {

  opacity: 0.6;

}

#cboxNext {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 2em;

  left: auto;

  width: 50%;

  color: #444;

  /*background-color: rgba(100,100,100,0.2);*/

}

#cboxNext:before {

  content: "";

  position: absolute;

  right: 1em;

  top: calc(50% - 10em);

  width: 5em;

  height: 20em;

  opacity: 0.2;

  background-image: url(images/fleche_droite.png);

  background-size: contain;

  background-position: left;

  background-repeat: no-repeat;

}

#cboxNext:hover:before {

  opacity: 0.6;

}

#cboxClose {

  position: absolute;

  top: 0;

  right: 0;

  width: 3em;

  height: 3em;

  background-color: rgba(200, 200, 200, 0.3);

  display: block;

  color: #444;

}

/*



  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill



  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.



  See: http://jacklmoore.com/notes/ie-transparency-problems/



*/

.cboxIE #cboxTopLeft,

.cboxIE #cboxTopCenter,

.cboxIE #cboxTopRight,

.cboxIE #cboxBottomLeft,

.cboxIE #cboxBottomCenter,

.cboxIE #cboxBottomRight,

.cboxIE #cboxMiddleLeft,

.cboxIE #cboxMiddleRight {

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);

}