/* == Images == */
.wojo.image {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  background-color: transparent;
}
img.wojo.image {
  display: block;
}
.wojo.image svg,
.wojo.image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.wojo.inline.image,
.wojo.inline.image svg,
.wojo.inline.image img {
  display: inline-block;
}
/* == Variations == */
.wojo.rounded.images .image,
.wojo.rounded.images img,
.wojo.rounded.image img,
.wojo.rounded.image svg,
.wojo.rounded.image {
  border-radius: var(--radius);
}
.wojo.rounded.left.images .image,
.wojo.rounded.left.images img,
.wojo.rounded.left.image img,
.wojo.rounded.left.image svg,
.wojo.rounded.left.image {
  border-radius: var(--radius) 0 0 var(--radius);
}
.wojo.rounded.right.images .image,
.wojo.rounded.right.images img,
.wojo.rounded.right.image img,
.wojo.rounded.right.image svg,
.wojo.rounded.right.image {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wojo.circular.images .image,
.wojo.circular.images img,
.wojo.circular.image img,
.wojo.circular.image svg,
.wojo.circular.image {
  border-radius: 500rem;
  overflow: hidden;
}
.wojo.shadow.images .image,
.wojo.shadow.images img,
.wojo.shadow.image img,
.wojo.shadow.image svg,
.wojo.shadow.image {
  box-shadow: 0px 2px 3px var(--dark-color-shadow);
}
.wojo.boxed.images .image,
.wojo.boxed.images img,
.wojo.boxed.image img,
.wojo.boxed.image svg,
.wojo.boxed.image {
  border: 1px solid var(--light-color);
}
.wojo.framed.images .image,
.wojo.framed.images img,
.wojo.framed.image img,
.wojo.framed.image svg,
.wojo.framed.image {
  border: 1px solid var(--light-color);
  padding: 1rem;
}
.wojo.avatar.images .image,
.wojo.avatar.images img,
.wojo.avatar.images svg,
.wojo.avatar.image img,
.wojo.avatar.image svg,
.wojo.avatar.image {
  width: 3em;
  height: 3em;
  border-radius: 500rem;
}
.wojo.category.images .image,
.wojo.category.images img,
.wojo.category.image img,
.wojo.category.image {
  width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 2rem;
  box-sizing: content-box;
  font-size: .875rem;
  border-radius: 500rem;
  box-shadow: 0 4px 6px rgba(50,50,93,.1), 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid #fff;
}
/* == Position == */
.wojo.center.image {
  margin: 0 auto;
  display: block;
}
/* == Description == */
.wojo.image.description {
  position: relative;
}
.wojo.image.description p {
  position: absolute;
  padding: 1rem;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background: var(--dark-color-shadow);
}
/* == Hover == */
.wojo.hover {
  position: relative;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: all 0.35s ease;
}
.wojo.hover::before,
.wojo.hover::after {
  box-sizing: border-box;
  transition: all .35s ease;
}
.wojo.hover figcaption {
  padding: 1.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 1;
}
.wojo.hover:hover figcaption {
  opacity: 1;
  transition: all 0.35s ease;
}
.wojo.hover:hover > img {
  opacity: 0;
  transition: all 0.35s ease;
}
.wojo.hover:hover > img,
.wojo.hover:hover figcaption {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all 0.35s ease;
}
.wojo.image.lightbox span.viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  line-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #377dff;
  border-radius: 50%;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.wojo.image.lightbox span.viewer .icon {
  line-height: 2.5rem;
}
.wojo.image.lightbox:hover span.viewer {
  opacity: 1;
  visibility: visible;
}
.wojo.image.cover {
  height: 100vh;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.wojo.image.fill {
  height: 100vh;
  width: 100%;
  -o-object-fit: fill;
  object-fit: fill;
}
.wojo.hero.image {
  min-height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
}
.wojo.hero.image::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
  background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
  background-repeat: repeat-x;
  border-radius: var(--radius);
  -webkit-transition: opacity 0.45s;
  transition: opacity 0.45s;
}
.wojo.hero.image:hover::before {
  background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
  background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
  opacity: 0;
}
/* == Size == */
.wojo.mime.images .image,
.wojo.mime.images img,
.wojo.mime.images svg,
.wojo.mime.image {
  padding: .5rem;
  text-align: center;
  display: inline-flex;
}
.wojo.tiny.images .image,
.wojo.tiny.images img,
.wojo.tiny.images svg,
.wojo.tiny.image {
  width: 24px;
}
.wojo.mini.images .image,
.wojo.mini.images img,
.wojo.mini.images svg,
.wojo.mini.image {
  width: 32px;
}
.wojo.default.images .image,
.wojo.default.images img,
.wojo.default.images svg,
.wojo.default.image {
  width: 48px;
}
.wojo.small.images .image,
.wojo.small.images img,
.wojo.small.images svg,
.wojo.small.image {
  width: 64px;
}
.wojo.notification.images img,
.wojo.notification.images svg,
.wojo.notification.image {
  width: 96px;
}
.wojo.badge.images .image,
.wojo.badge.images img,
.wojo.badge.images svg,
.wojo.badge.image {
  width: 112px;
}
.wojo.normal.images .image,
.wojo.normal.images img,
.wojo.normal.images svg,
.wojo.normal.image {
  width: 128px;
}
.wojo.medium.images .image,
.wojo.medium.images img,
.wojo.medium.images svg,
.wojo.medium.image {
  width: 160px;
}
.wojo.large.images .image,
.wojo.large.images img,
.wojo.large.images svg,
.wojo.large.image {
  width: 256px;
}
.wojo.big.images .image,
.wojo.big.images img,
.wojo.big.images svg,
.wojo.big.image {
  width: 448px;
}
.wojo.huge.images .image,
.wojo.huge.images img,
.wojo.huge.images svg,
.wojo.huge.image {
  width: 512px;
}
.wojo.massive.images .image,
.wojo.massive.images img,
.wojo.massive.images svg,
.wojo.massive.image {
  width: 640px;
}
.wojo.fluid.image,
.wojo.fluid.image img,
.wojo.fluid.image svg,
.wojo.fluid.images,
.wojofluid.images img,
.wojo.fluid.images svg {
  display: block;
  width: 100%;
  height: auto;
}
