lettering.js

lettering.js

Hi,

I am having a problem with my css code for lettering.js. I want to have two words styled differently, but cannot figure out how to differentiate the .char#'s. Here is my code. Thank you for any help.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Working With lettering.js</title>
    <script src="jquery.lettering-0.6.min.js"></script>
    <script src="//use.edgefonts.net/source-sans-pro.js"></script> 
    <script>
  $(document).ready(function() {
    $(".uwm").lettering();
  });
  $(document).ready(function() {
    $(".bsist").lettering();
});
</script>
<style>
body{
background:#999;
}
h1{
text-align:center;
}
header{
widht: 50%;
height:auto;
background:#FFF;
margin:1em auto 0 auto;
}
.uwm{
font-family: source-sans-pro, sans-serif;
font-size: 5em;
line-height: 1.5em;
padding: .05em;
text-align: center;
}
.char1 {
color: #FFD700;
}
.char2 {
color: #FFD700;
}
.char3 {
color: #FFD700;
}
.char4 {
color: #000000;
}
.char5 {
color: #3D3D3D;
}
.char6 {
color: #6B6B6B;
}
.char7 {
color: #8C8C8C;
}
.char8 {
color: #ABABAB;
}
.char9 {
color: #BEBEBE;
}
.char10 {
color: #C9C9C9;
}
.char11 {
color: #D3D3D3;
}
.char12 {
color: #E3E3E3;
}

.bsist{
font-family: source-sans-pro, sans-serif;
font-size: 25em;
line-height: 1em;
padding: .05em;
word-wrap: break-word;
overflow-wrap: break-word;
}
span {
position:relative;
}
.bsist.char1 {
color: #1C95E6;
}
.bsist.char2 {
color: #E66D1C;
margin-left: -.1em;
}
.bsist.char3 {
color: #30E61C;
}
.bsist.char4 {
color: #D21CE6;
}
.bsist.char5 {
color: #E61C9F;
}
</style>
</head>
<body>
    <h1>Working With lettering.js</h1>
<header>
<div class="uwm">UW-Milwaukee</div>  
<div class="bsist">BSIST</div>
</header>
</body>
</html>