@media screen and (max-width: 479px) {
    .project-active {
        margin: 0;
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    .project__image {
        display: block;
        position: relative;
        height: 100%;
    }

    .project__image img {
        width: 100%;
        max-width: 100%;
        display: block;
        height: 300px;
        object-fit: cover;
    }

    .project__image:after {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(to top right, rgba(65, 88, 244, 0.7), rgba(244, 155, 65, 0.7));
        transition: opacity .3s ease;
        opacity: 0;
    }

    .project__card {
        position: relative;
        will-change: transform;
        transition: box-shadow .3s ease;
        box-shadow: 0 10px 30px transparent;
    }

    .project-active .project__card {
        /*    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);*/
    }

    .project-active .project__image:after {
        opacity: 1;
    }

    .project-active .project__detail {
        border-width: 5px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    }

    .project-active .project__title,
    .project-active .project__category {
        -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .project__detail {
        position: absolute;
        left: 30px;
        right: 30px;
        top: 30px;
        bottom: 30px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        pointer-events: none;
        -webkit-transform: translateZ(30px);
        transform: translateZ(30px);
        border: 0 solid #94081d;
        transition: border .6s ease;
    }

    .project__title {
        margin: 0 0 10px;
        font-size: 36px;
        font-weight: 700;
        transition: .4s ease;
        opacity: 0;
        -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
        transform: translateY(40px) scale(0);
        will-change: transform;
    }

    .project__title a {
        color: white;
        text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    }

    .project__category {
        opacity: 0;
        transition: .4s ease;
        transition-delay: .1s;
        -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
        transform: translateY(40px) scale(0);
        will-change: transform;
    }

    .project__category a {
        color: #94081d;
        text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
        font-size: 1.3em;
    }

    .project-active {
        overflow: hidden;
    }

    .project-active .project__image {
        transition: filter 0.3s;
    }

    .project-active .project__image {
        filter: blur(2px);
    }

}









/************************************************************************/
/************************************************************************/
/************************************************************************/
/************************************************************************/
/************************************************************************/



@media screen and (min-width: 480px) {
    .project {
        margin: 0;
        padding: 0px;
        width: 100%;
        height: 100%;
    }

    .project__image {
        display: block;
        position: relative;
        height: 100%;
    }

    .project__image img {
        width: 100%;
        max-width: 100%;
        display: block;
        height: 300px;
        object-fit: cover;
    }

    .project__image:after {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(to top right, rgba(65, 88, 244, 0.7), rgba(244, 155, 65, 0.7));
        transition: opacity .3s ease;
        opacity: 0;
    }

    /*rgba(148,8,29, 0.6), rgba(148,8,29, 0.9));*/
    .project__card {
        position: relative;
        will-change: transform;
        transition: box-shadow .3s ease;
        box-shadow: 0 10px 30px transparent;
    }

    .project__card.hover-in {
        transition: -webkit-transform .2s ease-out;
        transition: transform .2s ease-out;
        transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    }

    .project__card.hover-out {
        transition: -webkit-transform .2s ease-in;
        transition: transform .2s ease-in;
        transition: transform .2s ease-in, -webkit-transform .2s ease-in;
    }

    .project:hover .project__card {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    }

    .project:hover .project__image:after {
        opacity: 1;
    }

    .project:hover .project__detail {
        border-width: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    }

    .project:hover .project__title,
    .project:hover .project__category {
        -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .project__detail {
        position: absolute;
        left: 30px;
        right: 30px;
        top: 30px;
        bottom: 30px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        pointer-events: none;
        -webkit-transform: translateZ(30px);
        transform: translateZ(30px);
        border: 0 solid #94081d;
        transition: border .6s ease;
    }

    .project__title {
        margin: 0 0 10px;
        font-size: 36px;
        font-weight: 700;
        transition: .4s ease;
        opacity: 0;
        -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
        transform: translateY(40px) scale(0);
        will-change: transform;
    }

    .project__title a {
        color: white;
        text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    }

    .project__category {
        opacity: 0;
        transition: .4s ease;
        transition-delay: .1s;
        -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
        transform: translateY(40px) scale(0);
        will-change: transform;
    }

    .project__category a {
        color: rgba(147, 8, 29, 1);
        text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
        font-size: 1.3em;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .project .project__image {
        transition: filter 0.8s;
    }

    .project:hover .project__image {
        filter: blur(2px);
    }
}