* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #FFF;
  font-weight: 300;
  font-family: proxima-nova, sans-serif;
}

#wrapper {
  display: block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 250px;
  background: #1d4258;
}

img {
  display: block;
  margin: 0 auto;
}

.dude {
  position: absolute;
  bottom: 32px;
  left: 0;
}

.logoStrip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38px;
  background: #FFF;
}

.logoStrip img {
  margin: 9px auto 0;
  width: 93px;
  height: auto;
}

.textWrap {
  position: relative;
}

.frame {
  transition: opacity 0.5s ease-out;
}

.frame .textWrap, .frame .dude, .frame .textWrap img:not(.ctaText) {
  opacity: 0;
  transition: opacity 0.3s ease-out, left 0.3s ease-out, bottom 0.5s ease-out, top 0.3s ease-out;
}

.frame.animated .textWrap, .frame.animated .dude, .frame.animated .textWrap * {
  opacity: 1;
}

.frame.out {
  opacity: 0;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#f1 .textWrap {
  top: 15px;
}

#f1 .textWrap img {
  position: relative;
  left: -40px;
  opacity: 0;
  transition: all 0.3s ease-out;
}

#f1 .textWrap img:nth-of-type(2) {
  transition-delay: 0.2s;
}

#f1 .dude {
  left: 35px;
  bottom: 32px;
  opacity: 1;
}

#f1 .hand {
  z-index: 1;
  left: 53px;
  bottom: 50px;
  transform-origin: center bottom;
  animation: wave 0.4s linear 10;
}

#f1.animated .textWrap img {
  left: 0;
  opacity: 1;
}

#f2 img {
  margin: 0;
}

#f2 .dude {
  opacity: 0;
  left: -150px;
  transition: left 0.5s ease-out;
}

#f2 .textWrap {
  position: relative;
  left: 110px;
  opacity: 1;
}

#f2 .textWrap img:not(.ctaText), #f2 .textWrap .cta {
  position: relative;
  opacity: 0;
}

#f2 .textWrap .cta {
  top: 20px;
}

#f2 .textWrap img:not(.ctaText) {
  top: 40px;
  transition-delay: 0.2s;
}

#f2.animated .dude {
  opacity: 1;
  left: 0;
}

#f2.animated .textWrap {
  left: 130px;
}

#f2.animated .textWrap img:not(.ctaText), #f2.animated .textWrap .cta {
  opacity: 1;
  top: 0;
}

.cta {
  background: #FFF;
  display: table;
  padding: 6px 13px;
  border-radius: 30px;
  margin-top: 15px;
  transition: background 0.1s ease-out, left 0.3s 0.4s ease-out, top 0.3s 0.4s ease-out, opacity 0.3s 0.4s ease-out;
}

.cta img {
  display: table;
  transition: filter 0.1s ease-out;
}

#wrapper:hover .cta {
  background: #0272b1;
}

#wrapper:hover .cta img {
  filter: brightness(10);
}