.ironic {
  font-family: 'Roboto-Light', sans-serif;
}
.ironic .mmg-img {
  overflow: hidden;
}
.ironic .mmg-caption-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.ironic .mmg-caption-wrapper > span {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.ironic .mmg-f-caption {
  display: inline-block;
  position: relative;
  height: auto;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
.ironic .mmg-descr,
.ironic .mmg-footer,
.ironic .mmg-title {
  position: relative;
  letter-spacing: 1px;
  color: white;
  margin: 10px;
  opacity: 0;
  -webkit-transition: 200ms;
  transition: 200ms;
}
.ironic .mmg-title {
  position: relative;
  color: white;
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 14px;
  margin-top: 14px;
  font-size: 20px;
}
.ironic .mmg-descr {
  font-size: 16px;
  letter-spacing: 1px;
}
.ironic .mmg-middle .mmg-descr {
  font-size: 14px;
}
.ironic .mmg-middle .mmg-title {
  font-size: 18px;
}
.ironic .mmg-small .mmg-descr {
  display: none;
}
.ironic .mmg-small .mmg-title {
  font-size: 12px;
}
.ironic .mmg-footer {
  font-size: 11px;
  letter-spacing: 1px;
}
.ironic .mmg-hover .mmg-descr,
.ironic .mmg-hover .mmg-footer,
.ironic .mmg-hover .mmg-title {
  opacity: 1;
}
.ironic .mmg-from-top .mmg-caption-wrapper {
  -webkit-animation-name: from-top;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-top;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-top .mmg-f-caption {
  -webkit-animation-name: from-top;
  -webkit-animation-duration: 400ms;
  -webkit-animation-delay: 200ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-top;
  animation-duration: 400ms;
  animation-delay: 200ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-bottom .mmg-caption-wrapper {
  -webkit-animation-name: from-bottom;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-bottom;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-bottom .mmg-f-caption {
  -webkit-animation-name: from-bottom;
  -webkit-animation-duration: 400ms;
  -webkit-animation-delay: 200ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-bottom;
  animation-duration: 400ms;
  animation-delay: 200ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-left .mmg-caption-wrapper {
  -webkit-animation-name: from-left;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-left;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-left .mmg-f-caption {
  -webkit-animation-name: from-left;
  -webkit-animation-duration: 400ms;
  -webkit-animation-delay: 200ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-left;
  animation-duration: 400ms;
  animation-delay: 200ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-right .mmg-caption-wrapper {
  -webkit-animation-name: from-right;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-right;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-from-right .mmg-f-caption {
  -webkit-animation-name: from-right;
  -webkit-animation-duration: 400ms;
  -webkit-animation-delay: 200ms;
  -webkit-animation-fill-mode: both;
  animation-name: from-right;
  animation-duration: 400ms;
  animation-delay: 200ms;
  animation-fill-mode: both;
}
.ironic .mmg-to-top .mmg-caption-wrapper {
  -webkit-animation-name: to-top;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: to-top;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-to-bottom .mmg-caption-wrapper {
  -webkit-animation-name: to-bottom;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: to-bottom;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-to-left .mmg-caption-wrapper {
  -webkit-animation-name: to-left;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: to-left;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic .mmg-to-right .mmg-caption-wrapper {
  -webkit-animation-name: to-right;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-name: to-right;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.ironic.mmg-ie9 .mmg-caption-wrapper,
.ironic.mmg-ie8 .mmg-caption-wrapper {
  transform: none;
  top: -100%;
  left: -100%;
}
.ironic.mmg-ie8 img {
  border-width: 0;
}
.ironic.mmg-ie8 .mmg-caption-wrapper {
  background-color: black;
}
@-webkit-keyframes from-top {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: none;
  }
}
@keyframes from-top {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: none;
  }
}
@-webkit-keyframes to-top {
  from {
    -webkit-transform: none;
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
  }
}
@keyframes to-top {
  from {
    transform: none;
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes from-bottom {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: none;
  }
}
@keyframes from-bottom {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: none;
  }
}
@-webkit-keyframes to-bottom {
  from {
    -webkit-transform: none;
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
  }
}
@keyframes to-bottom {
  from {
    transform: none;
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes from-left {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: none;
  }
}
@keyframes from-left {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: none;
  }
}
@-webkit-keyframes to-left {
  from {
    -webkit-transform: none;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}
@keyframes to-left {
  from {
    transform: none;
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes from-right {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: none;
  }
}
@keyframes from-right {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: none;
  }
}
@-webkit-keyframes to-right {
  from {
    -webkit-transform: none;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
  }
}
@keyframes to-right {
  from {
    transform: none;
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}