/* Portfolio */
.portfolio-filters {
    margin-bottom:20px;
    text-align:center;
}
.portfolio-filters-cate {
    li {
        margin-bottom:5px;
        a {
            color:#B0B0B0;
            display:inline-block;
            border:1px solid #E0E0E0;
            padding:5px 15px;
            border-radius:18px;
            height:30px;
            line-height:20px;
            cursor:pointer;
            .box-shadow(1px 1px 5px 1px #EEE);
            .transition(500ms);
        }
        a:hover {
            color:@theme_color;
            border:1px solid @theme_color;
        }
        a.active {
            color:#000000;
            border:1px solid #d0d0d0;
        }
    }
}
.portfolio-element {
    margin-bottom:20px !important;
}
.portfolio-wrap {
    position:relative;
    img {
        width:100% !important;
    }
    .post-tip {
        .entry-title {
            line-height:20px;
            position:absolute;
            left:0px;
            top:50%;
            text-align:center;
            width:100%;
            margin-top:-10px;
            color:@theme_color;
            display:none;
            i {
                margin-top:-5px;
                margin-right:5px;
            }
        }
        .post-tip-info {
            .entry-title {
                text-align:left;
                position:static;
                margin:0px;
                color:white;
                margin-bottom:10px;
            }
        }
    }
}
.portfolio-wrap:hover {
    .post-tip {
        .entry-title {
            display:block;
        }
        p {
            display:block;
        }
    }
}
.post-tip-info {
    position:absolute;
    left:0px;
    top:0px;
    padding:5%;
    width:90%;
    height:90%;
    p {
        float:left;
        color:white;
        font-size:12px;
        display:none;
    }
    .portfolio-client {
        color:@theme_color;
        margin-top:10px;
        font-size:13px;
        display:block;
    }
}
.portfolio-content {
    width:100%;
    float:left;
    .entry-title {
        color:#3A3A3A;
        font-weight:300;
        margin:0 0 5px;
    }
    .portfolio-categories {
        margin-bottom:5px;
        color:#AEAEAE;
        font-style:italic;
        font-size:12px;
    }
}
.portfolio-style-1 {
    .portfolio-content {
        border-bottom:1px #e8e8e8 solid;
        padding:10px 0px;
        text-align:center;
    }
}
.portfolio-style-3 {
    .portfolio-content {
        padding-top:10px;
        text-align:left;
    }
    .portfolio-title {
        position:relative;
    }
    .portfolio-type {
        display:inline-block;
        width:30px;
        height:30px;
        background:@theme_color;
        padding:5px;
        position:absolute;
        left:0;
        top:-40px;
        float:left;
        line-height:20px;
        span {
            width:20px;
            height:20px;
            line-height:20px;
            background-size:20px 20px;
        }
    }
}
.portfolio-element.portfolio-style-1:hover {
    .portfolio-content {
        background:#F8F8F8;
        border-bottom:1px @theme_color solid;
    }
}
.portfolio-element:hover {
    .portfolio-content {
        .entry-title {
            color:@theme_color;
        }
    }
    .post-tip {
        opacity:1;
        .transition(500ms);
    }
}
.portfolio-element:hover .post-tip div.left-link,.portfolio-element:hover .post-tip div.right-link {
    left:50%;
}
.portfolio-style-4 {
    .portfolio-img {
        position:relative;
    }
    .post-mask-content {
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(255,255,255,0.8);
        left:0;
        top:0;
        text-align:center;
        .transition(600ms);
        opacity:0;
        .centered {
            width:90%;
            padding:0 20px;
            display:inline-block;
            vertical-align:middle;
        }
    }
    .post-mask-content:before {
        content:'';
        display:inline-block;
        height:100%;
        vertical-align:middle;
        margin-right:-0.25em;
    }
    .portfolio-wrap {
        padding:5px;
        border:1px solid #e8e8e8;
    }
}
.portfolio-style-4:hover {
    .post-mask-content {
        opacity:1;
    }
}
.single-portfolio {
    .post-entry {
        .entry-title {
            margin:0 0 10px;
        }
    }
}
.single-portfolio-left-content,
.single-portfolio-right-content {
    float:left;
    margin-bottom:15px;
}
.single-portfolio-left-content {
    .post-element-content {
        float:left;
        width:100%;
        margin-bottom:15px;
    }
}
.single-portfolio-meta {
    display:inline-block;
    text-align:left;
    list-style-type:none;
    margin:0 0 15px;
    border:1px #e8e8e8 solid;
	&.single-portfolio-style-3 {
		margin-top:20px;
	}
    li {
        float:left;
        width:100%;
        border-bottom:1px #e8e8e8 solid;
        padding:7px 0px;
        line-height:20px;
    }
    li:last-child {
        border:none;
    }
    li:hover {
        background:#f2f2f2;
    }
    .type {
        float:left;
        margin-left:10px;
        line-height:14px;
        i {
            width:20px;
            height:20px;
            line-height:20px;
            text-align:center;
            margin-right:5px;
        }
    }
    .value {
        float:right;
        margin-right:10px;
        line-height:18px;
        max-width:60%;
        text-align:right;
    }
}
.single-portfolio-share {
    margin:10px 0px 10px 10px;
    line-height:10px;
}
.single-portfolio-content {
    margin-bottom:20px;
}
.circle-color {
    float:left;
    width:16px;
    height:16px;
    border-radius:20px;
    margin-left:5px;
}

.single-portfolio {
    .post-entry.single-portfolio-style-4 {
	
	.single-portfolio-right-content {
	    .entry-title{
		margin: 0 0 20px;
		padding-bottom: 20px;
		border-bottom: 2px solid #f2f2f2;
	    }
	    
	    .single-portfolio-meta {
		margin: 0 0 20px;
		padding-bottom: 20px;
		border: none;
		border-bottom: 2px solid #f2f2f2;
		width: 100%;
		li {
		    border-bottom:none;
		    &:hover {
			background: none;
		    }
		}
		
		.type {
		    margin-left: 0;
		    color: #515151;
		}
	    }
	    
	    .portfolio-preview-link {
		margin: 0 0 20px;
		padding-bottom: 20px;
		border-bottom: 2px solid #f2f2f2;
	    }
	    
	}
	
    }
}

@media (max-width: 767px) { 
.portfolio-filters-cate {
    li {
        a {
			margin-bottom:10px;
		}
	}
}
}
@media (max-width: 480px) {
.portfolio-element {width:100%;}
.portfolio-filters-cate li a {
	margin-bottom: 10px;
}
}
