.mk-p-grid { position: relative; display: inline-block; width: 100%; vertical-align: top; }
.mk-p-grid.mk-p-masonry-on .mk-grid-inner { visibility: hidden; }
.mk-p-grid.mk-p-masonry-on .mk-grid-inner.mk--masonry-init { visibility: visible; }
.mk-p-grid.mk-p-masonry-on .mk-grid-masonry-sizer { width: 100%; padding: 0; margin: 0; }
.mk-p-grid.mk-p-masonry-on .mk-grid-masonry-gutter { width: 0; padding: 0; margin: 0; }

/* ---------------------------------------------------------------------------------------------------------------------- */
.grid-item { display: flex; align-items: center; }
.mk-portfolio-tooltip .mk-portfolio-wrap { position: relative; transition: all 0.3s ease-in-out; }
.mk-portfolio-tooltip .mk-portfolio-content { display: none; }
.mk-portfolio-tooltip .mk-portfolio-content a,
.mk-portfolio-tooptip-box a { text-decoration: none; }
.mk-portfolio-tooltip .mk-portfolio-subtitle span { display: inline-block; margin: 0 8px; }
.mk-portfolio-tooltip { position: relative; }
.mk-portfolio-tooltip .mk-portfolio-content { display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 999999; visibility: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); text-align: center; padding: 20px 30px; }
.mk-items--packery .mk-portfolio-wrap { width: 100%; height: 100%; }
.mk-items--packery .mk-packery-bg-img { height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.mk-items--packery .mk-packery-bg-img img { width: 100%; height: 100%; visibility: hidden; display: block; opacity: 0; }
.mk-items--packery a.mk-post-grid-image { width: 100%; height: 100%; display: block; }
.mk-portfolio-tooltip.mk-p-grid article.mk-load-anim--fade.mk-grid--load .mk-post-grid-image { opacity: 0; transition: opacity .6s ease-out; }
.mk-portfolio-tooltip.mk-p-grid article.mk-load-anim--fade.mk-grid--load.mk-grid--loaded .mk-post-grid-image { opacity: 1; }
.mk-portfolio-tooltip.mk-p-grid article.mk-load-anim--reveal .mk-post-grid-image img { width: 100%; max-width: 100%; height: auto; dispay: block; will-change: transform; transition: all .8s cubic-bezier(.25, .46, .45, .94); -o-transition: all .8s cubic-bezier(.25, .46, .45, .94); -webkit-transition: all .8s cubic-bezier(.25, .46, .45, .94); }
.mk-portfolio-tooltip.mk-p-grid article.mk-load-anim--reveal.mk-grid--load .mk-post-grid-image { overflow: hidden; vertical-align: middle; width: 100%; position: relative; display: inline-block; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transition: all .8s cubic-bezier(.4, 0, .2, 1); -o-transition: all .8s cubic-bezier(.4, 0, .2, 1); -webkit-transition: all .8s cubic-bezier(.4, 0, .2, 1); }
.mk-portfolio-tooltip.mk-p-grid article.mk-load-anim--reveal.mk-grid--load.mk-grid--loaded .mk-post-grid-image { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transition: all .8s cubic-bezier(.25, .46, .45, .94); -o-transition: all .8s cubic-bezier(.25, .46, .45, .94); -webkit-transition: all .8s cubic-bezier(.25, .46, .45, .94); }
.mk-portfolio-tooltip .mk-portfolio-image { overflow: hidden; }
.mk-portfolio-tooltip .mk-portfolio-image img { transform: scale(1); transition: all .8s cubic-bezier(.25, .46, .45, .94); -o-transition: all .8s cubic-bezier(.25, .46, .45, .94); -webkit-transition: all .8s cubic-bezier(.25, .46, .45, .94); }
.mk-portfolio-tooltip:not(.mk-p-masonry-on) .mk-portfolio-image img { width: 100%; }
.mk-portfolio-image-shrink-yes .mk-portfolio-tooltip.mk-p-grid article .mk-portfolio-image { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: all .8s cubic-bezier(.25, .46, .45, .94); -o-transition: all .8s cubic-bezier(.25, .46, .45, .94); -webkit-transition: all .8s cubic-bezier(.25, .46, .45, .94); height: 100%; display: block; width: 100%; }
.mk-portfolio-image-shrink-yes .mk-portfolio-tooltip.mk-p-grid article:hover .mk-portfolio-image { -webkit-clip-path: inset(12px 12px 12px 12px); clip-path: inset(12px 12px 12px 12px); }
.mk-portfolio-tooltip .mk-portfolio-image a.mk-post-grid-image { width: 100%; transform: scale(1); transition: transform 1.4s cubic-bezier(.25, .1, .14, .91); transform-origin: center; position: relative; display: block; }
.mk-portfolio-tooltip .mk-portfolio-image { overflow: hidden; position: relative; transition: all 0.3s ease-in-out; }
.mk-portfolio-tooltip.mk-parallax-scroll-on a.mk-post-grid-image { transform: scale(1.22); }

/* Hover Image Animation */
.mk-portfolio-image-zoom-yes .mk-portfolio-wrap .mk-portfolio-image img { margin-left: 0; transform: scale(1); transition: all .5s cubic-bezier(.785, .135, .15, .860) 0ms; }
.mk-portfolio-image-zoom-yes .mk-portfolio-wrap:hover .mk-portfolio-image img { transform: scale(1.1); }

/* Tooltip Box */
.mk-portfolio-tooptip-box { position: fixed; top: 20px; left: 20px; z-index: 999999; pointer-events: none; pointer-events: none; }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-wrap { position: relative; display: inline-block; vertical-align: middle; }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-title h4.mk-portfolio-title { margin: 0; font-size:20px; line-height: normal; }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-title a { color: var(--swm-color-dark-1); }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-title,
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-subtitle { padding: 10px 20px; white-space: nowrap; z-index: 2; position: relative; opacity: 0; transform: translateX(20px); will-change: transform; display: block; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: -webkit-clip-path 0.4s ease; transition: clip-path 0.4s ease; transition: -webkit-clip-path 0.4s ease; float: left; clear: both; }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-subtitle { font-size: calc(var(--body-font-size) - 4px); font-weight: var(--swm-headings-font-weight); font-family: var(--swm-headings-font-family); letter-spacing: 1px; text-transform: uppercase; line-height: normal; padding: 5px 20px; color: var(--swm-color-light-1);  }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-subtitle:after { transition-delay: 0.4s; background: var(--swm-color-accent); color: var(--swm-color-light-1); }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-title:after,
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-subtitle:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; transition: width .39s ease; pointer-events: none; z-index: -1; }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-subtitle:after {  }
.mk-portfolio-tooptip-box .mk-portfolio-tooltip-box-title:after { background: var(--swm-color-light-1); border:1px solid var(--swm-color-dark-1); color: var(--swm-color-dark-1); }
/* tooltip active */
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-title,
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-subtitle { opacity: 1; transform: translateX(0); transition: transform .4s ease .2s, opacity .2s ease-out .2s; }
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-subtitle { transition: transform .4s ease .15s, opacity .2s ease-out .15s; }
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-title,
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-subtitle { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: -webkit-clip-path 0.4s ease; transition: clip-path 0.4s ease; transition: -webkit-clip-path 0.4s ease; }
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-subtitle { transition-delay: 0.4s; transition: -webkit-clip-path 0.6s ease; transition: clip-path 0.6s ease; transition: -webkit-clip-path 0.6s ease; }
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-title:after,
.mk-portfolio-tooptip-box.mk-is-active .mk-portfolio-tooltip-box-subtitle:after { width: 100%; }

/* when right area space is less */
.mk-portfolio-tooptip-box.mk-right { text-align: right; }
.mk-portfolio-tooptip-box.mk-right .mk-portfolio-tooltip-box-wrap { text-align: right; transform: translateX(-100%); right: 30px; }
.mk-portfolio-tooptip-box.mk-right .mk-portfolio-tooltip-box-title,
.mk-portfolio-tooptip-box.mk-right .mk-portfolio-tooltip-box-subtitle { float: right; }