@import"https://fonts.googleapis.com/css?family=Roboto:300,500,400";*,*:before,*:after{box-sizing:border-box}body{font-family:"Roboto",sans-serif}.AlphabetNav{top:0;right:0;width:100%;display:flex;align-items:flex-start;justify-content:space-around;flex-flow:wrap row;padding:.5rem;background:#f8f8ff}.AlphabetNav a{display:flex;justify-content:center;padding:.5em;border-radius:8px;font-size:1.2em;line-height:1;font-weight:500;text-decoration:none;color:#a9a9a9}.AlphabetNav a:hover{background:#ddd;color:#444}.AlphabetNav .active{background:#f46353;color:#fff}.ContactList{padding:10em 2rem 0;display:flex;flex-wrap:wrap;justify-content:space-between}.Contact{display:flex;align-items:center;width:90%}.ContactList .Contact{margin-bottom:1.5rem}.Contact-avatar{margin:0 1em 0 0;width:30%;min-width:60px;max-width:100px;border-radius:50%;background:#a7c031}.Contact-name{margin:0;font-size:1.3em;font-weight:500;color:#a9a9a9}@media(min-width: 400px){.AlphabetNav{top:2vh;right:0;height:90vh;width:9em}.AlphabetNav a{width:calc(33.3333333333% - .3em)}.ContactList{padding-top:2rem}}@media(min-width: 400px)and (min-height: 600px){.AlphabetNav{width:6em}.AlphabetNav a{width:calc(50% - .5em);margin:.25em}}@media(min-width: 800px){.AlphabetNav{top:0;display:flex;align-items:flex-start;flex-flow:nowrap row;justify-content:space-around;width:100%;height:auto;background:#f8f8ff}.AlphabetNav a{margin:.5em 0;padding:.5em 0}.ContactList{padding-top:6rem}.Contact{width:calc(33.3333333333% - 2rem)}}