:root {
--bodyFont: "Satoshi", sans-serif;
--titleFont: "Clash Grotesk", sans-serif;
--primaryColor: #613FE7;
--secondaryColor: #FA83FF;
--secondaryColor2: #6339CD;
--secondaryColor3: #AC643B;
--secondaryColor4: #047F76;
--hoverColor: #FA83FF;
--bodyColor: #606062;
--whiteColor: #FFFFFF;
--blackColor: #000000;
--titleColor: #1D1D1F;
--borderColor: #e2eaf0;
--inputbgColor: #ffffff;
--softbgColor: #F9F9FA;
--transition: 0.4s all ease;
}
.mb-24 {
margin-bottom: 24px;
}
body.single.single-tp-portfolios {
overflow: visible;
}
.tp-portfolio-inner-content-side-wrapper {
position: sticky;
top: 140px;
padding-bottom: 40px;
}
.tp-portfolio-stylestyle1 .portfolio-item {
position: relative;
z-index: 1;
overflow: hidden;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-image {
position: relative;
z-index: 2;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-image img {
width: 100%;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-image span.popup-icon {
position: absolute;
left: 50%;
top: 50%;
content: "";
transform: translate(-50%, -50%);
display: inline-block;
padding: 10px 12px;
background-color: #fff;
color: #090908;
border-radius: 50%;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-image span.popup-icon:hover {
color: #fff;
background-color: #F95D00;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-image.portfolio-image-overlay-gradient::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background: rgba(242, 61, 179, 0.3);
z-index: auto;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
border-radius: 8px;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content.portfolio-item-content-absolute {
position: absolute;
left: 0;
bottom: -50px;
right: 0;
width: 100%;
z-index: 3;
padding: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolio-cat a {
display: inline-block;
color: var(--whiteColor);
border-radius: 5px;
font-size: 10px;
text-transform: capitalize;
padding: 5px 12px;
margin-bottom: 10px;
font-weight: 500;
background-color: var(--secondaryColor);
font-size: 14px;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolio-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolio-title a {
color: var(--whiteColor);
background-color: var(--secondaryColor);
padding: 8px 12px;
border-radius: 5px;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolios-btn {
margin-top: 10px;
color: #fff;
display: inline-block;
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolios-btn:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle1 .portfolio-item .portfolio-item-content .portfolios-btn i {
display: inline-block;
}
.tp-portfolio-stylestyle1 .portfolio-item:hover .portfolio-item-content-absolute {
opacity: 1;
visibility: visible;
bottom: 0;
}
.tp-portfolio-stylestyle1 .portfolio-item:hover .portfolio-item-image::before {
opacity: 1;
visibility: visible;
}
.tp-portfolio-stylestyle2 .portfolio-item {
position: relative;
z-index: 1;
overflow: hidden;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-image {
position: relative;
z-index: 2;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-image img {
width: 100%;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-image span.popup-icon {
position: absolute;
left: 50%;
top: 50%;
content: "";
transform: translate(-50%, -50%);
display: inline-block;
padding: 10px 12px;
background-color: #fff;
color: #090908;
border-radius: 50%;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-image span.popup-icon:hover {
color: #fff;
background-color: #F95D00;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-image.portfolio-image-overlay-gradient::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
z-index: auto;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content.portfolio-item-content-absolute {
position: absolute;
left: 0;
bottom: -50px;
right: 0;
width: 100%;
z-index: 3;
padding: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolio-cat a {
display: inline-block;
color: #090908;
background-color: #fff;
border-radius: 30px;
font-size: 10px;
text-transform: uppercase;
padding: 5px 15px;
margin-bottom: 10px;
font-weight: 500;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolio-cat a:hover {
color: #fff;
background-color: var(--primaryColor);
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolio-title {
font-size: 20px;
font-weight: 700;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolio-title a {
color: #fff;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolio-title a:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolios-btn {
margin-top: 10px;
color: #fff;
display: inline-block;
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolios-btn:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle2 .portfolio-item .portfolio-item-content .portfolios-btn i {
display: inline-block;
}
.tp-portfolio-stylestyle2 .portfolio-item:hover .portfolio-item-content-absolute {
opacity: 1;
visibility: visible;
bottom: 0;
}
.tp-portfolio-stylestyle2 .portfolio-item:hover .portfolio-item-image::before {
opacity: 1;
visibility: visible;
}
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(3), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(5) {
margin-top: 30px;
}
@media (max-width: 1200px) {
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(3), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-5 .col:nth-child(5) {
margin-top: 0 !important;
}
}
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-4 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-4 .col:nth-child(3) {
margin-top: 40px;
}
@media (max-width: 1200px) {
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-4 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-4 .col:nth-child(3) {
margin-top: 0 !important;
}
}
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-3 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-3 .col:nth-child(3) {
margin-top: 50px;
}
@media (max-width: 1200px) {
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-3 .col:nth-child(1), .tp-portfolio-stylestyle2 .grid .row.row-cols-xl-3 .col:nth-child(3) {
margin-top: 0 !important;
}
}
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-2 .col:nth-child(1) {
margin-top: 50px;
}
@media (max-width: 1200px) {
.tp-portfolio-stylestyle2 .grid .row.row-cols-xl-2 .col:nth-child(1) {
margin-top: 0 !important;
}
}
.tp-portfolio-stylestyle3 .portfolio-item {
position: relative;
z-index: 1;
overflow: hidden;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-image {
position: relative;
z-index: 2;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-image img {
width: 100%;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-image span.popup-icon {
position: absolute;
left: 50%;
top: 50%;
content: "";
transform: translate(-50%, -50%);
display: inline-block;
padding: 10px 12px;
background-color: #fff;
color: #090908;
border-radius: 50%;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-image span.popup-icon:hover {
color: #fff;
background-color: #F95D00;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-image.portfolio-image-overlay-gradient::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
z-index: auto;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content.portfolio-item-content-absolute {
position: absolute;
left: 0;
bottom: -50px;
right: 0;
width: 100%;
z-index: 3;
padding: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content .portfolio-cat a {
display: inline-block;
color: #090908;
background-color: #fff;
border-radius: 30px;
font-size: 10px;
text-transform: uppercase;
padding: 5px 15px;
margin-bottom: 10px;
font-weight: 500;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content .portfolio-cat a:hover {
color: #fff;
background-color: var(--primaryColor);
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content .portfolio-title {
font-size: 20px;
font-weight: 700;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content .portfolio-title a {
color: #fff;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolio-item-content .portfolio-title a:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolios-btn-part .portfolios-btn {
margin-top: 0px;
color: #fff;
display: inline-block;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolios-btn-part .portfolios-btn:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolios-btn-part .portfolios-btn i {
display: inline-block;
}
.tp-portfolio-stylestyle3 .portfolio-item .portfolios-btn-part.portfolio-btn-absolute {
position: absolute;
right: 0;
top: 0;
z-index: 2;
padding: 25px 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
top: -50px;
}
.tp-portfolio-stylestyle3 .portfolio-item:hover .portfolio-item-content-absolute {
opacity: 1;
visibility: visible;
bottom: 0;
}
.tp-portfolio-stylestyle3 .portfolio-item:hover .portfolio-item-image::before {
opacity: 1;
visibility: visible;
}
.tp-portfolio-stylestyle3 .portfolio-item:hover .portfolio-btn-absolute {
opacity: 1;
visibility: visible;
top: 0;
}
.tp-portfolio-stylestyle4 .portfolio-item {
position: relative;
z-index: 1;
overflow: hidden;
align-items: center;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-image {
position: relative;
z-index: 2;
flex: 1;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-image img {
width: 100%;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-image span.popup-icon {
position: absolute;
left: 50%;
top: 50%;
content: "";
transform: translate(-50%, -50%);
display: inline-block;
padding: 10px 12px;
background-color: #fff;
color: #090908;
border-radius: 50%;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-image span.popup-icon:hover {
color: #fff;
background-color: #F95D00;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-image.portfolio-image-overlay-gradient::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
z-index: auto;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content {
width: -moz-max-content;
width: max-content;
padding: 40px;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content.portfolio-item-content-absolute {
position: absolute;
left: 0;
bottom: -50px;
right: 0;
width: 100%;
z-index: 3;
padding: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear 0s;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolio-cat a {
display: inline-block;
color: #090908;
font-size: 10px;
margin-bottom: 10px;
font-weight: 500;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolio-cat a:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolio-title {
font-size: 20px;
font-weight: 700;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolio-title a {
color: #090908;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolio-title a:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolios-btn {
margin-top: 10px;
color: #090908;
display: inline-block;
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolios-btn:hover {
color: var(--primaryColor);
}
.tp-portfolio-stylestyle4 .portfolio-item .portfolio-item-content .portfolios-btn i {
display: inline-block;
}
.tp-portfolio-stylestyle4 .portfolio-item:hover .portfolio-item-image::before {
opacity: 1;
visibility: visible;
}
.tp-portfolio-stylestyle4 .grid .row .col:nth-child(even) .portfolio-item {
flex-direction: row-reverse;
}