.left-col { background-color: @colorBg; background-repeat: no-repeat; background-size: cover; background-position: top; width: 300px; position: fixed; opacity: 1; .trans(); height: 100%; z-index: 999; .shadow(); .intrude-less { width: 76%; text-align: center; margin: 62px auto 0; } #header { width: 100%; height: 300px; position: relative; a { color: #696969; transition: color 0.3s; &:hover { color: #B0A0AA; } } .header-subtitle { text-align: center; color: @color9; font-size: 14px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .header-menu { font-weight: 300; line-height: 31px; text-transform: uppercase; float: none; min-height: 150px; margin-left: -12px; text-align: center; position: relative; ul { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); li { cursor: default; a { font-size: 14px; min-width: 300px; } } } } .header-smart-menu { font-size: 16px; margin-bottom: 20px; a { &:after { content: '/'; margin-left: 4px; } &:last-child { &:after { content: '' } } } } .profilepic { text-align: center; display: block; border: 5px solid @colorF; border-radius: 300px; width: 128px; height: 128px; margin: 0 auto; position: relative; overflow: hidden; background: #88acdb; .trans(); display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; text-align: center; &:hover { .picRotate(); } img { border-radius: 300px; width: 100%; height: 100%; opacity: 1; .trans(); &.show { width: 100%; height: 100%; opacity: 1; } } } .header-author { text-align: center; margin: 0.67em 0; font-size: 30px; transition: 0.3s; } } }