/* Weight */
.fw3 {font-weight: 300;}
.fw4 {font-weight: 400;}
.fw5 {font-weight: 500;}
.fw6 {font-weight: 600;}
.fw7 {font-weight: 700;}
.fw8 {font-weight: 800;}
.fw9 {font-weight: 900;}
/* Size */
.f8  {font-size: 8px;}
.f9  {font-size: 9px;}
.f10 {font-size: 10px;}
.f11 {font-size: 11px;}
.f12 {font-size: 12px;}
.f13 {font-size: 13px;}
.f14 {font-size: 14px;}
.f15 {font-size: 15px;}
.f16 {font-size: 16px;}
.f17 {font-size: 17px;}
.f18 {font-size: 18px;}
.f19 {font-size: 19px;}
.f20 {font-size: 20px;}
.f21 {font-size: 21px;}
.f22 {font-size: 22px;}
.f23 {font-size: 23px;}
.f24 {font-size: 24px;}
.f25 {font-size: 25px;}
.f26 {font-size: 26px;}
.f27 {font-size: 27px;}
.f28 {font-size: 28px;}
.f29 {font-size: 29px;}
.f30 {font-size: 30px;}

.left {
  float: left;
}
.right {
  float: right;
}
div.clear {
  clear: both;
}

@media only screen and (max-width : 718px) {
  .left, .right {
    float: none;
    margin: 0 auto;
    display: block;
  }
}

img.wunderpakHero, img.iphone {
  width: 250px;
}

@media only screen and (max-width : 1023px) {
  img.wunderpakHero {
    width: 210px !important;
  }

  div.iphoneContainer {
    margin-bottom: -28px !important;
  }
}

@media only screen and (max-width : 718px) {
  img.wunderpakHero {
    margin: 26px auto;
  }

  div.iphoneCopy {
    text-align: center;
  }

  div.iphoneCopy {
    margin-bottom: 24px !important;
  }
}

div.iphoneContainer {
  margin-bottom: -22px !important;
}

img.iphone {
  margin: -50px auto 0;
}