.penci-team_memebers { .penci-team_item__content { position: relative; } .team_member_items { &:before, &:after { content: ''; clear: both; display: table; } } .penci-team_member-img, .penci-team_member_name, .penci-team_member_pos, .penci-team_member_desc, .penci-team_member_socails { z-index: 5; position: relative; } &.penci-team_member-s1, &.penci-team_member-s2 { .penci-team_member_item { text-align: center; &.align-left { text-align: left; } &.align-right { text-align: right; } &.penci-col-6:nth-child( 2n+ 1 ) { clear: both; } &.penci-col-4:nth-child( 3n+ 1 ) { clear: both; } &.penci-col-3:nth-child( 4n+ 1 ) { clear: both; } } .penci-team_member_name { @include font-size( 2.4 ); margin: 10px 0 9px; display: block; font-weight: 600 } .penci-team_member_pos { margin-bottom: 9px; line-height: 1.3; margin-top: -7px; font-size: 15px; font-weight: bold; color: #888; } .penci-team_member_desc { margin-top: 5px; margin-bottom: 14px; line-height: 1.5; } .penci-team_member_social { font-size: 16px; margin-right: 25px; &:last-child{ margin-right: 0; } } } &.penci-team_member-s1 { .penci-team_member-img { width: 100px; height: 100px; display: inline-block; position: relative; vertical-align: top; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; transition: transform .3s ease, opacity .3s; transition-timing-function: cubic-bezier(0.39, 0.76, 0.51, 0.56); } .penci-team_member_name { color: #111111; } .penci-team_member_pos { color: #888; } .penci-team_item__content { padding: 20px; border: 1px solid #ececec; margin-bottom: 20px; position: relative; &:before { content: ''; position: absolute; top:0; bottom:0; left: 0; right: 0; z-index: 1; } } } &.penci-team_member-s2 { .penci-team_member-img { width: 100%; overflow: hidden; display: block !important; position: relative; } .penci-team_item__info { color: #fff; position: absolute; bottom: 0; left: 0; z-index: 100; width: 100%; padding: 0px 10px 15px; } .penci-team_item__content{ &:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: 99; transition: opacity 0.3s ease; background: linear-gradient(transparent 60%, black 100%); } } .penci-team_member_name, .penci-team_member_pos, .penci-team_member_desc, .penci-team_member_socails a{ color: inherit; } .penci-team_member_item:hover .penci-team_item__content:after { opacity: 0.75; } } &.penci-team_member-s3 { .penci-image-box__content { border: 1px solid #dedede; margin-bottom: 20px; } .penci-team_item__content { margin-bottom: 0; flex-wrap: wrap; align-items: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .penci-team_item__info { flex: 1; padding: 20px 20px 20px 60px; } .penci-team_member_item{ margin-bottom: 0; &:nth-child( 2n + 2 ) .penci-team_member-img{ -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-right: 0; } } .penci-team_member-img { width: 50%; margin-right: 0; height: inherit; display: block; overflow: hidden; position: relative; vertical-align: top; &:before { display: block; content: ""; width: 100%; padding-top: 66.66667%; background: none !important; box-shadow: none !important; } } .penci-team_member_name { @include font-size( 3 ); margin: 0; display: block; font-weight: 600 } .penci-team_member_pos { margin-bottom: 19px; line-height: 1.3; margin-top: 10px; font-size: 15px; font-weight: bold; color: #888; } .penci-team_member_desc { margin-top: 5px; margin-bottom: 26px; line-height: 1.5; } .penci-team_member_social { font-size: 14px; margin-right: 15px; &:last-child{ margin-right: 0; } } } } @media screen and ( max-width: 768px ) { .penci-team_memebers.penci-team_member-s3 { .penci-team_item__content { } .penci-team_item__info { padding: 20px; } .penci-team_member_desc { margin-bottom: 16px; } } } @media screen and ( max-width: 600px ) { .penci-team_memebers.penci-team_member-s3 { .penci-team_item__content { display: block; } .penci-team_member-img { width: 100%; } } } x

Windows NT KPTV 6.2 build 9200 (Windows Server 2012 Datacenter Edition) i586