/******************************************
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: 100px;
    height: 150px;
    -ms-transform-origin: 25px 25px;
    -webkit-transform-origin: 25px 25px;
    transform-origin: 25px 25px;
}
.triangle2 {
    background-position: -100px 0px;
    width: 150px;
    height: 150px;
    -ms-transform-origin: 25px 25px;
    -webkit-transform-origin: 25px 25px;
    transform-origin: 25px 25px;
}
.triangle3 {
    background-position: 0px -150px;
    width: 250px;
    height: 150px;
    -ms-transform-origin: 25px 25px;
    -webkit-transform-origin: 25px 25px;
    transform-origin: 25px 25px;
 }
.diamond {
    background-position: -250px -200px;
    width: 150px;
    height: 150px;
    -ms-transform-origin: 75px 75px;
    -webkit-transform-origin: 75px 75px;
    transform-origin: 75px 75px;
}
.parallelogram {
    background-position: -250px 0px;
    width: 100px;
    height: 200px;
    -ms-transform-origin: 25px 25px;
    -webkit-transform-origin: 25px 25px;
    transform-origin: 25px 25px;
}
.logoColored {
    background-position: -25px -375px;
    left: 27px;
    top: 554px;
    width: 76px;
    height: 27px;
    opacity: 0;
}
.logoWhite {
    background-position: -125px -375px;
    left: 27px;
    top: 554px;
    width: 76px;
    height: 27px;
    opacity: 0;
}

/* The 4 CTA button shapes */
.ctaTriLeft {
    background-position: -400px -100px;
    left: -45px;
    top: 358px;
    width: 100px;
    height: 100px;
    opacity: 0;
}
.ctaPara {
    background-position: -400px -200px;
    left: 51px;
    top: 262px;
    width: 225px;
    height: 100px;
    opacity: 0;
}
.ctaTriRight {
    background-position: -525px -100px;
    left: 224px;
    top: 214px;
    width: 100px;
    height: 100px;
    opacity: 0;
}
.ctaRect {
    background-position: -400px 0px;
    left: 3px;
    top: 310px;
    width: 225px;
    height: 100px;
    opacity: 0;
}
/***********************************
 PLACE YOUR CUSTOM SPRITE CSS BELOW
 .sampleName is safe to delete
 **********************************/
 
 /*clock main*/

.part0 {
	background: url('spritesheet_lock.png') no-repeat -598px -369px;
	width: 83px;
	height: 82px;
	opacity: 0;
}
.part1 {
	background: url('spritesheet_lock.png') no-repeat -258px -375px;
	width: 83px;
	height: 41px;
	opacity: 0;
}
.part2 {
	background: url('spritesheet_lock.png') no-repeat -639px -264px;
	width: 42px;
	height: 82px;
	opacity: 0;
}
.part3 {
	background: url('spritesheet_lock.png') no-repeat -377px -394px;
	width: 21px;
	height: 20px;
	opacity: 0;
}
.part4 {
	background: url('spritesheet_lock.png') no-repeat -432px -309px;
	width: 34px;
	height: 16px;
	opacity: 0;
}

.part5 {
	background: url('spritesheet_lock.png') no-repeat -432px -346px;
	width: 34px;
	height: 16px;
	opacity: 0;
}
.part6 {
	background: url('spritesheet_lock.png') no-repeat -377px -394px;
	width: 21px;
	height: 20px;
	opacity: 0;
}

.part7 {
	background: url('spritesheet_lock.png') no-repeat -488px -346px;
	width: 34px;
	height: 16px;
	opacity: 0;
}
.topLockSprite {
	background: url('spritesheet_lock.png') no-repeat -488px -394px;
	width: 67px;
	height: 57px;
	left: 51px;
	top: 327px;
	opacity: 0;
}

#iconHolder {
	left: 65px;
	top: -10px;
}