/home/devfahim/www/fluentlab.devfahim.site/wp-content/plugins/tp-portfolio/assets/sass/_single.scss
.portfolio-meta-data {
ul {
margin: 0;
padding: 0;
display: flex;
gap: 30px;
}
li {
list-style: none;
margin: 0;
}
.value {
font-weight: 600;
}
}
.portfolio-thumbnail{
.video-content{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
}
}
.portfolio-sliders{
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 40px;
height: 40px;
padding: 0;
z-index: 1;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev {
left: 0;
}
[dir='rtl'] .slick-prev {
right: 0;
left: auto;
}
.slick-next {
right: 0
}
[dir='rtl'] .slick-next {
right: auto;
left: 0;
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
border-radius: 10px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
/*font-family: 'slick';*/
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
/*content: '•';*/
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
}
.portfolio-gallery {
display: flex;
width: 100%;
gap: 30px;
flex-wrap: wrap;
}
.portfolio-gallery .columns {
flex: 0 0 calc(33.33% - 30px);
a {
display: block;
overflow: hidden;
text-align: center;
}
@media (max-width: 768px) {
flex: 0 calc(50% - 30px);
}
@media (max-width: 480px) {
flex: 1;
}
}