/******************************************
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: 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 {
    left: 10px;
    top: 560px;
    width: 154px;
    height: 38px;
    opacity: 1;
}
.logoWhite {
    left: 10px;
    top: 560px;
    width: 154px;
    height: 38px;
    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
 **********************************/

.part0 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -23px -479px;
    width: 40px;
    height: 39px;
    opacity: 0;
}

.part1 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -88px -420px;
    width: 40px;
    height: 118px;
    opacity: 0;
}

.part2 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -157px -432px;
    width: 79px;
    height: 39px;
    opacity: 0;
}

.part3 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -285px -373px;
    width: 40px;
    height: 157px;
    opacity: 0;
}

.part4 {
   background: url('spritesheet_open_door_footsteps.png') no-repeat -365px -415px;
    width: 10px;
    height: 9px;
    opacity: 0;
}

.step0 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -409px -370px;
    width: 16px;
    height: 32px;
    left: 10px;
    opacity: 0;
}

.step1 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -457px -370px;
    width: 16px;
    height: 32px;
    opacity: 0;
}

.step2 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -409px -370px;
    width: 16px;
    height: 32px;
    left: 10px;
    opacity: 0;
}

.step3 {
    background: url('spritesheet_open_door_footsteps.png') no-repeat -457px -370px;
    width: 16px;
    height: 32px;
    opacity: 0;
}

#iconHolder {
    left: 72px;
    top: -15px;
}