@import url(https://use.typekit.net/yxf5jny.css);

.Offer .pf-widget-img {
  width: auto !important;
  height: auto !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 1;
}

.Offer .pf-widget-content {
  padding: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.Offer .pf-widget-footer {
  display: none !important;
}

/* .Offer #pf-widget-message,
.Offer #pf-widget-headline {
  display: none;
} */

.Offer .pf-widget-close {
  z-index: 100 !important;
  padding: 0em 0.2em !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  color: #000 !important;
}

.Offer .pf-widget-btn.pf-widget-ok {
  margin: 0 !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
  text-indent: -9999px;
  z-index: 5;
}

@media (max-width: 900px) {
  .Offer .pf-widget-content {
    width: 80% !important;
  }
}




.Offer.pf-widget-modal.pf-widget-variant-2 .pf-widget-headline {
  margin-top: 0;
}




























/*The Box
This is the widget itself. Consider things like size, borders, background colors, or a background image that would be associated with the layout template (i.e. doesn’t change from offer to offer), etc.
*/
.pf-widget.Offer .pf-widget {
  height: 500px;
  width: 500px;
  border: none;
}

/*The Content
This is the container inside the box containing all the contents.
*/
.pf-widget.Offer .pf-widget-content {
  background-color: #F1F2F2;
}

/* The Text 
This is the container inside of The Content container that contains just The Headline and The Message
*/
.pf-widget.Offer .pf-widget-text {
  z-index: 100;
  position: absolute;
  bottom: 20%;
  left: 5%;
  right: 5%;
  background: #F1F2F2;
  color: #000;
  padding: 1.5em 2em;
  border-radius: 20px;
}

/*The Headline
This is the Headline. Consider its position within The Box, relative size of the text, style of text, etc. Its display is optional.
*/
.pf-widget.Offer .pf-widget-headline {
  text-align: left;
  color: #000;
  /* font-family: 'Napco_2', sans-serif; */
  font-size: 2.75em;
  line-height: 1.25;
  font-weight: bold;
  font-family: "proxima-nova", arial, helvetica, sans-serif;
}

/*The Message
This is the Message of the offer. Consider its position in The Box, relative position to the headline, relative size and style of text. Its display is optional.
*/
.pf-widget.Offer .pf-widget-message {
  text-align: left;
  color: #636466;
  font-family: "proxima-nova", arial, helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: 0;
  color: #636466;
}

/*The Image
This is the Image associated with the offer (i.e. you can change it from offer to offer). Consider its style, size, and position within The Box. You could make it the background image or make it coordinate with the templated background image you defined in The Box.
*/
.pf-widget.Offer .pf-widget-img {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*The Form
This is the form elements if you use a form widget.
*/
.pf-widget.Offer .pf-widget-content-form {}

/*The Close Box
This is the Close box that closes the offer. This really shouldn’t move from the upper right corner and should remain easily clickable/tappable but you can control it’s style.
*/
.pf-widget.Offer .pf-widget-close {
  top: 26px;
  right: 27px;
  margin: 0;
  padding: 0;
  font-size: 3em;
  color: #fff !important;
  background-color: #A6A6A6 !important;
  line-height: 0.92;
  font-family: proxima-nova;
  font-weight: 100;
}

/*The Buttons
The class is for all the buttons.
*/
.pf-widget.Offer .pf-widget-btn {}

/*The Ok Button
This is the Ok button that submits the form or CTA. Consider style, relative size, color, position. Ensure there is good contrast between font color and background color.
*/
.pf-widget.Offer .pf-widget-ok {
  position: absolute !important;
  display: block;
  text-align: center;
  color: #000000;
  background-color: #fff200 !important;
  font-family: 'Napco_2', sans-serif;
  font-size: 2em;
  border-radius: .25em;
  z-index: 9999999;
  text-indent: 0;
  max-width: 290px;
  height: auto;
  bottom: -80px !important;
  left: 0;
  right: 0;
  top: auto;
  padding: 0;
  line-height: 2em;
  font-weight: bold;
  margin: 0 auto !important;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: "proxima-nova", arial, helvetica, sans-serif;
  font-weight: 600;
}

/*The Cancel Button
This is the Cancel button that dismisses the offer. Consider style, relative size, color, position. Ensure there is good contrast between font color and background color and is distinct from the main CTA.
*/
.pf-widget.Offer .pf-widget-cancel {}







/**
================= VARIATIONS =======
*/


/* only headline and button */
.pf-widget.Offer.OfferOnlyHeadline .pf-widget-text {
  background-color: #fff;
  left: 0;
  right: 0;
  bottom: auto;
  top: 20%;
  border-radius: 0;
}

.pf-widget.Offer.OfferOnlyHeadline .pf-widget-message {
  display: none;
}

.pf-widget.Offer.OfferOnlyHeadline .pf-widget-headline {
  margin-bottom: 0 !important;
  font-weight: 800;
  font-family: "proxima-nova", arial, helvetica, sans-serif;
}

.pf-widget.Offer.OfferOnlyHeadline .pf-widget-ok {
  left: 1em !important;
  right: auto !important;
  bottom: -167px !important;
}



/* only button */
.pf-widget.Offer.OfferOnlyOkButton .pf-widget-text {
  background-color: transparent;

}

.pf-widget.Offer.OfferOnlyOkButton .pf-widget-message,
.pf-widget.Offer.OfferOnlyOkButton .pf-widget-headline {
  display: none;
}