body {
  margin: 0;
  padding: 0;
}

.ad-container {
  --bgColor: #1C2B33;
  width: 300px;
  height: 250px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
  box-sizing: border-box;
  display: block;
  background: var(--bgColor);
  opacity: 0;
}
.ad-container.ready {
  opacity: 1;
}
.ad-container svg * {
  transform-box: fill-box;
}
.ad-container .masked-images {
  position: absolute;
  left: var(--imageX);
  top: var(--imageY);
  width: var(--imageW);
  height: var(--imageH);
  overflow: hidden;
}
.ad-container .masked-images .images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ad-container .masked-images .images img {
  --imageDuration1: 3.2s;
  --imageDuration2: 5s;
  --imageDuration3: 3837ms;
  --imageDelay1: 0s;
  --imageDelay2: calc(var(--imageDuration1) - 1s);
  --imageDelay3: calc(var(--imageDuration2) + var(--imageDelay2) - 1s);
  --imageScale: 1.2;
  --originOffsetX: 0px;
  --originOffsetY: 0px;
  transform-origin: calc(50% + var(--originOffsetX)) calc(50% + var(--originOffsetY));
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: scaleImage;
  animation-fill-mode: forwards;
  animation-timing-function: var(--imageScaleEasing);
}
@keyframes scaleImage {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(var(--imageScale));
  }
}
.ad-container .masked-images .images img:nth-child(1) {
  opacity: 1;
  animation-duration: var(--imageDuration1);
  animation-delay: var(--imageDelay1);
  animation-timing-function: linear;
}
.ad-container .masked-images .images img:nth-child(2) {
  opacity: 0;
  animation-duration: var(--imageDuration2);
  animation-delay: var(--imageDelay2);
  animation-timing-function: linear;
}
.ad-container .masked-images .images img:nth-child(3) {
  opacity: 0;
  animation-duration: var(--imageDuration3);
  animation-delay: var(--imageDelay3);
  animation-timing-function: linear;
}
.ad-container .masked-images .masks {
  --maskScaleEasing: cubic-bezier(0.30, 0.00, 0.00, 1.00);
  --maskScaleDuration: 1668ms;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ad-container .masked-images .masks .mask {
  animation-duration: var(--maskScaleDuration);
  animation-fill-mode: forwards;
  animation-timing-function: var(--maskScaleEasing);
  position: absolute;
  background: var(--bgColor);
}
.ad-container .masked-images .masks .mask.top {
  width: 100%;
  height: 51%;
  animation-name: scaleMaskTop;
  transform-origin: top;
  top: -1%;
  left: 0;
}
@keyframes scaleMaskTop {
  100% {
    transform: scaleY(0);
  }
}
.ad-container .masked-images .masks .mask.right {
  width: 51%;
  height: 100%;
  right: -1%;
  top: 0;
  animation-name: scaleMaskRight;
  transform-origin: right;
}
@keyframes scaleMaskRight {
  100% {
    transform: scaleX(0);
  }
}
.ad-container .masked-images .masks .mask.bottom {
  width: 100%;
  height: 51%;
  left: 0;
  bottom: -1%;
  animation-name: scaleMaskBottom;
  transform-origin: bottom;
}
@keyframes scaleMaskBottom {
  100% {
    transform: scaleY(0);
  }
}
.ad-container .masked-images .masks .mask.left {
  width: 51%;
  height: 100%;
  left: -1%;
  top: 0;
  animation-name: scaleMaskLeft;
  transform-origin: left;
}
@keyframes scaleMaskLeft {
  100% {
    transform: scaleX(0);
  }
}
.ad-container .ad-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ad-container .ad-svg #bg {
  opacity: 0;
}
.ad-container .ad-svg #image-placeholder {
  opacity: 0;
}
.ad-container .ad-svg #logo {
  --logoDuration: 1s;
  --logoEasing: cubic-bezier(.85,.881,.916,.938,.954,.965,.974,.981,.987,.991,.994,.997,.998,.999,1);
  --logoOffset: 100%;
  animation-name: showLogo;
  animation-duration: var(--logoDuration);
  animation-timing-function: var(--logoEasing);
  animation-fill-mode: forwards;
}
@keyframes showLogo {
  0% {
    opacity: 0;
    transform: translateY(var(--logoOffset));
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.ad-container .ad-svg #cta {
  --ctaDuration: 0.7s;
  --ctaEasing: cubic-bezier(.85,.881,.916,.938,.954,.965,.974,.981,.987,.991,.994,.997,.998,.999,1);
  --ctaOffset: 30%;
  opacity: 0;
  animation-duration: var(--ctaDuration);
  animation-timing-function: var(--ctaEasing);
  animation-fill-mode: forwards;
}
@keyframes showCta {
  0% {
    opacity: 0;
    transform: translateY(var(--ctaOffset));
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.ad-container .ad-svg #cta rect,
.ad-container .ad-svg #cta path {
  transition: fill 0.15s, stroke 0.5s;
}
.ad-container .ad-svg [id^=text] > g {
  opacity: 0;
}
@keyframes showLineScale {
  0% {
    transform: scale(0.91);
    transform-origin: var(--transformOriginStart);
  }
  100% {
    transform: scale(1);
    transform-origin: var(--transformOriginEnd);
  }
}
@keyframes showLinePosition {
  0% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes showLineOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ad-container .ad-svg [id^=text].showLines > g {
  --transformOriginStart: center bottom;
  --transformOriginEnd: center;
  --initalLineDelayIn: 0s;
  --stepLineDelayIn: 0.15s;
  --showLineScale: showLineScale 1210ms cubic-bezier(0.10, 0.00, 0.00, 1.00);
  --showLinePosition: showLinePosition 1000ms cubic-bezier(0.10, 0.00, 0.00, 1.00);
  --showLineOpacity: showLineOpacity 1000ms cubic-bezier(0.40, 0.00, 0.00, 1.00);
}
.ad-container .ad-svg [id^=text].showLines > g[id^=nd-] {
  --initalLineDelayIn: 0s;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(1) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 0 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(1) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 0 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(2) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 1 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(2) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 1 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(3) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 2 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(3) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 2 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(4) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 3 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(4) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 3 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(5) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 4 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(5) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 4 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(6) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 5 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(6) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 5 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(7) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 6 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(7) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 6 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(8) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 7 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(8) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 7 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(9) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 8 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(9) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 8 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(10) {
  animation: var(--showLineOpacity), var(--showLinePosition);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 9 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].showLines > g:nth-child(10) > g {
  animation: var(--showLineScale);
  animation-delay: calc(0.41s + var(--stepLineDelayIn) * 9 + var(--initalLineDelayIn));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg #text1.showLines > g:not([id^=nd-]) {
  --initalLineDelayIn: 1.3s;
}
.ad-container .ad-svg #text2.showLines > g:not([id^=nd-]) {
  --initalLineDelayIn: 0s;
}
@keyframes hideLineOpacity {
  0% {
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}
@keyframes hideLinePosition {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-70%);
  }
}
.ad-container .ad-svg [id^=text].hideLines > g {
  opacity: 1;
  --stepLineDelayOut: 0.15s;
  --out1: hideLineOpacity 626ms cubic-bezier(0.70, 0.00, 0.99, 1.00);
  --out2: hideLinePosition 626ms cubic-bezier(0.70, 0.00, 0.99, 1.00);
  --hideLine: var(--out1), var(--out2);
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(1) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 0));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(2) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 1));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(3) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 2));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(4) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 3));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(5) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 4));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(6) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 5));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(7) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 6));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(8) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 7));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(9) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 8));
  animation-fill-mode: forwards;
}
.ad-container .ad-svg [id^=text].hideLines > g:nth-child(10) {
  animation: var(--hideLine);
  animation-delay: calc(0.41s + calc(var(--stepLineDelayOut) * 9));
  animation-fill-mode: forwards;
}
.ad-container:hover .ad-svg #cta rect {
  fill: white;
  stroke: #1C2B33;
}
.ad-container:hover .ad-svg #cta path {
  fill: #1C2B33;
}

.ad-container.concept-Wooly .masked-images .images img {
  --imageScale: 1.15;
}

.ad-container.concept-Translation .masked-images .images img {
  --imageScale: 1.15;
}
.ad-container.concept-Translation.size-160x600 .masked-images .images .img3 {
  --originOffsetX: 0%;
  --originOffsetY: -20%;
}
.ad-container.concept-Translation.size-300x250 .masked-images .images .img1 {
  --originOffsetX: 0px;
  --originOffsetY: -10%;
}
.ad-container.concept-Translation.size-300x250 .masked-images .images .img3 {
  --originOffsetX: -5%;
  --originOffsetY: -15%;
}
.ad-container.concept-Translation.size-728x90 .masked-images .images .img1 {
  --originOffsetX: 0px;
  --originOffsetY: -50%;
}
.ad-container.concept-Translation.size-728x90 .masked-images .images .img3 {
  --originOffsetX: -30%;
  --originOffsetY: -50%;
}
.ad-container.concept-Translation.size-970x250 .masked-images .images .img1 {
  --originOffsetX: 0px;
  --originOffsetY: -50%;
}
.ad-container.concept-Translation.size-970x250 .masked-images .images .img3 {
  --originOffsetX: 0px;
  --originOffsetY: -30%;
}