@keyframes zuckSlideTime{
    0%{
        max-width : 0;
    }
    100%{
        max-width : 100%;
    }
}
@keyframes zuckLoading{
    0%{
        transform : rotate(0deg);
    }
    100%{
        transform : rotate(360deg);
    }
}
#zuck-modal{
    outline     : 0 !important;
    overflow    : hidden;
    position    : fixed;
    top         : 0;
    left        : 0;
    width       : 100vw;
    height      : 100%;
    background  : rgba(0, 0, 0, 0.75);
    z-index     : 100000;
    font-size   : 14px;
    font-family : inherit;
}
#zuck-modal-content,
#zuck-modal-content .story-viewer,
#zuck-modal-content .story-viewer > .slides,
#zuck-modal-content .story-viewer > .slides > *{
    width    : 100vw;
    height   : 100%;
    top      : 0;
    bottom   : 0;
    position : absolute;
    overflow : hidden;
}
#zuck-modal *{
    user-select : none;
    outline     : 0;
}
#zuck-modal.with-effects{
    transform        : scale(0.01);
    transform-origin : top left;
    transition       : 0.25s;
}
#zuck-modal.with-effects.animated{
    transform     : scale(1);
    border-radius : 0;
    margin-top    : 0 !important;
    margin-left   : 0 !important;
}
#zuck-modal.with-effects.closed{
    transform : translateY(100%);
}
#zuck-modal .slider{
    width    : 300vw;
    height   : 100%;
    top      : 0;
    bottom   : 0;
    left     : -100vw;
    position : absolute;
}
#zuck-modal .slider > *{
    width    : 100vw;
    height   : 100%;
    top      : 0;
    bottom   : 0;
    position : absolute;
}
#zuck-modal .slider > .previous{
    left : 0;
}
#zuck-modal .slider > .viewing{
    left : 100vw;
}
#zuck-modal .slider > .next{
    left : 200vw;
}
#zuck-modal .slider.animated{
    -webkit-transition : -webkit-transform 0.25s linear;
    transition         : -webkit-transform 0.25s linear;
    transition         : transform 0.25s linear;
    transition         : transform 0.25s linear, -webkit-transform 0.25s linear;
}
#zuck-modal.with-cube #zuck-modal-content{
    perspective        : 1000vw;
    transform          : scale(0.95);
    perspective-origin : 50% 50%;
    overflow           : visible;
    transition         : 0.3s;
}
#zuck-modal.with-cube .slider{
    transform-style : preserve-3d;
    transform       : rotateY(0deg);
}
#zuck-modal.with-cube .slider > .previous{
    backface-visibility : hidden;
    left                : 100vw;
    transform           : rotateY(270deg) translateX(-50%);
    transform-origin    : center left;
}
#zuck-modal.with-cube .slider > .viewing{
    backface-visibility : hidden;
    left                : 100vw;
    transform           : translateZ(50vw);
}
#zuck-modal.with-cube .slider > .next{
    backface-visibility : hidden;
    left                : 100vw;
    transform           : rotateY(-270deg) translateX(50%);
    transform-origin    : top right;
}
#zuck-modal-content .story-viewer.paused.longPress .head,
#zuck-modal-content .story-viewer.paused.longPress .slides-pointers,
#zuck-modal-content .story-viewer.paused.longPress .tip{
    opacity : 0;
}
#zuck-modal-content .story-viewer.viewing:not(.paused):not(.stopped) .slides-pointers > * > .active > b{
    -webkit-animation-play-state : running;
    animation-play-state         : running;
}
#zuck-modal-content .story-viewer.next{
    z-index : 10;
}
#zuck-modal-content .story-viewer.viewing{
    z-index : 5;
}
#zuck-modal-content .story-viewer.previous{
    z-index : 0;
}
#zuck-modal-content .story-viewer.muted .tip.muted,
#zuck-modal-content .story-viewer.loading .head .loading{
    display : block;
}
#zuck-modal-content .story-viewer.loading .head .right .time,
#zuck-modal-content .story-viewer.loading .head .right .close{

}
#zuck-modal-content .story-viewer .slides-pagination span{
    position    : absolute;
    top         : 50vh;
    font-size   : 48px;
    color       : #fff;
    line-height : 48px;
    width       : 48px;
    margin      : 6px;
    transform   : translateY(-50%);
    z-index     : 1;
    text-align  : center;
}
#zuck-modal-content .story-viewer .slides-pagination .previous{
    left : 0;
}
#zuck-modal-content .story-viewer .slides-pagination .next{
    right : 0;
}
#zuck-modal-content .story-viewer .slides-pointers{
    display         : table;
    table-layout    : fixed;
    border-spacing  : 6px;
    border-collapse : separate;
    position        : absolute;
    width           : 100vh;
    top             : 0;
    left            : calc(50vw - 50vh);
    right           : calc(50vw - 50vh);
    z-index         : 100020;
}
#zuck-modal-content .story-viewer .slides-pointers > *{
    display : table-row;
}
#zuck-modal-content .story-viewer .slides-pointers > * > *{
    display       : table-cell;
    background    : rgba(255, 255, 255, 0.5);
    border-radius : 2px;
}
#zuck-modal-content .story-viewer .slides-pointers > * > .seen{
    background : #fff;
}
#zuck-modal-content .story-viewer .slides-pointers > * > * > b{
    background                   : #fff;
    width                        : auto;
    max-width                    : 0;
    height                       : 2px;
    display                      : block;
    -webkit-animation-fill-mode  : forwards;
    animation-fill-mode          : forwards;
    -webkit-animation-play-state : paused;
    animation-play-state         : paused;
    border-radius                : 2px;
}
#zuck-modal-content .story-viewer .slides-pointers > * > .active > b{
    -webkit-animation-name            : zuckSlideTime;
    animation-name                    : zuckSlideTime;
    -webkit-animation-timing-function : linear;
    animation-timing-function         : linear;
}
#zuck-modal-content .story-viewer .head{
    position    : absolute;
    height      : 56px;
    left        : 0;
    right       : 0;
    line-height : 56px;
    z-index     : 100010;
    color       : #fff;
    font-size   : 14px;
    text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.35), 1px 0 1px rgba(0, 0, 0, 0.35);
    padding     : 6px 12px;
}
#zuck-modal-content .story-viewer .head .item-preview{
    overflow            : hidden;
    vertical-align      : top;
    background-size     : cover;
    width               : 42px;
    height              : 42px;
    display             : inline-block;
    margin-right        : 9px;
    border-radius       : 50%;
    vertical-align      : middle;
    background-repeat   : no-repeat;
    background-position : center;
}
#zuck-modal-content .story-viewer .head .item-preview img{
    display             : block;
    box-sizing          : border-box;
    height              : 100%;
    width               : 100%;
    background-size     : cover;
    background-position : center;
    object-fit          : cover;
}
#zuck-modal-content .story-viewer .head .time{
    opacity     : 0.75;
    font-weight : 500;
    font-size   : 13px;
}
#zuck-modal-content .story-viewer .head .left{
    line-height : 1 !important;
    display     : inline-block;
    margin      : 6px 0;
}
#zuck-modal-content .story-viewer .head .left .info{
    display        : inline-block;
    max-width      : 30vw;
    vertical-align : middle;
}
#zuck-modal-content .story-viewer .head .left .info > *{
    width       : 100%;
    display     : inline-block;
    line-height : 21px;
}
#zuck-modal-content .story-viewer .head .left .info .name{
    font-weight : 500;
}
#zuck-modal-content .story-viewer .head .right{
    float : right;
}
#zuck-modal-content .story-viewer .head .right .close,
#zuck-modal-content .story-viewer .head .back{
    font-size   : 30px;
    width       : 48px;
    height      : 48px;
    line-height : 48px;
    cursor      : pointer;
    text-align  : center;
}
#zuck-modal-content .story-viewer .head .left .back{
    display : none;
    width   : 24px;
    margin  : -9px -6px 0 -6px;
}
#zuck-modal-content .story-viewer .head .right .time{
    display : none;
}
#zuck-modal-content .story-viewer .head .loading{
    display           : none;
    border-radius     : 50%;
    width             : 30px;
    height            : 30px;
    margin            : 9px 0;
    border            : 4px solid rgba(255, 255, 255, 0.2);
    box-sizing        : border-box;
    border-top-color  : #fff;
    -webkit-animation : zuckLoading 1s infinite linear;
    animation         : zuckLoading 1s infinite linear;
}
#zuck-modal-content .story-viewer .head,
#zuck-modal-content .story-viewer .slides-pointers,
#zuck-modal-content .story-viewer .tip{
    -webkit-transition : opacity 0.5s;
    transition         : opacity 0.5s;
}
#zuck-modal-content .story-viewer .slides .item{
    display    : none;
    overflow   : hidden;
    background : #000;
}
#zuck-modal-content .story-viewer .slides .item:before{
    z-index    : 4;
    background : transparent;
    content    : '';
    position   : absolute;
    left       : 0;
    right      : 0;
    bottom     : 0;
    top        : 0;
}
#zuck-modal-content .story-viewer .slides .item > .media{
    height            : 100%;
    position          : absolute;
    left              : 50%;
    -webkit-transform : translateX(-50%);
    transform         : translateX(-50%);
    margin            : auto;
}
#zuck-modal-content .story-viewer .slides .item.active,
#zuck-modal-content .story-viewer .slides .item.active .tip.link{
    display : block;
}
#zuck-modal-content .story-viewer .tip .title a{
    color           : #fff;
    text-align      : center;
    font-size       : 18px;
    font-weight     : 600;
    text-decoration : none;

}

#zuck-modal-content .story-viewer .tip .category{
    margin-bottom : 20px;
    display: none;

}
#zuck-modal-content .story-viewer .tip .title{
    margin : 50px;
}
#zuck-modal-content .story-viewer .tip{

    text-decoration  : none;
    display          : none;
    height           : 26%;
    background-image : -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(transparent));
    background-image : -webkit-linear-gradient(transparent, #000000);
    background-image : -moz-linear-gradient(transparent, #000000), -moz-linear-gradient(transparent, #000000);
    background-image : -o-linear-gradient(transparent, #000000), -o-linear-gradient(transparent, #000000);
    background-image : linear-gradient(transparent, #000000), linear-gradient(transparent, #000000);
    font-size        : 16px;
    position         : absolute;
    bottom           : 0;
    left             : 50%;
    transform        : translateX(-50%);
    z-index          : 1000;
    width            : 100%;
    color            : #fff;
    text-align       : center;
    padding          : 12px 24px;
}
#zuck-modal.rtl{
    direction : rtl;
    left      : auto;
    right     : 0;
}
#zuck-modal.rtl.with-effects{
    transform-origin : top right;
}
#zuck-modal.rtl.with-effects.animated{
    margin-left  : auto !important;
    margin-right : 0 !important;
}
#zuck-modal.rtl .slider{
    left  : auto;
    right : -100vw;
}
#zuck-modal.rtl .slider > .previous{
    left      : auto;
    right     : 0;
    transform : rotateY(-270deg) translateX(50%);
}
#zuck-modal.rtl .slider > .viewing{
    left  : auto;
    right : 100vw;
}
#zuck-modal.rtl .slider > .next{
    left  : auto;
    right : 200vw;
}
#zuck-modal.rtl.with-cube .slider > .previous{
    left             : auto;
    right            : 100vw;
    transform-origin : center right;
}
#zuck-modal.rtl.with-cube .slider > .viewing{
    left      : auto;
    right     : 100vw;
    transform : translateZ(50vw);
}
#zuck-modal.rtl.with-cube .slider > .next{
    left             : auto;
    right            : 100vw;
    transform-origin : top left;
    transform        : rotateY(270deg) translateX(-50%);
}
#zuck-modal.rtl #zuck-modal-content .story-viewer .slides-pagination .previous{
    left  : auto;
    right : 0;
}
#zuck-modal.rtl #zuck-modal-content .story-viewer .slides-pagination .next{
    right : auto;
    left  : 0;
}
#zuck-modal.rtl #zuck-modal-content .story-viewer .head .item-preview{
    margin-right : auto;
    margin-left  : 9px;
}
#zuck-modal.rtl #zuck-modal-content .story-viewer .head .right{
    float : left;
}
#zuck-modal.rtl #zuck-modal-content .story-viewer .tip{
    left      : auto;
    right     : 50%;
    transform : translateX(50%);
}
@media (max-width : 1024px){
    #zuck-modal-content .story-viewer .head{
        top : 3px;
    }
    #zuck-modal-content .story-viewer .head .loading{
        width  : 24px;
        height : 24px;
        margin : 6px 0;
    }
    #zuck-modal-content .story-viewer .head .item-preview{
        width        : 30px;
        height       : 30px;
        margin-right : 9px;
    }
    #zuck-modal-content .story-viewer .head .left{
        font-size : 15px;
        margin    : 15px 0;
    }
    #zuck-modal-content .story-viewer .head .left > div{
        line-height : 30px;
    }
    #zuck-modal-content .story-viewer .head .right .time{
        display     : block;
        white-space : nowrap;
        font-size   : 15px;
        margin      : 15px 0;
        line-height : 30px;
    }
    #zuck-modal-content .story-viewer .head .left > .back{
        display        : none;
        background     : transparent;
        z-index        : 20;
        visibility     : visible;
        position       : absolute;
        height         : 42px;
        width          : 24px;
        line-height    : 36px;
        text-align     : left;
        vertical-align : top;
        text-shadow    : none;
    }
    #zuck-modal-content .story-viewer.with-back-button .head .left > .back{
        display : block;
    }
    #zuck-modal-content .story-viewer.with-back-button .head .left .item-preview{
        margin-left : 18px;
    }
    #zuck-modal-content .story-viewer .slides-pointers{
        width : 100vw;
        left  : 0;
        right : 0;
    }
    #zuck-modal-content .story-viewer .tip{
        font-size : 14px;
        padding   : 6px 12px;
    }
    #zuck-modal-content .story-viewer .head .left .time,
    #zuck-modal-content .story-viewer .head .right .close{

color: #fafafa;
    }
    #zuck-modal.rtl #zuck-modal-content .story-viewer .head .item-preview{
        margin-right : auto;
        margin-left  : 9px;
    }
    #zuck-modal.rtl #zuck-modal-content .story-viewer .head .left > .back{
        text-align : right;
    }
    #zuck-modal.rtl #zuck-modal-content .story-viewer.with-back-button .head .left .item-preview{
        margin-left  : auto;
        margin-right : 18px;
    }
}
.stories.carousel{
    white-space                : nowrap;
    overflow                   : hidden;
    -webkit-overflow-scrolling : touch;
    overflow-scrolling         : touch;
}
.stories.carousel::-webkit-scrollbar{
    width      : 0px;
    background : transparent;
}
.stories.carousel .story{
    display        : inline-block;
    width          : 18vw;
    max-width      : 88px;
    margin         : 0 2.5px;
    vertical-align : top;
}
.stories.carousel .story:first-child{
    margin-left : 0;
}
.stories.carousel .story:last-child{
    margin-right : 0;
}
.stories.carousel .story > .item-link{
    text-align : center;
    display    : block;
}
.stories.carousel .story > .item-link:active > .item-preview{
    transform : scale(0.9);
}
.stories.carousel .story > .item-link > .item-preview{
    display    : block;
    box-sizing : border-box;
    font-size  : 0;
    max-height : 90px;
    height     : 18vw;
    overflow   : hidden;
    transition : transform 0.2s;
}
.stories.carousel .story > .item-link > .item-preview img{
    display             : block;
    box-sizing          : border-box;
    height              : 100%;
    width               : 100%;
    background-size     : cover;
    background-position : center;
    object-fit          : cover;
}
.stories.carousel .story > .item-link > .info{
    display       : inline-block;
    margin-top    : 0.5em;
    line-height   : 1.2em;
    width         : 100%;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.stories.carousel .story > .item-link > .info .name{
    font-weight : 700;
    font-size   : 12px;
}
.stories.carousel .story > .item-link > .info .time{
    display : none;
}
.stories.carousel .story > .items{
    display : none;
}
.stories.list{
    white-space : nowrap;
    overflow    : auto;
}
.stories.list .story{
    display        : block;
    width          : auto;
    margin         : 6px;
    padding-bottom : 6px;
}
.stories.list .story > .item-link{
    text-align : left;
    display    : block;
}
.stories.list .story > .item-link > .item-preview{
    height         : 42px;
    width          : 42px;
    max-width      : 42px;
    margin-right   : 12px;
    vertical-align : top;
    display        : inline-block;
    box-sizing     : border-box;
    font-size      : 0;
    overflow       : hidden;
}
.stories.list .story > .item-link > .item-preview img{
    display             : block;
    box-sizing          : border-box;
    height              : 100%;
    width               : 100%;
    background-size     : cover;
    background-position : center;
}
.stories.list .story > .item-link > .info{
    display        : inline-block;
    line-height    : 1.6em;
    overflow       : hidden;
    text-overflow  : ellipsis;
    vertical-align : top;
}
.stories.list .story > .item-link > .info .name{
    font-weight : 500;
    display     : block;
}
.stories.list .story > .item-link > .info .time{
    display : inline-block;
}
.stories.list .story > .items{
    display : none;
}
.stories.rtl{
    direction : rtl;
}
.stories.rtl.carousel .story:first-child{
    margin-left  : auto;
    margin-right : 0;
}
.stories.rtl.carousel .story:last-child{
    margin-right : auto;
    margin-left  : 0;
}
.stories.rtl.list .story > .item-link{
    text-align : right;
}
.stories.rtl.list .story > .item-link > .item-preview{
    margin-right : auto;
    margin-left  : 12px;
}
/*
    zuck.js
    https://github.com/ramon82/zuck.js
    MIT License
*/