.stories-area{ display: flex; align-items: centere; justify-content: center; gap: 15px; padding: 30px 100px; background-color: #f0f0f0; border: 1px solid #ddd;}
.stories-area > div{ display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; cursor: pointer; border: 2px solid #8d1692; width: 70px; height: 70px; border-radius: 50%; background-color: #ddd;}

.modalx{ opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 99; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center;}
.modalx .c-modalx-container{ opacity: 0; transform: translateY(100px); transition: all .2s ease; display: flex; align-items: center; justify-content: center; width: 400px; height: 80vh; background-color: white;}
.modalx.active{ opacity: 1; pointer-events: all;}
.modalx.active .c-modalx-container{ opacity: 1; transform: translateY(0);}
.modalx .c-modalx-container .stories{ gap: 25px; position: relative; height: 100%; width: 100%;}
.modalx .c-modalx-container .stories > div{ position: relative; user-select: none; transition: all .5s ease; position: absolute; left: 0; top: 0; width: 400px; height: 600px; display: flex; align-items: center; justify-content: center;}
.modalx .c-modalx-container .stories > div.before{ pointer-events: none; transform: rotate(-20deg) translateX(-440px) translateY(-70px); transform-origin: left bottom;}
.modalx .c-modalx-container .stories > div.after{ pointer-events: none; transform: rotate(20deg) translateX(440px) translateY(-70px); transform-origin: right bottom;}
/* .modalx .c-modalx-container .stories > div.before{ transform: rotate(-15deg) translateX(-396px) translateY(-18px); transform-origin: left bottom;}
.modalx .c-modalx-container .stories > div.after{ transform: rotate(15deg) translateX(396px) translateY(-18px); transform-origin: right bottom;} */
.modalx .c-modalx-container .stories > div.active{ }

/* .modalx .c-modalx-container .stories > div.go{ transform: rotate(-43deg) translateX(-218px) translateY(-197px); transform-origin: left bottom;} */
.modalx .c-modalx-container .stories > div.go{ transform: rotate(-15deg) translateX(-396px) translateY(-18px); transform-origin: left bottom;}
.modalx .c-modalx-container .stories > div.come{ transform: rotate(0) translateX(0) translateY(0); transform-origin: right bottom;}
.modalx .c-modalx-container .stories > div .story-slider{ height: 100%; width: 100%;}
.modalx .c-modalx-container .stories > div .story-slider .item{ position: relative; width: 100%; max-width: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
/* .owl-carousel .owl-stage-outer{ height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;} */
.modalx .c-modalx-container .stories > div .story-slider .item img{ width: 100%; height: 100%; object-fit: cover;}
.modalx .c-modalx-container .stories > div .story-slider .item > div{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;}
.modalx .c-modalx-container .stories > div .story-slider .item > div b{ font-size: 80px; font-weight: 700;}
.modalx .c-modalx-container .stories > div .story-slider .item > div span{ font-size: 40px; font-weight: 600;}
.modalx .c-modalx-container .stories > div .story-slider .item > div :where(b, span){ background-color: white; padding: 10px 40px 15px; border-radius: 10px; box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .4);}
.modalx .c-modalx-container .stories > div .story-slider .item > a{ position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); text-decoration: none; cursor: pointer; display: flex; padding: 13px 20px; font-size: 17px; font-weight: 600; border-radius: 3px; border: 1px solid black; background-color: black; color: white;}
.modalx .c-modalx-container .stories > div .story-slider .item > a:hover{ background-color: white; color: black;}

.modalx .c-modalx-container .stories > div .bars{ z-index: 10; position: absolute; top: 0; left: 0; width: 100%; padding: 10px; display: flex; gap: 5px;}
.modalx .c-modalx-container .stories > div .bars > div{ position: relative; overflow: hidden; width: 100%; height: 2px; border-radius: 3px; background-color: black;}
.modalx .c-modalx-container .stories > div .bars > div::before{ content: ''; position: absolute; left: 0; display: inline-block; width: 0%; height: 100%; background-color: white;}
.modalx .c-modalx-container .stories > div .bars > div.reset::before{ width: 0% !important; transition: none !important;}
.modalx .c-modalx-container .stories > div .bars > div.active::before{ transition: all 8s linear; width: 100%;}
.modalx .c-modalx-container .stories > div .bars > div.seen::before{ transition: none; width: 100%;}

.owl-theme .owl-dots, .owl-theme .owl-nav{ display: none;}
.owl-item:not(.active){ pointer-events: none;}
/* .owl-carousel .owl-stage-outer{ overflow: unset !important;} */

#story-modal .c-modalx-container{ height: 100vh; max-height: 711px;}

/* .owl-stage { transition-duration: 3000ms !important;} */

@media screen and (max-width: 668px) {
    /* #story-modal .c-modalx-container{ max-height: unset; height: calv(var(--vh, 1vh) * 100);} */
}