.hwrap {
 // overflow: hidden; /* HIDE SCROLL BAR */
  //background: #eee;
 // height: 12vh;
  display:inline-block;
}

/* (B) MOVING TICKER WRAPPER */
.hmove {
  display: flex;
 
}

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
}

.hitem > span {
  color: #4cbb17;
  font-weight: bold;
}

/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-500%, 0, 0);
  }
}
.hmove {
  animation: tickerh linear 40s infinite;
  animation-delay: 0s;
 
}
.hmove:hover {
  animation-play-state: paused;
}






/*//       MEDIA QURIES   /////*/






/* -------------------------------------------------- 
	custom for 320px & 480px 
	/* -------------------------------------------------- */

@media only screen and (max-width: 767px) {
 .hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
}
 
 
 
}

/* -------------------------------------------------- 
	design for 480px
	/* -------------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
  }
}

/* -------------------------------------------------- 
	design for 320px
	/* -------------------------------------------------- */

@media only screen and (max-width: 480px) {
      .hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
    }   
}

/* section control */
@media only screen and (min-device-width: 768) and (max-device-width: 1024) and (orientation: portrait) {
      .hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
 }
}

@media only screen and (max-width: 992px) {
  .hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
 }
}

@media only screen and (max-width: 992px) {
.hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
}
}




 
 /* 480px */ 
@media only screen and (max-width: 480px) {
.hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  font-size: 1rem;
	
}
  }