@charset "UTF-8";

#prWrapper{
	width:300px;
	height:250px;
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden !important;	
	background-color:#000 !important;
}

/****************************/
/*---> INITIAL FRAME<---* sept 28th 12:06PM/
/****************************/
#prAnimContainer{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(bg_initial.jpg) !important;
	opacity:0;
}
#prAnimContainer.prOn{
	-webkit-animation:prAnimFadeIn .5s forwards linear;
	-moz-animation:prAnimFadeIn .5s forwards linear;
	animation:prAnimFadeIn .5s forwards linear;
}
@-webkit-keyframes prAnimFadeIn{
	0%{ 	opacity:0;}
	100%{ 	opacity:1;}
}
@-moz-keyframes prAnimFadeIn{
	0%{ 	opacity:0;}
	100%{ 	opacity:1;}
}
@keyframes prAnimFadeIn{
	0%{ 	opacity:0;}
	100%{ 	opacity:1;}
}

#prCopy1{
	width:226px;
	height:45px;
	position:absolute;
	top:85px;
	left:14px;
	background-image:url(copy1.png) !important;
	
	-webkit-transform-origin:bottom left;
	-moz-transform-origin:bottom left;
	transform-origin:bottom left;
}

#prCopy2{
	width:201px;
	height:45px;
	position:absolute;
	top:85px;
	left:14px;
	background-image:url(copy2.png) !important;
	
	-webkit-transform-origin:bottom left;
	-moz-transform-origin:bottom left;
	transform-origin:bottom left;
}

#prCopy1.prReady, #prCopy2.prReady{
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	transform:scale(0);
}
#prCopy1.prOn, #prCopy2.prOn{
	-webkit-animation:prAnimScaleUp .25s forwards ease;
	-moz-animation:prAnimScaleUp .25s forwards ease;
	animation:prAnimScaleUp .25s forwards ease;
}
#prCopy1.prOff, #prCopy2.prOff{
	-webkit-animation:prAnimScaleDown .25s forwards ease;
	-moz-animation:prAnimScaleDown .25s forwards ease;
	animation:prAnimScaleDown .25s forwards ease;
}

@-webkit-keyframes prAnimScaleUp{
	0%{ 	-webkit-transform:scale(0); opacity:.5;}
	100%{ 	-webkit-transform:scale(1); opacity:1;}
}
@-moz-keyframes prAnimScaleUp{
	0%{ 	-moz-transform:scale(0); opacity:.5;}
	100%{ 	-moz-transform:scale(1); opacity:1;}
}
@keyframes prAnimScaleUp{
	0%{ 	transform:scale(0); opacity:.5;}
	100%{ 	transform:scale(1); opacity:1;}
}

@-webkit-keyframes prAnimScaleDown{
	0%{ 	-webkit-transform:scale(1); opacity:1;}
	33%{ 	-webkit-transform:scale(1.2); opacity:1;}
	100%{ 	-webkit-transform:scale(0); opacity:.5;}
}
@-moz-keyframes prAnimScaleDown{
	0%{ 	-moz-transform:scale(1); opacity:1;}
	20%{ 	-moz-transform:scale(1.2); opacity:1;}
	100%{ 	-moz-transform:scale(0); opacity:.5;}
}
@keyframes prAnimScaleDown{
	0%{ 	transform:scale(1); opacity:1;}
	20%{ 	transform:scale(1.2); opacity:1;}
	100%{ 	transform:scale(0); opacity:.5;}
}


/****************************/
/*---> FACES / NAME TAGS<---*/
/****************************/
/*FACES*/
.prFace{
	width:142px;
	height:142px;
	position:absolute;
	overflow:visible !important;
	border-radius:50%;
	opacity:0;
	
	-webkit-transform-origin:center;
	-moz-transform-origin:center;
	transform-origin:center;
}
.prMozFaceClassUp{
	-moz-transition:all .34s;
	transition:all .34s;
}
.prMozFaceClassDown{
	-moz-transition:all .16s;
	transition:all .16s;
}

@-webkit-keyframes prAnimPopIn{
	0%{ 	-webkit-transform:scale(0); opacity:.25;}
	66%{ 	-webkit-transform:scale(.55); opacity:.5;}
	100%{ 	-webkit-transform:scale(.44); opacity:.5;}
}
@-moz-keyframes prAnimPopUp{
	0%{ 	-moz-transform:scale(0); opacity:.25;}
	66%{ 	-moz-transform:scale(.55); opacity:.5;}
	100%{ 	-moz-transform:scale(.44); opacity:.5;}
}
@keyframes prAnimPopUp{
	0%{ 	transform:scale(0); opacity:.25;}
	66%{ 	transform:scale(.55); opacity:.5;}
	100%{ 	transform:scale(.44); opacity:.5;}
}

#prFace1{
	top:-29px;
	left:-9px;
	background-image:url(face_accountant.png) !important;
	background-size:142px 142px;
}
#prFace2{
	top:-29px;
	left:77px;
	background-image:url(face_babysitter.png) !important;
	background-size:142px 142px;
}
#prFace3{
	top:-29px;
	left:163px;
	background-image:url(face_caretaker.png) !important; 
	background-size:142px 142px;
}
#prFace4{
	top:39px;
	left:-9px;
	background-image:url(face_chef.png) !important;
	background-size:142px 142px;
}
#prFace5{
	top:39px;
	left:77px;
	background-image:url(face_driver.png) !important;
	background-size:142px 142px;
}
#prFace6{
	top:39px;
	left:163px;
	background-image:url(face_gardener.png) !important;
	background-size:142px 142px;
}
#prFace7{
	top:109px;
	left:-9px;
	background-image:url(face_handyman.png) !important;
	background-size:142px 142px;
}
#prFace8{
	top:109px;
	left:77px;
	background-image:url(face_housekeeper.png) !important;
	background-size:142px 142px;
}
#prFace9{
	top:109px;
	left:163px;
	background-image:url(face_tutor.png) !important;
	background-size:142px 142px;
}

/*NAME TAGS*/
.prNameTag{
	width:98px;
	height:30px;
	position:absolute;
	top:100%;
	left:50%;
	margin-top:-20px !important;
	margin-left:-49px !important;
	overflow:visible !important;
	background:#3f9cd1 !important;
	
	-webkit-transform-origin:top center;
	-moz-transform-origin:top center;
	transform-origin:top center;
	
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	transform:scale(0);
}
#prNameTag1{ background-image:url(name_acountant.png) !important;}
#prNameTag2{ background-image:url(name_babysitter.png) !important;}
#prNameTag3{ background-image:url(name_caretaker.png) !important;}
#prNameTag4{ background-image:url(name_chef.png) !important;}
#prNameTag5{ background-image:url(name_driver.png) !important;}
#prNameTag6{ background-image:url(name_gardener.png) !important;}
#prNameTag7{ background-image:url(name_handyman.png) !important;}
#prNameTag8{ background-image:url(name_housekeeper.png) !important;}
#prNameTag9{ background-image:url(name_tutor.png) !important;}




/********************/
/*---> END FRAME<---*/
/********************/
#prEndFrame{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(bg_endFrame.jpg) !important;
	opacity:0;
}
#prEndFrame.prOn{
	-webkit-animation:prAnimFadeIn .5s forwards linear;
	-moz-animation:prAnimFadeIn .5s forwards linear;
	animation:prAnimFadeIn .5s forwards linear;
}

#prEFCopy1{
	width:240px;
	height:100px;
	position:absolute;
	top:26px;
	left:17px;
	background-image:url(EF_copy1.png) !important;
	opacity:0;
	background-repeat: no-repeat;
	
	-webkit-transform:translate(0px, 30px);
	-moz-transform:translate(0px, 30px);
	transform:translate(0px, 30px);
}

#prEFCopy2{
	width:225px;
	height:14px;
	position:absolute;
	top:122px;
	left:18px;
	background-image:url(EF_copy2.png) !important;
	opacity:0;
	
	-webkit-transform:translate(0px, 30px);
	-moz-transform:translate(0px, 30px);
	transform:translate(0px, 30px);
}

#prEFLogo{
	width:136px;
	height:40px;
	position:absolute;
	top:195px;
	left:151px;
	background-image:url(EF_logo.png) !important;
	opacity:0;
	
	-webkit-transform:translate(0px, 30px);
	-moz-transform:translate(0px, 30px);
	transform:translate(0px, 30px);
}

@-webkit-keyframes prAnimFadeUp{
	0%{ 	-webkit-transform:translate(0px, 30px);opacity:0;}
	100%{ 	-webkit-transform:translate(0px, 0px);opacity:1;}
}
@-moz-keyframes prAnimFadeUp{
	0%{ 	-moz-transform:translate(0px, 30px);opacity:0;}
	100%{ 	-moz-transform:translate(0px, 0px);opacity:1;}
}
@keyframes prAnimFadeUp{
	0%{ 	transform:translate(0px, 30px);opacity:0;}
	100%{ 	transform:translate(0px, 0px);opacity:1;}
}

#prEFCtaBtn{
	width:121px;
	height:35px;
	position:absolute;
	top:152px;
	/*left:19px;*/
	left:-300px;
	background-image:url(EF_cta.png);/* !important;*/
	opacity:0;
	z-index:999;
	cursor:pointer;
}
#border_and_GenClick{
	top: 0px;
	left: 0px;
	width: 300px;
	height: 600px;
	position: absolute;
	overflow:visible;
	background-repeat: no-repeat;
	border: 1px solid;
	border-color:#CCC;
	box-sizing: border-box;
	cursor:pointer;
	z-index:0;
}
#prSerialNumber{
	
	width:auto;
	height:auto;
	left:8px;
	bottom:5px;
	position:absolute;
	
	font-family: 'sans-serif';
	font-size:9px;
	color:#0d2445;
	
	-webkit-animation: animateSerial 1s 2.5s 1;
	-moz-animation: animateSerial 1s 2.5s 1;
	animation: animateSerial 1s 2.5s 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

@-webkit-keyframes animateSerial {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes animateSerial {
   0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes animateSerial {
   0%   { opacity: 1; }
  100% { opacity: 0; }
}