[data-gameType = 'catchTheNumber'] .baloon{
	animation-name: baloonAsideMotion;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
@keyframes baloonAsideMotion{
	from{
		transform: translateX(-50px);
	}to{
		transform: translate(50px);
	}
}
[data-gameType = 'catchTheNumber'] .baloon .baloonNum,
[data-gameType = 'catchTheNumber'] .baloon .baloonFlare,
[data-gameType = 'catchTheNumber'] .baloon .baloonCircuit,
[data-gameType = 'catchTheNumber'] .baloon .baloonConfetti{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;		
}
[data-gameType = 'catchTheNumber'] .baloon .baloonNum{
	animation-name: baloonNum;
}
@keyframes baloonNum{
	from{
		opacity: 1;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(3);
	}
}
[data-gameType = 'catchTheNumber'] .baloon .baloonFlare{
	animation-name: baloonFlare;
}
@keyframes baloonFlare{
	from{
		opacity: 0.9;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(3);
	}
}
[data-gameType = 'catchTheNumber'] .baloon .baloonCircuit{
	animation-name: baloonCircuit;
}
@keyframes baloonCircuit{
	from{
		opacity: 1;
		transform: scale(0.3);
	}to{
		opacity: 0;
		transform: scale(3);
	}
}
[data-gameType = 'catchTheNumber'] .baloon .baloonConfetti{
	animation-name: baloonConfetti;
}
@keyframes baloonConfetti{
	from{
		opacity: 1;
		transform: scale(0.3);
	}to{
		opacity: 0;
		transform: scale(4);
	}
}
[data-gameType = 'sudoku'] .chalk{
	animation-name: clack;
	animation-fill-mode: both;
	animation-play-state: paused;
	animation-timing-function: linear;
	animation-duration: 2s;
}
[data-gameType = 'sudoku'] .words .wordEl[found] .chalk{
	animation-play-state: running;
}
@keyframes clack{
	from{
		opacity: 0;
		left: 0;
	}5%{
		opacity: 1
	}95%{
		opacity: 1;
	}to{
		opacity: 0;
		left: 100%;
	}
}
/*[data-gameType = 'sudoku']*/ .rightWrapper .rightWord{
	animation-name: rightWord;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes rightWord{
	from{
		transform: scale(0.7);
		opacity: 0;
	}30%{
		opacity: 1;		
	}70%{
		opacity: 1
	}to{	
		opacity: 0;
		transform: scale(2);
	}
}
[data-gameType = 'sudoku'] .finalLetterAnimation{
	color: white;
	text-shadow: 1px 1px 1px rgba(100,100,100,0.7);
	animation-name: finalLetterAnimation;
	animation-fill-mode: both;
	animation-duration: 2s;
	animation-timing-function: linear;
}
@keyframes finalLetterAnimation{
	from{
		transform: scale(1);
		opacity: 1;
	}70%{
		opacity: 1;
	}to{
		transform: scale(3)/* rotateY(-360deg)*/;
	//	transform: scale(3) rotateY(-180deg) rotateZ(-180deg);
		opacity: 0;
	}
}
/*.gameBody[data-gameType = 'box'] .boxElement .boxWrapper{
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: boxWrapperAnimation;
	animation-play-state: paused;
}
.gameBody[data-gameType = 'box'] .gameMainEl.animation .boxElement .boxWrapper{
	animation-play-state: running;
}
@keyframes boxWrapperAnimation{
	from{
		
	}to{
		left: 0;
	}
}*//*
.gameBody[data-gameType = 'box'] .boxElement .box .boxCap{
	animation-duration: 2s;
	animation-delay: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: boxCapAnimation;
	animation-play-state: paused;
}
.gameBody[data-gameType = 'box'] .gameMainEl.animation .boxElement .boxWrapper .boxCap{
	animation-play-state: running;
}
@keyframes boxCapAnimation{
	from{
				
	}60%{
		transform: translate(-86%,0);
	}to{
		transform: translate(-86%,250%) rotateZ(-30deg);
	}
}*//*
.gameBody[data-gameType = 'box'] .boxElement .box .boxImage{
	opacity: 0;
	transition-duration: 2s;
	transition-timing-function: linear;
}
.gameBody[data-gameType = 'box'] .gameMainEl.animation .boxElement .box .boxImage{
	opacity: 1;
}*//*
.gameBody[data-gameType = 'box'] .book{
	transition-duration: 2s;
	transition-delay: 0.5s;
	transition-timing-function: linear;
	opacity: 0;
	transform: translateY(-150%);
}*//*
.gameBody[data-gameType = 'box'] .gameMainEl.animation .book{
	transform: translateY(0);
	opacity: 1;
}
.gameBody[data-gameType = 'box'] .boxElement .box .boxImageWrapper{
	animation-name: boxShaking;
	animation-duration: 0.3s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count: 6;
	animation-delay: 3.5s;
	animation-play-state: paused;
}
@keyframes boxShaking{
	from{
		transform: translate(0,0);		
	}25%{
		transform: translate(-25px,25px);
	}50%{
		transform: translate(0,0);
	}75%{
		transform: translate(25px,-25px);
	}to{
		transform: translate(0,0);
	}
}*/
.gameBody[data-gameType = 'box'] .scrap{
	animation-name: dancingLetters;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-play-state: paused;
	animation-direction: alternate;
	
	animation-duration: 2s;
}
.gameBody[data-gameType = 'box'] .sockets{
	perspective: 400px;
}

@keyframes dancingLetters{
	from{
		transform: translate(0,0) rotateX(0);	
	}to{
	//	transform: translate(0,-80px) rotateY(45deg) rotateX(45deg);
		transform: translate(0,-80px) rotateX(45deg);
	}
}/*
.gameBody[data-gameType = 'box'] .arrows > img{
	animation-name: boxArrowAnim;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count: infinite;	
}
.gameBody[data-gameType = 'box'] .arrows > img:nth-of-type(2){animation-delay: 0.15s;}
.gameBody[data-gameType = 'box'] .arrows > img:nth-of-type(3){animation-delay: 0.30s;}
.gameBody[data-gameType = 'box'] .arrows > img:nth-of-type(4){animation-delay: 0.45s;}
.gameBody[data-gameType = 'box'] .arrows > img:nth-of-type(5){animation-delay: 0.6s;}
@keyframes boxArrowAnim{
	from{
		opacity: 0;
	}20%{
		opacity: 1;
	}50%{
		
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translateX(50px);
	}	
}
*/
.gameBody[data-gameType = 'box'] .scrapsWord{
	animation-name: scrapsWordAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
@keyframes scrapsWordAppearance{
	from{
		transform: translateY(-200px);
		opacity: 0;
	}20%{
		opacity: 1;
	}to{
		transform: translateY(0);
		opacity: 1;
	}
}
.gameBody[data-gameType = 'imageChoice'] .imageVariants .backAndLinkWrapp{
	animation-name: chosingImagesCardsAnim;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: linear;
//	animation-iteration-count: infinite;
//	animation-direction: alternate;
//	animation-iteration-count: infinite;
}

@keyframes chosingImagesCardsAnim{
	from{
	//	opacity: 0;
		transform: translate(-200px,100px) rotateX(-90deg) rotateY(-180deg);
	}20%{
	//	opacity: 1;
	}to{	
	//	opacity: 1;
		transform: (0,0) rotateX(0) rotateY(0);
	}
}
.gameBody[data-gameType = 'imageChoice'] .imageVariants > li.whirling .backAndLinkWrapp{
	animation-name: whirlingChosingCard;
	animation-duration: 7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	transform-origin: center center;
}
@keyframes whirlingChosingCard{
	from{
		transform: rotate(0);
	}50%{
		transform: rotateZ(180deg) rotateY(70deg);
	}to{
		transform: rotateZ(360deg) rotateY(0deg);
	}
}
.gameBody[data-gameType = 'imageChoice'] .rightWord > span{
	animation-name: ICrightwordLetterAnim;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;	
	display: inline-block;
	transition-property: color;
	transition-duration: 0.3s;
}
@keyframes ICrightwordLetterAnim{
	from{
		opacity: 0;
		transform: translate(-50px,-50px) rotateZ(-180deg);
	}20%{
		opacity: 1;
	}to{
		transform: translate(0,0) rotateZ(0);
	}
}
.gameBody[data-gameType = 'imageChoice'] .rightWord.finalAnimation{
	animation-timing-function: linear;
	animation-fill-mode: both;		
	animation-name: ICrightWordAnim;
	animation-duration: 2s;	
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
@keyframes ICrightWordAnim{
	from{
		
	}to{
		letter-spacing: 1em;
	}
}
.gameBody[data-gameType = 'imageChoice'] .rightWord > span.letterFinalAnimation{
//	animation-name: dancingICLetter;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transform-origin: center center;
}
@keyframes dancingICLetter{
	from{
		
	}50%{
		transform: rotateX(180deg)/* translateY(-50px)*/ scale(1.5);
	}to{
		transform: rotateX(360deg) scale(1);
	}
}
.gameBody .topPanel.gameStatisticsEls .gameStatisticsEl{
	display: inline-block;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: ICstatisticsEls;
	z-index: 1;
	position: relative;
}
@keyframes ICstatisticsEls{
	from{
		transform: scale(7) translateY(30px);
	}to{
		transform: scale(1) translateY(0);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTICardAppearance{
	animation-name: GTICardAppearance;	
//	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: linear;
//	animation-iteration-count: infinite;	
	
}
@keyframes GTICardAppearance{
	from{
	//	opacity: 0;
		transform: scale(1.2) rotateY(180deg) translate(-100px,150px) rotateZ(-20deg) rotateX(-45deg);
	}20%{
	//	opacity: 1;
	}to{
		transform: scale(1) rotateY(180deg) translate(0,0) rotateZ(0) rotateX(0);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTICardEnteringGame{
	animation-name: GTICardEnteringGame;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes GTICardEnteringGame{
	from{
		transform: rotateY(180deg);
	}to{
		transform: rotateY(0);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTICardEnteringGame .sidesWrapp{
	animation-name: GTICardEnteringGameSidesWrapp;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}

@keyframes GTICardEnteringGameSidesWrapp{
	from{
	//	transform: rotateZ(0);
	}to{
		transform: rotateZ(0);
	}
}
.GTICardOutingGame .sidesWrapp{
	animation-name: GTICardOutingGame;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes GTICardOutingGame{
	from{
		
	}to{
		transform: rotateY(180deg);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .wordsVariants > li > a{
	animation-name: GTIVariantAppearance;
	animation-timing-function: linear;
	animation-fill-mode: both;
//	animation-duration: 0.5s;
}
@keyframes GTIVariantAppearance{
	from{
		opacity: 0;
		transform: scale(2.5);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTITransferToBeginningPosition{
	animation-name: GTITransferToBeginningPosition;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes GTITransferToBeginningPosition{
	from{
		transform: rotateZ(0) rotateY(180deg);
	}to{
		transform: rotateZ(360deg) rotateY(180deg);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTIFinalDance{
	animation-name: GTIFinalDance;
	animation-timing-function: linear;
	animation-fill-mode: both;		
}
@keyframes GTIFinalDance{
	from{
		transform: rotateY(180deg) scale(1) rotateZ(0);
	}50%{
		transform: rotateY(0) scale(1.4) rotateZ(180deg);
	}to{
		transform: rotateY(180deg) scale(1) rotateZ(360deg);
	}
}
.gameBody[data-gameType = 'guessTheImage'] .GTILinksHiding{
	animation-name: GTILinksHiding;
	animation-play-state: paused;
	animation-timing-function: linear;
	animation-fill-mode: both;		
}
@keyframes GTILinksHiding{
	from{
		transform: scale(1) translateX(0);
		opacity: 1;
	}to{
		transform: scale(2) translateX(-200px);
		opacity: 0;
	}
}
.gameBody[data-gameType = 'memoryCards'] .MCCardAppearance{
	animation-fill-mode: both;
	animation-timing-function: linear;	
	animation-name: MCCardAppearance;
}
@keyframes MCCardAppearance{
	from{
		transform: translate(200px,200px) rotateX(45deg) rotateY(-180deg);
	//	opacity: 0;
	}20%{
	//	opacity: 1;
	}to{
		transform: translate(0,0) rotateX(0) rotateY(0);
	}
}
.WRRemovingSlide{	
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
/*.WRSlideToLeft{
	animation-name
}*/
@keyframes WRSlideToLeft{
	from{
		opacity: 1	;
		transform: translateX(0);
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translateX(200px) rotateZ(30deg);
	}
}
@keyframes WRSlideToRight{
	from{
		opacity: 1	;
		transform: translateX(0);
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translateX(-200px) rotateZ(-30deg);
	}
}
.wordsRepeatMW .wordAndSoundSecondWrapp{
	animation-name: WRwordAndSoundSecondWrapp;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes WRwordAndSoundSecondWrapp{
	from{
		opacity: 0;
	//	transform: scale(1.2);
	}to{
	//	transform: scale(1);
		opacity: 1;
	}
}
.wordsRepeatMW, .infoPopupWrapper{
	perspective: 500px;
}
.wordsRepeatMW .repSlider{
	animation-name: repSliderAppearance;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
.startingAnimation .wordsRepeatMW .repSlider{
	animation-play-state: running;
}
@keyframes repSliderAppearance{
	from{
		opacity: 0;
		transform: translateY(-200px) rotateX(20deg);
	}20%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: translateY(0) rotateX(0);
	}
}
.MCTransitionToOutGameCards{
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-name: MCTransitionToOutGameCards;
}
@keyframes MCTransitionToOutGameCards{
	from{
		transform: rotateZ(0) scale(1)/* rotateY(0)*/;
	}50%{
		transform: rotateZ(180deg) scale(1.6)/* rotateY(180deg)*/;
	}to{
		transform: rotateZ(360deg) scale(1)/* rotateY(360deg)*/;
	}
}
.MCFinalFlight{
	animation-name: MCFinalFlight;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes MCFinalFlight{
	from{
		transform: rotateY(0) rotateZ(0);
	}to{
		transform: rotateY(180deg) rotateZ(180deg);
	}
}
.starAnimationAppearance{
	animation-name: starAnimationAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-duration: 1s;
}
@keyframes starAnimationAppearance{
	from{
		transform: translateY(30px) rotateY(-360deg);
		opacity: 0;
	}25%{
		opacity: 1;
	}to{
		transform: translateY(0) rotateY(0);
	}
}
.infoPopupWrapper.animated .infoPopup,
.infoPopupWrapper.animated .coveringEl,
.infoPopupWrapper.simpleAnimation .infoPopup,
.infoPopupWrapper.simpleAnimation .coveringEl{
	animation-fill-mode: both;
	animation-timing-function: linear;		
}
.infoPopupWrapper.animated .infoPopup{
	animation-name: infoPopupAnimation;
	animation-duration: 1s;
}
.infoPopupWrapper.simpleAnimation .infoPopup{
	animation-name: simplePopupAnimation;
	animation-duration: 0.5s;
}
.infoPopupWrapper.animatedB .infoPopup{
	animation-name: infoPopupAnimationB;
	animation-duration: 1s;
}
@keyframes infoPopupAnimation{
	0% {
		opacity: 0;
		transform: translateY(-200px) rotateX(20deg);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotateX(0);
	}
}
@keyframes simplePopupAnimation{
	from{
		opacity: 0;
		transform: translateX(-100px) rotateY(-30deg);
	}to{
		transform: translateX(0) rotateY(0);
		opacity: 1;
	}
}
@keyframes infoPopupAnimationB{
	from{
		opacity: 0;
		transform: rotateZ(-135deg) scale(0.4);
	}to{
		transform: rotateZ(0deg) scale(1);
		opacity: 1;
	}
}
.infoPopupWrapper.animated .coveringEl{
	animation-name: coveringElOfInfoPopupAnimation;
	animation-duration: 0.7s;	
}
.infoPopupWrapper.simpleAnimation .coveringEl{
	animation-name: coveringElOfInfoPopupAnimation;
	animation-duration: 0.5s;	
}
@keyframes coveringElOfInfoPopupAnimation{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType = 'guessTheImageB'] .gameCard.GTISlideToRight{
	animation-name: GTISlideToRight;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes GTISlideToRight{
	from{
		transform: translateX(0) rotateZ(0);
		opacity: 1;
	}70%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translateX(500px) rotateZ(360deg);
	}
}








[data-gameType = 'guessTheImageB'] .gameCard.GTISlideToLeft{
	animation-name: GTISlideToLeft;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes GTISlideToLeft{
	from{
		transform: translateX(0) rotateZ(0);
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translateX(-500px) rotateZ(-360deg);
	}
}
[data-gameType = 'guessTheImageB'] .wordsWariants > li{
	animation-name: GTIBvariantItemsAppearance;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes GTIBvariantItemsAppearance{
	from{
		opacity: 0;
	//	transform: scale(1.1);
	}to{
		opacity: 1;
	//	transform: scale(1);
	}
}
[data-gameType = 'guessTheImageB'] .wordsWariants{
	transition-property: opacity;
}
[data-gameType = 'ImageChoiceB'] .soundWordButt{
	animation-name: ICBSoundWordButtonAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes ICBSoundWordButtonAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType = 'ImageChoiceB'] .imageWariant{
	animation-name: ICBImageVariantsDisappearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
@keyframes ICBImageVariantsDisappearance{
	from{
		opacity: 1;
		transform: translate(0,0);
	}50%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: translate(150px,150px) rotateX(45deg) rotateY(45deg);
	}
}
.opacityAppearanceAnim{
	animation-name: opacityAppearanceAnim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes opacityAppearanceAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
.SISocketAppearance{
	animation-name: SISocketAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SISocketAppearance{
	from{
		opacity: 0;
		transform: rotateY(-90deg)
	}to{
		opacity: 1;
		transform: rotateY(0);
	}
}
.SIScrapAppearance{
	animation-name: SIScrapAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
@keyframes SIScrapAppearance{
	from{
		opacity: 0;
		transform: scale(0.2) rotate(-90deg);
		
	}50%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: scale(1) rotate(0);			
	}
}
.simpleAppearance, .simpleAppearanceTranslucent{	
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-duration: 0.7s;
}
.simpleAppearance{
	animation-name: simpleAppearance;
}
.simpleAppearanceTranslucent{
	animation-name: simpleAppearanceTranslucent;
}
@keyframes simpleAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes simpleAppearanceTranslucent{
	from{
		opacity: 0;
	}to{
		opacity: 0.5;
	}
}
@keyframes simpleDisappearance{
	from{
		opacity: 1;
	}to{
		opacity: 0;
	}	
}
[data-gameType = 'findOnTheField'] .sidesWrapp{
	animation-name: FOTFCardROtate;
	animation-fill-mode: both;
	animation-play-state: paused;
	animation-timing-function: linear;
}
@keyframes FOTFCardROtate{
	from{
		transform: rotateY(180deg);
	}to{
		transform: rotateY(0);
	}
}
[data-gameType = 'findOnTheField'] .taskCard{
	animation-fill-mode: both;
	animation-timing-function: linear;
}
[data-gameType = 'findOnTheField'] .taskTextVal{
	animation-name: FOTFTaskTextVal;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes FOTFTaskTextVal{
	from{
		opacity: 0;
		transform: scale(3);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
/*
.FOTFTaskCardAnimation{
	
}*/
@keyframes FOTFTaskCardAnimationStright{
	from{
		opacity: 0;
		transform: rotate(-180deg) scale(0.1);
	}30%{
		opacity: 1;
	}to{
		transform: rotate(0) scale(1);
	}
}
@keyframes FOTFTaskCardAnimationReverse{
	from{
		transform: rotate(0) scale(1);
	}70%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: rotate(-180deg) scale(0.1);		
	}
}
.FOTFCardImageDisappearance{
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes FOTFCardImageDisappearance{
	from{
		opacity: 1;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(2);
	}
}
.FOTFCardBlowingUp{
	animation-name: FOTFCardBlowingUp;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes FOTFCardBlowingUp{
	from{
	//	opacity: 1;
		transform: scale(1);
	}to{
	//	opacity: 0;
		transform: scale(2);
	}	
}
.FOTFCardDisappearance{
	animation-name: FOTFCardDisappearance;
	animation-fill-mode: both;	
	animation-timing-function: linear;
}
@keyframes FOTFCardDisappearance{
	from{
		opacity: 1;
	}to{
		opacity: 0;
	}
}
[data-gameType = 'puzzle'] .puzzleAppearance{
	animation-name: puzzleAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
	position: relative;
}
@keyframes puzzleAppearance{
	from{
		opacity: 0;
		transform: rotate(-45deg) translate(-50px,-50px);
	}30%{
		opacity: 1;		
	}to{
		opacity: 1;
		transform: rotate(0) translate(0,0);
	}
}
.loadingInfoPopup .gear{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.loadingInfoPopup .gear.big{
	animation-name: gearRotateСlockwiseRotate;	
	animation-duration: 10s;
}
.loadingInfoPopup .gear.small{
	animation-name: gerCounterclockWiseRotate;	
	animation-duration: 10s;	
}
.loadingInfoPopup .gear.theSmallest{
	animation-name: gearRotateСlockwiseRotate;	
	animation-duration: 10s;	
}
@keyframes gearRotateСlockwiseRotate{
	from{
		transform: rotateZ(0);
	}to{
		transform: rotateZ(360deg);
	}
}
@keyframes gerCounterclockWiseRotate{
	from{
		transform: rotateZ(0);
	}to{
		transform: rotateZ(-360deg);
	}
}
[data-gameType='connectWithALine'] .elementsList > li{
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-play-state: paused;
}
[data-gameType='connectWithALine'] .elementsList.topEls > li{
	animation-name: CWALElsReverseAppearance;
}
[data-gameType='connectWithALine'] .elementsList.bottomEls > li{
	
	animation-name: CWALElsAppearance;
}
@keyframes CWALElsAppearance{
	from{
		opacity: 0;
		transform: translateX(-100px) rotateZ(-45deg);
	}30%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: translateX(0) rotate(0);
	}
}
@keyframes CWALElsReverseAppearance{
	from{
		opacity: 0;
		transform: translateX(100px) rotateZ(45deg);
		
	}30%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: translateX(0) rotate(0);
	}
}
/*
	2.2
	в(0.2) н (0.2) в(0.2) н(0.2) ж(1.4)
	9       18      27    36
	
	2.6
	в(0.2) н (0.2) в(0.2) н(0.2) ж(1.8)
	7.7      15.4    23    30		
*/
.jumpingButton{
	animation-name: jumpingButton;
	animation-duration: 2.6s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes jumpingButton{
	from{
		transform: translateY(0);
	}7.7%{
		transform: translateY(-20px);	
	}15.4%{
		transform: translateY(0);
	}23%{
		transform: translateY(-20px);
	}30%{
		transform: translateY(0);
	}to{
		transform: translateY(0);
	}
}
.handPrompt{
	animation-name: handPrompt;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
@keyframes handPrompt{
	from{
		opacity: 0;
		transform: translate(100px,-100px);
	}30%{
		opacity: 1;
	}40%{
		transform: translate(0,0);
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
	}
}
.difficultyLevelPopupDissappearance .coveringEl,
.difficultyLevelPopupDissappearance .infoPopup{
	animation-timing-function: linrear;
	animation-fill-mode: both;
}
.difficultyLevelPopupDissappearance .coveringEl{
	animation-name: difficultyLevelPopupDissappearanceCoveringEl;
}
.difficultyLevelPopupDissappearance .infoPopup{
	animation-name: difficultyLevelPopupDissappearanceInfoPopup;
}
@keyframes difficultyLevelPopupDissappearanceCoveringEl{
	from{
		
	}to{
		opacity: 0;
	}
}
@keyframes difficultyLevelPopupDissappearanceInfoPopup{
	from{
		transform: scale(1) rotateZ(0deg);
	}to{
		opacity: 0;
		transform: scale(1.7) rotateZ(135deg);
	}
}

[data-gametype='snake'] .caughtLetters > *.visibleLetter{
	animation-name: snakeCaughtLetterAppearanceAnim;
//	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear
}
@keyframes snakeCaughtLetterAppearanceAnim{
	from{
		opacity: 0;
		transform: scale(15);
	}to{
		transform: scale(1);
		opacity: 1;
	}
}
[data-gameType='snake'] .fieldCaughtLetter,
[data-gameType='sokoban'] .fieldCaughtLetter,
[data-gameType='labirint'] .fieldCaughtLetter,
[data-gameType='racer'] .fieldCaughtLetter,
[data-gameType='seaBattle'] .fieldCaughtLetter{
	animation-name: snakeCaughtLetterAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: reverse;	
}

[data-gameType='sokoban'] .fieldImage{
	animation-name: sokobanFieldImageAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes sokobanFieldImageAnim{
	from{
		transform: scale(1);
		opacity: 0.7;	
	}to{
		opacity: 0;
		transform: scale(15);
	}
}

[data-gameType='racer'] .fieldImage{
	animation-name: racerFieldImageAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes racerFieldImageAnim{
	from{
		transform: scale(1);
		opacity: 0.7;	
	}to{
		opacity: 0;
		transform: scale(8);
	}
}

[data-gameType='seaBattle'] .fieldImage{
	animation-name: seaBattleFieldImageAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes seaBattleFieldImageAnim{
	from{
		transform: scale(1);
		opacity: 0.7;	
	}to{
		opacity: 0;
		transform: scale(8);
	}
}

[data-gameType='seaBattle'] .wordCard,
[data-gameType='columns'] .wordCard{
	animation-name: SBWordCardAnimation;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes SBWordCardAnimation{
	from{
		opacity: 0;
		transform: scale(1);
	}30%{
		opacity: 1;
	}70%{
		opacity: 1;
	}to{
		transform: scale(1.2);
		opacity: 0;
	}
}

[data-gameType='seaBattle'] .canvasSecondWrapperAnim{
//	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
[data-apponenttype = 'player'] .canvasSecondWrapperAnim{
	animation-name: SBCanvasSecondWrapperAppearanseFromLeft;
}
[data-apponenttype = 'PC'] .canvasSecondWrapperAnim{
	animation-name: SBCanvasSecondWrapperAppearanseFromRight;
}
@keyframes SBCanvasSecondWrapperAppearanseFromLeft{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes SBCanvasSecondWrapperAppearanseFromRight{
	from{
		opacity: 0;
		transform: translateX(100px);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}

[data-gameType='seaBattle'] .SBShipIndicatorAppearance{
	animation-name: SBShipIndicatorAppearance;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes SBShipIndicatorAppearance{
	from{
		opacity: 0;
		transform: scale(2) rotateZ(-45deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);
	}
}
[data-gameType='seaBattle'] .fieldMissle{
	animation-name: SBFieldMissleAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SBFieldMissleAnim{
	from{
		transform: scale(1.4) rotateZ(30deg);
		opacity: 0;
	}50%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);
	}
}

[data-gameType='columns'] .blinkingEl{
	animation-name: columnsBlinkingElAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
}
@keyframes columnsBlinkingElAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType='columns'] .hitImage{
	animation-name: columnsHitElAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes columnsHitElAnim{
	from{
		transform: scale(1);
		opacity: 0.7;	
	}to{
		opacity: 0;
		transform: scale(5);
	}
}
[data-gameType='columns'] .pointsIncreaseIndicator{
	animation-name: pointsIncreaseIndicatorAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes pointsIncreaseIndicatorAnim{
	from{
		opacity: 1;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(7);		
	}
}

[data-gameType='columns'] .pointsNumWrapp{
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes columnsPointsNumWrappAnim{
	from{
		opacity: 0;
		transform: scale(0.3);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType='columns'] .pauseButton,
[data-gameType='basket'] .pauseButton,
[data-gameType='catchTheWords'] .pauseButton,
[data-gameType='shootingRange'] .pauseButton{
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
@keyframes columnsPauseButtonAnim{
	from{
		opacity: 0;
		transform: rotateY(-540deg) translateY(100px);
	}to{
		opacity: 1;
		transform: rotateY(0) translateY(0);
	}
}


[data-gameType='columns'] .nextColumnWordAnim{
	animation-name: columnsNextColumnWordAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes columnsNextColumnWordAnim{
	from{
		opacity: 0;
		transform: scale(2) rotateZ(-45deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);
	}
}

.gameBody[data-gameType='basket'] .letterEl.caught{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: basketCaughtLetterAnim;
}
.gameBody[data-gameType='basket'] .letterEl.caught[data-status = 'wrong']{
	animation-name: basketCaughtLetterAnimWithError;
}
@keyframes basketCaughtLetterAnim{
	from{
		transform: scaleX(1) scaleY(1) scaleZ(1);
	}to{
		transform: scaleX(0) scaleY(0) scaleZ(0);
	}
}
@keyframes basketCaughtLetterAnimWithError{
	from{
		transform: scaleX(1) scaleY(1) scaleZ(1);
	}to{
		transform: scaleX(0) scaleY(0) scaleZ(0) rotateZ(-180deg);
	}
}
/*.gameBody[data-gameType='basket'] .letterEl.hit{
	transition-property: background-color, color, opacity, transform;
}*/
.gameBody[data-gameType='basket'] .letterEl.hit [data-sidetype='left']{
	transform: rotateY(-90deg) translateZ(100px) !important;
}
.gameBody[data-gameType='basket'] .letterEl.hit [data-sidetype='right']{
	transform: rotateY(90deg) translateZ(100px) !important;
}
.gameBody[data-gameType='basket'] .letterEl.hit [data-sidetype='front']{
	transform: rotateX(-90deg) translateZ(100px) !important;
}
.gameBody[data-gameType='basket'] .letterEl.hit [data-sidetype='back']{
	transform: rotateX(90deg) translateZ(100px) !important;
}
.gameBody[data-gameType='basket'] .letterEl.hit [data-sidetype='top']{
	transform: translateZ(140px) !important;
}
.gameBody[data-gameType='basket'] .laserBeam .box3dSide{
	animation-name: basketLaserBeamAnimation;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes basketLaserBeamAnimation{
	from{
		background-color: rgba(204,0,51,0.8);		
	}to{
		background-color: rgba(204,0,51,0);
		border-color: rgba(0,0,0,0);
	}
}

.gameBody[data-gameType='basket'] .fieldImage .innerEl{
	animation-name: basketFieldImageAnimation;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes basketFieldImageAnimation{
	from{
		transform: scale(0.5);
		opacity: 0.7;
	}to{
		transform: scale(7);
		opacity: 0;
	}
} 
/*shootingSmoke*/
.gameBody[data-gameType='basket'] .fieldImage.shootingSmoke .innerEl{
	animation-name: basketShootingSmokeAnimation;
}
@keyframes basketShootingSmokeAnimation{
	from{
		transform: scale(0.2);
		opacity: 0.7;
	}to{
		transform: scale(2);
		opacity: 0;
	}
} 
.gameBody[data-gameType='catchTheWords'] .basketGameFieldAnimation,
.gameBody[data-gameType='basket'] .basketGameFieldAnimation,
.gameBody[data-gameType='shootingRange'] .basketGameFieldAnimation{
	animation-name: basketGameFieldAnimation;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes basketGameFieldAnimation{
	from{
		transform: scaleX(0);
	}to{
		transform: scaleX(1);
	}
}
.gameBody[data-gameType='basket'] .basketDamegePanelAnimation,
.gameBody[data-gameType='catchTheWords'] .basketDamegePanelAnimation,
.gameBody[data-gameType='shootingRange'] .basketDamegePanelAnimation{
	animation-name: basketDamegePanelAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes basketDamegePanelAnimation{
	from{
		transform: scale(0) rotateY(-360deg) rotateZ(-45deg);
	}to{
		transform: scale(1) rotateY(0) rotateZ(0);
	}	
}


.gameBody[data-gameType='catchTheWords'] .wordEl.caught{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: catchTheWordsCaughtWordAnim;
}
.gameBody[data-gameType='catchTheWords'] .wordEl.caught[data-status = 'wrong']{
	animation-name: basketCaughtWordAnimWithError;
}
@keyframes catchTheWordsCaughtWordAnim{
/*	from{
		transform: scaleX(1) scaleY(1) scaleZ(1);
	}to{
		transform: scaleX(0) scaleY(0) scaleZ(0);
	}*/
	from{
		transform: scale(1);
		opacity: 1;
	}to{
		transform: scale(2);
		opacity: 0
	}
}
@keyframes basketCaughtWordAnimWithError{
	from{
		transform: scaleX(1) scaleY(1) scaleZ(1);
	}to{
		transform: scaleX(0) scaleY(0) scaleZ(0) rotateZ(-180deg);
	}
}
.gameBody[data-gameType='catchTheWords'] .CTWAppearanceWordAnim{
	animation-name: CTWAppearanceWordAnim;
	animtion-time-function: linear;
	animation-fill-mode: both;
	animation-duration: 1s;
}
@keyframes CTWAppearanceWordAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
.gameBody[data-gameType='catchTheWords'] .CTWPointsNumElAnimation,
.gameBody[data-gameType='shootingRange'] .CTWPointsNumElAnimation{
	animation-name: CTWPointsNumElAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes CTWPointsNumElAnimation{
	from{
		opacity: 0;
		transform: translateX(-200px) rotateZ(-90deg);
	}to{
		opacity: 1;
		transform: translateX(0) rotateZ(0);	
	}
}
.gameBody[data-gameType='shootingRange'] .SRTaskCardAnimation{
	animation-name: SRTaskCardAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SRTaskCardAnimation{
	from{
		opacity: 0;
		transform: rotateZ(-90deg) scale(0.5);
	}to{
		opacity: 1;
		transform: rotateZ(0) scale(1);
	}
}
[data-gameType = 'shootingRange'] .targetWrapper.hit .targetSecondWrapper{
	animation-name: SRTHitTargetAnimation;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
@keyframes SRTHitTargetAnimation{
	from{
		transform: rotateX(0);
	}to{
		transform: rotateX(75deg);
	}
}
[data-gameType = 'shootingRange'] .fieldImage,
[data-gameType = 'shootingRange'] .screenImage{
	animation-timing-function: linear;
	animation-fill-mode: both;
	transform-origin: left top;
}
[data-gameType = 'shootingRange'] .SRStandardImageFieldAnim{
	animation-name: SRStandardImageFieldAnim;
}
@keyframes SRStandardImageFieldAnim{
	from{
		opacity: 1;
		transform: scale(0.5);
	}to{
		opacity: 0.3;
		transform: scale(2);
	}
}
[data-gameType = 'shootingRange'] .SRStargetShardsAnim{
	animation-name: SRStargetShardsAnim;
}
@keyframes SRStargetShardsAnim{
	from{
		opacity: 0.7;
		transform: scale(0.1);
	}to{
		opacity: 0;
		transform: scale(5);
	}
}
[data-gameType = 'shootingRange'] .SRFootingSparksAnim{
	animation-name: SRFootingSparksAnim;
}
@keyframes SRFootingSparksAnim{
	from{
		opacity: 0.5;
		transform: scale(0.5);
	}to{
		opacity: 0.1;
		transform: scale(2);
	}
}
[data-gameType = 'shootingRange'] .SRBulletReloadingAnim{
	animation-name: SRBulletReloadingAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SRBulletReloadingAnim{
	from{
		opacity: 0;
		transform: translateY(100px);
	}to{
		opacity: 0.7;
		transform: translateY();		
	}
}
[data-gameType = 'shootingRange'] .SRShootingBullet .bulletFirstWrap{
	animation-name: SRShootingBullet;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes SRShootingBullet{
	from{
		transform: translateX(0) translateY(0) rotateZ(0);
		opacity: 0.7;
	}70%{
		opacity: 0.7;
	}to{
		opacity: 0;
		transform: translateX(-100px) translateY(-100px) rotateZ(-135deg);
	}
}
[data-gameType = 'shootingRange'] .pointsNumChangingIndicator{
	animation-name: pointsNumChangingIndicatorAmim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes pointsNumChangingIndicatorAmim{
	from{
		opacity: 1;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(7);
	}
}

[data-gameType = 'shootingRange'] .apponentEl{
	animation-fill-mode: both;

	transform-origin: center bottom;
}
[data-gameType = 'shootingRange'] .apponentEl.apponentElAppearance{
	animation-timing-function: ease-out;
	animation-name: apponentElAppearance;
}
[data-gameType = 'shootingRange'] .apponentEl.apponentElDisappearance{
	animation-timing-function: ease-out;
	animation-name: apponentElDisappearance;	
}
@keyframes apponentElAppearance{
	from{
		transform: rotateX(-90deg);
	}to{
		transform: rotateX(0);
	}
}
@keyframes apponentElDisappearance{
	from{
		transform: rotateX(0);
	}to{
		transform: rotateX(-90deg);
	}
}
[data-gameType = 'shootingRange'] .shootingFlashLight{
	animation-name: shootingFlashLightAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes shootingFlashLightAnim{
	from{
		opacity: 0
	}50%{
		opacity: 0.4;
	}to{
		opacity: 0;
	}
}
[data-gameType = 'shootingRange'] .banditShotShards{
	animation-name: banditShotShardsAnim;
}
@keyframes banditShotShardsAnim{
	from{
		opacity: 0.8;
		transform: scale(0.2);
	}to{
		opacity: 0;
		transform: scale(7);
	}
}

[data-gameType = 'dragThePieces'] .gamePeiceAppearance{
	animation-name: gamePeiceAppearance;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes gamePeiceAppearance{
	from{
		opacity: 0;
		transform: rotateX(-90deg);
	}to{
		opacity: 1;
		transform: rotateX(0deg);
	}	
}
[data-gameType = 'dragThePieces'] .gamePeicePromptAnim,
[data-gameType = 'composeTheText'] .gamePeicePromptAnim .pieceContent{
	animation-name: gamePeicePromptAnim;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes gamePeicePromptAnim{
	from{
		transform: scale(1);
	}to{
		transform: scale(0.9);
	}
}

.colorCards .chosenCardAnimation{
	animation-name: chosenCardAnimation;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-direction: alternate;
	animation-iteration-count: 2;
	animation-duration: 0.3s;
}
@keyframes chosenCardAnimation{
	from{
		transform: scale(1);
	}to{
		transform: scale(1.3);		
	}
}
[data-gameType = 'gamesChooser'] .colorCardAppearance{
	animation-name: colorCardAppearance;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes colorCardAppearance{
	from{
		opacity: 0;
		top: -150px;
		transform: rotateX(30deg);
	}to{		
		opacity: 1;
		top: 0;
		transform: rotateX(0);
	}
}
[data-gameType = 'gamesStatistics'] .scheduleBar{
	animation-name: gamesStatisticsScheduleBarAnim;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	transform-origin: left center;
}
@keyframes gamesStatisticsScheduleBarAnim{
	from{
		transform: scaleX(0);
	}to{
		transform: scaleX(1);
	}
}
[data-gameType = 'guessTheWord'] .passedWordCell{
	animation-name: passedWordCellAnim;
//	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes passedWordCellAnim{
	from{
		transform: rotateX(0);
	}to{
		transform: rotateX(-180deg);
	}
}
[data-gameType = 'guessTheWord'] .wordCellsRowAppearanceAnim{
	animation-name: wordCellsRowAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes wordCellsRowAppearanceAnim{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}to{
		oapcity: 1;
		transform: translateX(0);
	}
}
[data-gameType = 'guessTheWord'] .wordCellsRow .promptEl{
	animation-name: GTWPromtElAnim;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes GTWPromtElAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType = 'guessTheWord'] .GTWroundPictureAnim{
	animation-name: GTWroundPictureAnim;	
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-duration: 2s;
}
@keyframes GTWroundPictureAnim{
	from{
		opacity: 0;
		transform: scale(1);
	}20%{
		opacity: 1;
	}80%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: scale(1.5);
	}
}
[data-gameType = 'guessTheWord'] .GTWWordsElAnim{
	animation-name: GTWWordsElAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes GTWWordsElAnim{
	from{
		opacity: 0;
		transform: scale(0.5);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType = 'crossword'] .guessedCellCap{
	animation-name: guessedCellCapAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
/*@keyframes guessedCellCapAnim{
	forom{
		opacity: 0;
		transform: scale(0.7);
	}20%{
		opaicty: 1;
	}30%{
		transform: scale(1.5);
	}to{
		transform: scale(1);
	}
}*/
@keyframes guessedCellCapAnim{
	from{
		opacity: 0;
		transform: scale(0.7);
	}20%{
		opacity: 1;
	}30%{
		transform: scale(1.3);
	}to{
		transform: scale(1);
	}
}
[data-gameType = 'crossword'] .starsEffect{
	animation-name: starsEffectAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes starsEffectAnim{
	from{
		transform: scale(0.7);
		opacity: 0;
	}30%{
		opacity: 1;
	}60%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: scale(3);
	}
}
[data-gameType = 'crossword'] .crossWordTable .promptEl{
	animation-name: GTWPromtElAnim;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	transform-origin: center center;
}
@keyframes GTWPromtElAnim{
	from{
		opacity: 0;
		transform: scale(2) rotateX(-90deg) translateZ(30px);
	//	transform: scale(2) translateY(30px);
	}to{
		opacity: 1;
	//	transform: scale(1) translateY(0);
		transform: scale(1) rotateX(0) translateZ(0);
	}
}
[data-gameType = 'crossword'] .descriptionsEl{
	animation-name: crosswordDescriptionsElAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-duration: 1s;
}
@keyframes crosswordDescriptionsElAnim{
	from{
		opacity: 0;
		transform: rotateZ(-180deg) scale(0.3) rotateX(90deg);
	}to{
		opacity: 1;
		transform: rotateZ(0deg) scale(1) rotateX(0);
	}
}
[data-gameType = 'crossword'] .crosswordRowAnimation{
	animation-name: crosswordRowAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes crosswordRowAnimation{
	from{
		opacity: 0;
		transform: scale(1.3) rotateX(90deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateX(0);
	}
}
.TSTParAppearance{
	animation-name: TSTParAppearanceAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes TSTParAppearanceAnim{
	from{
		opacity: 0;
		transform: translateY(-100px) rotate(-45deg);
	}to{
		opacity: 1;
		transform: translateY(0) rotate(0);
	}
}
.TSTParTextImageAppearance{
	animation-name: TSTParTextImageAppearanceAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes TSTParTextImageAppearanceAnim{
	from{
		opacity: 0;
		transform: rotateX(-90deg) scale(0.3);
	}to{
		opacity: 1;
		transform: rotateX(0deg) scale(1);
	}
}
[data-gameType = 'chooseTheVariant'] .cheatingWrongPictureMark{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-positoin: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('../images/tests/chooseTheVariant/cheatingWrongPictureMark.png');
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: cheatingWrongPictureMarkAnim;
}
@keyframes cheatingWrongPictureMarkAnim{
	from{
		opacity: 0;
		transform: scaale(0.3);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-textImageSizeType = 'big'] .TSTParTextImageAppearance,
[data-textImageSizeType = 'middle'] .TSTParTextImageAppearance{
	animation-name: TSTParAppearanceAnimBigImage;
}
@keyframes TSTParAppearanceAnimBigImage{
	from{
		opacity: 0;
		transform: scale(0.7);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}


.CTVVariantAppearance, .CTVVariantAppearanceForVerbalMode{
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
.CTVVariantAppearance{
	animation-name: CTVVariantAppearanceAmim;
}
.CTVVariantAppearanceForVerbalMode{
	animation-name: CTVVariantAppearanceForVerbalMode;
	animation-duration: 0.5s;
}
@keyframes CTVVariantAppearanceAmim{
	from{
		opacity: 0;
		transform: scale(2);
	}to{
		opacity: 1;
		transfom: scale(1);
	}
}
@keyframes CTVVariantAppearanceForVerbalMode{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
.CTVListeningButtonAppearance{
	animation-name: CTVListeningButtonAppearanceAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;		
}
@keyframes CTVListeningButtonAppearanceAnim{
	from{
		opacity: 0;
		transform: scale(0.2) rotateY(-360deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateY(0deg);		
	}
}
.gameSoundButtonBAppearance{
	animation-name: gameSoundButtonBAppearanceAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;		
}
@keyframes gameSoundButtonBAppearanceAnim{
	from{
		opacity: 0;
		transform: rotateY(-540deg) translateX(-300px) translateY(-300px);
	}60%{
		opacity: 1;
	}to{
		opacity: 1;	
		transform: rotateX(-0) translateX(-0) translateY(-0);	
	}
}
.CTVSoundButtonButtonAppearanceSimple{
	animation-name: CTVSoundButtonButtonAppearanceSimpleAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes CTVSoundButtonButtonAppearanceSimpleAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}

[data-gameType = 'composeTheText'] .gamePeiceAppearance{
	animation-name: CTTgamePeiceAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes CTTgamePeiceAppearance{
	from{
		opacity: 0;
		transform: scale(1.5) rotateX(90deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateX(0);
	}	
}
[data-gameType = 'composeTheText'] .CTTTextImageAppearance{
	animation-name: CTTTextImageAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes CTTTextImageAppearance{
	from{
		transform: rotateY(-360deg) rotateZ(-180deg) scale(0.2);
		opacity: 0;
	}to{
		transform: rotateY(0) rotateZ(0) scale(1);
		opacity: 1;
	}
}
.mainButtonJumpingAnim{
	animation-name: TTTButtonJumpingAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-direction: alternate;
	animation-iteration-count: 4;	
}
@keyframes TTTButtonJumpingAnim{
	from{
		transform: translateY(0);
	}to{
		transform: translateY(-50px);
	}
}
.textsWithReplacement .wordSoundButtonAppearance{
	animation-name: TTTWordSoundButtonAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes TTTWordSoundButtonAppearance{
	from{
		opacity: 0;
	//	transform: scale(0.5) rotateX(-135deg);
		transform: scale(2);
	}to{
		opacity: 1;
	//	transform: scale(1) rotateX(0);
		trasform: scale(1);
	}	
}	
.textsWithReplacement .TTTTextImageAppearance{
	animation-name: TTTTextImageAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes TTTTextImageAppearance{
	from{
		opacity: 0;
		transform: translateX(100px) translateY(-100px) rotateX(-90deg) rotateY(-90deg) scale(0.3);
	}to{
		opacity: 1;
		transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1);
	}
}
.textsWithReplacement .TTTparagraphAppearance{
	animation-name: TTTparagraphAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes TTTparagraphAppearanceAnim{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}
.textsWithReplacement .TTTCardAppearance{
	animation-name: TTTCardAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes TTTCardAppearanceAnim{
	from{
		opacity: 0;
		transform: rotateY(-90deg);
	}to{
		opacity: 1;
		transform: rotateY(0deg);
	}
}
[data-gameType = 'chooseFromTheList'] .indicatorText{
	animation-timing-function: linear;
	animation-fill-mode: both;
}
[data-gameType = 'chooseFromTheList'] .indicatorText.appearanceAnim{
	animation-name: CFTHLIndicatorTextAppearanceAnim;	
}
[data-gameType = 'chooseFromTheList'] .indicatorText.disappearanceAnim{
	animation-name: CFTHLIndicatorTextDisappearanceAnim;	
}
@keyframes CFTHLIndicatorTextAppearanceAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes CFTHLIndicatorTextDisappearanceAnim{
	from{
		opacity: 1;
	}to{
		opacity: 0;
	}
}

/*[data-gameType = 'guessTheWord'] .wordCell[data-animationStatus = 'addition']{
	animation-name: GTWLetterAdditionAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: 2;
}
@keyframes GTWLetterAdditionAnim{
	from{
		transform: scale(1);
	}to{
		transform: scale(1.2);
	}*/
}

[data-gameType='labirint'] .destinationCell{
	
}
[data-gameType='labirint'] .destinationCell[data-status = 'empty']{
	animation-name: labirintEmptyCellAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-duration: 0.3s;
	animation-iteration-count: infinite;
}
@keyframes labirintEmptyCellAnim{
	from{
		border-color: #BBBBC5;
	}to{
		border-color: #FF4865;
	}
}
[data-gameType='labirint'] .errorsInfoEl[data-marked]{
	animation-name: labirintMarkedErrorEl;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-duration: 1s;
	animation-iteration-count: infinite;	
	color: #FF4865;
}
@keyframes labirintMarkedErrorEl{
	from{
		transform: scale(1);
	}to{
		transform: scale(1.4);
	}
}



[data-gameType='snake'] .snakeCanvasWrapperAnimation,
[data-gameType='sokoban'] .snakeCanvasWrapperAnimation,
[data-gameType='labirint'] .snakeCanvasWrapperAnimation,
[data-gameType='racer'] .snakeCanvasWrapperAnimation,
[data-gameType='columns'] .snakeCanvasWrapperAnimation{
	animation-name: snakeCanvasWrapperAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes snakeCanvasWrapperAnimation{
	from{
		transform: rotateX(90deg) scale(0.5);
	}to{
		transform: rotateX(0) scale(1);
	}
}
[data-gameType='snake'] .targetImage,
[data-gameType='sokoban'] .targetImage,
[data-gameType='labirint'] .targetImage,
[data-gameType='racer'] .targetImage{
	animation-name: snakeTargetImageAnimation;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animatino-fill-mode: both;
}
[data-gameType='snake'] .targetImageWrapper,
[data-gameType='sokoban'] .targetImageWrapper{
	perspective: 700px;
}
@keyframes snakeTargetImageAnimation{
	from{
		transform: scale(0.2) rotateZ(-135deg) rotateX(-90deg);
		opacity: 0;
	}to{
		transform: scale(1) rotateZ(0) rotateX(0);
		opacity: 1;		
	}
}
[data-gameType='snake'] .targetWord,
[data-gameType='sokoban'] .targetWord{
//	animation-name: snakeTargetWordAnimation;
//	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes snakeTargetWordAnimation{
	from{
		transform: translateX(-100px);
		opacity: 0;
	}to{
		transform: translateX(0);
		opacity: 1;
	}
}
[data-gameType='snake'] .explotionLight{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background-color: white;
	animation-name: snakeExplotionLight;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: 2;
}
@keyframes snakeExplotionLight{
	from{
		opacity: 0;
	}70%{
		opacity: 0.7;
	}to{
		opacity: 0.7;
	}
}
[data-gameType='snake'].shaking{
	animation-name: snakeShakingGameBody;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-direction: alternate;
}
@keyframes snakeShakingGameBody{
	from{
		left: -100px;
	}to{
		left: 0;
	}
}

[data-gameType='labirint'] .letterInDestinationCell{
	animation-name: lanbtintSimpleAppearance;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes lanbtintSimpleAppearance{
	from{
		opacity: 0;
		transform: scale(0);
	}to{
		opacity: 1;
		transform: scale(1);		
	}
}

[data-gameType='labirint'] .appearanceWitheScaleTransformation{
	animation-name: appearanceWitheScaleTransformation;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes appearanceWitheScaleTransformation{
	from{
		opacity: 1;
		transform: scale(1);
	}to{
		opacity: 0;
		transform: scale(10);		
	}
}
[data-gameType='labirint'] .destinationCellsEl{
//	animation-name: destinationCellsAlementAnim;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: iase-in;
//	transform-origin: center;
}
@keyframes destinationCellsAlementAnim{
	from{
	//	opacity: 0;
		transform: rotateY(-720deg);
	}50%{
	//	opacity: 1;
	}to{
	//	opacity: 1;
		transform: rotateY(0deg);
	}
}

@keyframes PPAppearanceDuration{
	from{
		opacity: 0;
		transform: rotateX(-120deg) scale(0.1);
	}to{
		opacity: 1;
		transform: rotateX(0deg) scale(1);		
	}
}
.LTPLineAppearance{
	animation-name: LTPLineAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes LTPLineAppearance{
	from{
		opacity: 0;
		transform: translateX(-150px);
	}to{
		opacity: 1;
		transform: translateX(0);		
	}
}
.LTPScrapAppearance{
	animation-name: LTPScrapAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes LTPScrapAppearance{
	from{
		opacity: 0;
		transform: scale(0.5) rotateY(-90deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateY(0deg);
	}
}
.LTPImageAppearance{
	animation-name: LTPImageAppearance;
	animation-duration: 0.7s;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}
@keyframes LTPImageAppearance{
	from{
		opacity: 0;
		transform: rotateZ(-180deg) scale(0.1);
	}to{
		opacity: 1;
		transform: rotateZ(0) scale(1);
	}
}
.textImageSlideAnimation{
	animation-name: textImageSlideAnimation;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes textImageSlideAnimation{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}


.racerLaserRayProcessing{
	transform-origin: 100% center;
	animation-name: racerLaserRayProcessing;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes racerLaserRayProcessing{
	from{
		opacity: 1;
		transform: scaleX(1) scaleY(1);
	}20%{
		opacity: 1;
	}to{
		transform: scaleX(0) scaleY(3);
		opacity: 0
	}
}
.racerTrafficLights{
	animation-fill-mode: both; 
	animation-timing-function: linear;
}
@keyframes racerTrafficLightsAppearance{
	from{
		opacity: 0;
		transform: translateX(-200px);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes racerTrafficLightsDisappearance{
	from{
		opacity: 1;
		transform: translateX(0);
	}to{
		opacity: 0;
		transform: translateX(200px);
	}
}
/*
.sentences3dPrompt{
	transition-property: none;
	animation-name: sentences3dPrompt;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes sentences3dPrompt{
	from{
	//	opacity: 0;
	//	transform: scale(0.3);
	}to{
	//	transform: scale(1);
	//	opacity: 1;
	}
}*/
.boxesRowWrapper{
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes boxesRowWrapperAnimLeft{
	from{
		transform: translateX(-50px);
	}to{
		transform: translateX(0);
	}
}
@keyframes boxesRowWrapperAnimRight{
	from{
		transform: translateX(50px);
	}to{
		transform: translateX(0);
	}
}
/*counterСlockwise*/

.gameBody[data-gameType='grid3d'] .boxWrapper{
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.gameBody[data-gameType='grid3d'][data-dimentionlModoe='mode3d'] .boxWrapper.counterСlockwise{
	animation-name: grid3dCounterСlockwise;
}
.gameBody[data-gameType='grid3d'][data-dimentionlModoe='mode3d'] .boxWrapper.clockwise{
	animation-name: grid3dClockwise;
}
@keyframes grid3dCounterСlockwise{
	from{
		transform: rotateX(0);
	}to{
		transform: rotateX(360deg);
	}
}
 @keyframes grid3dClockwise{
	from{
		transform: rotateX(0);
	}to{
		transform: rotateX(-360deg);
	}
}
.gridRightPartAnim{
	animation-name: gridRightPartAnim; 
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-duration: 0.5s;
}
@keyframes gridRightPartAnim{
	from{
		transform: scale(4);
		color: #76D51F; 
		opacity: 0;
	}to{
		transform: scale(1);
		color: inherit;
		opacity: 1;
	}
}
.gridWrongPartAnim{
	color: #FF4865;
	animation-name: gridWrongPartAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes gridWrongPartAnim{
	from{
		transform: scale(1);
		opacity: 1;
	}to{
		transform: scale(4);
		opacity: 0;
	}
}
.gameBody[data-gameType='grid3d'] .gridLinesAppearance{
	animation-name: gridLinesAppearanceAmim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes gridLinesAppearanceAmim{
	from{
		opacity: 0;
		transform: scale(2);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
.gameBody[data-gameType='grid3d'] .referenceTextLine{
	animation-name: grid3dReferenceTextLineAppearanceAnim;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes grid3dReferenceTextLineAppearanceAnim{
	from{
		opacity: 0;
		transform: scale(0.3);
	}to{
		opacity: 1;
		transform: scale(1);		
	}
}
.gameBody[data-gameType='sentences3d'] .textImage{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: S3dImageAppearance;
}
@keyframes S3dImageAppearance{
/*	from{
		transform: rotateY(-360deg) rotateZ(-180deg) scale(0.2);
		opacity: 0;
	}
	to{
		transform: rotateY(0) rotateZ(0) scale(1);
		opacity: 1;
	}*/
/*	from{
		opacity: 0;
		transform: rotateX(-90deg) scale(0.3);
	}
	to{
		opacity: 1;
		transform: rotateX(0deg) scale(1);
	}	*/
	from{
		opacity: 0;
		transform: translateY(100px);
	}to{
		opacity: 1;
		transform: translateY(0);
	}
}

.MBdestinationCellAppearance{
	animation-name: MBdestinationCellAppearanceAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes MBdestinationCellAppearanceAnim{
	from{
		transform: rotateY(90deg);
		opacity: 0;
	}to{
		transform: rotateY(0deg);
		opacity: 1;
	}
}
[data-gameType = 'memoryBalls'] .colorBallsBox{
	animation-name: MBcolorBallsBoxAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animatio-fill-mode: both;
}
@keyframes MBcolorBallsBoxAnim{
	from{
		opacity: 0;
		transform: translateX(-200px) scale(0.5) rotateX(90deg);
	}/*50%{
		opacity: 1;
	}*/to{
		opacity: 1;
		transform: translateX(0) scale(1) rotateX(0deg);
	}
}
[data-gameType = 'memoryBalls'] .ballsResouce .resourceCell{
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes MBGameBallsAppearance{
	from{
		opacity: 0;
		transform: scale(2);
	}to{
		opacity: 1;
		transform: scale(1)
	}
}
[data-gameType = 'memoryBalls'] .promptBall{
	animation-name: MBPromptGameBallsAppearance;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
} 
@keyframes MBPromptGameBallsAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType = 'simon'] .simonGameCardAppearance{
	animation-name: simonGameCardAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes simonGameCardAppearance{
	from{
		opacity: 0;		
		transform: rotateY(-90deg);
	}to{
		opacity: 1;
		transform: rotateY(0deg);
	}
}
[data-gametype = 'cubes'] .cubesWrapper{
	animation-name: cubesWrapperAnimation;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	
}
@keyframes cubesWrapperAnimation{
	from{
		transform: scale(0.7) rotateX(0);
	}to{
		transform: scale(1) rotateX(55deg);
	}
}
.CubesBoxMotionAnim{
	animation-name: CubesBoxMotionAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes CubesBoxMotionAnim{
	from{
	//	transform: translateZ(0);
	}to{
		transform: translateZ(-200px);
	}
}
[data-gameType = 'cubes'] .box3dSideContent.cubePrompt::before{
	animation-name: cubesPromptColorAnim;
}
[data-gameType = 'cubes'] .box3dSideContent.cubePrompt{
	animation-name: cubesPromptAnim;
}
[data-gameType = 'cubes'] .box3dSideContent.cubePrompt::before,	
[data-gameType = 'cubes'] .box3dSideContent.cubePrompt{	
	animation-duration: 0.3s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes cubesPromptColorAnim{
	from{
		opacity: 0;
	}to{
		opacity: 0.5;
	}
}
@keyframes cubesPromptAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType = 'theoryStudy'] .TSInfoSlideAppearanse{
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes TSInfoSlideAppearanseSimple{
	from{
		opacity: 0.3;
		transform: scale(0.8);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
/*-- анимации комиксов теории --*/
@keyframes TSInfoSlideAppearanseComic{
	from{
		opacity: 0;
		transform: translateX(30%);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}


@keyframes comic_appearanceFromBottom{
	from{
		opacity: 0;
		transform: translateY(50px);
	}to{
		opacity: 1;
		transform: translateY(0);
		visibility: visible;	
	}
}
@keyframes comic_disappearanceToBottom{
	from{
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}to{
		opacity: 0;
		transform: translateY(50px);
		visibility: hidden;	
	}
}
@keyframes comic_simpleAppearance{
	from{
		opacity: 0;		
	}to{
		opacity: 1;
		visibility: visible;	
	}
}
@keyframes comic_simpleDisappearance{
	from{
		opacity: 1;		
		visibility: visible;
	}to{
		opacity: 0;
		visibility: hidden;	
	}
}
@keyframes comic_appearanceWithRotate{
	from{
		opacity: 0;
		visibility: hidden;
		transform: scale(0.2) rotateZ(-90deg);
	}to{
		opacity: 1;
		visibility: visible;
		transform: scale(1) rotateZ(0);
	}
}
/*-- анимации комиксов теории завершение --*/
.userSoundButton.listened::before{
	animation-name: soundButtonOkIndicatorAppearance;
	animation-duration: 0.2s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes soundButtonOkIndicatorAppearance{
	from{
		opacity: 0.3;
		transform: scale(1.3) translateX(30%) translateY(-30%);		
	}to{
		opacity: 1;
		transform: scale(1) translateX(0) translateY(0);	
	}
}
.buttonAndAnswerWrapp[data-visible] .hiddenText{
	animation-name: hiddenTextShowButtAnim;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-fill-mode: both;	
}
@keyframes hiddenTextShowButtAnim{
	from{
		opacity: 0;
		transform: translateX(-50px) translateY(-50px);
	}to{
		opacity: 1;
		transform: translateX(0) translateY(0);		
	}
}
.gameAbacus.animated .horizontalBoard,
.gameAbacus.animated .verticalBoard,
.gameAbacus.animatedForTraining .horizontalBoard,
.gameAbacus.animatedForTraining .verticalBoard{	
	animation-name: abacusFrameAnim;
	animation-timing-function: linar;
	animation-fill-mode: both;
	animation-duration: 1s;
}
.gameAbacus.animated .horizontalBoard{
	
}
.gameAbacus.animated .verticalBoard,
.gameAbacus.animatedForTraining .verticalBoard{
	animation-delay: 0.3s;
}

@keyframes abacusFrameAnim{
	from{
		opacity: 0;
		transform: scale(2);
	}to{
		opacity: 1;
		transform: scale(1);		
	}
}
.gameAbacus.animated .plank,
.gameAbacus.animatedForTraining .plank{
	animation-name: abacusPlankAnim;
	animation-timing-function: linar;
	animation-fill-mode: both;
	animation-duration: 1s;	
	animation-delay: 0.5s;
}
@keyframes abacusPlankAnim{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}to{
		opacity: 1;
		transform: translateX(0);		
	}
}
.gameAbacus.animated .beadsRow{
	opacity: 0;
}
.gameAbacus.animated .beadsRow.animated{
	animation-name: abacusBeadsRowAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes abacusBeadsRowAnim{
	from{
		opacity: 0;
		transform: translateY(-100px);
	}to{
		opacity: 1;
		transform: translateY(0);
	}
}
.gameAbacus.animated .pointsNumChangingIndicator{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: pointsNumChangingIndicatorAmim;
}
@keyframes pointsNumChangingIndicatorAmim{
	from{
		opacity: 1;
		transforom: scale(1);
	}to{
		opacity: 0;
		transform: scale(7);
	}
}
.gameAbacus .optionButton.withAnimation .backgroundEl{
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
.gameAbacus .optionButton.withAnimation.defaultValueButtonAnimationPropcess .backgroundEl{
	animation-name: abacusDefaultValueButtonAnimationPropcess;
}
@keyframes abacusDefaultValueButtonAnimationPropcess{
	from{
		transform: rotateZ(0);
	}to{
		transform: rotateZ(360deg);
	}
}
[data-gameType = 'setTheNumber'] .expressionEl .term{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: termAppearanceAnim;
}
@keyframes termAppearanceAnim{
	from{
		opacity: 0;
		transform: scale(3);
	}to{
		opacity: 1;
		transform: scale(1);		
	}
}

.gameAbacus.animatedForTraining .beadsRow{
	opacity: 0;
}
.gameAbacus.animatedForTraining .beadsRow.animatedForTraining{
	animation-name: abacusBeadsRowAnimFT;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
/*.gameAbacus.animatedForTraining .beadsRow.animatedForTraining.leftPart{
	animation-name: abacusBeadsRowAnimFTLeft;
}
.gameAbacus.animatedForTraining .beadsRow.animatedForTraining.rightPart{
	animation-name: abacusBeadsRowAnimFTRight;
}*/
@keyframes abacusBeadsRowAnimFT{
	from{
		opacity: 0;
		transform: translateY(-150px) rotateX(-90deg) scale(1.5);
	}to{
		opacity: 1;
		transform: translateY(0) rotateX(0) scale(1);
	}
}
/*@keyframes abacusBeadsRowAnimFTLeft{
	from{
		opacity: 0;
		transform: translateY(-150px) rotateX(-90deg) scale(1.5);
	}to{
		opacity: 1;
		transform: translateY(0) rotateX(0) scale(1) rotateZ(0);
	}
}
@keyframes abacusBeadsRowAnimFTRight{
	from{
		opacity: 0;
		transform: translateY(150px) rotateX(-90deg) scale(1);
	}to{
		opacity: 1;
		transform: translateY(0) rotateX(0) scale(1) rotateZ(0);
	}
}*/
[data-gameType = 'setTheNumber'].abacusTraining .statisticsPanel .centralElement.animatedForTraining{
	animation-name: abacusTrainingIndicatorAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
//	animation-duration: 0.7s;
//	animation-delay: 1s;
}
@keyframes abacusTrainingIndicatorAnim{
	from{
		opacity: 0;
		transform: scale(0.5);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType='picturePuzzle'] .scrap:not(.promptScrap){
	animation-name: PPAppearanceDuration;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
@keyframes PPAppearanceDuration{
	from{
		opacity: 0;
		transform: rotateX(-120deg) scale(0.1);
	}to{
		opacity: 1;
		transform: rotateX(0deg) scale(1);		
	}
}
[data-gameType='picturePuzzle'][data-startRoundWithSeparatedScraps] .scrap{
	animation-name: PPAppearanceWithoutScrapsSeparation;
}
@keyframes PPAppearanceWithoutScrapsSeparation{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes PPPromptCorectnessElAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 0.5;
	}
}
@keyframes PPPromptCorectnessElDisappearance{
	from{
		opacity: 1;
	}to{
		opacity: 0;
	}	
}
[data-gameType='puzzleFifteen'] .PFScrap.withAnimation{
//	opacity: 0;	
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: PFScrapAppearanceAnim;
	animation-play-state: paused;
}
/*@keyframes PFScrapAppearanceAnim{
	from{
		opacity: 0;

		transform: translateZ(200px);
	}50%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: translateZ(0);
	}
}*/
@keyframes PFScrapAppearanceAnim{
	from{
		opacity: 0;
		transform: translateZ(200px) rotateY(-90deg) rotateZ(-90deg);
	}50%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: translateZ(0) rotateY(0) rotateZ(0);
	}
}
[data-gameType='puzzleFifteen'] .PFScrap.lastScrapAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: PFLastScrapAnim;	
}
@keyframes PFLastScrapAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes PFPromptScrapLifting{
	from{		
		transform: translateZ(0) rotateY(0) rotateZ(0);
		opacity: 1;
	}50%{
		opacity: 1;
	}to{
		transform: translateZ(200px) rotateY(-90deg) rotateZ(-90deg);	
		opacity: 0;
	}
}
@keyframes PFPromptScrapRestoring{
	from{
		transform: translateZ(200px) rotateY(-90deg) rotateZ(-90deg);	
		opacity: 0;	
	}50%{
		opacity: 1;
	}to{
		transform: translateZ(0) rotateY(0) rotateZ(0);
		opacity: 1;
	}
}
.RTPScrapAppearance{
	animation-name: RTPScrapAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
/*.RTPScrapAppearance.turned{
	animation-name: RTPScrapAppearanceTurned;
}*/
@keyframes RTPScrapAppearance{
	from{
	//	opacity: 0;
		transform: rotateY(-90deg);	
	}to{
	//	opacity: 1;
		transform: rotateY(0);
	}
}
.RTPScrapHighlight, .RTPScrapHighlightEnding{
	z-index: 2;	
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
.RTPScrapHighlight{
	animation-name: RTPScrapHighlightAnim;
}
.RTPScrapHighlightEnding{
	animation-name: RTPScrapHighlightEndingAnim;
}

@keyframes RTPScrapHighlightAnim{
	from{
		transform: scale(1));
	}to{
		transform: scale(1.1);
	}
}
@keyframes RTPScrapHighlightEndingAnim{
	from{
		transform: scale(1.1);
	}to{
		transform: scale(1);
	}
}
@keyframes CTPScrapAppearance{
	from{
		opacity: 0;	
		transform: translateX(-100px) translateY(-100px) rotateY(-90deg) rotateX(-90deg) scale(0.3);
	}to{
		opacity: 1;
		transform: translateX(0) translateY(0) rotateY(0) rotateX(0) scale(1);
	}
}

[data-gameType = 'changeThePuzzle'] .starsEffect{
	animation-name: CTPStarsEffectAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes CTPStarsEffectAnim{
	from{
		transform: scale(0.7);
		opacity: 0;
	}30%{
		opacity: 1;
	}60%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: scale(3);
	}
}
[data-gameType='rainbow'] .taskWord,
[data-gameType='rainbow'] .vatiantWord{
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes rainbowTaskWordAnim{
	from{
		opacity: 0;
		transform: scale(0.2);
	}30%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes rainbowVariantWordAnim{
	from{
		opacity: 0;
		transform: scale(1.5);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType='multiplicationTable'] .digitsInputPanel.visiblePanel{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: MTDdigitsInputPanel;
	animation-duration: 0.7s;
}
@keyframes MTDdigitsInputPanel{
	from{
		opacity: 0;
		transform: scale(0.2);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType='multiplicationTable'] .multiplicationTableAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name : multiplicationTableAnim;
	animation-duration: 0.7s;
}
@keyframes multiplicationTableAnim{
	from{
		opacity: 0;
		transform: scale(0.2) rotateZ(-90deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);		
	}
}
[data-gameType='multiplicationTable'] .rightAnswerElWrapp .rightAnswerEl{
	animation-fill-mode: both;
	animation-timing-function: linear;	
	animation-name: MTRrightAnswerElAnim;
}
.calculationsColumnAnim{
	animation-name : calculationsColumnAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes calculationsColumnAnim{
	from{
		transform: translateX(-100px);
		opacity: 0;
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes MTRrightAnswerElAnim{
	from{
		opacity: 0;
		transform: scale(1);
	}20%{
		opacity: 1;
	}70%{
		opacity: 1
	}to{
		transform: scale(1.5);
		opacity: 0;
	}
}
.transferArrowAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: transferArrowAnim;
	animation-duration: 0.7s;
}
@keyframes transferArrowAnim{
	from{
		transform: translateX(0.5em);
	}to{
		transform: translateX(0);
	}
}

.WPTextImageAppearance{
	animation-name: WPTextImageAppearance;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes WPTextImageAppearance{
	from{
		opacity: 0;
		transform: translateX(100px) translateY(-100px) rotateX(-90deg) rotateY(-90deg) scale(0.3);
	}to{
		opacity: 1;
		transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1);
	}
}
[data-gameType = 'wordParts'] .WPgameLetterAnim,
[data-gameType = 'paintTheSyllables'] .WPgameLetterAnim,
[data-gameType = 'setTheAccent'] .WPgameLetterAnim{
	animation-name: WPgameLetterAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;	
}
@keyframes WPgameLetterAnim{
	from{
		opacity: 0;
		transform: scale(2) translateY(50px);
	}70%{
		opaity: 1;
	}to{
		opacity: 1;
		transforom: scale(1) translateY(0);
	}
}
[data-gameType = 'wordParts'] .WPGamePanelButtonAnim,
[data-gameType = 'paintTheSyllables'] .WPGamePanelButtonAnim,
[data-gameType = 'sentencesParts'] .WPGamePanelButtonAnim{
	animation-name: WPGamePanelButtonAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
[data-gameType = 'wordParts'] .WPGamePanelButtonAnim,
[data-gameType = 'paintTheSyllables'] .WPGamePanelButtonAnim,
[data-gameType = 'sentencesParts'] .WPGamePanelButtonAnim{
	opacity: 0;
}
@keyframes WPGamePanelButtonAnim{
	from{
		opacity: 0;
		transform: translateX(100px) scaleY(0);
	}60%{
	//	opacity: 0;
	}to{
		opacity: 1;
		transform: translateX(0) scaleY(1);
	}
}
.gameSoundButtonAppearanceAmim{
	animation-name: gameSoundButtonAppearanceAmim;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes gameSoundButtonAppearanceAmim{
	from{
		opacity: 0;
		transform: scale(0);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
.WPRrightAnswerLettersAnim{
	animation-name: rightAnswerLettersAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	position: relative;
}
@keyframes rightAnswerLettersAnim{
	from{
		top: 0;
	//	transform: translateY(0);
	}50%{
	//	transform: translateY(100%);
		top: -30px;
	}to{
	//	transform: translateY(0);
		top: 0;
	}
}
.STAAccentAppearanceAnim{
	animation-name : STAAccentAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-fucntion: linear;
}
@keyframes STAAccentAppearanceAnim{
	from{
		opacity: 0;
		transform: rotateZ(90deg) translateX(50px) translateY(-50px);		
	}50%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: rotateZ(0) translateX(0) translateY(0);	
	}
}
.STAAccentDisappearanceAnim{
	animation-name : STAAccentDisappearanceAnim;
	animation-fill-mode: both;
	animation-timing-fucntion: linear;
}
@keyframes STAAccentDisappearanceAnim{
	from{
		opacity: 1;
		transform: rotateZ(0) translateX(0) translateY(0);	
	}50%{
		opacity: 1;
	}to{
		opacity: 0;
		transform: rotateZ(-90deg) translateX(-50px) translateY(50px);	
	}
}
.SPParAppearanceAnim{
	animation-name : SPParAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SPParAppearanceAnim{
	from{
		opacity: 0;
		transform: rotateZ(-15deg) scale(0.3);
	}to{
		opacity: 1;
		transform: rotateZ(0) scale(1);
	}
}
.SPSentMarkAppearanceAnim{
	animation-name: SPSentMarkAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes SPSentMarkAppearanceAnim{
	from{
		opacity: 0;
		right: 100%;
	}30%{
		opacity: 1;
	}to{
		opacity: 1;
		right: 0;
	}
}
.SPSentMarkDisappearanceAnim{
	animation-name: SPSentMarkDisappearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
/*@keyframes SPSentMarkDisappearanceAnim{
	from{
		opacity: 1;
		right: 0;
	}70%{
		opacity: 1;
	}to{
		opacity: 0;
		right: -100%;
	}
}*/
@keyframes SPSentMarkDisappearanceAnim{
	from{
		opacity: 1;
		right: 0;
		transform: scale(1) rotateZ(0);
	}to{
		opacity: 0;
		right: -100%;
		transform: scale(2) rotate(90deg);
	}
}
.SPDInfoElAppearance{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: SPDInfoElAppearance;
	animation-duration: 0.7s;
}
@keyframes SPDInfoElAppearance{
	from{
		opacity: 0;
		transform: scale(1.5) rotateZ(-30deg);
	}30%{
	//	opacity: 1;
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(1);
	}
}
.CTCRoundTextAppearanceAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: CTCRoundTextAppearanceAnim;
	
}
@keyframes CTCRoundTextAppearanceAnim{
	from{
	//	filter: blur(10px);
		transform: scaleY(5) rotateY(90deg);
		opacity: 0;
	}to{
		filter: clur(0);
		transform: scaleY(1) rotateY(0);
	//	opacity: 1;
	}
}
.CTCGameCardAppearanceAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: CTCGameCardAppearanceAnim;
}
@keyframes CTCGameCardAppearanceAnim{
	from{
		transform: rotateY(-180deg);
	}to{
		transform: rotateY(0);
	}
}
[data-gameType = 'chooseTheCard'] .gameCards{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: CTCGameCardsElAppearance;
	animation-duration: 0.7s;
}
@keyframes CTCGameCardsElAppearance{
	from{
		opacity: 0;
		transform: scale(0.7);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
.CTCResultInfoAnim{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: CTCResultInfoAnim;
}
@keyframes CTCResultInfoAnim{
	from{
		opacity: 0;
		filter: blur(4px);
	}to{
		filer: none;
		opacity: 1;
	}
}

/*-- Слайдер изображений теории --*/
.TSPSlide{
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-play-state: paused;
}
.TSPSlide.appeared{
	display: block;
	animation-play-state: running;
}
/*C opacity*/
@keyframes TSPS_simpleAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes TSPS_appearanceFromBig{
	from{
		opacity: 0;
		transform: scale(2);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes TSPS_appearanceFromLittle{
	from{
		opacity: 0;
		transform: scale(0.3);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes TSPS_appearanceWithRotation{
	from{
		opacity: 0;
		transform: scale(0.3) rotateZ(-180deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);
	}
}
/*Без opacity*/
@keyframes TSPS_appearanceFromBottom{
	from{
		top: 100%;
	}to{
		top: 0;
	}
}
@keyframes TSPS_appearanceFromTop{
	from{
		bottom: 100%;
	}to{
		bottom: 0;
	}
}
@keyframes TSPS_appearanceFromLeft{
	from{
		right: 100%;
	}to{
		right: 0;
	}
}
@keyframes TSPS_appearanceFromRight{
	from{
		left: 100%;
	}to{
		left: 0;
	}
}
@keyframes TSPS_appearanceFromLeftTop{
	from{
		transform: translateX(-100%) translateY(-100%);
	}to{
		transform: translateX(0) translateY(0);
	}	
}
@keyframes TSPS_appearanceFromRightTop{
	from{
		transform: translateX(100%) translateY(-100%);
	}to{
		transform: translateX(0) translateY(0);
	}	
}
@keyframes TSPS_appearanceFromLeftBottom{
	from{
		transform: translateX(-100%) translateY(100%);
	}to{
		transform: translateX(0) translateY(0);
	}	
}
@keyframes TSPS_appearanceFromRightBottom{
	from{
		transform: translateX(100%) translateY(100%);
	}to{
		transform: translateX(0) translateY(0);
	}	
}

/*-- Слайдер изображений теории завершение--*/
/*-- Игры из проекта ментальной арифметики --*/
[data-gameType='reading'] .readingSimpleAppearance{
	animation-name: readingSimpleAppearanceAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes readingSimpleAppearanceAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
[data-gameType='reading'] .answers .answer{
	animation-name: readingAnswersAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes readingAnswersAnim{
	from{
		transform: translateX(-100px);
		opacity: 0;
	}to{
		transform: translateX(0);
		opacity: 1;		
	}
}
[data-gameType='reading'] .questionBlock .question{
	animation-name: snakeQuestionAnim;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes snakeQuestionAnim{
	from{
		opacity: 0;
		transform: scale(0.1);
	}to{
		opacity: 1;
		transform: scale(1);
	}
}
[data-gameType='wedgeTables'] .wedgeTableImage{
	animation-name: wedgeTableImageAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes wedgeTableImageAnim{
	from{
		opacity: 0;
		transform: rotateX(-90deg) scale(0.5);
	}to{
		opacity: 1;
		transform: rotateX(0) scale(1);
	}
}
.VW_videoAppearance{
	animation-name: VW_videoAppearanceAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes VW_videoAppearanceAnim{
	from{
		opacity: 0;
		transform: scale(0.2) rotateZ(-45deg);
	}70%{
		opacity: 1;
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0);
	}
}
[data-gameType='quizMental'] .questionBody .answerVariant{
	animation-name: QManswerVariantAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes QManswerVariantAnim{
	from{
		transform: scale(3);
		opacity: 0;
	}to{
		transform: scale(1);
		opacity: 1;		
	}
}
[data-gameType='quizMental'] .questionImage{
	animation-name: QMquestionImageAnim;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-delay: 0.5s;
}
@keyframes QMquestionImageAnim{
	from{
		opacity: 0;
		transform: scale(0) rotateZ(-720deg) rotateX(-90deg);
	}to{
		opacity: 1;
		transform: scale(1) rotateZ(0deg) rotateX(0);		
	}
}
[data-gameType='quizMental'] .questionBody .questionText{
	animation-name: QMquestionTextAnim;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
@keyframes QMquestionTextAnim{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}to{
		opacity: 1;
		transform: translateX(0);
	}
}
[data-gameType='shulte'] .shulteTableCellEl[data-status = 'wrong'] .numInsctiptEl{
	display: block;
	position: relative;
	animation-name: shulteTableCellElAnim;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: 3;	
}
@keyframes shulteTableCellElAnim{
	from{
		transform: translateX(0);
	}25%{
		transform: translateX(-10px);
	}50%{
		transform: translateX(0);
	}75%{
		transform: translateX(10px);
	}to{
		transform: translateX(0);
	}
}
[data-gameType='shulte'] .shulteTableEl{
	animation-name: shulteTableElAnim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes shulteTableElAnim{
	from{
		opacity: 0;
		transform: rotateY(-90deg);
	}to{
		opacity: 1;
		transform: rotateY(0);
	}
}
/*-- Игры из проекта ментальной арифметики завершение --*/
/*-- Новый дизайн --*/
.PBIndicatorAnim{
	animation-name: PBIndicatorAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	transform-origin: center bottom;
}
@keyframes PBIndicatorAnim{
	from{
		transform: scale(1);
	}50%{
		transform: scale(1.5);
	}to{
		transform: scale(1);
	}
}
.progressIndicatorTextWrapp{
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes PBIndicatorTextAppearance{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
@keyframes PBIndicatorTextDisappearance{
	from{
		opacity: 1;
	}to{
		opacity: 0;
	}
}
/*-- Новый дизайн завершение --*/

/*@keyframes RTPScrapAppearanceTurned{
	from{
	//	opacity: 0;
		transform: rotateY(-270deg);
	}to{
	//	opacity: 1;
		transform: rotateY(-180deg);
	}	
}*/

/*
.sentences3dBoxAppearanseAnim{
	animation-name: sentences3dBoxAppearanseAnim;
	animation-fill-mode: both;
	animation-timing-function: linear;
}
@keyframes sentences3dBoxAppearanseAnim{
	from{
		transform: rotateY(-45deg);
		opacity: 0;
	}to{
		transform: rotateY(-0deg);
		opacity: 1;
	}
}*/
/*
.LTPPropmtAppearanceAnim{
	animation-name: opacityAppearanceAnim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}
@keyframes LTPPropmtAppearanceAnim{
	from{
		opacity: 0;
	}to{
		opacity: 1;
	}
}
*/





/*@keyframes snakeCaughtLetterAppearanceAnim2{
	from{
		opacity: 0;
	//	transform: scale(1);
	}to{
		transform: scale(15);
	//	opacity: 1;
		font-size: 50px;
	}
}*/

/*.cards{
	animation-name: simple
}
/*
@keyframes GTIBButtonJump{
	from{
		
	}to{
		
	}
}*/

/*
.MCturnedCardToFace, .MCturnedCardToBack{
	animation-fill-mode: both;
	animation-timing-function: linear;	
}
.MCturnedCardToFace{
	animation-name: MCturnedCardToFace;
}
@keyframes MCturnedCard{
	from{
		transform: rotateY(0);
	}to{
		transform: rotateY(180deg);
	}
}
@keyframes MCturnedCardToBack{
	animation-name: MCturnedCardToBack;
	from{
		transform: rotateY(180deg);
	}to{
		transform: rotateY(0);
	}	
}*/