/******************************************
Replace with your custom spritesheet name
******************************************/
.sprite {
	background: url("spritesheet_square_tiles.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: -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
 **********************************/

/*

#iconHolder, #iconHolder div {
    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    translate: transform3d(0,0,0);
    -ms-translate: transform3d(0,0,0);
    -moz-translate: transform3d(0,0,0);
    -webkit-translate: transform3d(0,0,0);
}


#iconHolder {
    top: -85px;
    left: 368px;
    transform: matrix(0.78, 0, 0, 0.78, 0, 0);    
    -ms-transform: matrix(0.78, 0, 0, 0.78, 0, 0);    
    -moz-transform: matrix(0.78, 0, 0, 0.78, 0, 0);    
    -webkit-transform: matrix(0.78, 0, 0, 0.78, 0, 0);    
}

*/