/** #grid **/ .grid#sc_our_team { overflow: hidden; width: 100%; } .grid#sc_our_team .sc_team_member { overflow: hidden; box-sizing: border-box; padding: 5px 5px 5px 5px; } .grid#sc_our_team .sc_team_member:hover .icons { bottom: 20px; } .grid#sc_our_team .sc_team_member:hover .sc_team_member_name, .grid#sc_our_team .sc_team_member:hover .sc_team_member_jobtitle { left: -100%; } .grid#sc_our_team .sc_team_member .wp-post-image { transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; } .grid#sc_our_team .sc_team_member .wp-post-image.zoomIn { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .grid#sc_our_team .sc_team_member .icons { z-index: 9; position: absolute; bottom: -100px; display: block; width: 100%; text-align: center; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; } .grid#sc_our_team .sc_team_member .icons.hidden { display: none; } .grid#sc_our_team .sc_team_member .sc_team_content { display: none; } .grid#sc_our_team .sc_team_member .icons img { width: 25px; } .grid#sc_our_team .sc_team_member .sc_team_member_jobtitle, .grid#sc_our_team .sc_team_member .sc_team_member_name { height: 24px; line-height: 26px; } .grid#sc_our_team .sc_team_member img.wp-post-image { width: 100%; height: auto !important; max-width: inherit; display: block; margin: 0 auto 0 auto; float: none; border: none; padding: 0 0 0 0; } .grid#sc_our_team .sc_team_member .sc_team_member_name { padding: 0 30px 0 30px; position: absolute; left: 0; bottom: 40px; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; overflow: hidden; opacity: 0.9; color: #fff; } .grid#sc_our_team .sc_team_member .sc_team_member_jobtitle { position: absolute; bottom: 16px; left: 0; padding: 0 30px 0 30px; color: #fff; transition: 0.35s all ease-in-out; -moz-transition: 0.35s all ease-in-out; -webkit-transition: 0.35s all ease-in-out; opacity: 0.9; } .grid#sc_our_team .sc_team_member_inner { height: 170px; overflow: hidden; background-size: cover; position: relative; text-align: center; background: #404040; } .grid#sc_our_team .sc_team_member .sc_team_member_overlay { position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; padding: 0 10px; color: #fff; background: rgba(50, 50, 50, 0.5); display: none; } .grid#sc_our_team .sc_team_member .sc_team_more { position: absolute; margin: -25px 0 0 0; width: 100%; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; top: -25px; } .grid#sc_our_team .sc_team_member .sc_team_more.show { top: 50%; transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .grid#sc_our_team .sc_team_member .sc_team_member_name a { color: #fff; } @media(min-width: 768px) { .grid#sc_our_team .sc_team_member { float: left; } } @media(min-width: 767px) and (max-width: 980px) { #sc_our_team.grid.sc-col4 .sc_team_member, #sc_our_team.grid.sc-col3 .sc_team_member, #sc_our_team.grid.sc-col2 .sc_team_member, #sc_our_team.grid.sc-col5 .sc_team_member { width: 45%; margin: 0 4% 15px 0; } } @media(max-width: 767px) { #sc_our_team.grid.sc-col4 .sc_team_member, #sc_our_team.grid.sc-col3 .sc_team_member, #sc_our_team.grid.sc-col2 .sc_team_member, #sc_our_team.grid.sc-col5 .sc_team_member { width: 100%; margin: 0 0 0 0; } } /** #grid-circles **/ .grid_circles#sc_our_team .sc_team_member:hover .sc_team_member_name, .grid_circles#sc_our_team .sc_team_member:hover .sc_team_member_jobtitle { left: -100%; } .grid_circles#sc_our_team .sc_team_member .icons { opacity: 0; position: absolute; text-align: center; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; bottom: 20%; margin: 0 auto 0 auto; display: block; width: 100%; z-index: 9; } .grid_circles#sc_our_team .sc_team_member .icons.hidden { display: none; } .grid_circles#sc_our_team .sc_team_member .sc_team_content { display: none; } .grid_circles#sc_our_team .sc_team_member:hover .icons { opacity: 1; } .grid_circles#sc_our_team .sc_team_member .icons img { width: 25px; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_jobtitle, .grid_circles#sc_our_team .sc_team_member .sc_team_member_name { height: 24px; line-height: 26px; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_name { position: absolute; top: 40%; left: 0; margin: 0 auto 0 auto; width: 70%; display: block; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; opacity: 0.9; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_jobtitle { position: absolute; top: 40%; left: 0; margin: 24px auto 24px auto; width: 75%; display: block; color: #fff; transition: 0.30s all ease-in-out; -moz-transition: 0.30s all ease-in-out; -webkit-transition: 0.30s all ease-in-out; opacity: 0.9; } #sc_our_team.grid_circles .sc_team_member { margin: 10px auto 10px auto; } .grid_circles#sc_our_team .sc_team_member .sc_team_more { position: absolute; margin: -25px 0 0 0; width: 100%; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; top: -25px; } .grid_circles#sc_our_team .sc_team_member .sc_team_more.show { top: 50%; transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .grid_circles#sc_our_team .sc_team_member .sc_team_member_name { color: #fff; } .grid_circles#sc_our_team .sc_team_member { float: left; overflow: hidden; border-radius: 100%; text-align: center; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #E2E2E2; position: relative; } .grid_circles#sc_our_team .sc_team_member .wp-post-image { border: none; padding: 0 0 0 0; float: none; margin: 0 0 0 0; width: 100%; height: 100%; max-width: inherit; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_overlay { position: absolute; width: 100%; left: 0; top: 0; height: 100%; background: rgba(50,50,50,0.7); color: #fff; display: none; border-radius: 100%; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_overlay .sc_team_member_name { margin: 30px 0 0 0; font-size: 18px; } .grid_circles#sc_our_team .icons img { width: 25px; } @media(min-width: 768px){ #sc_our_team.grid_circles.sc-col3 .sc_team_member { width: 31%; margin: 1% 1% 1% 1%; } #sc_our_team.grid_circles.sc-col4 .sc_team_member { width: 23%; margin: 1% 1% 1% 1%; } #sc_our_team.grid_circles.sc-col2 .sc_team_member { width: 48%; margin: 1% 1% 1% 1%; } } @media(min-width: 767px) and (max-width: 980px) { #sc_our_team.grid_circles.sc-col4 .sc_team_member, #sc_our_team.grid_circles.sc-col3 .sc_team_member, #sc_our_team.grid_circles.sc-col2 .sc_team_member, #sc_our_team.grid_circles.sc-col5 .sc_team_member { width: 45%; margin: 0 4% 15px 0; } } @media( max-width : 767px ) { #sc_our_team.grid_circles.sc-col4 .sc_team_member, #sc_our_team.grid_circles.sc-col3 .sc_team_member, #sc_our_team.grid_circles.sc-col2 .sc_team_member, #sc_our_team.grid_circles.sc-col5 .sc_team_member { width: 100%; } } /** #grid-circles-2 **/ .grid_circles2#sc_our_team .sc_team_member .icons { opacity: 0; position: absolute; text-align: center; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; bottom: 20%; margin: 0 auto 0 auto; display: block; width: 100%; z-index: 9; } .grid_circles2#sc_our_team .sc_team_member .icons.hidden { display: none; } .grid_circles2#sc_our_team .sc_team_member .sc_team_content { display: none; } .grid_circles2#sc_our_team .sc_team_member:hover .icons { opacity: 1; } .grid_circles2#sc_our_team .sc_team_member .icons img { width: 25px; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_name { margin: 0 auto 0 auto; text-align: center; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_name a { border: none; box-shadow: none; color: #fff; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_jobtitle { margin: 24px auto 24px auto; } .grid_circles2#sc_our_team .sc_team_member:hover .sc_team_member_name, .grid_circles2#sc_our_team .sc_team_member:hover .sc_team_member_jobtitle { opacity: 1; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_name, .grid_circles2#sc_our_team .sc_team_member .sc_team_member_jobtitle { position: absolute; top: 40%; left: 0; transition: 0.45s all ease-in-out; -moz-transition: 0.45s all ease-in-out; -webkit-transition: 0.45s all ease-in-out; z-index: 99; width: 100%; text-align: center; color: #fff; opacity: 0; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_jobtitle span { display: inline-block; padding: 5px 0 0 0; } .grid_circles2#sc_our_team .sc_team_member { float: left; overflow: hidden; border-radius: 100%; text-align: center; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #E2E2E2; position: relative; } .grid_circles2#sc_our_team .sc_team_member .wp-post-image { border: none; padding: 0; float: none; margin: 0; width: 100%; height: 100%; max-width: inherit; } .grid_circles2#sc_our_team .sc_team_member .sc_team_member_overlay { position: absolute; width: 100%; left: 0; top: 0; height: 100%; background: rgba(50, 50, 50, 0.7); color: #ffffff; display: none; border-radius: 100%; } .grid_circles#sc_our_team .sc_team_member .sc_team_member_overlay .sc_team_member_name, .grid_circles2#sc_our_team .sc_team_member .sc_team_member_overlay .sc_team_member_name { margin: 30px 0 0 0; font-size: 18px; } .grid_circles2#sc_our_team .icons img { width: 25px; } @media(min-width: 768px) { #sc_our_team.grid_circles2.sc-col3 .sc_team_member { width: 31%; margin: 1% 1% 1% 1%; } #sc_our_team.grid_circles2.sc-col4 .sc_team_member { width: 23%; margin: 1% 1% 1% 1%; } #sc_our_team.grid_circles2.sc-col2 .sc_team_member { width: 48%; margin: 1% 1% 1% 1%; } } @media(min-width: 767px) and (max-width: 980px) { #sc_our_team.grid_circles2.sc-col4 .sc_team_member, #sc_our_team.grid_circles2.sc-col3 .sc_team_member, #sc_our_team.grid_circles2.sc-col2 .sc_team_member, #sc_our_team.grid_circles2.sc-col5 .sc_team_member { width: 45%; margin: 0 4% 15px 0; } } @media(max-width : 767px) { #sc_our_team.grid_circles2.sc-col4 .sc_team_member, #sc_our_team.grid_circles2.sc-col3 .sc_team_member, #sc_our_team.grid_circles2.sc-col2 .sc_team_member, #sc_our_team.grid_circles2.sc-col5 .sc_team_member { width: 100%; margin: 10px 0 10px 0; } }