.portfolio_image {
    width: 100%;
}
/*.portfolio-overlayy:hover{
    background: rgba(34, 34, 34, 0.6) none repeat scroll 0 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.portfolio-overlayy {
    display: none;
}*/

.portfolio-container_shortcode .portfolio02-overlay i {
    bottom: calc(50% - 15px);
    color: #fff;
    font-size: 30px !important;
    left: calc(50% - 10px);
    opacity: 0;
    text-align: center;
}
.portfolio02-overlay:hover i {
    opacity: 1;
}
.relative{
    display: block;
    position: relative;
}
.portfolio02-overlay {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 300ms ease-in-out 0ms;
    width: 100%;
}
.portfolio02-overlay:hover {
    background: rgba(35,40,45,0.4) none repeat scroll 0 0 !important;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 300ms ease-in-out 0ms;
    width: 100%;
}


/*new effect*/
/*grid*/
.grid {
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 1em 0 4em;
    /*max-width: 1000px;*/
    list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    /*margin: 10px 1%;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;*/
    /*width: 48%;*/
    margin: 0px;
    height: auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
    padding: 0px; 
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
    width: 100%;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h3 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h3 span {
    font-weight: 800;
}

.grid figure h3,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}





/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

figure.effect-phoebe {
    background: #675983;
}

figure.effect-phoebe img {
    opacity: 0.85;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
    opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/wp-content/themes/connectionwp/images/svg/triangle2.svg) no-repeat center center;
    /*background-size: 100% 100%;*/
    background-size: 100% 110%;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(5,2.5,1);
    transform: scale3d(5,2.5,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
    opacity: 0.6;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

/*figure.effect-phoebe h3 {
    margin-top: 0px;
    -webkit-transition: transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}*/

figure.effect-phoebe h3 {
    margin-top: 0px;
    -webkit-transition: transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0px, 0px, 0px) rotate(180deg);
    transform: translate3d(0px, 0px, 0px) rotate(180deg);
}

figure.effect-phoebe:hover h3 {
    -webkit-transform: translate3d(0px, 40px, 0px) rotate(180deg);
    transform: translate3d(0px, 40px, 0px) rotate(180deg);
}

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

figure.effect-phoebe p a {
    color: #fff;
    font-size: 140%;
    opacity: 0;
    position: relative;
    display: inline-block;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

/*figure.effect-phoebe p a:first-child {
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}*/

figure.effect-phoebe p a:nth-child(1) {
    -webkit-transform: translate3d(0,60px,0);
    transform: translate3d(0,60px,0);
}

/*figure.effect-phoebe p a:nth-child(3) {
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}*/

figure.effect-phoebe:hover p a {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
figure.effect-phoebe figcaption {
    transform: rotate(-180deg);
}
/*figure.effect-phoebe:hover h3 {
    transform: rotate(-180deg);
}
figure.effect-phoebe figcaption {
    transform: rotate(180deg);
}*/