@charset "utf-8";
/* CSS Document */

@media (min-width:768px) {
/*animation element*/


.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/
	


.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 1000ms linear;
  -webkit-transition: all 1000ms linear;
  -o-transition: all 1000ms linear;
  transition: all 1000ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


.animation-element.slide-left.out-view {
  opacity: 0;
  -moz-transform: translate3d(-40px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-40px, 0px);
  -ms-transform: translate(-40px, 0px);
  transform: translate3d(-40px, 0px, 0px);
}


/*animation element sliding left*/


.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 1000ms linear;
  -webkit-transition: all 1000ms linear;
  -o-transition: all 1000ms linear;
  transition: all 1000ms linear;
  -moz-transform: translate3d(40px, 0px, 0px);
  -webkit-transform: translate3d(400px, 0px, 0px);
  -o-transform: translate(40px, 0px);
  -ms-transform: translate(40px, 0px);
  transform: translate3d(40px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}



.animation-element.slide-top {
  opacity: 0;
  -moz-transition: all 1000ms linear;
  -webkit-transition: all 1000ms linear;
  -o-transition: all 1000ms linear;
  transition: all 1000ms linear;
  -moz-transform: translate3d(0px, 300px, 0px);
  -webkit-transform: translate3d(0px, 300px, 0px);
  -o-transform: translate(300px, 0px);
  -ms-transform: translate(300px, 0px);
  transform: translate3d(0px, 300px, 0px);
}

.animation-element.slide-top.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


}








.talentimg {
	animation-name: backgroundColorPalette;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 
	/* linear is enabled default, it’s not necessary to add it make it work but it can make your code more expressive */
}


@keyframes backgroundColorPalette {
	0% {
		background: url("../images/Maskgroup.svg") no-repeat;
	}
	25% {
		background: url("../images/Maskgroup2.svg") no-repeat;
	}
	50% {
		background: url("../images/Maskgroup.svg") no-repeat;
	}
	75% {
		background: url("../images/Maskgroup2.svg") no-repeat;
	}
	100% {
		background: url("../images/Maskgroup.svg") no-repeat;
	}
}