.tf-project-wrap.style1 .wrap-project-post {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 16px;
}
.tf-project-wrap.style1 .featured-post img {
width: 100%;
min-height: 331px;
object-fit: cover;
-webkit-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-khtml-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-moz-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-ms-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-o-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
}
.tf-project-wrap.style1 .project-post {
position: relative;
}
.tf-project-wrap.style1 .featured-post a {
overflow: hidden;
height: 100%;
display: block;
}
.tf-project-wrap.style1 .featured-post a::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.17%, #000000 100%);
}
.tf-project-wrap.style1 .featured-post>a::before {
position: absolute;
top: 0;
left: -85%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.tf-project-wrap.style1 .project-post:hover .featured-post>a::before {
-webkit-animation: flashshine 1s;
animation: flashshine 1s;
}
.tf-project-wrap.style1 .project-post:hover .featured-post img {
transform: scale(1.08);
}
.tf-project-wrap.style1 .title {
font-size: 20px;
font-weight: 600;
line-height: 28px;
margin: 0;
}
.tf-project-wrap.style1 .title a {
color: #fff;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.tf-project-wrap.style1 .title a:hover {
color: var(--theme-primary-color);
}
.tf-project-wrap.style1 .count-number {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #fff;
opacity: 0.8;
margin-bottom: 8px;
}
.tf-project-wrap.style1 .tf-button {
width: 65px;
height: 65px;
border-radius: 50%;
display: flex
;
align-items: center;
justify-content: center;
color: #2C2E33;
background: #fff;
position: absolute;
top: 16px;
right: 8px;
z-index: 4;
font-size: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.tf-project-wrap.style1 .project-post:hover .tf-button {
top: 8px;
}
.tf-project-wrap.style1 .project-post:hover .tf-button {
opacity: 1;
visibility: visible;
}
.tf-project-wrap.style1 .tf-button:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-project-wrap.style1 .content {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
height: 114px;
display: flex
;
flex-direction: column;
justify-content: end;
z-index: 5;
}
.tf-project-wrap.style1 .project-post {
border-radius: 16px;
overflow: hidden;
}
.tf-project-wrap.style1 .preview-project {
background: #2C2E33;
border-radius: 16px;
text-align: center;
padding: 120px 25px 24px 25px;
}
.tf-project-wrap.style1 .preview-project img {
width: 136px;
margin-bottom: 19px;
}
.tf-project-wrap.style1 .preview-project p {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #fff;
margin-bottom: 64px;
}
.tf-project-wrap.style1 .preview-project a {
font-size: 16px;
font-weight: 700;
line-height: 22.4px;
color: #fff;
padding: 20px 24px 21px 24px;
background: var(--theme-primary-color);
border-radius: 999px;
display: inline-block;
}
.tf-project-wrap.style1 .preview-project a i {
font-size: 22px;
margin-left: 7px;
vertical-align: bottom;
}
.tf-project-wrap.style1 .preview-project a:hover {
background: #fff;
color: #2C2E33;
}
.tf-project-wrap.style1 .item:nth-child(1) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(2) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(4) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(8) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(10) .featured-post img {
height: 311px;
}
.tf-project-wrap.style1 .item:nth-child(3) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(5) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(6) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(7) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(9) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(12) .featured-post img {
height: 400px;
}
.tf-project-wrap.style1 .item:nth-child(11) .featured-post img,
.tf-project-wrap.style1 .item:nth-child(13) .featured-post img {
height: 300px;
}
.tf-project-wrap.style1 .item:nth-child(1) .featured-post a,
.tf-project-wrap.style1 .item:nth-child(2) .featured-post a,
.tf-project-wrap.style1 .item:nth-child(4) .featured-post a,
.tf-project-wrap.style1 .item:nth-child(8) .featured-post a,
.tf-project-wrap.style1 .item:nth-child(10) .featured-post a {
height: 311px;
}
.tf-project-wrap.style1 .item-11 {
grid-column: 2 / 3;
}
.tf-project-wrap.style1 .item-12 {
grid-column: 3 / 4;
margin-top: -208px;
}
.tf-project-wrap.style1 .item-13 {
grid-column: 4 / 5;
}
.tf-project-wrap.style1 .item-1 {
padding-top: 208px;
}
.tf-project-wrap.style1 .item-2 {
padding-top: 50px;
}
.tf-project-wrap.style1 .item-4 {
padding-top: 50px;
}
.tf-project-wrap.style1 .item-5 {
padding-top: 208px;
}
.tf-project-wrap.style1 .item-6 {
margin-top: -89px;
}
.tf-project-wrap.style1 .item-7 {
margin-top: -247px;
}
.tf-project-wrap.style1 .item-8 {
margin-top: -208px;
}
.tf-project-wrap.style1 .item-9 {
margin-top: -247px;
}
.tf-project-wrap.style1 .item-11 {
margin-top: -158px;
}
.tf-project-wrap.style1 .item-13 {
margin-top: -158px;
} .tf-project-wrap.style2 .featured-post img {
width: 100%;
height: 884px;
border-radius: 34px;
object-fit: cover;
}
.tf-project-wrap.style2 .featured-post > a {
display: block;
width: 100%;
}
.tf-project-wrap.style2 .featured-post {
position: relative;
}
.tf-project-wrap.style2 .content {
width: 618px;
background: #fff;
padding: 40px;
border-radius: 16px;
position: absolute;
top: 32px;
left: 15.3%;
}
.tf-project-wrap.style2 .content .category a {
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
text-transform: uppercase;
color: var(--theme-primary-color);
}
.tf-project-wrap.style2 .content .category a:hover {
color: #2C2E33;
}
.tf-project-wrap.style2 .content .category {
color: var(--theme-primary-color);
margin-bottom: 31px;
}
.tf-project-wrap.style2 .content .title {
font-size: 40px;
font-weight: 500;
line-height: 50px;
margin-bottom: 12px;
height: 100px;
}
.tf-project-wrap.style2 .content .title a {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.tf-project-wrap.style2 .content .description {
font-size: 16px;
font-weight: 300;
line-height: 22.4px;
color: #5C5E61;
padding-bottom: 32px;
border-bottom: 1px solid #ECECEC;
margin-bottom: 32px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.tf-project-wrap.style2 .content .group-navigation {
display: flex;
align-items: center;
gap: 8px;
}   
.tf-project-wrap.style2 .content .button-nav-prev,
.tf-project-wrap.style2 .content .button-nav-next {
width: 65px;
height: 65px;
background: #fff;
color: #000;
border: 1px solid #ECECEC;
display: flex
;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.tf-project-wrap.style2 .content .button-nav-prev:hover,
.tf-project-wrap.style2 .content .button-nav-next:hover {
background: var(--theme-primary-color);
color: #fff;
border-color: var(--theme-primary-color);
}
.tf-project-wrap.style2 .content .button-nav-prev::after,
.tf-project-wrap.style2 .content .button-nav-next::after {
display: none !important;
}
.tf-project-wrap.style2 .content .button-nav-prev.disabled,
.tf-project-wrap.style2 .content .button-nav-next.disabled {
opacity: 0.6;
}
.tf-single-project {
display: flex
;
flex-wrap: wrap;
margin-left: -40px;
align-items: center;
}
.tf-single-project .content-left {
width: calc(50.5% - 40px);
margin-left: 40px;
}
.tf-single-project .content-right {
width: calc(49.5% - 40px);
margin-left: 40px;
}
.tf-single-project .list-gallery {
display: grid;
grid-gap: 12px;
height: 1012px;
}
.tf-single-project .item-gallery:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 2;
height: 600px;
}
.tf-single-project .item-gallery:nth-child(2) {
grid-column: 1 / 2;
grid-row: 2 / 2;
height: 400px;
}
.tf-single-project .item-gallery:nth-child(3) {
grid-column: 2 / 2;
grid-row: 2 / 2;
height: 400px;
}
.tf-single-project .item-gallery {
display: flex;
cursor: pointer;
}
.tf-single-project .list-gallery img {
border-radius: 24px;
width: 100%;
height: 100%;
object-fit: cover;
}
.tf-single-project .content-right {
max-width: 621px;
}
.tf-single-project .post-title {
font-size: 40px;
font-weight: 600;
line-height: 50px;
margin-bottom: 31px;
}
.tf-single-project .description {
font-size: 16px;
font-weight: 300;
line-height: 22px;
color: #5C5E61;
margin-bottom: 32px;
}
.tf-single-project .price {
font-size: 48px;
font-weight: 200;
line-height: 60px;
color: #2C2E33;
}
.tf-single-project .group-price {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 56px;
}
.tf-single-project .btn1,
.tf-single-project .btn2 {
border: 1px solid var(--theme-primary-color);
border-radius: 999px;
font-size: 16px;
font-weight: 700;
line-height: 22.4px;
color: var(--theme-primary-color);
padding: 15px 24px;
}
.tf-single-project .btn1:hover,
.tf-single-project .btn2:hover {
background: var(--theme-primary-color);
border-color: var(--theme-primary-color);
color: #fff;
}
.tf-single-project .btn1 i,
.tf-single-project .btn2 i {
margin-left: 4px;
vertical-align: text-bottom;
font-size: 22px;
}
.tf-single-project .list-infor li {
display: flex
;
align-items: center;
margin-bottom: 23.8px;
padding-bottom: 23.8px;
border-bottom: 1px solid #ECECEC;
}
.tf-single-project .list-infor li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
.tf-single-project .list-infor li h6 {
margin: 0;
min-width: 180px;
font-size: 16px;
font-weight: 600;
line-height: 22.4px;
color: #2C2E33;    
}
.tf-single-project .list-infor li span {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #2C2E33;
}
.tf-single-project .group-author,
.tf-single-project .group-author .inner {
display: flex;
gap: 24px;
align-items: center;
}
.tf-single-project .group-author {
justify-content: space-between;
margin-bottom: 56px;
}
.tf-single-project .group-author .image img {
border-radius: 50%;
}
.tf-single-project .group-author .name {
font-size: 24px;
font-weight: 400;
line-height: 33.6px;
color: #2C2E33;    
}
.tf-single-project .list-infor {
margin-bottom: 56px;
}
.tf-single-project .btn2 {
padding: 15px 43px;
}
.tf-single-project .btn3 {
padding: 17px 43px;
background: #2C2E33;
border-radius: 999px;
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #fff;
display: block;
text-align: center;
}
.tf-single-project .btn3 span {
display: block;
font-size: 16px;
font-weight: 300;
line-height: 22.4px;
}
.tf-single-project .btn3:hover {
background: var(--theme-primary-color);
color: #fff;
}
.archive .project-page .group-title {
max-width: 720px;
margin: 0 auto;
text-align: center;
margin-bottom: 79px;
}
.archive .project-page .group-title h1 {
font-size: 90px;
font-weight: 500;
line-height: 1.0666666666666667em;
margin-bottom: 23px;
}
.archive .project-page .group-title p {
font-size: 16px;
font-weight: 300;
line-height: 22.4px;
color: #5C5E61;
}
.archive .project-page .page-title {
display: none;
}
.archive .project-page .bottom-content-search {
margin-bottom: 80px;
position: relative;
}
.archive .project-page .bottom-content-search img {
height: 656px;
width: 100%;
object-fit: cover;
border-radius: 16px;
}
.archive .project-page .bottom-content-search .tfre-advanced-search-wrap {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
background: #fff;
border-radius: 16px;
padding: 8px;
}
.archive .project-page .tfre-advanced-search-wrap .form-group {
max-width: unset !important;
}
.archive .project-page .tfre-advanced-search-wrap.form-main .form-search-inner .tf-search-form-bottom {
top: 125%;
}
.archive .project-page .group-archive-project {
display: flex;
flex-wrap: wrap;
margin-left: -40px;
}
.archive .project-page .group-archive-project .tf-project-wrap {
width: calc(66.6667% - 40px);
margin-left: 40px;
}
.archive .project-page .group-archive-project .sidebar-project {
width: calc(33.3333% - 40px);
margin-left: 40px;
}
.archive .project-page .group-archive-project .sidebar-project .widget {
margin-bottom: 40px;
}
.widget-recent-project .item {
display: flex;
gap: 12px;
}
.widget-recent-project .thumbnail img {
width: 112px;
height: 80px;
border-radius: 8px;
}
.widget-recent-project .thumbnail {
flex-shrink: 0;
}
.widget-recent-project h6 {
font-size: 16px;
font-weight: 600;
line-height: 20px;
color: #2C2E33;
}
.widget-recent-project .price {
font-size: 16px;
font-weight: 600;
line-height: 20px;
color: var(--theme-primary-color);
}
.widget-recent-project {
border: 1px solid #ECECEC;
border-radius: 16px;
padding: 30px 30px 30px 30px;
}
.widget-recent-project li:not(:last-child) {
border-bottom: 1px solid #EFEFEF;
padding-bottom: 20px;
margin-bottom: 20px;
}
.project-page .wrap-project-post .item {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 40px;
}
.project-page .wrap-project-post.row {
margin-right: -20px;
margin-left: -20px;
}
.project-page .featured-post img {
height: 264px;
object-fit: cover;
}
.project-page .featured-post a {
display: block;
border-radius: 16px;
overflow: hidden;
}
.project-page .featured-post {
position: relative;
margin-bottom: 32px;
}
.project-page .featured-post .category {
display: flex;
align-items: center;
gap: 15px;
position: absolute;
top: 8px;
left: 8px;
}
.project-page .featured-post .category a {
font-size: 14px;
font-weight: 600;
line-height: 19.6px;
color: #fff;
background: var(--theme-primary-color);
border-radius: 999px;
padding: 4.5px 15px;
}
.project-page .project-post .title {
font-size: 24px;
font-weight: 500;
line-height: 30px;
margin-bottom: 10px;
}
.project-page .project-post .location {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #5C5E61;
}
.project-page .project-post .location i {
margin-right: 8px;
font-size: 18px;
}
@keyframes flashshine {
100% {
left: 125%;
}
}
@media only screen and (max-width: 1200px) {
.tf-project-wrap.style1 .preview-project {
padding: 120px 10px 24px 10px;
}
.tf-project-wrap.style1 .preview-project a {
font-size: 14px;
}
.tf-project-wrap.style1 .preview-project a i {
display: none;
}
.tf-project-wrap.style1 .title {
font-size: 18px;
}
.tf-single-project .price {
font-size: 30px;
line-height: 40px;
}
.tfre-advanced-search-wrap.form-main .form-search-inner .tf-search-form-top.desktop .tfre-advanced-search-btn {
padding: 17px 15px;
}
}
@media only screen and (max-width: 991px) {
.archive .project-page .group-title h1 {
font-size: 70px;
}
.archive .project-page .bottom-content-search img {
height: 500px;
}
.archive .project-page .group-archive-project .tf-project-wrap,
.archive .project-page .group-archive-project .sidebar-project {
width: calc(100% - 40px);
}
.archive .project-page .group-archive-project {
gap: 40px;
}
.tf-project-wrap.style1 {
overflow-x: scroll;
}
.tf-project-wrap.style1 .wrap-project-post {
width: 200%;
}
.tf-single-project .post-title {
font-size: 30px;
margin-bottom: 30px;
}
.tf-single-project .price {
font-size: 25px;
line-height: 30px;
}
.tf-single-project .btn1, .tf-single-project .btn2 {
font-size: 14px;
padding: 10px 10px;
}
.tf-single-project .group-author .image img {
width: 50px;
height: 50px;
}
.tf-single-project .content-right {
max-width: unset;
}
.tf-project-wrap.style2 .content {
width: 80%;
top: 15px;
left: 15px;
padding: 20px;
}
.tf-project-wrap.style2 .content .title {
font-size: 30px;
line-height: 40px;
}
.tf-project-wrap.style2 .featured-post img {
height: 600px;
}
}
@media only screen and (max-width: 767px) {
.tf-project-wrap.style1 .wrap-project-post {
width: 300%;
}
.tf-single-project .list-gallery,
.tf-single-project .item-gallery:nth-child(1),
.tf-single-project .item-gallery:nth-child(2),
.tf-single-project .item-gallery:nth-child(3) {
height: 100%;
}
.tf-single-project .content-right,
.tf-single-project .content-left {
width: calc(100% - 40px);
}
.tf-single-project {
gap: 40px;
}
.archive .project-page .group-title h1 {
font-size: 35px;
}
.archive .project-page .bottom-content-search .tfre-advanced-search-wrap {
background: transparent;
border-radius: unset;
padding: 0px;
}
.archive .project-page .tfre-advanced-search-wrap.form-main .search-properties-form {
padding: 0px;
}
.project-page .wrap-project-post .item {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.archive .project-page .bottom-content-search img {
height: 400px;
}
.archive .project-page .group-title {
margin-bottom: 40px;
}
}