/***Alert box in top left of video***/
.vid-alert{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background: #00467f !important;
    padding:.5em 10px .5em 0;
    transition: all .3s ease-in-out;
    font-size: 18px;
    z-index:100;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 0;
    box-shadow: 1px -3px 7px rgba(0,0,0,0.25);
}
    .vid-alert a{
      color: white;
      text-decoration: none;
      font-weight: 600;
    }

    .vid-alert a:hover{
      text-decoration: underline;
    }

    .vid-alert .close{
      position: absolute;
      top:3px;
      right:5px;
    }
    .vid-alert:hover{
      opacity: 100%;
    }

    .vid-alert .icon{
      width: 12.5%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .vid-alert .icon div{
      width: 20px;
      height: 20px;
      border-radius: 100%;
      box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
      background:#e84c3d;
      animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    }

    @keyframes pulse {to {box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}
    .vid-alert .text{
      width:82.5%;
    }
 @media screen and (min-width: 768px) {
      .vid-alert{
        position: absolute;
        top:2.5%;
        left:2.5%;
        bottom:auto;
        width: 40%;
        background: #f6f6f7;
        padding:.5em 10px .5em 0; 
        border-radius: 5px;
        opacity: 100%;
        box-shadow: 1px 3px 7px rgba(0,0,0,0.25);
      }
}

@media screen and (min-width: 992px) {
      .vid-alert{
        width:20%;
      }
}