/*
 * Breakpoint mixin. See: http://css-tricks.com/conditional-media-query-mixins/
 *
 * Use:
 * .row {
 *  @include bp(mobile, min) {
 *    //mobile styles
 *  };
 * }
 *
 * Breakpoints are set in _config.scss e.g. $bp1
 */
.mobile-only {
  display: none;
}
@media (max-width: 37.625em) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 37.625em) {
  .hidden-on-mobile {
    display: none !important;
  }
}

/**
 * Mixins for doing CSS3 cross-browser stuff:
 */
/**
 * Special grayscale mixin to support IE rather than using
 *	@include filter(grayscale(100%)) 
 * which IE does not support
*/
#gallery-teasers {
  margin: 3em 0 2em;
  position: relative;
}

#gallery-teasers > .gallery-teaser {
  float: left;
  margin-bottom: 1em;
  margin-left: 3.0837004405%;
  position: relative;
  width: 31.2775330396%;
}

/* CSS3 only but Javascript in GalleryHolder.js acts as backup */
#gallery-teasers > .gallery-teaser:nth-child(3n+1) {
  margin-left: 0;
}

#gallery-teasers img {
  display: block;
  margin: 0;
}

#gallery-teasers .caption {
  bottom: 0;
  position: absolute;
  width: 100%;
}

#gallery-teasers .caption-inner {
  color: #FFF;
  line-height: 1.5em;
  padding: 0 0.5em;
}