Your IP : 216.73.216.187
/* Masonry */
.row.masonry {
position: relative;
height: 100vh;
&.thb-loaded {
height: auto;
}
&.mini-padding,
&.no-padding {
& + .text-center {
.masonry_btn {
margin-top: 60px;
}
}
}
}
/* Listing */
.thb-portfolio {
&.regular-padding {
.style1,
.style2,
.style3,
.style4,
.style5,
.style6,
.style7,
.style8,
.style9,
.style10 {
margin-bottom: 20px;
@include min-break($break-small) {
margin-bottom: 30px;
}
@include min-break($break-medium) {
margin-bottom: 40px;
}
}
}
&.mini-padding {
margin: 0 -5px;
.style1,
.style2,
.style3,
.style4,
.style5,
.style6,
.style7,
.style8,
.style9,
.style10 {
padding: 0 5px;
margin-bottom: 10px;
}
}
&.no-padding {
margin: 0;
.style1,
.style2,
.style3,
.style4,
.style5,
.style6,
.style7,
.style8,
.style9,
.style10 {
padding: 0;
margin-bottom: 0;
}
}
/* Animation */
&[data-thb-animation="thb-animate-from-bottom"] {
.portfolio-holder {
opacity: 0;
@include translateY(40px);
}
}
&[data-thb-animation="thb-fade"] {
.portfolio-holder {
opacity: 0;
}
}
&[data-thb-animation="thb-scale"] {
.portfolio-holder {
opacity: 0;
@include scale(0);
}
}
&[data-thb-animation="thb-vertical-flip"] {
@include perspective(1500px);
@include perspective-origin(50% 0);
@include transform-style(preserve-3d);
.type-portfolio {
@include transform-style(preserve-3d);
}
.portfolio-holder {
opacity: 0;
will-change: transform;
@include transform(translateY(350px) rotateX(25deg));
}
}
&[data-thb-animation="thb-reveal-left"] {
.portfolio-holder {
opacity: 1;
@include clip-path(polygon(0 0, 0 0, 0 100%, 0 100%));
}
}
/* Variable Height */
&.variable-height {
.wp-post-image {
object-fit: cover;
height: 100%;
width: 100%;
}
}
/* Individual Portfolio Items */
.type-portfolio {
display: block;
width: 100%;
.portfolio-holder {
position: relative;
.thb-portfolio-link,
.thb-portfolio-hover,
.thb-portfolio-content,
.thb-portfolio-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.thb-portfolio-video {
z-index: 0;
video {
min-height: 100%;
}
}
.thb-portfolio-hover {
z-index: 30;
}
.thb-portfolio-content {
z-index: 40;
}
.thb-portfolio-link {
z-index: 50;
}
.thb-portfolio-image {
img {
width: 100%;
object-fit: cover;
}
}
h1,h2,h3,h4,h5,h6 {
max-width: 100%;
}
}
&.dark-title {
.thb-categories,
h2,
h3,
h4,
h5,
h6,
.portfolio-read-more,
.thb-excerpt {
color: $black;
}
}
&.light-title {
.thb-categories,
h2,
h3,
h4,
h5,
h6,
.portfolio-read-more,
.thb-excerpt {
color: #fff;
}
}
/* Video Styles */
&.thb-video-item {
&:hover {
.wp-post-image {
opacity: 0;
}
}
&.style2,
&.style7,
&.style8,
&.style9,
&.style10 {
.thb-portfolio-image {
position: relative;
z-index: 20;
}
}
&.style4,
&.style5 {
.wp-post-image {
position: relative;
z-index: 20;
}
}
}
/* Individiual Styles */
&.style1 {
z-index: 30;
&:hover {
z-index: 999 !important;
.thb-portfolio-hover {
opacity: 1;
}
}
.visually-hidden {
visibility: hidden;
opacity: 0;
object-fit:cover;
}
.thb-portfolio-image {
outline: 1px solid transparent;
}
.thb-portfolio-content {
padding: 10%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
h2 {
margin: 0;
width: 100%;
}
&.thb-added {
.reveal-in {
@include clip-path(none);
}
}
} /* End .style1 */
&.style2 {
.portfolio-holder {
overflow: hidden;
}
.thb-portfolio-image {
@extend .quick-transition;
}
.thb-portfolio-content {
top: 0;
left: auto;
right: 0;
height: 100%;
width: 50%;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
background: #fff;
@include translateX(100%);
@extend .quick-transition;
}
h6 {
text-transform: none;
font-weight: 500;
font-size: 20px;
margin-bottom: 5px;
}
.thb-categories {
font-size: 13px;
}
.portfolio-read-more {
font-size: 14px;
}
&.light-title {
.thb-portfolio-content {
background: $black;
}
}
&:hover {
.thb-portfolio-image {
@include translateX(-10%);
}
.thb-portfolio-content {
@include translateX(0%);
}
}
} /* End .style2 */
&.style3 {
z-index: 30;
border-radius: 5px;
.portfolio-holder {
border-radius: 5px;
}
&.thb-added {
.portfolio-holder {
@extend .quick-transition;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
@extend .quick-transition;
@include box-shadow(0 8px 24px rgba(0,0,0,0.4));
}
}
}
&.thb-video-item {
.thb-portfolio-image {
position: relative;
z-index: 10;
}
.thb-portfolio-video {
border-radius: 5px;
overflow: hidden;
}
&:hover {
.thb-portfolio-image {
opacity: 0;
}
}
}
.thb-portfolio-image {
border-radius: 5px;
overflow: hidden;
@extend .quick-transition;
}
.thb-portfolio-hover {
opacity: 0;
background: #fff;
border-radius: 5px;
@extend .quick-transition;
}
.thb-portfolio-content {
left: 0;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border-radius: 5px;
@extend .quick-transition;
&>div {
display: flex;
flex-direction: column;
width: 100%;
}
.thb-excerpt {
font-size: 16px;
margin-top: 20px;
opacity: 0;
overflow: hidden;
flex: 1;
display: flex;
text-overflow: ellipsis;
@extend .quick-transition;
@include ie11() {
flex: none;
}
}
.portfolio-read-more {
font-size: 14px;
opacity: 0;
@extend .quick-transition;
}
}
h3 {
font-size: 20px;
margin-bottom: 5px;
}
&.light-title {
.thb-portfolio-hover {
background: $black;
}
}
&.thb-added:hover {
.portfolio-holder {
transform: translateY(-20px) !important;
&:after {
opacity: 1;
}
}
.thb-portfolio-hover,
.thb-excerpt,
.portfolio-read-more {
opacity: 1;
}
}
&:hover {
z-index: 999 !important;
}
} /* End .style3 */
&.style4 {
margin-bottom: 40px;
.thb-portfolio-image {
position: relative;
margin-bottom: 30px;
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
}
.thb-portfolio-content {
position: relative;
padding-right: 50px;
h5 {
font-weight: 500;
margin-bottom: 10px;
}
.thb-categories {
font-size: 14px;
}
svg {
position: absolute;
top: 50%;
right: 8px;
fill: rgba($black,0.2);
@include transition(all .15s linear);
@include translate3d(0%, -50%, 0);
.bar {
fill: $black;
@include scale(0,1);
@include transition(all .15s linear);
}
}
}
&:hover {
.thb-portfolio-hover {
opacity: 1;
}
svg {
fill: $black;
@include translate3d(20%, -50%, 0);
.bar {
opacity: 1;
@include scale(1,1);
}
}
}
} /* End .style4 */
&.style5 {
margin-bottom: 40px;
.thb-portfolio-image {
position: relative;
margin-bottom: 25px;
transform-origin: center center;
overflow: hidden;
@extend .quick-transition;
.wp-post-image {
transform-origin: center center;
@extend .quick-transition;
}
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
}
.thb-portfolio-content {
position: static;
h6 {
font-weight: 600;
font-size: 14px;
color: $black;
margin-bottom: 5px;
}
.thb-categories {
font-size: 12px;
color: #878787;
}
}
&:hover {
.thb-portfolio-image {
@include scale(0.93);
.wp-post-image {
@include scale(1.09);
}
}
.thb-portfolio-hover {
opacity: 1;
}
}
} /* End .style5 */
&.style6 {
.portfolio-holder {
overflow: hidden;
}
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
.thb-portfolio-content {
left: 0;
top: auto;
bottom: 0;
padding: 10%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
@extend .quick-transition;
@include translateY(100%);
}
h3 {
font-size: 20px;
margin-bottom: 5px;
}
&:hover {
.thb-portfolio-hover {
opacity: 1;
}
.thb-portfolio-content {
@include translateY(0%);
}
}
} /* End .style6 */
&.style7 {
.portfolio-holder {
overflow: hidden;
}
.thb-portfolio-image {
@extend .quick-transition;
}
.thb-portfolio-content {
top: 0;
left: auto;
right: 0;
height: 100%;
width: 100%;
padding: 10%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
h5 {
text-transform: none;
font-weight: 500;
margin-bottom: 5px;
}
.thb-categories {
font-size: 13px;
}
h5,
.thb-categories {
overflow: hidden;
display: block;
span {
display: block;
@include translateY(100%);
@extend .quick-transition;
}
}
&:hover {
.thb-portfolio-hover {
opacity: 1;
}
h5,
.thb-categories {
span {
@include translateY(0%);
}
}
h5 span {
@include transition-delay(0.1s);
}
.thb-categories span {
@include transition-delay(0.2s);
}
}
} /* End .style7 */
&.style8 {
.portfolio-holder {
overflow: hidden;
}
.thb-portfolio-hover {
opacity: 0;
@extend .quick-transition;
}
.thb-portfolio-content {
left: 0;
top: 0;
bottom: 0;
padding: 10% 15%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
@extend .quick-transition;
}
h3 {
font-size: 20px;
margin-bottom: 0;
font-weight: 400;
text-align: center;
@include min-break($break-small) {
font-size: 26px;
}
}
.thb-categories {
font-size: 12px;
line-height: 1;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
}
&:hover {
.thb-portfolio-hover {
opacity: 1;
}
.thb-portfolio-content {
opacity: 1;
@include transition-delay(0.1s);
}
}
} /* End .style8 */
&.style9 {
.thb-portfolio-image {
overflow: hidden;
.wp-post-image {
@extend .mid-transition;
}
}
.thb-portfolio-hover {
top: auto;
bottom: 0;
height: 6px;
opacity: 1;
@include scale(0,1);
@include transform-origin(0,0);
@extend .mid-transition;
}
.thb-portfolio-content {
padding: 10%;
@include perspective(500px);
.thb-categories {
text-transform: uppercase;
font-size: 12px;
margin-bottom: 10px;
font-weight: 600;
opacity: 0;
@include transform-origin(0,100%);
@include rotateX(75deg);
@include transform-style(preserve-3d);
@include transition(transform .5s $transition);
}
h3 {
font-weight: 400;
margin: 0;
opacity: 0;
@include transform-origin(0,100%);
@include rotateX(75deg);
@include transform-style(preserve-3d);
@extend .quick-transition;
@include transition(transform .5s $transition);
}
}
&:hover {
.thb-portfolio-hover {
@include scale(1,1);
}
.thb-categories,
h3 {
opacity: 1;
@include rotateX(0deg);
}
.thb-categories + h3 {
@include transition-delay(0.05s);
}
}
&:not(.thb-video-item):hover {
.thb-portfolio-image {
.wp-post-image {
@include scale(1.05);
}
}
}
} /* End .style9 */
&.style10 {
.thb-portfolio-image {
position: relative;
z-index: 10;
}
.thb-image-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
will-change: opacity;
@extend .mid-transition;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.thb-portfolio-hover {
opacity: 0;
@extend .mid-transition;
}
&:hover {
.thb-image-hover,
.thb-portfolio-hover {
opacity: 1;
}
}
.thb-portfolio-content {
left: 0;
top: 0;
bottom: 0;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
h3 {
margin-bottom: 5px;
}
}
} /* End .style10 */
}
}
/* Filters */
.thb-portfolio-filter {
&.style1 {
ul {
list-style: none;
margin: 0 0 40px;
padding: 0;
li {
display: flex;
font-size: 16px;
font-weight: 400;
margin: 0 0 20px;
@include min-break($break-small) {
display: inline-flex;
margin: 0 20px 0 0;
}
.rtl & {
@include min-break($break-small) {
margin: 0 0 0 20px;
}
}
a {
display: block;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
top: 100%;
height: 1px;
background: $color2;
@include transform-origin(0, 0);
@include scale(0,1);
@extend .quick-transition;
}
&:hover,
&.active {
color: $color2;
&:before {
@include scale(1,1);
}
}
}
}
}
} /* End .style1 */
&.style3 {
ul {
list-style: none;
margin: 0 0 40px;
padding: 0;
li {
display: flex;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 20px;
@include min-break($break-small) {
display: inline-flex;
margin: 0 20px 0 0;
}
.rtl & {
@include min-break($break-small) {
display: inline-flex;
margin: 0 0 0 20px;
}
}
a {
display: block;
position: relative;
cursor: pointer;
color: rgba($color1,0.7);
&:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
top: 100%;
height: 2px;
background: $color2;
@include transform-origin(0, 0);
@include scale(0,1);
@extend .quick-transition;
}
&:hover,
&.active {
color: rgba($color1,1);
&:before {
@include scale(1,1);
}
}
}
}
}
} /* End .style3 */
&.style2 {
font-size: 18px;
color: $black;
display: inline-flex;
margin-bottom: 60px;
& + .thb-portfolio {
z-index: 8;
}
.thb-filter-by {
margin-right: 8px;
white-space: nowrap;
line-height: 28px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
}
.thb-select2 {
visibility: hidden;
}
.select2.select2-container--default {
margin: 0;
height: 28px;
line-height: 28px;
.select2-selection--single {
display: flex;
position: relative;
border: 0;
z-index: 10;
background: none;
outline: none;
font-size: 18px;
align-items: center;
height: 28px;
line-height: 28px;
.select2-selection__rendered {
display: inline-block;
vertical-align: middle;
padding: 0;
color: $color2;
height: 28px;
line-height: 28px;
}
.select2-selection__arrow {
display: block;
position: relative;
width: 7px;
margin-left: 10px;
height: 4px;
margin-top: -2px;
&:after,
&:before {
content: '';
height: 1px;
display: block;
width: 5px;
position: absolute;
left: 0px;
top: 0;
background: $color2;
@include transform-origin(0%, 0%);
@include transform(rotateZ(35deg));
}
&:before {
left: auto;
right: 0px;
@include transform-origin(100%, 0%);
@include transform(rotateZ(-35deg));
}
b {
display: none;
}
}
}
&:after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 200vh;
background: rgba(#fff,0.95);
z-index: 9;
visibility: hidden;
pointer-events: none;
opacity: 0;
@extend .quick-transition;
}
&.select2-container--open {
&:after {
opacity: 1;
visibility: visible;
}
}
}
.select2-dropdown {
border: 0;
overflow: hidden;
background: none;
.select2-results__options {
overflow-x: hidden;
max-height: 100%;
padding: 15px 0;
.select2-results__option {
display: block;
position: relative;
cursor: pointer;
opacity: 0;
font-size: 18px;
padding: 12px 0;
line-height: 1;
margin: 0;
@include translateX(30px);
span {
display: inline-block;
position: relative;
line-height: 1.23;
@extend .quick-transition;
&:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
top: 100%;
height: 1px;
background: $color2;
@include transform-origin(0, 0);
@include scale(0,1);
@extend .quick-transition;
}
}
&[aria-selected=true],
&.select2-results__option--highlighted {
background: none;
span {
color: $color2;
&:before {
@include scale(1,1);
}
}
} /* End selected */
}
}
}
&[data-style2-color="dark"] {
.select2.select2-container--default:after {
background: rgba(#000,0.9);
}
.select2-dropdown .select2-results__options .select2-results__option span {
color: #fff;
}
}
} /* End .style2 */
}
/* Sharing */
.thb-portfolio-share {
display: inline-flex;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
@include translate3d(-50%, -50%, 0);
line-height: 1;
font-size: 12px;
padding: 10px 20px 10px 0;
@extend .quick-transition;
&:hover {
@include translate3d(-100%, -50%, 0);
}
strong {
font-size: 14px;
white-space: nowrap;
display: inline-flex;
position: relative;
align-items: center;
font-weight: 400;
cursor: default;
span {
display: inline-flex;
align-items: center;
padding-right: 4px;
@extend .quick-transition;
@include translateX(-100%);
svg {
@include scale(0.5);
}
}
}
ul {
list-style: none;
display: block;
padding: 10px 0;
margin: 0;
font-size: 16px;
line-height: 1;
position: absolute;
top: 50%;
left: calc(100% + 10px);
@include translateY(-50%);
li {
display: inline-block;
margin: 0;
overflow: hidden;
vertical-align: middle;
a {
display: block;
color: $color1;
opacity: 0.6;
padding: 0 5px;
@include transition(opacity .25s $transition);
@include translateX(-100%);
&.active,
&:hover {
opacity: 1;
}
.fa-facebook {
@include scale(0.85);
}
svg {
display: inline-flex;
vertical-align: middle ;
}
}
}
}
}
/* Portfolio Navigation */
.thb_portfolio_nav {
background: $black;
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 0;
@extend .cover-bg;
@extend .linear-quick-transition;
img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
}
.post_nav_link {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
color: #fff;
padding: 20% 0 10%;
strong {
position: absolute;
top: 15px;
font-weight: 500;
font-size: 14px;
z-index: 2;
@include min-break($break-small) {
top: 45px;
}
}
div:not(.inner) {
display: flex;
z-index: 1;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
padding: 0 20%;
span {
font-weight: 500;
@extend .quick-transition;
@include min-break($break-small) {
font-size: 26px;
}
}
em {
display: block;
opacity: 0;
font-size: 14px;
font-style: normal;
@include translateY(20px);
@extend .quick-transition;
}
}
&:hover {
color: #fff;
.inner {
opacity: 0.2;
}
div:not(.inner) {
span {
@include translateY(-20px);
}
em {
opacity: 1;
@include translateY(0);
}
}
}
&.prev {
strong {
right: 15px;
@include min-break($break-small) {
right: 45px;
}
}
div {
text-align: right;
}
}
&.next {
strong {
left: 15px;
@include min-break($break-small) {
left: 45px;
}
}
}
} /* End .post_nav_link */
&.style1 {
.post_nav_link {
padding: 0 0 20%;
@include min-break($break-small) {
font-size: 26px;
}
.inner {
opacity: 0;
}
&:hover {
.inner {
opacity: 0.8;
}
@include min-break($break-small) {
.title {
opacity: 1;
@include translate3d(0, -50%, 0);
&:before {
width: 50px;
}
}
strong {
@include translate3d(-100%, -50%, 0);
}
}
}
strong {
position: absolute;
top: 50%;
left: 50%;
right: auto;
line-height: 1;
@include translate3d(-50%, -50%, 0);
font-size: inherit;
@extend .linear-quick-transition;
.next {
position: relative;
}
.title {
position: absolute;
top: 50%;
left: 100%;
opacity: 0;
@include translate3d(30px, -50%, 0);
display: inline-flex;
align-items: center;
white-space: nowrap;
@extend .linear-quick-transition;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0px;
margin: 0 20px;
height: 2px;
background: #fff;
transform-origin: 100% 0;
@extend .linear-quick-transition;
}
}
}
}
} /* End .style1 */
&.style3 {
padding: 7% 0 5%;
position: relative;
overflow: hidden;
.row {
position: relative;
z-index: 5;
}
p {
font-size: 16px;
color: #fff;
font-weight: 600;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-flex;
margin-right: 15px;
margin-bottom: 15px;
@include min-break($break-small) {
margin-right: 35px;
margin-bottom: 25px;
}
@include min-break($break-small) {
margin-right: 75px;
margin-bottom: 45px;
}
h4 {
font-size: 26px;
margin: 0;
}
a {
color: #fff;
position: relative;
&:before {
content: '';
display: block;
height: 2px;
background: #fff;
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
transform-origin: 0 0;
@include scale(0,1);
@extend .quick-transition;
}
&:hover {
&:before {
@include scale(1,1);
}
}
}
}
}
.inner {
display: none;
background-attachment: fixed;
@include transition-duration(0s);
&.active {
display: block;
}
}
} /* End .style3 */
&.style4 {
background: #fff;
padding: 10vh 0 15vh;
.row {
position: relative;
}
.post_nav_link {
padding: 0;
color: $black;
position: static;
}
.post_nav_link {
display: block;
flex-direction: column;
font-size: 14px;
@include transition(all .15s linear);
color: $black;
min-height: 18px;
svg {
position: absolute;
top: 50%;
fill: rgba($black,0.2);
@include transition(all .15s linear);
.bar {
fill: $black;
@include scale(0,1);
@include transition(all .15s linear);
}
}
strong {
display: block;
margin-bottom: 3px;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
color: #aaa;
}
strong,
span {
display: none;
@include min-break($break-small) {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&.prev {
padding-left: 13px;
svg {
left: 27px;
@include min-break($break-small) {
left: 37px;
}
@include translate3d(0%, -50%, 0);
.bar {
transform-origin: 100% 0;
}
}
&:hover {
padding-left: 22px;
svg {
@include translate3d(-20%, -50%, 0);
}
}
}
&.next {
text-align: right;
padding-right: 13px;
svg {
right: 27px;
@include min-break($break-small) {
right: 37px;
}
@include translate3d(0%, -50%, 0);
}
&:hover {
padding-right: 22px;
svg {
@include translate3d(20%, -50%, 0);
}
}
}
&:hover {
svg {
fill: $black;
.bar {
opacity: 1;
@include scale(1,1);
}
}
}
}
} // .style4
&.style5 {
padding: 10vh 0 15vh;
} // .style5
}
/* Load More */
.masonry_btn {
display: inline-block;
margin-top: 30px;
&.loading {
&:after {
content: ' .';
animation: dots 1s cubic-bezier(1,-1, 0, 2) infinite; /* steps(5, end) */
}
@keyframes dots {
0%, 20% {
color: rgba(0,0,0,0);
text-shadow: 0.25em 0 0 rgba(0,0,0,0), 0.5em 0 0 rgba(0,0,0,0);
}
40% {
color: $black;
text-shadow: 0.25em 0 0 rgba(0,0,0,0), 0.5em 0 0 rgba(0,0,0,0);
}
60% {
text-shadow: 0.25em 0 0 $black, 0.5em 0 0 rgba(0,0,0,0);
}
80%, 100% {
text-shadow: 0.25em 0 0 $black, 0.5em 0 0 $black;
}
}
}
}
/* Portfolio Attributes */
.portfolio-attributes {
h6 {
font-size: 16px;
color: $black;
font-weight: 600;
text-transform: none;
}
p {
line-height: 40px;
margin-bottom: 50px;
}
&.style3 {
h6 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.09em;
}
p {
font-size: 18px;
line-height: 1.4;
margin-bottom: 30px;
}
}
&.style2 {
&.row {
margin: 0 -10px;
&>.columns {
padding: 0 10px;
}
}
.attribute {
border: 1px solid rgba(#000,0.07);
padding: 10px 15px 0;
margin-bottom: 10px;
@include min-break($break-small) {
padding: 30px 35px 20px;
margin-bottom: 20px;
}
h6 {
font-weight: 400;
letter-spacing: 0.07em;
font-size: 12px;
text-transform: uppercase;
}
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
color: $black;
}
}
}
&.slider-style2 {
&.row {
margin: 0 -10px;
&>.columns {
padding: 0 10px;
}
}
.attribute {
h6 {
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
text-decoration: underline;
}
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
color: $black;
}
}
}
}
/* Featured Portfolio */
.featured-portfolio {
display: none;
color: $color1;
font-weight: 500;
position: fixed;
top: 50%;
right: 0;
z-index: 100;
transform-origin: center center;
@include transform(translateY(-50%) rotateZ(90deg));
@include min-break($break-small) {
display: block;
right: -15px;
}
.rtl & {
right: auto;
left: 0;
@include transform(translateY(-50%) rotateZ(-90deg));
@include min-break($break-small) {
left: -15px;
}
}
}
#thb-featured-portfolio {
max-width: 400px;
@include translateX(100%);
.rtl & {
@include translateX(-100%);
}
.side-panel-content {
padding: 0;
.portfolio {
display: block;
opacity: 0;
@include animation(none);
transform-origin: 0% 100%;
transform-style: preserve-3d;
@include transform(rotateX(-25deg) rotateY(15deg) translate3d(60px,-10px,0));
will-change: transform;
.post-gallery {
max-height: 245px;
overflow: hidden;
img {
object-fit:cover;
height: 100%;
width: 100%;
@include scale(1);
@extend .mid-transition;
}
}
.post-content {
padding: 13px 15px;
@include min-break($break-small) {
padding: 30px 35px;
}
h5 {
font-weight: 400;
margin-bottom: 10px;
}
.thb-categories {
font-size: 12px;
color: rgba(#000,0.6);
}
}
&:hover {
.post-gallery img {
@include scale(1.05);
}
}
}
}
}
/* Related Portfolio */
.related-projects {
padding: 10vh 0 calc(10vh - 30px);
.type-portfolio {
margin-bottom: 30px;
}
h5 {
font-size: 20px;
font-weight: 400;
margin-bottom: 40px;
}
}