*{
    padding:0px;
    margin:0px;
    overflow-x:hidden;
    transition:all 0.3s;
}
body{background-color: darkgray;}

.navbar{
  background-image:
  linear-gradient(to bottom, #00000075,rgba(108, 49, 116, 0.441),#7c116c75),
  url('../imgs/back.gif');
   width:100%;
   padding:10px 10px 10px 10px;
   display:flex;
   align-items:center;
   justify-content: space-between;
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
.logo{
    margin-left:5%;
    width:115px;
    height:105px;
    color:white;
}
ul{
  display:flex;
  list-style: none;  

  flex-direction: row;
  margin-right:50px;
}
li{padding:10px;}
li a{
    color:white;
    text-decoration:none;
    font-size:20px;
    transition:all 0.3s;
   
}
.navbar a:hover{
    color:#218BCD;
    border:1px solid #218BCD;
    padding:6px;
}
#active{color:#218BCD}
.dropdown:hover{
    height:300px;
}
.dropdown-content a {
  color:white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index:100;
}
.dropdown-content{
    display:none;
    background-color:rgb(33,139,205);
    position:relative;
    width:90%;
    float:left;
    top:10%;
}
.dropdown-content a:hover{
  color:black;
  border:none;
  margin:none;
  padding:12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
  transition: all 0.2s;
}

div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: 10rem;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
    font-size: small;
  }
  .responsive {
    display:inline-block;
    padding: 0 6px;
    margin:5px;
    width: 20%;
    background-color: white;
    
  }
  .responsive .gallery img:hover{
    transform: scale(1.2);
  }
  #ti{
    color:white;
    background-color: #218BCD;
    padding:10px;
  }
  #playback{
    width:100%;
    height: 500px;
    object-fit:cover; 
    margin:0px;
  }
  
/*This is the footer section*/
.footer{
  background-image:
  linear-gradient(to bottom,#7c116c75, #00000075,rgba(108, 49, 116, 0.441)),
  url('../imgs/back.gif');
  width:100%;
  height:auto;
  margin-top:60px;
  color:white;
  display:flex;
  align-items:center;
  flex-direction:row;
  justify-content:center;
  padding-bottom:20px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
.footer a{
  color:white;
  text-decoration:none;
}
.tab{
  border:1px solid white;
  margin-top:30px;
}
.tab th{ 
  color:white;
  padding-top:10px;
}
.tab td{
  padding:20px;
}
.a2{
  margin:10px;
  padding:5px;
  color:white;
  font-size:30px;
  background-color:black;
  transition:all 0.2s;
  }
  .a2:hover{
  color:rgba(234,27,113,0.8);
  padding:5px;
  border:1px solid rgba(234,27,113,0.8); 
  transition:all 0.1s;
  }
.qr{
  width: 200px;
}
.container2{position:none;width:100%;}
.container2 td tr{
  background-color: #777;
  margin: 1%;
  padding:1%;
}
  
/* this is responsive for 900px */
@media only screen and (max-width:900px){
	.navbar{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo{
        left:none;
        margin:auto;
        margin-bottom:20px;
        text-align:center;
        padding:0px;
        width:120px;
        height:110px;
    }
    ul{margin:auto;
      flex-direction:column;
      text-align:center;
    }
    .responsive {
    width: 30%;
  }
  .footer{
    flex-direction:column;
}
#playback{
  height:500px;
}
}
/*this is responsive for 750px */
@media only screen and (max-width:750px){
  #playback{
    height:250px;
  }
}


/* this is responsive for 500px */
@media only screen and (max-width:500px){
    .responsive {
    width: 70%;
  }
  #playback{
    height:200px;
  }

  div.gallery img {
    height: 15rem;
  }
}