.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
} .flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
} .flickity-button {
position: absolute;
background: hsla(0, 0%, 100%, 0.75);
border: none;
color: #333;
}
.flickity-button:hover {
background: white;
cursor: pointer;
}
.flickity-button:focus {
outline: none;
box-shadow: 0 0 0 5px #19F;
}
.flickity-button:active {
opacity: 0.6;
}
.flickity-button:disabled {
opacity: 0.3;
cursor: auto; pointer-events: none;
}
.flickity-button-icon {
fill: currentColor;
} .flickity-prev-next-button {
top: 50%;
width: 44px;
height: 44px;
border-radius: 50%; transform: translateY(-50%);
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; } .flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
} .flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}.flickity-enabled.is-fade .flickity-slider > * {
pointer-events: none;
z-index: 0;
}
.flickity-enabled.is-fade .flickity-slider > .is-selected {
pointer-events: auto;
z-index: 1;
}.flickity-carusel-init {
display: flex;
overflow: hidden;
}
.flickity-carusel-init.flickity-enabled {
display: block;
}
.flickity-page-dots {
position: relative;
bottom: inherit;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
}
.flickity-page-dots .dot {
position: relative;
width: 0.875rem;
height: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
outline: none;
background: transparent;
opacity: 1;
margin: 1rem 1.125rem 0 0;
}
.flickity-page-dots .dot:only-of-type {
display: none;
}
.flickity-page-dots .dot:first-child {
margin-top: 2rem;
}
.flickity-page-dots .dot:last-child {
margin-right: 0;
}
.flickity-page-dots .dot.is-selected::after {
background-color: var(--accent-color);
width: 100%;
height: 100%;
}
.flickity-page-dots .dot:hover::after {
background-color: var(--accent-color);
}
.flickity-page-dots .dot::after {
content: "";
width: 0.625rem;
height: 0.625rem;
background-color: var(--text-primary);
margin: 0;
border-radius: 50%;
outline: none;
transition: all 0.2s;
}
.flickity-dots-white .flickity-page-dots .dot::after {
background-color: var(--background-color);
}
.flickity-dots-white .flickity-page-dots .dot.is-selected::after {
background-color: var(--accent-color);
}
.flickity-prev-next-button {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--el-border-radius-min);
background: var(--background-color);
border: 1px solid var(--border-color);
display: flex;
}
.flickity-prev-next-button:hover {
background: var(--background-color);
}
.flickity-prev-next-button .flickity-button-icon {
position: relative;
left: 0;
top: 0;
width: 0.8125rem;
height: 0.8125rem;
margin: auto;
fill: var(--accent-color);
}
.ios .flickity-prev-next-button .flickity-button-icon {
width: 1.125rem;
height: 1.125rem;
}
.carusel-col,
.carusel-col-min {
min-width: 100%;
width: 100%;
margin-right: var(--bs-gutter-x);
}
.carusel-col.carusel-col-mobile-2,
.carusel-col-min.carusel-col-mobile-2 {
min-width: calc(50% - var(--bs-gutter-x)*0.5);
width: calc(50% - var(--bs-gutter-x)*0.5);
}
.flickity-dots-absolute .flickity-page-dots {
position: absolute;
bottom: 2rem;
}
.project-carusel {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.project-carusel .flickity-prev-next-button.previous {
left: -1.25rem;
}
.project-carusel .flickity-prev-next-button.next {
right: -1.25rem;
}
@media (min-width: 576px) {
.carusel-col-min.carusel-col-2, .carusel-col-min.carusel-col-3, .carusel-col-min.carusel-col-4, .carusel-col-min.carusel-col-5 {
min-width: calc(50% - var(--bs-gutter-x)*0.5);
width: calc(50% - var(--bs-gutter-x)*0.5);
}
}
@media (min-width: 768px) {
.carusel-col.carusel-col-2, .carusel-col.carusel-col-3, .carusel-col.carusel-col-4 {
min-width: calc(50% - var(--bs-gutter-x)*0.5);
width: calc(50% - var(--bs-gutter-x)*0.5);
}
.carusel-col-min.carusel-col-3, .carusel-col-min.carusel-col-4, .carusel-col-min.carusel-col-5 {
min-width: calc(33.3% - var(--bs-gutter-x)*2/3);
width: calc(33.3% - var(--bs-gutter-x)*2/3);
}
}
@media (min-width: 992px) {
.carusel-col-min.carusel-col-4, .carusel-col-min.carusel-col-5 {
min-width: calc(25% - var(--bs-gutter-x)*3/4);
width: calc(25% - var(--bs-gutter-x)*3/4);
}
}
@media (min-width: 1200px) {
.carusel-col.carusel-col-3 {
min-width: calc(33.3% - var(--bs-gutter-x)*2/3);
width: calc(33.3% - var(--bs-gutter-x)*2/3);
}
.carusel-col.carusel-col-4 {
min-width: calc(25% - var(--bs-gutter-x)*3/4);
width: calc(25% - var(--bs-gutter-x)*3/4);
}
.carusel-col-min.carusel-col-5 {
min-width: calc(20% - var(--bs-gutter-x)*4/5);
width: calc(20% - var(--bs-gutter-x)*4/5);
}
}.pitem {
position: relative;
display: block;
width: 100%;
overflow: hidden;
}
.pitem.pitem-flip .pitem-card {
backface-visibility: hidden;
}
.pitem.pitem-flip:hover .pitem-card-front {
transform: rotateY(180deg);
}
.pitem.pitem-flip:hover .pitem-card-back {
transform: rotateY(0deg);
z-index: 3;
}
.pitem.pitem-hover:hover .pitem-card-hover {
opacity: 0.9;
visibility: visible;
}
.main-visible .pitem.pitem-flip .pitem-card {
transition: all 0.6s ease-in-out;
}
.main-visible .pitem-card {
transition: all 0.3s;
}
.pitem-card {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: var(--el-border-radius);
background-color: var(--background-color);
overflow: hidden;
}
.pitem-card-front {
z-index: 2;
}
.pitem-card-front img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pitem-card-details {
background-color: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--background-color);
text-align: center;
padding: 2rem 2.5rem;
text-decoration: none;
}
.pitem-card-details:hover {
color: var(--background-color);
}
.pitem-card-back {
transform: rotateY(180deg);
z-index: 1;
}
.pitem-card-hover {
opacity: 0;
visibility: hidden;
z-index: 3;
}
.pitem-heading {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.pitem-heading.pitem-heading-large {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.pitem-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 22.5rem;
}
.pitem-desc p {
margin-bottom: 0;
}
.pitem-btns {
margin-top: 1.5rem;
}
.pitem-col-carusel {
min-width: 23%;
width: 23%;
margin-left: 15px;
}
.pitem-col-carusel.pitem-cc-wide {
min-width: 100%;
width: 100%;
}
.pitem-col-carusel.pitem-cc-2 {
min-width: 40%;
width: 40%;
}
.pitem-col-carusel.pitem-cc-3 {
min-width: 28%;
width: 28%;
}
.pitem-author {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
.pitem-details {
position: relative;
margin-bottom: -1rem;
}
.pitem-details-cols .pitem-details-row {
display: block;
}
.pitem-details-cols .pitem-details-label {
min-width: auto;
}
.pitem-details-cols .pitem-details-desc .d-flex {
justify-content: center;
}
.pitem-details-row {
display: flex;
margin-bottom: 1rem;
}
.pitem-details-label {
font-weight: var(--heading-font-weight);
font-family: var(--heading-font-family);
min-width: 9.375rem;
}
.single-project-page-min .row, .single-project-page-min .heading-center, .single-project-page-min .section-desc {
margin-bottom: 0;
}
.pitem-carusel-item {
height: 45rem;
width: 100%;
margin-right: 1rem;
}
.pitem-carusel-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pitem-carusel-thumb-item {
position: relative;
width: 13.75rem;
height: 8.75rem;
margin-right: 1rem;
}
.pitem-carusel-thumb-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pitem-carusel-thumb-item::after {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
transform: translateY(-50%);
transition: all 0.3s;
}
.pitem-carusel-thumb-item.is-nav-selected::after, .pitem-carusel-thumb-item:hover::after {
height: 100%;
}
.pitem-carusel-thumb {
margin-top: 1.5rem;
}
.pitem-full .pitem-desc {
-webkit-line-clamp: 2;
max-width: 100%;
}
.pitem-img {
position: relative;
}
.pitem-img img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pitem-info .item-heading,
.pitem-info-wide .item-heading {
margin-bottom: 0.625rem;
}
.pitem-info {
padding: 1.25rem;
}
.pitem-info-wide {
padding-top: 1.25rem;
}
.pitem-btn-link {
display: flex;
margin-top: 0.625rem;
}
@media (max-width: 1399.98px) {
.pitem-carusel-item {
height: 39rem;
}
}
@media (max-width: 1199.98px) {
.pitem-carusel-item {
height: 32.5rem;
}
.pitem-card-details {
padding: 1.5rem;
}
.pitem-col-carusel {
min-width: 40%;
width: 40%;
}
.pitem-col-carusel.pitem-cc-3 {
min-width: 40%;
width: 40%;
}
.pitem-heading.pitem-heading-large {
font-size: 1.375rem;
margin-bottom: 1rem;
}
}
@media (max-width: 991.98px) {
.pitem-card-details {
padding: 1.5rem 2.5rem;
}
.pitem-carusel-item {
height: 25rem;
}
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 567px) and (max-width: 900px) and (orientation: landscape) {
.pitem-card-details {
padding: 1.25rem;
}
.pitem-col-carusel {
min-width: 50%;
width: 50%;
}
.pitem-col-carusel.pitem-cc-2, .pitem-col-carusel.pitem-cc-3 {
min-width: 50%;
width: 50%;
}
.pitem-carusel-item {
height: 18.75rem;
}
.pitem-carusel-thumb-item {
width: 9.375rem;
height: 6.25rem;
}
}
@media (max-width: 575.98px) {
.pitem {
max-width: 21.875rem;
margin-left: auto;
margin-right: auto;
}
.pitem-col-carusel {
min-width: 100%;
width: 100%;
}
.pitem-col-carusel.pitem-cc-2, .pitem-col-carusel.pitem-cc-3 {
width: 100%;
}
}
@media only screen and (max-width: 370px) {
.pitem-carusel-item {
height: 15rem;
}
.pitem-carusel-thumb-item {
width: 7.5rem;
height: 5rem;
}
}
@media (min-width: 1400px) {
.single-project-page .col-lg-4 {
width: 29%;
}
.single-project-page .col-lg-8 {
width: 71%;
}
}
@media only screen and (min-width: 1600px) {
.pitem-col-carusel {
min-width: 22%;
width: 22%;
}
}