/* ==============================
   MESSAGE BASE
================================ */

.liorMessage{
    width:100%;
    text-align:center;
    padding:18px;
    font-weight:600;
    font-size:15px;
    transition:all .3s ease;
}

/* ===== Typing ===== */

.liorMessage.typing .text{
    transition:opacity .3s ease;
}

/* ===== Slide ===== */

.liorMessage.slide .slideText{
    transition:opacity .4s ease;
}

/* ===============================
   STYLE 1 – TICKER
================================= */
.liorMessage.ticker{
    background:#111;
    color:#fff;
    padding:12px 0;
}

.liorMessage.ticker .inner{
    display:inline-block;
    white-space:nowrap;
    animation: liorTicker 18s linear infinite;
}

@keyframes liorTicker{
    0%{ transform:translateX(100%); }
    100%{ transform:translateX(-100%); }
}

/* ===============================
   STYLE 2 – FADE
================================= */
.liorMessage.fade{
    background:#e63946;
    color:#fff;
    padding:18px;
    animation: liorFade 4s ease-in-out infinite;
}

@keyframes liorFade{
    0%{ opacity:0.5; }
    50%{ opacity:1; }
    100%{ opacity:0.5; }
}

/* ===============================
   STYLE 3 – SLIDE UP MODERN
================================= */
.liorMessage.slide{
    background:linear-gradient(135deg,#111,#333);
    color:#fff;
    padding:20px;
    transform:translateY(40px);
    opacity:0;
    animation: liorSlideUp 1s ease forwards;
}

@keyframes liorSlideUp{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* ===============================
   STYLE 4 – TYPING EFFECT
================================= */
.liorMessage.typing{
    background:#000;
    color:#00ff88;
    padding:18px;
}

.liorMessage.typing .inner{
    border-right:2px solid #00ff88;
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
    animation: liorTyping 4s steps(40,end), blink 1s infinite;
}

@keyframes liorTyping{
    from{ width:0 }
    to{ width:100% }
}

@keyframes blink{
    50%{ border-color:transparent }
}

/* ===============================
   STYLE 5 – ROTATOR
================================= */
.liorMessage.rotator{
    background:#222;
    color:#fff;
    padding:18px;
}

.liorMessage.rotator .item{
    display:none;
}

.liorMessage.rotator .item.active{
    display:block;
    animation: liorFadeIn .6s ease;
}

@keyframes liorFadeIn{
    from{ opacity:0 }
    to{ opacity:1 }
}