@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: 728px;
	height: 90px;
	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:728px;
	height:90px;
	overflow:hidden;
	z-index:10;
}
#bg-img1{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;

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

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

	-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); left:0px; top:-12px; }
    1%   { -webkit-transform:scale(1,1); left:400px; top:-12px; }
	100% { -webkit-transform:scale(0.7,0.77); left:174px; top:-13px; }
}
@keyframes img1-move-up {
    0%   { transform:scale(1,1); left:0px; top:-12px; }
    1%   { transform:scale(1,1); left:400px; top:-12px; }
	100% { transform:scale(0.77,0.77); left:174px; top:-13px; }
}
#vl-img1{
	position:absolute;
	top:-7px;
	left:300px;
	z-index:2;
	-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%   { -webkit-transform:scale(0.8,0.8); left:300px; top:-7px; -webkit-opacity:0;}
	20%  { -webkit-transform:scale(1,1); left:225px; top:-7px; -webkit-opacity:0.7;}
    80%  { -webkit-transform:scale(1,1); left:225px; top:-7px; -webkit-opacity:0.7;}
	81%  { -webkit-transform:scale(0.75,0.75); left:728px; top:-16px; -webkit-opacity:0.7;}
    82%  { -webkit-transform:scale(0.75,0.75); left:728px; top:-16px; -webkit-opacity:0.7;}
	100% { -webkit-transform:scale(0.75,0.75); left:33px; top:-16px; -webkit-opacity:0.7;}
}
@keyframes vl1-move-down {
    0%   { transform:scale(0.8,0.8); left:300px; top:-7px; opacity:0;}
	20%  { transform:scale(1,1); left:225px; top:-7px; opacity:0.7;}
    80%  { transform:scale(1,1); left:225px; top:-7px; opacity:0.7;}
	81%  { transform:scale(0.75,0.75); left:728px; top:-16px; opacity:0.7;}
    82%  { transform:scale(0.75,0.75); left:728px; top:-16px; opacity:0.7;}
	100% { transform:scale(0.75,0.75); left:339px; top:-16px; opacity:0.7;}
}

#bg-div2{
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:90px;
	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%   { width: 0px; }
    25%  { width: 728px; }
	75%  { width: 728px; }
	100% { width: 364px; }
}
@keyframes div2-mask-opening {
    0%   { width: 0px; }
    25%  { width: 728px; }
	75%  { width: 728px; }
	100% { width: 364px; }
}
#bg-img2{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;

}

#vl-img2{
	position:absolute;
	left:20px;
	top:-56px;
	z-index:21;

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

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

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

	animation-name:vl2-move-down;
	animation-duration: 4s;
	animation-delay: 5s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes vl2-move-down {
    0%   { -webkit-transform:scale(0.8,0.8); left:10px; top:-56px; -webkit-opacity:0.0; }
	20%  { -webkit-transform:scale(1,1); left:0px; top:-56px;-webkit-opacity:0.7; }
    63%  { -webkit-transform:scale(1,1); left:0px; top:-56px; -webkit-opacity:0.7; }
	100% { -webkit-transform:scale(0.604,0.604); left:210px; top:0px; -webkit-opacity:0.7; }
}
@keyframes vl2-move-down {
    0%   { transform:scale(0.8,0.8); left:20px; top:-56px; opacity:0.0; }
	20%  { transform:scale(1,1); left:0px; top:-56px; opacity:0.7; }
    63%  { transform:scale(1,1); left:0px; top:-56px; opacity:0.7; }
	100% { transform:scale(0.604,0.604); left:210px; top:0px; opacity:0.7; }
}

#vl-div3{
	position:absolute;
	left:490px;
	top:0px;
	width:0px;
	height:145px;
	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:246px;}
}
@keyframes div3-mask-opening{
	from {width:0px;}
	to   {width:246px;}
}
#vl-img3-1{
	position:absolute;
	left:0px;
	top:0px;
	z-index:30;
	-webkit-opacity:0.0;
	opacity:0.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.0;
	opacity:0.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: 5px;
	top: 5px;
	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: 7px; }
	100% { left: 480px; }
}
@keyframes petrolbox-move-left {
    0%   { left: 7px; }
	100% { left: 480px; }
}
#petrol-grad{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 153px;
	height:52px;
	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%   { width: 153px; }
	49%  { width: 700px; }
	51%  { width: 700px; }
	100% { width: 241px; }
}
@keyframes gradient-horizon-animation {
    0%   { width: 153px; }
	49%  { width: 700px; }
	51%  { width: 700px; }
	100% { width: 241px; }
}

#copy-layers{
	position: absolute;
	left:10px;
	top:9px;
	z-index:2;
	/*width: 144px;*/
}
#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:-10px; -webkit-opacity:0;}
    20%  {left:0px; -webkit-opacity:1;}
	80%  {left:0px; -webkit-opacity:1;}
    100% {left:0px; -webkit-opacity:0;}
}
@keyframes copy-fadeInOut-Animation {
    0%   {left:-10px; opacity:0;}
    20%  {left:0px; opacity:1;}
	80%  {left:0px; opacity:1;}
    100% {left:0px; opacity:0;}
}
#copy3{
	position: absolute;	left: -10px; z-index: 3; top:1px;
	-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:-10px; -webkit-opacity:0;}
    to {left:0px; -webkit-opacity:1;}
}
@keyframes copy-fadeIn-Animation {
    from {left:-10px; opacity:0;}
    to {left:0px; opacity:1;}
}

#cta-box{
	background-color:#fff;
	position:absolute;
	z-index:3;
	left:0px;
	top:55px;
	width:241px;
	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:24px; -webkit-opacity:1; }
}
@keyframes cta-layer-Animation {
    from{ height:0px; opacity:0;}
    to { height:24px; opacity:1;}
}
#cta-copy{
	position:absolute;
	top:68px;
	left:480px;
	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:480px;}
    to {-webkit-opacity:1; left:490px;}
}
@keyframes cta-Copy-Animation {
    from   {opacity:0; left:480px;}
    to {opacity:1; left:490px;}
}

#cta-arrow{
	position:absolute;
	left:553px;
	top:68px;
	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:553px;}
    to {-webkit-opacity:1; left:563px;}
}
@keyframes cta-arrow-Animation {
    from   {opacity:0; left:553px;}
    to {opacity:1; left:563px;}
}

#logo{
	position:absolute;
	top: 8px;
	left: 8px;
	width: 130px;
	height: 55px;
	overflow:hidden;
}
#ifl-overlay{
	position:absolute;
	left:0px;
	bottom:4px;
	width:120px;
	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:130px;}
    100%  {-webkit-opacity:0; left:130px;}
}
@keyframes Logo-overlay-Animation {
    0%   {opacity:0; left:0px;}
	1%   {opacity:1; left:0px;}
    99%  {opacity:1; left:130px;}
    100%  {opacity:0; left:130px;}
}
#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;}