.blog-items .blog-item{overflow: visible;}
.ba__popeye-container{z-index: 9999; max-width: 100%; position: relative;}
.ba__popeye-container.direction-none{margin:0 auto;}
.ba__popeye-container.direction-left{margin: 0 1em .5em 0;}
.ba__popeye-container.direction-right{margin: 0 0 .5em 1em;}
.ba__popeye-container.direction-right .ba__button.expand{transform: rotate(90deg);}

.ba__popeye-wrap *{box-sizing: border-box;margin:0;padding:0; position: relative;}
.ba__popeye-wrap{width:auto; height:auto; display: flex; flex-direction: column; position: absolute; left: 0; top: 0; right: auto; direction: ltr; transition: all .5s; min-width: 100%;}

.ba__popeye-wrap.dragging .ba__popeye{cursor: -webkit-grab;cursor: grab;}
.ba__popeye{width:100%; height: 100%; transition: all .3s; overflow: hidden; background: inherit; z-index: 0;}
.ba__popeye-container.expanded .ba__popeye-viewport{max-width: none;}
.ba__popeye-viewport{z-index:0; transition: width .5s, height .5s; display: block; min-height:15em; width: 100%; height: 100%;}
.ba__popeye-container.direction-right > *{left: auto; right: 0; direction: rtl;}

.ba__popeye > *{display: none; z-index: 0; opacity:0; flex-direction: column;-webkit-animation-duration: 1s;animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: popeyeFade; animation-name: popeyeFade;}
.ba__popeye > .active{display: flex !important; align-items: center; justify-content: center; opacity: 1; z-index: 999;}
.ba__popeye a{display: block;}
.ba__popeye-wrap:not(.dragging) a:not([href]), .ba__popeye-container.modal-on .ba__popeye-wrap:not(.dragging) a, .ba__popeye-modal a{pointer-events: none;} 
.ba__popeye img{max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;}
.ba__popeye-wrap .ba__controls{position: absolute; left:0; top:0; padding:5px; margin:0; display: flex; z-index: 5; background: rgba(0,0,0,.5); direction: ltr;}
.ba__popeye-wrap .ba__button{width:32px; height:32px; cursor: pointer; margin: 1px; border-radius:3px; color: inherit;}
.ba__popeye-wrap .ba__button:hover,
.ba__popeye-wrap .ba__button:focus{opacity: .8;}
.ba__popeye-wrap .ba__button::after{position: absolute;left:0; top:calc(50% - 8px);width: 16px; height: 16px; color: inherit; border: 0 solid; content: ''; box-sizing: border-box;}
.ba__popeye-wrap .ba__button.prev::after,
.ba__popeye-wrap .ba__button.next::after{left:calc(50% - 4px); border-width: 2px 2px 0 0; transform: rotate(-127deg);}
.ba__popeye-wrap .ba__button.next::after{transform: rotate(45deg); left:calc(50% - 12px);}
.ba__popeye-wrap .ba__button.play::after{border-width: 12px 0 12px 12px; margin: -4px 0 0 10px; border-color: transparent transparent transparent currentColor;}
.ba__popeye-wrap[data-play] .ba__button.play::after{border-width:0 2px; width: 12px; height:20px; margin: -2px 0 0 10px; border-color: transparent currentColor;}
.ba__popeye-wrap .ba__button:not(.play):not(.next):not(.prev):after{width:24px; height:24px; left: 50%; top:50%; transform: translate3d(-50%, -50%, 0); -webkit-mask: var(--ba-popeye) no-repeat; mask: var(--ba-popeye) no-repeat;-webkit-mask-size: 100% 100%;mask-size: 100% 100%;background-color: currentColor;}
.ba__popeye-wrap .ba__button.expand::after{--ba-popeye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23eee' stroke-width='4'%3E%3Cpath d='M44 4H4v40h40V4Z'/%3E%3Cpath d='M16 4v12H4m32 8v12H24m12 0L24 24M4 6v20M7 4h20'/%3E%3C/g%3E%3C/svg%3E");}
.ba__popeye-wrap .ba__button.expand.on::after{--ba-popeye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23eee' stroke-width='2' d='M5 9h4V5M3 3l6 6m-4 6h4v4m-6 2l6-6m10-6h-4V5m0 4l6-6m-2 12h-4v4m0-4l6 6'/%3E%3C/svg%3E");}
.ba__popeye-wrap .ba__button.thumbs::after{--ba-popeye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eee' d='M3 3h8v8H3zm0 10h8v8H3zM13 3h8v8h-8zm0 10h8v8h-8z'/%3E%3C/svg%3E");}
.ba__popeye-wrap.thumbs-on .ba__button.thumbs::after{opacity: .6;}
.ba__popeye-wrap .ba__button.zoom::after{--ba-popeye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23eee' stroke-width='2' d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m4 0h6m-3-3v6m11 8l-6-6'/%3E%3C/svg%3E");}
.ba__popeye-wrap .ba__button.close::after{--ba-popeye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");}
.ba__popeye-wrap .ba__button.close,
.ba__popeye-wrap .ba__button.zoom > *{display: none;}
.ba__popeye-wrap .ba__button.zoom.on::after{opacity: .5;}
.ba__popeye-wrap .ba__button.zoom.on > *{display: block; width: 150px; padding: 10px; border-radius: 3px; background: #6a6b77; position: absolute; left: -60px; top:calc(100% + 6px);}
.ba__popeye-wrap .ba__button.zoom.on > ::before{position: absolute; left: calc(50% - 6px); top: -12px; border: 6px solid transparent; border-bottom-color: #6a6b77; content: '';}
.ba__popeye-zoom{-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 100%;height: 5px;background: #d3d3d3;outline: none; border-radius: 1em;}
.ba__popeye-zoom::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 12px;height: 12px;background: #04AA6D; cursor: pointer; margin-top: -1px; border-radius: 50%;}
.ba__popeye-zoom::-moz-range-thumb {width: 12px;height: 12px;background: #04AA6D; cursor: pointer;}
.ba__popeye-wrap > .ba__button{height: 62px; position: absolute; left:-1px; top:calc(50% - 31px); background: rgba(150,150,150,.5); box-shadow: 0 0 3px; border-radius: 0 .3em .3em 0;}
.ba__popeye-wrap > .ba__button.next{left: auto; right:-1px; border-radius: .3em 0 0 .3em;}
.ba__popeye-wrap .ba__counter{background: rgba(150,150,150,.5); color: #fff; font-size: 12px; font-weight: bold;padding: 5px 10px;position: absolute;right: 0;bottom: 0;line-height: 1; z-index: 5;}
.ba__popeye-wrap .ba__captions{width: 100%;}
.ba__popeye-wrap .ba__captions > :not(.active),
.ba__popeye-container.caption-none .ba__captions,
.ba__popeye-container.buttons-hover .ba__controls,
.ba__popeye-container.buttons-none .ba__controls{display: none !important;}
.ba__popeye-wrap .ba__captions > * > :not(:empty){padding: 1em; background: #eceef4; color: #3e4146; line-height: 1.5;}
.ba__popeye-container.caption-hover .ba__captions,
.ba__popeye-container.caption-expand .ba__captions{display: none; position: absolute; left: 0; top:100%;}
.ba__popeye-container.caption-hover:hover .ba__captions,
.ba__popeye-container.caption-expand.expanded .ba__captions{display: block !important;}
.ba__popeye-container.buttons-hover:hover .ba__controls{display: flex !important;}
.ba__popeye-container.expanding .ba__captions{opacity: 0;}

.ba__popeye-modal{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #3e4146; z-index: 9999; display: none;}
.ba__popeye-modal.active,.ba__popeye-modal .ba__popeye-wrap.thumbs-on .ba__popeye-bullets{display: flex !important; align-items: center; justify-content: center; -webkit-animation: popeyeFade .5s linear .1s both; animation: popeyeFade .5s linear .1s both;}
.ba__popeye-modal > .ba__popeye-wrap,
.ba__popeye-modal .ba__popeye-viewport{width:100% !important; height:100% !important; margin: 0 !important; padding: 0 !important; color: #fff;}
.ba__popeye-modal .ba__popeye-viewport{position: static !important; background: none; display: flex;align-items: center;justify-content: center; flex-direction: column;}
.ba__popeye-modal .ba__popeye-wrap .ba__controls{width:100%; background: #181d21;}
.ba__popeye-modal .ba__popeye-wrap .ba__button.expand, .ba__popeye-wrap .ba__button.thumbs,.ba__popeye-wrap .ba__button.zoom, .ba__popeye-wrap > .ba__button, .ba__popeye-modal .ba__captions{display: none !important;}
.ba__popeye-modal .ba__popeye-wrap .ba__button.close{display: block !important; margin-left: auto;}
.ba__popeye-modal .ba__popeye-wrap > .ba__button,
.ba__popeye-modal .ba__popeye-wrap .ba__button.thumbs,
.ba__popeye-modal .ba__popeye-wrap .ba__button.zoom{display: block !important;}
.ba__popeye-modal .ba__popeye{width: auto !important; height: auto !important;overflow: visible;background: none;}
.ba__popeye-modal .ba__popeye > * > *{display: flex; justify-content: center; max-height: calc(100vh - 100px);}

@-webkit-keyframes popeyeFade {0%{opacity: 0;}100%{opacity: 1;}}
@keyframes popeyeFade {0%{opacity: 0;}100%{opacity: 1;}}

.ba__popeye-bullets{width:562px;height: auto;max-width: 100%; position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%,0,0); padding:0 1em; margin:10px auto; display: none;}
.ba__popeye-bullets > *{width: 100%; height: 100%; display:block; line-height: 0; position: relative; overflow: hidden;scroll-behavior: smooth;}
.ba__popeye-bullets > * > *{display: inline-block;}
.ba__popeye-bullets .thumb-scroll{position: absolute; left: 0; top:0; line-height: 1.5; z-index: 9; width:1rem; height:100%; cursor: pointer; font-style: normal; color: #999;align-items: center; justify-content: center; font-size: 16px;display: flex; background: #000; border-radius: 3px;}
.ba__popeye-bullets .thumb-scroll.next{left: auto; right: 0;}
.ba__popeye-bullets .thumb-scroll:hover{opacity: .6;}
.ba__popeye-bullets .thumb-scroll.disable{opacity: .2;}
.ba__popeye-wrap .pager, .ba__popeye-wrap .pager > *{list-style: none; display: inline-flex; padding:0; margin: 0; line-height: normal; text-align: left; width:auto; z-index: 2; transition: all .2s}
.ba__popeye-wrap .pager-item{display:block;width:100px;height:75px;line-height:1; background: rgba(0,0,0,.5);margin: 0 3px;color: #fff; text-align: center; cursor: pointer;border-radius: 3px; font-size: 16px; position: relative; display: flex; align-items: center;overflow: hidden; padding:3px;}
.ba__popeye-wrap .active > .pager-item{background: #c41717;}
.ba__popeye-wrap .pager .pager-img{width: 100%; height:100%;}
.ba__popeye-wrap .thumb-scroll svg{overflow:hidden; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:3; width:1em;}


:root{
    --spacer: 12px;
    --bacg-radius: calc(var(--spacer) - 2px);
    --bacg-background: #eee;
    --bacg-color:#555;
}

.ba__popeye-style1{margin-top: 3.5em !important; --bacg-radius:0; --bacg-background: #08bd44; --bacg-color: #fff;}
.ba__popeye-style1 .ba__popeye-viewport{background: currentColor;color: var(--bacg-background);border: 2px solid; border-radius: var(--bacg-radius);}
.ba__popeye-style1 .ba__captions > * > :not(:empty){background: var(--bacg-background); color: var(--bacg-color); border-radius: var(--bacg-radius);}
.ba__popeye-style1 .ba__controls{top:auto; left:auto; bottom: 100%; right: 0; background: none; color: var(--bacg-background);}
.ba__popeye-style1 .ba__counter{top:2px; left:2px;right: auto; bottom: auto; background: var(--bacg-background);color: var(--bacg-color); }

.ba__popeye-style2{--bacg-background: #fffbf6; --bacg-color: #2f2c3f;}
.ba__popeye-style2 .ba__popeye-wrap{background: var(--bacg-background);color: var(--bacg-color);box-shadow: 0 0 .3em rgba(0,0,0,.5); border-radius: var(--bacg-radius);}
.ba__popeye-style2 .ba__popeye-viewport{height: auto !important; padding: var(--spacer);}
.ba__popeye-style2 .ba__controls{top:var(--spacer); left:var(--spacer); bottom:auto; right:var(--spacer); background: none; color: #f9c807;}
.ba__popeye-style2 .ba__controls .ba__button{background: var(--bacg-color);}
.ba__popeye-style2 .ba__controls .ba__button.expand{order: 9; margin-left: auto; background: none;}
.ba__popeye-style2 .ba__controls .ba__button.expand::after{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpath d='M39 6H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M20.5 28v-6.062l5.25 3.03L31 28l-5.25 3.031l-5.25 3.031V28ZM6 15h36m-9-9l-6 9m-6-9l-6 9'/%3E%3C/g%3E%3C/svg%3E"); width: 62px !important; height: 62px !important; -webkit-mask: none !important; mask: none !important; border-radius: 5px; background-size: 100%; margin: 1em 0 0 -1em;}
.ba__popeye-style2 .ba__counter{top: auto;left: var(--spacer); right: auto; bottom: var(--spacer); background: var(--bacg-color); color: var(--bacg-background);}
.ba__popeye-style2 .ba__captions{position: static !important; opacity: 1 !important;}
.ba__popeye-style2 .ba__captions > * > :not(:empty){background:none;}


.ba__popeye-style3{--bacg-background: #58636d; --bacg-color: #fff;}
.ba__popeye-style3 > * > div:not(.ba__captions),
.ba__popeye-style3 .ba__captions > * > :not(:empty){background: var(--bacg-background); color: var(--bacg-color);}
.ba__popeye-style3:hover .ba__popeye-viewport,
.ba__popeye-style3:hover .ba__captions > * > :not(:empty){box-shadow:0 0 var(--spacer) rgba(0,0,0,.2);}
.ba__popeye-style3 .ba__popeye-viewport{padding:var(--spacer); border-radius: var(--bacg-radius);}
.ba__popeye-style3 .ba__captions > * > :not(:empty){margin-top: 5px; border-radius: var(--bacg-radius);}
.ba__popeye-style3 .ba__controls{top: var(--spacer); left: auto; right: var(--spacer);}
.ba__popeye-style3 .ba__counter{right: var(--spacer); bottom: var(--spacer);color: var(--bacg-color);}


.ba__popeye-style4{--bacg-background: #218bee; --bacg-color: #fff;}
.ba__popeye-style4{margin-bottom: 3em !important;}
.ba__popeye-style4 > * > div:not(.ba__captions){background: var(--bacg-background); color: var(--bacg-color);}
.ba__popeye-style4:hover .ba__popeye-viewport{box-shadow:0 0 var(--spacer) rgba(0,0,0,.2);}
.ba__popeye-style4 .ba__popeye-viewport{padding:var(--spacer); border-radius: var(--bacg-radius);}
.ba__popeye-style4 .ba__captions{position: absolute; top: auto !important;bottom:var(--spacer);left:var(--spacer) !important; width: calc(100% - (var(--spacer) * 2));}
.ba__popeye-style4 .ba__captions > * > :not(:empty){background: rgba(0,0,0,.5); color: var(--bacg-color);}
.ba__popeye-style4 .ba__controls{bottom: var(--spacer); left: 0;top: auto;transform: translateY(100%);}
.ba__popeye-style4 .ba__counter{right: var(--spacer); bottom: var(--spacer); color: var(--bacg-color);}


.ba__popeye-style5{--bacg-background: #e9eff6; --bacg-color: #434a57;}
.ba__popeye-style5{margin-right: 3.5em !important;}
.ba__popeye-style5 > * > div:not(.ba__captions),
.ba__popeye-style5 .ba__captions > * > :not(:empty){background: var(--bacg-background);color: var(--bacg-color);border: 1px solid rgba(0,0,0,.1);}
.ba__popeye-style5:hover .ba__popeye-viewport,
.ba__popeye-style5:hover .ba__captions > * > :not(:empty){box-shadow:0 0 var(--spacer) rgba(4, 31, 104, 0.2);}
.ba__popeye-style5 .ba__popeye-viewport{padding:var(--spacer); border-radius: var(--bacg-radius);}
.ba__popeye-style5 .ba__captions > * > :not(:empty){margin-top: 5px; border-radius: var(--bacg-radius);}
.ba__popeye-style5 .ba__controls{top:var(--spacer); left:calc(100% - 2px);flex-direction: column; border-left: 0 !important; border-radius: 3px;}
.ba__popeye-style5 .ba__counter{right: var(--spacer); bottom: var(--spacer); color: var(--bacg-color);}


.ba__popeye-style6{--bacg-background: #f1f5d2; --bacg-color: #434a57;}
.ba__popeye-style6{--bacg-radius:0; padding-top: 6rem;}
.ba__popeye-style6 .ba__popeye-viewport{background: var(--bacg-background);color: var(--bacg-color);border: 0px solid; border-radius: var(--bacg-radius);}
.ba__popeye-style6 .ba__captions > * > :not(:empty){background: var(--bacg-background); color: var(--bacg-color); height:6.5em; overflow: auto; border-radius: var(--bacg-radius);}
.ba__popeye-style6 .ba__controls{top:40%; left:50%; transform: translate3d(-50%,-50%,0); background:var(--bacg-color); border-radius: 5em; color: var(--bacg-background); opacity: 0;}
.ba__popeye-style6.expanding .ba__controls{opacity: 0 !important;}
.ba__popeye-style6:hover .ba__controls{opacity: 1;}
.ba__popeye-style6 .ba__counter{top:auto; left:0;right: auto; bottom:0; background: rgba(150, 150, 150, .5); color: var(--bacg-background);}
.ba__popeye-style6 .ba__popeye::before{position: absolute; left: 0; top: 0; width:100%; height:100%; content: ''; background: var(--bacg-color); opacity:0; transition: all .3s;}
.ba__popeye-style6:hover .ba__popeye::before{opacity: .6; z-index: 9999;}