/* defaults */
*, html {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

/* layout */
#wrapper {
  width: 300px;
  height: 250px;
  border: 1px solid #c5c5c5;
  background-color: #f4f4f4;
  overflow: hidden;
  cursor: pointer; }

#banner {
  width: 300px;
  height: 250px;
  position: relative;
  visibility: hidden;
  overflow: hidden; }

#logo {
  visibility: hidden; }

.droidBot {
  opacity: 1; }

.arm {
  -ms-transform-origin: 12px 10px;
  -webkit-transform-origin: 12px 10px;
  transform-origin: 12px 10px; }

/* dots */
#dots {
  position: absolute;
  left: 138px;
  top: 5px;
  z-index: 5;
  display: block; }
  #dots div {
    height: 4px;
    width: 4px;
    top: 4px;
    border-radius: 5px;
    visibility: hidden;
    position: absolute; }

#blue {
  background-color: #0086f8;
  left: 0px;
  -moz-transform: rotate(0.03deg); }

#red {
  background-color: #ff4131;
  left: 7px;
  -moz-transform: rotate(0.03deg); }

#yellow {
  background-color: #ffbc00;
  left: 14px;
  -moz-transform: rotate(0.03deg); }

#green {
  background-color: #00aa4a;
  left: 21px;
  -moz-transform: rotate(0.03deg); }

/* headlines */
#headline1,
#headline2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

#headline1 {
  background: url("text1.svg") no-repeat; }

#headline2 {
  background: url("text2.svg") no-repeat; }

/* cards */
.phone-container {
  position: absolute;
  width: 300px;
  height: 250px;
  left: 0;
  top: 0; }

.phone {
  background: url("phone.jpg") no-repeat;
  width: 160px;
  height: 193px;
  background-size: cover;
  position: absolute;
  left: -23px;
  top: 102px; }

.cards-container {
  position: absolute;
  width: 300px;
  height: 250px;
  z-index: 10; }
  .cards-container img,
  .cards-container .shadow,
  .cards-container .fx {
    position: absolute;
    visibility: hidden; }

.card {
  padding: 0;
  position: absolute;
  left: 0;
  top: 0; }

#card1Shadow {
  position: absolute;
  z-index: 14;
  background: url("card1-shadow.png") no-repeat;
  background-size: cover;
  width: 114px;
  height: 124px;
  left: 59px;
  top: 138px;
  visibility: hidden; }

.card1 {
  z-index: 15;
  background: url("card1.png") no-repeat;
  background-size: cover;
  width: 114px;
  height: 124px;
  top: 0;
  left: 0; }

#card1Fx {
  position: absolute;
  background: url("card1-fx.png") no-repeat;
  background-size: cover;
  width: 114px;
  height: 124px; }

.card2 {
  z-index: 16;
  background: url("card2.png") no-repeat;
  background-size: cover;
  width: 111px;
  height: 109px; }

#card2Fx {
  position: absolute;
  background: url("card2-fx.png") no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
  width: 111px;
  height: 109px; }

.card3 {
  z-index: 17;
  background: url("card3.png") no-repeat;
  background-size: cover;
  width: 132px;
  height: 105px; }

#cta-container {
  position: absolute;
  top: 75px;
  left: 104px;
  visibility: hidden;
  z-index: 180; }

#ctaSVG {
  position: absolute;
  z-index: 15; }

#ctaBox {
  position: absolute;
  width: 92px;
  height: 26px;
  background-color: #79c259;
  z-index: 0; }

#andy {
  position: absolute;
  left: 0;
  top: 0; }