From 6c6b5bec139be4c2e9f6dce1b613b7336b29296b Mon Sep 17 00:00:00 2001
From: Marcy Sutton <marcy@substantial.com>
Date: Sat, 11 Apr 2015 15:53:10 -0700
Subject: [PATCH 1/2] fix(): switch focus on keyboard, use .md-focused

Updates button, checkbox and radio to only show focus on keyboard interaction using the .md-focused class

Closes #1336
---
 src/components/button/button.js               |  4 +--
 src/components/button/button.scss             |  7 ++--
 src/components/button/button.spec.js          |  6 ++--
 src/components/checkbox/checkbox-theme.scss   | 12 +++++--
 src/components/checkbox/checkbox.js           | 23 +++++++++---
 src/components/checkbox/checkbox.scss         | 35 +++++++++++++++---
 src/components/checkbox/checkbox.spec.js      | 25 +++++++++++++
 src/components/list/list-theme.scss           |  1 -
 .../radioButton/radio-button-theme.scss       | 12 +++++--
 src/components/radioButton/radio-button.scss  | 34 +++++++++++++-----
 src/components/radioButton/radioButton.js     | 25 ++++++++++---
 .../radioButton/radioButton.spec.js           | 36 +++++++++++++++++++
 .../switch/demoBasicUsage/index.html          |  9 +++--
 .../switch/demoBasicUsage/script.js           |  9 ++---
 src/components/switch/switch-theme.scss       | 17 ++++-----
 src/components/switch/switch.scss             | 30 ++++++++++++++++
 16 files changed, 233 insertions(+), 52 deletions(-)

diff --git a/src/components/button/button.js b/src/components/button/button.js
index 903bac90099..0f1c0712e10 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -106,9 +106,9 @@ function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria, $timeout) {
         }, 100);
       })
       .on('focus', function() {
-        if(scope.mouseActive === false) element.addClass('focus');
+        if(scope.mouseActive === false) { element.addClass('md-focused'); }
       })
-      .on('blur', function() { element.removeClass('focus'); });
+      .on('blur', function() { element.removeClass('md-focused'); });
   }
 
 }
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index e720f24d04a..22efb497386 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -150,7 +150,7 @@ $icon-button-margin: 0.600rem !default;
   &:not([disabled]) {
     &.md-raised,
     &.md-fab {
-      &:focus {
+      &.md-focused {
         @extend .md-shadow-bottom-z-1;
       }
       &:active {
@@ -165,7 +165,7 @@ $icon-button-margin: 0.600rem !default;
   .md-button.md-fab-top-right {
     transform: translate3d(0, $button-fab-toast-offset, 0);
     &:not([disabled]) {
-      &.focus,
+      &.md-focused,
       &:hover {
         transform: translate3d(0, $button-fab-toast-offset - 1, 0);
       }
@@ -177,7 +177,7 @@ $icon-button-margin: 0.600rem !default;
   .md-button.md-fab-bottom-right {
     transform: translate3d(0, -$button-fab-toast-offset, 0);
     &:not([disabled]) {
-      &.focus,
+      &.md-focused,
       &:hover {
         transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
       }
@@ -185,7 +185,6 @@ $icon-button-margin: 0.600rem !default;
   }
 }
 
-
 .md-button-group {
   display: flex;
   flex: 1;
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
index 5f81b9e4742..7689ea76960 100644
--- a/src/components/button/button.spec.js
+++ b/src/components/button/button.spec.js
@@ -38,16 +38,16 @@ describe('md-button', function() {
     var button = $compile('<md-button>')($rootScope.$new());
     $rootScope.$apply();
     button.triggerHandler('mousedown');
-    expect(button[0]).not.toHaveClass('focus');
+    expect(button[0]).not.toHaveClass('md-focused');
   }));
 
   it('should set focus state on focus and remove on blur', inject(function ($compile, $rootScope){
     var button = $compile('<md-button>')($rootScope.$new());
     $rootScope.$apply();
     button.triggerHandler('focus');
-    expect(button[0]).toHaveClass('focus');
+    expect(button[0]).toHaveClass('md-focused');
     button.triggerHandler('blur');
-    expect(button[0]).not.toHaveClass('focus');
+    expect(button[0]).not.toHaveClass('md-focused');
   }));
 
   describe('with href or ng-href', function() {
diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss
index 3325e19c11c..0d650f8c611 100644
--- a/src/components/checkbox/checkbox-theme.scss
+++ b/src/components/checkbox/checkbox-theme.scss
@@ -6,6 +6,9 @@ md-checkbox.md-THEME_NAME-theme {
   &.md-checked .md-ripple {
     color: '{{background-600}}';
   }
+  &.md-checked.md-focused .md-container:before {
+    background-color: '{{accent-color-0.26}}';
+  }
 
   .md-icon {
     border-color: '{{foreground-2}}';
@@ -34,6 +37,10 @@ md-checkbox.md-THEME_NAME-theme {
         background-color: '{{primary-color-0.87}}';
       }
 
+      &.md-checked.md-focused .md-container:before {
+        background-color: '{{primary-color-0.26}}';
+      }
+
       &.md-checked .md-icon:after {
         border-color: '{{background-200}}';
       }
@@ -43,14 +50,15 @@ md-checkbox.md-THEME_NAME-theme {
       .md-ripple {
         color: '{{warn-600}}';
       }
-
       .md-icon {
         border-color: '{{foreground-2}}';
       }
       &.md-checked .md-icon {
         background-color: '{{warn-color-0.87}}';
       }
-
+      &.md-checked.md-focused:not([disabled]) .md-container:before {
+        background-color: '{{warn-color-0.26}}';
+      }
       &.md-checked .md-icon:after {
         border-color: '{{background-200}}';
       }
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
index 0a256df471f..cf70aa0bbe8 100644
--- a/src/components/checkbox/checkbox.js
+++ b/src/components/checkbox/checkbox.js
@@ -49,7 +49,7 @@ angular
  * </hljs>
  *
  */
-function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil) {
+function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
   inputDirective = inputDirective[0];
   var CHECKED_CSS = 'md-checked';
 
@@ -96,13 +96,28 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
         0: {}
       }, attr, [ngModelCtrl]);
 
-      element.on('click', listener)
-        .on('keypress', keypressHandler);
+      scope.mouseActive = false;
+      element
+        .on('click', listener)
+        .on('keypress', keypressHandler)
+        .on('mousedown', function() {
+          scope.mouseActive = true;
+          $timeout(function(){
+            scope.mouseActive = false;
+          }, 100);
+        })
+        .on('focus', function() {
+          if(scope.mouseActive === false) { element.addClass('md-focused'); }
+        })
+        .on('blur', function() { element.removeClass('md-focused'); });
+
       ngModelCtrl.$render = render;
 
       function keypressHandler(ev) {
-        if(ev.which === $mdConstant.KEY_CODE.SPACE || ev.which === $mdConstant.KEY_CODE.ENTER) {
+        var keyCode = ev.which || ev.keyCode;
+        if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
           ev.preventDefault();
+          if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
           listener(ev);
         }
       }
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index dc120583e2b..95533488a80 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -16,6 +16,21 @@ md-checkbox {
     box-sizing: border-box;
   }
 
+  &.md-focused:not([disabled]) {
+    .md-container:before {
+      left: -8px;
+      top: -8px;
+      right: -8px;
+      bottom: -8px;
+    }
+
+    &:not(.md-checked) {
+      .md-container:before {
+        background-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
   .md-container {
     position: relative;
     top: 4px;
@@ -23,6 +38,21 @@ md-checkbox {
     width: $checkbox-width;
     height: $checkbox-height;
 
+    &:before {
+      background-color: transparent;
+      border-radius: 50%;
+      content: '';
+      position: absolute;
+      display: block;
+      height: auto;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.5s;
+      width: auto;
+    }
+
     &:after {
       content: '';
       position: absolute;
@@ -65,11 +95,6 @@ md-checkbox {
     cursor: no-drop;
   }
 
-  // focus
-  &:focus .md-label:not(:empty) {
-    border-color: black;
-  }
-
 
   &.md-checked .md-icon:after {
     transform: rotate(45deg);
diff --git a/src/components/checkbox/checkbox.spec.js b/src/components/checkbox/checkbox.spec.js
index 964b2a7087b..b1ada47dba7 100644
--- a/src/components/checkbox/checkbox.spec.js
+++ b/src/components/checkbox/checkbox.spec.js
@@ -67,8 +67,33 @@ describe('mdCheckbox', function() {
 
     checkbox.triggerHandler('click');
     expect($rootScope.blue).toBe(true);
+  }));
 
+  it('should not set focus state on mousedown', inject(function($compile, $rootScope) {
+    var checkbox = $compile('<md-checkbox ng-model="blue">')($rootScope.$new());
+    $rootScope.$apply();
+    checkbox.triggerHandler('mousedown');
+    expect(checkbox[0]).not.toHaveClass('md-focused');
+  }));
 
+  it('should set focus state on focus and remove on blur', inject(function($compile, $rootScope) {
+    var checkbox = $compile('<md-checkbox ng-model="blue">')($rootScope.$new());
+    $rootScope.$apply();
+    checkbox.triggerHandler('focus');
+    expect(checkbox[0]).toHaveClass('md-focused');
+    checkbox.triggerHandler('blur');
+    expect(checkbox[0]).not.toHaveClass('md-focused');
+  }));
+
+  it('should set focus state on keyboard interaction after clicking', inject(function($compile, $rootScope, $mdConstant) {
+    var checkbox = $compile('<md-checkbox ng-model="blue">')($rootScope.$new());
+    $rootScope.$apply();
+    checkbox.triggerHandler('mousedown');
+    checkbox.triggerHandler({
+      type: 'keypress',
+      keyCode: $mdConstant.KEY_CODE.SPACE
+    });
+    expect(checkbox[0]).toHaveClass('md-focused');
   }));
 
   describe('ng core checkbox tests', function() {
diff --git a/src/components/list/list-theme.scss b/src/components/list/list-theme.scss
index 51b5a03bf02..1966edfaa1f 100644
--- a/src/components/list/list-theme.scss
+++ b/src/components/list/list-theme.scss
@@ -9,7 +9,6 @@ md-list.md-THEME_NAME-theme {
     }
   }
   .md-proxy-focus.md-focused div.md-no-style,
-  .md-secondary:focus,
   .md-no-style:focus {
     background-color: '{{background-100}}';
   }
diff --git a/src/components/radioButton/radio-button-theme.scss b/src/components/radioButton/radio-button-theme.scss
index bad248a224f..be008caa96a 100644
--- a/src/components/radioButton/radio-button-theme.scss
+++ b/src/components/radioButton/radio-button-theme.scss
@@ -82,6 +82,14 @@ md-radio-button.md-THEME_NAME-theme {
 }
 
 
-md-radio-group.md-THEME_NAME-theme:focus:not(:empty) {
-  border-color: '{{foreground-1}}';
+md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) {
+  .md-checked .md-container:before {
+    background-color: '{{accent-color-0.26}}';
+  }
+  .md-checked:not([disabled]).md-primary .md-container:before {
+    background-color: '{{primary-color-0.26}}';
+  }
+  .md-checked.md-primary .md-container:before {
+    background-color: '{{warn-color-0.26}}';
+  }
 }
diff --git a/src/components/radioButton/radio-button.scss b/src/components/radioButton/radio-button.scss
index a21704a2e22..bba48e95cf8 100644
--- a/src/components/radioButton/radio-button.scss
+++ b/src/components/radioButton/radio-button.scss
@@ -35,6 +35,21 @@ md-radio-button,
       left: -$radio-width;
       top: -$radio-width;
     }
+
+    &:before {
+      background-color: transparent;
+      border-radius: 50%;
+      content: '';
+      position: absolute;
+      display: block;
+      height: auto;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.5s;
+      width: auto;
+    }
   }
 
 
@@ -81,14 +96,17 @@ md-radio-button,
 
 }
 md-radio-group {
-  border: 1px dotted transparent;
-  display: block;
-  outline: none;
-}
-
-
-.radioButtondemoBasicUsage  md-radio-group {
-  border: none;
+  &:focus {
+    outline: none;
+  }
+  &.md-focused {
+    .md-checked .md-container:before {
+      left: -8px;
+      top: -8px;
+      right: -8px;
+      bottom: -8px;
+    }
+  }
 }
 
 @media screen and (-ms-high-contrast: active) {
diff --git a/src/components/radioButton/radioButton.js b/src/components/radioButton/radioButton.js
index 91810bd1a80..00a7612114a 100644
--- a/src/components/radioButton/radioButton.js
+++ b/src/components/radioButton/radioButton.js
@@ -53,7 +53,7 @@ angular.module('material.components.radioButton', [
  * </hljs>
  *
  */
-function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
+function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming, $timeout) {
   RadioGroupController.prototype = createRadioGroupControllerProto();
 
   return {
@@ -68,18 +68,25 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
     var rgCtrl = ctrls[0];
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
 
+    function setFocus() {
+      if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
+    }
+
     function keydownListener(ev) {
-      switch(ev.keyCode) {
+      var keyCode = ev.which || ev.keyCode;
+      switch(keyCode) {
         case $mdConstant.KEY_CODE.LEFT_ARROW:
         case $mdConstant.KEY_CODE.UP_ARROW:
           ev.preventDefault();
           rgCtrl.selectPrevious();
+          setFocus();
           break;
 
         case $mdConstant.KEY_CODE.RIGHT_ARROW:
         case $mdConstant.KEY_CODE.DOWN_ARROW:
           ev.preventDefault();
           rgCtrl.selectNext();
+          setFocus();
           break;
 
         case $mdConstant.KEY_CODE.ENTER:
@@ -93,12 +100,22 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming) {
 
     rgCtrl.init(ngModelCtrl);
 
+    scope.mouseActive = false;
     element.attr({
               'role': 'radiogroup',
               'tabIndex': element.attr('tabindex') || '0'
             })
-            .on('keydown', keydownListener);
-
+            .on('keydown', keydownListener)
+            .on('mousedown', function(event) {
+              scope.mouseActive = true;
+              $timeout(function() {
+                scope.mouseActive = false;
+              }, 100);
+            })
+            .on('focus', function() {
+              if(scope.mouseActive === false) { rgCtrl.$element.addClass('md-focused'); }
+            })
+            .on('blur', function() { rgCtrl.$element.removeClass('md-focused'); });
   }
 
   function RadioGroupController($element) {
diff --git a/src/components/radioButton/radioButton.spec.js b/src/components/radioButton/radioButton.spec.js
index 183ebd9c34b..0cee983330c 100644
--- a/src/components/radioButton/radioButton.spec.js
+++ b/src/components/radioButton/radioButton.spec.js
@@ -112,6 +112,42 @@ describe('radioButton', function() {
     expect($rootScope.color).toEqual('green');
   }));
 
+  it('should not set focus state on mousedown', inject(function($compile, $rootScope) {
+    var element = $compile('<md-radio-group ng-model="color">' +
+                            '<md-radio-button value="blue"></md-radio-button>' +
+                            '<md-radio-button value="green"></md-radio-button>' +
+                          '</md-radio-group>')($rootScope);
+    $rootScope.$apply();
+    element.triggerHandler('mousedown');
+    expect(element[0]).not.toHaveClass('md-focused');
+  }));
+
+  it('should set focus state on focus and remove on blur', inject(function($compile, $rootScope) {
+    var element = $compile('<md-radio-group ng-model="color">' +
+                            '<md-radio-button value="blue"></md-radio-button>' +
+                            '<md-radio-button value="green"></md-radio-button>' +
+                          '</md-radio-group>')($rootScope);
+    $rootScope.$apply();
+    element.triggerHandler('focus');
+    expect(element[0]).toHaveClass('md-focused');
+    element.triggerHandler('blur');
+    expect(element[0]).not.toHaveClass('md-focused');
+  }));
+
+  it('should set focus state on keyboard interaction after clicking', inject(function($compile, $rootScope, $mdConstant) {
+    var element = $compile('<md-radio-group ng-model="color">' +
+                            '<md-radio-button value="blue"></md-radio-button>' +
+                            '<md-radio-button value="green"></md-radio-button>' +
+                          '</md-radio-group>')($rootScope);
+    $rootScope.$apply();
+    element.triggerHandler('mousedown');
+    element.triggerHandler({
+      type: 'keydown',
+      keyCode: $mdConstant.KEY_CODE.DOWN_ARROW
+    });
+    expect(element[0]).toHaveClass('md-focused');
+  }));
+
   describe('ng core radio button tests', function() {
 
     it('should noop with no model', inject(function($compile, $rootScope) {
diff --git a/src/components/switch/demoBasicUsage/index.html b/src/components/switch/demoBasicUsage/index.html
index e3c3e321517..f6229810410 100644
--- a/src/components/switch/demoBasicUsage/index.html
+++ b/src/components/switch/demoBasicUsage/index.html
@@ -15,12 +15,11 @@
     Switch (Disabled, Active)
   </md-switch>
 
-  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
+  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5">
     Switch (md-primary): No Ink
   </md-switch>
-  
-  
-  <md-switch ng-model="data.cb5" aria-label="Switch 5" ng-change="onChange(data.cb5)">
-    Switch 5 message: {{ message }}
+
+  <md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)">
+    Switch 6 message: {{ message }}
   </md-switch>
 </div>
diff --git a/src/components/switch/demoBasicUsage/script.js b/src/components/switch/demoBasicUsage/script.js
index 1e6c4405578..1ddae820000 100644
--- a/src/components/switch/demoBasicUsage/script.js
+++ b/src/components/switch/demoBasicUsage/script.js
@@ -2,10 +2,11 @@ angular.module('switchDemo1', ['ngMaterial'])
 .controller('SwitchDemoCtrl', function($scope) {
   $scope.data = {
     cb1: true,
-    cb4: true
+    cb4: true,
+    cb5: false
   };
-  
-  $scope.onChange = function(cbState){
-	$scope.message = "The switch is now: " + cbState;
+
+  $scope.onChange = function(cbState) {
+  	$scope.message = "The switch is now: " + cbState;
   };
 });
diff --git a/src/components/switch/switch-theme.scss b/src/components/switch/switch-theme.scss
index f0098526f4b..f5f3dcbf43d 100644
--- a/src/components/switch/switch-theme.scss
+++ b/src/components/switch/switch-theme.scss
@@ -13,6 +13,9 @@ md-switch.md-THEME_NAME-theme {
     .md-bar {
       background-color: '{{accent-color-0.5}}';
     }
+    &.md-focused .md-thumb:before {
+      background-color: '{{accent-color-0.26}}';
+    }
 
     &.md-primary {
       .md-thumb {
@@ -21,6 +24,9 @@ md-switch.md-THEME_NAME-theme {
       .md-bar {
         background-color: '{{primary-color-0.5}}';
       }
+      &.md-focused .md-thumb:before {
+        background-color: '{{primary-color-0.26}}';
+      }
     }
 
     &.md-warn {
@@ -30,6 +36,9 @@ md-switch.md-THEME_NAME-theme {
       .md-bar {
         background-color: '{{warn-color-0.5}}';
       }
+      &.md-focused .md-thumb:before {
+        background-color: '{{warn-color-0.26}}';
+      }
     }
   }
 
@@ -41,12 +50,4 @@ md-switch.md-THEME_NAME-theme {
       background-color: '{{foreground-4}}';
     }
   }
-
-  &:focus {
-    .md-label:not(:empty) {
-      border-color: '{{foreground-1}}';
-      border-style: dotted;
-    }
-  }
-
 }
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index caea2e28b48..c97db10f44d 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -31,6 +31,21 @@ md-switch {
     }
   }
 
+  &.md-focused:not([disabled]) {
+    .md-thumb:before {
+      left: -8px;
+      top: -8px;
+      right: -8px;
+      bottom: -8px;
+    }
+
+    &:not(.md-checked) {
+      .md-thumb:before {
+        background-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
   .md-label {
     border-color: transparent;
     border-width: 0;
@@ -68,6 +83,21 @@ md-switch {
     border-radius: 50%;
     box-shadow: $whiteframe-shadow-z1;
 
+    &:before {
+      background-color: transparent;
+      border-radius: 50%;
+      content: '';
+      position: absolute;
+      display: block;
+      height: auto;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.5s;
+      width: auto;
+    }
+
     .md-ripple-container {
       position: absolute;
       display: block;

From 0263772ad0bd4d4c43a33cc67051d7663595a9f4 Mon Sep 17 00:00:00 2001
From: Marcy Sutton <marcy@substantial.com>
Date: Mon, 13 Apr 2015 11:41:03 -0700
Subject: [PATCH 2/2] docs(list): fix mixed content warning

---
 docs/app/img/100-0.jpeg                         | Bin 0 -> 3443 bytes
 docs/app/img/100-1.jpeg                         | Bin 0 -> 2816 bytes
 docs/app/img/100-2.jpeg                         | Bin 0 -> 3389 bytes
 src/components/list/demoListControls/index.html |   2 +-
 src/components/list/demoListControls/script.js  |   8 +++-----
 src/components/list/img/100-0.jpeg              | Bin 0 -> 3443 bytes
 src/components/list/img/100-1.jpeg              | Bin 0 -> 2816 bytes
 src/components/list/img/100-2.jpeg              | Bin 0 -> 3389 bytes
 8 files changed, 4 insertions(+), 6 deletions(-)
 create mode 100644 docs/app/img/100-0.jpeg
 create mode 100644 docs/app/img/100-1.jpeg
 create mode 100644 docs/app/img/100-2.jpeg
 create mode 100644 src/components/list/img/100-0.jpeg
 create mode 100644 src/components/list/img/100-1.jpeg
 create mode 100644 src/components/list/img/100-2.jpeg

diff --git a/docs/app/img/100-0.jpeg b/docs/app/img/100-0.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..974f77e541001c9e5cff67fae2f183b20b0c8ce4
GIT binary patch
literal 3443
zcmbW#cTm&Ywg>PZ1Pla%bSa_tCJ>QsIDnMI0)(off)F}NfCRyV2m%rgJ<^*LX;MTY
zC3M7~K`8;L!l5P#M*%?*DY=|`@7z1{{(A3y_w4o0UbALCvo>>zxd8B@ERmJ~3kv|S
z93Oyr1Q?m4EleG3(1z09o*I5Z7;kC3_Gv9?Wn75wZEtBL%1Rn#Yhfjg*M+O7OJi~F
z0luN((&wc0v>?n`z#M>p!5rWd5DpFwE(nB+M}(IL3gwXy66O<;lTwhEm6DZFRMXQ`
zRMAn9k<~KQ)-f<bAP@?t&m+x^t@X|!jQ$?N0^#D~f%3q3d0|G%vdTvP=P-K!J`TVW
z@C32Q0<3&2AU+mmKOl9CWM}zjfPaUD6~xAV0?fe);W}=3$qTTufIzHlAa-^(w&U)|
z<9C3KkDXse+w_EhojX_-D+rHHFX50gYwQ(5k8aAJxfLA42@yUeA}Xe!sHCi-s&iIX
zPv5}M{Je#wl{FG&@8Ia<>~iI*hbP9%+sD^0Bov1ayBi+yFg7m!Q34?`gZMZzD?2AQ
zue7ZEX+>pKb<K+=(#z(S);4nAtNz!Nfj4idw6XCI6O&WZGmA^hE30(Ir_XC!-?n$Y
z|JePx_v>#L3jq2T>$v_4_CH*F$1YYjHV_;5Zx;(|*zpDNv9Zf&pWrvO1G{4dWZ}^q
zf@bL@jlG<5XV9BMw}M9@!ty$c3R{2E{we$4!D9Yjvj4#T>zV<$K`h711MvYSK*=JV
z9O!>l?>Wa;&OhEc8i@A7BC%F+t&vWW`I;`v>r7y+;&YP~6X5i!WHnAvjM4k}u?Se-
zcyGRV;qkpgFAHa`PR|)Dea83NiS|6?6%rv}AbYueaXp}N&&e3?ZXBwiw1>rN88d;V
zbmyHfW@^LY$e_jx{Fi(z6<qmJ7_*5_>&}wIMn5FcZQyvfDnlOdPBqz@rWKr>Z8xtQ
za#+p73)E%I4R1)L(%Rj3^V&>=YYpRbp@&a+BnHEC2i~?N<NSALyM@S31}#(mhbzCB
z01CS>hJ2-hAT4o%Dkq2{6t)6;jFgt(^1$MyG|VGfu_;c**WR~Rsa{L9kS+$djBtFX
zTK{_GP_=Vnm5`&XBylD&O(zFa_0*j>kvL9NWs};>om1Hhn<|moolvca5&pCPD#^_a
zPWdy{pxSsaq2n68G`#kgPh@g0C<@h7HjO-NjH(fNlf3L`{bn@>chJfNWSe4PPd#1B
zOY0rRcQm}#UD`UEzGX)?Cc+uM@@|=uKR0M?S3;9rsp|9>m>i`%y&&zcHbV1$VKk)Y
z?TcMDR1CpcMB1B}UKE6VQ)_gH|8WU5-&<<2En)5%Yz_oP?$I+NF6X;eOht@l_}!*J
zb30y+-TBgBZY6rLzhN}La&Y~pbD8<JJ9#z4wINv+-+Toea60nWq;-lDN5a>#N?Pn(
z0&Q3Eep%ytI8scDl`>2m;#l4;$Ndhiw_N`IT7@upXWM%CiPWO0I$C7YVA#)pS#9GY
zFA8(1h2J}<XD_O+Sb9jGp4V0WLU>T($)-)6Gg+!#PJh_kDW+zd#2WFzKj{SnI5{aK
z?XzNsR(Sd`K~i5&<r9)Maf%qbi7&z3TVid=$dy#HA|TgEd;{y(UB988s&^DVr=qgq
zZUvsr;F4acLeEbK9x<oVmQg>&o9d4-4uGTq8@>K+*8V=?o_Mt60tOS3^4fZM@!Dbr
z^8H^Hp&Nta&z3pmuNy8Y%!!?xbA!c0;8C_vZN_u5|GD4dd}Ft2uip>m(YlA1P`$A4
zf@{TOAT@TMn{*J`%p6i!);b=p)9QR@JZENm87%5)&wbt)0q0U1{D#HKGkhZ{IeOxx
zFWX9Ox-FY;`Oc?z^z_;o1!?)sq|RBT^q~Fn#6QPgY{7nH-+P+G^Ke{XvQu}$v+aQ)
zH-Jq=EyP(e1{J(;<7GY}ujd3zED$?!-G=eMzRgqFGw7ERZD0Zi<f!lKx|986+$>3T
z16BwUGz$L|lFGQ+_S#6K3i+(uAEr+MFJ9@MZGO>~p!=5h_fG@tQHIS;b?<y8!fczb
z8K7ZW8?N`e_?N!jofwUy_rxmq0QbU}z;{Q>?xrx*sulE$y>rub9`gLckjNL1gjPs8
z>PjgFXFJ3b6fSz;pG4YHtSg-nN6N*oNcT0~!te7NGJzuhO4@gY52T;<Y3%O(gn}=A
zwDQNr@HMwG<$Eta1xkcC*ksnpg{&pD9u-p)3412Wr4@hS&+EB|?#B^aug%1H8zI-n
ziLS#0&A^QrkiVLBJ$Qrl8;4R7OzP$kIr386>rGpDI}6+Xq*DD`LFZ!cbO@!YGC1W?
zLGieAnSRyctq{x0j)m_AtLyF$DUtqo>w_FD$QWpt8#0<imaK6prVCj7j>b!MLz5Wi
zI@JjInOc;=M`<aB`1*#vEa6>YER|~9FRvCRWwUv9Wuj&oiZ}Yyw@sdtfKF6wnf(z;
zyEv9ipzGZ*$vk68480@#5eP0%^2+(ai&PyFF<5mZr$x5&_%)}A4~H)&sXp@b8kV0F
zt71686Q?%pP_fHO^{avRY_rrBM%zg!2yb<($};ibnckNlWBr(n39d);0>RK&&xoQZ
z$l45rf=6J;UzKWBqcVeky}M93XM6%Ad*Put8QQutWFT7~TKIKWHq+(mtjow~p!%29
zVtbd07-bKmj-f(0w&<=9QN2N(;w__z6QH*j?|GcEu=|Pbda|1ritj@=4(yh27`K7j
zJ^6Ne4^-31p{;pHv(9(rfl+((uFMV@pXuCvjPOcJgr>qIg9)%*zaf5i+)Bz;J59Sd
zVq_C##oLA6pg$--eIMP``W?JC!Ty0tUGOY`5sMx;c0)hH*RdOqDJdyWyyN9zpsNK*
zJJtmq?x|6Js%lpRXG<9AGl`{UUniDCL9=@KFCDQ(Js#g{HSSn7e|V59Hyz}1J6lN~
zNb=C%VMsiy2!C+aF*FBvZ7bgAIhVD=LG8H#kFlbc)7+?))vEgR*s8AEK1OE<#J-yJ
ztnDEy)9aE14@7oA^vL727bn-9Hg*i$f<~<0-w_>biF$YZ%hwLnJ>ukG?6!szBCR8J
zY}I*-tLTFKbfk-*OPye0W$M?4@eh;-96w~Ze%>mkd*VzAbxa0}!s`tk9Cbn+YUtFa
z@J2Z}1qpgmi_C3!c{iY5BI^_raLG@BJg{NB#;K*i{gb-W8VK{YmxV3CMN_YF=;W0U
z2fW3hlLlMmG)>^Pz$%na)p>K{=cHz2#RcvhQtoZOR_@Cpkrvmw9$$8SBl!GCuHf))
zEvd`RjJVB1e_7y0^0Ez?UkrbG;g(#6vvZ7Ty8Q1+zr=`ESu;?tdE{@}$<y*d2>XY7
zOXNUVN}%&AXRJase>_#EP;p`N%$Uf*THR6RVZ&mA_seLx;>#Ma=avQ01&s0ZKM@se
z4ma(|wbi<XXYXj5d^5ac9N(D0_-P>oeU#5r9H7vn$=}-hMmkX$u6e`sTtTS;Uf9ig
zW_pRF<MUM4{$hHzul)3bGfCV`;3lo<ohqE#QN%f*NDis^XeRe^AN@*lB)`m_IIw!Y
z{zEkEs1DJW)xOIcA~P(yBjkXpl+slTX1uEQx)F{+mdtJ&As|Omi!RyPzrBck5%$<a
zeW(@Kj~ErA#?SR{w{ve@V0gDxWewY9EJB-Vs;u}W_2uhNnrvzgRW_5HNZ!Qo3`OO4
zu7OeO>8VGZyanEf^WQlKvWoSq4wC2mL5?&={MQTbw{(IHFx(4z-QWg9X1ib&2P@4P
zL1mbv)!)1^QY5~0_jF%XK<%m1y<_9S-3(cBp#d$-TeTWe^QI(>XNNmP)S!3gY%;Vq
z+qrLE(IWh$bAaaZRRKTj$*eVg`~Akjw}<)%)$=0v?iKUDVrXWS^CsHZABEVVvBVKF
z7JD@>J0hjMf<r@kT(3r!QX(s=znqj*eAMY}gRL#4itQY2HA%-i4%zHB4&V3tGohif
zaZ7nSnwN5U<OC=Ba+G9LCVba^RAwx?u_^hqsHpMinKN2)VAac~zSZvNC}sDbymQB&
z6|r#|#{Y38%j3|eHebW=*U_j_40Q>&aw<j9y`TsV?i3PMWt6>*Q!cR-*}j;Ygpokb
ziBe(TD#s)2EVP83{Cn8PNDHuNHR0X^Ka2%inh8X?93(EDzY2r+#OTb}p}s`^ME|BV
zp27r@1s#;F^7Cf0->Y5ybuvr74LmG9Q1W@t5l7QmZ=F#ID49y_v6wxmDy@xPU!0TV
zg?t{-9zGylpE~$V`;0$j`XqxUU4uYBi|JZOiBDAF9*ScB+=5nVYwawCnC&&)9vG9&
wGX|Bgt9#@&PQBf*5RAun32rv0VoKu@-*beE60og|O8dXq1?`*&-puKL0JP0tX#fBK

literal 0
HcmV?d00001

diff --git a/docs/app/img/100-1.jpeg b/docs/app/img/100-1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..6970b5840d1f56ba8de5097213d3c8aa9c0a7a4f
GIT binary patch
literal 2816
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

literal 0
HcmV?d00001

diff --git a/docs/app/img/100-2.jpeg b/docs/app/img/100-2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..1adbff3a16b530cf746d5a9bc15e03458f2dbec2
GIT binary patch
literal 3389
zcmbW&XHe7Ix(DEYXrb2-0Ye7`A}#b1s-Xmw7C@Q^geo8qx}YFs3rLi<sS46T2&hy+
zrAdj>Hlg>9ARtxghkeeOb7t<Rd++a^wZ5!(*32{StXUUh7jpnJT1Q_80D%AibXmZ~
zIiR9#iqgawnJV+SV#PgtoL%_>r6r{JL;`T`-mZN5Xk9+EF-n&&P#z(AgU>g>!PDJ8
zgb&H5AVqsI31|bfU@$e9ik6z1nvRy1j*)|zk%57cn;pu+A;>E%B)}`ce+{l6c}-MS
zlwUwfQ(9I@MNLgjSmLI>wyK^2QcdOWOF*=Abc_s)FlJ_$iim)S%KteREdUEOfCaGR
zAOV1k1w_sQy66CSFOig>e+Kw>KxE_;lvH498d|!`hFWHT3`9;&MnO(VNkMVh9e#NZ
zP_R(4@=I${v6(o41$-fh$fVcQf?97|*-Zz33duP7J)xn6Ug6;6625j_L{v;xPF_J#
zNm=_QN=H{uA8m#)x3IipW$lD@c5!uc_rUoF1O^3%ghoZj#QyO#E<QOWHSN#zjLfY3
zg2JNWlG3vBckgRz>*^aCKeV-XeCh1!?jim)L>e9$9UGsRUszmPURhoHzP_`&w|{W>
z>-W*|-!2e9{x8<${x8`7aIsvv$S5etDZqcbKx9Fei=2gml3$vNRnr9Q;L9d}h@^&S
zCB1&zN+T#^`jg$!Z;%!$Bs(v>^Ed6Evi}|I$^T3CAJ~6g697Fq=yG`EEPy&NVe6Rt
zjK%m#kQ2cJN8jS@mcwLP!oEY?cA90A&Exr4F6G{e5B`qoayaV>^*Jbw!Wmig(!@mI
z-6k4-6)!Q?jAUwiUeB_o%$SoINzLK%kPkIY>E#BDgG+ET1z^1U+?-1mRYc0GeX}4F
z!yDM%M|>7xXM<VApJYDQfox1gG>G|~jNlWiVpT`f%&N$=j&IT(WkMvb=oZD`H=*|*
z)P<Ukc@G;d0L3b8Ixmc~BiuB{tDmh||7N@pg+t@wOd$s>zVbnxia*M;ycAefBFnK|
zjJo^4%!UoRE(%?rkU80ijsf5J5zL+&5U^apI<Ijc*R>IJC8b@UlSj{np@x2y`vQ0w
z=paR`INMB0b4N>g!_Pr${k}z0ZP=jzMem<J-D(y*zmX_2>GyEw&z%kZG<UjG5_)*u
zOrkNuw{fIV4;phAX<`1hoVa1R!qTmeI-5yCw<@DedT$;_Lw`{UXRoY7{5+6a%LVm*
zC19%Nt%ak$ylr?+ZuYiQ$-H??TRCBOEUVVmU$+b;i_?17(V7;k$<7~OY#;>$T`#(~
zrZDgrE13pIe?PDH?O_<I_oyV;f9y>0OM<C^cq4mC4;e`B25sx%;z7#PTXUH~y2?_0
z2(I`&5obx(T;y$lcLVYm4KJHxeaw<u|J=#r#P~!gzZWM+P<ZDjO>$BjCauMJy;-w_
zD)1pz1Fv#E^U=Hj1{w)u?fngnzO<cv%*~OL+$txdMn#kBP~6d5eJ_?55JBNc&V4~r
z=rEc#noy@)^fbmgFoiT3&;P(JY1=|H)iY4=nK^?t23oDx{mH338NyTZ6B`fSV`bP{
zx`N`{>3Wpe`IxJ_S<Bv6)lwiDGCloG_}cISu0HF_@OpZX3%Ac_|3~aRnYh3`dG3x7
zhIYRSCJM9dO~)sWgD*>0SL}^^_1#%%W`xrHlA?X2I9&Iu?DYNa(spKWc?2}NTmW;~
zftIY|KNz?~Q@)M!(L!E?;uVqj@HbV-8VP&&Ck;*1OY!H^MHvu_Me;J9+95l18`O!!
z_@sFX)3`zibX?PlLeowg-tYBR+L{@R()wfBO1kv{y7yHZ=YXweVkCw9%ww+htn-xx
zeLm(mgGPSoSTMm4ZZR|CDSe{)ngd%L+^N^oWqr8T`BKrZAs5+mw`TLUdx+c-^4x~C
z;};iub43KlIQ2AM7v_58^78O|0G(`bc8?Ve#iG)|7sS5K2lEc0jGWTB<c<^n?ep-(
z0fK~tL+rR$LE0vJybMfYda}CxcVqwje#Hg~6J-79x}7qj&9Cjv%1}|dy_td0&-eCL
zh1KImV$TRB91*yoc(@DQHVcYJpfMJ>jn<8^Jp=L^Y%G7z&Y!#HRivc~{=NW`;^uAK
zrU?`Y>Gxeu6C}~I^>vPx2xdqQ<0?{m^Um?jeySw@ozv&^<PtVWTb3`(>**?^*gWqg
zAN4+wvgkKYpUVm*?_B_~s_3!Ofvjf>+e`jIfl)+8Vg4W|_k-gR;Zp}?*y4cM7NM5r
z9$t{|@vNY;kM4r5Cnjk56LE-A7&4#zSHlR@f5OsqpR`_LhgNX!>REG|?BbrO;zBnS
z7+bY&0dI~MijxknCIlD68PdIAmg*78i5jgm9=fXToq>DW%|7T+H(<ZcY~2?*j|cR6
zV9$=jQC?!Nh&2xd%Jkn5M`y$F0kyd*l&@<Pl_t4<bf50onWXpD=q|1r-@mreT4$=W
z()N9@wcAR~xoZxgZvAQko~VAy;2}XMPG5+-g>ai%eYMC!%>VwE+c|_2WUs?hoGn4V
z-nC=_mp;iq^6P0Ix|+xsiaWOWl30;Q;~ZdaxNVL^Xm%gNa6?&L50fXViLt^FoP3Xp
z>%_g2Wk?;p940w)4)4FWv~1o@l>2%sNcFg^G4xM@ctO_qe3GIMMA~aQa&hN)zXHjr
z+SE8l4|-17u+hW*`GH77bV^)ZorX(4k%|%7#ANu3U}Q=vtRCGGuEp@UaawSar4%Wb
zwMkm&))-r=a4h*mg*E9fg=Kc1id5VecUdsd`+C(;qiagte*59zU0mA&TkYt<uH=UC
zmRyyWSALEWtPP$z)*6b>5L8=umoPRyD<({OSH`Jif1?V9>n@&I*D`QhyrVdyKeODF
z)z{R>;J@`&<U1)P{=j{}gAwuerEQo8997fge_p4ept1?o_f{?7W$A0*zm7z{H|@uX
z*Jb<nhOdYw^RHAHVzEwp1fHvt-T7nL)38(GM+P^|%De5L$gmC_uP@ZbG@Ua2wYX-A
zX~OX#YlqH=vWiB1UGmv0_FKPQ+jgmfd&tXxkxwPAeu=_o8Ct}!I?Fy_qD1h>lJ!H1
zbfR-w`xX1t7ZBi4?QG>*wnm84y&3<+?$uA~MIjB{%6^7hMOOWmPF(Oxa{>L4zeLHG
z!m6Gvj>>w}D@Xq+{kHZF(FfD;RRa0B-#Tl?=`6bj26;h#MEfK#*$aU(Y|3c04UJH5
z8S%Nh8)%azR(|+41!gVx?Jl-;xS#%y5W!uls&#0cuST-fH^&6GNlsVS$E96FFcO8S
z9?EYXPBFwE^ZWH#vKC0(325zPLa#mW*V~VaDLO1EnbgC;!ul4Giew+hQJsC4Pxb3&
zdH<BjN!7Wl+-kNBjZ0kIJ)f(BcqX3OME7ur^3%q~_XZz3ma&10rza~lQ>hJ2)tU9G
zehp%pocGA0HfK*4s=Io8lYv!5$ZdGq!Fh9H{?<ZHi2a)X*M$c+>c?uDgyZl(WDQ!+
z)YI6%%8_0ZI~j*t=9ti8PCBBJdrD$Ds#~)!HeRuZKP@e^+eHU?O*9_w80Gff&?QO_
z>!}Vqe*1PZ>Ml16E?X}5GcXxo+g)0PZ1i9glQ5e{AuX+i5v(m_ki+Y>2pjjFdHPIl
z3@h9{Or&-PYDb^&LWMSt%dHR&!@oSY5X>SCZYH+ZAegehf_c&J75-?eTS`iO^~kx`
zmt^p=I6(6ghA3J&JJC_<vIj!)=I%{=uxDyVE>0Rc+rxbvUw!&rA^C$<bEdUVu~YY;
zGLdTW1Ysp{O=q`qAS}-{S>poW>Kbd6{YzPt<b^&<IEKjY{*I+-XX8uC1uKEUryl7Y
z+1XJ$WNvxfto#Q@n&-77cjd&G<tYPKspvnC@}w!n&qIf|S-zjcyaMl6+E`-JmpfRl
zVGTvNb$oL|gUU;w>7S>};c5?uhO{GgylQrWM=kXZ)23JE0#s5JN<QMsyQ$qL%qAmK
z>@I)=hnf!~qb9X8YC{y>i8=DXWdE{l@9>*T|BWm6d~h>0OT{DE2^;JcDWT%{KzIT4
zXDJ8t`pO1Md42ZBUI=z+j;&Lq<j2B+jQP5_g#UATGl#-Bj>R$)jO4sFUa=o7l7FKo
zv-<gL()qBRpVonTTz>poio2jlez>4#{RM!Koa#6Hb@?kILK-B#b>IsJQ4Yu<IebfX
zULPfy+!Rqqb0bTn3<cd+x#KiiDTJDs>^FK{cB)Aqq$bde$n$JiN5(+RkujtKL~IP?
rY%G?<or=w2>dV9E+Cq3E^5cO5`RC5E#rgum&rfvXMM`{mFUJ1?&jCf+

literal 0
HcmV?d00001

diff --git a/src/components/list/demoListControls/index.html b/src/components/list/demoListControls/index.html
index 5d71438da34..ae71d87847f 100644
--- a/src/components/list/demoListControls/index.html
+++ b/src/components/list/demoListControls/index.html
@@ -25,7 +25,7 @@
   <md-divider></md-divider>
   <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
   <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name)">
-    <img alt="avatar" src="http://lorempixel.com/100/100/people/?{{$index}}" class="md-avatar" />
+    <img alt="{{ person.name }" src="{{ person.img }}" class="md-avatar" />
     <p>{{ person.name }}</p>
     <md-icon md-svg-icon="communication:messenger" ng-click="doSecondaryAction()" aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="{'md-primary': person.newMessage}"></md-icon>
   </md-list-item>
diff --git a/src/components/list/demoListControls/script.js b/src/components/list/demoListControls/script.js
index 3fc8982e7f3..0feb5f7cb73 100644
--- a/src/components/list/demoListControls/script.js
+++ b/src/components/list/demoListControls/script.js
@@ -25,12 +25,10 @@ angular.module('listDemo2', ['ngMaterial'])
     {id: 3, title: "Message C", selected: true},
   ];
 
-
-
   $scope.people = [
-    { name: 'Janet Perkins', newMessage: true },
-    { name: 'Mary Johnson', newMessage: false },
-    { name: 'Peter Carlsson', newMessage: false }
+    { name: 'Janet Perkins', img: 'img/100-0.jpeg', newMessage: true },
+    { name: 'Mary Johnson', img: 'img/100-1.jpeg', newMessage: false },
+    { name: 'Peter Carlsson', img: 'img/100-2.jpeg', newMessage: false }
   ];
 
   $scope.goToPerson = function(person) {
diff --git a/src/components/list/img/100-0.jpeg b/src/components/list/img/100-0.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..974f77e541001c9e5cff67fae2f183b20b0c8ce4
GIT binary patch
literal 3443
zcmbW#cTm&Ywg>PZ1Pla%bSa_tCJ>QsIDnMI0)(off)F}NfCRyV2m%rgJ<^*LX;MTY
zC3M7~K`8;L!l5P#M*%?*DY=|`@7z1{{(A3y_w4o0UbALCvo>>zxd8B@ERmJ~3kv|S
z93Oyr1Q?m4EleG3(1z09o*I5Z7;kC3_Gv9?Wn75wZEtBL%1Rn#Yhfjg*M+O7OJi~F
z0luN((&wc0v>?n`z#M>p!5rWd5DpFwE(nB+M}(IL3gwXy66O<;lTwhEm6DZFRMXQ`
zRMAn9k<~KQ)-f<bAP@?t&m+x^t@X|!jQ$?N0^#D~f%3q3d0|G%vdTvP=P-K!J`TVW
z@C32Q0<3&2AU+mmKOl9CWM}zjfPaUD6~xAV0?fe);W}=3$qTTufIzHlAa-^(w&U)|
z<9C3KkDXse+w_EhojX_-D+rHHFX50gYwQ(5k8aAJxfLA42@yUeA}Xe!sHCi-s&iIX
zPv5}M{Je#wl{FG&@8Ia<>~iI*hbP9%+sD^0Bov1ayBi+yFg7m!Q34?`gZMZzD?2AQ
zue7ZEX+>pKb<K+=(#z(S);4nAtNz!Nfj4idw6XCI6O&WZGmA^hE30(Ir_XC!-?n$Y
z|JePx_v>#L3jq2T>$v_4_CH*F$1YYjHV_;5Zx;(|*zpDNv9Zf&pWrvO1G{4dWZ}^q
zf@bL@jlG<5XV9BMw}M9@!ty$c3R{2E{we$4!D9Yjvj4#T>zV<$K`h711MvYSK*=JV
z9O!>l?>Wa;&OhEc8i@A7BC%F+t&vWW`I;`v>r7y+;&YP~6X5i!WHnAvjM4k}u?Se-
zcyGRV;qkpgFAHa`PR|)Dea83NiS|6?6%rv}AbYueaXp}N&&e3?ZXBwiw1>rN88d;V
zbmyHfW@^LY$e_jx{Fi(z6<qmJ7_*5_>&}wIMn5FcZQyvfDnlOdPBqz@rWKr>Z8xtQ
za#+p73)E%I4R1)L(%Rj3^V&>=YYpRbp@&a+BnHEC2i~?N<NSALyM@S31}#(mhbzCB
z01CS>hJ2-hAT4o%Dkq2{6t)6;jFgt(^1$MyG|VGfu_;c**WR~Rsa{L9kS+$djBtFX
zTK{_GP_=Vnm5`&XBylD&O(zFa_0*j>kvL9NWs};>om1Hhn<|moolvca5&pCPD#^_a
zPWdy{pxSsaq2n68G`#kgPh@g0C<@h7HjO-NjH(fNlf3L`{bn@>chJfNWSe4PPd#1B
zOY0rRcQm}#UD`UEzGX)?Cc+uM@@|=uKR0M?S3;9rsp|9>m>i`%y&&zcHbV1$VKk)Y
z?TcMDR1CpcMB1B}UKE6VQ)_gH|8WU5-&<<2En)5%Yz_oP?$I+NF6X;eOht@l_}!*J
zb30y+-TBgBZY6rLzhN}La&Y~pbD8<JJ9#z4wINv+-+Toea60nWq;-lDN5a>#N?Pn(
z0&Q3Eep%ytI8scDl`>2m;#l4;$Ndhiw_N`IT7@upXWM%CiPWO0I$C7YVA#)pS#9GY
zFA8(1h2J}<XD_O+Sb9jGp4V0WLU>T($)-)6Gg+!#PJh_kDW+zd#2WFzKj{SnI5{aK
z?XzNsR(Sd`K~i5&<r9)Maf%qbi7&z3TVid=$dy#HA|TgEd;{y(UB988s&^DVr=qgq
zZUvsr;F4acLeEbK9x<oVmQg>&o9d4-4uGTq8@>K+*8V=?o_Mt60tOS3^4fZM@!Dbr
z^8H^Hp&Nta&z3pmuNy8Y%!!?xbA!c0;8C_vZN_u5|GD4dd}Ft2uip>m(YlA1P`$A4
zf@{TOAT@TMn{*J`%p6i!);b=p)9QR@JZENm87%5)&wbt)0q0U1{D#HKGkhZ{IeOxx
zFWX9Ox-FY;`Oc?z^z_;o1!?)sq|RBT^q~Fn#6QPgY{7nH-+P+G^Ke{XvQu}$v+aQ)
zH-Jq=EyP(e1{J(;<7GY}ujd3zED$?!-G=eMzRgqFGw7ERZD0Zi<f!lKx|986+$>3T
z16BwUGz$L|lFGQ+_S#6K3i+(uAEr+MFJ9@MZGO>~p!=5h_fG@tQHIS;b?<y8!fczb
z8K7ZW8?N`e_?N!jofwUy_rxmq0QbU}z;{Q>?xrx*sulE$y>rub9`gLckjNL1gjPs8
z>PjgFXFJ3b6fSz;pG4YHtSg-nN6N*oNcT0~!te7NGJzuhO4@gY52T;<Y3%O(gn}=A
zwDQNr@HMwG<$Eta1xkcC*ksnpg{&pD9u-p)3412Wr4@hS&+EB|?#B^aug%1H8zI-n
ziLS#0&A^QrkiVLBJ$Qrl8;4R7OzP$kIr386>rGpDI}6+Xq*DD`LFZ!cbO@!YGC1W?
zLGieAnSRyctq{x0j)m_AtLyF$DUtqo>w_FD$QWpt8#0<imaK6prVCj7j>b!MLz5Wi
zI@JjInOc;=M`<aB`1*#vEa6>YER|~9FRvCRWwUv9Wuj&oiZ}Yyw@sdtfKF6wnf(z;
zyEv9ipzGZ*$vk68480@#5eP0%^2+(ai&PyFF<5mZr$x5&_%)}A4~H)&sXp@b8kV0F
zt71686Q?%pP_fHO^{avRY_rrBM%zg!2yb<($};ibnckNlWBr(n39d);0>RK&&xoQZ
z$l45rf=6J;UzKWBqcVeky}M93XM6%Ad*Put8QQutWFT7~TKIKWHq+(mtjow~p!%29
zVtbd07-bKmj-f(0w&<=9QN2N(;w__z6QH*j?|GcEu=|Pbda|1ritj@=4(yh27`K7j
zJ^6Ne4^-31p{;pHv(9(rfl+((uFMV@pXuCvjPOcJgr>qIg9)%*zaf5i+)Bz;J59Sd
zVq_C##oLA6pg$--eIMP``W?JC!Ty0tUGOY`5sMx;c0)hH*RdOqDJdyWyyN9zpsNK*
zJJtmq?x|6Js%lpRXG<9AGl`{UUniDCL9=@KFCDQ(Js#g{HSSn7e|V59Hyz}1J6lN~
zNb=C%VMsiy2!C+aF*FBvZ7bgAIhVD=LG8H#kFlbc)7+?))vEgR*s8AEK1OE<#J-yJ
ztnDEy)9aE14@7oA^vL727bn-9Hg*i$f<~<0-w_>biF$YZ%hwLnJ>ukG?6!szBCR8J
zY}I*-tLTFKbfk-*OPye0W$M?4@eh;-96w~Ze%>mkd*VzAbxa0}!s`tk9Cbn+YUtFa
z@J2Z}1qpgmi_C3!c{iY5BI^_raLG@BJg{NB#;K*i{gb-W8VK{YmxV3CMN_YF=;W0U
z2fW3hlLlMmG)>^Pz$%na)p>K{=cHz2#RcvhQtoZOR_@Cpkrvmw9$$8SBl!GCuHf))
zEvd`RjJVB1e_7y0^0Ez?UkrbG;g(#6vvZ7Ty8Q1+zr=`ESu;?tdE{@}$<y*d2>XY7
zOXNUVN}%&AXRJase>_#EP;p`N%$Uf*THR6RVZ&mA_seLx;>#Ma=avQ01&s0ZKM@se
z4ma(|wbi<XXYXj5d^5ac9N(D0_-P>oeU#5r9H7vn$=}-hMmkX$u6e`sTtTS;Uf9ig
zW_pRF<MUM4{$hHzul)3bGfCV`;3lo<ohqE#QN%f*NDis^XeRe^AN@*lB)`m_IIw!Y
z{zEkEs1DJW)xOIcA~P(yBjkXpl+slTX1uEQx)F{+mdtJ&As|Omi!RyPzrBck5%$<a
zeW(@Kj~ErA#?SR{w{ve@V0gDxWewY9EJB-Vs;u}W_2uhNnrvzgRW_5HNZ!Qo3`OO4
zu7OeO>8VGZyanEf^WQlKvWoSq4wC2mL5?&={MQTbw{(IHFx(4z-QWg9X1ib&2P@4P
zL1mbv)!)1^QY5~0_jF%XK<%m1y<_9S-3(cBp#d$-TeTWe^QI(>XNNmP)S!3gY%;Vq
z+qrLE(IWh$bAaaZRRKTj$*eVg`~Akjw}<)%)$=0v?iKUDVrXWS^CsHZABEVVvBVKF
z7JD@>J0hjMf<r@kT(3r!QX(s=znqj*eAMY}gRL#4itQY2HA%-i4%zHB4&V3tGohif
zaZ7nSnwN5U<OC=Ba+G9LCVba^RAwx?u_^hqsHpMinKN2)VAac~zSZvNC}sDbymQB&
z6|r#|#{Y38%j3|eHebW=*U_j_40Q>&aw<j9y`TsV?i3PMWt6>*Q!cR-*}j;Ygpokb
ziBe(TD#s)2EVP83{Cn8PNDHuNHR0X^Ka2%inh8X?93(EDzY2r+#OTb}p}s`^ME|BV
zp27r@1s#;F^7Cf0->Y5ybuvr74LmG9Q1W@t5l7QmZ=F#ID49y_v6wxmDy@xPU!0TV
zg?t{-9zGylpE~$V`;0$j`XqxUU4uYBi|JZOiBDAF9*ScB+=5nVYwawCnC&&)9vG9&
wGX|Bgt9#@&PQBf*5RAun32rv0VoKu@-*beE60og|O8dXq1?`*&-puKL0JP0tX#fBK

literal 0
HcmV?d00001

diff --git a/src/components/list/img/100-1.jpeg b/src/components/list/img/100-1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..6970b5840d1f56ba8de5097213d3c8aa9c0a7a4f
GIT binary patch
literal 2816
zcmbW%c{J4h9tZH>m|>=|&6Fu>FbrX&XoRsOSx5CS_DUh6v6PH0%Y&k*N!F;CY(uuk
zsK!|GNGe-dvNep#ZtO*tB<AXQ?z#7z``5kq{XO5$Ki|*!obx)LbH4n3{xE>BG$Wb;
zAP@k6whzGH0`!b+OpWZUY;-XcvYNM_2L%(XaZnwj92DT?OTiE=%`ukNrskMnt-~q@
zFw`KoOJ0GY7z2#9I-EZU7z1!96b2Q7!(cFBI9ymv5+NokDkhEEjg-X7Dk{j!%FFFn
z)jqUeMN>siUfoDTlc0C>=uyRkCPZU>3vGj=dcTH%;KIUUqGD(S0<EVkudMe!hyM~l
z!T>Tr27}}Q0VD{F1o7VhvfD^O&|d-m8IS-NA}9of?SKn!H?R?a00;~gfPe)BA&~9v
zi0yX(f)v~-r(q<ti{u8Cr%D{Yo}3HA9)H?^vg!J&fWP1$y#u~`kEGOI#r;akDmcv}
zTG~1UU1JkdGjj`~rLCR4gQL^wGwx)Mixf{U?|{Id;Hx2_VKFyu#>U;cO-o6=mzIA2
z!NZI^Mt;HL!lL4mXRHc#WmR>}^H;CmG&VK2w7%``>FxW#=^x;ZjE;>@O!B6tXBL;f
zEw8MueP93a%LM|!f3vph-?0C1A-7!u5C|9o{pA7)T;0B4Bt%e7LujWF3F=1OC4cxj
zOyYQQ?$d@HSiH?w)CK=8_-+Nw5yiz{w7+Ek9W46)lKl(zZx<I30fV-e2Sx&hz?Zh0
z&)yC?GAyE!azR+IM)8#4-MY>CPRl@Ql5uPFupc8&{K{g%VIUZ{5YPd=QWmDve4hK1
z1dqqS3~H1Xb8=?Ptm-v06_h6Z>dQbD`fr>2MQko6pIV6h*{{<CWowJ*&J$Moz-$j!
zC-FcnANV}UP<}-1+^EjCJr(sjS>ggwE=r_VEj7tZ-LT$f9;{HCcs`^^vg%$NS;S(a
z8e)$OcKB%F!EK13+Ks0IBXMJmrymG=N(}+Y^rB5%O$%FrP7Vy(VtXORKTLI|3>Ooy
z3W$(dr#;;_udiv@mSct3(#~I^)LvZ+LC^C6L(7KR8i%AeG#FSetqQyqfg=aK_o@@o
zt1Y$}x$nQ2xI)AK=(1;KO)I(W-h5O^r>Q2_SzXj{n2Hdu;uIE^X@}*$<i4oUd0f$T
zf3TK{zI@*EFwPYK8I+c^trsXWbLI?bCg34Hz#-O9ms%dKO5B)uwr3_xyrcBvxwB`p
zm+!QUbs8n%*Wcf#K2Mx0pZ#*c7rRk-wD)xuksBF<k_yR(cRiF0``Ifcq!HU$aMaGc
zDx-Voj$}j4E8bv%kt(7<Qe!M<ve3&?>ja{D0e7GK+8NOe*pbQh%E$vIm7cNgFIwY1
zHB8$n4JtmplJ*sb#r|-3{;u8-mlTSj<%aHkCl~)RxDp@lF8jzu1^#>{{`<=fEi(yJ
z)5uT{o66ZeI9eT1GX9j?5L~@1U+XhvBaBIU5+B$wy@l%dJlHDw3|r)S_Q3Q|9Yu##
zFY2K73E#OObGl#%Z(1)&*k>hcsp?`=f%vR@wyKp=H2b~F`L~0-_hxxsPOGO}&a&QL
z7SO-$lz49!=W|WqBD<{{>EXe{Qzwb^NWdOHQg@>1OpNy)=7&}C)|^a!ID9(yYs3w$
zyn!>;IYHvBf2fX;9~CEpQf#bkn9L1yM<LVa(C&6)$LJ;{^d%j)bw_pIW&5PM_Q6lA
z!1Uw8yH=P>R|NVQ7G1ug@@W@_Gze?@TlOt8GGgI6SXK%tKt$o*=Qb@~YGRrDJepI#
zKWxa(uKxO|-(ybpReX2eOc@RL4a+a|`thM6J=NP)&*kG2{b)r6N1W!votqO&??tOk
z<Fg|Fbo3bUfu?97OLHK;2}W;aNpn6~`4h6SCua(dA9n7;q%I%o_u|rUalH%9V%IY@
z&vU(7q#3=IyvOdgwCQ=ZRptjC>a5c(b1>TVLV;sRdJ6d+G&Ym<_{BK&=}Z{&QR2}M
ziWJWe7iC!*F&4UOpPEEV-OrCPKO708?H5gJJmoKibCfA*nfuL@X3s5`I#O$s$4C7n
z4~8qtu&85dy5FpJqCzHwV{b97hRx3uUM^PLj5#4Ph))8`6!!FUL_L|STbHVkCeUN;
ztv`XB_RI01FBgXA#*RF1v?{52wN#=Kp3u0#5V<ebb9|$f=hb3ZfU3$5VOX$x7}2Aj
zWK4!D-(L;yI-?|19-uv+w{Ewu>fsy-*OZF@a$Esj+idA$OapxvKa0&?m)l1)BM&|h
zF(`Sm;?PLd7q#t62#T5EuJ8NitSpJ4HTFUdV<{*|mK@DFt};;R{bb3J%|FY!nhZ=m
z4yc7}ran*ixt89iww9O2E$zJ3Q<%eK5ZUR-7e?32fJPGQMbGGK!g~Fu(xI<O(_;Vu
zTPa9c@$Q^s5htt73oBegOC@1plTY<Y{yW<{!fglNIAF+aW(K91i)O4VM{YzD`fj5G
zY;h=g_8nZ7syOL0-fA+`tejBYTi_qifn!$)O^(RffCAz(hzZm5tnu!_8rldtYDar;
zf#-mX&+k38dZ@4C=?*tBblsEJtfcge$C9E%IC>GTZX^lo<OE`{6tkN<J;`?1c>6Bn
zO<!4lD%Et>sfjW0h^<~R-@fa?Qg&9%)F>@5ou!&&D@5b+P}%N1d3W)#!@OdYPBixJ
zANXu%(oW?|U-nUl=)L6$AZK26xo>j=L969dtx!wywN=fmlh+op@KBBTqD$d2DsRzD
zW4d^l>Ek(dvspf%=0sl;pktZ^>4}z+YtR%BAMlL2DeOP6e&*0SK2Uz_TpHyL`I4Xc
zi{GHL&I=4>h|0b=Y(d~!D$6Lo*l>XltjwnNPQvynh=e)VOD9jc+NSotsf{Mw4jQB{
z8MXY3z(v2VJgIki*}(MVH|z`R5!SNdBYgM)x@?iJQMthYYicyZ+?X+Y#|shdA(AsJ
zlbv?CZYx`N!U;U(b5nds(A<yUvc*>4RXvB!%CvHMRWos1?UQuHVk(X0s9o-H%lV1(
z1sYH4orXe&vRwnGwtuC%&uO<YhpAz5{a!rKKi%K!X-8+Ed`F|(7)nyhN~kaRZx!sl
z9mXRu<b)gK$iQW5L=vp?+~YJS|6{IJ{@WkA_po|1N8+x29R8Z&2Mdj@PQ$mk%?j!9
zOdUasO|K;(N4R9_RA><;i#*Ma<M4qpBFmz&j#jl3fFXI(ebt*j5BsDuP9@SQ)k0O2
zt4`<IpET%a2?nfXo{PEc))D!I51g+lsS~F_WgN(@2=SZejd)TLA0M=mnhP-*&zp`Y
z_7YM#P?XC%qQyl$^MFpn0)Nf0*7(!#%F)_q>Q<KSm2JZjBcHRe`;V83h?_QOHZQ%2
znni!>k)WAKkW7i@Wj7olGR<h~X73_tQ3=OqoiVqDODEkuWyZ?1sBAL=uTH|+?ke^Q
zJ$?mRW*;;pb-_ZX1N1VF78}%!pP(qYC08c-tL_b@%MqXn!z9yyldGNz7c(D9y3RMu
r)9xyH*t|UGnO8F~C6D#{@(oQfppsg#T49lPB<pr0N`hoV;t%`-EzTG&

literal 0
HcmV?d00001

diff --git a/src/components/list/img/100-2.jpeg b/src/components/list/img/100-2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..1adbff3a16b530cf746d5a9bc15e03458f2dbec2
GIT binary patch
literal 3389
zcmbW&XHe7Ix(DEYXrb2-0Ye7`A}#b1s-Xmw7C@Q^geo8qx}YFs3rLi<sS46T2&hy+
zrAdj>Hlg>9ARtxghkeeOb7t<Rd++a^wZ5!(*32{StXUUh7jpnJT1Q_80D%AibXmZ~
zIiR9#iqgawnJV+SV#PgtoL%_>r6r{JL;`T`-mZN5Xk9+EF-n&&P#z(AgU>g>!PDJ8
zgb&H5AVqsI31|bfU@$e9ik6z1nvRy1j*)|zk%57cn;pu+A;>E%B)}`ce+{l6c}-MS
zlwUwfQ(9I@MNLgjSmLI>wyK^2QcdOWOF*=Abc_s)FlJ_$iim)S%KteREdUEOfCaGR
zAOV1k1w_sQy66CSFOig>e+Kw>KxE_;lvH498d|!`hFWHT3`9;&MnO(VNkMVh9e#NZ
zP_R(4@=I${v6(o41$-fh$fVcQf?97|*-Zz33duP7J)xn6Ug6;6625j_L{v;xPF_J#
zNm=_QN=H{uA8m#)x3IipW$lD@c5!uc_rUoF1O^3%ghoZj#QyO#E<QOWHSN#zjLfY3
zg2JNWlG3vBckgRz>*^aCKeV-XeCh1!?jim)L>e9$9UGsRUszmPURhoHzP_`&w|{W>
z>-W*|-!2e9{x8<${x8`7aIsvv$S5etDZqcbKx9Fei=2gml3$vNRnr9Q;L9d}h@^&S
zCB1&zN+T#^`jg$!Z;%!$Bs(v>^Ed6Evi}|I$^T3CAJ~6g697Fq=yG`EEPy&NVe6Rt
zjK%m#kQ2cJN8jS@mcwLP!oEY?cA90A&Exr4F6G{e5B`qoayaV>^*Jbw!Wmig(!@mI
z-6k4-6)!Q?jAUwiUeB_o%$SoINzLK%kPkIY>E#BDgG+ET1z^1U+?-1mRYc0GeX}4F
z!yDM%M|>7xXM<VApJYDQfox1gG>G|~jNlWiVpT`f%&N$=j&IT(WkMvb=oZD`H=*|*
z)P<Ukc@G;d0L3b8Ixmc~BiuB{tDmh||7N@pg+t@wOd$s>zVbnxia*M;ycAefBFnK|
zjJo^4%!UoRE(%?rkU80ijsf5J5zL+&5U^apI<Ijc*R>IJC8b@UlSj{np@x2y`vQ0w
z=paR`INMB0b4N>g!_Pr${k}z0ZP=jzMem<J-D(y*zmX_2>GyEw&z%kZG<UjG5_)*u
zOrkNuw{fIV4;phAX<`1hoVa1R!qTmeI-5yCw<@DedT$;_Lw`{UXRoY7{5+6a%LVm*
zC19%Nt%ak$ylr?+ZuYiQ$-H??TRCBOEUVVmU$+b;i_?17(V7;k$<7~OY#;>$T`#(~
zrZDgrE13pIe?PDH?O_<I_oyV;f9y>0OM<C^cq4mC4;e`B25sx%;z7#PTXUH~y2?_0
z2(I`&5obx(T;y$lcLVYm4KJHxeaw<u|J=#r#P~!gzZWM+P<ZDjO>$BjCauMJy;-w_
zD)1pz1Fv#E^U=Hj1{w)u?fngnzO<cv%*~OL+$txdMn#kBP~6d5eJ_?55JBNc&V4~r
z=rEc#noy@)^fbmgFoiT3&;P(JY1=|H)iY4=nK^?t23oDx{mH338NyTZ6B`fSV`bP{
zx`N`{>3Wpe`IxJ_S<Bv6)lwiDGCloG_}cISu0HF_@OpZX3%Ac_|3~aRnYh3`dG3x7
zhIYRSCJM9dO~)sWgD*>0SL}^^_1#%%W`xrHlA?X2I9&Iu?DYNa(spKWc?2}NTmW;~
zftIY|KNz?~Q@)M!(L!E?;uVqj@HbV-8VP&&Ck;*1OY!H^MHvu_Me;J9+95l18`O!!
z_@sFX)3`zibX?PlLeowg-tYBR+L{@R()wfBO1kv{y7yHZ=YXweVkCw9%ww+htn-xx
zeLm(mgGPSoSTMm4ZZR|CDSe{)ngd%L+^N^oWqr8T`BKrZAs5+mw`TLUdx+c-^4x~C
z;};iub43KlIQ2AM7v_58^78O|0G(`bc8?Ve#iG)|7sS5K2lEc0jGWTB<c<^n?ep-(
z0fK~tL+rR$LE0vJybMfYda}CxcVqwje#Hg~6J-79x}7qj&9Cjv%1}|dy_td0&-eCL
zh1KImV$TRB91*yoc(@DQHVcYJpfMJ>jn<8^Jp=L^Y%G7z&Y!#HRivc~{=NW`;^uAK
zrU?`Y>Gxeu6C}~I^>vPx2xdqQ<0?{m^Um?jeySw@ozv&^<PtVWTb3`(>**?^*gWqg
zAN4+wvgkKYpUVm*?_B_~s_3!Ofvjf>+e`jIfl)+8Vg4W|_k-gR;Zp}?*y4cM7NM5r
z9$t{|@vNY;kM4r5Cnjk56LE-A7&4#zSHlR@f5OsqpR`_LhgNX!>REG|?BbrO;zBnS
z7+bY&0dI~MijxknCIlD68PdIAmg*78i5jgm9=fXToq>DW%|7T+H(<ZcY~2?*j|cR6
zV9$=jQC?!Nh&2xd%Jkn5M`y$F0kyd*l&@<Pl_t4<bf50onWXpD=q|1r-@mreT4$=W
z()N9@wcAR~xoZxgZvAQko~VAy;2}XMPG5+-g>ai%eYMC!%>VwE+c|_2WUs?hoGn4V
z-nC=_mp;iq^6P0Ix|+xsiaWOWl30;Q;~ZdaxNVL^Xm%gNa6?&L50fXViLt^FoP3Xp
z>%_g2Wk?;p940w)4)4FWv~1o@l>2%sNcFg^G4xM@ctO_qe3GIMMA~aQa&hN)zXHjr
z+SE8l4|-17u+hW*`GH77bV^)ZorX(4k%|%7#ANu3U}Q=vtRCGGuEp@UaawSar4%Wb
zwMkm&))-r=a4h*mg*E9fg=Kc1id5VecUdsd`+C(;qiagte*59zU0mA&TkYt<uH=UC
zmRyyWSALEWtPP$z)*6b>5L8=umoPRyD<({OSH`Jif1?V9>n@&I*D`QhyrVdyKeODF
z)z{R>;J@`&<U1)P{=j{}gAwuerEQo8997fge_p4ept1?o_f{?7W$A0*zm7z{H|@uX
z*Jb<nhOdYw^RHAHVzEwp1fHvt-T7nL)38(GM+P^|%De5L$gmC_uP@ZbG@Ua2wYX-A
zX~OX#YlqH=vWiB1UGmv0_FKPQ+jgmfd&tXxkxwPAeu=_o8Ct}!I?Fy_qD1h>lJ!H1
zbfR-w`xX1t7ZBi4?QG>*wnm84y&3<+?$uA~MIjB{%6^7hMOOWmPF(Oxa{>L4zeLHG
z!m6Gvj>>w}D@Xq+{kHZF(FfD;RRa0B-#Tl?=`6bj26;h#MEfK#*$aU(Y|3c04UJH5
z8S%Nh8)%azR(|+41!gVx?Jl-;xS#%y5W!uls&#0cuST-fH^&6GNlsVS$E96FFcO8S
z9?EYXPBFwE^ZWH#vKC0(325zPLa#mW*V~VaDLO1EnbgC;!ul4Giew+hQJsC4Pxb3&
zdH<BjN!7Wl+-kNBjZ0kIJ)f(BcqX3OME7ur^3%q~_XZz3ma&10rza~lQ>hJ2)tU9G
zehp%pocGA0HfK*4s=Io8lYv!5$ZdGq!Fh9H{?<ZHi2a)X*M$c+>c?uDgyZl(WDQ!+
z)YI6%%8_0ZI~j*t=9ti8PCBBJdrD$Ds#~)!HeRuZKP@e^+eHU?O*9_w80Gff&?QO_
z>!}Vqe*1PZ>Ml16E?X}5GcXxo+g)0PZ1i9glQ5e{AuX+i5v(m_ki+Y>2pjjFdHPIl
z3@h9{Or&-PYDb^&LWMSt%dHR&!@oSY5X>SCZYH+ZAegehf_c&J75-?eTS`iO^~kx`
zmt^p=I6(6ghA3J&JJC_<vIj!)=I%{=uxDyVE>0Rc+rxbvUw!&rA^C$<bEdUVu~YY;
zGLdTW1Ysp{O=q`qAS}-{S>poW>Kbd6{YzPt<b^&<IEKjY{*I+-XX8uC1uKEUryl7Y
z+1XJ$WNvxfto#Q@n&-77cjd&G<tYPKspvnC@}w!n&qIf|S-zjcyaMl6+E`-JmpfRl
zVGTvNb$oL|gUU;w>7S>};c5?uhO{GgylQrWM=kXZ)23JE0#s5JN<QMsyQ$qL%qAmK
z>@I)=hnf!~qb9X8YC{y>i8=DXWdE{l@9>*T|BWm6d~h>0OT{DE2^;JcDWT%{KzIT4
zXDJ8t`pO1Md42ZBUI=z+j;&Lq<j2B+jQP5_g#UATGl#-Bj>R$)jO4sFUa=o7l7FKo
zv-<gL()qBRpVonTTz>poio2jlez>4#{RM!Koa#6Hb@?kILK-B#b>IsJQ4Yu<IebfX
zULPfy+!Rqqb0bTn3<cd+x#KiiDTJDs>^FK{cB)Aqq$bde$n$JiN5(+RkujtKL~IP?
rY%G?<or=w2>dV9E+Cq3E^5cO5`RC5E#rgum&rfvXMM`{mFUJ1?&jCf+

literal 0
HcmV?d00001