.tf-imagebox-type3.style1 .thumb-images img {
height: 489px;
width: 100%;
object-fit: cover;
}
.tf-imagebox-type3.style1 .title {
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #fff;
}
.tf-imagebox-type3.style1 .content {
padding: 24px 24px 24px 24px;
background: #FFFFFF4D;
backdrop-filter: blur(20px);
position: relative;
display: flex
;
justify-content: space-between;
position: absolute;
left: 0;
right: 0;
width: calc(100% - 32px);
margin: 0 auto;
bottom: 16px;
padding-right: 84px;
}
.tf-imagebox-type3.style1 .tf-button  {
width: 84px;
height: 100%;
display: flex
;
align-items: center;
justify-content: center;
background: #fff;
color: var(--theme-primary-color);
font-size: 24px;
position: absolute;
right: 0;
top: 0;
}
.tf-imagebox-type3.style1 .tf-button:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-imagebox-type3.style1 {
position: relative;
} .tf-imagebox-type3 .thumb-images {
overflow: hidden;
}
.tf-imagebox-type3 .thumb-images img {
-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-imagebox-type3 .thumb-images {
overflow: hidden;
display: block;
position: relative;
}
.tf-imagebox-type3:hover .thumb-images img {
transform: scale(1.07);
} .tf-imagebox-type3.style2 .thumb-images img {
height: 281px;
width: 100%;
object-fit: cover;
}
.tf-imagebox-type3.style2 .title {
font-weight: 400;
font-size: 32px;
line-height: 48px;
color: #fff;
}
.tf-imagebox-type3.style2 p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #fff;
}
.tf-imagebox-type3.style2 .content {
padding: 32px 32px 32px 32px;
background: #FFFFFF4D;
backdrop-filter: blur(20px);
}
.tf-imagebox-type3.style2 .tf-button {
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #fff;
}
.tf-imagebox-type3.style2 .tf-button i {
margin-left: 7px;
}
.tf-imagebox-type3.style2 .tf-button span {
position: relative;
}
.tf-imagebox-type3.style2 .tf-button span::after {
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 0%;
height: 1px;
background-color: #fff;
-webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
z-index: 2;
}
.tf-imagebox-type3.style2 .tf-button:hover span::after {
width: 100%;
}
.tf-imagebox-type3.style2 .tf-button i {
display: inline-block;
margin-left: 9px;
font-size: 23px;
vertical-align: sub;
}
.tf-imagebox-type3.style2 .tf-button:hover i {
-webkit-animation: toRightFromLeft 0.7s forwards;
-moz-animation: toRightFromLeft 0.7s forwards;
animation: toRightFromLeft 0.7s forwards;
}
.tf-imagebox-type3.style2 {
display: flex;
}
.tf-imagebox-type3.style2 .thumb-images {
width: 290px;
flex-shrink: 0;
height: auto;
}
.tf-imagebox-type3.style2 .thumb-images img {
height: 100%;
} .tf-imagebox-type3.style3 {
border: 1px solid #EDEDED;
padding: 40px 40px 40px 40px;
background: #fff;
}
.tf-imagebox-type3.style3 .thumb-images img {
height: 444px;
width: 100%;
object-fit: cover;
}
.tf-imagebox-type3.style3 .title {
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #fff;
}
.tf-imagebox-type3.style3 p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #666666;
}
.tf-imagebox-type3.style3 .content {
padding: 24px 24px 24px 24px;
background: #FFFFFF4D;
backdrop-filter: blur(20px);
position: relative;
display: flex
;
justify-content: space-between;
position: absolute;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
bottom: 0px;
padding-right: 84px;
}
.tf-imagebox-type3.style3 .tf-button  {
width: 84px;
height: 100%;
display: flex
;
align-items: center;
justify-content: center;
background: #fff;
color: #222222;
font-size: 24px;
position: absolute;
right: 0;
top: 0;
}
.tf-imagebox-type3.style3 .tf-button:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-imagebox-type3.style3 {
position: relative;
}
.tf-imagebox-type3.style3 .tf-button2 {
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #222222;
}
.tf-imagebox-type3.style3 .tf-button2 i {
margin-left: 7px;
}
.tf-imagebox-type3.style3 .tf-button2 span {
position: relative;
}
.tf-imagebox-type3.style3 .tf-button2 span::after {
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 100%;
height: 1px;
background-color: #222222;
-webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
-o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);
z-index: 2;
}
.tf-imagebox-type3.style3 .tf-button2:hover span::after {
width: 0%;
}
.tf-imagebox-type3.style3 .tf-button2 i {
display: inline-block;
margin-left: 9px;
font-size: 23px;
vertical-align: sub;
}
.tf-imagebox-type3.style3 .tf-button2:hover i {
-webkit-animation: toRightFromLeft 0.7s forwards;
-moz-animation: toRightFromLeft 0.7s forwards;
animation: toRightFromLeft 0.7s forwards;
}
.tf-imagebox-type3.style3 .content-outside {
margin-top: 40px;
}
@keyframes toRightFromLeft {
49% {
transform: translate(9px, -9px) scale(0.5);
}
50% {
opacity: 0;
transform: translate(-9px, 9px) scale(1);
}
51% {
opacity: 1;
}
}
@media (max-width: 1200px) {
.tf-imagebox-type3.style1 .thumb-images img {
height: 300px;
}
.tf-imagebox-type3.style1 .content {
padding: 15px;
width: calc(100% - 20px);
bottom: 10px;
padding-right: 40px;
}
.tf-imagebox-type3.style1 .tf-button {
width: 40px;
}
.tf-imagebox-type3.style1 .title {
font-size: 20px;
}
.tf-imagebox-type3.style3 {
padding: 15px;
}
.tf-imagebox-type3.style3 .tf-button {
width: 70px;
}
.tf-imagebox-type3.style3 .title {
font-size: 18px;
line-height: 30px;
}
}
@media (max-width: 991px) {
.tf-imagebox-type3.style3 .thumb-images img {
height: 300px;
}
.tf-imagebox-type3.style3 .content {
padding: 15px;
padding-right: 30px;
}
.tf-imagebox-type3.style3 .tf-button {
width: 40px;
}
}
@media only screen and (max-width: 767px) {
.tf-imagebox-type3.style2 {
flex-direction: column;
}
.tf-imagebox-type3.style2 .thumb-images {
width: 100%;
}
}