/******************************************
Replace with your custom spritesheet name
******************************************/
.sprite {
	background: url("spritesheet_clock.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: -150px -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: -5px -180px;
	left: 18px;
	top: 218px;
	width: 63px;
	height: 22px;
	opacity: 1;
}
.logoWhite {
	background-position: -80px -180px;
	left: 18px;
	top: 218px;
	width: 63px;
	height: 22px;
	opacity: 0;
}
/* The 4 CTA button shapes */
.ctaTriLeft {
	background-position: -400px -15px;
	left: -28px;
	top: 145px;
	width: 53px;
	height: 53px;
	opacity: 0;
}
.ctaPara {
	background-position: -240px -15px;
	left: -2px;
	top: 129px;
	width: 152px;
	height: 54px;
	opacity: 0;
}
.ctaTriRight {
	background-position: -400px -75px;
	left: 136px;
	top: 104px;
	width: 53px;
	height: 53px;
	opacity: 0;
}
.ctaRect {
	background-position: -240px -75px;
	left: 14px;
	top: 129px;
	width: 152px;
	height: 54px;
	opacity: 0;
}
/***********************************
 PLACE YOUR CUSTOM SPRITE CSS BELOW
 .sampleName is safe to delete
 **********************************/
 
 /*clock main*/

.part0 {
	background-position: -296px -254px;
	width: 47px;
	height: 23px;
	opacity: 0;
}
.part1 {
	background-position: -349px -254px;
	width: 47px;
	height: 23px;
	opacity: 0;
}
.part2 {
	background-position: -401px -254px;
	width: 47px;
	height: 23px;
	opacity: 0;
}
.part3 {
	background-position: -187px -266px;
	width: 47px;
	height: 47px;
	opacity: 0;
}
.part4 {
	background-position: -341px -286px;
	width: 47px;
	height: 47px;
	opacity: 0;
}
.part5 {
	background-position: -401px -286px;
	width: 47px;
	height: 47px;
	opacity: 0;
}
.part6 {
	background-position: -172px -322px;
	width: 47px;
	height: 24px;
	opacity: 0;
}
.part7 {
	background-position: -229px -322px;
	width: 47px;
	height: 24px;
	opacity: 0;
}
.part8 {
	background-position: -288px -322px;
	width: 47px;
	height: 24px;
	opacity: 0;
}
/*clock arm*/

.part9 {
	background-position: -50px -254px;
	width: 9px;
	height: 9px;
	opacity: 0;
}
.part10 {
	background-position: -46px -268px;
	width: 9px;
	height: 43px;
	opacity: 0;
}
.part11 {
	background-position: -50px -317px;
	width: 9px;
	height: 10px;
	opacity: 0;
}
.part12 {
	background-position: -67px -318px;
	width: 9px;
	height: 9px;
	opacity: 0;
}
.part13 {
	background-position: -83px -322px;
	width: 26px;
	height: 9px;
	opacity: 0;
}
.part14 {
	background-position: -116px -322px;
	width: 9px;
	height: 9px;
	opacity: 0;
}
.clockArmLong {
	background-position: -15px -270px;
	left: 187.6px;
	top: 126.05px;
	width: 9px;
	height: 43px;
	opacity: 0;
}
.clockArmShort {
	background-position: -15px -333px;
	left: 191.6px;
	top: 160px;
	width: 26px;
	height: 9px;
	opacity: 0;
}