/* 20. Home Page  ------------------------------------------*/

// Projects
.projects-grid-columns {
    padding: 80px 50px;
}
.projects-full-grid {
    padding-bottom: 100px;
    .projects-content {
        .item {
            width: 25%;
            margin-bottom: 0;
            float: left;
            padding-left: 0px;
            padding-right: 0px;
        }
    }
}

.projects-mansory {
    padding: 80px 0 70px 0;
    .projects-content {
        .item {
            margin-bottom: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
    }
}
.projects-content {
    .item {
        position: relative;
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        @include hover-img-across();
        .info {
            width: 100%;
            text-align: center;
            padding: 0 45px;
            color: $grey-regular;
            opacity: 0;
            z-index: 5;
            @include transition(all 300ms ease);
            .desc {
                border: 1px solid $yellow;
                padding: 10px;
                margin-top: 25px;
                a {
                    color: #ccc;
                }
            }
        }
        &:hover {
            .info {
                opacity: 1;
            }
            figure {
                &:after {
                    opacity: 1;
                }
                .overlay {
                    opacity: 1;
                }
            }
        }
    }
    .filter-projects {
        margin-bottom: 50px;
        border-bottom: none;
        @extend list-type-ulli;
        // display: inline-block;
        li {
            // float: left;
            span {
                color: #666;
                margin: 8px 17px;
                padding: 0;
                padding-bottom: 5px;
                border: none;
                background: transparent;
                outline: none;
                @include border-radius(0px);
                font-size: 16px;
                text-transform: uppercase;
                cursor: pointer;
                &:hover {
                    border-color: transparent;
                    border-bottom: 2px solid #ffc20a;
                }
            }
            .is-checked {
                color: #555;
                font-weight: bold;
                border-bottom: 2px solid $yellow;
                font-weight: bold;
                color: $black-title;
                
            }
        }

    }
}

.grid {
    counter-reset: grid-item;
}


/* clearfix */

.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
    width: 33.333%;
}

.grid-item {
    float: left;
}

.grid-item img {
    display: block;
    max-width: 100%;
    width: 100%;
}