@charset "utf-8";

/*
 ************************************************************************************************************************
 * CSS Style that has all animation for the animated elements 															*
 * Author: Saddiem Waheb			                          														 	*
 * Extensive use of CSS3 animation properties, Modern IE and Firefox doesn't need the prefixes like -webkit- or -ms- 	*
 ************************************************************************************************************************
 */
 
/*	
	COLOR PALETTE 
		Violet:
			RGB: 110, 42, 141
			HEX: #6E2A8D
		Lime Green:
			RGB: 193, 216, 47
			HEX: #CAD400
		Gray:
			HEX: #4D4D4D
		Black:
			RGB: 35, 31, 32
			HEX: #000000
*/
.f360logo,#f360line {
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-play-state:running;
	animation-duration:0.8s;
	animation-fill-mode: forwards;
	animation-name:f360logo;
	/* Safari and Chrome: */
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;	
	-webkit-animation-duration:0.8s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-name:f360logo;	
	/* IE9 */
	-ms-animation-iteration-count:1;
	-ms-animation-direction:alternate;
	-ms-animation-play-state:running;	
	-ms-animation-duration:0.8s;
	-ms-animation-fill-mode: forwards;
	-ms-animation-name:f360logo;	
	}

@keyframes f360logo
{
	0%   {transform:translateX(-70px); -ms-transform:translateX(-70px); opacity:0.0; }
	100% {transform:translateX(0px); -ms-transform:translateX(0px); opacity:1.0;}
}
@-webkit-keyframes f360logo
{
	0%   {-webkit-transform:translateX(-70px); opacity:0.0;}
	100% {-webkit-transform:translateX(0px); opacity:1.0;}
}

#mf,#bi {
	animation-iteration-count:1;
	/*animation-direction:;*/
	animation-play-state:running;
	animation-duration:0.970s;
	animation-fill-mode: forwards;
	/* Safari and Chrome: */
	-webkit-animation-iteration-count:1;
	/*-webkit-animation-direction:;*/
	-webkit-animation-play-state:running;	
	-webkit-animation-duration:0.970s;
	-webkit-animation-fill-mode: forwards;		
	/* ie9*/
	-ms-animation-iteration-count:1;
	/*-ms-animation-direction:;*/
	-ms-animation-play-state:running;	
	-ms-animation-duration:0.970s;
	-ms-animation-fill-mode: forwards;
}

#mf {
	animation-delay:0.7s;
	-webkit-animation-delay:0.7s;
	-ms-animation-delay:0.7s;
	
	animation-name:mf;
	-webkit-animation-name:mf;
	-ms-animation-name:mf;
}

@keyframes mf
{
0%   {transform:translateY(100px); -ms-transform:translateY(100px); opacity:0.0;}
20%  {opacity:0.0;}
100% {transform:translateY(0px); -ms-transform:translateY(0px); opacity:1.0;}
}
@-webkit-keyframes mf
{
0%   {-webkit-transform:translateY(100px); opacity:0.0;}
20%  {opacity:0.0;}
100% {-webkit-transform:translateY(0px); opacity:1.0;}
}


#bi {
	animation-delay:1.5s;
	-webkit-animation-delay:1.5s;
	-ms-animation-delay:1.5s;
	
	animation-name:bi;
	-webkit-animation-name:bi;
	-ms-animation-name:bi;
}

@keyframes bi
{
0%   {transform:translateY(100px); -ms-transform:translateY(100px); opacity:0.0;}
20%  {opacity:0.0;}
100% {transform:translateY(0px); -ms-transform:translateY(0px); opacity:1.0;}
}
@-webkit-keyframes bi
{
0%   {-webkit-transform:translateY(100px); opacity:0.0;}
20%  {opacity:0.0;}
100% {-webkit-transform:translateY(0px); opacity:1.0;}
}

.ms-column1,.ms-column2,.ms-column3,.ms-dashedline
{ 	
	animation-iteration-count:1;
	animation-direction:alternate;
	/*animation-direction:;*/
	animation-play-state:running;
	animation-name:ms-column;
	animation-duration:0.6s;
	animation-fill-mode: forwards;
	/* Safari and Chrome: */
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	/*-webkit-animation-direction:;*/
	-webkit-animation-play-state:running;	
	-webkit-animation-name:ms-column;
	-webkit-animation-duration:0.6s;
	-webkit-animation-fill-mode: forwards;
	/* IE9 */
	-ms-animation-iteration-count:1;
	-ms-animation-direction:alternate;
	/*-ms-animation-direction:;*/
	-ms-animation-play-state:running;	
	-ms-animation-name:ms-column;
	-ms-animation-duration:0.6s;
	-webkit-animation-fill-mode: forwards;
}

.ms-column1 { animation-delay:0s; -webkit-animation-delay:0s; -ms-animation-delay:0s; }
.ms-column2 { animation-delay:0.2s; -webkit-animation-delay:0.2s; -ms-animation-delay:0.2s; }
.ms-column3 { animation-delay:0.4s; -webkit-animation-delay:0.4s; -ms-animation-delay:0.4s; }

@keyframes ms-column
{
	0%   {transform:translateY(100px); -ms-transform:translateY(100px); opacity:0.0; }
	100% {transform:translateY(0px); -ms-transform:translateY(0px); opacity:1.0; }
}

@-webkit-keyframes ms-column
{
	0%   {-webkit-transform:translateY(100px); opacity:0.0;}
	100% {-webkit-transform:translateY(0px); opacity:1.0;}
}

.ms-dashedline
{ 	
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-play-state:running;
	animation-name:ms-dashedline;
	animation-duration:0.6s;
	animation-fill-mode: forwards;
	/* Safari and Chrome: */
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;	
	-webkit-animation-name:ms-dashedline;
	-webkit-animation-duration:0.6s;
	-webkit-animation-fill-mode: forwards;
	/* IE9 */
	-ms-animation-iteration-count:1;
	-ms-animation-direction:alternate;
	-ms-animation-play-state:running;	
	-ms-animation-name:ms-dashedline;
	-ms-animation-duration:0.6s;
	-webkit-animation-fill-mode: forwards;
}
.ms-dashedline { animation-delay:0.6s; -webkit-animation-delay:0.6s; -ms-animation-delay:0.6s; }

@keyframes ms-dashedline
{
	0%   { opacity:0.0; width:0px;}
	100% { opacity:1.0; width:750px;}
}

@-webkit-keyframes ms-dashedline
{
	0%   { opacity:0.0;width:0px;}
	100% { opacity:1.0;width:750px;}
}

.gen-animation {
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-play-state:running;
	animation-duration:0.6s;
	animation-fill-mode: forwards;
	animation-name:gen-animation;
	/* Safari and Chrome: */
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;	
	-webkit-animation-duration:0.6s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-name:gen-animation;	
	/* IE9 */
	-ms-animation-iteration-count:1;
	-ms-animation-direction:alternate;
	-ms-animation-play-state:running;	
	-ms-animation-duration:0.6s;
	-ms-animation-fill-mode: forwards;
	-ms-animation-name:gen-animation;	
}
/*
#bs-vline { animation-name:bs-vline; -webkit-animation-name:bs-vline; -ms-animation-name:bs-vline; }

@keyframes bs-vline
{
	0%   { opacity:0.0; }
	100% { opacity:1.0; }
}
*/

.bs-circle-bi
{
	animation-delay:0s;
	-webkit-animation-delay:0s;
	-ms-animation-delay:0s;
}
.bs-circle-ia
{
	animation-delay:0.1s;
	-webkit-animation-delay:0.1s;
	-ms-animation-delay:0.1s;
}
.bs-circle-tma
{
	animation-delay:0.2s;
	-webkit-animation-delay:0.2s;
	-ms-animation-delay:0.2s;
}

.txt-bi
{
	animation-delay:0.2s;
	-webkit-animation-delay:0.2s;
	-ms-animation-delay:0.2s;
}
.txt-ia
{
	animation-delay:0.3s;
	-webkit-animation-delay:0.3s;
	-ms-animation-delay:0.3s;
}
.txt-tma
{
	animation-delay:0.4s;
	-webkit-animation-delay:0.4s;
	-ms-animation-delay:0.4s;
}

.info-box1
{
	animation-delay:0.4s;
	-webkit-animation-delay:0.4s;
	-ms-animation-delay:0.4s;
}
.info-box2
{
	animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
}
.info-box3
{
	animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
	-ms-animation-delay:0.6s;
}
@keyframes gen-animation
{
	0%   { opacity:0.0; }
	100% { opacity:1.0; }
}
@-webkit-keyframes gen-animation
{
	0%   { opacity:0.0; }
	100% { opacity:1.0; }
}

.top-2-bottom-img-pan
{	
	animation-duration:25.0s;
	-webkit-animation-duration:25.0s;
	-ms-animation-duration:25.0s;

	animation-name:top-2-bottom-img-pan;	
	animation-iteration-count:1;
	animation-play-state:running;
	animation-fill-mode: forwards;
	animation-timing-function:linear;

	/* Safari and Chrome:  */
	-webkit-animation-name:top-2-bottom-img-pan;
	-webkit-animation-iteration-count:1;
	-webkit-animation-play-state:running;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-timing-function:linear;

	/* IE9 */
	-ms-animation-name:top-2-bottom-img-pan;
	-ms-animation-iteration-count:1;
	-ms-animation-play-state:running;	
	-ms-animation-fill-mode: forwards;
	-ms-animation-timing-function:linear;
}

@keyframes top-2-bottom-img-pan
{
	0%   { background:top no-repeat; }
	100%   { background:bottom no-repeat;}

}
/*
@-webkit-keyframes top-2-bottom-img-pan
{
	0%   { background:0px 0px no-repeat;}
	100%   { background:0px -600px no-repeat;}
}

@-ms-keyframes top-2-bottom-img-pan
{
	0%   { background:0px 0px no-repeat; }
	100%   { background:0px -600px no-repeat;}
}
*/