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

/***********************************
 PLACE YOUR CUSTOM SPRITE CSS BELOW
 .sampleName is safe to delete
 **********************************/