/* LIST VIEW */
#staff_3 .staff3-heading { text-align: center; }

#staff3-results { position: relative; }

#staff_3 .staff3-items.staff3-row { margin-bottom: 0; text-align: center; }

#staff_3 .staff3-items.staff3-row:last-of-type { margin-bottom: -2rem; }

#staff_3 .staff3-items.staff3-row.normal-list article { margin-bottom: 2rem; text-align: center; }

#staff_3 .staff3-items.staff3-row.pastors article { margin-bottom: 2rem; }

#staff_3 .staff3-items.staff3-row.featured article { text-align: center; margin-bottom: 2rem; }

#staff_3 .staff3-items article .staff3-image { position: relative; margin-bottom: 1em; overflow: hidden; border-radius: .5rem; padding: 12px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); }

#staff_3 .staff3-items article .staff3-image img { display: block; width: 100%; height: auto; box-sizing: border-box; border-width: 4px; border-style: solid; transition: all 0.2s ease-in-out; }

#staff_3 .staff3-items article .staff3-image:hover .staff3-rollover { opacity: 1; }

#staff_3 .staff3-items article .staff3-rollover { position: absolute; left: 16px; top: 16px; bottom: 16px; right: 16px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; transition: 0.4s; }

#staff_3 .staff3-items article .staff3-rollover .staff3-rollover-inner { position: absolute; top: 0; left: 0; width: 100%; height: 75%; height: calc(100% - 58px); /*buffer matches ul (li height + ul top calc + 10)*/ overflow-x: hidden; overflow-y: auto; }

#staff_3 .staff3-items article .staff3-rollover .staff3-rollover-inner a { position: relative; display: block; height: 100%; background: none !important; }

#staff_3 .staff3-items article .staff3-rollover .staff3-rollover-inner p { position: relative; display: inline-block; vertical-align: middle; width: 90%; padding: 1em 5% 0 5% !important; margin: 0 !important; font-size: 14px; line-height: 2em; text-align: center; }

#staff_3 .staff3-items article .staff3-rollover .staff3-rollover-inner span.spacer { height: 100%; display: inline-block; vertical-align: middle; }

#staff_3 .staff3-items article .staff3-rollover ul, .staff3-items article .staff3-rollover li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

#staff_3 .staff3-items article .staff3-rollover ul { position: absolute; left: 0; bottom: 20px; width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; }

#staff_3 .staff3-items article .staff3-rollover ul li { padding: 0 0.25rem !important; }

#staff_3 .staff3-items article .staff3-rollover ul li a { display: block; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 100%; border-width: 2px; border-style: solid; }

#staff_3 .staff3-items article .staff3-rollover ul li a .icon, #staff_3 .staff3-items article .staff3-rollover ul li a .fa, #staff_3 .staff3-items article .staff3-rollover ul li a .fab { display: inline-block; font-size: 16px; }

#staff_3 .staff3-items article .staff3-info p { font-size: 16px; }

#staff_3 .staff3-items article .staff3-info .name { margin-bottom: 0; line-height: 1.3; }

#staff_3 .staff3-items.pastors article .staff3-rollover .staff3-rollover-inner p { padding: 1em 10% 0 10% !important; width: 80%; font-size: 14px; }

/* DETAIL PAGE */
.staff3-items.staff3-detail article .staff3-info h3 { text-transform: uppercase; }

.staff3-items.staff3-detail article ul.staff3-social { list-style: none !important; margin: 0.75em 0 1.5em 0 !important; padding: 0 !important; }

.staff3-items.staff3-detail article ul.staff3-social li { display: inline-block; list-style: none !important; margin: 0 0.5em 0 0 !important; padding: 0 !important; }

.staff3-items.staff3-detail article ul.staff3-social li a { display: block; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 100%; text-decoration: none !important; border-width: 2px; border-style: solid; }

.staff3-items.staff3-detail article ul.staff3-social li a .icon, .staff3-items.staff3-detail article ul.staff3-social li a .fa, .staff3-items.staff3-detail article ul.staff3-social li a .fab { display: inline-block; font-size: 16px; }

#staff3-return { text-align: center; font-size: 13px; line-height: 1; }

@media (min-width: 768px) { #staff3-return { text-align: right; } }

#staff3-return a { display: inline-block; text-transform: uppercase; padding: 0.75em 2em; line-height: 1; font-weight: 700; }
