body {
	background-color: #131a3f;
	margin:0px auto;
}
body, html, td { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; }
p { line-height: 18px; }
img { border: none; }
ul { margin: 0; padding: 0; }
a {
	color: #fff;
	border-bottom: 1px dotted #fe1d03;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #fff;
}
#container {
	text-align: center;
	width: 350px;
	padding: 0px;
}
#container.iphome {
	background-image: url('images/mobile/sky_bg.jpg');
	height: 389px;
	overflow: hidden;
}
#container.ipport {
	padding-top: 10px;
	margin: 0px auto;
}
#container.ipcontact {
	background-image: url('images/mobile/sky3_bg.jpg');
	height: 389px;
}
#content {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 350px;
	height: 389px;
	overflow: hidden;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: appear;
}

@-webkit-keyframes appear
{
	0%		{ opacity: 0; }
	82%		{ opacity: 0; }
	87%     { opacity: 1; }
	100%    { opacity: 1; }
}
#logobg {
	position: absolute;
	left: 41px;
	top: 26px;
}
#logotext {
	position: absolute;
	left: 100px;
	top: 37px;
}
#mobile {
	position: absolute;
	left: 231px;
	top: 87px;
	-webkit-animation-name: mobilein;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes mobilein
	{
		0%		{ opacity: 0; }
		98%		{ opacity: 0; }
		100%    { opacity: 1; }
	}
#container.ipcontact #contactmobile {
	position: absolute;
	left: 231px;
	top: 87px;
}
#redbear {
	position: absolute;
	left: 133px;
	top: 255px;
	width: 196px;
	height: 134px;
	background-image: url('images/redbear.png');
	-webkit-animation-name: breathe;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 11s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes breathe
	{
		0%		{ -webkit-transform: scale(1) }
		50%		{ -webkit-transform: scale(1.05) }
		100%    { -webkit-transform: scale(1) }
	}
#centerdiv.ipcontact #redbear {
	top: 177px;
}
#nav {
	position: absolute;
	width: 350px;
	left: 0px;
	top: 119px;
	-webkit-animation-name: slidein;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes slidein
	{
		0%		{ -webkit-transform: translateX(-360px) }
		87%		{ -webkit-transform: translateX(-360px) }
		93%    { -webkit-transform: translateX(0px) }
		100%    { -webkit-transform: translateX(0px) }
	}
#nav a {
	border: none;
}
.screenshot {
	float: left;
	margin-top: 10px;
}
.info {
	position: relative;
	top: -80px;
	text-align: left;
	z-index: 100;
}
	.info dl {
		width: 340px;
		margin: 20px 0 0 0;
	}
		.info dl dt {
			display: block;
			overflow: visible;
			width: 100%;
			margin: 0;
			padding: 5px 5px 5px 5px;
			text-align: left;
			border-bottom: 1px solid #0202d5;
		}
		.info dl dt.services {
			background-color: #0303a4;
			border: none;
		}
		.check {
			float: right;
			font-weight: bold;
		}

.SlidingPanelsContent {
	width: 350px;
}

/*Animation*/

#animation {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 350px;
	height: 389px;
	background-color: #131a3f;
	overflow: hidden;
	opacity: 0;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: disappear;
}

@-webkit-keyframes disappear
{
	0%		{ opacity: 1; }
	80%		{ opacity: 1; }
	97%     { opacity: 0; }
	100%    { opacity: 0; }
}

#animation img, #animation #logoreveal {
	position: absolute;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;	
}

#animation #sky {
	-webkit-animation-name: sky;
}

@-webkit-keyframes sky
	{
		0%		{ opacity: 1; }
		7%		{ opacity: 1; }
		48%	 	{ opacity: 1; }
		65%		{ opacity: 0; }  
		100%    { opacity: 0; }
	}

#animation #rbmain {
	left: 133px;
	top: 255px;
 	-webkit-animation-name: rbmain;
}

@-webkit-keyframes rbmain
	{
		0%		{ opacity: 0; -webkit-transform: scale(1); }
		10%		{ opacity: 1; -webkit-transform: scale(1.05); }
		17%		{ opacity: 1; -webkit-transform: scale(1); }
		24%		{ opacity: 1; -webkit-transform: scale(1.05); }
		31%		{ opacity: 1; -webkit-transform: scale(1); }
		33%		{ opacity: 1; -webkit-transform: scale(1); }
		45%		{ opacity: 1; -webkit-transform: translate(0px, -400px) scale(1); }
		45.10%	{ opacity: 0; -webkit-transform: translate(0px, -400px) scale(1); } 
		100%    { opacity: 0; -webkit-transform: translate(0px, 0px) scale(1); }
	}
	
#animation .smallrb {
	-webkit-transform: scale(.5);
}
#animation #rb1 {
	left: 75px;
	top: -130px;
 	-webkit-animation-name: fallright;
}
#animation #rb2 {
	left: -30px;
	top: -530px;
 	-webkit-animation-name: fallright;
}
#animation #rb3 {
	left: 175px;
	top: -330px;
 	-webkit-animation-name: fallleft;
}
@-webkit-keyframes fallright
	{
		0%		{ opacity: 0; -webkit-transform: translateY(0px) rotate(0deg) scale(.5); }
		47%		{ opacity: 1; -webkit-transform: translateY(0px) rotate(0deg) scale(.5); }
		78%		{ opacity: 1; -webkit-transform: translateY(1000px) rotate(180deg) scale(.5); }
		100%    { opacity: 0; -webkit-transform: translateY(1000px) rotate(180deg) scale(.5); }
	}
@-webkit-keyframes fallleft
	{
		0%		{ opacity: 0; -webkit-transform: translateY(0px) rotate(0deg) scale(.5); }
		47%		{ opacity: 1; -webkit-transform: translateY(0px) rotate(0deg) scale(.5); }
		78%		{ opacity: 1; -webkit-transform: translateY(1000px) rotate(-180deg) scale(.5); }
		100%    { opacity: 0; -webkit-transform: translateY(1000px) rotate(-180deg) scale(.5); }
	}	
#animation #logotext {
	left: 100px;
	top: 37px;
	-webkit-animation-name: logoin;
}
@-webkit-keyframes logoin
	{
		0%		{ opacity: 0; }
		64%		{ opacity: 0; }
		65%		{ opacity: 1; }
		100%    { opacity: 1; }
	}
#animation #logoreveal {
	left: 100px;
	top: 34px;
	width: 150px;
	height: 30px;
	background-color: #131a3f;
	-webkit-animation-name: logoreveal;
}

@-webkit-keyframes logoreveal
	{
		0%		{ opacity: 0; }
		63%		{ opacity: 0; -webkit-transform: translateX(0px); }
		64%		{ opacity: 1; -webkit-transform: translateX(0px); }
		79%		{ opacity: 1; -webkit-transform: translateX(250px); }
		100%    { opacity: 0; -webkit-transform: translateX(250px); }
	}
/*#animation #rb4 {
	left: 360px;
	top: 100px;
	-webkit-animation-name: flyleft;
}
@-webkit-keyframes flyleft
	{
		0%		{ opacity: 0; -webkit-transform: rotate(-90deg) scale(.8); }
		65%		{ opacity: 1; -webkit-transform: translate(0px, 0px) rotate(-90deg) scale(.8); }
		96%		{ opacity: 1; -webkit-transform: translate(-600px, 150px) rotate(-210deg) scale(.8); }
		96.01%	{ opacity: 0; }
		100%    { opacity: 0; }
	}*/
#animation #logobg {
	left: 41px;
	top: 26px;
	-webkit-animation-name: logobgin;
}
@-webkit-keyframes logobgin
	{
		0%		{ opacity: 0; }
		75%		{ opacity: 0; }
		82%		{ opacity: 1; }
		100%    { opacity: 1; }
	}







#centerdiv.ipfun {
	padding: 0px;
	overflow: hidden;
}

#centerdiv.ipfun img {
	position: relative;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;	
}

#centerdiv.ipfun #redbear {
	top: -134px;
	left: -20px;
	opacity: 0;
 	-webkit-animation-name: redbear1;
}

@-webkit-keyframes redbear1
	{
		0%		{ opacity: 0; }
		7%		{ opacity: 1; }
		17%     { opacity: 1; -webkit-transform: translate(0px, 0px); }
		27%		{ opacity: 1; -webkit-transform: translate(0px, -400px); }
		27.10%	{ opacity: 0; -webkit-transform: translate(0px, -400px); } 
		100%    { opacity: 0; }
	}
	
#centerdiv.ipfun #sky {
	-webkit-animation-name: sky;
	}

@-webkit-keyframes sky
	{
		0%		{ opacity: 0; }
		7%		{ opacity: 0; }
		15%	 	{ opacity: 1; }
		50%		{ opacity: 1; } 
		100%    { opacity: 0; }
	}

#centerdiv.ipfun #rbgoright {
	-webkit-animation-name: goright;
}

#centerdiv.ipfun .top {
	top: -450px;
	left: -230px;
}

#centerdiv.ipfun .bottom {
	top: -530px;
	left: -500px;
}

@-webkit-keyframes goright
	{
		0%		{ -webkit-transform: scale(.5) translate(0px, 0px); }
		29%		{ -webkit-transform: scale(.5) translate(0px, 0px); }
		48%     { -webkit-transform: scale(.5) translate(1500px, 0px) rotate(180deg); }
		100%    { opacity: 0; }
	}
	
#centerdiv.ipfun #rbgoleft {
	-webkit-animation-name: goleft;
	top: -490px;
	left: 300px;
}

@-webkit-keyframes goleft
	{
		0%		{ -webkit-transform: scale(.5) translate(0px, 0px); }
		29%		{ -webkit-transform: scale(.5) translate(0px, 0px); }
		48%     { -webkit-transform: scale(.5) translate(-1500px, 0px) rotate(-180deg); }
		100%    { opacity: 0; }
	}