.pulseit { 
	-webkit-animation: pulse linear 4.5s infinite; 
	-moz-animation:pulse linear 4.5s infinite;
	animation: pulse linear 4.5s infinite;
 } 
 
 
@-webkit-keyframes pulse { 
	0% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1);}
	50% { 
		-ms-transform: scale(1.3,1.3); /* IE 9 */
		-webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
		transform: scale(1.3,1.3);} 
	100% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1); } 
}
 @keyframes pulse {
	0% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1);}
	50% { 
		-ms-transform: scale(1.3,1.3); /* IE 9 */
		-webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
		transform: scale(1.3,1.3);} 
	100% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1); } 
 } 
 @-moz-keyframes pulse {
	0% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1);}
	50% { 
		-ms-transform: scale(1.3,1.3); /* IE 9 */
		-webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
		transform: scale(1.3,1.3);} 
	100% {
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
		transform: scale(1,1); } 
 }
 #Progress_B {
	width: 100%;
	height: 100%;
	z-index: 100;
	margin: 0 auto;
	text-align: center;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	float: left;
	background-image:url(/Content/img/black_20x20.png);
	background:url(/Content/img/black_20x20.png);
	background-repeat:repeat;
}

#Progress_B img {
	position: absolute;
	margin: auto;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}
.login-wrap{position:absolute;top:50%;left:0;right:0; margin: -75px auto 0;z-index:10}
#WUworld{width:1000px;height:600px; background:url(/Content/img/world_1.png); background-position:center center; background-repeat:no-repeat;margin:-50px  auto ; visibility:hidden;z-index:4}
@media only screen and (min-device-width: 1200px){
	#WUlogo{width:199px;height:147px;display:block; background:url(/Content/img/arrow.png); position:absolute; left: 62%;top: 18%;opacity: 0.0;z-index:5;}
	 }
@media only screen and (max-device-width: 1199px){
	#WUlogo{width:199px;height:147px;display:block; background:url(/Content/img/arrow.png); position:absolute; left: 70%;top: 18%;opacity: 0.0;z-index:5;}
	}
@media only screen and (min-device-width: 1200px){
#WUscript{width:352px;height:54px; background:url(/Content/img/wearup.png); position:absolute; left:50%;top: 30%;opacity: 0.0;z-index:6;}
}
@media only screen and (max-device-width: 1199px){
	#WUscript{width:352px;height:54px; background:url(/Content/img/wearup.png); position:absolute; left:15%;top: 30%;opacity: 0.0;z-index:6;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	._novertical{display:none}
	.login-wrap{top:38%}
	.login-btn, .login-btn:hover {margin-top:0}

	
}
#WUwebapp{width:655px;height:32px;display:block; background:url(/Content/img/web-app.png);opacity: 0.0;z-index:7;overflow: hidden;
   position:absolute;top: 70%;left:10%}
#WUline{width:894px;height:3px;display:block; background:url(/Content/img/line.png); background-position:center center; background-repeat:no-repeat; position:absolute; overflow:hidden;top: 77%;z-index:10}
#WUflags{width:1000px;height:600px; background:url(/Content/img/world-flags.png); background-position:center center; position:absolute;background-repeat:no-repeat;margin:-50px  auto ; opacity:0.0;z-index:20}
span{width:36px;height:33px;position:absolute;z-index:20; background-position:center center; background-repeat:no-repeat; cursor:pointer}
#de-DE{background:url(/Content/img/flags/de-DE.png) no-repeat center center;display:none; }
#en-US{background:url(/Content/img/flags/en-US.png)  no-repeat center center;display:none; }
#en-EN{background:url(/Content/img/flags/en-EN.png)  no-repeat center center;display:none; }
#pt-PT{background:url(/Content/img/flags/pt-PT.png) no-repeat center center;display:none; }
#ru-RU{background:url(/Content/img/flags/ru-RU.png) no-repeat center center;display:none; }
#it-IT{background:url(/Content/img/flags/it-IT.png) no-repeat center center;display:none; }
#fr-FR{background:url(/Content/img/flags/fr-FR.png) no-repeat center center;display:none; }
#ar-AR{background:url(/Content/img/flags/ar-AR.png) no-repeat center center;display:none; }
#es-ES{background:url(/Content/img/flags/es-ES.png) no-repeat center center;display:none; }
#zh-CN{background:url(/Content/img/flags/zh-CN.png) no-repeat center center;display:none; }
#ja-JP{background:url(/Content/img/flags/ja-JP.png) no-repeat center center;display:none; }
#ur-PK{background:url(/Content/img/flags/ur-PK.png) no-repeat center center;display:none; }
#en-GB{background:url(/Content/img/flags/en-EN.png)  no-repeat center center;display:none; }
#sr-Latn-BA{background:url(/Content/img/flags/sr-Latn-BA.png) no-repeat center center;display:none; }
/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
slideDown
==============================================
*/

.Floating{

	-webkit-animation-name: Floatingx!important;
	-webkit-animation-duration: 2.4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in;
	-moz-animation-name: Floating;
	-moz-animation-duration: 2.4s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in;
	}
	
@-webkit-keyframes Floatingx{
	0% {-webkit-transform:translate(0);}
   40% {-webkit-transform:translate(40px);}
   
	60% {-webkit-transform:translate(-40px);}
	100% {-webkit-transform: translate(0);    }    
}
	
@-moz-keyframes Floating{
	 0% {-moz-transform:translate(0);}
   40% {-moz-transform:translate(40px);}
 
	60% {-moz-transform:translate(-40px);}
	100% {-moz-transform: translate(0);    }    
}
@media only screen and (max-device-width: 1199px){
	@-webkit-keyframes Floatingx {
		0% {
			-webkit-transform: translate(150px);
		}

		40% {
			-webkit-transform: translate(190px);
		}

		60% {
			-webkit-transform: translate(110px);
		}

		100% {
			-webkit-transform: translate(150px);
		}
	}
}
	
@-moz-keyframes Floating{
	0% {-webkit-transform:translate(150px);}
   40% {-webkit-transform:translate(190px);}
   
	60% {-webkit-transform:translate(110px);}
	100% {-webkit-transform: translate(150px);    }    
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	opacity:1;					
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:slideUp ease-in-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:slideUp ease-in-out 1;
	animation:slideUp ease-in-out 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.7s;
	-moz-animation-duration:0.7s;
	animation-duration:0.7s;
	-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;	
}

@-webkit-keyframes slideUp { from { opacity:0; } to { opacity:1;position:absolute;top:500px!important} }
@-moz-keyframes slideUp { from { opacity:0; } to { opacity:1;position:absolute;top:500px!important }}
@keyframes slideUp { from { opacity:0; } to { opacity:1;position:absolute;top:500px!important}}


/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:slideLeft ease-in-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:slideLeft ease-in-out 1;
	animation:slideLeft ease-in-out 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
	animation-duration:0.5s; 
	-webkit-animation-delay: 4s;
-moz-animation-delay:4s;
animation-delay:4s; 

}

@-webkit-keyframes slideLeft { from { opacity:0; right:0px} to { opacity:1;right:26% } }
@-moz-keyframes slideLeft {  from { opacity:0; right:0px} to { opacity:1;right:26% } }
@keyframes slideLeft {  from { opacity:0; right:0px} to { opacity:1;right:26% }}
@media only screen and (max-device-width: 1199px){
		@-webkit-keyframes slideLeft { from { opacity:0; right:0px} to { opacity:1;right:16% } }
		@-moz-keyframes slideLeft {  from { opacity:0; right:0px} to { opacity:1;right:16% } }
		@keyframes slideLeft {  from { opacity:0; right:0px} to { opacity:1;right:16% }}
}

/*
==============================================
slideRight
==============================================
*/


.slideRight{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:slideRight ease-in-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:slideRight ease-in-out 1;
	animation:slideRight ease-in-out 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
	animation-duration:0.5s; 
	-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}

@-webkit-keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:20% } }
@-moz-keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:20% } }
@keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:20% } }

@media only screen and (max-device-width: 1199px){
		@-webkit-keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:10%;top:25% } }
		@-moz-keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:10% ;top:25%} }
		@keyframes slideRight { from { opacity:0; left:-10%} to { opacity:1;left:10%;top:25% } }
}
/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
.fadeIn_late1{
	 opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
@keyframes fadeIn_late1 {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.2);	
	}
	90% {
		transform: scale(0.8);
		opacity: 1;	
	}	
	97% {
		transform: scale(1.1);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn_late1 {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.2);
	}
	
	90% {
		webkit-transform: scale(0.8);
		opacity: 1;	
	}	
	97% {
		webkit-transform: scale(1.1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
.fadeIn_late2{
	 opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn_late2 ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn_late2 ease-in 1;
	animation:fadeIn_late2 ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}
@keyframes fadeIn_late2 {
	0% {
		transform: scale(0);
		opacity: 0.0;
	}
	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn_late2 {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;
	}	
	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);		
	}
	50% {
		transform: scale(0.95);
	}	
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);		
	}
	50% {
		-webkit-transform: scale(0.95);
	}	
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}	
	100% {
		-webkit-transform: scale(1);
	}					
}

/*
==============================================
hatch
==============================================
*/

.flag_selected{
	animation-name: flag_selected;
	-webkit-animation-name: flag_selected;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

		-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;	
 visibility:visible!important;
}

@keyframes flag_selected {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes flag_selected {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% { 
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}


/*
==============================================
bounce
==============================================
*/


.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 	
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}
	60%{
		transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}	
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}		
}