/**
 * @file
 * Blur effect.
 *
 * While blurring animation impresses smoother transition, it is likely slow.
 * You can override this file, and change animation to just transition instead.
 */

/* Without transform, this is more of formality hooking into animation event.*/
@-webkit-keyframes blazyBlur {
  from {
    opacity: .3;
  }

  to {
    opacity: 1;
  }
}

@keyframes blazyBlur {
  from {
    opacity: .3;
  }

  to {
    opacity: 1;
  }
}

/**
 * Js dynamic classes during animation to match animate.css convention.
 */
.animated.blur img:not(.b-blur) {
  /* transition: opacity 500ms ease-in-out; */
  transition: none;
  /* The blurred image is not this actual image. */
  -webkit-animation: blazyBlur 1s;
  animation: blazyBlur 1s;
}

/* Supports reduced motion. */
@media (print), (prefers-reduced-motion: reduce) {
  .animated.blur img:not(.b-blur) {
    -webkit-animation-duration: 1ms !important; /* csslint allow: known-properties, important */
    animation-duration: 1ms !important; /* csslint allow: known-properties, important */
    -webkit-transition-duration: 1ms !important; /* csslint allow: known-properties, important */
    transition-duration: 1ms !important; /* csslint allow: known-properties, important */
    -webkit-animation-iteration-count: 1 !important; /* csslint allow: known-properties, important */
    animation-iteration-count: 1 !important; /* csslint allow: known-properties, important */
  }

  .media--fx-lg .b-blur {
    filter: blur(1px);
    opacity: .9;
  }
}
/**
 * @file
 * Block grid based on Foundation 5.
 *
 * This is a modified version to be re-usable for divities, not only UL/OL list,
 * as long as the list item has class "grid".
 */

.block-grid,
.blazy.block-grid,
.item-list > .block-grid {
  clear: both;
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 -0.625rem;
}

.block-grid::before,
.block-grid::after {
  content: " ";
  display: table;
}

.block-grid::after {
  clear: both;
}

.block-grid > .grid {
  display: block;
  float: left;
  height: auto;
  list-style: none;
  margin: 0;
  padding: 0 0.625rem 1.25rem;
}

.block-grid.block-grid--centered,
.item-list > .block-grid.block-grid--centered {
  text-align: center;
}

.block-grid.block-grid--centered > .grid,
.item-list > .block-grid.block-grid--centered > .grid {
  text-align: left;
  display: inline-block;
  float: none;
  vertical-align: top;
}

.block-grid .grid__content {
  position: relative;
}

@media only screen {
  .small-block-grid-1 > .grid {
    width: 100%;
  }

  .small-block-grid-2 > .grid {
    width: 50%;
  }

  .small-block-grid-3 > .grid {
    width: 33.33333%;
  }

  .small-block-grid-4 > .grid {
    width: 25%;
  }

  .small-block-grid-5 > .grid {
    width: 20%;
  }

  .small-block-grid-6 > .grid {
    width: 16.66667%;
  }

  .small-block-grid-7 > .grid {
    width: 14.28571%;
  }

  .small-block-grid-8 > .grid {
    width: 12.5%;
  }

  .small-block-grid-9 > .grid {
    width: 11.11111%;
  }

  .small-block-grid-10 > .grid {
    width: 10%;
  }

  .small-block-grid-11 > .grid {
    width: 9.09091%;
  }

  .small-block-grid-12 > .grid {
    width: 8.33333%;
  }

  .small-block-grid-1 > .grid:nth-of-type(1n),
  .small-block-grid-2 > .grid:nth-of-type(1n),
  .small-block-grid-3 > .grid:nth-of-type(1n),
  .small-block-grid-4 > .grid:nth-of-type(1n),
  .small-block-grid-5 > .grid:nth-of-type(1n),
  .small-block-grid-6 > .grid:nth-of-type(1n),
  .small-block-grid-8 > .grid:nth-of-type(1n),
  .small-block-grid-7 > .grid:nth-of-type(1n),
  .small-block-grid-9 > .grid:nth-of-type(1n),
  .small-block-grid-10 > .grid:nth-of-type(1n),
  .small-block-grid-11 > .grid:nth-of-type(1n),
  .small-block-grid-12 > .grid:nth-of-type(1n) {
    clear: none;
  }

  .small-block-grid-1 > .grid:nth-of-type(1n+1),
  .small-block-grid-2 > .grid:nth-of-type(2n+1),
  .small-block-grid-3 > .grid:nth-of-type(3n+1),
  .small-block-grid-4 > .grid:nth-of-type(4n+1),
  .small-block-grid-5 > .grid:nth-of-type(5n+1),
  .small-block-grid-6 > .grid:nth-of-type(6n+1),
  .small-block-grid-7 > .grid:nth-of-type(7n+1),
  .small-block-grid-8 > .grid:nth-of-type(8n+1),
  .small-block-grid-9 > .grid:nth-of-type(9n+1),
  .small-block-grid-10 > .grid:nth-of-type(10n+1),
  .small-block-grid-11 > .grid:nth-of-type(11n+1),
  .small-block-grid-12 > .grid:nth-of-type(12n+1) {
    clear: both;
  }
}

/** 641px with 16px base font. */
@media only screen and (min-width: 40.063em) {
  .medium-block-grid-1 > .grid {
    width: 100%;
  }

  .medium-block-grid-2 > .grid {
    width: 50%;
  }

  .medium-block-grid-3 > .grid {
    width: 33.33333%;
  }

  .medium-block-grid-4 > .grid {
    width: 25%;
  }

  .medium-block-grid-5 > .grid {
    width: 20%;
  }

  .medium-block-grid-6 > .grid {
    width: 16.66667%;
  }

  .medium-block-grid-7 > .grid {
    width: 14.28571%;
  }

  .medium-block-grid-8 > .grid {
    width: 12.5%;
  }

  .medium-block-grid-9 > .grid {
    width: 11.11111%;
  }

  .medium-block-grid-10 > .grid {
    width: 10%;
  }

  .medium-block-grid-11 > .grid {
    width: 9.09091%;
  }

  .medium-block-grid-12 > .grid {
    width: 8.33333%;
  }

  .medium-block-grid-1 > .grid:nth-of-type(1n),
  .medium-block-grid-2 > .grid:nth-of-type(1n),
  .medium-block-grid-3 > .grid:nth-of-type(1n),
  .medium-block-grid-4 > .grid:nth-of-type(1n),
  .medium-block-grid-5 > .grid:nth-of-type(1n),
  .medium-block-grid-6 > .grid:nth-of-type(1n),
  .medium-block-grid-7 > .grid:nth-of-type(1n),
  .medium-block-grid-8 > .grid:nth-of-type(1n),
  .medium-block-grid-9 > .grid:nth-of-type(1n),
  .medium-block-grid-10 > .grid:nth-of-type(1n),
  .medium-block-grid-11 > .grid:nth-of-type(1n),
  .medium-block-grid-12 > .grid:nth-of-type(1n) {
    clear: none;
  }

  .medium-block-grid-1 > .grid:nth-of-type(1n+1),
  .medium-block-grid-2 > .grid:nth-of-type(2n+1),
  .medium-block-grid-3 > .grid:nth-of-type(3n+1),
  .medium-block-grid-4 > .grid:nth-of-type(4n+1),
  .medium-block-grid-5 > .grid:nth-of-type(5n+1),
  .medium-block-grid-6 > .grid:nth-of-type(6n+1),
  .medium-block-grid-7 > .grid:nth-of-type(7n+1),
  .medium-block-grid-8 > .grid:nth-of-type(8n+1),
  .medium-block-grid-9 > .grid:nth-of-type(9n+1),
  .medium-block-grid-10 > .grid:nth-of-type(10n+1),
  .medium-block-grid-11 > .grid:nth-of-type(11n+1),
  .medium-block-grid-12 > .grid:nth-of-type(12n+1) {
    clear: both;
  }
}

/** 1025px with 16px base font. */
@media only screen and (min-width: 64.063em) {
  .large-block-grid-1 > .grid {
    width: 100%;
  }

  .large-block-grid-2 > .grid {
    width: 50%;
  }

  .large-block-grid-3 > .grid {
    width: 33.33333%;
  }

  .large-block-grid-4 > .grid {
    width: 25%;
  }

  .large-block-grid-5 > .grid {
    width: 20%;
  }

  .large-block-grid-6 > .grid {
    width: 16.66667%;
  }

  .large-block-grid-7 > .grid {
    width: 14.28571%;
  }

  .large-block-grid-8 > .grid {
    width: 12.5%;
  }

  .large-block-grid-9 > .grid {
    width: 11.11111%;
  }

  .large-block-grid-10 > .grid {
    width: 10%;
  }

  .large-block-grid-11 > .grid {
    width: 9.09091%;
  }

  .large-block-grid-12 > .grid {
    width: 8.33333%;
  }

  .large-block-grid-1 > .grid:nth-of-type(1n),
  .large-block-grid-2 > .grid:nth-of-type(1n),
  .large-block-grid-3 > .grid:nth-of-type(1n),
  .large-block-grid-4 > .grid:nth-of-type(1n),
  .large-block-grid-5 > .grid:nth-of-type(1n),
  .large-block-grid-6 > .grid:nth-of-type(1n),
  .large-block-grid-7 > .grid:nth-of-type(1n),
  .large-block-grid-8 > .grid:nth-of-type(1n),
  .large-block-grid-9 > .grid:nth-of-type(1n),
  .large-block-grid-10 > .grid:nth-of-type(1n),
  .large-block-grid-11 > .grid:nth-of-type(1n),
  .large-block-grid-12 > .grid:nth-of-type(1n) {
    clear: none;
  }

  .large-block-grid-1 > .grid:nth-of-type(1n+1),
  .large-block-grid-2 > .grid:nth-of-type(2n+1),
  .large-block-grid-3 > .grid:nth-of-type(3n+1),
  .large-block-grid-4 > .grid:nth-of-type(4n+1),
  .large-block-grid-5 > .grid:nth-of-type(5n+1),
  .large-block-grid-6 > .grid:nth-of-type(6n+1),
  .large-block-grid-7 > .grid:nth-of-type(7n+1),
  .large-block-grid-8 > .grid:nth-of-type(8n+1),
  .large-block-grid-9 > .grid:nth-of-type(9n+1),
  .large-block-grid-10 > .grid:nth-of-type(10n+1),
  .large-block-grid-11 > .grid:nth-of-type(11n+1),
  .large-block-grid-12 > .grid:nth-of-type(12n+1) {
    clear: both;
  }
}
/**
 * @file
 * The CSS and class names below are based on Slick media for easy migration.
 */

/**
 * Aspect ratio element wrapper. So can use dynamic/fluid ratio via JS which is
 * not possible using ::pseudo selector approach.
 */
.media.media--ratio {
  display: block;
  height: 0;
  /* Fixed for overflowing video with hard-coded width like lightboxes. */
  max-width: 100%;
  min-height: 1px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Trying to be nice to minimize abrupt changes. */
.media--ratio.is-b-loaded {
  transition: padding-bottom .2s;
}

/* 1:1 ratio */
.media--ratio--11 {
  padding-bottom: 100%;
}

/* 3:2 ratio */
.media--ratio--32 {
  padding-bottom: 66.66%;
}

/* 4:3 ratio */
.media--ratio--43 {
  padding-bottom: 75%;
}

/* 8:5 ratio */
.media--ratio--85 {
  padding-bottom: 62.5%;
}

/* 16:9 ratio */
.media--ratio--169 {
  padding-bottom: 56.25%;
}
