/******************************************
Replace with your custom spritesheet name
******************************************/
.sprite {
	background: url("spritesheet_lock.png") no-repeat;
}
/************************************
 Used by unified index.html + main.js
 DO NOT TOUCH.
 ***********************************/

/* The 5 end screen shapes */
.triangle1 {
	background-position: 0px 0px;
	width: 60px;
	height: 90px;
	-ms-transform-origin: 15px 15px;
	-webkit-transform-origin: 15px 15px;
	transform-origin: 15px 15px;
}
.triangle2 {
	background-position: -60px 0px;
	width: 90px;
	height: 90px;
	-ms-transform-origin: 15px 15px;
	-webkit-transform-origin: 15px 15px;
	transform-origin: 15px 15px;
}
.triangle3 {
	background-position: 0px -90px;
	width: 150px;
	height: 90px;
	-ms-transform-origin: 15px 15px;
	-webkit-transform-origin: 15px 15px;
	transform-origin: 15px 15px;
}
.diamond {
	background-position: -151px -120px;
	width: 90px;
	height: 90px;
	-ms-transform-origin: 45px 45px;
	-webkit-transform-origin: 45px 45px;
	transform-origin: 45px 45px;
}
.parallelogram {
	background-position: -150px 0px;
	width: 60px;
	height: 120px;
	-ms-transform-origin: 15px 15px;
	-webkit-transform-origin: 15px 15px;
	transform-origin: 15px 15px;
}
.logoColored {
	background-position: -250px -140px;
	left: 640px;
	top: 57px;
	width: 75px;
	height: 25px;
	opacity: 1;
}
.logoWhite {
	background-position: -350px -140px;
	left: 640px;
	top: 57px;
	width: 75px;
	height: 25px;
	opacity: 0;
}
/* The 4 CTA button shapes */
.ctaTriLeft {
	background-position: -400px -15px;
	left: 421px;
	top: 40px;
	width: 53px;
	height: 53px;
	opacity: 0;
}
.ctaPara {
	background-position: -240px -15px;
	left: 462px;
	top: 0px;
	width: 152px;
	height: 54px;
	opacity: 0;
}
.ctaTriRight {
	background-position: -400px -75px;
	left: 580px;
	top: -21px;
	width: 53px;
	height: 53px;
	opacity: 0;
}
.ctaRect {
	background-position: -240px -75px;
	left: 441px;
	top: 20px;
	width: 152px;
	height: 54px;
	opacity: 0;
}
/***********************************
 PLACE YOUR CUSTOM SPRITE CSS BELOW
 .sampleName is safe to delete
 **********************************/

/*clock main*/

.part0 {
	background-position: -15px -289px;
	width: 45px;
	height: 47px;
	opacity: 0;
}
.part1 {
	background-position: -67px -313px;
	width: 45px;
	height: 24px;
	opacity: 0;
}
.part2 {
	background-position: -121px -266px;
	width: 23px;
	height: 47px;
	opacity: 0;
}
.part3 {
	background-position: -162px -300px;
	width: 12px;
	height: 13px;
	opacity: 0;
}
.part4 {
	background-position: -179px -286px;
	width: 19px;
	height: 10px;
	opacity: 0;
}
.part5 {
	background-position: -202px -273px;
	width: 19px;
	height: 10px;
	opacity: 0;
}
.part6 {
	background-position: -233px -273px;
	width: 19px;
	height: 10px;
	opacity: 0;
}
.part7 {
	background-position: -268px -300px;
	width: 12px;
	height: 12px;
	opacity: 0;
}
.topLockSprite {
	background-position: -407px -278px;
	width: 37px;
	height: 35px;
	left: 514px;
	top: 16px;
	opacity: 0;
}
.topLockCover {
	background-position: -281px -283px;
	width: 54px;
	height: 56px;
	left: 514px;
	top: 16px;
	opacity: 0;
}