html{
    background: url(img/bgy.jpg) #00333C repeat;
}

body{
    background: url(img/bg01.png)  top left no-repeat;
    color: #3c575b;
    display: flex;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
}
#mainbody{
    width: 100%;
}
.mainbodytxt {
   color: #df4c83;
}
.mainbodytxt a{
   color: #df4c83;
   text-decoration: underline;
}
h2{
   color: #2d6d7c;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
#list1{
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    text-align: center !important;
    width: 100%;
}
#list1 .col-md-4{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    color: #333333;
}
#list1 .card-title{
   color: #d44239;
   font-size: 1.5rem;
   font-weight: bold;
} 
#list1 .dscp{
   color: #2f6269;
   font-size: 1.2rem;
   font-weight: bold;
} 
#list1 .date{
   color: #77c8d6;
   font-size: 1.2rem;
   font-weight: bold;
} 
#listtime {
   font-size: 1.2rem;
   font-weight: bold;
   color: #77c8d6;
}
#listtime a{
   font-size: 1.2rem;
   font-weight: bold;
   color: #77c8d6;
}
#livetitle{
color: #77c8d6;
   font-size: 1.8rem;
   font-weight: bold;
}
#livetitle a{
   color: #77c8d6;
}
#calendar {
   color: #df4c83;
}
.nolist{
   font-size: 1.5rem;
   color: #77c8d6;
}
.nolist a{
   font-size: 1.5rem;
   font-weight: bold;
   color: #77c8d6;
}
/* #logo{
   position: absolute;
   top:0px;
    right:0px;
} */
footer{
background: url(img/bg03.png) no-repeat;
position:fixed;
bottom:0px;
right:0px;
width: 600px;
height: 500px;
z-index: -99;
}
@media screen and (max-width: 768px) {
    footer{
    background: none;
    }   
    iframe{
        height: 300px;
    } 
    html{
      background: none #00333C;
   }
   body{
      background: none;
      }
}
#logo{
   margin-top: 3rem;
}