/* (A) OUTER CONTAINER */
.hwrap {
  /* (A1) DIMENSIONS */
  width: 100%;
  min-height: 150px; /* OPTIONAL */
  top: 21%;
  position: relative;
  /* (A2) COSMETICS */
  /*background: #fffdea;*/
  /*border: 2px solid #ffcf1f;*/
  overflow: hidden; /* HIDE SCROLLBARS */
}

/* (B) MIDDLE CONTAINER - FLEX LAYOUT */
.hmove {
  display: flex;
  position: relative;
  top: 21px;
  right: 0;
  align-items: center !important;
  height: 99px;
}
.hslide h1,
.hslide h2,
.hslide span {
   font-size: 30px;
   font-weight: 500 !important;
   color: #F5DF4D ;
   text-align: center;
   margin-bottom: 0;
}

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

}

/* (D) SLIDE ANIMATION */
@keyframes slideh {
  /* (D0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
  0% { right: 0; }
  33% { right: 100%; }
  66% { right: 200%; }
  100% { right: 0; }

  /* (D1) BUT THE ABOVE WILL SHIFT NON-STOP */
  /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
  0% { right: 0; }
  50% { right: 0; }
  55% { right: 100%; }
  95% { right: 100%; }
  100% { right: 0; }

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

@media only screen and (min-width:  768px) {
   .hwrap {
     top: 45%;
   }
   .hslide {
      padding-left: 105px;
      left: 0;
      position: relative;
      /*margin-bottom: 25px;*/
      text-align: left;
   }
   .hwrap::before {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -13px;*/
       width: 15px;
       height: 60px;
       background-color: #F5DF4D;
       top: 50%;
       transform: translateY(-50%);
   }
   .hwrap::after {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -60px;*/
       width: 100px;
       height: 15px;
       background-color: #F5DF4D;
       top: 50%;
       transform: translateY(-50%);
   }
   .hslide h1,
   .hslide h2,
   .hslide span {
      font-size: 35px;
      text-align: left;
   }
	.hmove {
	   height: 99px;
	}
   
}
@media only screen and (min-width:  1200px) {
   .hwrap {
      position: absolute;
      top: 64%;
      max-height: 100px;
   }
   .hwrap .hmove {
      height: 100px !important;
	  top: 21px !important;
   }
   .hslide {
      padding-left: 205px;
   }
   .hwrap::before {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -13px;*/
       width: 18px;
       height: 90px;
       background-color: #F5DF4D;
       top: 50%;
       transform: translateY(-50%);
   }
   .hwrap::after {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -60px;*/
       width: 200px;
       height: 18px;
       background-color: #F5DF4D;
       top: 50%;
       transform: translateY(-50%);
   }
   .hslide h1,
   .hslide h2,
   .hslide span {
      font-size: 40px;
      text-align: left;
   }
}
@media only screen and (min-width:  1366px) {
   .hwrap {
      position: absolute;
      bottom: 100px;
      max-height: 100px;
   }

   .hslide {
      padding-left: 305px;
   }
   .hwrap::before {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -13px;*/
       width: 22px;
       height: 90px;
       top: 50%;

   }
   .hwrap::after {
      content: '';
       position: absolute;
       left: 0;
       /*margin-top: -60px;*/
       width: 300px;
       height: 22px;

   }
   .hslide h1,
   .hslide h2,
   .hslide span {
      font-size: 50px;
      text-align: left;
   }
}