.pro_animation_list{
    align-items:center;
    padding: 9px 21px 6px !important;
}
.navbar-inner .pro_animation_list .head3.actives:after{
  bottom:-10px;
}
.navtext.promo_tab_bdg{
  padding-right: 17px !important;
}
.pro_badge{
    position:relative;
    display:inline-grid;
    border-radius:22px;
    overflow:hidden;
    color:#9A9A9A;
    padding:4px 18px 4px 7px;
    box-sizing:border-box;
    -webkit-mask-image:-webkit-radial-gradient(white,black);
    -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
    -webkit-animation:badge-color 7s linear infinite;
    animation:badge-color 7s linear infinite;
}

.pro_badge-bg{position:absolute;left:0;top:0;width:100%;height:100%;
  background:#009ff9;opacity:0;
  -webkit-animation:badge-bg 7s linear infinite;animation:badge-bg 7s linear infinite}

.pro_badge-txt{
    grid-area:1/1;
    justify-self:center;
    white-space:nowrap;
    overflow:hidden;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    will-change:transform;
}
.pro_badge-txt > span{display:block}
.pro_badge-promo{
  -webkit-animation:badge-promo 7s ease-in-out infinite;
  animation:badge-promo 7s ease-in-out infinite
}
.pro_badge-promo > span{
  -webkit-animation:badge-promo-in 7s ease-in-out infinite;
  animation:badge-promo-in 7s ease-in-out infinite
}
.pro_badge-new{
  -webkit-transform:translateX(-100%);transform:translateX(-100%);
  -webkit-animation:badge-new 7s ease-in-out infinite;
  animation:badge-new 7s ease-in-out infinite}
.pro_badge-new > span{
  -webkit-transform:translateX(100%);transform:translateX(100%);
  -webkit-animation:badge-new-in 7s ease-in-out infinite;
  animation:badge-new-in 7s ease-in-out infinite}

.pro_badge-mover{
    position:absolute;
    right:-7px;
    top:2px;
    width:22.68px;
    height:100%;
  -webkit-animation:badge-move 7s ease-in-out infinite;animation:badge-move 7s ease-in-out infinite
}
.pro_badge-mover .pro_badge-icon{
    position:absolute;
    left:0;
    top:1px;
    width:11px;
    height:16px;
    display:block;
  -webkit-transform-origin:50% 55%;transform-origin:50% 55%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform;
  -webkit-animation:badge-tilt 7s ease-in-out infinite;
  animation:badge-tilt 7s ease-in-out infinite;
  z-index:5;
}
.pro_badge-shine{
    position:absolute;
    right: 14px;
    top: -5px;
    width:10px;
    height:120%;
    opacity:0;
    background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  -webkit-transform:skewX(-12deg);transform:skewX(-12deg);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform,opacity;
  -webkit-animation:badge-shine 7s linear infinite,badge-shine-angle 7s ease-in-out infinite;
  animation:badge-shine 7s linear infinite,badge-shine-angle 7s ease-in-out infinite;
  z-index:1;
}


@media (prefers-reduced-motion:reduce){
  .pro_badge,.pro_badge-bg,.pro_badge-txt,.pro_badge-txt > span,.pro_badge-mover,.pro_badge-mover .pro_badge-icon,.pro_badge-shine{-webkit-animation:none;animation:none}
  .pro_badge-new,.pro_badge-shine{display:none}
}

/* ball: from the right edge to just left of the label area (100% = badge width) */
@-webkit-keyframes badge-move{
  0%,19.68%{right:-8px}
  25.12%,26.1%{right:calc(100% - 30.4px)}
  32%,39.52%{right:-8px}
  44.8%,45.92%{right:calc(100% - 30.4px)}
  51.68%,100%{right:-8px}
}
@-webkit-keyframes badge-promo{
  0%,19.68%{-webkit-transform:translateX(0)}
  24.4%,46.6%{-webkit-transform:translateX(-100%)}
  51.68%,100%{-webkit-transform:translateX(0)}
}
@-webkit-keyframes badge-promo-in{
  0%,19.68%{-webkit-transform:translateX(0)}
  24.4%,46.6%{-webkit-transform:translateX(100%)}
  51.68%,100%{-webkit-transform:translateX(0)}
}
@-webkit-keyframes badge-new{
  0%,26.8%{-webkit-transform:translateX(-100%)}
  32%,39.52%{-webkit-transform:translateX(0)}
  44.1%,100%{-webkit-transform:translateX(-100%)}
}
@-webkit-keyframes badge-new-in{
  0%,26.8%{-webkit-transform:translateX(100%)}
  32%,39.52%{-webkit-transform:translateX(0)}
  44.1%,100%{-webkit-transform:translateX(100%)}
}
@-webkit-keyframes badge-bg{
  0%,19.68%{opacity:0}
  22.4%,50.72%{opacity:1}
  52.8%,100%{opacity:0}
}
@-webkit-keyframes badge-shine{
  0%,19.6%{opacity:0}
  20%,32.8%{opacity:1}
  33.6%,39.2%{opacity:.35}
  39.5%,51.7%{opacity:1}
  52.5%,100%{opacity:0}
}

@keyframes badge-move{
  0%,19.68%{right:-8px}
  25.12%,26.1%{right:calc(100% - 30.4px)}
  32%,39.52%{right:-8px}
  44.8%,45.92%{right:calc(100% - 30.4px)}
  51.68%,100%{right:-8px}
}
@keyframes badge-promo{
  0%,19.68%{transform:translateX(0)}
  24.4%,46.6%{transform:translateX(-100%)}
  51.68%,100%{transform:translateX(0)}
}
@keyframes badge-promo-in{
  0%,19.68%{transform:translateX(0)}
  24.4%,46.6%{transform:translateX(100%)}
  51.68%,100%{transform:translateX(0)}
}
@keyframes badge-new{
  0%,26.8%{transform:translateX(-100%)}
  32%,39.52%{transform:translateX(0)}
  44.1%,100%{transform:translateX(-100%)}
}
@keyframes badge-new-in{
  0%,26.8%{transform:translateX(100%)}
  32%,39.52%{transform:translateX(0)}
  44.1%,100%{transform:translateX(100%)}
}
@keyframes badge-bg{
  0%,19.68%{opacity:0}
  22.4%,50.72%{opacity:1}
  52.8%,100%{opacity:0}
}
@keyframes badge-shine{
  0%,19.6%{opacity:0}
  20%,32.8%{opacity:1}
  33.6%,39.2%{opacity:.35}
  39.5%,51.7%{opacity:1}
  52.5%,100%{opacity:0}
}

/* tilt: hard-coded -32deg (no var(), for old iOS WebKit) */
@-webkit-keyframes badge-tilt{
  0%,19.68%{-webkit-transform:rotate(0deg)}
  25.12%,26.1%{-webkit-transform:rotate(-32deg)}
  32%,39.52%{-webkit-transform:rotate(0deg)}
  44.8%,45.92%{-webkit-transform:rotate(-32deg)}
  51.68%,100%{-webkit-transform:rotate(0deg)}
}
@keyframes badge-tilt{
  0%,19.68%{transform:rotate(0deg)}
  25.12%,26.1%{transform:rotate(-32deg)}
  32%,39.52%{transform:rotate(0deg)}
  44.8%,45.92%{transform:rotate(-32deg)}
  51.68%,100%{transform:rotate(0deg)}
}

/* shine angle: -12deg - (-32deg) = 20deg (no calc()/var() inside skewX) */
@-webkit-keyframes badge-shine-angle{
  0%,19.68%{-webkit-transform:skewX(-12deg) translateX(0)}
  25.12%,26.1%{-webkit-transform:skewX(20deg) translateX(3.36px)}
  32%,39.52%{-webkit-transform:skewX(-12deg) translateX(0)}
  44.8%,45.92%{-webkit-transform:skewX(20deg) translateX(3.36px)}
  51.68%,100%{-webkit-transform:skewX(-12deg) translateX(0)}
}
@keyframes badge-shine-angle{
  0%,19.68%{transform:skewX(-12deg) translateX(0)}
  25.12%,26.1%{transform:skewX(20deg) translateX(3.36px)}
  32%,39.52%{transform:skewX(-12deg) translateX(0)}
  44.8%,45.92%{transform:skewX(20deg) translateX(3.36px)}
  51.68%,100%{transform:skewX(-12deg) translateX(0)}
}

@-webkit-keyframes badge-color{
  0%,19.68%{color:#9A9A9A}
  22.4%,50.72%{color:#fff}
  52.8%,100%{color:#9A9A9A}
}
@keyframes badge-color{
  0%,19.68%{color:#9A9A9A}
  22.4%,50.72%{color:#fff}
  52.8%,100%{color:#9A9A9A}
}

/* Paused until JS adds .is-animating */
.pro_badge,
.pro_badge *{
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

.pro_badge.is-animating,
.pro_badge.is-animating *{
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
}
.promo_new_bdg{
  right: -13px !important;
}
.navtext.promo_tab_bdg.anim_container_cz_wrapper {
    margin-right: 13px;
}
@media (max-width: 480px) {
  .navbar-inner .head3{
    line-height: 14px !important;
  }
  .navtext.promo_tab_bdg{
    padding-right: 7px !important;
  }
}

@media (min-width: 500px) {
    .pro_badge-mover .pro_badge-icon{
      top: 2px;
      width: 12px;
      height: 18px;
    }
    .pro_badge{
      padding: 0px 18px 0px 14px;
    }
    .navtext.promo_tab_bdg {
      padding-right: 10px !important;
    }
    .navbar-inner .head3{
      line-height: 1.5;
    }
}