@charset "utf-8";

.zinger-title { font-family: "TT Norms W01 Bold"; font-weight: bold; font-size: 64px; letter-spacing: -1px; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; line-height: 64px; margin-top: 5px; }

.zinger-heading { font-family: "TT Norms W01 Bold"; font-weight: bold; font-size: 24px; letter-spacing: -1px; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; padding-top: 12px; }

.zinger { position: relative; width: 100%; max-width: 1440px; margin: 0px auto; overflow: hidden; }

.media-outer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

.media-video { height: 100%; }

.media-video video { height: 100%; }

.media-video-pause, .media-video-play { position: absolute; width: 24px; height: 24px; left: 18px; bottom: 18px; cursor: pointer; z-index: 10; }

.zinger-content { position: absolute; height: 100%; top: 0px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

.zinger-bow { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; }

.zinger-bow-line { width: 48%; height: 2px; background-color: rgb(255, 255, 255); margin-top: 12px; box-shadow: rgba(24, 32, 37, 0.5) 0px 0px 5px; }

.zinger-bow-image { background-image: url("https://iconfitness-res.cloudinary.com/image/upload/q_auto/v1/proform.com/cdn/images/catalog/bow_with_shadow.svg"); width: 40px; min-width: 40px; height: 40px; background-size: cover; background-repeat: no-repeat; }

.product-prices { display: flex; flex-direction: row; align-items: center; padding-top: 8px; }

.sale-price { font-family: "TT Norms W01 ExtraLight"; letter-spacing: -3.75px; font-size: 40px; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; padding-left: 8px; }

.crossed-prices { font-family: "TT Norms W01 Bold"; font-weight: bold; font-size: 16px; letter-spacing: -1px; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; }

.retail-price { text-decoration: line-through; }

.msrp-large { color: rgb(255, 255, 255); font-size: 16px; font-family: "TT Norms W01 Bold"; text-shadow: rgb(24, 32, 37) 0px 0px 5px; }

.third-price { text-decoration: line-through; }

.sale-text { font-family: "TT Norms W01 Bold"; font-weight: bold; font-size: 16px; letter-spacing: -1px; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; }

.zinger-content .button-standard { margin: 20px 0px 0px; }

.left.zinger-overlay { width: 68%; height: 100%; left: 0px; background-image: linear-gradient(to left, rgba(65, 77, 85, 0), rgba(65, 77, 85, 0.5)); align-items: flex-start; position: absolute; }

.left.no-overlay.zinger-overlay { width: 68%; height: 100%; left: 0px; background-image: none; align-items: flex-start; position: absolute; }

.left .zinger-bow { width: 100%; }

.zinger-content { width: 60%; }

.zinger-btn-bounce { display: none; }

.zinger-btn-fade { animation: 4s linear 2s 1 normal forwards running fadeOut; }

@-webkit-keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.financing-breakdown { display: flex; margin: 15px 0px; text-align: center; color: rgb(255, 255, 255); text-shadow: rgb(24, 32, 37) 0px 0px 5px; font-family: "TT Norms W01 Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.financing-breakdown p { font-size: 14px; line-height: 10px; }

.financing-breakdown span { font-size: 10px; }

.financing-breakdown > div { border-right: 1px solid rgb(255, 255, 255); box-sizing: border-box; padding: 0px 15px; }

.financing-breakdown > div:last-child { border: 0px; padding-left: 15px; padding-right: 0px; }

.left.zinger-content { left: 60px; }

.center.zinger-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(65, 77, 85, 0.5); align-items: center; }

.center.no-overlay.zinger-overlay { position: absolute; width: 100%; height: 100%; align-items: center; }

.center.zinger-content { width: 100%; align-items: center; }

.center .zinger-bow { width: 60%; max-width: 860px; }

.right.zinger-overlay { width: 68%; height: 100%; right: 0px; background-image: linear-gradient(to right, rgba(65, 77, 85, 0), rgba(65, 77, 85, 0.5)); align-items: flex-end; position: absolute; }

.right.no-overlay.zinger-overlay { width: 68%; height: 100%; right: 0px; background-image: none; align-items: flex-end; position: absolute; }

.right .zinger-bow { width: 100%; }

.right.zinger-content { right: 60px; align-items: flex-end; }

.right .zinger-title { text-align: right; }

.zinger-content.font-dark .zinger-title, .zinger-content.font-dark .zinger-heading { color: rgb(33, 44, 51); text-shadow: none; }

.dark .zinger-title, .dark .zinger-heading, .dark .sale-price, .dark .crossed-prices, .dark .retail-price, .dark .third-price, .dark .sale-text { color: rgb(33, 44, 51); text-shadow: none; }

.dark .zinger-bow-line { width: 48%; height: 2px; background-color: rgb(33, 44, 51); margin-top: 12px; box-shadow: none; }

.dark .zinger-bow-image { background-image: url("https://iconfitness-res.cloudinary.com/image/upload/q_auto/v1/proform.com/cdn/images/bow_dark.svg"); width: 40px; min-width: 40px; height: 40px; background-size: cover; background-repeat: no-repeat; }

.dark .financing-breakdown { color: rgb(33, 44, 51); }

.dark .msrp-large { color: rgb(33, 44, 51); }

@media screen and (max-width: 370px) {
  .zinger { padding-bottom: 370px; }
  .zinger-content .button-standard { margin-top: 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
  .zinger-content { width: 90%; }
  .left.zinger-overlay, .right.zinger-overlay { width: 79%; max-width: 250px; }
  .zinger-content { width: 87%; max-width: 280px; }
  .zinger-content .zinger-title { width: 57%; max-width: 183px; }
  .center.zinger-content { max-width: none; }
  .center .zinger-bow, .center .zinger-title { width: 87%; max-width: 280px; }
  .left img.mod-bg { position: absolute; right: 0px; height: auto; min-width: 375px; }
  .center img.mod-bg { position: absolute; left: calc(50% - 720px); height: auto; min-width: 375px; }
  .right img.mod-bg { position: absolute; left: 0px; height: auto; min-width: 375px; }
}

@media screen and (min-width: 371px) and (max-width: 499px) {
  .zinger { padding-bottom: 100%; }
  .left.zinger-overlay, .right.zinger-overlay { width: 79%; max-width: 250px; }
  .zinger-content { width: 87%; max-width: 280px; }
  .zinger-content .zinger-title { width: 57%; max-width: 183px; }
  .center.zinger-content { max-width: none; }
  .center .zinger-bow, .center .zinger-title { width: 87%; max-width: 280px; }
}

@media screen and (max-width: 767px) {
  .zinger-title { font-size: 32px; line-height: 32px; margin-top: 0px; }
  .zinger-heading { font-size: 16px; padding-top: 8px; }
  .left.zinger-content { left: 20px; }
  .right.zinger-content { right: 20px; }
  .sale-price { font-size: 32px; }
  .crossed-prices { font-size: 14px; }
  .zinger-btn-bounce { display: block; position: absolute; bottom: 60px; left: 0px; right: 0px; margin: 0px auto; text-align: center; cursor: pointer; z-index: 11; }
  .zinger-btn-bounce img { position: absolute; width: 40px; height: 40px; }
}

@media screen and (min-width: 500px) and (max-width: 959px) {
  .zinger { padding-bottom: 75%; }
  .left.zinger-overlay, .right.zinger-overlay { width: 69%; max-width: 530px; }
  .zinger-content { width: 84%; max-width: 648px; }
  .zinger-content .zinger-title { width: 69%; max-width: 530px; }
  .center.zinger-content { width: 100%; align-items: center; max-width: none; }
  .center .zinger-bow, .center .zinger-title { width: 84%; max-width: 648px; }
}

@media screen and (min-width: 960px) {
  .zinger { height: 360px; }
  .left .media-video video { position: absolute; right: 0px; }
  .left.zinger-content { padding: 0px 60px 0px 0px; }
  .left img.mod-bg { position: absolute; right: 0px; height: auto; max-width: 1440px; }
  .center .media-video video { position: absolute; left: calc(50% - 720px); }
  .center.zinger-content { padding: 0px 60px; }
  .center img.mod-bg { position: absolute; left: calc(50% - 720px); height: auto; max-width: 1440px; }
  .right .media-video video { position: absolute; left: 0px; }
  .right.zinger-content { padding: 0px 0px 0px 60px; }
  .right img.mod-bg { position: absolute; left: 0px; height: auto; max-width: 1440px; }
}