/********* 
Portfolio Styles for the filter & items 
*********/
.portfolio-filter-area{margin-bottom:5%}
@media(min-width:768px) {
.portfolio-filter-area{margin-bottom:3%}
}
.portfolio-filter{padding:0;margin:0}
.portfolio-filter li{list-style:none;display:inline-block;margin:5px 15px}
.portfolio-filter li a{display:block;padding:10px;background:transparent;color:#1c1e21;font-family: 'Dosis', sans-serif;font-weight:400;font-size:16px;line-height:1;text-decoration:none;outline:none;text-transform:uppercase;border-bottom: 2px solid transparent;}
.portfolio-filter li.active a,.portfolio-filter li.active a:hover{background-color:transparent;border-color:#4AA8D3;color:#4AA8D3;border-bottom:2px solid #4AA8D3}
.portfolio-filter li a:hover{background-color:transparent;border-color:#4AA8D3;color:#4AA8D3;border-bottom:2px solid #4AA8D3}
.portfolio-items{margin:-8px;-webkit-transition:all .6s ease;transition:all .6s ease;-webkit-transition-delay:.6s;transition-delay:.6s}
.single-item{display:block;width:25%;padding:10px;float:left;position:relative}
.single-item a{display:block;-webkit-transition:none!important;transition:none!important}
.portfolio-image{position:relative;width:100%;overflow:hidden;background:#4AA8D3}
.portfolio-image img{max-width:inherit;width:100%;-webkit-transition:all .45s ease-out;transition:all .45s ease-out;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.portfolio-content{position: absolute;top: 0;right: 0;bottom: 0;left: 0;   opacity: 0;transition: opacity .3s ease-in-out;z-index: 2;text-align:center;background:rgba(0,0,0,0.8)}
.portfolio-content-inner{width: 100%;padding: 0 50px;text-align: center;   position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.p-title{font-size:18px;letter-spacing:1px;text-transform:uppercase;margin:0;font-family: 'Dosis', sans-serif;font-weight:400;position:relative;margin-bottom:5px;color:#FFF;padding-bottom:5px;}
.portfolio-content-inner p{color:#FFF;font-size: 15px; line-height:16px;}
.single-item:hover img{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
.single-item:hover .portfolio-content{opacity:1;filter:alpha(opacity=100)}
.modal-open {padding-right: 0px !important;}
.modal-dialog{max-width:90%;margin:5% auto}
.modal-content{border-radius:0}
.modal-title{line-height:1.3;font-size:24px;letter-spacing:1px;text-transform:uppercase;margin:0;font-family: 'Dosis', sans-serif;margin-bottom:15px}
.modal-content .portfolio-image{margin-bottom:30px}
.modal-content .description p{margin:0}
.modal-footer{text-align:center;border-top:0 solid #e5e5e5}
@media (min-width: 768px) {
#portfolioModal .modal-dialog {
    width: 800px;
    margin: 30px auto;}
}

.portfolio-grid-2 .single-item{
	width: 50%;
}
.portfolio-grid-3 .single-item{
	width: 33.333%;
}
.portfolio-grid-5 .single-item{
	width: 20%;
}

.single-item .portfolio-content-inner{padding: 0 10px;
}

/********* 
Laptop 
*********/
@media (max-width: 1400px) {
.single-item {width: 33.1%;}
}

/********* 
Small Tablet 
********/
@media (max-width: 991px) {
.single-item {width: 50%;}
.portfolio-filters-area {margin-bottom: 10%;}

.portfolio-grid-2 .single-item{
	width: 33.3%;
}
.portfolio-grid-3 .single-item{
	width: 33.3%;
}
.portfolio-grid-5 .single-item{
	width: 33.3%
}

}


/*********  
Small Tablet Portrait 
********/
@media (max-width: 800px) and (min-height: 1000px) {
.modal-dialog {margin: 15% auto;}
}

/********* 
Smallest Tablet & Mobile 
*********/
@media (max-width: 767px) {
.single-item .protfolio-content,  .single-item:hover .protfolio-content {opacity: 0 !important;filter: alpha(opacity=0);}

.portfolio-grid-2 .single-item{
	width: 50%;
}
.portfolio-grid-3 .single-item{
	width: 50%;
}
.portfolio-grid-5 .single-item{
	width: 50%
}
}

/*********  
Small Mobile 
*********/
@media (max-width: 500px) {
.single-item {width: 100%;}
.portfolio-filters li a {padding: 2px 8px;}
.portfolio-filter li{display:block;}
.portfolio-grid-2 .single-item{
	width: 100%;
}
.portfolio-grid-3 .single-item{
	width: 100%;
}
.portfolio-grid-5 .single-item{
	width: 100%;
}
}