.switch-menu {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0 auto;
}
.switch-menu__item {
  font-family: 'DINCondensed', sans-serif;
  font-size: 1.6rem;
  color: #a1a1a1;
  text-transform: uppercase;
  background-color: #606060;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}
.switch-menu__item a,
.switch-menu__item span {
  display: block;
  padding: 14px 55px;
  color: #a1a1a1;
  transition: color 0.3s ease;
}
.switch-menu__item:hover a,
.switch-menu__item:hover span {
  color: #fff;
}
.switch-menu__item:last-child {
  margin-left: -40px;
}
.switch-menu__item--active-trail {
  color: #fff;
  cursor: initial;
}
.switch-menu__item--active-trail a,
.switch-menu__item--active-trail span {
  color: #fff;
}
.switch-menu__item:first-child:not(.switch-menu__item--active-trail) {
  border-radius: 100px 0 0 100px;
}
.switch-menu__item:last-child:not(.switch-menu__item--active-trail) {
  border-radius: 0 100px 100px 0;
}
.switch-menu__input {
  display: none;
}
.switch-menu__label.option {
  display: block;
  padding: 14px 55px;
  color: #a1a1a1;
  transition: color 0.3s ease;
  cursor: pointer;
}
.installation-page .switch-menu__item {
  position: relative;
}
.installation-page .switch-menu__item a,
.installation-page .switch-menu__item span {
  padding: 22px 80px;
}
.installation-page .switch-menu__item span {
  position: relative;
  z-index: 5;
}
.installation-page .switch-menu__item:first-child:after {
  content: 'WALL-MOUNT';
  left: calc(100% - 40px);
  padding: 22px 80px;
  position: absolute;
  top: 0;
  background-color: #ed0f00;
  border-radius: 100px;
  white-space: nowrap;
  transition: 0.4s linear;
  z-index: 3;
  color: transparent;
}
.installation-page .switch-menu__item--active-trail a,
.installation-page .switch-menu__item--active-trail span {
  z-index: 6;
}
.installation-page .switch-menu__item--active-trail:first-child:after {
  content: 'IN-GROUND';
  left: 0;
}
.pdp-header .switch-menu {
  margin-bottom: 40px;
}
.pdp-header .switch-menu__item {
  position: relative;
  background-color: #606060;
}
.pdp-header .switch-menu__item label,
.pdp-header .switch-menu__item span {
  color: #fff;
  position: relative;
  z-index: 5;
  padding: 12px 36px;
}
.pdp-header .switch-menu__item:first-child:after {
  content: '180° PRO RIM';
  right: -122px;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  transition: 0.4s linear;
  z-index: 3;
  color: transparent;
  padding: 12px 36px;
}
.pdp-header .switch-menu__item:last-child {
  margin-left: -25px;
}
.pdp-header .switch-menu__item--active-trail label,
.pdp-header .switch-menu__item--active-trail span {
  color: #FF2C1D;
  z-index: 6;
}
.pdp-header .switch-menu__item--active-trail:first-child:after {
  content: 'COLLEGIATE RIM';
  right: 0;
}
.radio-switcher .switch-menu {
  margin-bottom: 0;
}
.radio-switcher .switch-menu__label {
  color: #fff;
  position: relative;
  z-index: 5;
  padding: 12px 36px;
}
.radio-switcher .switch-menu__item {
  position: relative;
  background-color: #606060;
  margin-top: 0;
  margin-bottom: 0;
}
.radio-switcher .switch-menu__item .switch-menu__toddler {
  left: calc(100% - 26px);
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  transition: 0.4s linear;
  z-index: 3;
  color: transparent;
  padding: 11px 36px;
  margin-top: 1px;
}
.radio-switcher .switch-menu__item:last-child {
  margin-left: -25px;
}
.radio-switcher .switch-menu__item--active-trail .switch-menu__label {
  color: #FF2C1D;
  z-index: 6;
}
.radio-switcher .switch-menu__item--active-trail .switch-menu__toddler {
  left: 1px;
}
.two-columns-block .switch-menu__label {
  padding: 12px 35px;
}
.two-columns-block .switch-menu__item .switch-menu__toddler {
  padding: 11px 35px;
}
.static-page .switch-menu__item {
  position: relative;
}
.static-page .switch-menu__item a,
.static-page .switch-menu__item span {
  padding: 14px 55px;
}
.static-page .switch-menu__item span {
  position: relative;
  z-index: 5;
}
.static-page .switch-menu__item:first-child:after {
  content: 'Accessories';
  left: calc(100% - 40px);
  padding: 14px 55px;
  position: absolute;
  top: 0;
  background-color: #ed0f00;
  border-radius: 100px;
  white-space: nowrap;
  transition: 0.4s linear;
  z-index: 3;
  color: transparent;
}
.static-page .switch-menu__item--active-trail a,
.static-page .switch-menu__item--active-trail span {
  z-index: 6;
}
.static-page .switch-menu__item--active-trail:first-child:after {
  content: 'Basketball systems';
  left: 0;
}
@media (max-width: 1024px) {
  .pdp-header .switch-menu {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .switch-menu__item {
    font-size: 1.4rem;
  }
  .switch-menu__item a,
  .switch-menu__item span {
    padding: 5px 25px;
  }
  .switch-menu__item:last-child {
    margin-left: -16px;
  }
  .pdp-header .switch-menu__item:last-child,
  .radio-switcher .switch-menu__item:last-child {
    margin-left: -16px;
  }
  .installation-page .switch-menu__item a,
  .installation-page .switch-menu__item span {
    padding: 13px 54px;
  }
  .installation-page .switch-menu__item:first-child:after {
    padding: 13px 54px;
    left: calc(100% - 16px);
  }
  .installation-page .switch-menu__item--active-trail:first-child:after {
    left: 0;
  }
  .pdp-header .switch-menu__item {
    border: 1px #8d8d8d solid;
  }
  .pdp-header .switch-menu__item span {
    padding: 12px 23px;
  }
  .pdp-header .switch-menu__item:first-child:after {
    padding: 12px 23px;
    right: auto;
    left: calc(100% - 15px);
  }
  .pdp-header .switch-menu__item--active-trail:first-child:after {
    left: 0;
  }
  .radio-switcher .switch-menu__label {
    padding: 12px 28px;
  }
  .radio-switcher .switch-menu__item .switch-menu__toddler {
    padding: 11px 28px;
    left: calc(100% - 17px);
  }
  .radio-switcher .switch-menu__item--active-trail .switch-menu__toddler {
    left: 1px;
  }
  .static-page .switch-menu__item a,
  .static-page .switch-menu__item span {
    padding: 5px 32px;
  }
  .static-page .switch-menu__item:first-child:after {
    padding: 5px 32px;
    left: calc(100% - 14px);
  }
  .static-page .switch-menu__item--active-trail:first-child:after {
    left: 0;
  }
}
@media (max-width: 340px) {
  .switch-menu__item {
    font-size: 1.2rem;
  }
}