/*================================================ 07. Attorneys CSS =================================================*/ .ic-attorneys-c { .gutter-sizer { width: 30px; } .grid-sizer, .grid-item { width: calc(100%/3 - 20px); } } .ic-dropdown-gallery { width: 272px; display: inline-block; @include transition(all .5s ease); position: relative; font-size: 16px; color: $text-color; height: 40px; line-height: 38px; border: 1px solid $text-color; padding: 0 15px; text-align: left; cursor: pointer; text-transform: capitalize; .ic-select { display: block; >i { position: absolute; font-size: 21px; cursor: pointer; @include transition(all .3s ease-in-out); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 15px; } } &.active .ic-select>i { -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .ic-dropdown-menu-gallery { padding: 0; list-style: none; position: absolute; background-color: #fff; width: 100%; left: 0; @include box-shadow(0px 3px 10px 0px rgba(0, 0, 0, 0.4)); overflow: hidden; display: none; max-height: 250px; overflow-y: auto; z-index: 10; border-top: 1px solid #fff; margin: 0; top: 102%; li { padding: 0 15px; @include transition(all .2s ease); cursor: pointer; &:hover { background-color: #f6f6f6; } } &:focus { border: none; outline: none; @include box-shadow(none); } } } .ic-filter-sort { @include flexbox(); @include justify-content(space-between); margin-bottom: 40px; .ic-sort-right { span { font-size: 16px; margin-right: 32px; display: inline-block; } } } /*--- Attorneys Details Page ---*/ .ic-attoryney-person { .ic-image { img { border: 10px solid $primary; } margin-bottom: 34px; } .ic-text { h3 { font-weight: bold; } p { font-weight: bold; font-size: 14px; } } } .ic-single-contact-box { @include flexbox(); .ic-icon { min-width: 50px; margin-right: 30px; } } .ic-attorneys .ic-single-block:last-child { margin-bottom: 0; } .ic-attorneys-left-col { .ic-contact-left-content { .ic-single-block { .ic-icon { margin-bottom: 5px; } h6 { font-weight: 900; color: $primary; font-family: "lato", sans-serif; } p { font-size: 14px; } } } ul.social li a { border: 1px solid $primary; i { color: $primary; } &:hover { background-color: $primary; i { color: $white; } } } .ic-message-for-h2 { margin-bottom: 30px; } } .ic-attorneys{ .ic-single-block{ margin-bottom: 50px; @media screen and (max-width:1499px){ margin-bottom: 40px; } } } /*---Attorney Section---*/ #ic-talented-attorneys { padding-bottom: 70px; @media #{$laptop-device} { padding-bottom: 50px; } @media #{$desktop-device} { padding-bottom: 50px; } } section#ic-talented-attorneys { .ic-single-talented-attorneys { @media screen and (max-width: 991.98px) { max-width: 350px; } margin-left: auto; margin-right: auto; } } .ic-single-talented-attorneys { margin-bottom: 30px; .ic-img-box { position: relative; overflow: hidden; >a { width: 100%; } img { width: 100%; @include transition(0.4s ease-out); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: scale(.98); -moz-transform: scale(.98); -ms-transform: scale(.98); transform: scale(.98); } .ic-img-hover { position: absolute; bottom: 0; background: rgba(34, 33, 17, 0.52); width: 100%; padding: 20px; text-align: center; -webkit-transform: perspective(300px) rotatex(60deg); -moz-transform: perspective(300px) rotatex(60deg); -ms-transform: perspective(300px) rotatex(60deg); transform: perspective(300px) rotatex(60deg); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; opacity: 0; @include transition(0.4s ease-out); ul.social { li { margin-bottom: 0; &:not(:last-child) { margin-right: 17px; } &:hover { a { background-color: $primary; border: 1px solid $primary; } } } } } } .ic-text { margin-top: 36px; h6 { a { color: $text-color; } } h6, p { @include transition(.3s); } p { font-size: 14px } } &:hover { .ic-img-box { img { @include scale(1); } .ic-img-hover { opacity: 1; @include transform(perspective(300px) rotatex(0deg)); } } .ic-text { h6 { a { color: $primary; } } p { color: $primary; } } } }