/* Jltma Image Hover Effects */
.jltma-image-hover-effect figure {
  background: #3085a3;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  width: -webkit-fill-available;
}
.jltma-image-hover-effect figure img {
  height: auto;
  max-width: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
}
.jltma-image-hover-effect figure figcaption {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 1em;
  position: absolute;
  text-transform: uppercase;
  backface-visibility: hidden;
}
.jltma-image-hover-effect figure figcaption::before, .jltma-image-hover-effect figure figcaption::after {
  content: "";
  pointer-events: none;
  position: absolute;
}
.jltma-image-hover-effect figure figcaption .jltma-fancybox svg {
  width: 25px;
  height: 25px;
  position: absolute;
  z-index: 999;
  fill: #fff;
  right: 15px;
  top: 0;
}
.jltma-image-hover-effect figure h1,
.jltma-image-hover-effect figure h2,
.jltma-image-hover-effect figure h3,
.jltma-image-hover-effect figure h4,
.jltma-image-hover-effect figure h5,
.jltma-image-hover-effect figure h6,
.jltma-image-hover-effect figure span,
.jltma-image-hover-effect figure p {
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
}
.jltma-image-hover-effect figure h2 {
  font-size: 2.5rem;
  word-spacing: -0.15em;
}
.jltma-image-hover-effect figure span {
  text-align: center;
}
.jltma-image-hover-effect figure p {
  font-size: 15px;
  letter-spacing: 1px;
}

.icon-eye::before {
  content: "\e000";
}

.icon-paper-clip::before {
  content: "\e001";
}

.icon-heart::before {
  content: "\e024";
}

/* Individual effects */
figure.jltma-effect-sadie img,
figure.jltma-effect-roxy img,
figure.jltma-effect-milo img,
figure.jltma-effect-sarah img {
  max-width: none;
  width: calc(100% + 50px);
  transition: opacity 0.35s, transform 0.35s;
}
figure.jltma-effect-sadie:hover img,
figure.jltma-effect-roxy:hover img,
figure.jltma-effect-milo:hover img,
figure.jltma-effect-sarah:hover img {
  transform: translate3d(0, 0, 0);
}

/* Jltma Creative Links End */
.ma-image-hover-read-more {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***** Lily *****/
figure.jltma-effect-lily img {
  opacity: 0.7;
}
figure.jltma-effect-lily figcaption > div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  height: 50%;
}
figure.jltma-effect-lily figcaption h1,
figure.jltma-effect-lily figcaption h2,
figure.jltma-effect-lily figcaption h3,
figure.jltma-effect-lily figcaption h4,
figure.jltma-effect-lily figcaption h5,
figure.jltma-effect-lily figcaption h6,
figure.jltma-effect-lily figcaption span,
figure.jltma-effect-lily figcaption p {
  text-align: left;
  transform: translate3d(0, 40px, 0);
}
figure.jltma-effect-lily figcaption h1,
figure.jltma-effect-lily figcaption h2,
figure.jltma-effect-lily figcaption h3,
figure.jltma-effect-lily figcaption h4,
figure.jltma-effect-lily figcaption h5,
figure.jltma-effect-lily figcaption h6,
figure.jltma-effect-lily figcaption span {
  transition: transform 0.35s;
}
figure.jltma-effect-lily figcaption p {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.2s, transform 0.35s;
}
figure.jltma-effect-lily:hover img,
figure.jltma-effect-lily:hover p {
  opacity: 1;
}
figure.jltma-effect-lily:hover h1,
figure.jltma-effect-lily:hover h2,
figure.jltma-effect-lily:hover h3,
figure.jltma-effect-lily:hover h4,
figure.jltma-effect-lily:hover h5,
figure.jltma-effect-lily:hover h6,
figure.jltma-effect-lily:hover span,
figure.jltma-effect-lily:hover p {
  transform: translate3d(0, 0, 0);
}
figure.jltma-effect-lily:hover p {
  transition-delay: 0.05s;
  transition-duration: 0.35s;
}

/***** Sadie *****/
figure.jltma-effect-sadie img {
  transform: translate3d(-40px, 0, 0);
}
figure.jltma-effect-sadie figcaption::before {
  background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 50%, 0);
}
figure.jltma-effect-sadie figcaption h1,
figure.jltma-effect-sadie figcaption h2,
figure.jltma-effect-sadie figcaption h3,
figure.jltma-effect-sadie figcaption h4,
figure.jltma-effect-sadie figcaption h5,
figure.jltma-effect-sadie figcaption h6,
figure.jltma-effect-sadie figcaption span {
  color: #484c61;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate3d(0, -50%, 0);
  transition: transform 0.35s, color 0.35s;
}
figure.jltma-effect-sadie figcaption::before,
figure.jltma-effect-sadie figcaption p {
  transition: opacity 0.35s, transform 0.35s;
}
figure.jltma-effect-sadie figcaption p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
figure.jltma-effect-sadie:hover h1,
figure.jltma-effect-sadie:hover h2,
figure.jltma-effect-sadie:hover h3,
figure.jltma-effect-sadie:hover h4,
figure.jltma-effect-sadie:hover h5,
figure.jltma-effect-sadie:hover h6,
figure.jltma-effect-sadie:hover span {
  color: #fff;
  transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}
figure.jltma-effect-sadie:hover figcaption::before,
figure.jltma-effect-sadie:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/***** Roxy *****/
figure.jltma-effect-roxy {
  background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
}
figure.jltma-effect-roxy img {
  transform: translate3d(-40px, 0, 0);
}
figure.jltma-effect-roxy figcaption {
  padding: 3em;
  text-align: left;
}
figure.jltma-effect-roxy figcaption::before {
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-20px, 0, 0);
}
figure.jltma-effect-roxy figcaption h1,
figure.jltma-effect-roxy figcaption h2,
figure.jltma-effect-roxy figcaption h3,
figure.jltma-effect-roxy figcaption h4,
figure.jltma-effect-roxy figcaption h5,
figure.jltma-effect-roxy figcaption h6,
figure.jltma-effect-roxy figcaption span {
  padding: 30% 0 10px 0;
}
figure.jltma-effect-roxy figcaption p {
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-10px, 0, 0);
}
figure.jltma-effect-roxy:hover img {
  opacity: 0.7;
}
figure.jltma-effect-roxy:hover figcaption::before,
figure.jltma-effect-roxy:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/***** Bubba *****/
figure.jltma-effect-bubba {
  background: #9e5406;
}
figure.jltma-effect-bubba img {
  opacity: 0.7;
  transition: opacity 0.35s;
}
figure.jltma-effect-bubba figcaption::before, figure.jltma-effect-bubba figcaption::after {
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
}
figure.jltma-effect-bubba figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
}
figure.jltma-effect-bubba figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: scale(1, 0);
}
figure.jltma-effect-bubba figcaption::before, figure.jltma-effect-bubba figcaption::after,
figure.jltma-effect-bubba figcaption p {
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
}
figure.jltma-effect-bubba figcaption h1,
figure.jltma-effect-bubba figcaption h2,
figure.jltma-effect-bubba figcaption h3,
figure.jltma-effect-bubba figcaption h4,
figure.jltma-effect-bubba figcaption h5,
figure.jltma-effect-bubba figcaption h6,
figure.jltma-effect-bubba figcaption span {
  padding-top: 30%;
  transition: transform 0.35s;
  transform: translate3d(0, -20px, 0);
}
figure.jltma-effect-bubba figcaption p {
  padding: 20px 2.5em;
  transform: translate3d(0, 20px, 0);
}
figure.jltma-effect-bubba:hover img {
  opacity: 0.4;
}
figure.jltma-effect-bubba:hover figcaption::before, figure.jltma-effect-bubba:hover figcaption::after {
  opacity: 1;
  transform: scale(1);
}
figure.jltma-effect-bubba:hover figcaption h1,
figure.jltma-effect-bubba:hover figcaption h2,
figure.jltma-effect-bubba:hover figcaption h3,
figure.jltma-effect-bubba:hover figcaption h4,
figure.jltma-effect-bubba:hover figcaption h5,
figure.jltma-effect-bubba:hover figcaption h6,
figure.jltma-effect-bubba:hover figcaption span,
figure.jltma-effect-bubba:hover figcaption p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/***** Romeo *****/
figure.jltma-effect-romeo {
  perspective: 1000px;
}
figure.jltma-effect-romeo img {
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(0, 0, 300px);
}
figure.jltma-effect-romeo figcaption::before, figure.jltma-effect-romeo figcaption::after {
  top: 50%;
  left: 50%;
  width: 80%;
  height: 1px;
  background: #fff;
  opacity: 0.5;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-50%, -50%, 0);
}
figure.jltma-effect-romeo figcaption h1,
figure.jltma-effect-romeo figcaption h2,
figure.jltma-effect-romeo figcaption h3,
figure.jltma-effect-romeo figcaption h4,
figure.jltma-effect-romeo figcaption h5,
figure.jltma-effect-romeo figcaption h6,
figure.jltma-effect-romeo figcaption span,
figure.jltma-effect-romeo figcaption p {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transition: transform 0.35s;
}
figure.jltma-effect-romeo figcaption h1,
figure.jltma-effect-romeo figcaption h2,
figure.jltma-effect-romeo figcaption h3,
figure.jltma-effect-romeo figcaption h4,
figure.jltma-effect-romeo figcaption h5,
figure.jltma-effect-romeo figcaption h6,
figure.jltma-effect-romeo figcaption span {
  transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
}
figure.jltma-effect-romeo figcaption p {
  padding: 0.25em 2em;
  transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
}
figure.jltma-effect-romeo:hover figcaption::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
figure.jltma-effect-romeo:hover figcaption::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
figure.jltma-effect-romeo:hover img {
  opacity: 0.6;
  transform: translate3d(0, 0, 0);
}
figure.jltma-effect-romeo:hover h1,
figure.jltma-effect-romeo:hover h2,
figure.jltma-effect-romeo:hover h3,
figure.jltma-effect-romeo:hover h4,
figure.jltma-effect-romeo:hover h5,
figure.jltma-effect-romeo:hover h6,
figure.jltma-effect-romeo:hover span {
  transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
}
figure.jltma-effect-romeo:hover p {
  transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
}

/***** Layla *****/
figure.jltma-effect-layla img {
  transform: translate3d(0, -30px, 0) scale(1.15, 1.15);
  transition: opacity 0.35s, transform 0.35s;
}
figure.jltma-effect-layla figcaption {
  padding: 3em;
}
figure.jltma-effect-layla figcaption::before, figure.jltma-effect-layla figcaption::after {
  opacity: 0;
}
figure.jltma-effect-layla figcaption::before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
  transform-origin: 0 0;
}
figure.jltma-effect-layla figcaption::after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: scale(1, 0);
  transform-origin: 100% 0;
}
figure.jltma-effect-layla figcaption h1,
figure.jltma-effect-layla figcaption h2,
figure.jltma-effect-layla figcaption h3,
figure.jltma-effect-layla figcaption h4,
figure.jltma-effect-layla figcaption h5,
figure.jltma-effect-layla figcaption h6,
figure.jltma-effect-layla figcaption span {
  padding-top: 26%;
  transition: transform 0.35s;
  transform: translate3d(0, -30px, 0);
}
figure.jltma-effect-layla figcaption p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}
figure.jltma-effect-layla figcaption::before, figure.jltma-effect-layla figcaption::after,
figure.jltma-effect-layla figcaption p {
  transition: opacity 0.35s, transform 0.35s;
}
figure.jltma-effect-layla:hover img {
  opacity: 0.7;
  transform: translate3d(0, 0, 0) scale(1.15, 1.15);
}
figure.jltma-effect-layla:hover figcaption::before, figure.jltma-effect-layla:hover figcaption::after {
  opacity: 1;
  transform: scale(1);
}
figure.jltma-effect-layla:hover h1,
figure.jltma-effect-layla:hover h2,
figure.jltma-effect-layla:hover h3,
figure.jltma-effect-layla:hover h4,
figure.jltma-effect-layla:hover h5,
figure.jltma-effect-layla:hover h6,
figure.jltma-effect-layla:hover span,
figure.jltma-effect-layla:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
figure.jltma-effect-layla:hover figcaption::after,
figure.jltma-effect-layla:hover h2,
figure.jltma-effect-layla:hover p,
figure.jltma-effect-layla:hover img {
  transition-delay: 0.15s;
}

/***** Honey *****/
figure.jltma-effect-honey {
  background: #4a3753;
}
figure.jltma-effect-honey figcaption::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #4b00e7;
  transform: translate3d(0, 10px, 0);
}
figure.jltma-effect-honey figcaption h1,
figure.jltma-effect-honey figcaption h2,
figure.jltma-effect-honey figcaption h3,
figure.jltma-effect-honey figcaption h4,
figure.jltma-effect-honey figcaption h5,
figure.jltma-effect-honey figcaption h6,
figure.jltma-effect-honey figcaption span {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  transform: translate3d(0, -30px, 0);
}
figure.jltma-effect-honey figcaption h1 i,
figure.jltma-effect-honey figcaption h2 i,
figure.jltma-effect-honey figcaption h3 i,
figure.jltma-effect-honey figcaption h4 i,
figure.jltma-effect-honey figcaption h5 i,
figure.jltma-effect-honey figcaption h6 i,
figure.jltma-effect-honey figcaption span i {
  font-style: normal;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(0, -30px, 0);
}
figure.jltma-effect-honey figcaption::before,
figure.jltma-effect-honey figcaption h1,
figure.jltma-effect-honey figcaption h2,
figure.jltma-effect-honey figcaption h3,
figure.jltma-effect-honey figcaption h4,
figure.jltma-effect-honey figcaption h5,
figure.jltma-effect-honey figcaption h6,
figure.jltma-effect-honey figcaption span {
  transition: transform 0.35s;
}
figure.jltma-effect-honey:hover figcaption::before,
figure.jltma-effect-honey:hover h1,
figure.jltma-effect-honey:hover h2,
figure.jltma-effect-honey:hover h3,
figure.jltma-effect-honey:hover h4,
figure.jltma-effect-honey:hover h5,
figure.jltma-effect-honey:hover h6,
figure.jltma-effect-honey:hover span,
figure.jltma-effect-honey:hover h1 i,
figure.jltma-effect-honey:hover h2 i,
figure.jltma-effect-honey:hover h3 i,
figure.jltma-effect-honey:hover h4 i,
figure.jltma-effect-honey:hover h5 i,
figure.jltma-effect-honey:hover h6 i,
figure.jltma-effect-honey:hover span i {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

figure.jltma-effect-honey img,
figure.jltma-effect-oscar img {
  opacity: 0.9;
  transition: opacity 0.35s;
}

/***** Oscar *****/
figure.jltma-effect-oscar {
  background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.jltma-effect-oscar figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3em;
  background-color: rgba(58, 52, 42, 0.7);
  transition: background-color 0.35s;
}
figure.jltma-effect-oscar figcaption::before {
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
}
figure.jltma-effect-oscar figcaption h1,
figure.jltma-effect-oscar figcaption h2,
figure.jltma-effect-oscar figcaption h3,
figure.jltma-effect-oscar figcaption h4,
figure.jltma-effect-oscar figcaption h5,
figure.jltma-effect-oscar figcaption h6,
figure.jltma-effect-oscar figcaption span {
  margin: 20% 0 10px 0;
  transition: transform 0.35s;
  transform: translate3d(0, 100%, 0);
}
figure.jltma-effect-oscar figcaption::before,
figure.jltma-effect-oscar figcaption p {
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0);
}
figure.jltma-effect-oscar:hover h1,
figure.jltma-effect-oscar:hover h2,
figure.jltma-effect-oscar:hover h3,
figure.jltma-effect-oscar:hover h4,
figure.jltma-effect-oscar:hover h5,
figure.jltma-effect-oscar:hover h6,
figure.jltma-effect-oscar:hover span {
  transform: translate3d(0, 0, 0);
}
figure.jltma-effect-oscar:hover figcaption::before,
figure.jltma-effect-oscar:hover p {
  opacity: 1;
  transform: scale(1);
}
figure.jltma-effect-oscar:hover figcaption {
  background-color: rgba(58, 52, 42, 0);
}
figure.jltma-effect-oscar:hover img {
  opacity: 0.4;
}