/******************************************
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: 70px;
	height: 110px;
    -ms-transform-origin: 15px 15px;
    -webkit-transform-origin: 15px 15px;
    transform-origin: 15px 15px;
}

.triangle2 {
	background-position: -80px 0px;
	width: 110px;
	height: 110px;
    -ms-transform-origin: 15px 15px;
    -webkit-transform-origin: 15px 15px;
    transform-origin: 15px 15px;
}

.triangle3 {
	background-position: 0px -120px;
	width: 190px;
	height: 110px;
    -ms-transform-origin: 15px 15px;
    -webkit-transform-origin: 15px 15px;
    transform-origin: 15px 15px;
}

.parallelogram {
    background-position: -200px 0px;
    width: 70px;
    height: 150px;
    -ms-transform-origin: 15px 15px;
    -webkit-transform-origin: 15px 15px;
    transform-origin: 15px 15px;
}

.diamond {
	background-position: -200px -160px;
	width: 110px;
	height: 110px;
    -ms-transform-origin: 55px 55px;
    -webkit-transform-origin: 55px 55px;
    transform-origin: 5     5px 55px;
}

.logoColored {
    background-position: -15px -235px;
    left: 18px;
    top: 245px;
    width: 65px;
    height: 24px;
    opacity: 1;
}

.logoWhite {
    background-position: -100px -235px;
    left: 18px;
    top: 245px;
    width: 65px;
    height: 24px;
    opacity: 0;
}

/* The 4 CTA button shapes */
.ctaTriLeft {
    background-position: -310px -140px;
    left: -16px;
    top: 155px;
    width: 70px;
    height: 70px;
    opacity: 0;
}

.ctaPara {
    background-position: -270px -0px;
    left: 24px;
    top: 115px;
    width: 170px;
    height: 70px;
    opacity: 0;
}

.ctaTriRight {
    background-position: -380px -140px;
    left: 144px;
    top: 95px;
    width: 70px;
    height: 70px;
    opacity: 0;
}

.ctaRect {
    background-position: -270px -70px;
    left: 4px;
    top: 135px;
    width: 170px;
    height: 70px;
    opacity: 0;
}
.square0 {
    background-color: #417ee1;
}
.square1 {
    background-color: #396dcf;
}
.square2 {
    background-color: #4a8bee;
}
.square3 {
    background-color: #396dcf;
}
.square4 {
    background-color: #4a8bee;
}
.square5 {
    background-color: #417ee1;
}
.square6 {
    background-color: #4a8bee;
}
.square7 {
    background-color: #417ee1;
}
.square8 {
    background-color: #396dcf;
}
.square9 {
    background-color: #f0b23b;
}

/***********************************
 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: 15px;
    left: 15px;
    /*transform: matrix(1.02, 0, 0, 1.02, 0, 0);    
    -ms-transform: matrix(1.02, 0, 0, 1.02, 0, 0);    
    -moz-transform: matrix(1.02, 0, 0, 1.02, 0, 0);    
    -webkit-transform: matrix(1.02, 0, 0, 1.02, 0, 0);    */
}