@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: 970px;
	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:970px;
	height:250px;
	overflow:hidden;
	z-index:10;
}
#bg-img1{
	position:absolute;
	top:0px;
	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); left:0px; top:0px; }
	1% { -webkit-transform:scale(0.75,0.75); left:806px; top:-42px; }
	100% { -webkit-transform:scale(0.75,0.75); left:166px; top:-42px; }
}
@keyframes img1-move-up {
    0%   { transform:scale(1,1); left:0px; top:0px; }
	1% { -webkit-transform:scale(0.75,0.75); left:806px; top:-42px; }
	100% { transform:scale(0.75,0.75); left:166px; top:-42px; }
}


#vl-img1{
	position:absolute;
	top:396px;
	left:10px;
	z-index:2;
	-webkit-opacity:0.0;
	opacity:0.0;

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

	transform:scale(0.9,0.9);
	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.9,0.9); left:396px; top:10px; -webkit-opacity:0;}
    10%  { -webkit-transform:scale(1,1); left:396px; top:10px; -webkit-opacity:0.7;}  
    70%  { -webkit-transform:scale(1,1); left:396px; top:10px; -webkit-opacity:0.7;}    
    80%  { -webkit-transform:scale(0.75,0.75); left:1230px; top:-40px; -webkit-opacity:0;}
	100% { -webkit-transform:scale(0.75,0.75); left:585px; top:-40px; -webkit-opacity:0.7;}
}
@keyframes vl1-move-down {
    0%   { transform:scale(0.9,0.9); left:396px; top:10px; opacity:0;}
    10%  { transform:scale(1,1); left:396px; top:10px; opacity:0.7;}    
    70%  { transform:scale(1,1); left:396px; top:10px; opacity:0.7;}    
    80%  { transform:scale(0.75,0.75); left:1230px; top:-40px; opacity:0;}
	100% { transform:scale(0.75,0.75); left:585px; top:-40px; 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-in-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:div2-mask-opening;
	animation-duration: 6s;
	animation-delay: 3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes div2-mask-opening {
    0%   { width: 0px; }
    25%  { width: 970px; }
	75%  { width: 970px; }
	100% { width: 465px; }
}
@keyframes div2-mask-opening {
    0%   { width: 0px; }
    25%  { width: 970px; }
	75%  { width: 970px; }
	100% { width: 465px; }
}

#bg-img2{
	position:absolute;
	top:60px;
	left:0px;
	width:0px;
	height:420px;
	z-index:1;

	-webkit-animation-name:bg2-move-up;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-delay: 7.5s;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:bg2-move-up;
	animation-duration: 1.5s;
	animation-delay: 7.5s;
	animation-timing-function:ease-out;
	animation-fill-mode: forwards;
}

#vl-img2{
	position:absolute;
	left:259px;
	top:-47px;
	z-index:21;

	-webkit-opacity:0.0;
	-webkit-transform:scale(0.8,0.8);
	-webkit-transform-origin:right bottom;

	opacity:0.0;
	transform:scale(0.8,0.8);
	transform-origin:right bottom;

	-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.7,0.7); left:259px; top:-47px; -webkit-opacity:0.0;}
	20%  { -webkit-transform:scale(1,1); left:259px; top:-47px;-webkit-opacity:0.7;}
    61%  { -webkit-transform:scale(1,1); left:259px; top:-47px; -webkit-opacity:0.7;}
	100% { -webkit-transform:scale(0.6,0.6); left:201px; top:-115px; -webkit-opacity:0.7;}
}
@keyframes vl2-move-down {
    0%   { transform:scale(0.7,0.7); left:259px; top:-47px; opacity:0.0;}
	20%  { transform:scale(1,1); left:259px; top:-47px; opacity:0.7;}
    61%  { transform:scale(1,1); left:259px; top:-47px; opacity:0.7;}
	100% { transform:scale(0.6,0.6); left:20px; top:-115px; opacity:0.7;}
}

#vl-div3{
	position:absolute;
	left:841px;
	top:123px;
	width:0px;
	height:127px;
	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:129px;}
}
@keyframes div3-mask-opening{
	from {width:0px;}
	to   {width:129px;}
}

#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: 20px;
	top: 99px;
	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: 736px;}
}
@keyframes petrolbox-move-left {
    0%   { left: 20px;}
	100% { left: 736px;}
}
#petrol-grad{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 176px;
	height:96px;
	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: 176px; }
	/*49%  { width: 930px; }*/
	50%  { width: 930px; }
	100% { width: 214px; }
}
@keyframes gradient-horizon-animation {
    0%   { width: 213px; }
	/*49%  { width: 930px; }*/
	50%  { width: 930px; }
	100% { width: 214px; }
}

#copy-layers{
	position: absolute;
	left:16px;
	top:16px;
	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.0s;
	-webkit-animation-delay: 4.6s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:copy-fadeInOut-Animation;
	animation-duration: 3.0s;
	animation-delay: 4.6s;
	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;
	-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:101px;
	width:214px;
	height:30px;

	-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:211px;
	left:740px;
	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-out;
	-webkit-animation-fill-mode: forwards;

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

#cta-arrow{
	position:absolute;
	left:810px;
	top:211px;	
	z-index:50;	
	-webkit-opacity:0;
	opacity:0;

	-webkit-animation-name:cta-arrow-Animation;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-delay: 8.6s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;

	animation-name:cta-arrow-Animation;
	animation-duration: 0.4s;
	animation-delay: 8.6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cta-arrow-Animation {
    from   {-webkit-opacity:0; left:810px;}
    to {-webkit-opacity:1; left:820px;}
}
@keyframes cta-arrow-Animation {
    from   {opacity:0; left:810px;}
    to {opacity:1; left:820px;}
}

#logo{
	position:absolute;
	top: 12px;
	left: 12px;
	width: 151px;
	height: 64px;
	overflow:hidden;
}
#ifl-overlay{
	position:absolute;
	left:0px;
	bottom:4px;
	width:151px;
	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;}
}


/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 970px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 400;
}

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