// CSS Animations

.fakeaqua {
	color: f00;
}

/* SMS134 Three-Panel Animation
   Desktop images (> 767px): 311x400, 356x400, 311x400
   Mobile images  (≤ 767px): 253x325, 289x325, 253x325
   Images have transparent padding built in on outer edges.
*/
 
/* ── Desktop (default) ───────────────────────────────────────────── */
 
.sms134-animation {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
 
.sms134-animation .img-wrap {
  position: absolute;
  top: 0;
  opacity: 0;
}
 
.sms134-animation .img-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
 
.sms134-animation .left-wrap {
  left: 0;
  width: 311px;
  z-index: 1;
}
 
.sms134-animation .center-wrap {
  left: calc(50% - 178px);
  width: 356px;
  z-index: 2;
}
 
.sms134-animation .right-wrap {
  right: 0;
  width: 311px;
  z-index: 1;
}
 
/* ── Mobile (≤ 767px) ────────────────────────────────────────────── */
 
@media (max-width: 767px) {
  .sms134-animation {
    height: 325px;
  }
 
  .sms134-animation .left-wrap {
    width: 253px;
  }
 
  .sms134-animation .center-wrap {
    left: calc(50% - 144.5px);
    width: 289px;
  }
 
  .sms134-animation .right-wrap {
    width: 253px;
  }
}
 
/* ── Animations ──────────────────────────────────────────────────── */
 
@keyframes sms134FadeInCenter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 
@keyframes sms134SlideLeft {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}
 
@keyframes sms134SlideRight {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}
 
.sms134-animation .center-wrap {
  animation: sms134FadeInCenter 1.5s ease both;
}
 
.sms134-animation .left-wrap {
  animation: sms134SlideLeft 1.5s ease 1.0s both;
}
 
.sms134-animation .right-wrap {
  animation: sms134SlideRight 1.5s ease 1.0s both;
}