/*   BANNER   */

.banner-container{
  position: relative;
  overflow: hidden;
}

.banner{
    width:100%;
    background:#f9f5f5;
    margin-bottom:30px;
    text-decoration: none !important;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
  }
  .banner-content{
    width:400px;
    max-width:90%;
    margin:0 auto;
    padding:16px 0;
    text-align: center;
  }
  .banner-text{
    display:grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: auto auto;
    gap:8px;
    font-size:12px;
    color:#323537;
  }

  .banner.active{
    animation: highlightFade 3s ease-out forwards;
  }

  /* @keyframes highlightFade {
    0%   { box-shadow: 0 0px 10px 1px #c7f0e8;}
    30%  { box-shadow: 0 0px 10px 1px #b5d4f4; }
    60%  { box-shadow: 0 0px 10px 1px #f4c0d1; }
    100% { box-shadow: 0 0px 0px 0px transparent;}
  } */
  @keyframes highlightFade {
    0%   { border-bottom: 2px solid #c7f0e8;}
    30%  { border-bottom: 2px solid #b5d4f4; }
    60%  { border-bottom: 2px solid #f4c0d1; }
    100% { border-bottom: 2px solid transparent;}
  }
  /* @keyframes highlightFade {
    0%   { background-color: #c7f0e8; box-shadow: 0 0 0 4px #5dcaa5; color: #085041; }
    30%  { background-color: #b5d4f4; box-shadow: 0 0 0 4px #378add; color: #0c447c; }
    60%  { background-color: #f4c0d1; box-shadow: 0 0 0 4px #d4537e; color: #72243e; }
    100% { background-color: transparent; box-shadow: 0 0 0 0px transparent; color: inherit; }
  } */