*, *:before, *:after {
  box-sizing: border-box;
}

@media (min-width: 300px) {
  body {
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.8em;
    overflow-y: auto;
    text-align: center;
    background: #000000;
    padding: 0;
    position: relative;
    padding-top: 100px;
  }
}

.foo {
  position: relative;
  display: block;
}

.letter {
  display: inline-block;
  font-weight: 900;
  font-size: 5em;
  position: relative;
  color: #FFF;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  z-index: 1;
  text-shadow: 1px 2px 1px #cfcfcf, -1px -1px 1px #d3d3d3;
  text-transform: uppercase;
  margin-bottom: 1em;
}

.letter .char1, .letter .char2 {
  position: absolute;
  -webkit-transform-origin: 0 230%;
  -moz-transform-origin: 0 230%;
  -ms-transform-origin: 0 230%;
  -o-transform-origin: 0 230%;
  transform-origin: 0 230%;
  top: 0;
  left: 0;
  text-shadow: none;
}

.letter .char1 {
  color: #676767;
  -webkit-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -webkit-animation-name: cover-ani;
  -moz-animation-name: cover-ani;
  -ms-animation-name: cover-ani;
  -o-animation-name: cover-ani;
  animation-name: cover-ani;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 3;
}

.letter .char2 {
  color: rgba(0,0,0,0.15);
  z-index: 2;
  -webkit-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  -moz-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  -ms-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  -o-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  -webkit-animation-name: shadow-ani;
  -moz-animation-name: shadow-ani;
  -ms-animation-name: shadow-ani;
  -o-animation-name: shadow-ani;
  animation-name: shadow-ani;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes cover-ani {
}

@keyframes shadow-ani {
}