.template{
  perspective:300px;
  perspective-origin:50% 200px
}
.template:before{
  background-image:radial-gradient(circle,#fff,#BB6716)
}
.template:after{
  top:-1%;left:10%;right:10%;bottom:0;
  background-image:url(../print/textures/Wired.jpg);
  transform:rotateX(40deg);
  -webkit-mask-box-image:url(../print/mask/mask39.png) 0 0 0 0 stretch;
  mask:url(../print/mask/mask39.png)0 0/100% 100%
}
.tpl{
  perspective:300px;
  perspective-origin:50% 100%;
  transform:rotateX(24deg);
  font-family:sans-serif,bn,hi,hy,ja,ka,km,ko,ml,my;
  text-transform:uppercase;
  transform-style:preserve-3d
}
.tpl:before{
  transform:rotateX(20deg)scaleY(-1);
  bottom:auto;top:.67em;
  color:transparent;
  text-shadow:0 0 5px #000,0 0 10px #000;
  opacity:.5
}
.tpl p{
  transform:rotateX(-17deg)
}
.tpl p:before{
  color:#111;
  text-shadow:0 0 1px,0 -2px 1px #bbb;
  filter:url(#dark-outline)
}
.tpl p:after{
  -webkit-mask:url(../print/mask/t17.png);
  mask:url(../print/mask/t17.png)repeat
}
.template:hover .tpl{animation:bounce 1s infinite}
#dropbox:after{content:"hover"}