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

.recyclePart0 {
    background: url('spritesheet_recycle.png') no-repeat -275px -370px;
    width: 52px;
    height: 25px;
    opacity: 0;
}

.recyclePart1 {
    background: url('spritesheet_recycle.png') no-repeat -350px -363px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart2 {
    background: url('spritesheet_recycle.png') no-repeat -394px -363px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart3 {
    background: url('spritesheet_recycle.png') no-repeat -434px -363px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart4 {
    background: url('spritesheet_recycle.png') no-repeat -283px -409px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart5 {
    background: url('spritesheet_recycle.png') no-repeat -350px -409px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart6 {
   background: url('spritesheet_recycle.png') no-repeat -394px -409px;
    width: 33px;
    height: 32px;
    opacity: 0;
}

.recyclePart7 {
    background: url('spritesheet_recycle.png') no-repeat -434px -409px;
    width: 52px;
    height: 25px;
    opacity: 0;
}

.recycleWhole {
    background-position: -535px -353px;
    left: 22px;
    top: 327px;
    width: 127px;
    height: 98px;
    opacity: 0;
    -ms-transform-origin: 58px 41px;
    -webkit-transform-origin: 58px 41px;
    transform-origin: 58px 41px;
}

#iconHolder {
    left: 60px;
    top: 10px;
}