/*
|--------------------------------------------------------------------------
| NOTICE BAR
|--------------------------------------------------------------------------
*/

.promo-notice-bar{

    width:100%;

    overflow:hidden;

    position:relative;

    line-height:1;

    padding:10px 0;

    white-space:nowrap;

}

.promo-notice-track{

    display:inline-flex;

    align-items:center;

    white-space:nowrap;

    animation:promoNoticeScroll 30s linear infinite;

    will-change:transform;

}

.promo-notice-track span{

    display:inline-block;

    margin-right:120px;

    font-size:16px;

    font-weight:500;

    letter-spacing:.2px;

}

/*
|--------------------------------------------------------------------------
| NOTICE ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes promoNoticeScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/*
|--------------------------------------------------------------------------
| POPUP
|--------------------------------------------------------------------------
*/

.promo-popup{

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    transition:.25s ease;

}

.promo-popup.active{

    display:flex;

    opacity:1;

    visibility:visible;

}

/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.promo-popup-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.52);

    backdrop-filter:blur(2px);

}
/*
|--------------------------------------------------------------------------
| SUNSHINE EFFECT
|--------------------------------------------------------------------------
*/

.promo-popup-inner{
    overflow:hidden;
}

.promo-popup-inner::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-120%;

    width:60%;

    height:200%;

    z-index:3;

    pointer-events:none;

    background:linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,.08) 35%,
        rgba(255,255,255,.75) 50%,
        rgba(255,255,255,.08) 65%,
        transparent 100%
    );

    transform:rotate(15deg);

    animation:promoSunshine 4s ease-in-out infinite;

}

@keyframes promoSunshine{

    0%{
        left:-120%;
    }

    40%{
        left:130%;
    }

    100%{
        left:130%;
    }

}
/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.promo-popup-inner{

    position:relative;

    z-index:2;

    max-width:1200px;

    width:100%;

    animation:promoPopupShow .25s ease;

}

.promo-popup-inner img{

    width:100%;

    height:auto;

    display:block;

    border-radius:4px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

}

/*
|--------------------------------------------------------------------------
| CLOSE
|--------------------------------------------------------------------------
*/

.promo-popup-close{

    position:absolute;

    top:10px;
    right:10px;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:red;
    color:#fff;

    z-index:1000;
}

.promo-popup-close:hover{

    transform:scale(1.08);

}

/*
|--------------------------------------------------------------------------
| ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes promoPopupShow{

    from{

        opacity:0;
        transform:scale(.96);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .promo-notice-track span{

        font-size:14px;

        margin-right:80px;

    }

    .promo-popup{

        padding:12px;

    }

    .promo-popup-close{

        top:-10px;
        right:-10px;

        width:36px;
        height:36px;

        font-size:20px;
        background:red;
;


    }

}