@keyframes contact {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -189900px 0px;
  }
}
.contac {
  animation-duration: 30000ms;
  animation-timing-function: steps(900);
  width: 211px;
  height: 146px;
  background-repeat: no-repeat;
  animation-iteration-count: infinite;
}
.contac.play {
  animation-name: contact;
}

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

	
}

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




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


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


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

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

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

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


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


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