.work {
    padding-bottom: 40px;
    margin-top: 60px
}

.work * {
    box-sizing: border-box
}

.work .category-buttons {
    text-align: center;
    display: flex;
    flex-direction: row
}

.work .category-buttons a {
    display: flex;
    flex-grow: 1;
    align-items: center;
    padding: 9px 15px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    background-color: #252525;
    cursor: pointer
}

.work .category-buttons a.active {
    background-color: #064d7b;
}

.work .grid {
    width: 100%;
    position: relative;
    background-color: #f5f5f5;
    overflow: hidden;
    -webkit-transition: all 750ms cubic-bezier(1, 0, 0, 1);
    transition: all 750ms cubic-bezier(1, 0, 0, 1);
    max-height: 900px;
    overflow-y: auto
}

.work .grid .animating {
    -webkit-transition: all 750ms cubic-bezier(.175, .885, .32, 1.1);
    transition: all 750ms cubic-bezier(.175, .885, .32, 1.1)
}

.work .grid .setScale {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.work .grid .show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.work .card {
    background: #fff;
    display: block;
    text-decoration: none;
    color: #2b2b2b;
    overflow: hidden;
    transform-origin: center center;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0
}

.work .card:hover .card__text {
    opacity: 1
}

.work .card img {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%
}

.work .card .card__text {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .55);
    height: 100%;
    width: 100%;
    color: #fff;
    border-top: 2px solid #064d7b;
    border-bottom: 2px solid #064d7b;
    transition: .5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.work .card .card__text_name {
    width: 75%;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center
}

.work .card .card__text_link {
    margin-top: 1em;
    text-transform: uppercase;
    text-decoration: underline;
    transition: .5s
}

.work .card .card__text_link:hover {
    color: #064d7b;
}

.work .guide {
    width: 32%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1000
}