/*
Editing notes

To change slider image padding/margin/border, change the rules n
.sliderOuter img {}

To change the slider active slide border rules change
.sliderActiveBorder .activeLI img {}
*/

/* special cases for ie8 in front-end edit mode */
.mce-content-body .jsGallery .slide {
  display: none;
}
.mce-content-body .jsGallery .slide:nth-of-type(1) {
  display: block;
}
.mce-content-body .jsGallery input {
  display: none;
}
.mce-content-body .jsGallery .html-caption {
  display: none;
}

.jsGallery .sliderWrap {
  display: block;
  margin-top: 20px;
}

/* ####################################################### */
/*                         Gallery                         */
/* ####################################################### */
.jsGallery .singleGallery a {
  display: block;
  text-align: center;
}

.jsGallery .galleryNav {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}

.jsGallery .galleryNav a {
  display: block;
  position: absolute;
  height: 100%;
  width: 18%;
  z-index: 500;
  transition: all 100ms;
  -webkit-transition: all 100ms; /* Safari */
}
.jsGallery .galleryNav a span {
  width: 20%;
  opacity: 0.1;
  transition: all 100ms;
  -webkit-transition: all 100ms; /* Safari */
}
.jsGallery .galleryNav img {
  bottom: 0;
  margin: auto;
  padding: 10%;
  position: absolute;
  top: 0;
}
.jsGallery .galleryNav .next img {
  border-radius: 5px 0 0 5px;
  right: 0;
}

.jsGallery .galleryWrap .galleryNav a span {
  -webkit-transition: opacity 0.35s ease-in-out;
  -moz-transition: opacity 0.35s ease-in-out;
  -ms-transition: opacity 0.35s ease-in-out;
  -o-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

.jsGallery .galleryWrap:hover .galleryNav a span {
  opacity: 0.3;
}
.jsGallery .galleryWrap .galleryNav a:hover span {
  opacity: 1;
}

.jsGallery .galleryNav .prev {
  padding-right: 10%;
}

.jsGallery .galleryNav .next {
  padding-left: 10%;
  right: 0;
  border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  -webkit-border-radius: 0px 5px 5px 0px;
}
.jsGallery .galleryNav .prev span,
.jsGallery .galleryNav .next span {
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}
.jsGallery .galleryNav .next span {
  right: 0;
}

.jsGallery .explodable .gallery_group {
  cursor: url("images/Zoom-In.png"), auto;
}

/* gallery dots  */
.dot-wrap {
  position: absolute;
  bottom: 5%;
  width: 100%;
  text-align: center;
  z-index: 502;
}

.dot-wrap .dot-inner {
  padding: 1%;
  display: inline;
  opacity: 0.6;
}

.dot-wrap .click-dots {
  position: relative;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 2px solid white;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  bottom: 1px;
}

.dot-wrap .click-dots[data-status="active"],
.dot-wrap .click-dots:hover {
  background-color: silver;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
}

/* ####################################################### */
/*                          Slider                         */
/* ####################################################### */

/** Thumb Navigation Images **/
/* Main wrapper for the images, width must have a value set (greater than the minimum size), although js will change it later */
.jsGallery .gallerySliderWrap {
  margin: 1em 5.5%;
}
.jsGallery .gallerySliderWrap .gallerySliderInner {
  border: 1px solid #898989;
  height: 6.8em;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.jsGallery .gallerySliderWrap .gallerySliderOuter {
  left: 0;
  margin: 1em 0;
  padding: 0;
  position: absolute;
  width: 9999999px;
}

.jsGallery .gallerySliderWrap ul {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.jsGallery .gallerySliderWrap ul:after {
  content: "";
  display: table;
  clear: both;
}
.jsGallery .gallerySliderWrap li {
  display: inline;
}
/* style the look of the thumbs' borders */
.jsGallery .gallerySliderWrap li {
  display: inline-block;
  float: left;
  margin: 0 10px;
  position: relative;
  outline: 0;
  height: 75px;
}
.jsGallery .gallerySliderWrap li:first-child {
  margin-left: 0;
}

.jsGallery .gallerySliderWrap li > a {
}

.jsGallery .gallerySliderWrap li img {
  border: 2px solid #000000;
}
.jsGallery .gallerySliderWrap li:hover img,
.jsGallery .gallerySliderWrap li.activeLI img {
  border: 2px solid #e13766;
}

/* set the width of the thumbs*/

.jsGallery .gallerySliderWrap ul {
  display: inline-block;
}
.jsGallery .gallerySliderWrap.stackedNav li {
  min-width: 3em;
}

.sliderWrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: initial;
}

.sliderOuter {
  margin: 0 2em;
  overflow: hidden;
  position: relative;
}

.sliderWrap ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  width: 99999999px;
}
.sliderWrap ul li {
  display: inline-block;
  margin: 0;
}
.sliderOuter img {
  border: 1px solid transparent;
  margin: 3px;
  vertical-align: baseline;
  padding: 3px;
  visibility: hidden;
}
.sliderImageBorder .sliderOuter img {
  border: 1px solid gray;
}
.sliderWrap .sliderPlaceholder {
  visibility: hidden;

  /* tmp, testing */
  display: none;
}

.slider-left,
.slider-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2em;
  margin: auto;
  display: none;
}
.slider-left {
  left: 0;
}
.slider-right {
  right: 0;
}

.slider-left img,
.slider-right img {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  background: white;
  opacity: 0.9;
  padding-top: 1em;
  padding-bottom: 1em;
}
.slider-left img {
  left: 0;
  padding-right: 0.5em;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.slider-right img {
  right: 0;
  padding-left: 0.5em;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.sliderImageBorder.sliderActiveBorder .activeLI img,
.sliderWrap ul li:hover a img {
  border: 1px solid #0f75bc;
}

.sliderImageBorder .sliderOuter img:hover {
  border: 1px solid #0f75bc;
  cursor: pointer;
}

/**************************           Caption Styles     ******************************/

/* inset caption styles used in gallery */
.jsGallery .insetCaption {
  background: #999;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgb(0, 0, 0) transparent;
  /* RGBa with 0.6 opacity */
  background: rgba(0, 0, 0, 0.3);
  bottom: 0px;
  color: white;
  padding-bottom: 1.5%;
  padding-top: 1.5%;
  position: absolute;
  text-align: center;
  display: none;
  left: 0;
  right: 0;
}
.jsGallery .activeSlide .insetCaption {
  display: inline-block;
}

.jsGallery .insetCaption * {
  color: white;
}

.jsGallery .activeSlide > a {
	position: absolute;
	top: 0;
	bottom:0;
	right:0;
	left:0;
	z-index: 1;
	cursor: zoom-in;
}