/* SHIO (Chinese Zodiac) SVG sprite
   12 zodiac animals rendered from a single sprite sheet.
   Usage:
   <i class="shio-sprite tikus"></i>
   <i class="shio-sprite naga"></i>
*/

.shio-sprite {
    display: inline-block;
    background: url(/assets/img/shio-sprite.png) no-repeat;
    background-size: 1200px auto;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

/* SVG mask variant (for recolorable icons) */
.shio-sprite.svg {
    background: currentColor;
    -webkit-mask: url(/assets/img/shio-sprite.svg) no-repeat;
    mask: url(/assets/img/shio-sprite.svg) no-repeat;
    -webkit-mask-size: 1200px auto;
    mask-size: 1200px auto;
}

.shio-sprite.tikus {
    background-position: 0px 0px;
}
.shio-sprite.svg.tikus {
    -webkit-mask-position: 0px 0px;
    mask-position: 0px 0px;
}

.shio-sprite.kerbau {
    background-position: -100px 0px;
}
.shio-sprite.svg.kerbau {
    -webkit-mask-position: -100px 0px;
    mask-position: -100px 0px;
}

.shio-sprite.macan {
    background-position: -200px 0px;
}
.shio-sprite.svg.macan {
    -webkit-mask-position: -200px 0px;
    mask-position: -200px 0px;
}

.shio-sprite.kelinci {
    background-position: -300px 0px;
}
.shio-sprite.svg.kelinci {
    -webkit-mask-position: -300px 0px;
    mask-position: -300px 0px;
}

.shio-sprite.naga {
    background-position: -400px 0px;
}
.shio-sprite.svg.naga {
    -webkit-mask-position: -400px 0px;
    mask-position: -400px 0px;
}

.shio-sprite.ular {
    background-position: -500px 0px;
}
.shio-sprite.svg.ular {
    -webkit-mask-position: -500px 0px;
    mask-position: -500px 0px;
}

.shio-sprite.kuda {
    background-position: -600px 0px;
}
.shio-sprite.svg.kuda {
    -webkit-mask-position: -600px 0px;
    mask-position: -600px 0px;
}

.shio-sprite.kambing {
    background-position: -700px 0px;
}
.shio-sprite.svg.kambing {
    -webkit-mask-position: -700px 0px;
    mask-position: -700px 0px;
}

.shio-sprite.monyet {
    background-position: -800px 0px;
}
.shio-sprite.svg.monyet {
    -webkit-mask-position: -800px 0px;
    mask-position: -800px 0px;
}

.shio-sprite.ayam {
    background-position: -900px 0px;
}
.shio-sprite.svg.ayam {
    -webkit-mask-position: -900px 0px;
    mask-position: -900px 0px;
}

.shio-sprite.anjing {
    background-position: -1000px 0px;
}
.shio-sprite.svg.anjing {
    -webkit-mask-position: -1000px 0px;
    mask-position: -1000px 0px;
}

.shio-sprite.babi {
    background-position: -1100px 0px;
}
.shio-sprite.svg.babi {
    -webkit-mask-position: -1100px 0px;
    mask-position: -1100px 0px;
}

@media screen and (max-width: 440px) {
    .shio-sprite {
        background-size: 720px auto;
        width: 60px;
        height: 60px;
    }

    .shio-sprite.tikus {
        background-position: 0px 0px;
    }
    .shio-sprite.kerbau {
        background-position: -60px 0px;
    }
    .shio-sprite.macan {
        background-position: -120px 0px;
    }
    .shio-sprite.kelinci {
        background-position: -180px 0px;
    }
    .shio-sprite.naga {
        background-position: -240px 0px;
    }
    .shio-sprite.ular {
        background-position: -300px 0px;
    }
    .shio-sprite.kuda {
        background-position: -360px 0px;
    }
    .shio-sprite.kambing {
        background-position: -420px 0px;
    }
    .shio-sprite.monyet {
        background-position: -480px 0px;
    }
    .shio-sprite.ayam {
        background-position: -540px 0px;
    }
    .shio-sprite.anjing {
        background-position: -600px 0px;
    }
    .shio-sprite.babi {
        background-position: -660px 0px;
    }
}