/*==================================================================================================
    Viba Portfolio
================================================================================================= 
    
    1. General
        1.1. Font Icons
        1.2. Margins
    2. Layout
        2.1. Grid
        2.2. Carousel
    3. Media
        3.1. Media Animations
    4. Overlay
        4.1. Overlay Animations
    5. Content
        5.1. Content
        5.2. Cover Content
        5.3. Informations
        5.4. Content Animations
    6. Open With Ajax
    7. Single Viba Portfolio
    8. Portfolio Styles
    9. CSS Keyframes Animations

======================================/

/*====================================
    1. General
====================================*/
.vp-modal-open, 
.vp-modal-open body { overflow: hidden; }

.viba-portfolio-wrapper { position: relative; }

.viba-portfolio { 
    list-style: none; margin: 0; padding: 0; z-index: 3;
    -webkit-transition: height .2s, opacity .2s; transition: height .2s, opacity .2s;
}

.viba-portfolio .viba-portfolio-item { margin: 0; }
.viba-portfolio-item-inner { width: 100%; display: block; position: relative; }

/* clear */
.viba-portfolio::before, .viba-portfolio::after,
.viba-portfolio-content::after { content: ""; display: table; clear: both; }

/* Hole item a clickable link*/
.viba-portfolio-content, .viba-portfolio-cover, .viba-portfolio-cover-fixed,
.viba-portfolio-overlay, .viba-portfolio-phosphorus-overlay { pointer-events: none }
.viba-portfolio-link, .viba-portfolio-likes, .viba-portfolio-item-button { pointer-events:auto }

/************************************
    1.1. Font Icons
************************************/
.viba-portfolio-item-button::before,
.viba-portfolio-likes::before,
.viba-portfolio-categories::before,
.viba-portfolio-categories::after,
.viba-portfolio-media-link::before,
.vp-ajax-actions a::before { 
    font-family: "apalodi-fontello"; font-variant: normal; font-style: normal; font-weight: normal; text-transform: none; text-decoration: none;
    display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale 
}

.vp-ajax-close::before { content: "\e823"; }
.vp-ajax-prev::before { content: "\e9d4"; }
.vp-ajax-next::before { content: "\e9d5"; }

.vp-format-link .vp-link-button::before { content: "\e966"; }
.vp-zoom-button::before { content: "\ea95"; }
.viba-portfolio-likes::before { content: "\e918"; }
.viba-portfolio-likes.is-liked::before { content: "\e885"; }


/************************************
    1.2. Margins
************************************/
.viba-portfolio.vp-margins { width: auto; max-width: none; min-width: 100%; }

/*====================================
    2. Layout
====================================*/
/************************************
    2.1. Grid
************************************/
.vp-layout-grid { 
    opacity: 0; 
    display: -webkit-box; display: -ms-flexbox; display: flex; 
    -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; 
    -ms-flex-wrap: wrap; flex-wrap: wrap; 
}
.no-js .vp-layout-grid,
.vp-layout-grid.is-ready { opacity: 1 }

.vp-layout-grid .viba-portfolio-item {  width: 33.33%; }

/* mobile portrait */
.vp-col-mp-6 .viba-portfolio-item { width: 16.667% }
.vp-col-mp-5 .viba-portfolio-item { width: 20% }
.vp-col-mp-4 .viba-portfolio-item { width: 25% }
.vp-col-mp-3 .viba-portfolio-item { width: 33.334% }
.vp-col-mp-2 .viba-portfolio-item { width: 50% }
.vp-col-mp-1 .viba-portfolio-item { width: 100% }
.vp-col-mp-6 .viba-portfolio-item-big, 
.vp-col-mp-6 .viba-portfolio-item-landscape { width: 33.334% }
.vp-col-mp-5 .viba-portfolio-item-big, 
.vp-col-mp-5 .viba-portfolio-item-landscape { width: 40% }
.vp-col-mp-4 .viba-portfolio-item-big, 
.vp-col-mp-4 .viba-portfolio-item-landscape { width: 50% }
.vp-col-mp-3 .viba-portfolio-item-big, 
.vp-col-mp-3 .viba-portfolio-item-landscape { width: 66.667% }
.vp-col-mp-2 .viba-portfolio-item-big, 
.vp-col-mp-2 .viba-portfolio-item-landscape,
.vp-col-mp-1 .viba-portfolio-item-big, 
.vp-col-mp-1 .viba-portfolio-item-landscape { width: 100% }

/* mobile landscape */
@media screen and ( min-width: 480px ) {
    .vp-col-ml-6 .viba-portfolio-item { width: 16.667% }
    .vp-col-ml-5 .viba-portfolio-item { width: 20% }
    .vp-col-ml-4 .viba-portfolio-item { width: 25% }
    .vp-col-ml-3 .viba-portfolio-item { width: 33.334% }
    .vp-col-ml-2 .viba-portfolio-item { width: 50% }
    .vp-col-ml-1 .viba-portfolio-item { width: 100% }
    .vp-col-ml-6 .viba-portfolio-item-big, 
    .vp-col-ml-6 .viba-portfolio-item-landscape { width: 33.334% }
    .vp-col-ml-5 .viba-portfolio-item-big, 
    .vp-col-ml-5 .viba-portfolio-item-landscape { width: 40% }
    .vp-col-ml-4 .viba-portfolio-item-big, 
    .vp-col-ml-4 .viba-portfolio-item-landscape { width: 50% }
    .vp-col-ml-3 .viba-portfolio-item-big, 
    .vp-col-ml-3 .viba-portfolio-item-landscape { width: 66.667% }
    .vp-col-ml-2 .viba-portfolio-item-big, 
    .vp-col-ml-2 .viba-portfolio-item-landscape,
    .vp-col-ml-1 .viba-portfolio-item-big, 
    .vp-col-ml-1 .viba-portfolio-item-landscape { width: 100% }
}
/* tablet portrait */
@media screen and ( min-width: 768px ) {
    .vp-col-tp-6 .viba-portfolio-item { width: 16.667% }
    .vp-col-tp-5 .viba-portfolio-item { width: 20% }
    .vp-col-tp-4 .viba-portfolio-item { width: 25% }
    .vp-col-tp-3 .viba-portfolio-item { width: 33.334% }
    .vp-col-tp-2 .viba-portfolio-item { width: 50% }
    .vp-col-tp-1 .viba-portfolio-item { width: 100% }
    .vp-col-tp-6 .viba-portfolio-item-big, 
    .vp-col-tp-6 .viba-portfolio-item-landscape { width: 33.334% }
    .vp-col-tp-5 .viba-portfolio-item-big, 
    .vp-col-tp-5 .viba-portfolio-item-landscape { width: 40% }
    .vp-col-tp-4 .viba-portfolio-item-big, 
    .vp-col-tp-4 .viba-portfolio-item-landscape { width: 50% }
    .vp-col-tp-3 .viba-portfolio-item-big, 
    .vp-col-tp-3 .viba-portfolio-item-landscape { width: 66.667% }
    .vp-col-tp-2 .viba-portfolio-item-big, 
    .vp-col-tp-2 .viba-portfolio-item-landscape,
    .vp-col-tp-1 .viba-portfolio-item-big, 
    .vp-col-tp-1 .viba-portfolio-item-landscape { width: 100% }
}
/* tablet landscape */
@media screen and ( min-width: 960px ) {
    .vp-col-tl-6 .viba-portfolio-item { width: 16.667% }
    .vp-col-tl-5 .viba-portfolio-item { width: 20% }
    .vp-col-tl-4 .viba-portfolio-item { width: 25% }
    .vp-col-tl-3 .viba-portfolio-item { width: 33.334% }
    .vp-col-tl-2 .viba-portfolio-item { width: 50% }
    .vp-col-tl-1 .viba-portfolio-item { width: 100% }
    .vp-col-tl-6 .viba-portfolio-item-big, 
    .vp-col-tl-6 .viba-portfolio-item-landscape { width: 33.334% }
    .vp-col-tl-5 .viba-portfolio-item-big, 
    .vp-col-tl-5 .viba-portfolio-item-landscape { width: 40% }
    .vp-col-tl-4 .viba-portfolio-item-big, 
    .vp-col-tl-4 .viba-portfolio-item-landscape { width: 50% }
    .vp-col-tl-3 .viba-portfolio-item-big, 
    .vp-col-tl-3 .viba-portfolio-item-landscape { width: 66.667% }
    .vp-col-tl-2 .viba-portfolio-item-big, 
    .vp-col-tl-2 .viba-portfolio-item-landscape,
    .vp-col-tl-1 .viba-portfolio-item-big, 
    .vp-col-tl-1 .viba-portfolio-item-landscape { width: 100% }
}
/* desktop small */
@media screen and ( min-width: 1124px ) {
    .vp-col-ds-6 .viba-portfolio-item { width: 16.667% }
    .vp-col-ds-5 .viba-portfolio-item { width: 20% }
    .vp-col-ds-4 .viba-portfolio-item { width: 25% }
    .vp-col-ds-3 .viba-portfolio-item { width: 33.334% }
    .vp-col-ds-2 .viba-portfolio-item { width: 50% }
    .vp-col-ds-1 .viba-portfolio-item { width: 100% }
    .vp-col-ds-6 .viba-portfolio-item-big, 
    .vp-col-ds-6 .viba-portfolio-item-landscape { width: 33.334% }
    .vp-col-ds-5 .viba-portfolio-item-big, 
    .vp-col-ds-5 .viba-portfolio-item-landscape { width: 40% }
    .vp-col-ds-4 .viba-portfolio-item-big, 
    .vp-col-ds-4 .viba-portfolio-item-landscape { width: 50% }
    .vp-col-ds-3 .viba-portfolio-item-big, 
    .vp-col-ds-3 .viba-portfolio-item-landscape { width: 66.667% }
    .vp-col-ds-2 .viba-portfolio-item-big, 
    .vp-col-ds-2 .viba-portfolio-item-landscape,
    .vp-col-ds-1 .viba-portfolio-item-big, 
    .vp-col-ds-1 .viba-portfolio-item-landscape { width: 100% }
}
/* desktop large */
@media screen and ( min-width: 1400px ) {
    .vp-col-dl-6 .viba-portfolio-item { width: 16.667% }
    .vp-col-dl-5 .viba-portfolio-item { width: 20% }
    .vp-col-dl-4 .viba-portfolio-item { width: 25% }
    .vp-col-dl-3 .viba-portfolio-item { width: 33.334% }
    .vp-col-dl-2 .viba-portfolio-item { width: 50% }
    .vp-col-dl-1 .viba-portfolio-item { width: 100% }
    .vp-col-dl-6 .viba-portfolio-item-big, 
    .vp-col-dl-6 .viba-portfolio-item-landscape { width: 33.334% }
    .vp-col-dl-5 .viba-portfolio-item-big, 
    .vp-col-dl-5 .viba-portfolio-item-landscape { width: 40% }
    .vp-col-dl-4 .viba-portfolio-item-big, 
    .vp-col-dl-4 .viba-portfolio-item-landscape { width: 50% }
    .vp-col-dl-3 .viba-portfolio-item-big, 
    .vp-col-dl-3 .viba-portfolio-item-landscape { width: 66.667% }
    .vp-col-dl-2 .viba-portfolio-item-big, 
    .vp-col-dl-2 .viba-portfolio-item-landscape,
    .vp-col-dl-1 .viba-portfolio-item-big, 
    .vp-col-dl-1 .viba-portfolio-item-landscape { width: 100% }
}

/************************************
    2.2. Carousel
************************************/
.vp-layout-carousel:not(.is-ready) { white-space: nowrap; overflow: hidden; font-size: 0 }
.vp-layout-carousel:not(.is-ready) .viba-portfolio-item { display: inline-block; vertical-align: top; white-space: normal; }
.vp-layout-carousel:not(.is-ready) .viba-portfolio-item:first-child { margin-left: 0 }
.vp-layout-carousel.is-ready .viba-portfolio-item { width: 100% }

/*====================================
    3. Media
====================================*/
.viba-portfolio-media { display: block; overflow: hidden; position: relative; }

/************************************
    3.1. Media Animations
************************************/
.image-thumbnail .viba-portfolio-thumbnail { -webkit-transition: -webkit-transform .4s, opacity .5s; transition: transform .4s, opacity .5s; will-change: opacity, transform; }

/* Zoom in */
.vp-zoom-in-image .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,0,0) scale3d( 1.2, 1.2, 1.2 ); transform:translate3d(0,0,0) scale3d( 1.2, 1.2, 1.2 ); 
}

/* Zoom out */
.vp-zoom-out-image .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,0,0) scale3d( 1.2, 1.2, 1.2 ); transform:translate3d(0,0,0) scale3d( 1.2, 1.2, 1.2 );
}
.vp-zoom-out-image .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail {
    -webkit-transform:translate3d(0,0,0) scale3d( 1, 1, 1 ); transform:translate3d(0,0,0) scale3d( 1, 1, 1 ); 
}

/* Slide */
.vp-slide-image .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }

.vp-slide-image.vp-zoom-in .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform: translate3d(0,0,0) scale3d( 1.6,1.6,1.6 ); transform: translate3d(0,0,0) scale3d( 1.6,1.6,1.6 ); opacity: 0;
}
.vp-slide-image.vp-zoom-out .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform: translate3d(0,0,0) scale3d( 0.6,0.6,0.6 ); transform: translate3d(0,0,0) scale3d( 0.6,0.6,0.6 ); 
}
.vp-slide-image.vp-animate-from-top .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); 
}
.vp-slide-image.vp-animate-from-right .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); 
}
.vp-slide-image.vp-animate-from-bottom .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); 
}
.vp-slide-image.vp-animate-from-left .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); 
}
.vp-slide-image.vp-animate-from-center-horizontal .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform: translate3d(0,0,0) rotateX(-90deg); transform: translate3d(0,0,0) rotateX(-90deg);
}
.vp-slide-image.vp-animate-from-center-vertical .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform: translate3d(0,0,0) rotateY(-90deg); transform: translate3d(0,0,0) rotateY(-90deg);
}

.vp-slide-image.vp-direction-aware .image-thumbnail .viba-portfolio-thumbnail { -webkit-transition:none; transition:none; }

.vp-slide-image .vp-out-top .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpInBottom .4s 1 forwards; 
    transform-origin: 50% 100%; animation: vpInBottom .4s 1 forwards; 
}
.vp-slide-image .vp-out-right .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpInLeft .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpInLeft .4s 1 forwards;
}
.vp-slide-image .vp-out-bottom .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpInTop .4s 1 forwards; 
    transform-origin: 50% 0%; animation: vpInTop .4s 1 forwards;  
}
.vp-slide-image .vp-out-left .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 100% 0%; -webkit-animation: vpInRight .4s 1 forwards; 
    transform-origin: 100% 0%; animation: vpInRight .4s 1 forwards;  
}
.vp-slide-image .vp-in-top .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpOutBottom .4s 1 forwards;
    transform-origin: 50% 100%; animation: vpOutBottom .4s 1 forwards;  
}
.vp-slide-image .vp-in-right .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpOutLeft .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpOutLeft .4s 1 forwards; 
}
.vp-slide-image .vp-in-bottom .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpOutTop .4s 1 forwards;
    transform-origin: 50% 0%; animation: vpOutTop .4s 1 forwards;  
}
.vp-slide-image .vp-in-left .viba-portfolio-thumbnail { 
    -webkit-transform-origin: 100% 50%; -webkit-animation: vpOutRight .4s 1 forwards; 
    transform-origin: 100% 50%; animation: vpOutRight .4s 1 forwards;  
}

/*====================================
    4. Overlay
====================================*/
/* Color Overlay */
.viba-portfolio-overlay { 
    opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
    -webkit-transition:opacity 0.4s, -webkit-transform 0.4s; transition:opacity 0.4s, transform 0.4s; 
}

/* Overlay Visibility */
.vp-overlay-off-hover .viba-portfolio-item-inner:hover .viba-portfolio-overlay { opacity: 0 }

/************************************
    4.1. Overlay Animations
************************************/
/* Slide Overlay */
.vp-slide-overlay.vp-overlay-on-hover .viba-portfolio-overlay { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }
.vp-slide-overlay.vp-overlay-on-hover .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform: translate3d(0,0,0) rotate(0deg) scale3d( 1,1,1 ); transform:translate3d(0,0,0) rotate(0deg) scale3d( 1,1,1 ); 
}

.vp-slide-overlay.vp-overlay-on-hover.vp-zoom-in .viba-portfolio-overlay,
.vp-slide-overlay.vp-overlay-on-hover.vp-zoom-out .viba-portfolio-overlay { opacity: 0; }
.vp-slide-overlay.vp-overlay-on-hover.vp-zoom-in .viba-portfolio-overlay { -webkit-transform: translate3d(0,0,0) scale3d( 0.2,0.2,0.2 ); transform: translate3d(0,0,0) scale3d( 0.2,0.2,0.2 ); }
.vp-slide-overlay.vp-overlay-on-hover.vp-zoom-out .viba-portfolio-overlay { -webkit-transform: translate3d(0,0,0) scale3d( 1.2,1.2,1.2 ); transform: translate3d(0,0,0) scale3d( 1.2,1.2,1.2 ); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-top .viba-portfolio-overlay { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-right .viba-portfolio-overlay { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-bottom .viba-portfolio-overlay { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-left .viba-portfolio-overlay { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-center-horizontal .viba-portfolio-overlay { -webkit-transform: translate3d(0,0,0) rotateX(-90deg); transform: translate3d(0,0,0) rotateX(-90deg); }
.vp-slide-overlay.vp-overlay-on-hover.vp-animate-from-center-vertical .viba-portfolio-overlay { -webkit-transform: translate3d(0,0,0) rotateY(-90deg); transform: translate3d(0,0,0) rotateY(-90deg); }

/* Slide and Hide on Hover */
.vp-slide-overlay.vp-overlay-off-hover .viba-portfolio-overlay { -webkit-transform: translate3d(0,0,0) rotate(0deg) scale3d( 1,1,1 ); transform:translate3d(0,0,0) rotate(0deg) scale3d( 1,1,1 ) }
.vp-slide-overlay.vp-overlay-off-hover .viba-portfolio-item-inner:hover .viba-portfolio-overlay { -webkit-transform: translate3d(0,100%,0) scale3d( 1,1,1 ); transform:translate3d(0,100%,0) scale3d( 1,1,1 ); }

.vp-slide-overlay.vp-overlay-off-hover.vp-zoom-in .viba-portfolio-overlay { 
    -webkit-transform: translate3d(0,0,0) scale3d( 0.2,0.2,0.2 ); transform: translate3d(0,0,0) scale3d( 0.2,0.2,0.2 ); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-zoom-in .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    opacity: 0; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
}
.vp-slide-overlay.vp-overlay-off-hover.vp-zoom-out .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    opacity: 0; -webkit-transform: translate3d(0,0,0) scale3d( 0.6,0.6,0.6 ); transform: translate3d(0,0,0) scale3d( 0.6,0.6,0.6 ); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-top .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-right .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-bottom .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-left .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-center-horizontal .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform: translate3d(0,0,0) rotateX(-90deg); transform: translate3d(0,0,0) rotateX(-90deg); 
}
.vp-slide-overlay.vp-overlay-off-hover.vp-animate-from-center-vertical .viba-portfolio-item-inner:hover .viba-portfolio-overlay { 
    -webkit-transform: translate3d(0,0,0) rotateY(-90deg); transform: translate3d(0,0,0) rotateY(-90deg); 
}

/* Direction Aware */
.vp-direction-aware .viba-portfolio-item-innner { -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px; }
.vp-slide-overlay.vp-direction-aware .viba-portfolio-overlay { -webkit-transition:none; transition:none;  }
.vp-slide-overlay.vp-overlay-on-hover.vp-direction-aware .viba-portfolio-overlay { 
    -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); 
}

/* Show on Hover */
.vp-slide-overlay.vp-overlay-on-hover .vp-in-top .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpInTop .4s 1 forwards;
    transform-origin: 50% 0%; animation: vpInTop .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-on-hover .vp-in-right .viba-portfolio-overlay { 
    -webkit-transform-origin: 100% 0%; -webkit-animation: vpInRight .4s 1 forwards; 
    transform-origin: 100% 0%; animation: vpInRight .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-on-hover .vp-in-bottom .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpInBottom .4s 1 forwards;
    transform-origin: 50% 100%; animation: vpInBottom .4s 1 forwards; 
}
.vp-slide-overlay.vp-overlay-on-hover .vp-in-left .viba-portfolio-overlay { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpInLeft .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpInLeft .4s 1 forwards;
}
.vp-slide-overlay.vp-overlay-on-hover .vp-out-top .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpOutTop .4s 1 forwards;
    transform-origin: 50% 0%; animation: vpOutTop .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-on-hover .vp-out-right .viba-portfolio-overlay { 
    -webkit-transform-origin: 100% 50%; -webkit-animation: vpOutRight .4s 1 forwards;
    transform-origin: 100% 50%; animation: vpOutRight .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-on-hover .vp-out-bottom .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpOutBottom .4s 1 forwards;
    transform-origin: 50% 100%; animation: vpOutBottom .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-on-hover .vp-out-left .viba-portfolio-overlay { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpOutLeft .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpOutLeft .4s 1 forwards; 
}

/* Hide on Hover */
.vp-slide-overlay.vp-overlay-off-hover .vp-in-top .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpOutBottom .4s 1 forwards;
    transform-origin: 50% 0%; animation: vpOutBottom .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-off-hover .vp-in-right .viba-portfolio-overlay { 
    -webkit-transform-origin: 100% 0%; -webkit-animation: vpOutLeft .4s 1 forwards; 
    transform-origin: 100% 0%; animation: vpOutLeft .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-off-hover .vp-in-bottom .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpOutTop .4s 1 forwards;
    transform-origin: 50% 100%; animation: vpOutTop .4s 1 forwards; 
}
.vp-slide-overlay.vp-overlay-off-hover .vp-in-left .viba-portfolio-overlay { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpOutRight .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpOutRight .4s 1 forwards;
}
.vp-slide-overlay.vp-overlay-off-hover .vp-out-top .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpInBottom .4s 1 forwards;
    transform-origin: 50% 0%; animation: vpInBottom .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-off-hover .vp-out-right .viba-portfolio-overlay { 
    -webkit-transform-origin: 100% 50%; -webkit-animation: vpInLeft .4s 1 forwards;
    transform-origin: 100% 50%; animation: vpInLeft .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-off-hover .vp-out-bottom .viba-portfolio-overlay { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpInTop .4s 1 forwards;
    transform-origin: 50% 100%; animation: vpInTop .4s 1 forwards;  
}
.vp-slide-overlay.vp-overlay-off-hover .vp-out-left .viba-portfolio-overlay { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpInRight .4s 1 forwards;
    transform-origin: 0% 0%; animation: vpInRight .4s 1 forwards; 
}

/*====================================
    5. Content
====================================*/
/************************************
    5.1. Content
************************************/
.viba-portfolio-content { padding: 10px 0 }
.viba-portfolio-cover-content { padding: 20px; }

/************************************
    5.2. Cover Content
************************************/
.viba-portfolio-cover-wrapper { 
    overflow: hidden; position: relative; display: block;
}
/* fix for children elements with 3d transforms */
.vp-items-horizontal-flipbook .viba-portfolio-cover-wrapper,
.vp-items-vertical-flipbook .viba-portfolio-cover-wrapper { -webkit-perspective: 600px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }

.viba-portfolio-cover,
.viba-portfolio-cover-fixed { 
    opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0;
    display: -webkit-box; display: -ms-flexbox; display: flex; 
    -webkit-box-flex: 0; -ms-flex: 1 1 auto; flex: 1 1 auto;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-transition:opacity 0.4s, -webkit-transform 0.4s; 
    transition:opacity 0.4s, transform 0.4s; 
}
.viba-portfolio-cover-fixed { opacity: 1 }
.vp-always-visible .viba-portfolio-cover { /*opacity: 1 */ }
.viba-portfolio-cover-content { width: 100%; }

/************************************
    5.3. Informations
************************************/
/* Inhert color */
.viba-portfolio .viba-portfolio-item-button, .viba-portfolio .viba-portfolio-item-button:hover,
.viba-portfolio .viba-portfolio-title, .viba-portfolio .viba-portfolio-title a, .viba-portfolio .viba-portfolio-title a:hover, 
.viba-portfolio .viba-portfolio-categories,
.viba-portfolio .viba-portfolio-likes, .viba-portfolio .viba-portfolio-likes:hover,
.viba-portfolio .viba-portfolio-short-description,
.viba-portfolio-wrapper .viba-portfolio a:visited { 
    /* override margin, padding, border from themes */
    color: inherit; text-decoration: none; border: none; padding: 0; margin: 0;
}

/* Buttons */
.viba-portfolio-buttons-wrapper { margin: 5px 0; }
.viba-portfolio-buttons-wrapper::after { content: ""; display: table; clear: both; }
.viba-portfolio .viba-portfolio-item-button { 
    display: inline-block; margin: 0; text-align: center; border-radius: 3px; background: rgba( 255,255,255,.15 );
    -webkit-transition: background .4s; transition: background .4s; 
}
.viba-portfolio .viba-portfolio-item-button,
.viba-portfolio .viba-portfolio-item-button:hover { background: rgba( 255,255,255,.25 ); color: inherit; }
.viba-portfolio-item-button::before { line-height: inherit; font-size: inherit; font-weight: inherit; color: inherit; }

.viba-portfolio .viba-portfolio-item-button span { display: none; }

.vp-semi-visible .viba-portfolio-buttons-wrapper,
.vp-visible-on-hover .viba-portfolio-buttons-wrapper { margin: 10px 0 0 0 }

/* Title */
.viba-portfolio .viba-portfolio-title { margin: 0; padding: 0; clear: none; }

/* Categories */
.viba-portfolio-categories { }
.viba-portfolio-categories::before,
.viba-portfolio-categories::after { font-size: inherit; vertical-align: baseline; line-height: inherit; }
.viba-portfolio-categories::before { margin-left: 1px; }
.viba-portfolio-categories::after { margin-right: 1px; }
.viba-portfolio-categories span { margin: 0 2px; display: inline-block; }
.viba-portfolio-categories span:first-child { margin: 0 }
.viba-portfolio-categories span::after { content: "," }
.viba-portfolio-categories span:last-child::after { content: "" }

.vp-horizontal-align-right .viba-portfolio-content .viba-portfolio-categories::after,
.vp-cover-horizontal-align-right .viba-portfolio-cover-content  .viba-portfolio-categories::after { margin-left: 4px }

.vp-horizontal-align-left .viba-portfolio-content .viba-portfolio-categories::after,
.vp-cover-horizontal-align-left .viba-portfolio-cover-content  .viba-portfolio-categories::after,
.vp-horizontal-align-center .viba-portfolio-content .viba-portfolio-categories::after,
.vp-cover-horizontal-align-center .viba-portfolio-cover-content  .viba-portfolio-categories::after,
.vp-horizontal-align-right .viba-portfolio-content .viba-portfolio-categories::before,
.vp-cover-horizontal-align-right .viba-portfolio-cover-content  .viba-portfolio-categories::before { content: "" }

/* Short Description */
.viba-portfolio .viba-portfolio-short-description p { margin: 10px 0 0 0 }

/* Likes */
.viba-portfolio-likes { cursor: pointer; }
.viba-portfolio-likes::before { 
    color: inherit; font-size: inherit; line-height: inherit; padding: 0 1px;
    -webkit-transition: opacity .4s; transition: opacity .4s;  
}
.viba-portfolio-likes.is-loading::before { -webkit-animation: vpPulse linear infinite .6s; animation: vpPulse linear infinite .6s; }
.viba-portfolio-likes.is-active::before { -webkit-animation: vpLiked .4s; animation: vpLiked .4s; }
.viba-portfolio-likes:hover::before { opacity: .7; }
.viba-portfolio .viba-portfolio-likes,
.viba-portfolio-single-item .viba-portfolio-likes { text-decoration: none; }

/* Horizontal Align */
.vp-horizontal-align-left .viba-portfolio-content { text-align: left; }
.vp-horizontal-align-left .viba-portfolio-content .viba-portfolio-likes { float: right; margin-left: 10px;  }
.vp-horizontal-align-right .viba-portfolio-content .viba-portfolio-likes { float: left; margin-right: 10px;  }
.vp-horizontal-align-right .viba-portfolio-content { text-align: right; }
.vp-horizontal-align-center .viba-portfolio-content { text-align: center; }

/* Cover Horizontal Align */
.vp-cover-horizontal-align-left .viba-portfolio-cover-content { text-align: left; }
.vp-cover-horizontal-align-left .viba-portfolio-cover-content .viba-portfolio-likes { float: right; margin-left: 10px;  }
.vp-cover-horizontal-align-right .viba-portfolio-cover-content .viba-portfolio-likes { float: left; margin-right: 10px;  }
.vp-cover-horizontal-align-right .viba-portfolio-cover-content { text-align: right; }
.vp-cover-horizontal-align-center .viba-portfolio-cover-content { text-align: center; }

/* Vertical Align */
.vp-vertical-align-middle .viba-portfolio-cover::before,
.vp-vertical-align-bottom .viba-portfolio-cover::before,
.vp-vertical-align-middle .viba-portfolio-cover-fixed::before,
.vp-vertical-align-bottom .viba-portfolio-cover-fixed::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.vp-vertical-align-middle .viba-portfolio-cover-content,
.vp-vertical-align-bottom .viba-portfolio-cover-content,
.vp-vertical-align-middle .viba-portfolio-cover-fixed-content,
.vp-vertical-align-bottom .viba-portfolio-cover-fixed-content { display: inline-block; vertical-align: middle; }
.vp-vertical-align-bottom .viba-portfolio-cover-content,
.vp-vertical-align-bottom .viba-portfolio-cover-fixed-content { vertical-align: bottom; }

/************************************
    5.4. Content Animations
************************************/
.viba-portfolio-item-inner:hover .viba-portfolio-cover { opacity: 1; }

/* Zoom */
.vp-zoom-in .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) scale3d( 0.7,0.7,0.7 ); transform: translate3d(0,0,0) scale3d( 0.7,0.7,0.7 ); }
.vp-zoom-out .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) scale3d( 1.3,1.3,1.3 ); transform: translate3d(0,0,0) scale3d( 1.3,1.3,1.3 ); }

.vp-zoom-in .viba-portfolio-item-inner:hover .viba-portfolio-cover,
.vp-zoom-out .viba-portfolio-item-inner:hover .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) scale3d( 1,1,1 ); transform: translate3d(0,0,0) scale3d( 1,1,1 ); }

/* Animate From */
.vp-animate-from-top .viba-portfolio-cover { -webkit-transform:translate3d(0,-20px,0); transform:translate3d(0,-20px,0); }
.vp-animate-from-right .viba-portfolio-cover { -webkit-transform:translate3d(20px,0,0); transform:translate3d(20px,0,0); }
.vp-animate-from-bottom .viba-portfolio-cover { -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); }
.vp-animate-from-left .viba-portfolio-cover { -webkit-transform:translate3d(-20px,0,0); transform:translate3d(-20px,0,0); }
.vp-animate-from-center-horizontal .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) rotateX(-90deg); transform: translate3d(0,0,0) rotateX(-90deg); }
.vp-animate-from-center-vertical .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) rotateY(-90deg); transform: translate3d(0,0,0) rotateY(-90deg); }

.vp-animate-from-top .viba-portfolio-item-inner:hover .viba-portfolio-cover,
.vp-animate-from-right .viba-portfolio-item-inner:hover .viba-portfolio-cover,
.vp-animate-from-bottom .viba-portfolio-item-inner:hover .viba-portfolio-cover,
.vp-animate-from-left .viba-portfolio-item-inner:hover .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

.vp-animate-from-center-horizontal .viba-portfolio-item-inner:hover .viba-portfolio-cover,
.vp-animate-from-center-vertical .viba-portfolio-item-inner:hover .viba-portfolio-cover { -webkit-transform: translate3d(0,0,0) rotate(0deg); transform:translate3d(0,0,0) rotate(0deg); }

/* Direction Aware */
.vp-direction-aware .viba-portfolio-cover { opacity: 1; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); -webkit-transition:none; transition:none; }

.vp-in-top .viba-portfolio-cover { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpInTop .4s 1 forwards; 
    transform-origin: 50% 0%; animation: vpInTop .4s 1 forwards;  
}
.vp-in-right .viba-portfolio-cover { 
    -webkit-transform-origin: 100% 0%; -webkit-animation: vpInRight .4s 1 forwards; 
    transform-origin: 100% 0%; animation: vpInRight .4s 1 forwards;  
}
.vp-in-bottom .viba-portfolio-cover { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpInBottom .4s 1 forwards; 
    transform-origin: 50% 100%; animation: vpInBottom .4s 1 forwards; 
}
.vp-in-left .viba-portfolio-cover { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpInLeft .4s 1 forwards; 
    transform-origin: 0% 0%; animation: vpInLeft .4s 1 forwards;
}
.vp-out-top .viba-portfolio-cover { 
    -webkit-transform-origin: 50% 0%; -webkit-animation: vpOutTop .4s 1; 
    transform-origin: 50% 0%; animation: vpOutTop .4s 1;  
}
.vp-out-right .viba-portfolio-cover { 
    -webkit-transform-origin: 100% 50%; -webkit-animation: vpOutRight .4s 1; 
    transform-origin: 100% 50%; animation: vpOutRight .4s 1;  
}
.vp-out-bottom .viba-portfolio-cover { 
    -webkit-transform-origin: 50% 100%; -webkit-animation: vpOutBottom .4s 1; 
    transform-origin: 50% 100%; animation: vpOutBottom .4s 1;  
}
.vp-out-left .viba-portfolio-cover { 
    -webkit-transform-origin: 0% 0%; -webkit-animation: vpOutLeft .4s 1; 
    transform-origin: 0% 0%; animation: vpOutLeft .4s 1; 
}

/*====================================
    6. Open With Ajax
====================================*/
/* Ajax actions */
.vp-ajax-actions-wrapper { height: 50px; width: 100%; text-align: right; border-width: 1px; border-style: solid }
.vp-ajax-actions-wrapper .vp-ajax-actions { position: absolute; right: 0; top: 0; height: 50px }
.vp-ajax-actions-wrapper .vp-ajax-actions a { 
    position: relative; padding: 0; height: 50px; width: 50px; margin-right: -1px;
    display: inline-block; border-width: 1px; border-style: solid; 
    font-size: 12px; text-align: center; cursor: pointer;
    -webkit-transition: color .3s, border .3s, background .3s, box-shadow .3s, z-index .3s; 
    transition: color .3s, border .3s, background .3s, box-shadow .3s, z-index .3s;
}
.vp-ajax-actions-wrapper .vp-ajax-actions a span { display: none; }
.vp-ajax-actions-wrapper .vp-ajax-actions a::before { line-height: 50px; }
.vp-ajax-actions-wrapper .vp-ajax-actions a:hover { z-index: 2; 
    -webkit-transition: color .3s, border .3s, background .3s, box-shadow .3s, z-index 0s; 
    transition: color .3s, border .3s, background .3s, box-shadow .3s, z-index 0s; 
}

.vp-ajax-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.vp-ajax-loader { position: absolute; top: 50px; left: 0; width: 100%; height: 2px; overflow: hidden; }
.vp-ajax-loader span {
    position: absolute; top: 0; left: 0; height: 2px; width: 100%; opacity: 0;
    -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0);
}
.vp-ajax-wrapper.is-loading .vp-ajax-loader span {
    opacity: 1; -webkit-transform:translate3d(-3%,0,0); transform:translate3d(-3%,0,0); 
    -webkit-transition: opacity .2s, -webkit-transform 2s; transition: opacity .2s, transform 2s;
}
.vp-ajax-wrapper.is-loaded .vp-ajax-loader span {
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
    -webkit-transition: opacity .7s, -webkit-transform .3s; transition: opacity .7s, transform .3s;
}

.vp-ajax-wrapper .single-navigation { display: none; }

/* Ajax Content */
.vp-ajax-content {  position: relative; margin: 0 auto; opacity: 0; }
.vp-ajax-wrapper.is-visible .vp-ajax-content { opacity: 1 }
.vp-ajax-inner .viba-portfolio-single-item { padding: 15px; }

.vp-ajax-wrapper .viba-portfolio-entry-title { margin: 10px 0 25px 0; padding: 0; }

/* Bigger padding for big screens */
@media screen and ( min-width: 1024px ) {
    .vp-ajax-inner .viba-portfolio-single-item { padding: 30px }
    .vp-ajax-wrapper .viba-portfolio-entry-title { margin: 0 0 30px 0; }
}

/* Ajax Modal */
.vp-ajax-type-modal {  
    position: fixed; display: block; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none;
    -webkit-transition: all .4s; transition: all .4s;  
}
/* Bigger padding for bigger screens */
@media screen and ( min-width: 768px ) {
    .vp-ajax-type-modal { padding: 10px; }
}
@media screen and ( min-width: 1024px ) {
    .vp-ajax-type-modal { padding: 20px; }
}

.vp-ajax-type-modal.is-visible { opacity: 1; pointer-events: auto; }

/* ie 10 */
.no-flexbox.flexboxtweener .vp-ajax-type-modal { visibility: hidden; }
.no-flexbox.flexboxtweener .vp-ajax-type-modal.is-visible { visibility: visible; }

.vp-ajax-type-modal .vp-ajax-actions-wrapper { position: absolute; top: 0; left: 0; border-top: none }
.vp-ajax-type-modal .vp-ajax-content { height: 100%; padding-top: 50px; -webkit-transition: all 0.4s; transition: all 0.4s; }
.vp-ajax-type-modal .vp-ajax-inner { 
    overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling:touch; height: 100%; 
    -webkit-transition: all 0.1s; transition: all 0.1s;  
}
.vp-ajax-type-modal.is-loading .vp-ajax-inner { opacity: 0; }

/* Ajax Modal Animations */
.vp-modal-fade.vp-ajax-type-modal .vp-ajax-content { opacity: 0  }
.vp-modal-fade.vp-ajax-type-modal.is-visible .vp-ajax-content { opacity: 1 }

.vp-modal-scale.vp-ajax-type-modal .vp-ajax-content { -webkit-transform: translate3d(0,0,0) scale(0.8,0.8); transform: translate3d(0,0,0) scale(0.8,0.8);  }
.vp-modal-slide-in-top.vp-ajax-type-modal .vp-ajax-content { -webkit-transform:translate3d(0,-50px,0); transform:translate3d(0,-50px,0); }
.vp-modal-slide-in-right.vp-ajax-type-modal .vp-ajax-content { -webkit-transform:translate3d(50px,0,0); transform:translate3d(50px,0,0); }
.vp-modal-slide-in-bottom.vp-ajax-type-modal .vp-ajax-content { -webkit-transform:translate3d(0,50px,0); transform:translate3d(0,50px,0); }
.vp-modal-slide-in-left.vp-ajax-type-modal .vp-ajax-content { -webkit-transform:translate3d(-50px,0,0); transform:translate3d(-50px,0,0); }
.vp-modal-newspaper.vp-ajax-type-modal .vp-ajax-content { -webkit-transform: rotate(720deg); transform: rotate(720deg); }

.vp-modal-horizontal-flip.vp-ajax-type-modal,
.vp-modal-vertical-flip.vp-ajax-type-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
.vp-modal-horizontal-flip.vp-ajax-type-modal .vp-ajax-content { -webkit-transform: rotateY(-70deg); transform: rotateY(-70deg); }
.vp-modal-vertical-flip.vp-ajax-type-modal .vp-ajax-content { -webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); }

.vp-ajax-wrapper.vp-ajax-type-modal.is-visible .vp-ajax-content { -webkit-transform: none; transform: none; }

/* Ajax Slide */
.vp-ajax-type-slide { position: relative; max-height: 0; -webkit-transition: all .3s; transition: all .3s; }
.vp-ajax-type-slide.is-visible { max-height: none; }
.vp-ajax-type-slide .vp-ajax-actions-wrapper { position: relative; }
.vp-ajax-type-slide .vp-ajax-actions-wrapper .vp-ajax-actions { top: -1px }
.vp-ajax-type-slide .vp-ajax-content { min-height: 0; -webkit-transition: opacity .3s; transition: opacity .3s; }
.vp-ajax-type-slide.is-visible .vp-ajax-content { min-height: 52px; }

.vp-ajax-slide-above.is-visible { margin: 0 0 50px 0; }
.vp-ajax-slide-below.is-visible { margin: 50px 0 0 0; }

.vp-ajax-type-slide .viba-portfolio-single-item { padding-left: 0; padding-right: 0; padding-bottom: 0 }

/* Likes */
.vp-ajax-content .viba-portfolio-single-meta .viba-portfolio-likes {
    position: absolute; top: 0; left: -1px; height: 50px; line-height: 50px; margin: 0;
    padding: 0 15px; border-radius: 0; z-index: 1
}

/* Share Icons Only on bigger screens */
@media screen and ( min-width: 768px ) {
    .vp-ajax-content .viba-portfolio-single-meta .viba-portfolio-likes { right: 147px; left: auto; }
    .vp-ajax-content .viba-portfolio-single-meta .share-buttons { margin: 0; position: absolute; top: 0; left: 0; height: 50px; z-index: 1 }
    .vp-ajax-content .viba-portfolio-single-meta .share-buttons li { margin: 0; margin-left: -1px }
    .vp-ajax-content .viba-portfolio-single-meta .share-buttons li:first-child { margin-left: 0 }
    .vp-ajax-content .viba-portfolio-single-meta .share-button { 
        width: 50px; height: 50px; line-height: 50px; text-align: center; padding: 0; display: block; border-radius: 0 
    }
}

/*====================================
    7. Single Viba Portfolio
====================================*/
.viba-portfolio-single-item { }
.viba-portfolio-single-item::after { content: ''; display: table; clear: both; }

.viba-portfolio-single-content::after { content: ""; display: table; clear: both; }

.viba-portfolio-single-description > :last-child { margin-bottom: 0 }

/* tablet landscape */
@media screen and ( min-width: 960px ) {

    /* Single Layout */
    .vp-single-sidebars .viba-portfolio-single-media { width: 66.65%; }
    .vp-single-sidebars .viba-portfolio-single-content { width: 33.32%; }

    .vp-single-right-sidebar .viba-portfolio-single-media { float: left; padding-right: 15px }
    .vp-single-right-sidebar .viba-portfolio-single-content { float: right; padding-left: 15px }
    .vp-single-left-sidebar .viba-portfolio-single-media { float: right; padding-left: 15px }
    .vp-single-left-sidebar .viba-portfolio-single-content { float: left; padding-right: 15px }
    
    .vp-single-full-width .viba-portfolio-single-description { float: right;
        width: 75%;
        padding-left: 15px;
        direction: rtl;
        font-size: 18px;
    }
    .vp-single-full-width .viba-portfolio-single-meta { float: right; width: 25%; padding-right: 15px; }
    
    .vp-no-meta .viba-portfolio-single-description, 
    .vp-no-content .viba-portfolio-single-meta { width: 100%; padding: 0; }
}

/* Single Media */
.viba-portfolio-single-media { position: relative; margin-bottom: 28px }
.viba-portfolio-single-media p { margin: 0; padding: 0 }

/* tablet landscape */
@media screen and ( min-width: 960px ) {
    .vp-single-sidebars .viba-portfolio-single-media { margin-bottom: 0 }
}

.viba-portfolio-gallery { position: relative; }

/* Stacked Gallery */
.viba-portfolio-gallery-stacked .gallery-item { margin-top: 15px; }
.viba-portfolio-gallery-stacked .gallery-item:first-child { margin-top: 0 }

/* Slider Gallery */
.viba-portfolio-gallery-slider { overflow: hidden; }
.viba-portfolio-gallery-slider:not(.is-ready) .gallery-item { position: absolute; }
.viba-portfolio-gallery-slider:not(.is-ready) .gallery-item:first-child { position: relative; }

/* Carousel Gallery */
.viba-portfolio-gallery-carousel {  }
.viba-portfolio-gallery-carousel .gallery-item { padding: 2px; }

.viba-portfolio-gallery-carousel:not(.is-ready) { white-space: nowrap; overflow: hidden; }
.viba-portfolio-gallery-carousel:not(.is-ready) .gallery-item { 
    width: 100%; display: inline-block; margin-left: -4px; vertical-align: top; white-space: normal; 
}
.viba-portfolio-gallery-carousel:not(.is-ready) .gallery-item:first-child { margin-left: 0 }
.viba-portfolio-gallery-carousel.is-ready .gallery-item { max-width: 100% }
.viba-portfolio-gallery-carousel-item > *:last-child { margin-bottom: 0 }

.viba-portfolio-gallery-carousel.is-ready { margin-left: 0; margin-right: 0 }

.viba-portfolio-gallery-carousel:not(.is-ready),
.viba-portfolio-gallery-carousel .apalodi-owl-wrapper { margin-left: -2px; margin-right: -2px }

.viba-portfolio-gallery-carousel .apalodi-owl-prev { left: 7px }
.viba-portfolio-gallery-carousel .apalodi-owl-next { right: 7px }
.viba-portfolio-gallery-carousel .apalodi-owl-pagination { left: 2px; right: 2px; }

@media screen and ( min-width: 660px ) {
    .viba-portfolio-gallery-carousel:not(.is-ready) .gallery-item { width: 50% }
}

@media screen and ( min-width: 860px ) {
    .viba-portfolio-gallery-carousel:not(.is-ready) .gallery-item { width: 33.3333% }
}

@media screen and ( min-width: 1025px ) {
    .viba-portfolio-gallery-carousel .apalodi-owl-prev { left: 17px }
    .viba-portfolio-gallery-carousel .apalodi-owl-next { right: 17px }
}

/* Grid Gallery */
.viba-portfolio-gallery-grid { 
    opacity: 0; margin: -2px;
    display: -webkit-box; display: -ms-flexbox; display: flex; 
    -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; 
    -ms-flex-wrap: wrap; flex-wrap: wrap; 
    -webkit-transition: opacity .2s, height .2s; transition: opacity .2s, height .2s;
}

.no-js .viba-portfolio-gallery-grid,
.viba-portfolio-gallery-grid.is-ready { opacity: 1 }

.viba-portfolio-gallery-grid .gallery-item { width: 100%; padding: 2px }

/* mobile landscape */
@media screen and ( min-width: 480px ) {
    .viba-portfolio-gallery-grid .gallery-item { width: 50%; }
}
/* tablet landscape */
@media screen and ( min-width: 960px ) {
    .viba-portfolio-gallery-grid .gallery-item { width: 33.33334%; }
    .vp-single-sidebars .viba-portfolio-gallery-grid .gallery-item { width: 50%; }
}

/* Video */
.viba-portfolio-video-item { margin-top: 15px }
.viba-portfolio-video-item:first-child { margin-top: 0 }

.viba-portfolio-video-item .wp-video,
.viba-portfolio-video-item .wp-playlist,
.viba-portfolio-video-item .iframe-wrapper { margin: 0 }

.viba-portfolio-video-item .wp-playlist video { width: 100% }

.vp-video-wrapper { position: relative; padding-bottom: 56.25% }
.vp-video-wrapper .vp-video { position: absolute; top: 0; left: 0; width: 100%; height: 100% }

/* Audio */
.viba-portfolio-audio-item { margin-top: 15px }
.viba-portfolio-audio-item:first-child { margin-top: 0 }

.viba-portfolio-audio-item .wp-playlist,
.viba-portfolio-audio-item .wp-audio-shortcode,
.viba-portfolio-audio-item .iframe-wrapper { margin: 0 }

.vp-audio { width: 100% }

/* Single Meta */
.viba-portfolio-single-meta { margin-top: 28px; }
.viba-portfolio-single-item.vp-no-content .viba-portfolio-single-meta { margin-top: 0 }

/* tablet landscape */
@media screen and ( min-width: 960px ) {
    .vp-single-full-width .viba-portfolio-single-meta { margin-top: 0 }
}

.viba-portfolio-single-meta h3 { margin: 20px 0 3px 0; padding: 0; font-size: 1.1em; }
.viba-portfolio-single-meta div:first-child h3 { margin-top: 0 }

.viba-portfolio-single-meta span a { border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 3px }

.viba-portfolio-single-meta .vp-single-meta ul { list-style: none; margin: 0; padding: 0; }
.viba-portfolio-single-meta .vp-single-meta ul li { display: inline-block;
    display: inline-block;
    margin: 0px 0px 0px 5px;
    padding: 0;
    direction: rtl;
    text-align: right;
    float: right;
    color: #fec32e; }
.viba-portfolio-single-categories ul{
    text-align: right;
    direction: rtl;
}
.viba-portfolio-single-project-link { margin-top: 28px }

.vp-single-meta-actions { margin-top: 20px }

/* Single Likes */
.viba-portfolio-single-meta .viba-portfolio-likes { 
    margin-top: 5px; margin-bottom: 2px; display: inline-block; vertical-align: middle; 
    line-height: 1; padding: 10px 12px; border-width: 1px; border-style: solid; border-radius: 2px;
}
.viba-portfolio-single-meta .viba-portfolio-likes:hover { z-index: 2; }
.viba-portfolio-single-meta .viba-portfolio-likes:hover::before { opacity: 1 }
.viba-portfolio-single-meta .viba-portfolio-likes .viba-portfolio-likes-count { vertical-align: top; }
.viba-portfolio-single-meta .share-buttons,
.viba-portfolio-single-meta .single-navigation { margin-top: 5px; }
.viba-portfolio-single-meta .single-navigation { margin-right: 0 }

/* Single Related */
.viba-portfolio-related { margin-top: 50px }

.viba-portfolio-related > h3 { position: relative; margin: 0 0 15px 0; padding-bottom: 8px; }
.viba-portfolio-related > h3::before,
.viba-portfolio-related > h3::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 1px; border-width: 1px; border-style: solid; }
.viba-portfolio-related > h3::before { width: 15px; bottom: 4px }
.viba-portfolio-related > h3::after { width: 8px; }


/*====================================
    8. Portfolio Styles
====================================*/
.vp-neon .viba-portfolio-title a,
.vp-neon .viba-portfolio-likes { -webkit-transition: none; transition: none; }

.vp-neon .viba-portfolio-item-inner { overflow: hidden; }

.vp-neon .viba-portfolio-content { 
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 20px; opacity: .9; background: inherit; color: inherit; 
    -webkit-transition: all .4s; transition: all .4s; 
}
.vp-neon .viba-portfolio-item-inner:hover .viba-portfolio-neon-content { opacity: 1 }
.vp-neon.viba-portfolio .viba-portfolio-neon-content::before { background: inherit; }

.vp-neon.vp-visible-on-hover .viba-portfolio-neon-content { opacity: 1; -webkit-transform: translate3d(0,100%,0); -ms-transform:translate(0,100%); transform: translate3d(0,100%,0); overflow: visible; }
.vp-neon.vp-visible-on-hover .viba-portfolio-item-inner:hover .viba-portfolio-neon-content {  -webkit-transform: translate3d(0,0,0); -ms-transform:translate(0,0); transform: translate3d(0,0,0); }
.vp-neon.vp-visible-on-hover .viba-portfolio-neon-content::before { opacity: 0; -webkit-transition: opacity .4s; transition: opacity .4s;  }
.vp-neon.vp-visible-on-hover .viba-portfolio-item-inner:hover .viba-portfolio-neon-content::before { opacity: 1 }

.vp-neon.vp-semi-visible.vp-slide-image .viba-portfolio-thumbnail,
.vp-neon.vp-visible-on-hover.vp-slide-image .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,0,0); -ms-transform:translate(0,0); transform:translate3d(0,0,0);
    -webkit-transition: all .4s; transition: all .4s;  
    -webkit-animation:none; animation: none;
}
.vp-neon.vp-semi-visible.vp-slide-image .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,-25px,0); -ms-transform:translate(0,-25px); transform:translate3d(0,-25px,0); opacity: 1; -webkit-animation:none; animation: none; 
}
.vp-neon.vp-visible-on-hover.vp-slide-image .viba-portfolio-item-inner:hover .viba-portfolio-thumbnail { 
    -webkit-transform:translate3d(0,-40px,0); -ms-transform:translate(0,-40px); transform:translate3d(0,-40px,0); opacity: 1; -webkit-animation:none; animation: none; 
}

.vp-semi-visible.vp-neon .viba-portfolio-buttons-wrapper { margin: 0 }

.viba-portfolio-wrapper .vp-neon.viba-portfolio .viba-portfolio-item-button { height: 50px; width: 50px; line-height: 50px }


/*====================================
    9. CSS Keyframes Animations
====================================*/
@-webkit-keyframes vpFade {         
    0% { opacity: 0 }   
    100% { opacity: 1 } 
}
@keyframes vpFade {         
    0% { opacity: 0 }   
    100% { opacity: 1 }  
}
@-webkit-keyframes vpPulse {        
    0% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); }
    100% { -webkit-transform:translate3d(0,0,0) scale(.7); transform:translate3d(0,0,0) scale(.7); } 
}
@keyframes vpPulse {        
    0% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); }
    100% { -webkit-transform:translate3d(0,0,0) scale(.7); transform:translate3d(0,0,0) scale(.7); } 
}
@-webkit-keyframes vpLiked {        
    0% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); }
    50% { -webkit-transform:translate3d(0,0,0) scale(1.2); transform:translate3d(0,0,0) scale(1.2); }   
    100% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); } 
}
@keyframes vpLiked {        
    0% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); }
    50% { -webkit-transform:translate3d(0,0,0) scale(1.2); transform:translate3d(0,0,0) scale(1.2); }   
    100% { -webkit-transform:translate3d(0,0,0) scale(1,1); transform:translate3d(0,0,0) scale(1,1); } 
}
@-webkit-keyframes vpInTop {        
    0% { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }  
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@keyframes vpInTop {        
    0% { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }  
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@-webkit-keyframes vpInRight {      
    0% { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }    
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@keyframes vpInRight {      
    0% { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }    
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@-webkit-keyframes vpInBottom {     
    0% { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }    
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@keyframes vpInBottom {     
    0% { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }    
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@-webkit-keyframes vpInLeft {       
    0% { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }  
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@keyframes vpInLeft {       
    0% { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }  
    100% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 
}
@-webkit-keyframes vpOutTop {       
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); } 
}
@keyframes vpOutTop {       
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); } 
}
@-webkit-keyframes vpOutRight {     
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); } 
}
@keyframes vpOutRight {     
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); } 
}
@-webkit-keyframes vpOutBottom {    
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } 
}
@keyframes vpOutBottom {    
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } 
}
@-webkit-keyframes vpOutLeft {      
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); } 
}
@keyframes vpOutLeft {      
    0% { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }      
    100% { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); } 
}