@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}

/* Div layer for the entire banner. */
#container {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	overflow:hidden;
	cursor:pointer;
}

#content{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	z-index: 100;
	display:none;
}

#bg-div1{
	position:absolute;
	top:0px;
	left:0px;
	width:300px;
	height:250px;
	overflow:hidden;
	z-index:10;
}
#bg-img1{
	position:absolute;
	top:-310px;
	left:0px;
	z-index:1;


	-webkit-animation-name:img1-move-up;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-delay: 7.4s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:img1-move-up;
	animation-duration: 1.6s;
	animation-delay: 7.4s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}


@-webkit-keyframes img1-move-up {
    0%   { -webkit-transform:scale(1,1);top:-310px; left:0px;}
	100% {-webkit-transform:scale(0.7,0.7); left:45px; top:-275px; }
}
@keyframes img1-move-up {
    0%   { transform:scale(1, 1); left:0px; top: -310px; }
	100% { transform:scale(0.7, 0.7); left:45px; top:-275px; }
}

#vl-img1{
	position:absolute;
	top:13px;
	left:-22px;

	z-index:2000;
	-webkit-opacity:0;
	opacity:0;

	-webkit-transform:scale(0.8,0.8);
	-webkit-transform-origin:left center;

	transform:scale(0.8,0.8);
	transform-origin:left center;

	-webkit-animation-name:vl1-move-down;
	-webkit-animation-duration: 8s;
	-webkit-animation-delay: 1.0s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:vl1-move-down;
	animation-duration: 8s;
	animation-delay: 1.0s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;

}


@-webkit-keyframes vl1-move-down {
    0%   {z-index:2000; -webkit-transform:scale(0.8,0.8); left:-22px; top:13px; -webkit-opacity:0;}
		20%  {z-index:2000; -webkit-transform:scale(1,1); left:-12px; top:13px; -webkit-opacity:0.7;}
		34%  {z-index:2; -webkit-transform:scale(1,1); left:-12px; top:13px; -webkit-opacity:0;}
    80%  {z-index:2; -webkit-transform:scale(1,1); left:-12px; top:13px; -webkit-opacity:0;}
		80%  {z-index:2; -webkit-transform:scale(1,1); left:100px; top:50px; -webkit-opacity:0;}
		100% {z-index:2000; -webkit-transform:scale(0.8,0.8); left:110px; top:50px; -webkit-opacity:0.7;}
}
@keyframes vl1-move-down {
    0%   {z-index:2000; transform:scale(0.8,0.8); left:-22px; top:13px; opacity:0;}
		20%  {z-index:2000; transform:scale(1,1); left:-12px; top:13px; opacity:0.7;}
		34%  {z-index:2; transform:scale(1,1); left:-12px; top:13px; opacity:0;}
    80%  {z-index:2; transform:scale(1,1); left:-12px; top:13px; opacity:0;}
		90%  {z-index:2; transform:scale(1,1); left:100px; top:50px; opacity:0;}
		100% {z-index:2000; transform:scale(0.8,0.8); left:110px; top:50px; opacity:0.7;}
}

#bg-div2{
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:250px;
	overflow:hidden;
	z-index:20;


	-webkit-animation-name:div2-mask-opening;
	-webkit-animation-duration: 6s;
	-webkit-animation-delay: 3s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:div2-mask-opening;
	animation-duration: 6s;
	animation-delay: 3s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes div2-mask-opening {
  0%   {left:0px; width: 0px; }
  25%  {left:0px; width: 300px; }
	75%  {left:0px; width: 300px; }
	100% {left:0px; width: 150px; }
}
@keyframes div2-mask-opening {
    0%   {left:0px; width: 0px; }
    25%  {left:0px; width: 300px; }
	75%  {left:0px; width: 300px; }
	100% {left:0px; width: 150px; }
}

#vl-img2{
	position:absolute;
	left:90px;
	top:0px;

	z-index:21;

	-webkit-opacity:0;
	-webkit-transform:scale(0.6,0.6);
	-webkit-transform-origin:right top;

	opacity:0;
	transform:scale(0.85,0.85);
	transform-origin:right top;

	-webkit-animation-name:vl2-move-down;
	-webkit-animation-duration: 4s;
	-webkit-animation-delay: 5s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:vl2-move-down;
	animation-duration: 4s;
	animation-delay: 5s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes vl2-move-down {
    0%   { -webkit-transform:scale(0.85,0.85); left:90px; top:0px; -webkit-opacity:0.0;}
		20%  { -webkit-transform:scale(1,1); left:114px; top:0px;-webkit-opacity:0.7;}
    60%  { -webkit-transform:scale(1,1); left:114px; top:0px; -webkit-opacity:0.7;}
		100% { -webkit-transform:scale(1.2,1.2); left:65px; top:-20px; -webkit-opacity:0.7;}
}
@keyframes vl2-move-down {
  	0%   { transform:scale(0.85,0.85); left:90px; top:0px; opacity:0.0;}
		20%  { transform:scale(1,1); left:114px; top:0px; opacity:0.7;}
  	60%  { transform:scale(1,1); left:114px; top:0px; opacity:0.7;}
		100% { transform:scale(1.2,1.2); left:65px; top:-20px; opacity:0.7;}
}

#vl-div3{
	position:absolute;
	left:0px;
	top:150px;
	width:0px;
	height:143px;
	overflow:hidden;
	z-index:30;

	-webkit-animation-name:div3-mask-opening;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 8.6s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:div3-mask-opening;
	animation-duration: 1s;
	animation-delay: 8.6s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes div3-mask-opening{
	from {width:0px;}
	to   {width:300px;}
}
@keyframes div3-mask-opening{
	from {width:0px;}
	to   {width:300px;}
}
#vl-img3-1{
	position:absolute;
	left:0px;
	top:0px;
	z-index:30;
	-webkit-opacity:0;
	opacity:0;


	-webkit-animation-name:fadeIn;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-delay: 8.6s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:fadeIn;
	animation-duration: 1.0s;
	animation-delay: 8.6s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}
#vl-img3-2{
	position:absolute;
	left:0px;
	top:0px;
	z-index:30;
	-webkit-opacity:0;
	opacity:0;


	-webkit-animation-name:fadeIn;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-delay: 8.6s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:fadeIn;
	animation-duration: 1.0s;
	animation-delay: 8.6s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}

#petrol-box{
	position:absolute;
	left: 9.5px;
	top: 131px;
	z-index:40;

	-webkit-animation-name:petrolbox-move-left;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-delay: 3.8s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:petrolbox-move-left;
	animation-duration: 0.8s;
	animation-delay: 3.8s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes petrolbox-move-left {
    0%   { left: 20px; }
	100% { left: 123px; }
}
@keyframes petrolbox-move-left {
    0%   { left: 20px; }
	100% { left: 123px; }
}
#petrol-grad{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 166px;
	height:73px;
	overflow:hidden;
	z-index:1;
	-webkit-opacity:0.85;
	opacity:0.85;

	background-image:linear-gradient(left, rgba(68, 188, 197, 1), rgba(0, 154, 163, 1), rgba(0, 153, 215, 1));
	background-image:-webkit-linear-gradient(left, rgba(68, 188, 197, 1), rgba(0, 154, 163, 1), rgba(0, 153, 215, 1));
	background-image:-o-linear-gradient(left, rgba(68, 188, 197, 1), rgba(0, 154, 163, 1), rgba(0, 153, 215, 1));
	background-image:-moz-linear-gradient(left, rgba(68, 188, 197, 1), rgba(0, 154, 163, 1), rgba(0, 153, 215, 1));
	background-image:-ms-linear-gradient(left, rgba(68, 188, 197, 1), rgba(0, 154, 163, 1), rgba(0, 153, 215, 1));

	-webkit-animation-name:gradient-horizon-animation;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-delay: 3s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:gradient-horizon-animation;
	animation-duration: 1.6s;
	animation-delay: 3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes gradient-horizon-animation {
    0%   {left: 0px; width: 166px; }
	49%  {left: 0px; width: 260px; }
	51%  {left: 0px; width: 260px; }
	100% {left: 0px; width: 166px; }
}
@keyframes gradient-horizon-animation {
    0%   {left: 0px; width: 166px; }
	49%  {left: 0px; width: 260px; }
	51%  {left: 0px; width: 260px; }
	100% {left: 0px; width: 166px; }
}

#copy-layers{
	position: absolute;
	left:16px;
	top:16px;
	z-index:2;
}

#copy1{
	position: absolute;	left: -10px; z-index: 1;
	-webkit-opacity: 0;	opacity: 0;

	-webkit-animation-name:copy-fadeInOut-Animation;
	-webkit-animation-duration: 3.6s;
	-webkit-animation-delay: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:copy-fadeInOut-Animation;
	animation-duration: 3.6s;
	animation-delay: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
#copy2{
	position: absolute;	left: -10px; z-index: 2;
	-webkit-opacity: 0;	opacity: 0;

	-webkit-animation-name:copy-fadeInOut-Animation;
	-webkit-animation-duration: 3.6s;
	-webkit-animation-delay: 4s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:copy-fadeInOut-Animation;
	animation-duration: 3.6s;
	animation-delay: 4s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes copy-fadeInOut-Animation {
    0%   {left:-15px; -webkit-opacity:0;}
    20%  {left:-5px; -webkit-opacity:1;}
	80%  {left:-5px; -webkit-opacity:1;}
    100% {left:-5px; -webkit-opacity:0;}
}
@keyframes copy-fadeInOut-Animation {
    0%   {left:-15px; opacity:0;}
    20%  {left:-5px; opacity:1;}
	80%  {left:-5px; opacity:1;}
    100% {left:-5px; opacity:0;}
}
#copy3{

	position: absolute;	left: -15px; z-index: 3; top:-5px;
	-webkit-opacity: 0;	opacity: 0;

	-webkit-animation-name:copy-fadeIn-Animation;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-delay: 7.7s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:copy-fadeIn-Animation;
	animation-duration: 0.6s;
	animation-delay: 7.7s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes copy-fadeIn-Animation {
    from {left:-17px; -webkit-opacity:0;}
    to {left:-7px; -webkit-opacity:1;}
}
@keyframes copy-fadeIn-Animation {
    from {left:-17px; opacity:0;}
    to {left:-7px; opacity:1;}
}

#cta-box{
	background-color:#fff;
	position:absolute;
	z-index:3;
	left:0px;
	top:79px;
	width:167px;
	height:0px;

	-webkit-opacity:0;
	opacity:0;

	-webkit-animation-name:cta-layer-Animation;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-delay: 8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:cta-layer-Animation;
	animation-duration: 0.6s;
	animation-delay: 8s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cta-layer-Animation {
    0% { height:0px; -webkit-opacity:0; }
    100% { height:30px; -webkit-opacity:1; }
}
@keyframes cta-layer-Animation {
    from{ height:0px; opacity:0;}
    to { height:30px; opacity:1;}
}
#cta-copy{
	position:absolute;
	top:220px;
	left:125px;
	z-index:40;

	-webkit-opacity:0;
	opacity:0;

	-webkit-animation-name:cta-Copy-Animation;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay: 8.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:cta-Copy-Animation;
	animation-duration: 0.4s;
	animation-delay: 8.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cta-Copy-Animation {
    from   {-webkit-opacity:0; left:125px;}
    to {-webkit-opacity:1; left:135px;}
}
@keyframes cta-Copy-Animation {
    from   {opacity:0; left:125px;}
    to {opacity:1; left:135px;}
}

#cta-arrow{
	position:absolute;
	left:211px;
	top:221px;
	z-index:50;

	-webkit-opacity:0;
	opacity:0;

	-webkit-animation-name:cta-arrow-Animation;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 8.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:cta-arrow-Animation;
	animation-duration: 0.3s;
	animation-delay: 8.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cta-arrow-Animation {
    from   {-webkit-opacity:0; left:211px;}
    to {-webkit-opacity:1; left:221px;}
}
@keyframes cta-arrow-Animation {
    from   {opacity:0; left:211px;}
    to {opacity:1; left:221px;}
}

#logo{
	position:absolute;
	top: 5px;
	left: 5px;
	/*width: 134px;
	height: 56px;*/
	width: 133px;
	height: 57px;
	overflow:hidden;
}

#ifl-overlay{
	position:absolute;
	right:5px;
	bottom:4px;
	width:128px;
	height:22px;
	z-index:1020;
	-webkit-opacity:0;
	opacity:0;

	background-image:linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	background-image:-webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	background-image:-o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	background-image:-moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	background-image:-ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));

	-webkit-animation-name:Logo-overlay-Animation;
	-webkit-animation-duration: 1.4s;
	-webkit-animation-delay:9.9s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:Logo-overlay-Animation;
	animation-duration: 1.4s;
	animation-delay: 9.9s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@-webkit-keyframes Logo-overlay-Animation {
    0%   {-webkit-opacity:0; width:128px;}
	1%   {-webkit-opacity:1; width:128px;}
    99%  {-webkit-opacity:1; width:0px;}
    100%  {-webkit-opacity:0; width:0px;}
}

@keyframes Logo-overlay-Animation {
    0%   {opacity:0;  width:128px;}
	1%   {opacity:1;  width:128px;}
    99%  {opacity:1;  width:0px;}
    100%  {opacity:0;  width:0px;}
}

/*#ifl-overlay{
	position:absolute;
	left:0px;
	bottom:4px;
	width:146px;
	height:22px;
	z-index:1020;
	-webkit-opacity:0;
	opacity:0;*/

	/*left:0px;
	bottom:4px;
	width:146px;
	height:22px;
	z-index:1020;
	-webkit-opacity:0;
	opacity:0;*/

	/*-webkit-animation-name:Logo-overlay-Animation;
	-webkit-animation-duration: 1.4s;
	-webkit-animation-delay:9.9s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:Logo-overlay-Animation;
	animation-duration: 1.4s;
	animation-delay: 9.9s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	}*/

/*@-webkit-keyframes Logo-overlay-Animation {
    0%   {-webkit-opacity:0; left:0px;}
	1%   {-webkit-opacity:1; left:0px;}
    99%  {-webkit-opacity:1; left:146px;}
    100%  {-webkit-opacity:0; left:146px;}
}
@keyframes Logo-overlay-Animation {
    0%   {opacity:0; left:0px;}
	1%   {opacity:1; left:0px;}
    99%  {opacity:1; left:146px;}
    100%  {opacity:0; left:146px;}
}*/
#Siemens_logo, #logo-noifl{
	position:absolute;
	top: 0px;
	left: 0px;
	-webkit-opacity:0;
	opacity:0;
	/*width: 146px;
	height: 62px;*/
}
#logo-noifl{
	z-index:1005;

	-webkit-animation-name:fadeIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay:9s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:fadeIn;
	animation-duration: 1s;
	animation-delay: 9s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
#Siemens_logo{
	z-index:1010;

	-webkit-animation-name:fadeIn;
	-webkit-animation-duration: 0.1s;
	-webkit-animation-delay:10s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:fadeIn;
	animation-duration: 0.1s;
	animation-delay: 10s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn{
	from{-webkit-opacity: 0;}
	to{-webkit-opacity: 1;}
}
@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}