@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

.dttv-banner{
    background-color: #2671FE;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 220px;
    width: 100%;
    position: relative;

    padding:10px 30px;
    justify-content: flex-end;
    height: 210px;
    margin: 20px 0;
}
.dttv-video iframe{
    width: 100%;
}
.dttvlogo{
    /* height: 45px; */
    margin-right: 20px;
    margin-top: 7px;

    height: auto;
}

.livebt{
    display:inline-block;
    border: none;
    border-radius: 5px;
    background-color: #FF5362;
    text-align: center;
    text-decoration: none;
    height: 32px;
    width: 113px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in .3s;

    margin-right: 120px;
}

.bttext a{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: white;
    transition: all ease-in .3s;
}
.livebt:hover, .livebt:focus{
    background-color: #fff;
}
.livebt:hover .bttext a, .livebt:focus .bttext a{
    color: #FF5362;
    text-decoration: none;
}
.slide-left {
    animation: 2s slide-left;
    width: 100%;
  }
  @keyframes slide-left {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
  .close-button{
    position: absolute;
    top: 15px;
    left: 25px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    transition: all ease-in-out .3s;
  }
.close-button:hover, .close-button:focus{
    color: #FF5362;
    cursor: pointer;
}
@media (max-width: 991px){
    .dttv-banner{
        height: 360px;
        flex-direction: column;
    }
    .dttvlogo {
        margin-right: 0px;
        }

        .livebt {
        margin-bottom: 20px;
        margin-right: unset;
        }
}