/* 
	Important:

	Make sure you are working in the sjm-gallery-theme.less file and compiling into sjm-gallery-theme.css file. If you make changes to sjm-gallery-theme.css your changes will be lost the next time someone recompiles from the less file.

*/
/* Base Styles, can be overridden by theme */
#sjm-gallery-overlay {
  /* Make background color black */
  background: #000;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  /* Reset list item styles */
  /* Reset anchor styles */
  /* Generic flexslider styles */
  /*Buttons */
  /* Main */
  /* Aside */
  /** Mobile bar **/
  /* Retina Media Query */
}
#sjm-gallery-overlay ul,
#sjm-gallery-overlay ol,
#sjm-gallery-overlay ul li,
#sjm-gallery-overlay ol li {
  margin: 0px;
  padding: 0px;
  position: static;
}
#sjm-gallery-overlay a,
#sjm-gallery-overlay a:hover,
#sjm-gallery-overlay a:active,
#sjm-gallery-overlay a:visited {
  text-decoration: none;
}
#sjm-gallery-overlay .flexslider {
  /* Remove default styling of flexslider */
  background: none;
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0;
}
#sjm-gallery-overlay .flexslider .flex-viewport li > a {
  /* Make anchors block level elements */
  display: block;
  height: 100%;
  width: 100%;
  cursor: default;
}
#sjm-gallery-overlay .flexslider .flex-viewport li > a img {
  display: block;
  max-width: 100%;
  /* Make sure IE 8 gives images height */
  width: auto;
  height: auto;
}
#sjm-gallery-overlay .flexslider .flex-control-nav li {
  /* Hide control nav by default, since we can't use JS to toggle it off due to
				flexslider bug 460. */
  display: none;
  /* Pad out control nav */
  padding: 4px;
}
#sjm-gallery-overlay .flexslider .flex-control-nav li a {
  /* Set default color of control nav dots */
  background: #DDD;
  background: rgba(255, 255, 255, 0.6);
}
#sjm-gallery-overlay .flexslider .flex-control-nav li a.flex-active {
  /* Set active color of control nav dots */
  background: #FFF;
  background: #ffffff;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav a:before {
  color: white;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav a:hover:before {
  color: #ffcc00;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a {
  /* Override default flexslider styling to 
					make direction nav arrows visible at all times */
  opacity: 1 !important;
  /* Remove default flexslider transitions */
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
  /* Set line height of anchor tag so it is centered vertically */
  line-height: 40px;
  /* Should capture mouse events */
  pointer-events: all;
  /* Whether or not the flexslider is hovered, override the default flexslider
				styling that changes the position of the direction nav arrows */
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-disabled {
  /* When it's not possible to advance or return slides,
					 make direction nav arrows hidden and not clickable */
  opacity: 0!important;
  pointer-events: none;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-prev:before,
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-next:before {
  font-family: 'FontAwesome' !important;
  content: "\f053";
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-next:before {
  content: "\f054";
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-prev {
  left: 20px;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-prev:hover {
  left: 20px;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-next {
  right: 20px;
}
#sjm-gallery-overlay .flexslider .flex-direction-nav li a.flex-next:hover {
  right: 20px;
}
#sjm-gallery-overlay .sjm-gallery-close-gallery a,
#sjm-gallery-overlay .sjm-gallery-return-to-article a,
#sjm-gallery-overlay .sjm-gallery-post-link a,
#sjm-gallery-overlay #sjm-gallery-mobile-direction-nav a {
  /* background:url('@{image-path}/sprite.png') no-repeat top left; */
  color: white;
}
#sjm-gallery-overlay .sjm-gallery-close-gallery a:hover,
#sjm-gallery-overlay .sjm-gallery-return-to-article a:hover,
#sjm-gallery-overlay .sjm-gallery-post-link a:hover,
#sjm-gallery-overlay #sjm-gallery-mobile-direction-nav a:hover {
  color: #ffcc00;
}
#sjm-gallery-overlay .sjm-gallery-close-gallery a {
  color: #999;
}
#sjm-gallery-overlay .sjm-gallery-main {
  /* Slider Flexslider */
  /* Carousel Flexslider */
}
#sjm-gallery-overlay .sjm-gallery-main .sjm-gallery-header {
  margin: 0 20px;
}
#sjm-gallery-overlay .sjm-gallery-main .sjm-gallery-header .sjm-gallery-post-link {
  /* Setup font */
  font-size: 22px;
  line-height: 24px;
  font-weight: bold;
}
#sjm-gallery-overlay .sjm-gallery-main .sjm-gallery-header .sjm-gallery-post-link a {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper {
  /* Give it some breathing room */
  margin: 0 20px;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider {
  /* For fade animation */
  /*                        & > ul {

                    li {

                        img {

                            margin:0 auto;

                        }
                    }

                    li>a {

                        img {
                            display: block;
                            max-width:100%;    
                            width: auto;
                            height:auto;
                        }

                    }
                }*/
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li {
  position: relative;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li img {
  margin: 0 auto;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li .sjm-gallery-slide-caption-wrapper {
  display: none;
  color: #D9D9D9;
  background: #333333;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li .sjm-gallery-slide-caption-wrapper a.sjm-gallery-slide-caption-toggle span {
  font-size: 12px;
  text-align: center;
  padding: 5px;
  color: #D9D9D9;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li .sjm-gallery-slide-caption-wrapper .sjm-gallery-slide-caption {
  padding: 10px;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li .sjm-gallery-slide-caption-wrapper .sjm-gallery-slide-caption .sjm-gallery-slide-caption-title {
  font-size: 16px;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-slider-wrapper #sjm-gallery-slider.flexslider .flex-viewport ul li .sjm-gallery-slide-caption-wrapper .sjm-gallery-slide-caption .sjm-gallery-slide-caption-description {
  font-size: 12px;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-carousel-wrapper #sjm-gallery-carousel.flexslider .flex-viewport ul li {
  /* make default thumbnails semi-transparent */
  opacity: 0.5;
  -moz-opacity: 0.50;
  filter: alpha(opacity=50);
  /* Setup transition */
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-carousel-wrapper #sjm-gallery-carousel.flexslider .flex-viewport ul li.flex-active-slide {
  /* Transition the thumbnail opacity when active */
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-carousel-wrapper #sjm-gallery-carousel.flexslider .flex-direction-nav li a.flex-prev {
  margin-left: -60px;
  margin-top: -16px;
}
#sjm-gallery-overlay .sjm-gallery-main #sjm-gallery-carousel-wrapper #sjm-gallery-carousel.flexslider .flex-direction-nav li a.flex-next {
  margin-right: -60px;
  margin-top: -16px;
}
#sjm-gallery-overlay .sjm-gallery-aside {
  background: #333;
  color: #D9D9D9;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container ul.sjm-gallery-tools li {
  list-style: none;
  border-bottom: 1px solid #D9D9D9;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container ul.sjm-gallery-tools li.sjm-gallery-return-to-article span,
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container ul.sjm-gallery-tools li.sjm-gallery-view-thumbnails span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  padding-left: 5px;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container ul.sjm-gallery-tools li a {
  display: block;
  /* Make space for tool icons */
  padding-left: 5px;
  opacity: 1.0;
  /* Set font style for tools list items */
  font-size: 11px;
  text-transform: uppercase;
  line-height: 32px;
  height: 32px;
  /* Hide any overflow, since it doesn't look good breaking to next line */
  overflow: hidden;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container .sjm-gallery-aside-content .sjm-gallery-slide-title-holder {
  /* Set font style for slide title in sidebar */
  font-size: 20px;
  font-weight: bold;
  line-height: 25px;
  padding-left: 5px;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container .sjm-gallery-aside-content .sjm-gallery-slide-title-holder .sjm-gallery-slide-title {
  /* Set font weight */
  font-weight: 200;
  word-wrap: break-word;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container .sjm-gallery-aside-content .sjm-gallery-slide-description {
  font-size: 13px;
  line-height: 18px;
}
#sjm-gallery-overlay .sjm-gallery-aside .sjm-gallery-aside-container .sjm-gallery-aside-content .sjm-gallery-slide-caption-wrapper {
  /* Set caption font */
  font-size: 14px;
  color: #afafaf;
}
#sjm-gallery-overlay #sjm-gallery-mobile-direction-nav {
  opacity: 0.8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #sjm-gallery-overlay {
    /*.sjm-gallery-aside .sjm-gallery-aside-container ul.sjm-gallery-tools li a,*/
    /* .sjm-gallery-close-gallery a  { */
    /* background-image:url('@{image-path}/sprite@2x.png'); */
    /* background-size: 64px 32px; */
    /* } */
  }
}
