/* = Portfolio ----------------------------------------------------*/ .wrapper-penci-portfolio { width: 100%; overflow: hidden; } .wrapper-penci-portfolio .page-numbers { margin-bottom: 0; } .wrapper-penci-portfolio .page-numbers li { margin-left: 0; display: inline-block; } .wrapper-penci-portfolio .penci-pagination { padding-bottom: 0; opacity: 0; visibility: hidden; } .wrapper-penci-portfolio .penci-pagenavi-shortcode .penci-pagination, .wrapper-penci-portfolio .penci-portfolio.loaded + .penci-pagination { opacity: 1; visibility: visible; } .penci-portfolio-filter { display: block; text-align: center; margin: 0 0 15px 0; position: relative; } .post-entry .penci-portfolio-filter ul, .penci-portfolio-filter ul { list-style: none; display: inline-block; vertical-align: top; padding: 0 !important; margin: 0; } .post-entry .penci-portfolio-filter ul li, .penci-portfolio-filter ul li { display: inline-block; float: left; margin: 0 0 5px 10px; padding: 0; } .post-entry .penci-portfolio-filter ul li:after, .penci-portfolio-filter ul li:after { content: '/'; opacity: 0.3; font-family: 'Roboto', sans-serif; } .post-entry .penci-portfolio-filter ul li:last-child, .penci-portfolio-filter ul li:last-child { margin-right: 0; } .post-entry .penci-portfolio-filter ul li:last-child:after, .penci-portfolio-filter ul li:last-child:after { content: none; } .post-entry .penci-portfolio-filter ul li a, .penci-portfolio-filter ul li a { color: #111111; font-family: "Roboto", sans-serif; margin-right: 5px; font-size: 14px; } .post-entry .penci-portfolio-filter ul li a:hover, .post-entry .penci-portfolio-filter ul li.active a, .penci-portfolio-filter ul li a:hover, .penci-portfolio-filter ul li.active a { color: #3f51b5; text-decoration: none; } .penci-portfolio-filter li { -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transition-delay: 50ms; transition-delay: 50ms; } .penci-portfolio-filter ul li + li { -webkit-transition-delay: .1s; transition-delay: .1s; } .penci-portfolio-filter ul li + li + li { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .penci-portfolio-filter ul li + li + li + li { -webkit-transition-delay: .2s; transition-delay: .2s; } .penci-portfolio-filter ul li + li + li + li + li { -webkit-transition-delay: 250ms; transition-delay: 250ms; } .penci-portfolio-filter ul li + li + li + li + li + li { -webkit-transition-delay: .3s; transition-delay: .3s; } .penci-portfolio-filter ul.is-active li { -webkit-transition-delay: 250ms; transition-delay: 250ms; } .penci-portfolio-filter ul.is-active li + li { -webkit-transition-delay: .3s; transition-delay: .3s; } .penci-portfolio-filter ul.is-active li + li + li { -webkit-transition-delay: 350ms; transition-delay: 350ms; } .penci-portfolio-filter ul.is-active li + li + li + li { -webkit-transition-delay: .4s; transition-delay: .4s; } .penci-portfolio-filter ul.is-active li + li + li + li + li { -webkit-transition-delay: 450ms; transition-delay: 450ms; } .penci-portfolio-filter ul.is-active li + li + li + li + li + li { -webkit-transition-delay: .5s; transition-delay: .5s; } .penci-portfolio-filter .portfolio-subcategory { position: absolute; top: 0; right: 50%; transform: translateX(50%); z-index: 10; visibility: hidden; } .penci-portfolio-filter .portfolio-subcategory li { visibility: hidden; margin-bottom: 10px; -webkit-transform: translateY(-20px); transform: translateY(-20px); zoom: 1; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } .penci-portfolio-filter .portfolio-subcategory.is-active li { visibility: visible; zoom: 1; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; transition-delay: 250ms; } .penci-portfolio-filter .penci-pfl-subcat-back a { -webkit-opacity: .5; -moz-opacity: .5; opacity: .5; } .penci-portfolio-filter .penci-pfl-subcat-back a i { display: inline-block; margin-right: 10px; zoom: 1; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; transition: all 0.3s; } .penci-portfolio-filter .penci-pfl-subcat-back a:hover { zoom: 1; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .penci-portfolio-filter .penci-pfl-subcat-back a:hover i { zoom: 1; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .subcategory-active.penci-portfolio-filter .penci-pfl-root-cats li { visibility: hidden; zoom: 1; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .penci_breadcrumbs + .wrapper-penci-portfolio { margin-top: 20px; } .penci-portfolio-wrap { margin-left: -10px; margin-right: -10px; } .penci-portfolio-wrap .inner-portfolio-posts { display: inline-block; width: 100%; vertical-align: top; } .penci-portfolio-wrap .portfolio-item { width: 33.33333%; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; float: left; margin-bottom: 20px; } .penci-portfolio-wrap.column-1 .portfolio-item { width: 100%; } .penci-portfolio-wrap.column-2 .portfolio-item { width: 50%; } .penci-portfolio-wrap.column-3 .portfolio-item { width: 33.33333%; } .penci-portfolio-wrap.column-4 .portfolio-item { width: 25%; } .penci-portfolio-wrap.column-5 .portfolio-item { width: 20%; } .penci-portfolio-wrap.column-6 .portfolio-item { width: 16.6666667%; } .penci-portfolio-wrap .wow { visibility: hidden; } .penci-portfolio-mix .penci-portfolio-wrap .portfolio-item { width: 25%; } .penci-portfolio-mix .penci-portfolio-wrap .portfolio-item:nth-child(5n + 2) { width: 50%; } .penci-portfolio-mix .penci-pfl-big-item .penci-plf-square .penci-image-placeholder { padding-bottom: 100% !important; } .penci-portfolio-mix .penci-pfl-big-item .penci-plf-vertical .penci-image-placeholder { padding-bottom: 100% !important; } .penci-portfolio-mix .penci-pfl-big-item .penci-plf-landscape .penci-image-placeholder { padding-bottom: 66.66667% !important; } .inner-item-portfolio { position: relative; } .inner-item-portfolio img { width: 100%; display: block; } .penci-portfolio-thumbnail a:after { opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; content: ""; -webkit-transition: .5s; transition: .5s; z-index: 10; } .inner-item-portfolio:hover .penci-portfolio-thumbnail a:after { opacity: 0.87; } .inner-item-portfolio .portfolio-desc { position: absolute; text-align: center; top: 50%; width: 100%; padding: 0 10px; margin: 0; z-index: 12; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; transition: all .3s ease; } .inner-item-portfolio a { text-decoration: none !important; } .inner-item-portfolio .portfolio-desc h3 { opacity: 0; text-transform: none; font-size: 20px; margin-top: 0; margin-bottom: 4px; position: relative; -webkit-transform: translate(0, 10px); -ms-transform: translate(0, 10px); transform: translate(0, 10px); -webkit-transition: all .5s ease; transition: all .5s ease; color: #ffffff; } .inner-item-portfolio .portfolio-desc span { opacity: 0; font-size: 12px; display: block; vertical-align: top; line-height: 1.3; text-decoration: none; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition: all .5s ease; transition: all .5s ease; color: #adadad; } .inner-item-portfolio .portfolio-desc span.amount, .inner-item-portfolio .portfolio-desc span.amount span { display: initial; } .inner-item-portfolio:hover .portfolio-desc { visibility: visible; opacity: 1; } .inner-item-portfolio:hover .portfolio-desc h3, .inner-item-portfolio:hover .portfolio-desc span { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .penci-portfolio-below_img .inner-item-portfolio .portfolio-desc { position: static; transform: none; padding: 0; margin-top: 11px; opacity: 1; visibility: visible; } .penci-portfolio-below_img .inner-item-portfolio .portfolio-desc h3, .penci-portfolio-below_img .inner-item-portfolio .portfolio-desc span { opacity: 1; transform: none; } .penci-portfolio-below_img .inner-item-portfolio .portfolio-desc h3 { color: #111111; } .penci-portfolio-below_img .inner-item-portfolio .portfolio-desc a:hover h3 { color: #3f51b5; } .penci-portfolio-below_img .penci-portfolio-thumbnail { position: relative; } .penci-portfolio-below_img .inner-item-portfolio:hover .penci-portfolio-thumbnail a:after { opacity: 0.3; } .single-portfolio-thumbnail { margin-bottom: 23px; text-align: center; vertical-align: top; } .single-portfolio-thumbnail img { vertical-align: top; } .portfolio-page-content .portfolio-detail { margin: 0 auto; } .single-portfolio .penci-social-buttons { text-align: center; margin-bottom: 0; } .single-portfolio .penci-social-buttons + .post-comments { border-top: 1px solid #ececec; } .single-portfolio .penci_breadcrumbs { margin-bottom: 7px; } .single-portfolio.single .entry-content { margin-bottom: 20px; margin-top: 11px; } .single-portfolio.single .penci-plf-single-info .penci-entry-content { margin-top: 0; margin-bottom: 0; } .penci-plf-single-info .penci-plf-info-inner { margin-top: -20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .penci-plf-single-info .penci-plf-info { width: 100%; max-width: 400px; padding-left: 50px; } .penci-plf-single-info .penci-plf-desc { flex: 1; } .penci-plf-single-info .penci-col-inner { margin-top: 20px; } .penci-plf-single-info.pfl_properties_block .penci-plf-info-inner { display: block; } .penci-plf-single-info.pfl_properties_block .penci-plf-desc, .penci-plf-single-info.pfl_properties_block .penci-plf-info { max-width: 100%; width: 100%; padding-left: 0; } .penci-pfl-info-item { display: table; table-layout: fixed; } .penci-pfl-info-item .penci-pfl-info-label { min-width: 108px; font-weight: 600; display: table-cell; color: #111; } .penci-pfl-info-item .penci-pfl-info-value { display: table-cell; } .penci-pfl-info-item a { font-weight: 400; } .penci-pagenavi-shortcode li { list-style: none; display: inline-block; vertical-align: top; padding: 0; margin: 0; } .penci-pagenavi-shortcode .align-left li { float: left; } .penci-pagenavi-shortcode .align-right li { float: right; } .entry-content .penci-portfolio-more-button { color: #ffffff; } .entry-content .penci-portfolio-more-button:hover { text-decoration: none; } .penci-post-related .inner-item-portfolio { opacity: 1 !important; } .penci-post-related .inner-item-portfolio.animated { animation-name: none !important; } .penci-post-related .wrapper-penci-portfolio { margin-bottom: -20px; } .penci-portfolio-more-button .ajax-more-finished { visibility: hidden; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0; display: none; } .penci-portfolio-more-button .ajaxdot { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .penci-portfolio-more-button.penci-plf-loading-1 .penci-portfolio-ajaxdot { font-size: 8px; width: 32px; margin: 0 auto 0 -16px; opacity: 0; top: 50%; height: 8px; left: 50%; z-index: -1; position: absolute; transform: translateY(-50%); } .penci-portfolio-more-button.penci-plf-loading-1 .dot { width: 1em; height: 1em; border-radius: .5em; background: #fff; position: absolute; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .penci-portfolio-more-button.penci-plf-loading-1 .dot1 { -webkit-animation-name: revealPortfolio; animation-name: revealPortfolio; } .penci-portfolio-more-button.penci-plf-loading-1 .dot2, .penci-portfolio-more-button.penci-plf-loading-1 .dot3 { -webkit-animation-name: slidePortfolio; animation-name: slidePortfolio; } .penci-portfolio-more-button.penci-plf-loading-1 .dot4 { left: 3em; -webkit-animation-name: revealbackPortfolio; animation-name: revealbackPortfolio; } .penci-portfolio-more-button.penci-plf-loading-1 .dot1, .penci-portfolio-more-button.penci-plf-loading-1 .dot2 { left: 0; } .penci-portfolio-more-button.penci-plf-loading-1 .dot3 { left: 1.5em; } .penci-portfolio-more-button.penci-plf-loading-2 .penci-portfolio-ajaxdot { display: inline-block; width: 30px; height: 30px; background-color: #111; border-radius: 100%; -webkit-animation: scaleoutPortfolio 1s infinite ease-in-out; animation: scaleoutPortfolio 1s infinite ease-in-out; z-index: 50; opacity: 0; position: absolute; top: 5px; left: 50%; margin-left: -15px; visibility: hidden; } .penci-portfolio-more-button.penci-plf-loading-2 .dot { display: none; } .penci-portfolio-more-button.is-finished .ajax-more-finished { visibility: visible; opacity: 1; display: block; } .penci-portfolio-more-button.is-finished .ajax-more-text { -webkit-transition-duration: 50ms; transition-duration: 50ms; zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; display: none; } .penci-portfolio-more-button.infinite .penci-portfolio-ajaxdot, .penci-portfolio-more-button.loading-posts .penci-portfolio-ajaxdot { opacity: 1; z-index: 100; visibility: visible; } .penci-portfolio-more-button.infinite .ajax-more-text, .penci-portfolio-more-button.loading-posts .ajax-more-text { opacity: 0; visibility: hidden; } .penci-portfolio-more-button.infinite.penci-plf-loading-2, .penci-portfolio-more-button.loading-posts.penci-plf-loading-2 { background: transparent !important; color: transparent !important; border-color: transparent !important; } .penci-pfl-no-trans { webkit-transition: none !important; transition: none !important; } .penci-pfl-no-opacity { opacity: 0 !important; } .penci-pfl-info-item { margin-bottom: 5px; } .penci-pfl-info-item:last-child { margin-bottom: 0; } .penci-pfl-social_share { padding-top: 27px; margin-top: 27px; margin-bottom: 0; border-top: 1px solid #ececec; } .penci-pfl-social_share .penci-social-item { padding-right: 16px; } .penci-pfl-social_share .penci-social-item:last-child { padding-right: 0; } .penci-pfl-related { padding-bottom: 20px; } .penci-pfl-related .post-related_content { margin-left: 0; margin-right: 0; } .penci-pfl-pagination { width: 100%; margin-top: 60px; display: flex; flex-wrap: wrap; align-items: center; } .penci-pfl-pagination:after { content: ''; display: table; clear: both; width: 100%; } .penci-pfl-pagination .penci-pfl-prev span, .penci-pfl-pagination .penci-pfl-next span { color: inherit; text-transform: none; } .penci-pfl-pagination .penci-pfl-prev { width: 42%; float: left; } .penci-pfl-pagination .penci-pfl-back-wap { width: 16%; float: left; text-align: center; } .penci-pfl-pagination .penci-pfl-back { width: 22px; display: inline-block; vertical-align: top; } .penci-pfl-pagination .penci-pfl-back span { color: inherit; } .penci-pfl-pagination .penci-square-1, .penci-pfl-pagination .penci-square-2 { width: 22px; height: 10px; display: block; position: relative; } .penci-pfl-pagination .penci-square-1:before, .penci-pfl-pagination .penci-square-1:after, .penci-pfl-pagination .penci-square-2:before, .penci-pfl-pagination .penci-square-2:after { content: ''; width: 10px; height: 10px; border-top: 10px solid; display: block; float: left; } .penci-pfl-pagination .penci-square-1:after, .penci-pfl-pagination .penci-square-2:after { float: right; } .penci-pfl-pagination .penci-square-2 { margin-top: 2px; } .penci-pfl-pagination .penci-pfl-next { text-align: right; float: right; width: 42%; } .penci-pfl-pagination .prev-title { font-size: 20px; line-height: 32px; } .penci-pfl-pagination .fa { font-size: 32px; line-height: 32px; } .working-only-mobile { display: none; } .penci-noclick { pointer-events: none; zoom: 1; } .penci-noclick .penci-pfl-next-title, .penci-noclick .penci-pfl-prev-title { -webkit-opacity: .4; -moz-opacity: .4; opacity: .4; } .penci-ajax-more a.penci-portfolio-more-button { height: 40px; line-height: 40px; min-width: 180px; max-width: none; display: inline-block !important; vertical-align: top; width: auto; padding-left: 15px; padding-right: 15px; } .penci-ajax-more.penci-pag-center { text-align: center; } .penci-ajax-more.penci-pag-left { text-align: left; } .penci-ajax-more.penci-pag-right { text-align: right; } @-webkit-keyframes revealPortfolio { from { -webkit-transform: scale(0.001); transform: scale(0.001); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes revealPortfolio { from { -webkit-transform: scale(0.001); transform: scale(0.001); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes slidePortfolio { to { -webkit-transform: translateX(1.5em); transform: translateX(1.5em); } } @keyframes slidePortfolio { to { -webkit-transform: translateX(1.5em); transform: translateX(1.5em); } } @-webkit-keyframes revealbackPortfolio { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.001); transform: scale(0.001); } } @keyframes revealbackPortfolio { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.001); transform: scale(0.001); } } @-webkit-keyframes fadeInPortfolio { 0% { top: 40px; opacity: 0; } 100% { top: 0; opacity: 1; } } @keyframes fadeInPortfolio { 0% { top: 40px; opacity: 0; } 100% { top: 0; opacity: 1; } } .fadeInPortfolio { -webkit-animation-name: fadeInPortfolio; animation-name: fadeInPortfolio; } @-webkit-keyframes scaleoutPortfolio { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes scaleoutPortfolio { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .wow.fast { -webkit-animation-duration: .3s; animation-duration: .3s; } .penci-image-placeholder { position: relative; display: block; background-color: #eee; } .penci-image-placeholder > img { position: absolute; object-fit: cover; display: block; max-width: 100%; width: 100%; height: 100%; top: 0; left: 0; image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-filter: blur(0); filter: blur(0); opacity: 0; } .penci-image-placeholder .penci-lazyloaded { -webkit-animation: pencipflOpacityIn 0.4s cubic-bezier(0.5, -0.04, 0.47, 0.98) forwards; animation: pencipflOpacityIn 0.4s cubic-bezier(0.5, -0.04, 0.47, 0.98) forwards; } .penci-image-placeholder.penci-lazyloaded-parent { -webkit-animation: pencipflBackgroundOut 0.4s cubic-bezier(0.5, -0.04, 0.47, 0.98) forwards; animation: pencipflBackgroundOut 0.4s cubic-bezier(0.5, -0.04, 0.47, 0.98) forwards; } @-webkit-keyframes pencipflBackgroundOut { to { background: 0 0; } } @keyframes pencipflBackgroundOut { to { background: 0 0; } } @-webkit-keyframes pencipflOpacityIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pencipflOpacityIn { from { opacity: 0; } to { opacity: 1; } } @media only screen and (max-width: 1169px) { .penci-portfolio-wrap .portfolio-item { width: 50%; } .penci-portfolio.column-4 .portfolio-item, .penci-portfolio.column-6 .portfolio-item, .penci-portfolio.column-5 .portfolio-item { width: 33.333333%; } } @media only screen and (max-width: 960px) { .penci-portfolio.column-6 .portfolio-item, .penci-portfolio.column-5 .portfolio-item, .penci-portfolio.column-4 .portfolio-item, .penci-portfolio.column-3 .portfolio-item { width: 50%; } } @media only screen and (max-width: 768px) { .penci-portfolio-wrap .portfolio-item { width: 50% !important; } .working-only-pc { display: none; } .working-only-mobile { display: block; } .penci-plf-single-info .penci-plf-info-inner { display: block; } .penci-plf-single-info .penci-plf-desc, .penci-plf-single-info .penci-plf-info { max-width: 100%; width: 100%; padding-left: 0; } } @media only screen and (max-width: 600px) { .penci-portfolio-wrap .portfolio-item { width: 100% !important; } } /* = End portfolio */