@CHARSET "UTF-8";
.author-block.top {background-color: #f7f7f7; margin-bottom: 20px; padding: 24px 0; }
.author-block.top > div {display: flex;}
.author-block.top .banner {border: 2px solid #d6e3ff;}
.author-block.top .banner:hover {border: 2px solid #ffc8bd;}
/*.author-block.top .banner.col { color: #fff; }*/
/*.author-block.top .banner.col .info { color: #ccc; }*/
/*.author-block.top .banner.col1 { background: #3e7e7e; }*/
/*.author-block.top .banner.col2 { background: #247996; }*/
/*.author-block.top .banner.col3 { background: #558650; }*/
/*.author-block.top .banner.col4 { background: #ab7f38; }*/
.author-block.top .page {display: flex; align-items: center; width: 48%; margin-right: 2%; }
.author-block.top .add-me { text-align: center; }
.add-me a { display: inline-block; padding: 4px 10px; background: #ef6c00; color: #fff; }
.banner { display: inline-block; padding: 10px 20px; box-sizing: border-box; text-decoration: none; position: relative; }
.banner.page img {border-radius: 50%; }
.banner.page .name { font-size: 20px; margin-bottom: 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; }
.banner.page .info { color: #999; }
.banner.page .desc { margin: 12px; }
@media screen and (max-width: 700px) { .author-block.top .page { width: 100%; } 
}