@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;
}

#background-image{
	position:absolute;
	top:0px;
	left:0px;
	z-index:105;

	-webkit-animation-name:Background-Animation;
	-webkit-animation-duration: 7.5s;
	-webkit-animation-delay: 0.1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	
	animation-name:Background-Animation;
	animation-duration: 7.5s;
	animation-delay: 0.1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

#Siemens_logo{
	position:absolute;
	top: 0px;
	left: 12px;	
	width: 140px;
	height: 70px;
	opacity:0;
	z-index:160;

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

#layer1, #layer2{
	background-color: #000517;
	opacity:.42;
	width:100%;
	height:100%;
	position:absolute;
	z-index:120;
}

#copy_layers{
	position:absolute;
	top:0;
	right:0;
}

#copylayer1{
	position: absolute;
	right: -230px;
	top: 70px;
	z-index: 130;
	width: 230px;
	height: 64px;	

	-webkit-animation-name:Copy1-moveIn-Animation, Copy1-moveOut-Animation;
	-webkit-animation-duration: 1s, 1s;
	-webkit-animation-delay: 0.2s, 7.4s;
	-webkit-animation-timing-function: ease-in-out, ease-in-out;
	-webkit-animation-fill-mode: forwards, forwards;
	
	animation-name:Copy1-moveIn-Animation, Copy1-moveOut-Animation;
	animation-duration: 1s, 1s;
	animation-delay: 0.2s, 7.4s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-fill-mode: forwards, forwards;
}

#copylayer2{
	position: absolute;
	right: -286px;
	top: 385px;
	z-index: 131;
	width: 286px;
	height: 115px;

	-webkit-animation-name:Copy2-moveIn-Animation;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 8.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	
	animation-name:Copy2-moveIn-Animation;
	animation-duration: 1s;
	animation-delay: 8.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

#copy1, #copy2{
	left:11px;
	top:11px;
	opacity:1;
	position:absolute;
	z-index:140;
}

#cta{
	position:absolute;
	z-index:150;
	left:12px;
	top:88px;
	opacity:0;

	-webkit-transform: scale(.7, .7);
	-webkit-animation-name:Cta-Animation;
	-webkit-animation-duration: .4s;
	-webkit-animation-delay: 9.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	
	transform: scale(.7, .7);
	animation-name:Cta-Animation;
	animation-duration: .4s;
	animation-delay: 9.4s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	width: 298px;
	height: 598px;
	border:1px solid #999;
	top: 0px;
	left: 0px;
	margin: auto;
	overflow:hidden;
}

#content_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	z-index: 100;
}

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

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


/* Animations */

@keyframes Background-Animation {
    from {left: 0px;}
    to {left: -130px;}
}
@keyframes Copy1-moveIn-Animation {
    from {right: -290px;}
    to {right: 0px;}
}
@keyframes Copy1-moveOut-Animation {
    from {right: 0px;}
    to {right: -290px;}
}
@keyframes Copy2-moveIn-Animation {
    from {right: -279px;}
    to {right: 0px;}
}
@keyframes Cta-Animation {
    from {opacity: 0; transform: scale(.7, .7);}
    to {opacity: 1; transform: scale(1, 1);}
}
@keyframes Logo-Animation {
    from {opacity: 0;}
    to {opacity: 1;}
}


@-webkit-keyframes Background-Animation {
    from {left: 0px;}
    to {left: -130px;}
}
@-webkit-keyframes Copy1-moveIn-Animation {
    from {right: -290px;}
    to {right: 0px;}
}
@-webkit-keyframes Copy1-moveOut-Animation {
    from {right: 0px;}
    to {right: -290px;}
}
@-webkit-keyframes Copy2-moveIn-Animation {
    from {right: -279px;}
    to {right: 0px;}
}
@-webkit-keyframes Cta-Animation {
    from {opacity: 0; -webkit-transform: scale(.7, .7);}
    to {opacity: 1; -webkit-transform: scale(1, 1);}
}
@-webkit-keyframes Logo-Animation {
    from {opacity: 0;}
    to {opacity: 1;}
}