.animated-box-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.animated-box-row {
    flex: 0 0 33.33%;
    padding-left: 10px;
    transition: .4s ease;
}

.ab-col {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    height: 100%;
}

/* .ab-body {
    opacity:0;
    height:0;
    position: absolute;
    margin-top:50%;
    padding:0 20px;
} */
.animated-box-row.hovered .ab-body {
    opacity: 1;
    height: 100%;
    transition: .4s ease;
}

.animated-box-row.hovered .ab-img {
    transform: translateX(466px);
    transition: .4s ease;
}

.animated-box-row.hovered:nth-child(3) .ab-img,
.animated-box-row.hovered:nth-child(6) .ab-img,
.animated-box-row.hovered:nth-child(9) .ab-img {
    transform: translateX(-466px);
    transition: .4s ease;
}

.ab-img {
    position: relative;
    /*z-index:10;*/
    transition: .4s ease;
    width: 100%;
}

.ab-img img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    margin-bottom: 22px;
}

.ab-title {
    font-size: 36px;
    line-height: 50px;
    color: #004F9F;
    margin-bottom: 16px;
}

@media (max-width: 1025px) {
    .animated-box-row {
        flex: 0 0 50%;
        padding-left: 0px !important;
        padding-right: 10px !important;
    }

    .animated-box-row.hovered .ab-img {
        transform: translateX(300px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(3) .ab-img,
    .animated-box-row.hovered:nth-child(6) .ab-img,
    .animated-box-row.hovered:nth-child(9) .ab-img {
        transform: translateX(-300px);
        transition: .4s ease;
    }

    .ab-body {
        margin-top: 0%;
    }
}


@media (max-width: 900px) {
    .animated-box-row.hovered .ab-img {
        transform: translateX(256px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(3) .ab-img,
    .animated-box-row.hovered:nth-child(6) .ab-img,
    .animated-box-row.hovered:nth-child(9) .ab-img {
        transform: translateX(-256px);
        transition: .4s ease;
    }

    .ab-description p {
        font-size: 14px;
    }
}


@media (max-width: 768px) {
    .animated-box-row.hovered .ab-img {
        transform: translateX(239px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(3) .ab-img,
    .animated-box-row.hovered:nth-child(6) .ab-img,
    .animated-box-row.hovered:nth-child(9) .ab-img {
        transform: translateX(-239px);
        transition: .4s ease;
    }

    .ab-description p {
        font-size: 14px;
    }
}

@media (max-width: 690px) {
    h4.ab-title {
        margin-bottom: 5px !important;
        font-size: 14px !important;
    }

    .ab-description p {
        font-size: 13px !important;
    }

    .animated-box-row {
        flex: 0 0 50%;
    }

    .animated-box-row {
        padding-left: 0px !important;
        padding-right: 10px !important;
    }

    .ab-body {
        margin-top: 10%;
        padding: 0px 5px;
    }

    .animated-box-row.hovered .ab-img {
        transform: translateX(190px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(2) .ab-img,
    .animated-box-row.hovered:nth-child(4) .ab-img,
    .animated-box-row.hovered:nth-child(6) .ab-img,
    .animated-box-row.hovered:nth-child(8) .ab-img {
        transform: translateX(-190px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(3) .ab-img,
    .animated-box-row.hovered:nth-child(5) .ab-img,
    .animated-box-row.hovered:nth-child(9) .ab-img {
        transform: translateX(190px);
        transition: .4s ease;
    }
}

@media (max-width: 410px) {
    .animated-box-row.hovered .ab-img {
        transform: translateX(170px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(2) .ab-img,
    .animated-box-row.hovered:nth-child(4) .ab-img,
    .animated-box-row.hovered:nth-child(6) .ab-img,
    .animated-box-row.hovered:nth-child(8) .ab-img {
        transform: translateX(-170px);
        transition: .4s ease;
    }

    .animated-box-row.hovered:nth-child(3) .ab-img,
    .animated-box-row.hovered:nth-child(5) .ab-img,
    .animated-box-row.hovered:nth-child(9) .ab-img {
        transform: translateX(170px);
        transition: .4s ease;
    }
}