/* (A) OUTER CONTAINER */
.hwrap {
  /* (A1) DIMENSIONS */
  width: 100%;
  height: 40px; /* OPTIONAL */
top:-8px;

  /* (A2) COSMETICS */
  background: white;
  border: 0px solid #ffcf1f;
  overflow: hidden; /* HIDE SCROLLBARS */
}

/* (B) MIDDLE CONTAINER - FLEX LAYOUT */
.hmove {
  display: flex;
  position: relative;
  top: 0; right: 0;
}

/* (C) SLIDES - FORCE INTO ONE LONG HORIZONTAL ROW */
.hslide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 5px;
}

/* (D) SLIDE ANIMATION */
@keyframes slideh {
  /* (D0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
 

  /* (D1) BUT THE ABOVE WILL SHIFT NON-STOP */
  /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
  

 0% { left: -20%; }
  30% { left:0; }
  33% { left: 25%; }
  63% { left: 25%; }
  66% { left: 25%; }
  80% { left: 100%; }
  100% { left: 60%; }



}
.hmove { animation: slideh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }