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: 177px;
	top: 552px;
	width: 109px;
	height: 24px;
	background-color: #9bf00b;
}

#cta_copy {
	left:16px;
	top:7px;
	width:60px;
	height:11px;
	background-image:url(../img/cta_copy.png);
}

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

#light1 {
	left:0px;
	top:293px;
	width:300px;
	height:307px;
	background-image:url(../img/light1.png);
}

#copy {
	left:33px;
	top:127px;
	width:235px;
	height:113px;
	background-image:url(../img/copy.png);
}

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

#bg_center {
	left:0px;
	top:102px;
	width:300px;
	height:319px;
	background-image:url(../img/bg_center.png);
}

#car {
	left:64px;
	top:418px;
	width:192px;
	height:118px;
	background-image:url(../img/car.png);
}

#sphear {
	left:0px;
	top:320px;
	width:105px;
	height:168px;
	background-image:url(../img/sphear.png);
}

#light2 {
	left:164px;
	top:478px;
	width:136px;
	height:122px;
	background-image:url(../img/light2.png);
}

#device {
	left:50px;
	top:253px;
	width:237px;
	height:157px;
	background-image:url(../img/device.png);
}

#girl {
	left:0px;
	top:0px;
	width:267px;
	height:315px;
	background-image:url(../img/girl.png);
}

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

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