@keyframes AboutPLAY {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -120600px 0px;
  }
}
.ABOUT {
  animation-timing-function: steps(600);
  width: 201px;
  height: 157px;
  background-repeat: no-repeat;
  animation-iteration-count: infinite;
}
.ABOUT.play {
  animation-name: AboutPLAY;
}

.aboutCont{
	position: absolute;
	-webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;

	
}

@media (min-width: 600px) {
	
	.ABOUT{
  animation-duration: 25000ms;
	}
	
}
@media (max-width: 599px) {
	
	.ABOUT{
  animation-duration: 12000ms;
	}
	
}




@media (min-width: 1251px) {
	
	.aboutCont{
		transform: scale(1);
		left: 205px;
		top: -30.5px;
	}
	
}


@media (max-width: 1250px) and (min-width: 1021px) {
	
	.aboutCont{
		transform: scale(.85);
		left: 134px;
		top: -39.5px;
	}
	
}


@media (max-width: 1020px) and (min-width: 780px) {
	
	.aboutCont{
		transform: scale(.8);
		left: 159px;
		top: -37.5px;
	}
	
}

@media (max-width: 779px) and (min-width: 600px) {
	
	.aboutCont{
		transform: scale(.65);
		left: 100px;
		top: -44px;
	}
	
}

@media (max-width: 599px) and (min-width: 450px) {
	
	.aboutCont{
		transform: scale(.6);
		left: 75px;
		top: -50px;
	}
	
}

@media (max-width: 449px) and (min-width: 350px) {
	
	.aboutCont{
		transform: scale(.55);
		left: 50px;
		top: -54px;
	}
	
}


@media (max-width: 349px) and (min-width: 250px) {
	
	.aboutCont{
		transform: scale(.43);
		left: 34px;
		top: -55px;
	}
	
}


@media (max-width: 249px) {
	
	.aboutCont{
		transform: scale(.4);
		left: 23px;
		top: -58px;
	}
	
}