/*======================================== AUTHOR SINGLE PAGE STYLE =========================================*/ .author-single { padding: 30px; border-radius: 8px; margin-bottom: 30px; background: var(--white); } .author-content { margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .author-image { margin-right: 20px; } .author-image img { width: 120px; height: 120px; border-radius: 50%; border: 8px solid var(--chalk); } .author-info { margin-top: 10px; } .author-name { margin-left: 10px; text-transform: capitalize; } .author-mail { color: var(--primary); margin-bottom: 10px; margin-left: 10px; font-weight: 400; } .author-social li { display: inline-block; } .author-social li a { width: 40px; height: 40px; font-size: 16px; line-height: 40px; border-radius: 50%; text-align: center; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .author-social li a:hover { color: var(--white); background: var(--primary); } .author-bio { margin-bottom: 30px; } .author-meta { display: -ms-grid; display: grid; grid-gap: 15px; -ms-grid-columns: (minmax(220px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); -ms-grid-rows: auto; grid-template-rows: auto; } .author-meta li { padding: 10px 0px; border-radius: 6px; text-align: center; background: var(--chalk); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .author-meta li:hover { background: var(--primary); color: var(--white); } .author-meta li:hover i { color: var(--white); } .author-meta li i { color: var(--primary); margin-right: 6px; font-size: 16px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .top-filter { margin-bottom: 30px; } @media (max-width: 575px) { .author-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .author-image { margin: 0px; } }