.portfolio{
background: #f5f5f5;
padding-bottom: 0;
}

#main-container.portfolio{
background: none;
}

/* Portfolio details */
.portfolio-static-item{
padding-bottom: 20px;
}

.portfolio-static h5{
font-size: 16px;
font-weight:600;
padding-bottom:10px;
line-height: normal;
color:#f00;
}

.portfolio-static-item figure.effect-oscar a{
margin-top: 10px;
color:#EA4999;
}

.portfolio-static-item figure.effect-oscar a:hover{
color:#fff;
}

.portfolio-static-desc h3{
font-size: 16px;
margin: 5px 0 -5px 0;
line-height: normal;
}

.portfolio-static-desc a{
color: #6A6A6A;
}

.portfolio-static-item{
padding-bottom: 20px;
}

.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
background: #3085a3;
text-align: center;
width: 100%;
height: 100%;
max-width: 200px;
max-height: 200px;
}
.grid figure figcaption{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #111;
border-radius: 4px;
padding: 5px;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-oscar {
background: #000;
background: rgba(0,0,0,.8);
}

figure.effect-oscar img {
display: block;
width: 100%;
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

figure.effect-oscar figcaption {
padding: 2.5em;
background-color: rgba(0,0,0,0.1);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 2px solid rgba(255,255,255,.5);
content: '';
border-radius: 15px;
}

figure.effect-oscar h3 {
font-size: 18px;
color: #fff;
opacity: 0;
margin: 25% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}

figure.effect-oscar a{
color: #fff;
font-size: 18px;
margin: 20px 5px 0;
display: inline-block;
z-index: 1;
position: relative;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}

figure.effect-oscar a.link i{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar a {
opacity: 0;
-webkit-transition: all 0.35s, -webkit-transform 0.35s;
transition: all 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}

figure.effect-oscar:hover h3 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover h3,
figure.effect-oscar:hover a {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

figure.effect-oscar:hover figcaption {
background-color: rgba(0,0,0,0.5);
}

figure.effect-oscar:hover img {
opacity: 0.4;
}

.icon-pentagon{
display: inline-block;
height: 24px;
width: 40px;
position: relative;
color: #f90;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.icon-pentagon:hover{
color: #fff;
}

.icon-pentagon:before{
border-left: 20px solid rgba(0, 0, 0, 0);
border-right: 20px solid rgba(0, 0, 0, 0);
top: -10px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
}

.icon-pentagon:after {
border-left: 20px solid rgba(0, 0, 0, 0);
border-right: 20px solid rgba(0, 0, 0, 0);
bottom: -10px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
}

.icon-pentagon i{
font-size: 34px;
line-height: 34px;
}