.scroll-box{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: #009933;
}



	
.scroll-box1{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: #ffd633;
}



.scroll-left {
  height:auto;
  width:fit-content;
}

.scroll-left h2 {
  height:auto;
  margin: 0;
  /* Starting position */
  -moz-transform: translateX(30%);
  -webkit-transform: translateX(30%);
  transform: translateX(30%);
  /* Apply animation to this element */
  -moz-animation: scroll-left 90s linear infinite;
  -webkit-animation: scroll-left 90s linear infinite;
  animation: scroll-left 190s linear infinite; 
}





@-moz-keyframes scroll-left {
  0% 	{-moz-transform: translateX(100%);  }
  100% 	{-moz-transform: translateX(-100%);}
}

@-webkit-keyframes scroll-left {
  0% 	{ -webkit-transform: translateX(100%);  }
  100% 	{ -webkit-transform: translateX(-100%);}
}

@keyframes scroll-left {
  0% 	{ -moz-transform: translateX(10%);
    /* Browser bug fix */
    -webkit-transform: translateX(10%);
    /* Browser bug fix */
    transform: translateX(30%);
  }
  100% { -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);
  }
}




.scroll-right {
  height:auto;
  width:fit-content;
}


.scroll-right h2 {
  height:auto;
  margin: 0;
  /* Starting position */
  -moz-transform: translateX(30%);
  -webkit-transform: translateX(30%);
  transform: translateX(30%);
  /* Apply animation to this element */
  -moz-animation: scroll-right 90s linear infinite;
  -webkit-animation: scroll-right 90s linear infinite;
  animation: scroll-right 190s linear infinite;
}




/* Move it (define the animation) */
@-moz-keyframes scroll-right {
 0%   { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
 0%   { -webkit-transform: translateX(-100%); }
 100% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
 0%   { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 		
 }
 100% { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 
 }
}

   
  .container {
        width: 1000px;
        height: 250px;
        overflow: hidden;
    }
    .scrolling {
        white-space: nowrap;
    }
    .cell {
       display: inline-block;
        height: 250px;
        width: 650px;
    }
	
	   
/* style the pictures */
div.scroll-picture {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 20px;
}

div.scroll-picture img {
  padding: 20px;

}

figcaption {
	background-color: black;
	color: white;
	font-style: italic;
	padding: 10px;
	text-align: center;
	}