/*--------------------------------------------------------------
# Portfolio:: Grid
--------------------------------------------------------------*/

.work-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 0%;
    /*margin: 0 auto !important;*/
}

@media screen and (max-width: 1440px) {
    .work-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        padding: 0rem;
    }
}

/*--------------------------------------------------------------
# Portfolio:: Wrap // Header fonts
--------------------------------------------------------------*/

.portfolio-box .portfolio-caption-mask .portfolio-caption-text {
    background: color-mix(in srgb, var(--white), transparent 100%) !important;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text h4 {
    font-size: calc(0.775rem + 4.8vw) !important;
    line-height: calc(0.775rem + 4.8vw) !important;
    letter-spacing: -0.02em !important;
    color: var(--white);
    font-weight: 600;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text p {
    display: inline-block;
    color: var(--white) !important;
    font-size: calc(0.775rem + 0.4vw) !important;
    font-weight: 600;
    padding: 0.5rem;
}

/*--------------------------------------------------------------
# Portfolio:: Wrap // IMPORTANT
--------------------------------------------------------------*/

.portfolio-box .portfolio-image-wrap {
    position: relative;
    display: block;
    transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.portfolio-box .portfolio-image-wrap img {
    width: 100%;
}

.portfolio-box:hover .portfolio-image-wrap {
    transform: rotate(-5deg) scale(1.3);
    -moz-transform: rotate(-5deg) scale(1.3);
    -o-transform: rotate(-5deg) scale(1.3);
    -webkit-transform: rotate(-5deg) scale(1.3);
    -ms-transform: rotate(-5deg) scale(1.3);
}

.portfolio-box .portfolio-caption-mask {
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
   background: linear-gradient(to top, var(--default-color) 0%, rgba(255,255,255,0) 100%);
    overflow: hidden;
    visibility: hidden;
    transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    z-index: 0;
}

.portfolio-box:hover .portfolio-caption-mask {
    opacity: 1;
    visibility: visible;
    z-index: 0;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    padding: calc(0rem + 124 *((100vw - 500px) / 1420));
    transition: all 0.5s ease-in-out 0s;
}




/*--------------------------------------------------------------
# Portfolio:: Box
--------------------------------------------------------------*/

.portfolio-item {
    border-radius: calc(3px + 10*((100vw - 500px) / 1420));
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
}

.portfolio-flters .portfolio-item {
    overflow: hidden;
}

.card .portfolio-item img {
    height: auto;
    transform: scale(1, 1);
    transition: transform 0.2s linear;
    z-index: 1 !important;
}

.card:hover .portfolio-item img {
    transform: scale(1);
}

.card-text {
    z-index: 2 !important;
}


/*--------------------------------------------------------------
# Card
--------------------------------------------------------------

.card {
    position: initial;
    background-color: transparent;
    border: none !important;
    height: auto;
}

.card img {
    box-shadow: none !important;
}

.card:hover img {
    filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.1));
    -webkit-transition: all ease-in-out 21s;
    transition: all ease-in-out 21s;
}

.card img .link-img:hover {
    cursor: url('../img/open.svg') 50 50, auto !important;
    cursor: progress;
    opacity: 0.5;
}

.client-logo {
    display: block;
    transform: scale(1) !important;
    border-radius: 0 !important;
    min-width: 100px;
}

.client-logo,
.client-logo:hover {
    filter: opacity(100%) !important;
}

.card a {
    text-decoration: none;
}

.card :hover {
    color: #000 !important;
}

.card a img.card-text {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    animation: move-words 1s linear infinite;
}

@keyframes move-words {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-200px);
    }
}*/



@media screen and (max-width: 768px) {

.portfolio-box .portfolio-image-wrap {
    position: relative;
    display: block;
}

.portfolio-box .portfolio-image-wrap img {
    width: 100%;
}

.portfolio-box:hover .portfolio-image-wrap {
    transform: rotate(-5deg) scale(1.3);
    -moz-transform: rotate(-5deg) scale(1.3);
    -o-transform: rotate(-5deg) scale(1.3);
    -webkit-transform: rotate(-5deg) scale(1.3);
    -ms-transform: rotate(-5deg) scale(1.3);
}

.portfolio-box .portfolio-caption-mask {
    color: var(--default-color) !important;
    opacity: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
   background: linear-gradient(to top, var(--default-color) 0%, rgba(255,255,255,0) 50%);
    overflow: hidden;
    visibility: visible;
    transition: none;
    z-index: 0;
}

.portfolio-box:hover .portfolio-caption-mask {
    opacity: 1;
    visibility: visible;
    z-index: 0;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    padding: calc(0.5rem + 124 *((100vw - 500px) / 1420));
    transition: all 0.5s ease-in-out 0s;
}
.portfolio-box .portfolio-caption-mask .portfolio-caption-text h4 {
    padding:0 0.5rem;
    color: var(--white);
    /*background-color: color-mix(in srgb, var(--white), transparent 30%);*/
    display: inline-block;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text p {
font-size: 18px !important;
font-weight: 400 !important;
    color: var(--white) !important;
    /*background-color: color-mix(in srgb, var(--white), transparent 30%);*/
    display: inline-block;
}
}