/* =========================
START INFO BOX
========================= */

.infoBox{

position:absolute;

/* BOTTOM TOUCH */

bottom:0;

/* THODA ANDAR */

right:-18px;




height:72px;

width:340px;




display:flex;

align-items:center;

justify-content:center;




overflow:hidden;




background:

linear-gradient(

135deg,

rgba(255,0,0,.96),

rgba(190,0,0,.92),

rgba(255,20,20,.96)

);




backdrop-filter:

blur(18px) saturate(180%);

-webkit-backdrop-filter:

blur(18px) saturate(180%);




border:

1px solid rgba(255,255,255,.14);




box-shadow:

0 8px 22px rgba(0,0,0,.28);




border-radius:0;




z-index:999;

}




/* GLASS SHINE */

.infoBox::after{

content:"";

position:absolute;

top:0;

left:-120%;




width:55%;

height:100%;




background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);




transform:

skewX(-25deg);




animation:

infoGlassMove 4s linear infinite;

}




.infoText{

position:relative;

z-index:2;




width:100%;

height:100%;




display:flex;

align-items:center;

justify-content:center;




font-size:26px;

font-weight:900;

color:white;




white-space:nowrap;




/* TEXT CUT FIX */

padding:

0 28px 6px 18px;




text-shadow:

2px 2px 8px rgba(0,0,0,.35);

}




/* LOCATION */

#newsLocation{

position:absolute;

animation:

showLocation 8s linear infinite;

}




/* REPORTER */

#newsReporter{

position:absolute;

animation:

showReporter 8s linear infinite;

}




@keyframes showLocation{

0%{

opacity:0;

transform:translateY(10px);

}




8%{

opacity:1;

transform:translateY(0);

}




45%{

opacity:1;

transform:translateY(0);

}




50%{

opacity:0;

transform:translateY(-10px);

}




100%{

opacity:0;

}

}




@keyframes showReporter{

0%{

opacity:0;

}




50%{

opacity:0;

transform:translateY(10px);

}




58%{

opacity:1;

transform:translateY(0);

}




95%{

opacity:1;

transform:translateY(0);

}




100%{

opacity:0;

transform:translateY(-10px);

}

}




@keyframes infoGlassMove{

0%{

left:-120%;

}




100%{

left:150%;

}

}

/* =========================
END INFO BOX
========================= */