/* Portfolio */
#portfolio {
    position:relative;
}
#portfolio::before{
    position:absolute;
    content:"";
    height:100%;
    width:100%;
  /*  background: rgba(255,203,15,0.85); */
    top:0;
    left:0;
}
.portfolio_area{ position:relative;color:#fff;}
.portfolio_area h2 {
    color: #fff;
    margin: 65px 0 34px;
}
/* Portfolio filters */
#filters {
    margin: 52px 0 38px;
}
#filters > button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 18px;
    outline: 0 none;
    padding: 6px 17px 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
#filters > button:hover {
    border: 1px solid #282828;
    color: #282828;
}
#filters > button.is-checked {
    background: #282828;
}
#filters > button.is-checked:hover {
    color: #fff;
}
.grid{margin: 0;}

.grid-item, .grid-sizer {width: calc(33.333% - 20px);margin:10px}
.grid-item {
    float: left;
    height: 300px;
	border:20px solid transparent;
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}
@media screen and (max-width:1000px) {
	.grid-item, .grid-sizer {width: calc(33.333% - 20px);margin:10px}
	.grid-item {
		height: 200px;
		border:10px solid transparent;

	}
}
@media screen and (max-width:736px) {
	.grid-item, .grid-sizer {width: calc(50% - 20px);margin:10px}
	.grid-item {
		height: 230px;
	}
}
@media screen and (max-width:500px) {
	.grid-item, .grid-sizer {width: calc(50% - 10px);margin:5px}
	.grid-item {
		height: 150px;
		border:5px solid transparent;
	}
}

.grid-item{
    overflow: hidden;
}
.grid-item img{
   width:100%;
   height:auto !important;
}
.grid-item--width2 { width: 50%;}
.grid-item--height2 { height: 510px !important;}
.grid-item:hover img{
    transform: scale(1.1);
}
.grid-item img{
    height: 100%;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
    transition: all 0.6s;
}
/* Portfolio Hover */
.portfolio_hover_area {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    text-align: left;
    opacity:0;
}
.grid-item:hover .portfolio_hover_area {opacity: 1;}
.portfolio_hover_area .fa {
    background: #aaa none repeat scroll 0 0;
    border: 2px solid transparent;
    border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    font-size: 30px;
    margin-top: 215px;
    padding: 15px;
    border:1px solid transparent;
}
.grid-item .portfolio_hover_area .fa {
    margin-top: 5px;
	 margin-left: 5px;
}
.grid-item--width2 .portfolio_hover_area .fa {
    margin-top: 217px;
}
.portfolio_hover_area > a:first-child{  margin-right: 10px;}
.portfolio_hover_area .fa:hover{
    border:1px solid #aaa;
    background:transparent;
    color:#aaa;
}