/* =============================================
------------------  24.Portfolio --------------
==============================================*/
@media (min-width: 480px) { .max-col-6 .portfolio-item,
    .max-col-5 .portfolio-item,
    .max-col-4 .portfolio-item,
    .max-col-3 .portfolio-item,
    .max-col-2 .portfolio-item  { width:100%; }
}
/* gutter number 1 less than colums so used calc to calculate grid size */
@media (min-width: 768px) { .max-col-6 .portfolio-item,
    .max-col-5 .portfolio-item,
    .max-col-4 .portfolio-item,
    .max-col-3 .portfolio-item,
    .max-col-2 .portfolio-item { width: 50%; }
}
@media (min-width: 992px) { .max-col-6 .portfolio-item,
    .max-col-5 .portfolio-item,
    .max-col-4 .portfolio-item,
    .max-col-3 .portfolio-item { width:33.3%; }
}
@media (min-width: 1199px) { .max-col-6 .portfolio-item,
    .max-col-5 .portfolio-item,
    .max-col-4 .portfolio-item { width:25%; }
}
@media (min-width: 1500px) { .max-col-6 .portfolio-item,
    .max-col-5 .portfolio-item { width:20%; }
}
@media (min-width: 1900px) { .max-col-6 .portfolio-item { width:16.66%; }
}
.portfolio-filter { margin-bottom:30px; font-size:0; }
.portfolio-filter li { display:inline; }
.portfolio-filter li a { display:inline; color:#515151; font:700 13px/1 'Open Sans', Verdana, sans-serif; position: relative; text-transform: uppercase; }
.portfolio-filter.bordered li a { display: inline-block; line-height: 20px; padding:4px 8px; margin:0 4px 8px; border:1px solid #505050; }
.portfolio-filter li a:after { content:'/'; padding:0 9px; color:#777; }
.portfolio-filter.bordered li a:after { display: none; }
.portfolio-filter li:last-child a:after { content:''; padding:0; }
.bg-dark .portfolio-filter li a { color:#b7b7b7; }
.bg-dark .portfolio-filter.bordered li a { border-color:#b7b7b7; }
.bg-dark .portfolio-filter li:hover > a,
.bg-dark .portfolio-filter li.active > a,
.bg-dark .portfolio-filter.bordered li.active > a,
.bg-dark .portfolio-filter.bordered li:hover > a  { color:#fff; border-color:#fff; }
.owl-carousel .portfolio-item { margin-bottom: 0; }
.portfolio-item-container { margin-bottom: 40px; }
.portfolio-item-container.no-margin { margin-bottom: 0 !important; }
@media (min-width: 768px) { .portfolio-item-container { margin-bottom: 70px; }
    .portfolio-filter { margin-bottom:40px; }
    .portfolio-filter.bordered li a { padding:5px 9px; margin-bottom: 0; }
    .gap-row.row { margin-left:-8px; margin-right: -8px; }
    .gap-row .portfolio-item-container { margin-left:-8px; margin-right:-8px; }
    .gap-row .portfolio-item-container .portfolio-item { padding:0 8px; margin-bottom: 16px; }
}
.portfolio-item { position: relative; margin-bottom:30px; overflow:hidden; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; }
.portfolio-item-container .portfolio-item { margin-bottom: 0; transition:none; -webkit-transition:none; }
.portfolio-item .img-responsive,
.portfolio-media .img-responsive { width:100%; }
.portfolio-item:hover { box-shadow:0 3px 12px rgba(0,0,0, 0.18); -webkit-box-shadow:0 3px 12px rgba(0,0,0, 0.18); }
.portfolio-item-container .portfolio-item:hover { box-shadow:none; -webkit-box-shadow:none; }
.portfolio-item figure { position: relative; transition: all 0.45s ease; -webkit-transition: all 0.45s ease; }
.portfolio-item figure * { margin: 0; line-height: 1.2em; }
.portfolio-item figure > a { display:block; position: relative; }
.portfolio-meta { transition: all 0.45s ease; -webkit-transition: all 0.45s ease; background-color: #f6f6f6; padding: 15px 18px; position: relative; }
.portfolio-item-container .portfolio-meta.dark { border-right:1px solid rgba(0,0,0, 0.22); }
.portfolio-title { font:700 18px/1.5 'Open Sans', Verdana, sans-serif; margin-bottom:0; letter-spacing: 0.2px; }
.portfolio-title a > span { font-weight: 400; }
.portfolio-title > * { color: #303030; }
.portfolio-tags a { font-size:13px; font-weight: 700; color: #505050; }
.portfolio-tags a:hover,
.portfolio-tags a:focus { color: #9a9a9a; }
.portfolio-favourite { display:block; padding: 12px; border-radius: 4px; position: absolute; right: 18px; top: 50%; margin-top: -26px; background-color: #fff; color:#303030; text-align: center; transition:all 0.4s ease; -webkit-transition:all 0.4s ease; }
.portfolio-favourite i { font-size:18px; }
.portfolio-favourite > span { display: block; font-size:12px; line-height: 1.5; font-weight: 700; }
.portfolio-favourite:hover,
.portfolio-favourite:focus { background-color: #e1e1e1; }
.portfolio-image-zoom figure { overflow: hidden; }
.portfolio-image-zoom img { transition:all 0.45s ease; -webkit-transition:all 0.45s ease; }
.portfolio-image-zoom:hover img { transform:scale(1.35); -webkit-transform:scale(1.35); }
.portfolio-meta-slideup .portfolio-meta { position: absolute; top:100%; left:0; right:0; }
.portfolio-meta-slideup:hover .portfolio-meta { transform: translateY(-100%); -webkit-transform: translateY(-100%); }
.portfolio-meta-slideup.push:hover figure { transform: translateY(-79px); -webkit-transform: translateY(-79px); }
.portfolio-meta-slidedown .portfolio-meta { position: absolute; bottom:100%; left:0; right:0; }
.portfolio-meta-slidedown:hover .portfolio-meta { transform: translateY(100%); -webkit-transform: translateY(100%); }
.portfolio-meta-slidedown.push:hover figure { transform: translateY(79px); -webkit-transform: translateY(79px); }
/* prevent shake of animation */
.portfolio-item.push { background-color: #f6f6f6; }
/* change this depends on the color 
white - custom - dark of your color scheme */
.portfolio-item-container .portfolio-item.push { background-color: #2a2a2a; }
.portfolio-item-container .portfolio-item.push { background-color: #2a2a2a; }
.portfolio-item-container.graybg .portfolio-item.push { background-color: #f6f6f6; }
/* 3d rotate */
.portfolio-item.box3d  { overflow: visible; }
.portfolio-item.box3d:hover { box-shadow:none; -webkit-box-shadow:none; }
.box3d { position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; }
.box3d-wrapper { -webkit-transition: -webkit-transform 0.75s; -moz-transition: -moz-transform 0.75s; -o-transition: -o-transform 0.75s; transition: transform 0.75s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; }
.box3d:hover .box3d-wrapper { box-shadow:0 3px 12px rgba(0,0,0, 0.18); -webkit-box-shadow:0 3px 12px rgba(0,0,0, 0.18); }
.left .box3d-wrapper { -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; }
.right .box3d-wrapper { -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
.center .box3d-wrapper { -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; }
.front,
.back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; width:100%; height:100%; }
.back { position: absolute; left:0; top:0; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); padding:20px; }
.box3d.left:hover .box3d-wrapper { -webkit-transform: translateX( -100% ) rotateY( -180deg ); -moz-transform: translateX( -100% ) rotateY( -180deg ); -o-transform: translateX( -100% ) rotateY( -180deg ); transform: translateX( -100% ) rotateY( -180deg ); }
.box3d.right:hover .box3d-wrapper { -webkit-transform: translateX( 100% ) rotateY( 180deg ); -moz-transform: translateX( 100% ) rotateY( 180deg ); -o-transform: translateX( 100% ) rotateY( 180deg ); transform: translateX( 100% ) rotateY( 180deg ); }
.box3d.center:hover .box3d-wrapper { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
.box3d.center.reverse:hover .box3d-wrapper { -webkit-transform: rotateY( -180deg ); -moz-transform: rotateY( -180deg ); -o-transform: rotateY( -180deg ); transform: rotateY( -180deg ); }
/* ie9 fix */
.ie9 .back { visibility:hidden; }
.ie9 .box3d:hover .back { visibility:visible; }
/* fix ie 10+ via media */
@media screen and (min-width:0\0) { .box3d.left:hover .box3d-wrapper .back,
    .box3d.right:hover .box3d-wrapper .back,
    .box3d.center:hover .box3d-wrapper .back { transform: rotateY(-180deg); backface-visibility: visible; }
}
/* Colors */
.portfolio-meta.white { background-color: #fff; }
.portfolio-meta.dark { background-color: #2a2a2a; }
.portfolio-meta.custom .portfolio-title a { color:#eaeaea; }
.portfolio-meta.custom .portfolio-tags,
.portfolio-meta.custom .portfolio-tags a { color:#c7c7c7; }
.portfolio-meta.custom .portfolio-title a:hover,
.portfolio-meta.custom .portfolio-title a:focus,
.portfolio-meta.custom .portfolio-tags a:hover,
.portfolio-meta.custom .portfolio-tags a:focus { color:#fff; }
.portfolio-meta.dark .portfolio-title > * { color:#bebebe; }
.portfolio-meta.dark .portfolio-tags,
.portfolio-meta.dark .portfolio-tags a { color:#9a9a9a; }
.portfolio-meta.dark .portfolio-title a:hover,
.portfolio-meta.dark .portfolio-title a:focus,
.portfolio-meta.dark .portfolio-tags a:hover,
.portfolio-meta.dark .portfolio-tags a:focus { color:#f1f1f1; }
.portfolio-meta.custom2 .portfolio-title a { color:#fafafa; }
.portfolio-meta.custom2 .portfolio-tags,
.portfolio-meta.custom2 .portfolio-tags a { color:#f1f1f1; }
.portfolio-meta.custom2 .portfolio-title a:hover,
.portfolio-meta.custom2 .portfolio-title a:focus,
.portfolio-meta.custom2 .portfolio-tags a:hover,
.portfolio-meta.custom2 .portfolio-tags a:focus { color:#fff; }
.portfolio-meta.white .portfolio-favourite { background-color: #f1f1f1; color:#303030; }
.portfolio-meta.white .portfolio-favourite:hover,
.portfolio-meta.white .portfolio-favourite:focus { background-color: #eaeaea; }
.portfolio-meta.custom .portfolio-favourite { color:#eaeaea; }
.portfolio-meta.custom .portfolio-favourite:hover,
.portfolio-meta.custom .portfolio-favourite:focus { background-color: #00695c; }
.portfolio-meta.dark .portfolio-favourite { background-color: #1a1a1a; color:#9a9a9a; }
.portfolio-meta.dark .portfolio-favourite:hover,
.portfolio-meta.dark .portfolio-favourite:focus { background-color: #0a0a0a; color:#ccc; }
.portfolio-meta.dark.like_link h2 {  color:#bebebe; }
.portfolio-meta.custom2 .portfolio-favourite { background-color: #e53935; color:#fafafa; }
.portfolio-meta.custom2 .portfolio-favourite:hover,
.portfolio-meta.custom2 .portfolio-favourite:focus { background-color: #d32f2f; color:#fff; }
/* Single */
.portfolio-details { margin-bottom:60px; }
.portfolio-media { margin-bottom:40px; }
.portfolio-media .embed-responsive + .embed-responsive,
.portfolio-media img + img { margin-top:25px; }
.portfolio-details h2 { margin-bottom:25px; }
.portfolio-details-list li  { font-size:14px; line-height: 36px; }
.portfolio-details-list li.share-li { margin-top:20px; line-height: 48px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; }
.portfolio-details-box  { padding:4px 30px 5px; border:10px solid #f5f5f5; margin:10px 0 20px; }
.portfolio-details-box .portfolio-details-list li:first-child { border-top:none; }
.portfolio-details-list li span { font-weight: 700; margin-right: 5px; }
.portfolio-details-list li a { color:#505050; }
.portfolio-details-list li .social-icons { float:right; }
.portfolio-details-list li .social-icon { margin-bottom: 0; color:#7a7a7a; }
.portfolio-related-container  { margin-bottom:30px; }
.owl-carousel .portfolio-meta-wrapper + p { margin-bottom: 0; }
@media (min-width: 768px) { .portfolio-details { margin-bottom: 60px; }
    .portfolio-media { margin-bottom:50px; }
    .portfolio-related-container  { margin-bottom:40px; }
    .portfolio-details-box  { margin:15px 0 20px; }
}
@media (min-width: 992px) { .portfolio-media { margin-bottom:70px; }
    .portfolio-related-container  { margin-bottom:58px; }
    .portfolio-media.fullwidth-media { margin-bottom: 60px; }
    .portfolio-details-box  { margin-top:-30px; }
}