.box-intro{
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein
 {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to 
  {
    margin-left: 70px;
    width: 100%;
  }
}

.box-intro1{
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein
 {
  from {
    margin-right: 100%;
    width: 300%; 
  }

  to 
  {
    margin-right: 70px;
    width: 100%;
  }
}
.zoomIn{
  animation-duration: 3s;
  animation-name: zoomIn;
}

@keyframes zoomIn
 {
  20%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
}
	100%{
		opacity:1
		}
} 
.zoomIn1{
  animation-duration: 3s;
  animation-name: zoomIn;
}

@keyframes zoomIn
 {
  0%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
}
	100%{
		opacity:1
		}
		} 
		
		

.bounceOut {

  animation-duration: 3s;
 
  animation-name: bounceOut;
}

		
*@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}*/

.shake {
animation-duration:3s;
  animation-name: shake;
}
		
@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-75px, 0, 0);
    transform: translate3d(-75px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }
}
	
		@media only screen and (max-width: 520px) {
			.shake {
animation-duration:3s;
  animation-name: shake;
}
@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-75px, 0, 0);
    transform: translate3d(-75px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }
}

}


*/


.rotateIn {
 animation-duration:5s;
  animation-name: rotateIn;
}


@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

	
	@media only screen and (max-width: 520px) 
	{
		.rotateIn {
 animation-duration:5s;
  animation-name: rotateIn;
}


@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

		
/* .services
{
  animation-duration: 3s;
  animation-name: zoomIn;
}
 */
/* @keyframes zoomIn
 {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to 
  {
    margin-left: 70px;
    width: 100%;
  }
} */
/* @keyframes zoomIn{
	0%{
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(1.3,1.3,1.3)
}
	50%{
		opacity:1
		}
}
.zoomIn{
	-webkit-animation-name:zoomIn;
	animation-name:zoomIn
	}
  */

	/*  {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; Safari
    -webkit-transition-timing-function: linear; Safari
    transition: width 2s;
    transition-timing-function: linear;
}

div:hover {
    width: 300px; 
}