.hero-cta h2 {
  font-size: 8.3vw;
}
@media screen and (min-width: 640px) {
  .hero-cta h2 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1024px) {
  .hero-cta h2 {
    font-size: 2.8rem;
  }
}
.hero-cta .pill {
  min-width: 15vw;
  margin-left: 0;
}
@media screen and (min-width: 640px) {
  .hero-cta .pill {
    min-width: 6.6rem;
    font-size: 1.5rem;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) {
  .hero-cta .pill {
    font-size: 2rem;
  }
}
/*LEGWEAR*/
@media screen and (min-width: 640px) {
  .hns-legwear h3 {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1024px) {
  .hns-legwear h3 {
    font-size: 1.6rem;
  }
}
.hns-legwear h4 {
  font-size: 7vw;
}
.hns-legwear .pill {
  margin-top: 2rem;
}
@media screen and (min-width: 640px) {
  .hns-legwear h4 {
    font-size: 2rem;
  }
}
/*SOCKS & UNDERWEAR*/
.stepSpring {
  font-size: 4.5vw;
  text-align: center;
  font-style: italic;
}
@media screen and (min-width: 1040px) {
  .stepSpring {
    font-size: 3rem;
    background: white;
    text-align: left;
    font-style: unset;
    padding: 5px;
  }
}
@media screen and (min-width: 640px) {
  .hns-socks-underwear h4 {
    font-size: 4rem;
    padding-bottom: 5px;
  }
}
@media screen and (min-width: 640px) {
  .hns-socks-underwear .col-1 .pill {
    min-width: 7rem;
    margin-top: 2rem;
  }
}
@media screen and (min-width: 640px) {
  .legwearSale h4 {
    font-size: 3rem;
    padding-bottom: 5px;
  }
}
.legwearSale h3 {
  font-size: 2.2rem;
}
.favoriteTxt {
  font-size: 2rem;
}
@media screen and (min-width: 640px) {
  .hns-legwear .favoriteTxt {
    font-size: 2.1vw;
  }
}
@media screen and (min-width: 1024px) {
  .hns-legwear .favoriteTxt {
    font-size: 2.3rem;
  }
}
.lwSale h4 {
  font-size: 3.4rem;
}
@media screen and (min-width: 640px) {
  .lwSale h4 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 750px) {
  .lwSale h4 {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 1040px) {
  .lwSale h4 {
    font-size: 4rem;
  }
}
/*Rotate Counter-clockwise Function*/
.hns-newRotate {
  animation: rotation 5s linear;
}
.hns-legwear:hover.animate .hns-newRotate {
  animation: rotation_hover 5s linear;
}
@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotation_hover {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
/*Teeshirt Bar*/
.hns-teeBnr {
  width: 100vw;
  padding: 2rem 0 0;
}
.hns-teeBnr h1 {
  font-size: 17vw;
  margin: 3rem 4rem 2rem 2rem;
}
@media only screen and (min-width: 640px) {
  .hns-teeBnr h1 {
    font-size: 5vw;
    margin: 3rem 4rem 2rem 2rem;
  }
}
@media only screen and (min-width: 1040px) {
  .hns-teeBnr h1 {
    font-size: 5vw;
    margin: 3rem 4rem 2rem 2rem;
  }
}
@media only screen and (min-width: 1024px) {
  .hns-teeBnr h1 {
    font-size: 8rem;
    margin: 3rem 4rem 2rem 2rem;
  }
}
.hns-teeBnr p {
  font-size: 8vw;
}
@media only screen and (min-width: 640px) {
  .hns-teeBnr p {
    font-size: 3vw;
  }
}
@media only screen and (min-width: 1040px) {
  .hns-teeBnr p {
    font-size: 3.6rem;
  }
}
.buy3 {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #000;
  border-radius: 50%;
  padding: 0.8em 1.4em;
  box-shadow: -0.6em 0.1em 0 #beb3af;
  text-align: center;
}
@media only screen and (min-width: 640px) {
  .buy3 {
    padding: 0.8em 1em;
  }
}
@media only screen and (min-width: 1040px) {
  .buy3 {
    padding: 0.5em 1.1em;
  }
}
.buy3 p {
  white-space: nowrap;
  margin: 0.5em 0 0;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.01em;
  font-size: 4.6vw;
}
@media only screen and (min-width: 640px) {
  .buy3 p {
    font-size: 1.8vw;
  }
}
@media only screen and (min-width: 1040px) {
  .buy3 p {
    font-size: 2rem;
  }
}
.hns-teeBnr .col-2 span {
  font-size: 2vw;
}
.classComf {
  background: #000;
  padding: 2em 0em;
  width: 100%;
}
@media only screen and (min-width: 640px) {
  .classComf {
    padding: 0;
  }
}
.hns-teeBnr .pill {
  padding: 1rem 1rem;
  margin: 0 1rem;
  min-width: 7.2rem;
}
@media only screen and (min-width: 640px) {
  .hns-teeBnr .pill {
    margin: 0 1.5rem;
    min-width: 10rem;
  }
}
.hns-teeShopCTA {
  padding: 2rem;
  background-color: #e082c5;
  height: fit-content;
  width: fit-content;
}
.bannerStripe:before {
  content: "";
  display: block;
  background: #000;
  width: 50%;
  height: 30%;
  left: 0;
  position: absolute;
  top: 0%;
  z-index: -5;
}
@media only screen and (min-width: 1024px) {
  .bannerStripe:before {
    height: 41%;
    top: 17%;
  }
}
.bannerStripe:after {
  display: none;
}
@media only screen and (min-width: 640px) {
  .dtWhite {
    color: white;
  }
  .bannerStripe:after {
    content: "";
    display: block;
    background: #000;
    width: 50%;
    height: 40%;
    right: 0;
    position: absolute;
    bottom: 15%;
    z-index: -5;
  }
  .classComf {
    background: none;
    padding: 0, 2rem;
    width: fit-content;
  }
  .hns-teeDot {
    -webkit-box-shadow: -10px 10px 0px 0px #beb3af;
    box-shadow: -10px 10px 0px 0px #beb3af;
  }
}
@media only screen and (min-width: 640px) and only screen and (min-width: 1040px) {
  .bannerStripe:after {
    height: 30%;
    bottom: 15%;
  }
}
@media only screen and (min-width: 640px) and only screen and (min-width: 1130px) {
  .bannerStripe:after {
    height: 40%;
  }
}
@media only screen and (min-width: 640px) and only screen and (min-width: 1230px) {
  .bannerStripe:after {
    top: 45%;
  }
}
@media only screen and (min-width: 640px) and only screen and (min-width: 1040px) {
  .classComf {
    background: none;
    padding: 2rem;
  }
}
@media only screen and (min-width: 1024px) {
  .hns-teeBnr .col-2 p {
    font-size: 3rem;
  }
  .hns-teeBnr .col-2 span {
    font-size: 3rem;
  }
}
/**clearance**/
.hns-clearance {
  position: relative;
}
.hns-clearance:focus {
  border: 2px solid blue;
}
@keyframes text-color {
  0%,
  33% {
    color: #000;
  }
  34%,
  66% {
    color: #a8e2f3;
  }
  67%,
  98% {
    color: #fff8ae;
  }
  99%,
  100% {
    color: #000;
  }
}
@keyframes text-color_hover {
  0%,
  33% {
    color: #000;
  }
  34%,
  66% {
    color: #a8e2f3;
  }
  67%,
  98% {
    color: #fff8ae;
  }
  99%,
  100% {
    color: #000;
  }
}
.hns-clearance h3 {
  color: #fff;
  margin: 0 0 0.8rem;
  line-height: 0.8;
  letter-spacing: 0.05em;
  font-size: 35vw;
}
@media screen and (min-width: 640px) {
  .hns-clearance h3 {
    font-size: 12vw;
  }
}
@media screen and (min-width: 1024px) {
  .hns-clearance h3 {
    margin: 0;
  }
}
.hns-clearance h3 .animated {
  color: #b5a9a5;
  animation: text-color 3s ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 640px) {
  .hns-clearance h3 .animated {
    margin: auto 0 0;
  }
}
.hns-clearance .up-to {
  font-size: 5rem;
  line-height: 0.3;
  letter-spacing: 0.05em;
}
.hns-clearance p {
  margin: 0.5rem 0 0;
  color: #fff;
  text-transform: uppercase;
  line-height: 0.3;
  letter-spacing: 0.05em;
}
.hns-clearance p span {
  color: #ff0000;
}
.hns-clearance.clearance_animate h3 .animated {
  animation: text-color_hover 3s ease-in-out;
  animation-fill-mode: forwards;
}