.windwizard-hearts {
    position: absolute;
    bottom: 0%;
    right: 1%;
    width: 25%;
    transform: rotate(180deg); /* Moz and IE10+ */
    -ms-transform: rotate(180deg); /* IE9 */
    -webkit-transform: rotate(180deg); /* Opera/Chrome/Safari */
}

.windwizard-heart {
    float: right;
    width: 12%;
    margin-right: 0.5%;
    padding-bottom: 12%;
    background-image: url(../img/heartcontainers.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    transform: rotate(180deg); /* Moz and IE10+ */
    -ms-transform: rotate(180deg); /* IE9 */
    -webkit-transform: rotate(180deg); /* Opera/Chrome/Safari */
}

.windwizard-magic {
    position: absolute;
    bottom: 62%;
    right: 1%;
    height: 30%;
    width: 25%;
}

.windwizard-magic-bottle {
    float: left;
    width: 12.5%;
    padding-bottom: 12.5%;
    background-image: url(../img/mana-meter.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.windwizard-item-box {
    position: absolute;
    bottom: 20%;
    right: 30%;
    height: 30%;
    width: 3%;
    padding: 1%;
    background-image: url(../img/item-box.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.windwizard-item-flaming-heart {
    width: 100%;
    height: 100%;
    background-image: url(../img/flaming-heart.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.windwizard-player,
.windwizard-canarion,
.windwizard-monster,
.windwizard-canarion-hard,
.windwizard-ballrus,
.windwizard-ballrus-hard,
.windwizard-snazzappler,
.windwizard-eye-bye,
.windwizard-tree,
.windwizard-plant-blockade,
.windwizard-castle-wall {
    background-repeat: no-repeat;
    width: 6.25%; /* 1/16 */
    height: 9.09%; /* 1/11 */
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 2;
}

.windwizard-stone-wisp {
    background-repeat: no-repeat;
    width: 12.5%; /* 2/16 */
    height: 18.18%; /* 2/11 */
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 2;
}

.windwizard-player {
    background-image: url(../img/windwizard.png);
    background-size: 100% auto;
}

    .windwizard-player.windwizard-dying,
    .windwizard-canarion.windwizard-dying,
    .windwizard-canarion-hard.windwizard-dying,
    .windwizard-ballrus.windwizard-dying,
    .windwizard-ballrus-hard.windwizard-dying,
    .windwizard-snazzappler.windwizard-dying,
    .windwizard-eye-bye.windwizard-dying,
    .windwizard-stone-wisp.windwizard-dying {
        background-image: url(../img/death-animation.png);
        background-size: auto 100%;
        z-index: 3;
    }

.windwizard-canarion, .windwizard-canarion-hard {
    background-size: 400% 400%;
}

.windwizard-canarion-down {
    background-image: url(../img/canarion-front.png);
}

.windwizard-canarion-right {
    background-image: url(../img/canarion-right.png);
}

.windwizard-canarion-left {
    background-image: url(../img/canarion-left.png);
}

.windwizard-canarion-up {
    background-image: url(../img/canarion-back.png);
}

.windwizard-canarion-hard-down {
    background-image: url(../img/canarion-hard-front.png);
}

.windwizard-canarion-hard-right {
    background-image: url(../img/canarion-hard-right.png);
}

.windwizard-canarion-hard-left {
    background-image: url(../img/canarion-hard-left.png);
}

.windwizard-canarion-hard-up {
    background-image: url(../img/canarion-hard-back.png);
}

.windwizard-ballrus,
.windwizard-ballrus-hard,
.windwizard-snazzappler,
.windwizard-eye-bye,
.windwizard-stone-wisp {
    background-size: 100% auto;
}

.windwizard-ballrus {
    background-image: url(../img/ballrus.png);
}

.windwizard-ballrus-hard {
    background-image: url(../img/ballrus-hard.png);
}

.windwizard-snazzappler {
    background-image: url(../img/snazzappler.png);
}

.windwizard-eye-bye {
    background-image: url(../img/eye-bye.png);
}

.windwizard-stone-wisp {
    background-image: url(../img/stone-wisp.png);
    z-index: 5;
}

.wind-projectile {
    background-image: url(../img/windattack.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 6.25%; /* 1/16 */
    height: 9.09%; /* 1/11 */
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.eye-bye-projectile {
    background-image: url(../img/eye-bye-projectile.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 6.25%;
    height: 9.09%;
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.eye-bye-projectile-explosion {
    background-image: url(../img/eye-bye-projectile-explosion.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 3.125%;
    height: 4.5454%;
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.stone-wisp-projectile {
    background-image: url(../img/stone-wisp-projectile.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 3.91%;
    height: 8.26%;
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.windwizard-flaming-heart {
    background-image: url(../img/flaming-heart-attack.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 6.2%; /* 1/16 */
    height: 27.273%; /* 3/11 */
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.windwizard-flaming-heart-left {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg); /* Standard syntax */
}

.windwizard-flaming-heart-up {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg); /* Standard syntax */
}

.windwizard-flaming-heart-down {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
}

.windwizard-rock {
    position: absolute;
    background-image: url(../img/rock.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 12.5%; /* 2/16 */
    height: 18.18%; /* 2/11 */
}

.windwizard-tree {
    position: absolute;
    background-image: url(../img/green-tree.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 6.2%; /* 1/16 */
    height: 9.0909%; /* 1/11 */
    z-index: 1;
}

.windwizard-plant-blockade {
    position: absolute;
    background-image: url(../img/plant_blockade.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 7.8125%; /* 1/16 */
    height: 27.27%; /* 768 / 4 = 192, 192 / 704 = 0.2727 */
    z-index: 1;
}

.windwizard-cannon {
    position: absolute;
    background-image: url(../img/cannon.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 18.75%;
    height: 27.2727%;
    z-index: 1;
}

.cannonball {
    background-image: url(../img/cannonball.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 6.25%;
    height: 9.09%;
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.cannon_explosion {
    background-image: url(../img/cannon_explosion.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 6.25%;
    height: 9.09%;
    position: absolute;
    border: 0px none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    z-index: 4;
}

.windwizard-lever {
    position: absolute;
    background-image: url(../img/lever.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 6.25%;
    height: 9.0909%;
    z-index: 1;
}

.windwizard-lootbox {
    position: absolute;
    background-image: url(../img/lootbox_row.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 6.25%;
    height: 9.0909%;
    z-index: 2;
}

.windwizard-castle-wall {
    position: absolute;
    background-image: url(../img/castle-wall.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 6.25%; /* 1/16 */
    height: 36.3636%; /* 4/11 */
    z-index: 30;
}

.windwizard-message {
    text-align: left;
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 10%;
    left: 20%;
    height: 20%;
    width: 60%;
    padding: 2%;
    box-sizing: border-box;
    z-index: 40;
}

.windwizard-magic-pickup {
    position: absolute;
    background-image: url(../img/magic-pickup.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 3.125%;
    height: 4.5455%;
    z-index: 1;
}

.windwizard-health-pickup {
    position: absolute;
    background-image: url(../img/health-pickup.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 3.125%;
    height: 4.5455%;
    z-index: 1;
}

.windwizard-health-potion {
    position: absolute;
    background-image: url(../img/health-potion.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 3.125%;
    height: 4.5455%;
    z-index: 1;
}

.windwizard-flip-x {
    transform: scaleX(-1);
	-ms-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.windwizard-flip-y {
    transform: scaleY(-1);
	-ms-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}

.windwizard-menu {
    margin: 1em;
    border: solid 0.3em white;
    padding: 1em;
}

.windwizard-menu-option {
    padding: 0.5em 0.5em 0.5em 2.5em;
}

.windwizard-selected {
    background-image: url(../img/windwizard.png);
    background-size: 9% auto;
    background-position-x: 0%;
    background-position-y: 28.5714%;
    background-repeat: no-repeat;
}

.windwizard-titlescreen {
    background-image: url(../img/titlescreen.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
}