.wpb_portfolio_area *, .wpb_portfolio_area *:after, .wpb_portfolio_area *:before { 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden;
}
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
.wpb_portfolio_area a,
.wpb_portfolio_area a:hover,
.wpb_portfolio_area a:active,
.wpb_portfolio_area a:focus,
.wpb_fp_btn,
.wpb_fp_btn:hover,
.wpb_fp_btn:active,
.wpb_fp_btn:focus{
text-decoration: none;
outline: 0;
}
.wpb-fp-filter li, 
.wpb_fp_btn, 
#wpb-fp-sort-portfolio {
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.wpb_fp_btn {
padding: 10px 16px;
border-radius: 3px;
margin-top: 7px;
display: inline-block;
color: #fff;
text-transform: uppercase;
margin-bottom: 25px;
}
.wpb_portfolio_post{
margin-bottom: 10px;
} .wpb_fp_icons > a {
width: 42px;
display: inline-block;
height: 42px;
background: #fff;
text-align: center;
}
.wpb_fp_icons > a > i {
display: block;
line-height: 42px;
font-size: 18px;
color: #ffffff;
}
.wpb_fp_notice {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
.wpb_fp_notice_error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.wpb-portfolio-hover-bg-no.wpb_portfolio figure,
.wpb-portfolio-hover-bg-no.wpb_portfolio figure figcaption {
background: transparent!important;
}
.wpb-portfolio-hover-bg-no.wpb_portfolio figure img {
opacity: 1!important;
}
.wpb-portfolio-no-overly {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
} .wpb_fp_slider {
position: relative;
}
.wpb_fp_slider.owl-theme .owl-nav,
.wpb_fp_slider .wpb_portfolio_post {
margin: 0;
}
.wpb_fp_slider.owl-carousel .owl-nav button {
position: absolute;
top: 42%;
color: #fff;
margin: 0 15px;
padding: 0;
border: 0;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: normal;
transition: .3s all ease-out;
}
.wpb_fp_slider.owl-carousel .owl-nav button.owl-prev { left: 0; }
.wpb_fp_slider.owl-carousel .owl-nav button.owl-next { right: 0; }
.rtl .wpb_fp_slider.owl-carousel .owl-nav button.owl-prev { left: unset; right: 0; }
.rtl .wpb_fp_slider.owl-carousel .owl-nav button.owl-next { right: unset; left: 0; }
.wpb_fp_slider.owl-carousel .owl-nav button:focus, .wpb_fp_slider.owl-theme .owl-dots .owl-dot:focus {
outline: 0;
box-shadow: none;
}
.wpb_fp_slider.owl-carousel .owl-nav button span {
line-height: normal;
font-size: 24px;
font-weight: bold;
}
.wpb_fp_slider.owl-theme .owl-dots {
margin-top: 20px;
}
.wpb_fp_slider.owl-theme .owl-dots .owl-dot span {
opacity: 0.5;
}
.wpb_fp_slider.owl-theme .owl-dots .owl-dot.active span, .wpb_fp_slider.owl-theme .owl-dots .owl-dot:hover span {
opacity: 1;
} .mfp-wrap button:hover, .mfp-wrap button:active, .mfp-wrap button:focus{
background: transparent;
box-shadow: none;
} .white-popup {
position: relative;
background: #FFF;
padding: 0;
width:auto;
max-width: 80%;
margin: 0 auto; 
}
.wpb_fp_quick_view_img {
display: flex;
}
.wpb_fp_quick_view img{
max-width: 100%;
}
.wpb_fp_quick_view_content {
padding-top: 30px;
padding-right: 30px;
}
.wpb_fp_quick_view_content img {
height: auto;
}
.wpb_fp_quick_view_content h2 {
font-size: 28px;
font-weight: lighter;
margin-bottom: 20px;
margin-top: 0;
}
.wpb_fp_quick_view_content p {
margin-bottom: 12px;
line-height: 18px;
font-size: 13px;
}
.wpb_fp_quick_view_content .wpb_fp_btn{
border: 1px solid;
}
.wpb_fp_quick_view_content .wpb_fp_btn:hover{
background: transparent;
}
@media (min-width: 768px){
.wpb_fp_quick_view_content{
padding-left: 20px;
padding-right: 20px;
}
} .mfp-zoom-in .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .mfp-newspaper .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.5s;
-webkit-transform: scale(0) rotate(500deg);
transform: scale(0) rotate(500deg);
}
.mfp-newspaper.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.5s;
}
.mfp-newspaper.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.mfp-newspaper.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-newspaper.mfp-removing .mfp-with-anim {
-webkit-transform: scale(0) rotate(500deg);
transform: scale(0) rotate(500deg);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-newspaper.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .mfp-move-horizontal .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
.mfp-move-horizontal.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s;
}
.mfp-move-horizontal.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateX(0);
transform: translateX(0);
}
.mfp-move-horizontal.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-move-horizontal.mfp-removing .mfp-with-anim {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-move-horizontal.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .mfp-move-from-top .mfp-content {
vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.2s;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.2s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateY(0);
transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-move-from-top.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .mfp-3d-unfold .mfp-content {
-webkit-perspective: 2000px;
perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-60deg);
transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .mfp-zoom-out .mfp-with-anim {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s ease-in-out;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
opacity: 0.8;
filter: alpha(opacity=80);
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
filter: alpha(opacity=0);
}
.mfp-zoom-out.mfp-removing.mfp-bg {
opacity: 0;
filter: alpha(opacity=0);
} .wpb_fp_grid {
position: relative;
text-align: center;
} .wpb_portfolio figure {
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
cursor: pointer;
margin: 0;
}
.wpb_portfolio figure img {
position: relative;
display: block; max-width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.wpb_portfolio figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.wpb_portfolio figure figcaption::before,
.wpb_portfolio figure figcaption::after {
pointer-events: none;
}
.wpb_portfolio figure figcaption,
.wpb_portfolio figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}  .wpb_portfolio figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.wpb_portfolio figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.wpb_portfolio figure h2 span {
font-weight: 800;
}
.wpb_portfolio figure h2,
.wpb_portfolio figure p {
margin: 0;
color: #ffffff;
}
.wpb_portfolio figure p {
letter-spacing: 1px;
font-size: 68.5%;
}    figure.effect-lily img {
max-width: none;
width: -webkit-calc(100% + 50px);
width: calc(100% + 50px);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}
figure.effect-lily figcaption {
text-align: left;
}
figure.effect-lily figcaption > div {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
height: 50%;
}
figure.effect-lily h2,
figure.effect-lily p {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
figure.effect-lily h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-lily p {
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}
figure.effect-lily:hover img,
figure.effect-lily:hover p {
opacity: 1;
}
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-lily:hover p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}   figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
figure.effect-sadie figcaption::before,
figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}
figure.effect-roxy img,
.wpb_fp_slider.owl-carousel figure.effect-roxy img {
max-width: none;
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50px,0,0);
transform: translate3d(-50px,0,0);
}
.rtl figure.effect-roxy img,
.rtl .wpb_fp_slider.owl-carousel figure.effect-roxy img {
-webkit-transform: translate3d(50px,0,0);
transform: translate3d(50px,0,0);
}
figure.effect-roxy figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px,0,0);
transform: translate3d(-20px,0,0);
}
figure.effect-roxy figcaption {
padding: 3em;
text-align: left;
}
figure.effect-roxy h2 {
padding: 30% 0 10px 0;
}
figure.effect-roxy p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
padding: 2em 0 0;
}
figure.effect-roxy:hover img,
.wpb_fp_slider.owl-carousel figure.effect-roxy:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-bubba {
background: #9e5406;
}
figure.effect-bubba img {
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-bubba:hover img {
opacity: 0.4;
}
figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
figure.effect-bubba h2 {
padding-top: 30%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
figure.effect-bubba p {
padding: 2.5em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-romeo {
-webkit-perspective: 1000px;
perspective: 1000px;
}
figure.effect-romeo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,300px);
transform: translate3d(0,0,300px);
}
figure.effect-romeo:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
figure.effect-romeo:hover figcaption::before {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
transform: translate3d(-50%,-50%,0) rotate(45deg);
}
figure.effect-romeo:hover figcaption::after {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
transform: translate3d(-50%,-50%,0) rotate(-45deg);
}
figure.effect-romeo h2,
figure.effect-romeo p {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-romeo h2 {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}
figure.effect-romeo p {
padding: 0.25em 2em;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}
figure.effect-romeo:hover h2 {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}
figure.effect-romeo:hover p {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}   figure.effect-layla {
background: #18a367;
}
figure.effect-layla figcaption {
padding: 3em;
}
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
position: absolute;
content: '';
opacity: 0;
}
figure.effect-layla figcaption::before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
figure.effect-layla figcaption::after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
figure.effect-layla h2 {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-layla p {
padding: 3em 0 0;
text-transform: none;
opacity: 0;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
} figure.effect-layla h2 {
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-layla:hover h2,
figure.effect-layla:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}   figure.effect-honey {
background: #4a3753;
}
figure.effect-honey img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-honey:hover img {
opacity: 0.5;
}
figure.effect-honey figcaption::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-honey h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 1em 1.5em;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
figure.effect-honey h2 i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
figure.effect-honey figcaption::before,
figure.effect-honey h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-oscar {
background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58,52,42,0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
}
figure.effect-oscar h2 {
margin: 20% 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 figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar p {
padding: 3em 0 0 0;
}
figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58,52,42,0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}   figure.effect-marley figcaption {
text-align: right;
}
figure.effect-marley h2,
figure.effect-marley p {
position: absolute;
right: 30px;
left: 30px;
padding: 10px 0;
}
figure.effect-marley p {
bottom: 30px;
line-height: 1.5;
}
figure.effect-marley h2 {
top: 30px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-marley:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-marley h2::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
figure.effect-marley h2::after,
figure.effect-marley p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-ruby {
background-color: #17819c;
}
figure.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-ruby p {
margin: 1em 0 0;
padding: 3em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
} 
figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}   figure.effect-milo {
background: #2e5d5a;
}
figure.effect-milo img {
max-width: none;
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-30px,0,0) scale(1.12);
transform: translate3d(-30px,0,0) scale(1.12);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-milo:hover img {
opacity: 0.5;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
figure.effect-milo h2 {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em;
}
figure.effect-milo p {
padding: 0 10px 0 0;
width: 50%;
border-right: 1px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0,0);
transform: translate3d(-40px,0,0);
}
figure.effect-milo:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-dexter {
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
}
figure.effect-dexter img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-dexter:hover img {
opacity: 0.4;
}
figure.effect-dexter figcaption::after {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
height: -webkit-calc(50% - 30px);
height: calc(50% - 30px);
border: 7px solid #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
figure.effect-dexter:hover figcaption::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-dexter figcaption {
padding: 3em;
text-align: left;
}
figure.effect-dexter p {
position: absolute;
right: 60px;
bottom: 60px;
left: 60px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}
figure.effect-dexter:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-sarah {
background: #42b078;
}
figure.effect-sarah img {
max-width: none;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-sarah:hover img {
opacity: 0.4;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sarah figcaption {
text-align: left;
}
figure.effect-sarah h2 {
position: relative;
overflow: hidden;
padding: 0.5em 0;
}
figure.effect-sarah h2::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
figure.effect-sarah:hover h2::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sarah p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
figure.effect-sarah:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}   figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
figure.effect-zoe h2 {
float: left;
}
figure.effect-zoe p.icon-links a {
float: right;
color: #3c4a50;
font-size: 1.4em;
}
figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
color: #252d31;
}
figure.effect-zoe p.description {
position: absolute;
bottom: 8em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; }
figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
figure.effect-zoe p.icon-links a span::before {
display: inline-block;
padding: 8px 10px;
font-family: 'feathericons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-eye::before {
content: '\e000';
}
.icon-paper-clip::before {
content: '\e001';
}
.icon-heart::before {
content: '\e024';
}
figure.effect-zoe h2 {
display: inline-block;
}
figure.effect-zoe:hover p.description {
opacity: 1;
}
figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-zoe:hover p.icon-links a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-zoe:hover p.icon-links a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-zoe:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}   figure.effect-chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
figure.effect-chico:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-chico figcaption {
padding: 3em;
}
figure.effect-chico figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.effect-chico figcaption::before,
figure.effect-chico p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-chico h2 {
padding: 20% 0 20px 0;
}
figure.effect-chico p {
margin: 0 auto;
max-width: 200px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.wpb_fp_grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
} @font-face {
font-family: "wpbfpicons";
src: url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.eot);
src: url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.eot?#iefix) format("embedded-opentype"),
url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.woff2) format("woff2"),
url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.woff) format("woff"),
url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.ttf) format("truetype"),
url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.svg#Flaticon) format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "wpbfpicons";
src: url(//www.claudiaprevitali.com/wp-content/plugins/advance-portfolio-grid/inc/../assets/fonts/Flaticon.svg#Flaticon) format("svg");
}
}
[class^="wpbfpicons-"]:before, [class*=" wpbfpicons-"]:before,
[class^="wpbfpicons-"]:after, [class*=" wpbfpicons-"]:after {   
font-family: wpbfpicons;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
.wpbfpicons-eye:before { content: "\f100"; }
.wpbfpicons-visible-opened-eye-interface-option:before { content: "\f101"; }
.wpbfpicons-link:before { content: "\f102"; }
.wpbfpicons-chain-links:before { content: "\f103"; }
.wpbfpicons-arrow-right:before { content: "\f104"; }
.wpbfpicons-arrow-left:before { content: "\f105"; }