#coupon {
  border: 1px solid #666666;
}

#coupon .titlebar {
  background: url('/v/4.9.5/b/i/logo.jpg') left center no-repeat #d2476e;
  background-position-x: 6px;
  background-size: 12em;
}

#coupon h2,
#coupon h3,
#coupon h4 {
  font-family: 'Work Sans', sans-serif;
  margin: 0;
  padding: 10px;
}

#coupon .titlebar h2 {
  color: #fff;
  padding: 0.5em 0.5em 0.5em 7em;
}

#couponHolder h3 {
  text-align: left;
  font-weight: bold;
}

#coupon .retailText,
#coupon p.redeemDetails {
  padding: 0 10px;
}

#coupon p.redeemDetails {
  width: 65%;
}

#coupon p.expirationDate {
  display: inline-block;
  width: 200px;
}

#coupon #buttonHolder .copyPromo,
#coupon #buttonHolder .printCoupon {
  display: block;
  margin: 0 auto;
}

#coupon #buttonHolder .printCoupon.hidden {
  display: none;
}

.barcodeButtonContainer {
  display: flex;
  flex-flow: row wrap-reverse;
}

#buttonHolder {
  flex: 1 3 500px;
  text-align: center;
  margin-top: 15px;
}

.barcodeImageContainer {
  flex: 1 1 270px;
  text-align: center;
}

p.serialNumber {
  text-align: center;
}


#couponHolder h3.couponPromoCode {
  text-align: center;
  font-size: 4rem;
}


#PrintPopup h1 {
  display: none;
}

#PrintPopup #coupon .titlebar {
  background-size: 10em;
}

#PrintPopup #couponHolder .titlebar h2 {
  border-bottom: 3px solid #003466;
}

#PrintPopup #coupon #buttonHolder .printCoupon,
#PrintPopup #buttonHolder .printCoupon {
  display: none;
}


#PrintPopup #howToLink {
  text-align: left;
  padding-bottom: 0;
}

#PrintPopup #coupon p.expirationDate {
  margin: 0;
}

#copyComplete {
  margin: 10px 0;
}

@media ( max-width: 992px ) {

  #coupon .titlebar {
    background-position: top center;
  }

  #coupon .titlebar h2 {
    text-align: center;
    padding: 50px 10px 10px 10px;
  }

  #coupon p.redeemDetails {
    width: 100%;
  }

  #buttonHolder {
    margin: 0;
  }

  #coupon #barCodeImage {
    padding-top: 10px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }

  .howToLink.link:hover {
    text-decoration: underline;
    color: #dd006c;
  }

  #couponHolder h3.couponPromoCode {
    font-size: 2rem;
  }

}

@media print {

  body {
    height: 800px;
    overflow: hidden;
    border: none;
    width: 100%;
    background: none;
  }

  #coupon * {
    visibility: visible;
  }

  #coupon {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    border: none;
  }

  #coupon h3,
  #coupon p,
  #coupon p.redeemDetails,
  #coupon .titlebar h2,
  #coupon p.expirationDate {
    color: #000;
    margin-left: 0;
  }

  #coupon .titlebar {
    background: none;
    padding: 0;
  }

  #howToLink {
    text-align: left;
  }

  #coupon button {
    display: none;
  }

  #coupon .hidden {
    display: block;
  }

  .printCoupon {
    display: none;
  }

  #PrintPopup h1 {
    display: none;
  }

  #PrintPopup #couponHolder .titlebar h2 {
    border-bottom: 3px solid #003466;
  }

  #PrintPopup #coupon #barCodeImage {
    position: static;
    display:inline-block;
    width: 75px;
    height: 45px;
  }


}

/* end media print */