@font-face {
  font-family: "ChunkFive";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/chunkfive-webfont.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/chunkfive-webfont.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/chunkfive-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/chunkfive-webfont.ttf") format("truetype");
}
body {
  margin: 0;
  font-family: "ChunkFive";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #013B3B;
}

.container {
  width: 30em;
  align-items: center;
}

.controls {
  font-size: 2em;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.controls li {
  flex: 1;
}
.controls a {
  color: #FF4D5B;
  text-decoration: none;
  display: block;
  padding: 0.2em 0;
  cursor: pointer;
}
.controls a.active {
  color: #000;
  background-color: #F4C552;
}

.effects {
  background-color: #F4C552;
  padding: 1em;
}

.effect {
  height: 2.5em;
  background-color: #FFF;
  font-size: 6em;
  text-align: center;
  line-height: 2.5em;
}

.effects > div {
  display: none;
}

.effect {
  perspective: 10em;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* Fixes bug */
  position: relative;
  background-size: 0 0 !important;
}
.effect > div,
.effect > svg {
  left: 0;
  position: absolute;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  text-transform: uppercase;
}
.effect > div {
  background: inherit;
}
.effect svg {
  z-index: 3;
}
.effect text {
  text-anchor: middle;
}
.effect .image {
  z-index: 1;
}
.effect .shadow {
  z-index: 2;
  color: transparent;
}

.selected-1 .effect-1__content {
  color: #111;
  display: block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/261.jpeg);
  background-size: 0 0;
}
.selected-1 .effect-1__content text {
  fill: url(#sand);
}
.selected-1 .effect-1__content .image {
  -webkit-animation: anim-1-image 1s cubic-bezier(0.39, 0.575, 0.565, 1) alternate infinite;
          animation: anim-1-image 1s cubic-bezier(0.39, 0.575, 0.565, 1) alternate infinite;
  transform-origin: 50% 63%;
  transform-style: preserve-3d;
  background-size: cover;
}
.selected-1 .effect-1__content .image:after {
  display: block;
  content: "";
  width: 100%;
  height: 0.1em;
  background: inherit;
  background-position: 0 100%;
  background-size: cover;
  bottom: 0;
  left: 0;
  transform: rotateX(-90deg);
  transform-origin: 0 0;
}
.selected-1 .effect-1__content .shadow {
  background: none;
  -webkit-animation: anim-1-shadow 1s alternate infinite;
          animation: anim-1-shadow 1s alternate infinite;
}

@-webkit-keyframes anim-1-image {
  0%, 19% {
    color: transparent;
  }
  20% {
    transform: rotateX(0);
    color: #333;
  }
  90%, 100% {
    transform: rotateX(85deg);
  }
}

@keyframes anim-1-image {
  0%, 19% {
    color: transparent;
  }
  20% {
    transform: rotateX(0);
    color: #333;
  }
  90%, 100% {
    transform: rotateX(85deg);
  }
}
@-webkit-keyframes anim-1-shadow {
  0%, 25% {
    text-shadow: none;
  }
  40%, 100% {
    text-shadow: 0 -0.02em 0 #111;
  }
}
@keyframes anim-1-shadow {
  0%, 25% {
    text-shadow: none;
  }
  40%, 100% {
    text-shadow: 0 -0.02em 0 #111;
  }
}
.selected-2 .effect-2__content {
  display: block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/193.jpeg) no-repeat;
}
.selected-2 .effect-2__content text {
  fill: url(#castle);
}
.selected-2 .effect-2__content .image {
  background-size: 0 0;
}
.selected-2 .effect-2__content .image > div {
  background: inherit;
  overflow: hidden;
}
.selected-2 .effect-2__content .image .image__top {
  transform-origin: 0 100%;
  height: 63%;
  background-size: cover;
  position: relative;
  -webkit-animation: anim-2 4s infinite;
          animation: anim-2 4s infinite;
}
.selected-2 .effect-2__content .image .image__bottom {
  background-size: cover;
  background-position: bottom;
  height: 37%;
}
.selected-2 .effect-2__content .shadow {
  -webkit-animation: anim-2-shadow 4s infinite;
          animation: anim-2-shadow 4s infinite;
  background: none;
}

@-webkit-keyframes anim-2 {
  0%, 10% {
    transform: rotateX(0);
  }
  40%, 60% {
    transform: rotateX(87deg);
  }
  90%, 100% {
    transform: rotateX(0);
  }
}

@keyframes anim-2 {
  0%, 10% {
    transform: rotateX(0);
  }
  40%, 60% {
    transform: rotateX(87deg);
  }
  90%, 100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes anim-2-shadow {
  0%, 15% {
    text-shadow: none;
  }
  17%, 80% {
    text-shadow: 0 -0.02em 0 #283335;
  }
  90%, 100% {
    text-shadow: none;
  }
}
@keyframes anim-2-shadow {
  0%, 15% {
    text-shadow: none;
  }
  17%, 80% {
    text-shadow: 0 -0.02em 0 #283335;
  }
  90%, 100% {
    text-shadow: none;
  }
}