/* ----------------------------------------------------------------
	Grid Layout
-----------------------------------------------------------------*/

.grid-layout,
.portfolioo,
.posts {
    position: relative;
    // margin: 0 -12px -12px 0;
    display: block;
    clear: both;
    padding: 0;
}

.grid-layout {
  opacity: 0;
margin-bottom: -2px !important; 
  transition: opacity .3s ease; 
    //transition-delay: .5s;
}

.grid-layout .portfolio-item {
   // transition-delay: 1s;
}
.grid-layout.grid-loaded {
  opacity: 1; 

}

.grid-mix-size {
    .portfolio-item:nth-child(2n) {
        .new-badge {
            right: 70px !important;
        }
        >.portfolio-item-wrap {
            -webkit-transform: scale(.75);
            transform: scale(.8);
        }
    }
}


/*Grid columns: 5*/

.grid-6-columns .grid-item,
.post-6-columns .post-item,
.portfolio-6-columns .portfolio-item {
    width: 16.6666666666%;
    &.large-width {
        width: 33.333333333%;
    }
}


/*Grid columns: 5*/

.grid-5-columns .grid-item,
.post-5-columns .post-item,
.portfolio-5-columns .portfolio-item {
    width: 20%;
    &.large-width {
        width: 40%;
    }
}


/*Grid columns: 4*/

.grid-4-columns .grid-item,
.post-4-columns .post-item,
.portfolio-4-columns .portfolio-item {
    width: 25%;
    &.large-width {
        width: 50%;
    }
}


/*Grid columns: 3*/

.grid-3-columns .grid-item,
.post-3-columns .post-item,
.portfolio-3-columns .portfolio-item {
    width: 33.333333333%;
    &.large-width {
        width: 66.6666666666%;
    }
}


/*Grid columns: 2*/

.grid-2-columns .grid-item,
.post-2-columns .post-item,
.portfolio-2-columns .portfolio-item {
    width: 50.00%;
    &.large-width {
        width: 100%;
    }
}


/*Grid columns: 1*/

.grid-1-columns .grid-item,
.post-1-columns .post-item,
.portfolio-1-columns .portfolio-item {
    width: 100%;
    &.large-width {
        width: 100%;
    }
}

@media (max-width: 1380px) {
        .grid-5-columns .grid-item,
        .post-5-columns .post-item,
        .portfolio-5-columns .portfolio-item {
            width: 25%;
            &.large-width {
                width: 50%;
            }
        }
    
}


/*Tablet Landscape*/

@media (max-width: 991px) {
    /*Grid columns: 6,5,4*/
    .grid-6-columns .grid-item,
    .post-6-columns .post-item,
    .portfolio-6-columns .portfolio-item,
    .grid-5-columns .grid-item,
    .post-5-columns .post-item,
    .portfolio-5-columns .portfolio-item,
    .grid-4-columns .grid-item,
    .post-4-columns .post-item,
    .portfolio-4-columns .portfolio-item {
        width: 33.3333333333%;
        &.large-width {
            width: 66.6666666666%;
        }
    }
    /*Grid columns: 3,2*/
    .grid-3-columns .grid-item,
    .post-3-columns .post-item,
    .portfolio-3-columns .portfolio-item,
    .grid-2-columns .grid-item,
    .post-2-columns .post-item,
    .portfolio-2-columns .portfolio-item {
        width: 50%;
        &.large-width {
            width: 100%;
        }
    }
}


/*Tablet Portrait*/

@media (max-width: 767px) {
    /*Grid columns: 6,5,4*/
    .grid-6-columns .grid-item,
    .post-6-columns .post-item,
    .portfolio-6-columns .portfolio-item,
    .grid-5-columns .grid-item,
    .post-5-columns .post-item,
    .portfolio-5-columns .portfolio-item,
    .grid-4-columns .grid-item,
    .post-4-columns .post-item,
    .portfolio-4-columns .portfolio-item {
        width: 50%;
        &.large-width {
            width: 100%;
        }
    }
    /*Grid columns: 3,2*/
    .grid-3-columns .grid-item,
    .post-3-columns .post-item,
    .portfolio-3-columns .portfolio-item,
    .grid-2-columns .grid-item,
    .post-2-columns .post-item,
    .portfolio-2-columns .portfolio-item {
        width: 50%;
        &.large-width {
            width: 100%;
        }
    }
}


/*Tablet Portrait*/

@media (max-width: 480px) {
    /*Grid columns: 6,5,4,3,2*/
    .grid-6-columns .grid-item,
    .post-6-columns .post-item,
    .portfolio-6-columns .portfolio-item,
    .grid-5-columns .grid-item,
    .post-5-columns .post-item,
    .portfolio-5-columns .portfolio-item,
    .grid-4-columns .grid-item,
    .post-4-columns .post-item,
    .portfolio-4-columns .portfolio-item,
    .grid-3-columns .grid-item,
    .post-3-columns .post-item,
    .portfolio-3-columns .portfolio-item,
    .grid-2-columns .grid-item,
    .post-2-columns .post-item,
    .portfolio-2-columns .portfolio-item {
        width: 100%;
        &.large-width {
            width: 100%;
        }
    }
	
	
	.grid-xs-2-columns .grid-item,
    .post-xs-2-columns .post-item,
    .portfolio-xs-2-columns .portfolio-item {
        width: 50%;
        &.large-width {
            width: 100%;
        }
    }
	
	.grid-xs-3-columns .grid-item,
    .post-xs-3-columns .post-item,
    .portfolio-xs-3-columns .portfolio-item {
        width: 33.3333333333%;
        &.large-width {
            width: 66.6666666666%;
        }
    }
	
	.grid-xs-4-columns .grid-item,
    .post-xs-4-columns .post-item,
    .portfolio-xs-4-columns .portfolio-item {
        width: 25%;
        &.large-width {
            width: 25%;
        }
    }
		
	
}


/*Grid item */

.grid-item .post-item {
    width: 100%;
    padding: 0;
}

.grid-item>img,
.grid-item>a>img {
    width: 100%;
}


/* ----------------------------------------------------------------
	Grid Filter
-----------------------------------------------------------------*/

.grid-filter {
    clear: both;
    display: block;
    height: 34px;
    width: 100%;
    margin-bottom: 26px;
    position: relative;
    ul {
        list-style: none;
        padding: 0;
        position: relative;
        height: auto;
    }
    li {
        position: relative;
        margin-right: 6px;
        border: 0;
        margin-bottom: -1px;
        display: inline-block;
        float: left;
        a {
            font-family: $font-family-3;
            font-weight: 600;
            display: block;
            position: relative;
            padding: 8px 10px;
            font-size: 13px;
            line-height: 15px;
            color: $color-body;
            border-radius: 50px;
            transition: all .3s ease;
            border-width: 2px;
            border-style: solid;
            border-color: transparent;
        }
        &:hover,
        &.active {
            a {
                color: $color-white;
                background-color: $color-theme;
            }
        }
    }
    &.gf-outline {
        li {
            &:hover,
            &.active {
                a {
                    border-color: $color-theme;
                    color: $color-theme;
                    background-color: transparent;
                }
            }
        }
    }
    &.gf-lines {
        li {
            a {
                border-radius: 0;
                border: none;
                background-color: transparent !important;
                &:after {
                    content: '';
                    position: absolute;
                    top: auto;
                    bottom: -2px;
                    left: 50%;
                    width: 0;
                    height: 2px;
                    transition: all 0.3s ease;
                }
            }
            &:hover,
            &.active {
                a {
                    color: $color-theme;
                    &:after {
                        width: 100%;
                        left: 0%;
                        background-color: $color-theme;
                    }
                }
            }
        }
    }
    &.gf-line-bottom {
        border-bottom: 2px solid #ebebeb;
    }
    &.gf-classic {
        li {
            a {
                color: $color-body;
                border-radius: 4px;
            }
            &:hover,
            &.active {
                a {
                    background-color: $color-theme;
                    color: $color-white;
                }
            }
        }
    }
    &.gf-light {
        li {
            a {
                color: $color-white;
                background-color: transparent;
            }
            &:hover,
            &.active {
                a {
                    color: $color-white;
                    border-color: $color-white;
                }
            }
        }
    }
    &.gf-dark {
        li {
            a {
                color: $dark;
                background-color: transparent;
            }
            &:hover,
            &.active {
                a {
                    border-color: $dark;
                }
            }
        }
    }
    &.gf-default {
        li {
            a {
                color: none;
                border-radius: 0;
                background-color: transparent;
            }
            &:hover,
            &.active {
                a {
                    background-color: transparent;
                    color: $color-theme;
                }
            }
        }
    }
    &.gf-creative {
        li {
            a {
                border-radius: 0;
                border: none;
                background-color: transparent;
                &:after {
                    background: $dark;
                    content: "";
                    height: 2px;
                    left: 0;
                    opacity: 0;
                    position: absolute;
                    top: 100%;
                    transform: translateY(10px);
                    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
                    width: 100%;
                }
            }
            &:hover,
            &.active {
                a {
                    color: $color-body;
                    &:after {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                }
            }
        }
    }
    &.gf-list {
        li {
            clear: both;
            margin-bottom: 3px;
        }
    }
    &.center {
        li {
            text-align: center;
            float: none;
        }
    }
}

.grid-active-title {
    font-family: $font-family-3;
    font-size: 64px;
    font-weight: 100;
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: -6px;
}

.content .grid-active-title {
    font-size: 42px;
}

.sidebar-both .grid-active-title {
    display: none;
}

@media (max-width: 991px) {
    .grid-active-title {
        display: none;
    }
    .grid-filter {
        li {
            width: 33.33%;
            margin-right: 0;
            margin-bottom: 4px;
            a {
                text-align: center;
                transition: none;
            }
        }
    }
}

@media (max-width: 479px) {
    .grid-filter {
        li {
            width: 50%;
            margin-right: 0;
        }
    }
}


/* ----------------------------------------------------------------
	Extras
-----------------------------------------------------------------*/

.infinite-scroll-message,
#showMore {
    height: 80px;
    padding-top: 36px;
    text-align: center;
    p {
        margin: 0;
    }
}