body { margin:0px 0px; padding:0px; }

* { box-sizing: Border-box }

#container {
	background-color:#241056;
	position:absolute;
	overflow:hidden;
	cursor: pointer;
}

.sprite {
	position:absolute;
	background-repeat:no-repeat;
}

.gpu {
	backface-visibility: hidden; /* this by itself will only effect the current element */
	transform: translateZ(0); /* adding this will cause child elements also get GPU acceleration */
	transform: rotate(.1deg); /* this will smooth jittery animation */
	will-change: transform; /* optimizes animations by letting the browser know a transform is just about to be used, potentially increasing performance */
}

.center {
	width:100vw;
    height:100vh;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.half {
	background-size: contain;
}

.retina_container {
	left:0px;
	top:0px;
	width:200%;
	height:200%;
    transform-style: preserve-3d;
    transform: matrix3d(0.5, 8.72665e-05, 0, 0, -8.72665e-05, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0.1, 0.9999);
    transform-origin: left top 0px;
}

#curtain {
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color: white;
	z-index: 100;
}

[id^="border"] {
	z-index:99;
	background-color:#999999;
	height:100%;
	width:100%;
}

#border_top {
	top:0;
	left:0;
	height:1px;
}

#border_right {
	top:0;
	right:0;
	width:1px;
}

#border_bottom {
	bottom:0;
	left:0;
	height:1px;
}

#border_left {
	top:0;
	left:0;
	width:1px;
}

#cta_container  {
	left:0;
	top:0;
	width:100%;
	height:100%;
}

#cta {
	left: 796px; 
	top: 205px; 
	width: 151px;
	height: 29px;
	background-color: #9bf00b;
}

#cta_copy {
	left:19px;
	top:9px;
	width:92px;
	height:11px;
	background-image:url(../img/cta_copy.png);
}

#cta_arrow {
	left:128px;
	top:10px;
	width:7px;
	height:10px;
	background-image:url(../img/cta_arrow.png);
}

#light1 {
	left:0px;
	top:148px;
	width:600px;
	height:329px;
	background-image:url(../img/light1.png);
}

#copy {
	left:340px;
	top:24px;
	width:338px;
	height:84px;
	background-image:url(../img/copy.png);
}

#logo {
	left:0px;
	top:0px;
	width:219px;
	height:250px;
	background-image:url(../img/logo.png);
}

#bg_center {
	left:310px;
	top:0px;
	width:396px;
	height:250px;
	background-image:url(../img/bg_center.png);
}

#car {
	left:0px;
	top:61px;
	width:289px;
	height:183px;
	background-image:url(../img/car.png);
}

#sphear {
	left:195px;
	top:0px;
	width:317px;
	height:198px;
	background-image:url(../img/sphear.png);
}

#light2 {
	left:82px;
	top:160px;
	width:218px;
	height:90px;
	background-image:url(../img/light2.png);
}

#device {
	left:415px;
	top:110px;
	width:191px;
	height:137px;
	background-image:url(../img/device.png);
}

#girl {
	left:476px;
	top:7px;
	width:494px;
	height:243px;
	background-image:url(../img/girl.png);
}

#bg1 {
	left:0px;
	top:0px;
	width:970px;
	height:250px;
	background-image:url(../img/bg1.jpg);
}

#bg3 {
	left:0px;
	top:0px;
	width:970px;
	height:250px;
	background-image:url(../img/bg3.jpg);
}