.breadcrumb img {
    width: 100% !important;
    height: 240px;
    filter: blur(2px);
}

.breadcrumb {
    position: relative;
}

.breadcrumb .blur-img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.breadcrumb .content {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%);
}

.breadcrumb .content .title {
    font-size: 28px;
    font-weight: 500;
}

.breadcrumb .content .desc {
    font-size: 17px;
    font-weight: 300;
}

.card-project {
    position: relative;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

.card-project img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: calc(.5s);
}


.card-project .blur-img-project {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transition: linear .6s;
}

.card-project:hover .blur-img-project {
    top: 100%;
    transition: linear .3s;
}

.card-project:hover img {
    transition: calc(1s);
    transform: scale(1.1);
}

#du-an > div {
    transition: 
        opacity .5s ease-in-out, 
        transform .5s ease-in-out, 
        max-height .5s ease-in-out, 
        margin .5s ease-in-out,
        padding .5s ease-in-out;
    transform: scale(1);
    opacity: 1;
    max-height: 500px; 
}

.filtered-out {
    opacity: 0 !important;
    transform: scale(0.1) !important;
    max-height: 0 !important; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}