body {
  margin: 0;
  padding: 0; }

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

.banner {
  width: 320px;
  height: 320px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: #fdfaed;
  background: url(bg.jpg) 0 0 no-repeat;
  background-size: cover; }

.bottle {
  width: 850px;
  height: 680px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(bottle.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: scale(0.38) translateX(-52%) translateY(-83%);
  transform-origin: 32% 50%; }

.bottle.fallback {
  transform: scale(1) translateX(-31%) translateY(-44%);
  transform-origin: 50% 50%; }

.fg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(fg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom; }

.copy {
  width: 320px;
  height: 256px;
  position: absolute;
  top: 0;
  left: 0; }

.warning {
  width: 320px;
  height: 64px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0; }

.warning:after {
  content: "";
  border: 4px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

@keyframes zoom {
  0%, 10% {
    transform: scale(0.38) translateX(-52%) translateY(-83%);
    transform-origin: 32% 50%; }
  30%, 60% {
    transform: scale(1) translateX(-31%) translateY(-51.5%);
    transform-origin: 50% 50%; }
  80%, 100% {
    transform: scale(0.38) translateX(-52%) translateY(-83%);
    transform-origin: 32% 50%; } }