@charset "utf-8";
/* CSS Document */

/* Set a style for the submit button */
.btn {
  background-color: #000;
  color: #fff;
  padding: 12px 0px;
  border: none;
  cursor: pointer;
  max-width: 500px;
  width: 95%;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Alfa Slab One', cursive;
  font-size: 16px;
}

.DBChannelsbtn {
  background-color: #000;
  color: #fff;
  padding: 6px 0px;
  border: none;
  cursor: pointer;
  max-width: 500px;
  width: 95%;
  margin-top: 0px;
  margin-bottom: 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Alfa Slab One', cursive;
  font-size: 16px
}
.btn:hover {
  background-color: #FFFC00;
  border: 5px solid #000;
  padding: 7px 0;
  color: #000;
}

.DBChannelsbtn:hover {
  background-color: #FF0000;
  border: 5px solid #000;
  padding: 1px 0;
  color: #000;
}

.btn:focus {outline: none;}
.btn::-ms-clear {display: none;}

/*Round Buttons*/
.round-button a{
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: 40px;
  height: 40px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.round-button a::before{
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.rEPGB::before{
  background: linear-gradient(45deg,#333,#000);
}

.round-button a:hover::before{
  transform: scale(0);
}

.round-button a i{
  transition: 0.3s ease-in;
}

.round-button a:hover i{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
  text-shadow: 2px 2px 20px #999;
}
.rEPGB:hover i{
  background: linear-gradient(45deg,#333,#000);
}
/*Round Buttons*/

.NextProgrammeIcon{
  position:fixed;
  top: 200px;
  right: 25px;
  background:#000;
  color:#FFF;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.NextProgrammeIcon:hover{
  cursor: pointer;
  background: #0089D0;
}

.FirstProgrammeIcon{
  position:fixed;
  top: 150px;
  right: 25px;
  background:#000;
  color:#FFF;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.FirstProgrammeIcon:hover{
  cursor: pointer;
  background: #0089D0;
}