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

.part0 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -248px -152px;
    width: 28px;
    height: 28px;
    opacity: 0;
}

.part1 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -303px -138px;
    width: 28px;
    height: 84px;
    opacity: 0;
}

.part2 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -143px -215px;
    width: 56px;
    height: 28px;
    opacity: 0;
}

.part3 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -417px -137px;
    width: 28px;
    height: 112px;
    opacity: 0;
}

.part4 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -255px -215px;
    width: 7px;
    height: 7px;
    opacity: 0;
}

.step0 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -24px -237px;
    width: 24px;
    height: 10px;
    opacity: 0;
}

.step1 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -68px -217px;
    width: 24px;
    height: 10px;
    opacity: 0;
}

.step2 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -24px -237px;
    width: 24px;
    height: 10px;
    opacity: 0;
}

.step3 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -68px -217px;
    width: 24px;
    height: 10px;
    opacity: 0;
}