@charset "utf-8";

body,h1,h2,div{
  margin:0px;
  padding: 0px;
  font-family: 'SegoeRg';
  color: #ffffff;
}
@font-face {
  font-family: 'SegoeRg';
  src: url('SegoeRg.ttf')  format('truetype'); /* All browsers */ 
}
@font-face {
  font-family: 'SegoeWP-Light';
  src: url('SegoeWP-Light.ttf')  format('truetype'); /* All browsers */ 
}
#banner{
  width: 298px;
  height: 248px; 
 /* cursor: pointer;*/
  display: block;
  background: #24376D;
  visibility: visible;
  overflow: hidden;
  position:absolute;  
  z-index: -999;
  border: 1px solid #666666;
 
}

/*********** eliments and positions **********/

#lady_img{
	width:300px;
	height:250px;
	background: url(lady_img.jpg) no-repeat; 
	position:absolute;
	left:0px;
	
	-webkit-animation:lady_img 12s ease-out forwards;
    -moz-animation:lady_img 12s ease-out forwards;
    -o-animation: lady_img 12s ease-out forwards;
	animation: lady_img 12s ease-out forwards;
}
#copy1{
	position:absolute;
	font-family: 'SegoeWP-Light';
	font-size:68px;
	bottom: 40px;
	left:25px;
	-webkit-animation: copy1 12s ease-out forwards;
    -moz-animation: copy1 12s ease-out forwards;
    -o-animation: copy1 12s ease-out forwards;
	animation: copy1 12s ease-out forwards;
}
#copy1{
	position:absolute;
	font-family: 'SegoeWP-Light';
	font-size:68px;
	bottom: 20px;
	left:25px;
	-webkit-animation: copy1 12s ease-out forwards;
    -moz-animation: copy1 12s ease-out forwards;
    -o-animation: copy1 12s ease-out forwards;
	animation: copy1 12s ease-out forwards;
}
#copy1-sub{
	position:absolute;
	font-family: 'SegoeRg';
	font-size:13px;
	bottom: 17px;
	left:45px;
	-webkit-animation: copy1 12s ease-out forwards;
    -moz-animation: copy1 12s ease-out forwards;
    -o-animation: copy1 12s ease-out forwards;
	animation: copy1-sub 12s ease-out forwards;
}
#copy2{
	position:absolute;
	font-family: 'SegoeRg';
	font-size:23px;
	width:300px;
	height:250px;
	top: 10px;
	left:305px;
	line-height:26px;
	-webkit-animation: copy2 12s ease-out forwards;
    -moz-animation: copy2 12s ease-out forwards;
    -o-animation: copy2 12s ease-out forwards;
	animation: copy2 12s ease-out forwards;
}
#device{
	width:134px; 
	height:241px; 
	background: url(device.png) no-repeat; 
	position:absolute;
	top: 4px;
	left: 305px;
	-webkit-animation:device_animation 12s ease-out forwards; 
    -moz-animation:device_animation 12s ease-out forwards; 
    -o-animation: device_animation 12s ease-out forwards; 
	animation: device_animation 12s ease-out forwards; 
}
#win_logo{
	width:108px; 
	height:20px; 
	background:url(win_logo.jpg) no-repeat; 
	position:absolute; 
	left:10px; 
	top:10px;
	-webkit-animation:win_logo 12s ease-out forwards; 
    -moz-animation:win_logo 12s ease-out forwards; 
    -o-animation: win_logo 12s ease-out forwards; 
	animation: win_logo 12s ease-out forwards; 
}
#nokia_logo{
	width:65px; 
	height:18px; 
	background:url(nokia_logo.jpg) no-repeat; 
	position:absolute; 
	left:10px; 
	bottom:10px;
	-webkit-animation:nokia_logo 12s ease-out forwards;
    -moz-animation:nokia_logo 12s ease-out forwards;
    -o-animation: nokia_logo 12s ease-out forwards;
	animation: nokia_logo 12s ease-out forwards; 
}
#copy3{
	position:absolute; 
	font-family: 'SegoeRg';
	font-size:23px;
	line-height:26px;
	left:10px; 
	top:60px;
	-webkit-animation:copy3 12s ease-out forwards;
    -moz-animation:copy3 12s ease-out forwards;
    -o-animation: copy3 12s ease-out forwards;
	animation: copy3 12s ease-out forwards; 
}
#cta{
	position:absolute; 
	width:116px; 
	height:34px; 
	background:url(learn_more.jpg) no-repeat; 
	left:10px; 
	bottom:60px;
	-webkit-animation:cta 12s ease-out forwards;
    -moz-animation:cta 12s ease-out forwards;
    -o-animation: cta 12s ease-out forwards;
	animation: cta 12s ease-out forwards; 
}
#ie{
	position:absolute; 
	width:300px;
	height:250px;
	z-index:1;
}
/********** webkit ***************/

@-webkit-keyframes lady_img {
	0%{ opacity:0; }
	10%{opacity:1;}
	20%{opacity:1;}
	30%{opacity:1;left:0px}
	35%{left:-302px;}
	100%{left:-302px;}
}
@-webkit-keyframes copy1 {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:1}
	30%{opacity:1;left:25px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-webkit-keyframes copy1-sub {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:0}
	20% {opacity:1}
	30%{opacity:1;left:45px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-webkit-keyframes copy2 {
	0%{ opacity:0}
	30%{opacity:0;}
	30%{left:305px; opacity:1}
	35%{left:10px;}
	63%{left:10px;}
	70%{left: -250px;}
	100%{left: -250px;}
}

@-webkit-keyframes device_animation {
	0%{ opacity:0}
	30%{opacity:0;}
	32%{left:305px; opacity:1}
	35%{left:160px; opacity:1}
	70%{left:160px; opacity:1; transform: scale(1);}
	75%{left:160px; opacity:1; transform: scale(0.9);}
	100%{left:160px; opacity:1; transform: scale(0.9);}
}

@-webkit-keyframes win_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-webkit-keyframes nokia_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-webkit-keyframes copy3 {
	0%{ opacity:0}
	75%{opacity:0}
	76%{left:-150px; opacity:1}
	81% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
@-webkit-keyframes cta{
	0%{ opacity:0}
	75%{opacity:0}
	80%{left:-120px; opacity:1}
	85% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
/*****/



/********** Moz ***************/

@-moz-keyframes lady_img {
	0%{ opacity:0; }
	10%{opacity:1;}
	20%{opacity:1;}
	30%{opacity:1;left:0px}
	35%{left:-302px;}
	100%{left:-302px;}
}
@-moz-keyframes copy1 {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:1}
	30%{opacity:1;left:25px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-moz-keyframes copy1-sub {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:0}
	20% {opacity:1}
	30%{opacity:1;left:45px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-moz-keyframes copy2 {
	0%{ opacity:0}
	30%{opacity:0;}
	30%{left:305px; opacity:1}
	35%{left:10px;}
	63%{left:10px;}
	70%{left: -250px;}
	100%{left: -250px;}
}

@-moz-keyframes device_animation {
	0%{ opacity:0}
	30%{opacity:0;}
	32%{left:305px; opacity:1}
	35%{left:160px; opacity:1}
	70%{left:160px; opacity:1; transform: scale(1);}
	75%{left:160px; opacity:1; transform: scale(0.9);}
	100%{left:160px; opacity:1; transform: scale(0.9);}
}

@-moz-keyframes win_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-moz-keyframes nokia_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-moz-keyframes copy3 {
	0%{ opacity:0}
	75%{opacity:0}
	76%{left:-150px; opacity:1}
	81% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
@-moz-keyframes cta{
	0%{ opacity:0}
	75%{opacity:0}
	80%{left:-120px; opacity:1}
	85% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
/*****/
/********** O ***************/

@-o-keyframes lady_img {
	0%{ opacity:0; }
	10%{opacity:1;}
	20%{opacity:1;}
	30%{opacity:1;left:0px}
	35%{left:-302px;}
	100%{left:-302px;}
}
@-o-keyframes copy1 {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:1}
	30%{opacity:1;left:25px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-o-keyframes copy1-sub {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:0}
	20% {opacity:1}
	30%{opacity:1;left:45px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@-o-keyframes copy2 {
	0%{ opacity:0}
	30%{opacity:0;}
	30%{left:305px; opacity:1}
	35%{left:10px;}
	63%{left:10px;}
	70%{left: -250px;}
	100%{left: -250px;}
}

@-o-keyframes device_animation {
	0%{ opacity:0}
	30%{opacity:0;}
	32%{left:305px; opacity:1}
	35%{left:160px; opacity:1}
	70%{left:160px; opacity:1; transform: scale(1);}
	75%{left:160px; opacity:1; transform: scale(0.9);}
	100%{left:160px; opacity:1; transform: scale(0.9);}
}

@-o-keyframes win_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-o-keyframes nokia_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@-o-keyframes copy3 {
	0%{ opacity:0}
	75%{opacity:0}
	76%{left:-150px; opacity:1}
	81% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
@-o-keyframes cta{
	0%{ opacity:0}
	75%{opacity:0}
	80%{left:-120px; opacity:1}
	85% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
/*****/


/********** animation ***************/

@keyframes lady_img {
	0%{ opacity:0; }
	10%{opacity:1;}
	20%{opacity:1;}
	30%{opacity:1;left:0px}
	35%{left:-302px;}
	100%{left:-302px;}
}
@keyframes copy1 {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:1}
	30%{opacity:1;left:25px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@keyframes copy1-sub {
	0%{ opacity:0}
	10%{opacity:0}
	15% {opacity:0}
	20% {opacity:1}
	30%{opacity:1;left:45px}
	35%{left:-250px;}
	100%{left:-250px;}
}
@keyframes copy2 {
	0%{ opacity:0}
	30%{opacity:0;}
	30%{left:305px; opacity:1}
	35%{left:10px;}
	63%{left:10px;}
	70%{left: -250px;}
	100%{left: -250px;}
}

@keyframes device_animation {
	0%{ opacity:0}
	30%{opacity:0;}
	32%{left:305px; opacity:1}
	35%{left:160px; opacity:1}
	70%{left:160px; opacity:1; transform: scale(1);}
	75%{left:160px; opacity:1; transform: scale(0.9);}
	100%{left:160px; opacity:1; transform: scale(0.9);}
}

@keyframes win_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@keyframes nokia_logo{
	0%{ opacity:0}
	70%{opacity:0;}
	75%{opacity:1}
	100%{opacity:1}
}
@keyframes copy3 {
	0%{ opacity:0}
	75%{opacity:0}
	76%{left:-150px; opacity:1}
	81% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
@keyframes cta{
	0%{ opacity:0}
	75%{opacity:0}
	80%{left:-120px; opacity:1}
	85% {left:10px; opacity:1}
	100%{left: 10px; opacity:1}
}
/*****/