diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..b8369a9
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,34 @@
+name: github pages
+
+on: [push]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - name: setup
+        uses: actions/checkout@v2
+        with:
+          submodules: true
+      - uses: actions/setup-python@v2
+        with:
+          python-version: 3.7
+              
+      - run: |
+          mkdir -p public
+          python3 -m pip install -U -r requirements.txt
+          ./extract_phoneme_list.py
+          ./ipatope.py
+          ls -la
+          ls -la public
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: ./public
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_branch: master
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+          force_orphan: true
+          keep_files: true
diff --git a/data/filters.yaml b/data/filters.yaml
index 98d6224..384f923 100644
--- a/data/filters.yaml
+++ b/data/filters.yaml
@@ -1,4 +1,4 @@
-voicing:
+voice:
     - text: voiced
       fn:   .voiced,.vowel
     - text: voiceless
@@ -27,6 +27,8 @@ manner:
       fn:   .trill
     - text: tap or flap
       fn:   .tap,.flap
+    - text: lateral
+      fn:   .lateral
     - text: fricative
       fn:   .fricative
     - text: affricate
diff --git a/data/phonemes.yaml b/data/phonemes.yaml
index 2ae96b2..7291ad5 100644
--- a/data/phonemes.yaml
+++ b/data/phonemes.yaml
@@ -1,7 +1,25 @@
 - aspiration: ''
-  classes: 'consonant voiceless    stop  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    alveolar      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - &id001 !!python/name:builtins.str ''
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless alveolar stop
@@ -11,15 +29,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: t
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant ejective voiceless   stop  alveolar      '
+  classes: 'consonant ejective   alveolar      voiceless stop  '
   consonant: consonant
   ejective: ejective
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ejective
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: ejective voiceless alveolar stop
@@ -29,15 +65,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "t\u02BC"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: aspirated
-  classes: 'consonant aspirated voiceless    stop  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant aspirated    alveolar     voiceless stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: aspirated
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: aspirated voiceless alveolar stop
@@ -47,15 +101,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "t\u02B0"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised voiceless    stop  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    alveolar     voiceless stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: palatalised voiceless alveolar stop
@@ -65,15 +137,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "t\u02B2"
   tendency: palatalised
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    stop  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    alveolar      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiced alveolar stop
@@ -83,15 +173,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.37
   symbol: d
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised voiced    stop  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    alveolar     voiced stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: stop
   name: palatalised voiced alveolar stop
@@ -101,15 +209,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.37
   symbol: "d\u02B2"
   tendency: palatalised
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    sibilant  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    alveolar      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiceless alveolar sibilant
@@ -119,15 +245,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 5.11
   symbol: s
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    sibilant  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    alveolar      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiced alveolar sibilant
@@ -137,15 +281,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.14
   symbol: z
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless lateral   fricative  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    alveolar      fricative lateral '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: lateral
+      manner: fricative
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: lateral
   manner: fricative
   name: voiceless alveolar lateral fricative
@@ -155,15 +317,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 7.01
+  sonority: 6.41
   symbol: "\u026C"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced lateral   fricative  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    alveolar      fricative lateral '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: lateral
+      manner: fricative
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: lateral
   manner: fricative
   name: voiced alveolar lateral fricative
@@ -173,15 +353,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 7.03
+  sonority: 6.43
   symbol: "\u026E"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  dental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    dental      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: dental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless dental fricative
@@ -191,15 +389,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: "\u03B8"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  dental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    dental      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: dental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced dental fricative
@@ -209,15 +425,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\xF0"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    sibilant  palato-alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    palato-alveolar      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: palato-alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiceless palato-alveolar sibilant
@@ -227,15 +461,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 5.11
   symbol: "\u0283"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    sibilant  alveolo-palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    alveolo-palatal      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: alveolo-palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiceless alveolo-palatal sibilant
@@ -245,15 +497,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 5.11
   symbol: "\u0255"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised voiceless    sibilant  palato-alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    palato-alveolar     voiceless sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: palato-alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: palatalised voiceless palato-alveolar sibilant
@@ -263,15 +533,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 5.11
   symbol: "\u0283\u02B2"
   tendency: palatalised
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    sibilant  palato-alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    palato-alveolar      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: palato-alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiced palato-alveolar sibilant
@@ -281,15 +569,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.14
   symbol: "\u0292"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    sibilant  alveolo-palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    alveolo-palatal      sibilant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: sibilant
+      near: ''
+      opening: ''
+      place: alveolo-palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: sibilant
   name: voiced alveolo-palatal sibilant
@@ -299,15 +605,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.14
   symbol: "\u0291"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    stop  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    palatal      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless palatal stop
@@ -317,15 +641,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: c
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    stop  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    palatal      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiced palatal stop
@@ -335,15 +677,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.37
   symbol: "\u025F"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    palatal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless palatal fricative
@@ -353,15 +713,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: "\xE7"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    palatal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced palatal fricative
@@ -371,15 +749,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u029D"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    plosive  bilabial      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    bilabial      plosive  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: plosive
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: plosive
   name: voiceless bilabial plosive
@@ -389,15 +785,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.76
+  sonority: 4.54
   symbol: p
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    plosive  bilabial      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    bilabial      plosive  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: plosive
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: plosive
   name: voiced bilabial plosive
@@ -407,15 +821,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.58
   symbol: b
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: aspirated
-  classes: 'consonant aspirated voiced    plosive  bilabial     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant aspirated    bilabial     voiced plosive  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: aspirated
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: plosive
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: plosive
   name: aspirated voiced bilabial plosive
@@ -425,15 +857,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.58
   symbol: "b\u02B0"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  labiodental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    labiodental      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: labiodental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless labiodental fricative
@@ -443,15 +893,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: f
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  labiodental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    labiodental      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: labiodental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced labiodental fricative
@@ -461,15 +929,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: v
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  bilabial      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    bilabial      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless bilabial fricative
@@ -479,15 +965,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: "\u0278"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  bilabial      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    bilabial      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced bilabial fricative
@@ -497,15 +1001,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u03B2"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    stop  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    velar      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless velar stop
@@ -515,15 +1037,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: k
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    stop  velar labialised     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    velar     labialised stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: labialised
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless labialised velar stop
@@ -533,15 +1073,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "k\u02B7"
   tendency: labialised
   voice: voiceless
   vowel: ''
 - aspiration: aspirated
-  classes: 'consonant voiceless    stop  velar  aspirated    '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    velar   aspirated   stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: aspirated
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless aspirated velar stop
@@ -551,15 +1109,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "k\u02B0"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised voiceless    stop  velar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    velar     voiceless stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: palatalised voiceless velar stop
@@ -569,15 +1145,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "k\u02B2"
   tendency: palatalised
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    stop  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    velar      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiced velar stop
@@ -587,15 +1181,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.37
   symbol: g
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    velar      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless velar fricative
@@ -605,15 +1217,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: x
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    velar      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced velar fricative
@@ -623,15 +1253,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u0263"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    stop  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    uvular      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiceless uvular stop
@@ -641,15 +1289,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: q
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    stop  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    uvular      stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: stop
   name: voiced uvular stop
@@ -659,15 +1325,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.37
   symbol: "\u0262"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    uvular      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless uvular fricative
@@ -677,15 +1361,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: "\u03C7"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    uvular      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced uvular fricative
@@ -695,15 +1397,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u0281"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  pharyngeal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    pharyngeal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: pharyngeal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless pharyngeal fricative
@@ -713,15 +1433,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: "\u0127"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  pharyngeal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    pharyngeal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: pharyngeal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced pharyngeal fricative
@@ -731,15 +1469,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u0295"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    fricative  glottal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    glottal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: glottal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiceless glottal fricative
@@ -749,15 +1505,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.79
+  sonority: 4.93
   symbol: h
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    fricative  glottal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    glottal      fricative  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: fricative
+      near: ''
+      opening: ''
+      place: glottal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: fricative
   name: voiced glottal fricative
@@ -767,15 +1541,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 4.97
   symbol: "\u0266"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     stop  glottal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    glottal       stop  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: stop
+      near: ''
+      opening: ''
+      place: glottal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: stop
   name: glottal stop
@@ -785,15 +1577,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.74
+  sonority: 4.33
   symbol: "\u0294"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    affricate  palato-alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    palato-alveolar      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: palato-alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiceless palato-alveolar affricate
@@ -803,15 +1613,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.74
   symbol: "t\u0283"
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    affricate  palato-alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    palato-alveolar      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: palato-alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiced palato-alveolar affricate
@@ -821,15 +1649,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 4.78
   symbol: "d\u0292"
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    affricate  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    alveolar      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiceless alveolar affricate
@@ -839,15 +1685,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.74
   symbol: ts
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiced    affricate  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiced    alveolar      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiced
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiced alveolar affricate
@@ -857,15 +1721,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.8
+  sonority: 4.78
   symbol: dz
   tendency: ''
   voice: voiced
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    affricate  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    velar      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiceless velar affricate
@@ -875,15 +1757,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.74
   symbol: kx
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant voiceless    affricate  labiodental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant voiceless    labiodental      affricate  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: affricate
+      near: ''
+      opening: ''
+      place: labiodental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: voiceless
+      vowel: ''
   lateral: ''
   manner: affricate
   name: voiceless labiodental affricate
@@ -893,15 +1793,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.77
+  sonority: 4.74
   symbol: pf
   tendency: ''
   voice: voiceless
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  bilabial      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    bilabial       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: bilabial
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: bilabial nasal
@@ -911,15 +1829,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: m
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    alveolar       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: alveolar nasal
@@ -929,15 +1865,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: n
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    velar       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: velar nasal
@@ -947,15 +1901,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: "\u014B"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  retroflex      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    retroflex       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: retroflex
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: retroflex nasal
@@ -965,15 +1937,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: "\u0273"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    palatal       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: palatal nasal
@@ -983,15 +1973,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: "\u0272"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     nasal  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    uvular       nasal  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: nasal
   name: uvular nasal
@@ -1001,15 +2009,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.81
+  sonority: 5.28
   symbol: "\u0274"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant  lateral   approximant  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    alveolar       approximant lateral '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: lateral
+      manner: approximant
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: lateral
   manner: approximant
   name: alveolar lateral approximant
@@ -1019,15 +2045,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 7.08
+  sonority: 7.2
   symbol: l
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised  lateral   approximant  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    alveolar      approximant lateral '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: lateral
+      manner: approximant
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: ''
+      vowel: ''
   lateral: lateral
   manner: approximant
   name: palatalised alveolar lateral approximant
@@ -1037,15 +2081,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 7.08
+  sonority: 7.2
   symbol: "l\u02B2"
   tendency: palatalised
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant  lateral   approximant  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    palatal       approximant lateral '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: lateral
+      manner: approximant
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: lateral
   manner: approximant
   name: palatal lateral approximant
@@ -1055,15 +2117,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 7.08
+  sonority: 7.2
   symbol: "\u028E"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     trill  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    alveolar       trill  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: trill
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: trill
   name: alveolar trill
@@ -1073,15 +2153,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.44
   symbol: r
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised     trill  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    alveolar      trill  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: trill
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: trill
   name: palatalised alveolar trill
@@ -1091,15 +2189,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.44
   symbol: "r\u02B2"
   tendency: palatalised
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     flap  alveolar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    alveolar       flap  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: flap
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: flap
   name: alveolar flap
@@ -1109,15 +2225,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.87
+  sonority: 5.88
   symbol: "\u027E"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised     flap  alveolar     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    alveolar      flap  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: flap
+      near: ''
+      opening: ''
+      place: alveolar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: flap
   name: palatalised alveolar flap
@@ -1127,15 +2261,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.87
+  sonority: 5.88
   symbol: "\u027E\u02B2"
   tendency: palatalised
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     trill  uvular      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    uvular       trill  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: trill
+      near: ''
+      opening: ''
+      place: uvular
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: trill
   name: uvular trill
@@ -1145,15 +2297,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.83
+  sonority: 5.44
   symbol: "\u0280"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     approximant  palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    palatal       approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: palatal approximant
@@ -1163,15 +2333,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: j
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     approximant  labiovelar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    labiovelar       approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: labiovelar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: labiovelar approximant
@@ -1181,15 +2369,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: w
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     approximant  labiodental      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    labiodental       approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: labiodental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: labiodental approximant
@@ -1199,15 +2405,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: "\u028B"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant palatalised     approximant  labiodental     '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant palatalised    labiodental      approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: labiodental
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: palatalised
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: palatalised labiodental approximant
@@ -1217,15 +2441,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: "\u028B\u02B2"
   tendency: palatalised
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     approximant  labial-palatal      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    labial-palatal       approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: labial-palatal
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: labial-palatal approximant
@@ -1235,15 +2477,33 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: "\u0265"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
-  classes: 'consonant     approximant  velar      '
-  consonant: consonant
-  ejective: ''
+  classes: 'consonant    velar       approximant  '
+  consonant: consonant
+  ejective: ''
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: consonant
+      ejective: ''
+      lateral: ''
+      manner: approximant
+      near: ''
+      opening: ''
+      place: velar
+      position: ''
+      release: ''
+      rounding: ''
+      tendency: ''
+      voice: ''
+      vowel: ''
   lateral: ''
   manner: approximant
   name: velar approximant
@@ -1253,17 +2513,35 @@
   position: ''
   release: ''
   rounding: ''
-  sonority: 5.88
+  sonority: 6.02
   symbol: "\u0270"
   tendency: ''
   voice: ''
   vowel: ''
 - aspiration: ''
   backness: 0.0
-  classes: vowel     high       front unrounded
+  classes: vowel     front unrounded       high
   consonant: ''
   ejective: ''
   height: 1.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high front unrounded vowel
@@ -1275,17 +2553,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: i
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.25
-  classes: vowel near- near-     high      front unrounded
+  classes: vowel near- near-    front unrounded       high
   consonant: ''
   ejective: ''
   height: 0.875
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: near- near-
+      opening: high
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: near-high near-front unrounded vowel
@@ -1297,17 +2593,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: "\u026A"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.5
-  classes: vowel     high       central unrounded
+  classes: vowel     central unrounded       high
   consonant: ''
   ejective: ''
   height: 1.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high
+      place: ''
+      position: central
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high central unrounded vowel
@@ -1319,17 +2633,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: "\u0268"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 1.0
-  classes: vowel     high       back rounded
+  classes: vowel     back rounded       high
   consonant: ''
   ejective: ''
   height: 1.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high
+      place: ''
+      position: back
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high back rounded vowel
@@ -1341,17 +2673,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: u
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.75
-  classes: vowel near- near-     high      back rounded
+  classes: vowel near- near-    back rounded       high
   consonant: ''
   ejective: ''
   height: 0.875
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: near- near-
+      opening: high
+      place: ''
+      position: back
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: near-high near-back rounded vowel
@@ -1363,17 +2713,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: "\u028A"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     high-mid       front unrounded
+  classes: vowel     front unrounded       high-mid
   consonant: ''
   ejective: ''
   height: 0.75
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high-mid
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high-mid front unrounded vowel
@@ -1385,17 +2753,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.02
+  sonority: 11.13
   symbol: e
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel    nasal high-mid       front unrounded
+  classes: vowel     front unrounded     nasal  high-mid
   consonant: ''
   ejective: ''
   height: 0.75
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: nasal
+      near: ''
+      opening: high-mid
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: nasal
   name: high-mid front unrounded nasal vowel
@@ -1407,17 +2793,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.22
+  sonority: 11.55
   symbol: "\u1EBD"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     low-mid       front unrounded
+  classes: vowel     front unrounded       low-mid
   consonant: ''
   ejective: ''
   height: 0.25
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: low-mid
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: low-mid front unrounded vowel
@@ -1429,17 +2833,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.01
+  sonority: 13.03
   symbol: "\u025B"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 1.0
-  classes: vowel     high-mid       back rounded
+  classes: vowel     back rounded       high-mid
   consonant: ''
   ejective: ''
   height: 0.75
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high-mid
+      place: ''
+      position: back
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high-mid back rounded vowel
@@ -1451,17 +2873,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.02
+  sonority: 11.13
   symbol: o
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 1.0
-  classes: vowel     low-mid       back rounded
+  classes: vowel     back rounded       low-mid
   consonant: ''
   ejective: ''
   height: 0.25
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: low-mid
+      place: ''
+      position: back
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: low-mid back rounded vowel
@@ -1473,17 +2913,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.01
+  sonority: 13.03
   symbol: "\u0254"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 1.0
-  classes: vowel     low-mid       back unrounded
+  classes: vowel     back unrounded       low-mid
   consonant: ''
   ejective: ''
   height: 0.25
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: low-mid
+      place: ''
+      position: back
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: low-mid back unrounded vowel
@@ -1495,17 +2953,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.01
+  sonority: 13.03
   symbol: "\u028C"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     low       front unrounded
+  classes: vowel     front unrounded       low
   consonant: ''
   ejective: ''
   height: 0.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: low
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: low front unrounded vowel
@@ -1517,17 +2993,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.01
+  sonority: 13.84
   symbol: a
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel near-     low      front unrounded
+  classes: vowel near-    front unrounded       low
   consonant: ''
   ejective: ''
   height: 0.125
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: near-
+      opening: low
+      place: ''
+      position: front
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: near-low front unrounded vowel
@@ -1539,17 +3033,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.01
+  sonority: 13.84
   symbol: "\xE6"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     high       front rounded
+  classes: vowel     front rounded       high
   consonant: ''
   ejective: ''
   height: 1.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high
+      place: ''
+      position: front
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high front rounded vowel
@@ -1561,17 +3073,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: y
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.25
-  classes: vowel near- near-     high      front rounded
+  classes: vowel near- near-    front rounded       high
   consonant: ''
   ejective: ''
   height: 0.875
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: near- near-
+      opening: high
+      place: ''
+      position: front
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: near-high near-front rounded vowel
@@ -1583,17 +3113,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: "\u028F"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     high-mid       front rounded
+  classes: vowel     front rounded       high-mid
   consonant: ''
   ejective: ''
   height: 0.75
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high-mid
+      place: ''
+      position: front
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high-mid front rounded vowel
@@ -1605,17 +3153,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.02
+  sonority: 11.13
   symbol: "\xF8"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.0
-  classes: vowel     low-mid       front rounded
+  classes: vowel     front rounded       low-mid
   consonant: ''
   ejective: ''
   height: 0.25
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: low-mid
+      place: ''
+      position: front
+      release: ''
+      rounding: rounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: low-mid front rounded vowel
@@ -1627,17 +3193,35 @@
   release: ''
   rounded: true
   rounding: rounded
-  sonority: 21.01
+  sonority: 13.03
   symbol: "\u0153"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 0.5
-  classes: vowel     mid       central unrounded
+  classes: vowel     central unrounded       mid
   consonant: ''
   ejective: ''
   height: 0.5
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: mid
+      place: ''
+      position: central
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: mid central unrounded vowel
@@ -1649,17 +3233,35 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.02
+  sonority: 12.14
   symbol: "\u0259"
   tendency: ''
   voice: ''
   vowel: vowel
 - aspiration: ''
   backness: 1.0
-  classes: vowel     high       back unrounded
+  classes: vowel     back unrounded       high
   consonant: ''
   ejective: ''
   height: 1.0
+  ipa: !!python/object/apply:collections.defaultdict
+    args:
+    - *id001
+    dictitems:
+      aspiration: ''
+      consonant: ''
+      ejective: ''
+      lateral: ''
+      manner: ''
+      near: ''
+      opening: high
+      place: ''
+      position: back
+      release: ''
+      rounding: unrounded
+      tendency: ''
+      voice: ''
+      vowel: vowel
   lateral: ''
   manner: ''
   name: high back unrounded vowel
@@ -1671,7 +3273,7 @@
   release: ''
   rounded: false
   rounding: unrounded
-  sonority: 21.03
+  sonority: 9.96
   symbol: "\u026F"
   tendency: ''
   voice: ''
diff --git a/index.html b/index.html
index 6cc5dfc..9e79d77 100644
--- a/index.html
+++ b/index.html
@@ -3,233 +3,262 @@
 <html>
 
 <head>
-  <title>
-    IPAtope
-  </title>
+    <title>
+        IPAtope
+    </title>
+
+    <!-- CDN -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
+    <script src="https://rawcdn.githack.com/metafizzy/isotope-packery/0b8522ea7d10e39d084d028da8a81c6f126d6bce/packery-mode.pkgd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin' rel='stylesheet' type='text/css' />
+
 </head>
 
 <body>
-  <h1>IPAtope</h1>
+    <h1>IPAtope</h1>
 
-  <h4>Filter</h4>
+    <h4>Filter</h4>
 
-  <div class="filters">
+    <div class="filters">
 
-    
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> voicing </label></div>
-      <div class="button-group" data-filter-group="voicing">
-        <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
         
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".voiced,.vowel">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> voice </label></div>
+            <div class="button-group" data-filter-group="voice">
+                <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".voiced,.vowel">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".voiced,.vowel" name="voiced" data-filter=".voiced,.vowel">
     <label class="form-check-label" for=".voiced,.vowel"> -->
-        voiced
-    <!-- </label> -->
+    voiced
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".voiceless">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".voiceless">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".voiceless" name="voiceless" data-filter=".voiceless">
     <label class="form-check-label" for=".voiceless"> -->
-        voiceless
-    <!-- </label> -->
+    voiceless
 </button>
+                
+            </div>
+        </div>
         
-      </div>
-    </div>
-    
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> place </label></div>
-      <div class="button-group" data-filter-group="place">
-        <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".glottal">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> place </label></div>
+            <div class="button-group" data-filter-group="place">
+                <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".glottal">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".glottal" name="glottal" data-filter=".glottal">
     <label class="form-check-label" for=".glottal"> -->
-        glottal
-    <!-- </label> -->
+    glottal
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".velar">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".velar">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".velar" name="velar" data-filter=".velar">
     <label class="form-check-label" for=".velar"> -->
-        velar
-    <!-- </label> -->
+    velar
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".uvular">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".uvular">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".uvular" name="uvular" data-filter=".uvular">
     <label class="form-check-label" for=".uvular"> -->
-        uvular
-    <!-- </label> -->
+    uvular
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar" name="alveolar" data-filter=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar">
     <label class="form-check-label" for=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar"> -->
-        alveolar
-    <!-- </label> -->
+    alveolar
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal" name="palatal" data-filter=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal">
     <label class="form-check-label" for=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"> -->
-        palatal
-    <!-- </label> -->
+    palatal
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal" name="labial" data-filter=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal">
     <label class="form-check-label" for=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"> -->
-        labial
-    <!-- </label> -->
+    labial
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".dental,.labiodental">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".dental,.labiodental">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".dental,.labiodental" name="dental" data-filter=".dental,.labiodental">
     <label class="form-check-label" for=".dental,.labiodental"> -->
-        dental
-    <!-- </label> -->
+    dental
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".nasal">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".nasal">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".nasal" name="nasal" data-filter=".nasal">
     <label class="form-check-label" for=".nasal"> -->
-        nasal
-    <!-- </label> -->
+    nasal
 </button>
+                
+            </div>
+        </div>
         
-      </div>
-    </div>
-    
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> manner </label></div>
-      <div class="button-group" data-filter-group="manner">
-        <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".stop,.plosive">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> manner </label></div>
+            <div class="button-group" data-filter-group="manner">
+                <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".stop,.plosive">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".stop,.plosive" name="stop/plosive" data-filter=".stop,.plosive">
     <label class="form-check-label" for=".stop,.plosive"> -->
-        stop/plosive
-    <!-- </label> -->
+    stop/plosive
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".trill">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".trill">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".trill" name="trill" data-filter=".trill">
     <label class="form-check-label" for=".trill"> -->
-        trill
-    <!-- </label> -->
+    trill
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".tap,.flap">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".tap,.flap">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".tap,.flap" name="tap or flap" data-filter=".tap,.flap">
     <label class="form-check-label" for=".tap,.flap"> -->
-        tap or flap
-    <!-- </label> -->
+    tap or flap
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".fricative">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".lateral">
+    <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".lateral" name="lateral" data-filter=".lateral">
+    <label class="form-check-label" for=".lateral"> -->
+    lateral
+</button>
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".fricative">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".fricative" name="fricative" data-filter=".fricative">
     <label class="form-check-label" for=".fricative"> -->
-        fricative
-    <!-- </label> -->
+    fricative
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".affricate">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".affricate">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".affricate" name="affricate" data-filter=".affricate">
     <label class="form-check-label" for=".affricate"> -->
-        affricate
-    <!-- </label> -->
+    affricate
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".sibilant">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".sibilant">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".sibilant" name="sibilant" data-filter=".sibilant">
     <label class="form-check-label" for=".sibilant"> -->
-        sibilant
-    <!-- </label> -->
+    sibilant
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".approximant">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".approximant">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".approximant" name="approximant" data-filter=".approximant">
     <label class="form-check-label" for=".approximant"> -->
-        approximant
-    <!-- </label> -->
+    approximant
 </button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter=".vowel">
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter=".vowel">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id=".vowel" name="vowel" data-filter=".vowel">
     <label class="form-check-label" for=".vowel"> -->
-        vowel
-    <!-- </label> -->
+    vowel
 </button>
+                
+            </div>
+        </div>
         
-      </div>
-    </div>
-    
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> properties </label></div>
-      <div class="button-group" data-filter-group="properties">
-        <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
-        
-        <button type="button" class="ui-group-item btn btn-sm button" data-filter="sonGreaterThan5">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> properties </label></div>
+            <div class="button-group" data-filter-group="properties">
+                <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
+                
+                <button type="button" class="ui-group-item btn btn-sm button" data-filter="sonGreaterThan5">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id="sonGreaterThan5" name="sonority > 5" data-filter="sonGreaterThan5">
     <label class="form-check-label" for="sonGreaterThan5"> -->
-        sonority > 5
-    <!-- </label> -->
+    sonority > 5
 </button>
+                
+            </div>
+        </div>
         
-      </div>
-    </div>
-    
 
-  </div>
-
-  <h4>Sort</h4>
+    </div>
 
-  <div class="sorters">
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> sort by </label></div>
-      <div class="button-group" data-filter-group="{{ group }}">
-        <button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
-        
-        <button class="ui-group-item btn btn-sm button" data-sort-by="symbol">symbol</button>
-        
-        <button class="ui-group-item btn btn-sm button" data-sort-by="sonority">sonority</button>
-        
-      </div>
+    <h4>Sort</h4>
+
+    <div class="sorters">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> sort by </label></div>
+            <div class="button-group" data-filter-group="{{ group }}">
+                <button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
+                
+                <button class="ui-group-item btn btn-sm button" data-sort-by="symbol">symbol</button>
+                
+                <button class="ui-group-item btn btn-sm button" data-sort-by="sonority">sonority</button>
+                
+            </div>
+        </div>
     </div>
-  </div>
 
-  <!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
+    <!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
         <button class="button" data-sort-by="name">name</button>
         <button class="button" data-sort-by="symbol">symbol</button>
         <button class="button" data-sort-by="sonority">sonority</button>
         <button class="button" data-sort-by="category">category</button>
     </div> -->
 
-  <h4>Controls</h4>
-  <div class="ui-group">
-    <div class="controls" style="margin: 5px;">
-      <button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope('shuffle');">
-        shuffle
-      </button>
-      <button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
-        clear all
-      </button>
+    <h4>Controls</h4>
+    <div class="ui-group-bootstrap">
+        <div class="controls btn-toolbar" style="margin: 5px;" role="toolbar" aria-label="Toolbar with button groups">
+            <div class="btn-group mr-2" role="group" aria-label="">
+                <button class="ui-group-item button btn btn-secondary btn-sm" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
+                    reorder
+                </button>
+            </div>
+            <div class="btn-group mr-2" role="group" aria-label="">
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button" onclick="$grid.isotope('shuffle');">
+                    shuffle
+                </button>
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button" onclick="$( '.phoneme-item' ).each(function( index ) {
+                                $(this).css({
+                                    left : Math.random() * ($(window).width() - $(this).width() - 100),
+                                    top : Math.random() * (500 - $(this).height()) - 200,
+                                });
+                              });">
+                    scramble
+                </button>
+            </div>
+            <div class="btn-group mr-2" role="group" aria-label="">
+                
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button"
+                        onclick="$('.phoneme-item>.name').toggleClass('hidden');">
+                    toggle name
+                </button>
+                
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button"
+                        onclick="$('.phoneme-item>.symbol').toggleClass('hidden');">
+                    toggle symbol
+                </button>
+                
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button"
+                        onclick="$('.phoneme-item>.sonority').toggleClass('hidden');">
+                    toggle sonority
+                </button>
+                
+            </div>
+        </div>
     </div>
-  </div>
-  <br>
-  <h5>Try dragging them around!</h5>
-  <br>
+    <br>
+    <h5 class="tip">Try dragging them around!</h5>
+    <br>
 
-  <div class="grid">
-    
-    <!-- whatever we wish to display on the phoneme -->
+    <div class="grid">
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         alveolar   stop" name="voiceless alveolar stop">
+<div class="phoneme-item card consonant voiceless    alveolar      stop  " name="voiceless alveolar stop">
   <!-- <h3 class="name">voiceless alveolar stop</h3> -->
   <p class="symbol">t</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless alveolar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -239,13 +268,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant ejective  voiceless       alveolar   stop" name="ejective voiceless alveolar stop">
+<div class="phoneme-item card consonant ejective   alveolar      voiceless stop  " name="ejective voiceless alveolar stop">
   <!-- <h3 class="name">ejective voiceless alveolar stop</h3> -->
   <p class="symbol">tʼ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">ejective voiceless alveolar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -255,13 +284,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant aspirated  voiceless       alveolar   stop" name="aspirated voiceless alveolar stop">
+<div class="phoneme-item card consonant aspirated    alveolar     voiceless stop  " name="aspirated voiceless alveolar stop">
   <!-- <h3 class="name">aspirated voiceless alveolar stop</h3> -->
   <p class="symbol">tʰ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">aspirated voiceless alveolar stop</p>
   
       <!-- <p class="aspiration">aspirated</p>
@@ -271,13 +300,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised  voiceless       alveolar   stop" name="palatalised voiceless alveolar stop">
+<div class="phoneme-item card consonant palatalised    alveolar     voiceless stop  " name="palatalised voiceless alveolar stop">
   <!-- <h3 class="name">palatalised voiceless alveolar stop</h3> -->
   <p class="symbol">tʲ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">palatalised voiceless alveolar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -287,13 +316,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         alveolar   stop" name="voiced alveolar stop">
+<div class="phoneme-item card consonant voiced    alveolar      stop  " name="voiced alveolar stop">
   <!-- <h3 class="name">voiced alveolar stop</h3> -->
   <p class="symbol">d</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.37</p>
   <p class="name">voiced alveolar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -303,13 +332,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised  voiced       alveolar   stop" name="palatalised voiced alveolar stop">
+<div class="phoneme-item card consonant palatalised    alveolar     voiced stop  " name="palatalised voiced alveolar stop">
   <!-- <h3 class="name">palatalised voiced alveolar stop</h3> -->
   <p class="symbol">dʲ</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.37</p>
   <p class="name">palatalised voiced alveolar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -319,13 +348,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         alveolar   sibilant" name="voiceless alveolar sibilant">
+<div class="phoneme-item card consonant voiceless    alveolar      sibilant  " name="voiceless alveolar sibilant">
   <!-- <h3 class="name">voiceless alveolar sibilant</h3> -->
   <p class="symbol">s</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">5.11</p>
   <p class="name">voiceless alveolar sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -335,13 +364,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         alveolar   sibilant" name="voiced alveolar sibilant">
+<div class="phoneme-item card consonant voiced    alveolar      sibilant  " name="voiced alveolar sibilant">
   <!-- <h3 class="name">voiced alveolar sibilant</h3> -->
   <p class="symbol">z</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.14</p>
   <p class="name">voiced alveolar sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -351,13 +380,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless lateral        alveolar   fricative" name="voiceless alveolar lateral fricative">
+<div class="phoneme-item card consonant voiceless    alveolar      fricative lateral " name="voiceless alveolar lateral fricative">
   <!-- <h3 class="name">voiceless alveolar lateral fricative</h3> -->
   <p class="symbol">ɬ</p>
-  <p class="sonority">7.01</p>
+  <p class="sonority">6.41</p>
   <p class="name">voiceless alveolar lateral fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -367,13 +396,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner">lateral fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced lateral        alveolar   fricative" name="voiced alveolar lateral fricative">
+<div class="phoneme-item card consonant voiced    alveolar      fricative lateral " name="voiced alveolar lateral fricative">
   <!-- <h3 class="name">voiced alveolar lateral fricative</h3> -->
   <p class="symbol">ɮ</p>
-  <p class="sonority">7.03</p>
+  <p class="sonority">6.43</p>
   <p class="name">voiced alveolar lateral fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -383,13 +412,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner">lateral fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         dental   fricative" name="voiceless dental fricative">
+<div class="phoneme-item card consonant voiceless    dental      fricative  " name="voiceless dental fricative">
   <!-- <h3 class="name">voiceless dental fricative</h3> -->
   <p class="symbol">θ</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless dental fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -399,13 +428,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         dental   fricative" name="voiced dental fricative">
+<div class="phoneme-item card consonant voiced    dental      fricative  " name="voiced dental fricative">
   <!-- <h3 class="name">voiced dental fricative</h3> -->
   <p class="symbol">ð</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced dental fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -415,13 +444,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         palato-alveolar   sibilant" name="voiceless palato-alveolar sibilant">
+<div class="phoneme-item card consonant voiceless    palato-alveolar      sibilant  " name="voiceless palato-alveolar sibilant">
   <!-- <h3 class="name">voiceless palato-alveolar sibilant</h3> -->
   <p class="symbol">ʃ</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">5.11</p>
   <p class="name">voiceless palato-alveolar sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -431,13 +460,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         alveolo-palatal   sibilant" name="voiceless alveolo-palatal sibilant">
+<div class="phoneme-item card consonant voiceless    alveolo-palatal      sibilant  " name="voiceless alveolo-palatal sibilant">
   <!-- <h3 class="name">voiceless alveolo-palatal sibilant</h3> -->
   <p class="symbol">ɕ</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">5.11</p>
   <p class="name">voiceless alveolo-palatal sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -447,13 +476,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised  voiceless       palato-alveolar   sibilant" name="palatalised voiceless palato-alveolar sibilant">
+<div class="phoneme-item card consonant palatalised    palato-alveolar     voiceless sibilant  " name="palatalised voiceless palato-alveolar sibilant">
   <!-- <h3 class="name">palatalised voiceless palato-alveolar sibilant</h3> -->
   <p class="symbol">ʃʲ</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">5.11</p>
   <p class="name">palatalised voiceless palato-alveolar sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -463,13 +492,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         palato-alveolar   sibilant" name="voiced palato-alveolar sibilant">
+<div class="phoneme-item card consonant voiced    palato-alveolar      sibilant  " name="voiced palato-alveolar sibilant">
   <!-- <h3 class="name">voiced palato-alveolar sibilant</h3> -->
   <p class="symbol">ʒ</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.14</p>
   <p class="name">voiced palato-alveolar sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -479,13 +508,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         alveolo-palatal   sibilant" name="voiced alveolo-palatal sibilant">
+<div class="phoneme-item card consonant voiced    alveolo-palatal      sibilant  " name="voiced alveolo-palatal sibilant">
   <!-- <h3 class="name">voiced alveolo-palatal sibilant</h3> -->
   <p class="symbol">ʑ</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.14</p>
   <p class="name">voiced alveolo-palatal sibilant</p>
   
       <!-- <p class="aspiration"></p>
@@ -495,13 +524,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> sibilant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         palatal   stop" name="voiceless palatal stop">
+<div class="phoneme-item card consonant voiceless    palatal      stop  " name="voiceless palatal stop">
   <!-- <h3 class="name">voiceless palatal stop</h3> -->
   <p class="symbol">c</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless palatal stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -511,13 +540,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         palatal   stop" name="voiced palatal stop">
+<div class="phoneme-item card consonant voiced    palatal      stop  " name="voiced palatal stop">
   <!-- <h3 class="name">voiced palatal stop</h3> -->
   <p class="symbol">ɟ</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.37</p>
   <p class="name">voiced palatal stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -527,13 +556,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         palatal   fricative" name="voiceless palatal fricative">
+<div class="phoneme-item card consonant voiceless    palatal      fricative  " name="voiceless palatal fricative">
   <!-- <h3 class="name">voiceless palatal fricative</h3> -->
   <p class="symbol">ç</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless palatal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -543,13 +572,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         palatal   fricative" name="voiced palatal fricative">
+<div class="phoneme-item card consonant voiced    palatal      fricative  " name="voiced palatal fricative">
   <!-- <h3 class="name">voiced palatal fricative</h3> -->
   <p class="symbol">ʝ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced palatal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -559,13 +588,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         bilabial   plosive" name="voiceless bilabial plosive">
+<div class="phoneme-item card consonant voiceless    bilabial      plosive  " name="voiceless bilabial plosive">
   <!-- <h3 class="name">voiceless bilabial plosive</h3> -->
   <p class="symbol">p</p>
-  <p class="sonority">5.76</p>
+  <p class="sonority">4.54</p>
   <p class="name">voiceless bilabial plosive</p>
   
       <!-- <p class="aspiration"></p>
@@ -575,13 +604,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> plosive</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         bilabial   plosive" name="voiced bilabial plosive">
+<div class="phoneme-item card consonant voiced    bilabial      plosive  " name="voiced bilabial plosive">
   <!-- <h3 class="name">voiced bilabial plosive</h3> -->
   <p class="symbol">b</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.58</p>
   <p class="name">voiced bilabial plosive</p>
   
       <!-- <p class="aspiration"></p>
@@ -591,13 +620,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> plosive</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant aspirated  voiced       bilabial   plosive" name="aspirated voiced bilabial plosive">
+<div class="phoneme-item card consonant aspirated    bilabial     voiced plosive  " name="aspirated voiced bilabial plosive">
   <!-- <h3 class="name">aspirated voiced bilabial plosive</h3> -->
   <p class="symbol">bʰ</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.58</p>
   <p class="name">aspirated voiced bilabial plosive</p>
   
       <!-- <p class="aspiration">aspirated</p>
@@ -607,13 +636,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> plosive</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         labiodental   fricative" name="voiceless labiodental fricative">
+<div class="phoneme-item card consonant voiceless    labiodental      fricative  " name="voiceless labiodental fricative">
   <!-- <h3 class="name">voiceless labiodental fricative</h3> -->
   <p class="symbol">f</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless labiodental fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -623,13 +652,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         labiodental   fricative" name="voiced labiodental fricative">
+<div class="phoneme-item card consonant voiced    labiodental      fricative  " name="voiced labiodental fricative">
   <!-- <h3 class="name">voiced labiodental fricative</h3> -->
   <p class="symbol">v</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced labiodental fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -639,13 +668,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         bilabial   fricative" name="voiceless bilabial fricative">
+<div class="phoneme-item card consonant voiceless    bilabial      fricative  " name="voiceless bilabial fricative">
   <!-- <h3 class="name">voiceless bilabial fricative</h3> -->
   <p class="symbol">ɸ</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless bilabial fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -655,13 +684,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         bilabial   fricative" name="voiced bilabial fricative">
+<div class="phoneme-item card consonant voiced    bilabial      fricative  " name="voiced bilabial fricative">
   <!-- <h3 class="name">voiced bilabial fricative</h3> -->
   <p class="symbol">β</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced bilabial fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -671,13 +700,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         velar   stop" name="voiceless velar stop">
+<div class="phoneme-item card consonant voiceless    velar      stop  " name="voiceless velar stop">
   <!-- <h3 class="name">voiceless velar stop</h3> -->
   <p class="symbol">k</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless velar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -687,13 +716,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless   labialised      velar   stop" name="voiceless labialised velar stop">
+<div class="phoneme-item card consonant voiceless    velar     labialised stop  " name="voiceless labialised velar stop">
   <!-- <h3 class="name">voiceless labialised velar stop</h3> -->
   <p class="symbol">kʷ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless labialised velar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -703,13 +732,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless     aspirated    velar   stop" name="voiceless aspirated velar stop">
+<div class="phoneme-item card consonant voiceless    velar   aspirated   stop  " name="voiceless aspirated velar stop">
   <!-- <h3 class="name">voiceless aspirated velar stop</h3> -->
   <p class="symbol">kʰ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless aspirated velar stop</p>
   
       <!-- <p class="aspiration">aspirated</p>
@@ -719,13 +748,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised  voiceless       velar   stop" name="palatalised voiceless velar stop">
+<div class="phoneme-item card consonant palatalised    velar     voiceless stop  " name="palatalised voiceless velar stop">
   <!-- <h3 class="name">palatalised voiceless velar stop</h3> -->
   <p class="symbol">kʲ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">palatalised voiceless velar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -735,13 +764,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         velar   stop" name="voiced velar stop">
+<div class="phoneme-item card consonant voiced    velar      stop  " name="voiced velar stop">
   <!-- <h3 class="name">voiced velar stop</h3> -->
   <p class="symbol">g</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.37</p>
   <p class="name">voiced velar stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -751,13 +780,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         velar   fricative" name="voiceless velar fricative">
+<div class="phoneme-item card consonant voiceless    velar      fricative  " name="voiceless velar fricative">
   <!-- <h3 class="name">voiceless velar fricative</h3> -->
   <p class="symbol">x</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless velar fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -767,13 +796,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         velar   fricative" name="voiced velar fricative">
+<div class="phoneme-item card consonant voiced    velar      fricative  " name="voiced velar fricative">
   <!-- <h3 class="name">voiced velar fricative</h3> -->
   <p class="symbol">ɣ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced velar fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -783,13 +812,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         uvular   stop" name="voiceless uvular stop">
+<div class="phoneme-item card consonant voiceless    uvular      stop  " name="voiceless uvular stop">
   <!-- <h3 class="name">voiceless uvular stop</h3> -->
   <p class="symbol">q</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">voiceless uvular stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -799,13 +828,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         uvular   stop" name="voiced uvular stop">
+<div class="phoneme-item card consonant voiced    uvular      stop  " name="voiced uvular stop">
   <!-- <h3 class="name">voiced uvular stop</h3> -->
   <p class="symbol">ɢ</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.37</p>
   <p class="name">voiced uvular stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -815,13 +844,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         uvular   fricative" name="voiceless uvular fricative">
+<div class="phoneme-item card consonant voiceless    uvular      fricative  " name="voiceless uvular fricative">
   <!-- <h3 class="name">voiceless uvular fricative</h3> -->
   <p class="symbol">χ</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless uvular fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -831,13 +860,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         uvular   fricative" name="voiced uvular fricative">
+<div class="phoneme-item card consonant voiced    uvular      fricative  " name="voiced uvular fricative">
   <!-- <h3 class="name">voiced uvular fricative</h3> -->
   <p class="symbol">ʁ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced uvular fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -847,13 +876,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         pharyngeal   fricative" name="voiceless pharyngeal fricative">
+<div class="phoneme-item card consonant voiceless    pharyngeal      fricative  " name="voiceless pharyngeal fricative">
   <!-- <h3 class="name">voiceless pharyngeal fricative</h3> -->
   <p class="symbol">ħ</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless pharyngeal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -863,13 +892,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         pharyngeal   fricative" name="voiced pharyngeal fricative">
+<div class="phoneme-item card consonant voiced    pharyngeal      fricative  " name="voiced pharyngeal fricative">
   <!-- <h3 class="name">voiced pharyngeal fricative</h3> -->
   <p class="symbol">ʕ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced pharyngeal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -879,13 +908,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         glottal   fricative" name="voiceless glottal fricative">
+<div class="phoneme-item card consonant voiceless    glottal      fricative  " name="voiceless glottal fricative">
   <!-- <h3 class="name">voiceless glottal fricative</h3> -->
   <p class="symbol">h</p>
-  <p class="sonority">5.79</p>
+  <p class="sonority">4.93</p>
   <p class="name">voiceless glottal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -895,13 +924,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         glottal   fricative" name="voiced glottal fricative">
+<div class="phoneme-item card consonant voiced    glottal      fricative  " name="voiced glottal fricative">
   <!-- <h3 class="name">voiced glottal fricative</h3> -->
   <p class="symbol">ɦ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">4.97</p>
   <p class="name">voiced glottal fricative</p>
   
       <!-- <p class="aspiration"></p>
@@ -911,13 +940,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> fricative</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          glottal   stop" name="glottal stop">
+<div class="phoneme-item card consonant    glottal       stop  " name="glottal stop">
   <!-- <h3 class="name">glottal stop</h3> -->
   <p class="symbol">ʔ</p>
-  <p class="sonority">5.74</p>
+  <p class="sonority">4.33</p>
   <p class="name">glottal stop</p>
   
       <!-- <p class="aspiration"></p>
@@ -927,13 +956,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> stop</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         palato-alveolar   affricate" name="voiceless palato-alveolar affricate">
+<div class="phoneme-item card consonant voiceless    palato-alveolar      affricate  " name="voiceless palato-alveolar affricate">
   <!-- <h3 class="name">voiceless palato-alveolar affricate</h3> -->
   <p class="symbol">tʃ</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.74</p>
   <p class="name">voiceless palato-alveolar affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -943,13 +972,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         palato-alveolar   affricate" name="voiced palato-alveolar affricate">
+<div class="phoneme-item card consonant voiced    palato-alveolar      affricate  " name="voiced palato-alveolar affricate">
   <!-- <h3 class="name">voiced palato-alveolar affricate</h3> -->
   <p class="symbol">dʒ</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">4.78</p>
   <p class="name">voiced palato-alveolar affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -959,13 +988,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         alveolar   affricate" name="voiceless alveolar affricate">
+<div class="phoneme-item card consonant voiceless    alveolar      affricate  " name="voiceless alveolar affricate">
   <!-- <h3 class="name">voiceless alveolar affricate</h3> -->
   <p class="symbol">ts</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.74</p>
   <p class="name">voiceless alveolar affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -975,13 +1004,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiced         alveolar   affricate" name="voiced alveolar affricate">
+<div class="phoneme-item card consonant voiced    alveolar      affricate  " name="voiced alveolar affricate">
   <!-- <h3 class="name">voiced alveolar affricate</h3> -->
   <p class="symbol">dz</p>
-  <p class="sonority">5.8</p>
+  <p class="sonority">4.78</p>
   <p class="name">voiced alveolar affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -991,13 +1020,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         velar   affricate" name="voiceless velar affricate">
+<div class="phoneme-item card consonant voiceless    velar      affricate  " name="voiceless velar affricate">
   <!-- <h3 class="name">voiceless velar affricate</h3> -->
   <p class="symbol">kx</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.74</p>
   <p class="name">voiceless velar affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -1007,13 +1036,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant voiceless         labiodental   affricate" name="voiceless labiodental affricate">
+<div class="phoneme-item card consonant voiceless    labiodental      affricate  " name="voiceless labiodental affricate">
   <!-- <h3 class="name">voiceless labiodental affricate</h3> -->
   <p class="symbol">pf</p>
-  <p class="sonority">5.77</p>
+  <p class="sonority">4.74</p>
   <p class="name">voiceless labiodental affricate</p>
   
       <!-- <p class="aspiration"></p>
@@ -1023,13 +1052,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> affricate</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          bilabial   nasal" name="bilabial nasal">
+<div class="phoneme-item card consonant    bilabial       nasal  " name="bilabial nasal">
   <!-- <h3 class="name">bilabial nasal</h3> -->
   <p class="symbol">m</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">bilabial nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1039,13 +1068,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          alveolar   nasal" name="alveolar nasal">
+<div class="phoneme-item card consonant    alveolar       nasal  " name="alveolar nasal">
   <!-- <h3 class="name">alveolar nasal</h3> -->
   <p class="symbol">n</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">alveolar nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1055,13 +1084,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          velar   nasal" name="velar nasal">
+<div class="phoneme-item card consonant    velar       nasal  " name="velar nasal">
   <!-- <h3 class="name">velar nasal</h3> -->
   <p class="symbol">ŋ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">velar nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1071,13 +1100,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          retroflex   nasal" name="retroflex nasal">
+<div class="phoneme-item card consonant    retroflex       nasal  " name="retroflex nasal">
   <!-- <h3 class="name">retroflex nasal</h3> -->
   <p class="symbol">ɳ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">retroflex nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1087,13 +1116,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          palatal   nasal" name="palatal nasal">
+<div class="phoneme-item card consonant    palatal       nasal  " name="palatal nasal">
   <!-- <h3 class="name">palatal nasal</h3> -->
   <p class="symbol">ɲ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">palatal nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1103,13 +1132,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          uvular   nasal" name="uvular nasal">
+<div class="phoneme-item card consonant    uvular       nasal  " name="uvular nasal">
   <!-- <h3 class="name">uvular nasal</h3> -->
   <p class="symbol">ɴ</p>
-  <p class="sonority">5.81</p>
+  <p class="sonority">5.28</p>
   <p class="name">uvular nasal</p>
   
       <!-- <p class="aspiration"></p>
@@ -1119,13 +1148,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> nasal</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant lateral         alveolar   approximant" name="alveolar lateral approximant">
+<div class="phoneme-item card consonant    alveolar       approximant lateral " name="alveolar lateral approximant">
   <!-- <h3 class="name">alveolar lateral approximant</h3> -->
   <p class="symbol">l</p>
-  <p class="sonority">7.08</p>
+  <p class="sonority">7.2</p>
   <p class="name">alveolar lateral approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1135,13 +1164,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner">lateral approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised lateral        alveolar   approximant" name="palatalised alveolar lateral approximant">
+<div class="phoneme-item card consonant palatalised    alveolar      approximant lateral " name="palatalised alveolar lateral approximant">
   <!-- <h3 class="name">palatalised alveolar lateral approximant</h3> -->
   <p class="symbol">lʲ</p>
-  <p class="sonority">7.08</p>
+  <p class="sonority">7.2</p>
   <p class="name">palatalised alveolar lateral approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1151,13 +1180,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner">lateral approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant lateral         palatal   approximant" name="palatal lateral approximant">
+<div class="phoneme-item card consonant    palatal       approximant lateral " name="palatal lateral approximant">
   <!-- <h3 class="name">palatal lateral approximant</h3> -->
   <p class="symbol">ʎ</p>
-  <p class="sonority">7.08</p>
+  <p class="sonority">7.2</p>
   <p class="name">palatal lateral approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1167,13 +1196,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner">lateral approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          alveolar   trill" name="alveolar trill">
+<div class="phoneme-item card consonant    alveolar       trill  " name="alveolar trill">
   <!-- <h3 class="name">alveolar trill</h3> -->
   <p class="symbol">r</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.44</p>
   <p class="name">alveolar trill</p>
   
       <!-- <p class="aspiration"></p>
@@ -1183,13 +1212,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> trill</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised         alveolar   trill" name="palatalised alveolar trill">
+<div class="phoneme-item card consonant palatalised    alveolar      trill  " name="palatalised alveolar trill">
   <!-- <h3 class="name">palatalised alveolar trill</h3> -->
   <p class="symbol">rʲ</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.44</p>
   <p class="name">palatalised alveolar trill</p>
   
       <!-- <p class="aspiration"></p>
@@ -1199,13 +1228,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> trill</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          alveolar   flap" name="alveolar flap">
+<div class="phoneme-item card consonant    alveolar       flap  " name="alveolar flap">
   <!-- <h3 class="name">alveolar flap</h3> -->
   <p class="symbol">ɾ</p>
-  <p class="sonority">5.87</p>
+  <p class="sonority">5.88</p>
   <p class="name">alveolar flap</p>
   
       <!-- <p class="aspiration"></p>
@@ -1215,13 +1244,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> flap</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised         alveolar   flap" name="palatalised alveolar flap">
+<div class="phoneme-item card consonant palatalised    alveolar      flap  " name="palatalised alveolar flap">
   <!-- <h3 class="name">palatalised alveolar flap</h3> -->
   <p class="symbol">ɾʲ</p>
-  <p class="sonority">5.87</p>
+  <p class="sonority">5.88</p>
   <p class="name">palatalised alveolar flap</p>
   
       <!-- <p class="aspiration"></p>
@@ -1231,13 +1260,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> flap</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          uvular   trill" name="uvular trill">
+<div class="phoneme-item card consonant    uvular       trill  " name="uvular trill">
   <!-- <h3 class="name">uvular trill</h3> -->
   <p class="symbol">ʀ</p>
-  <p class="sonority">5.83</p>
+  <p class="sonority">5.44</p>
   <p class="name">uvular trill</p>
   
       <!-- <p class="aspiration"></p>
@@ -1247,13 +1276,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> trill</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          palatal   approximant" name="palatal approximant">
+<div class="phoneme-item card consonant    palatal       approximant  " name="palatal approximant">
   <!-- <h3 class="name">palatal approximant</h3> -->
   <p class="symbol">j</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">palatal approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1263,13 +1292,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          labiovelar   approximant" name="labiovelar approximant">
+<div class="phoneme-item card consonant    labiovelar       approximant  " name="labiovelar approximant">
   <!-- <h3 class="name">labiovelar approximant</h3> -->
   <p class="symbol">w</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">labiovelar approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1279,13 +1308,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          labiodental   approximant" name="labiodental approximant">
+<div class="phoneme-item card consonant    labiodental       approximant  " name="labiodental approximant">
   <!-- <h3 class="name">labiodental approximant</h3> -->
   <p class="symbol">ʋ</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">labiodental approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1295,13 +1324,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant palatalised         labiodental   approximant" name="palatalised labiodental approximant">
+<div class="phoneme-item card consonant palatalised    labiodental      approximant  " name="palatalised labiodental approximant">
   <!-- <h3 class="name">palatalised labiodental approximant</h3> -->
   <p class="symbol">ʋʲ</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">palatalised labiodental approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1311,13 +1340,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          labial-palatal   approximant" name="labial-palatal approximant">
+<div class="phoneme-item card consonant    labial-palatal       approximant  " name="labial-palatal approximant">
   <!-- <h3 class="name">labial-palatal approximant</h3> -->
   <p class="symbol">ɥ</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">labial-palatal approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1327,13 +1356,13 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card consonant          velar   approximant" name="velar approximant">
+<div class="phoneme-item card consonant    velar       approximant  " name="velar approximant">
   <!-- <h3 class="name">velar approximant</h3> -->
   <p class="symbol">ɰ</p>
-  <p class="sonority">5.88</p>
+  <p class="sonority">6.02</p>
   <p class="name">velar approximant</p>
   
       <!-- <p class="aspiration"></p>
@@ -1343,232 +1372,221 @@ <h5>Try dragging them around!</h5>
       <p class="manner"> approximant</p> -->
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      high  unrounded  " name="high front unrounded vowel">
+<div class="phoneme-item card vowel     front unrounded       high" name="high front unrounded vowel">
   <!-- <h3 class="name">high front unrounded vowel</h3> -->
   <p class="symbol">i</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">high front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel near- near-   front      high  unrounded " name="near-high near-front unrounded vowel">
+<div class="phoneme-item card vowel near- near-    front unrounded       high" name="near-high near-front unrounded vowel">
   <!-- <h3 class="name">near-high near-front unrounded vowel</h3> -->
   <p class="symbol">ɪ</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">near-high near-front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   central      high  unrounded  " name="high central unrounded vowel">
+<div class="phoneme-item card vowel     central unrounded       high" name="high central unrounded vowel">
   <!-- <h3 class="name">high central unrounded vowel</h3> -->
   <p class="symbol">ɨ</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">high central unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   back      high  rounded  " name="high back rounded vowel">
+<div class="phoneme-item card vowel     back rounded       high" name="high back rounded vowel">
   <!-- <h3 class="name">high back rounded vowel</h3> -->
   <p class="symbol">u</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">high back rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel near- near-   back      high  rounded " name="near-high near-back rounded vowel">
+<div class="phoneme-item card vowel near- near-    back rounded       high" name="near-high near-back rounded vowel">
   <!-- <h3 class="name">near-high near-back rounded vowel</h3> -->
   <p class="symbol">ʊ</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">near-high near-back rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      high-mid  unrounded  " name="high-mid front unrounded vowel">
+<div class="phoneme-item card vowel     front unrounded       high-mid" name="high-mid front unrounded vowel">
   <!-- <h3 class="name">high-mid front unrounded vowel</h3> -->
   <p class="symbol">e</p>
-  <p class="sonority">21.02</p>
+  <p class="sonority">11.13</p>
   <p class="name">high-mid front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      high-mid  unrounded  nasal" name="high-mid front unrounded nasal vowel">
+<div class="phoneme-item card vowel     front unrounded     nasal  high-mid" name="high-mid front unrounded nasal vowel">
   <!-- <h3 class="name">high-mid front unrounded nasal vowel</h3> -->
   <p class="symbol">ẽ</p>
-  <p class="sonority">21.22</p>
+  <p class="sonority">11.55</p>
   <p class="name">high-mid front unrounded nasal vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      low-mid  unrounded  " name="low-mid front unrounded vowel">
+<div class="phoneme-item card vowel     front unrounded       low-mid" name="low-mid front unrounded vowel">
   <!-- <h3 class="name">low-mid front unrounded vowel</h3> -->
   <p class="symbol">ɛ</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.03</p>
   <p class="name">low-mid front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   back      high-mid  rounded  " name="high-mid back rounded vowel">
+<div class="phoneme-item card vowel     back rounded       high-mid" name="high-mid back rounded vowel">
   <!-- <h3 class="name">high-mid back rounded vowel</h3> -->
   <p class="symbol">o</p>
-  <p class="sonority">21.02</p>
+  <p class="sonority">11.13</p>
   <p class="name">high-mid back rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   back      low-mid  rounded  " name="low-mid back rounded vowel">
+<div class="phoneme-item card vowel     back rounded       low-mid" name="low-mid back rounded vowel">
   <!-- <h3 class="name">low-mid back rounded vowel</h3> -->
   <p class="symbol">ɔ</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.03</p>
   <p class="name">low-mid back rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   back      low-mid  unrounded  " name="low-mid back unrounded vowel">
+<div class="phoneme-item card vowel     back unrounded       low-mid" name="low-mid back unrounded vowel">
   <!-- <h3 class="name">low-mid back unrounded vowel</h3> -->
   <p class="symbol">ʌ</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.03</p>
   <p class="name">low-mid back unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      low  unrounded  " name="low front unrounded vowel">
+<div class="phoneme-item card vowel     front unrounded       low" name="low front unrounded vowel">
   <!-- <h3 class="name">low front unrounded vowel</h3> -->
   <p class="symbol">a</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.84</p>
   <p class="name">low front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel near-   front      low  unrounded " name="near-low front unrounded vowel">
+<div class="phoneme-item card vowel near-    front unrounded       low" name="near-low front unrounded vowel">
   <!-- <h3 class="name">near-low front unrounded vowel</h3> -->
   <p class="symbol">æ</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.84</p>
   <p class="name">near-low front unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      high  rounded  " name="high front rounded vowel">
+<div class="phoneme-item card vowel     front rounded       high" name="high front rounded vowel">
   <!-- <h3 class="name">high front rounded vowel</h3> -->
   <p class="symbol">y</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">high front rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel near- near-   front      high  rounded " name="near-high near-front rounded vowel">
+<div class="phoneme-item card vowel near- near-    front rounded       high" name="near-high near-front rounded vowel">
   <!-- <h3 class="name">near-high near-front rounded vowel</h3> -->
   <p class="symbol">ʏ</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">near-high near-front rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      high-mid  rounded  " name="high-mid front rounded vowel">
+<div class="phoneme-item card vowel     front rounded       high-mid" name="high-mid front rounded vowel">
   <!-- <h3 class="name">high-mid front rounded vowel</h3> -->
   <p class="symbol">ø</p>
-  <p class="sonority">21.02</p>
+  <p class="sonority">11.13</p>
   <p class="name">high-mid front rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   front      low-mid  rounded  " name="low-mid front rounded vowel">
+<div class="phoneme-item card vowel     front rounded       low-mid" name="low-mid front rounded vowel">
   <!-- <h3 class="name">low-mid front rounded vowel</h3> -->
   <p class="symbol">œ</p>
-  <p class="sonority">21.01</p>
+  <p class="sonority">13.03</p>
   <p class="name">low-mid front rounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   central      mid  unrounded  " name="mid central unrounded vowel">
+<div class="phoneme-item card vowel     central unrounded       mid" name="mid central unrounded vowel">
   <!-- <h3 class="name">mid central unrounded vowel</h3> -->
   <p class="symbol">ə</p>
-  <p class="sonority">21.02</p>
+  <p class="sonority">12.14</p>
   <p class="name">mid central unrounded vowel</p>
   
   
 </div>
-    
-    <!-- whatever we wish to display on the phoneme -->
+        
+        <!-- whatever we wish to display on the phoneme -->
 
-<div class="phoneme-item card vowel   back      high  unrounded  " name="high back unrounded vowel">
+<div class="phoneme-item card vowel     back unrounded       high" name="high back unrounded vowel">
   <!-- <h3 class="name">high back unrounded vowel</h3> -->
   <p class="symbol">ɯ</p>
-  <p class="sonority">21.03</p>
+  <p class="sonority">9.96</p>
   <p class="name">high back unrounded vowel</p>
   
   
 </div>
-    
-  </div>
+        
+    </div>
 
 
 </body>
 
-<!-- CDN -->
-<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
-<script src="https://rawcdn.githack.com/metafizzy/isotope-packery/0b8522ea7d10e39d084d028da8a81c6f126d6bce/packery-mode.pkgd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
-
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-
-
 <!--LOCAL-->
 <link href="ipatope.css" rel="stylesheet" type="text/css">
 <script src="ipatope.js"></script>
diff --git a/ipatope.css b/ipatope.css
index 3ebdb7b..aae8d67 100644
--- a/ipatope.css
+++ b/ipatope.css
@@ -5,6 +5,9 @@ body {
   margin: 1%;
 }
 
+.hidden {
+    display: none;
+}
 
 /* ---- button ---- */
 
@@ -18,11 +21,11 @@ body {
   cursor: pointer;
 }
 
-.button-group > .button:hover {
+/* .button-group > .button:hover, .card:hover {
   background-color: #8CF;
   text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
   color: #222;
-}
+} */
 
 .button-group > .button:active {
   background-color: #28F;
@@ -101,6 +104,8 @@ body {
   padding: 10px;
   background: #888;
   color: #262524;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: lighter;
 }
 
 .phoneme-item > * {
@@ -114,7 +119,7 @@ body {
 .phoneme-item.is-dragging,
 /* Packery adds class while transitioning to drop position */
 .phoneme-item.is-positioning-post-drag {
-  z-index: 2; /* keep dragged item on top */
+  z-index: 100; /* keep dragged item on top */
   outline: 3px dashed #444;
   box-shadow: 0 40px 60px rgba(0,0,0,0.45), 0 20px 20px rgba(0,0,0,0.22);
 }
@@ -127,57 +132,27 @@ body {
 }
 
 
-
 .phoneme-item .name {
   position: absolute;
 
-  left: 10px;
-  top: 60px;
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-  font-weight: normal;
-}
-
-.phoneme-item .voice {
-  position: absolute;
-
-  left: 10px;
-  top: 60px;
+  left: 5%;
+  top: 50%;
+  margin-right: 10px;
   text-transform: none;
   letter-spacing: 0;
   font-size: 12px;
-  font-weight: normal;
-}
-
-.phoneme-item .place {
-  position: absolute;
-
-  left: 10px;
-  top: 75px;
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-  font-weight: normal;
-}
-
-.phoneme-item .manner {
-  position: absolute;
-
-  left: 10px;
-  top: 90px;
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-  font-weight: normal;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: lighter;
 }
 
 .phoneme-item .symbol {
   position: absolute;
-  left: 10px;
-  top: 0px;
+  left: 10%;
+  top: .1%;
   font-size: 42px;
   font-weight: bold;
+  font-family: sans-serif;
+
   color: white;
 }
 
diff --git a/ipatope.js b/ipatope.js
index d95faaa..e30dc00 100644
--- a/ipatope.js
+++ b/ipatope.js
@@ -1,5 +1,3 @@
-// external js: isotope.pkgd.js
-
 
 // init Isotope
 var $grid = $('.grid').isotope({
@@ -91,6 +89,341 @@ $('.sorters').on('click', '.button', function() {
 });
 
 
+
+
+    
+        
+            $('.button[data-filter~=".voiced,.vowel"]').hover(function(e) {
+                $('.phoneme-item[class~="voiced"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="voiced"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".voiced,.vowel"]').hover(function(e) {
+                $('.phoneme-item[class~="vowel"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="vowel"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".voiceless"]').hover(function(e) {
+                $('.phoneme-item[class~="voiceless"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="voiceless"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+
+    
+        
+            $('.button[data-filter~=".glottal"]').hover(function(e) {
+                $('.phoneme-item[class~="glottal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="glottal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".velar"]').hover(function(e) {
+                $('.phoneme-item[class~="velar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="velar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".uvular"]').hover(function(e) {
+                $('.phoneme-item[class~="uvular"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="uvular"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar"]').hover(function(e) {
+                $('.phoneme-item[class~="alveolar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="alveolar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar"]').hover(function(e) {
+                $('.phoneme-item[class~="postalveolar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="postalveolar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar"]').hover(function(e) {
+                $('.phoneme-item[class~="alveolo-palatal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="alveolo-palatal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".alveolar,.postalveolar,.alveolo-palatal,.palato-alveolar"]').hover(function(e) {
+                $('.phoneme-item[class~="palato-alveolar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="palato-alveolar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="palatal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="palatal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="palato-alveolar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="palato-alveolar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="alveolo-palatar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="alveolo-palatar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="palatalised"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="palatalised"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".palatal,.palato-alveolar,.alveolo-palatar,.palatalised,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="labial-palatal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labial-palatal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="labial"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labial"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="bilabial"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="bilabial"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="labiodental"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labiodental"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="labiovelar"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labiovelar"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".labial,.bilabial,.labiodental,.labiovelar,.labial-palatal"]').hover(function(e) {
+                $('.phoneme-item[class~="labial-palatal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labial-palatal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".dental,.labiodental"]').hover(function(e) {
+                $('.phoneme-item[class~="dental"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="dental"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".dental,.labiodental"]').hover(function(e) {
+                $('.phoneme-item[class~="labiodental"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="labiodental"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".nasal"]').hover(function(e) {
+                $('.phoneme-item[class~="nasal"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="nasal"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+
+    
+        
+            $('.button[data-filter~=".stop,.plosive"]').hover(function(e) {
+                $('.phoneme-item[class~="stop"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="stop"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".stop,.plosive"]').hover(function(e) {
+                $('.phoneme-item[class~="plosive"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="plosive"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".trill"]').hover(function(e) {
+                $('.phoneme-item[class~="trill"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="trill"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".tap,.flap"]').hover(function(e) {
+                $('.phoneme-item[class~="tap"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="tap"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+            $('.button[data-filter~=".tap,.flap"]').hover(function(e) {
+                $('.phoneme-item[class~="flap"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="flap"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".lateral"]').hover(function(e) {
+                $('.phoneme-item[class~="lateral"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="lateral"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".fricative"]').hover(function(e) {
+                $('.phoneme-item[class~="fricative"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="fricative"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".affricate"]').hover(function(e) {
+                $('.phoneme-item[class~="affricate"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="affricate"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".sibilant"]').hover(function(e) {
+                $('.phoneme-item[class~="sibilant"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="sibilant"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".approximant"]').hover(function(e) {
+                $('.phoneme-item[class~="approximant"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="approximant"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+        
+            $('.button[data-filter~=".vowel"]').hover(function(e) {
+                $('.phoneme-item[class~="vowel"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="vowel"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+
+    
+        
+            $('.button[data-filter~="sonGreaterThan5"]').hover(function(e) {
+                $('.phoneme-item[class~="onGreaterThan5"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="onGreaterThan5"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        
+    
+
+
+
+
+// packery --------------------
+
 $('.ui-group').packery({
   itemSelector: '.ui-group-item',
   gutter: 1,
@@ -141,6 +474,7 @@ function concatArr(arr) {
 }
 
 
+$('.tip').delay(5000).fadeOut('slow');
 
 // --------------- URL __hash__
 // function getHashFilter() {
@@ -185,4 +519,4 @@ function concatArr(arr) {
 //   $(window).on( 'hashchange', onHashchange );
 //   // trigger event handler to init Isotope
 //   onHashchange();
-// });
+// });
\ No newline at end of file
diff --git a/ipatope.py b/ipatope.py
index d52b249..a2e1145 100755
--- a/ipatope.py
+++ b/ipatope.py
@@ -10,7 +10,7 @@
 jinja_env = Environment(loader=FileSystemLoader('templates'),
                         # extensions=['jinja2_markdown.MarkdownExtension'],
                         undefined=DebugUndefined)
-template = jinja_env.get_template('phonemes.template.html')
+
 
 
 class AttrObject:
@@ -37,5 +37,10 @@ def __init__(self, **kwargs):
     sorters=sorters,
 )
 
+template = jinja_env.get_template('phonemes.template.html')
 with Path('index.html').open('w') as out:
     out.write(template.render(**data))
+
+code = jinja_env.get_template('ipatope.template.js')
+with Path('ipatope.js').open('w') as out:
+    out.write(code.render(**data))
diff --git a/phonemes b/phonemes
index 36e4e36..c0019e7 160000
--- a/phonemes
+++ b/phonemes
@@ -1 +1 @@
-Subproject commit 36e4e3645e3180dcccbce732d372d58915be352a
+Subproject commit c0019e772d1ac6d9ff2d2f7445913e351685e3c0
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..d26e45e
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,3 @@
+parsimonious
+Jinja2
+PyYAML
diff --git a/templates/filter.template.html b/templates/filter.template.html
index 2981cfb..3f91fa8 100644
--- a/templates/filter.template.html
+++ b/templates/filter.template.html
@@ -1,6 +1,5 @@
 <button type="button" class="ui-group-item btn btn-sm button" data-filter="{{ filter.fn }}">
     <!-- <input type="checkbox" class="checkbox btn btn-sm" id="{{ filter.fn }}" name="{{filter.text}}" data-filter="{{ filter.fn }}">
     <label class="form-check-label" for="{{ filter.fn }}"> -->
-        {{filter.text}}
-    <!-- </label> -->
+    {{filter.text}}
 </button>
diff --git a/templates/ipatope.template.js b/templates/ipatope.template.js
new file mode 100644
index 0000000..28facf5
--- /dev/null
+++ b/templates/ipatope.template.js
@@ -0,0 +1,206 @@
+
+// init Isotope
+var $grid = $('.grid').isotope({
+  itemSelector: '.phoneme-item',
+  // layoutMode: 'fitRows',
+
+  layoutMode: 'packery',
+  packery: {
+    gutter: 2
+  },
+  stamp: '.stamp',
+
+  getSortData: {
+    name: '[name]',
+    symbol: '.symbol',
+    number: '.number parseInt',
+    sonority: '.sonority parseFloat',
+    category: '[data-category]',
+    weight: function(itemElem) {
+      var weight = $(itemElem).find('.weight').text();
+      return parseFloat(weight.replace(/[\(\)]/g, ''));
+    }
+  }
+});
+
+// filter functions
+var filterFns = {
+    // show if number is greater than 50
+    numberGreaterThan50: function() {
+        var number = $(this).find('.number').text();
+        return parseInt(number, 10) > 50;
+    },
+    // show if sonority is greater than 3
+    sonGreaterThan5: function() {
+        var number = $(this).find('.sonority').text();
+        return parseFloat(number, 10) > 5;
+    },
+    // show if name ends with -ium
+    ium: function() {
+        var name = $(this).find('.name').text();
+        return name.match(/ium$/);
+    }
+};
+
+filters = {}
+// bind filter button click
+$('.filters').on('click', '.button', function(event) {
+    // $checkbox = $(event.currentTarget);
+    // $button = $checkbox.parent('.button');
+    $button = $(event.currentTarget);
+    // get group key
+    var $buttonGroup = $button.parents('.button-group');
+    var filterGroup = $buttonGroup.attr('data-filter-group');
+    // set filter for group
+    var filterValue = filters[filterGroup] = $button.attr('data-filter');
+    // try to match function
+    filters[filterGroup] = filterFns[filterValue] || filters[filterGroup];
+    // combine filters
+    if (filterValue in filterFns) {
+        console.log(filterFns, filterValue);
+        $grid.isotope({
+            filter: filterFns[filterValue]
+        });
+    } else {
+        $grid.isotope({
+            filter: concatValues(filters)
+        });
+    }
+    // set filter for Isotope
+
+});
+
+// change is-checked class on buttons
+$('.button-group').each(function(i, buttonGroup) {
+  var $buttonGroup = $(buttonGroup);
+  $buttonGroup.on('click', '.button', function(event) {
+    $buttonGroup.find('.is-checked').removeClass('is-checked');
+    var $button = $(event.currentTarget);
+    $button.addClass('is-checked');
+  });
+});
+
+// bind sort button click
+$('.sorters').on('click', '.button', function() {
+  var sortByValue = $(this).attr('data-sort-by');
+  $grid.isotope({
+    sortBy: sortByValue
+  });
+});
+
+
+
+{% for group, filters in filtergroups.items() %}
+    {% for filter in filters %}
+        {% for target in filter.fn.split(',') %}
+            $('.button[data-filter~="{{ filter.fn }}"]').hover(function(e) {
+                $('.phoneme-item[class~="{{ target[1:] }}"]').css('outline', '2.5px dashed #444');
+                $(this).css('outline', '1px dashed #444');
+            }, function(e) {
+                $('.phoneme-item[class~="{{ target[1:] }}"]').css('outline', '');
+                $(this).css('outline', '');
+            });
+        {% endfor %}
+    {% endfor %}
+{% endfor %}
+
+
+
+// packery --------------------
+
+$('.ui-group').packery({
+  itemSelector: '.ui-group-item',
+  gutter: 1,
+  percentPosition: true
+})
+
+// collection of Draggabillies
+var draggies = [];
+var isDrag = false;
+
+// make all grid-items draggable
+$grid.find('.phoneme-item').each(function(i, gridItem) {
+  var draggie = new Draggabilly(gridItem);
+  draggies.push(draggie);
+  // bind drag events to Packery
+  // $grid.packery( 'bindDraggabillyEvents', draggie );
+});
+
+
+// utils ----------------
+
+let f = (a, b) => [].concat(...a.map(a => b.map(b => [].concat(a, b))));
+let cartesian = (a, b, ...c) => b ? cartesian(f(a, b), ...c) : a;
+
+
+// flatten object by concatting values, making sure to apply demorgans laws ','
+function concatValues(obj) {
+
+  value = "";
+  for (var prop in obj) {
+    var parts = obj[prop].split(",");
+    var vals = value.split(",");
+    var newvals = cartesian(parts, vals);
+
+    value = newvals.map(x => concatArr(x)).join(',');
+  }
+
+  return value;
+}
+
+// flatten object by concatting values
+function concatArr(arr) {
+  var value = '';
+  for (var v in arr) {
+    value += arr[v];
+  }
+  return value;
+}
+
+
+$('.tip').delay(5000).fadeOut('slow');
+
+// --------------- URL __hash__
+// function getHashFilter() {
+//   var hash = location.hash;
+//   // get filter=filterName
+//   var matches = location.hash.match( /filter=([^&]+)/i );
+//   var hashFilter = matches && matches[1];
+//   return hashFilter && decodeURIComponent( hashFilter );
+// }
+//
+// $( function() {
+//
+//   var $grid = $('.isotope');
+//
+//   // bind filter button click
+//   var $filters = $('.filters').on( 'click', '.button', function() {
+//     var filterAttr = $( this ).attr('data-filter');
+//     // set filter in hash
+//     location.hash = 'filter=' + encodeURIComponent( filterAttr );
+//   });
+//
+//   var isIsotopeInit = false;
+//
+//   function onHashchange() {
+//     var hashFilter = getHashFilter();
+//     if ( !hashFilter && isIsotopeInit ) {
+//       return;
+//     }
+//     isIsotopeInit = true;
+//     // filter isotope
+//     $grid.isotope({
+//       itemSelector: '.phoneme-item',
+//       filter: hashFilter
+//     });
+//     // set selected class on button
+//     if ( hashFilter ) {
+//       $filters.find('.is-checked').removeClass('is-checked');
+//       $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
+//     }
+//   }
+//
+//   $(window).on( 'hashchange', onHashchange );
+//   // trigger event handler to init Isotope
+//   onHashchange();
+// });
diff --git a/templates/phonemes.template.html b/templates/phonemes.template.html
index 489cb24..42460e5 100644
--- a/templates/phonemes.template.html
+++ b/templates/phonemes.template.html
@@ -3,90 +3,111 @@
 <html>
 
 <head>
-  <title>
-    IPAtope
-  </title>
-</head>
+    <title>
+        IPAtope
+    </title>
 
-<body>
-  <h1>IPAtope</h1>
+    <!-- CDN -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
+    <script src="https://rawcdn.githack.com/metafizzy/isotope-packery/0b8522ea7d10e39d084d028da8a81c6f126d6bce/packery-mode.pkgd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
 
-  <h4>Filter</h4>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin' rel='stylesheet' type='text/css' />
 
-  <div class="filters">
+</head>
 
-    {% for group, filters in filtergroups.items() %}
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> {{group}} </label></div>
-      <div class="button-group" data-filter-group="{{ group }}">
-        <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
-        {% for filter in filters %}
-        {% include "filter.template.html" with context %}
+<body>
+    <h1>IPAtope</h1>
+
+    <h4>Filter</h4>
+
+    <div class="filters">
+
+        {% for group, filters in filtergroups.items() %}
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> {{group}} </label></div>
+            <div class="button-group" data-filter-group="{{ group }}">
+                <button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
+                {% for filter in filters %}
+                {% include "filter.template.html" with context %}
+                {% endfor %}
+            </div>
+        </div>
         {% endfor %}
-      </div>
-    </div>
-    {% endfor %}
-
-  </div>
 
-  <h4>Sort</h4>
+    </div>
 
-  <div class="sorters">
-    <div class="ui-group">
-      <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> sort by </label></div>
-      <div class="button-group" data-filter-group="{{ group }}">
-        <button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
-        {% for sorter in sorters %}
-        {% include "sorter.template.html" with context %}
-        {% endfor %}
-      </div>
+    <h4>Sort</h4>
+
+    <div class="sorters">
+        <div class="ui-group">
+            <div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> sort by </label></div>
+            <div class="button-group" data-filter-group="{{ group }}">
+                <button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
+                {% for sorter in sorters %}
+                {% include "sorter.template.html" with context %}
+                {% endfor %}
+            </div>
+        </div>
     </div>
-  </div>
 
-  <!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
+    <!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
         <button class="button" data-sort-by="name">name</button>
         <button class="button" data-sort-by="symbol">symbol</button>
         <button class="button" data-sort-by="sonority">sonority</button>
         <button class="button" data-sort-by="category">category</button>
     </div> -->
 
-  <h4>Controls</h4>
-  <div class="ui-group">
-    <div class="controls" style="margin: 5px;">
-      <button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope('shuffle');">
-        shuffle
-      </button>
-      <button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
-        clear all
-      </button>
+    <h4>Controls</h4>
+    <div class="ui-group-bootstrap">
+        <div class="controls btn-toolbar" style="margin: 5px;" role="toolbar" aria-label="Toolbar with button groups">
+            <div class="btn-group mr-2" role="group" aria-label="">
+                <button class="ui-group-item button btn btn-secondary btn-sm" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
+                    reorder
+                </button>
+            </div>
+            <div class="btn-group mr-2" role="group" aria-label="">
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button" onclick="$grid.isotope('shuffle');">
+                    shuffle
+                </button>
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button" onclick="$( '.phoneme-item' ).each(function( index ) {
+                                $(this).css({
+                                    left : Math.random() * ($(window).width() - $(this).width() - 100),
+                                    top : Math.random() * (500 - $(this).height()) - 200,
+                                });
+                              });">
+                    scramble
+                </button>
+            </div>
+            <div class="btn-group mr-2" role="group" aria-label="">
+                {% for attrtohide in 'name symbol sonority'.split() %}
+                <button class="ui-group-item btn btn-secondary btn-sm" type="button" name="button"
+                        onclick="$('.phoneme-item>.{{attrtohide}}').toggleClass('hidden');">
+                    toggle {{ attrtohide }}
+                </button>
+                {% endfor %}
+            </div>
+        </div>
     </div>
-  </div>
-  <br>
-  <h5>Try dragging them around!</h5>
-  <br>
+    <br>
+    <h5 class="tip">Try dragging them around!</h5>
+    <br>
 
-  <div class="grid">
-    {% for phoneme in phonemes %}
-    {% include "phoneme.template.html" with context %}
-    {% endfor %}
-  </div>
+    <div class="grid">
+        {% for phoneme in phonemes %}
+        {% include "phoneme.template.html" with context %}
+        {% endfor %}
+    </div>
 
 
 </body>
 
-<!-- CDN -->
-<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
-<script src="https://rawcdn.githack.com/metafizzy/isotope-packery/0b8522ea7d10e39d084d028da8a81c6f126d6bce/packery-mode.pkgd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
-
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-
-
 <!--LOCAL-->
 <link href="ipatope.css" rel="stylesheet" type="text/css">
 <script src="ipatope.js"></script>
 
-</html>
\ No newline at end of file
+</html>