html {
  font-size: 10px;
  font-family: "Fira Sans";
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: white;
}

a {
  outline: 0;
}

a:hover, a:active, a:focus {
  outline: 0;
}

smart-button {
  color: white;
}

#main-section {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}

#main-section > section[role='region'] {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#main-section > section[role='region'] > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#overlay {
  background-color: #000000;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s linear;
}

#overlay.visible {
  opacity: 1;
}

#channel-container {
  width: 25rem;
  height: 25rem;
  margin-left: 6rem;
  margin-top: 4rem;
  position: relative;
  overflow: visible;
  z-index: 2;
}

#channel-panel {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  text-align: center;
  transition: opacity 0.5s;
  outline: none;
}

#channel-panel.hidden {
  opacity: 0;
}

#channel-panel.flash {
  animation: flash 0.1s 1 linear;
}

@keyframes flash {
  0%    {visibility: hidden;}
  100%  {visibility: visible;}
}

#channel-number {
  width: 100%;
  height: 12.4rem;
  top: 4.2rem;
  font-size: 11rem;
  font-style : italic;
  font-weight: 100;
  position: absolute;
  color: white;
}

#channel-title {
  width: 100%;
  height: 3.8rem;
  font-size: 2.8rem;
  font-style : italic;
  font-weight: 100;
  color: white;
  position: absolute;
  bottom: 4.8rem;
}

#button-group-panel {
  position: absolute;
  left: 4rem;
  bottom: 6rem;
}

#button-group-panel.hidden {
  opacity: 0;
  transition: opacity 0.5s;
}

#button-group-panel > * {
  margin-left: 2.2rem;
  position: relative;
}

#button-group-panel > *:first-child {
  margin-left: 0;
}

.loading-circle {
  top: -0.6rem;
  left: -0.6rem;
  margin-left: 13.1rem;
  position:absolute;
  width: 13.1rem;
  height: 26.2rem;
  overflow:hidden;
  border-radius: 0 13.1rem 13.1rem 0;
  animation:loading-circle-mask 1s 1 cubic-bezier(0.25, 0, 0.5, 1.0) forwards;
  transition: opacity 0.5s linear;
}

.loading-circle.hidden {
  opacity: 0;
}

.loading-circle:before,
.loading-circle:after{
  content:"";
  box-sizing:border-box;
  position:absolute;
  top: 0;
  right: 0;
  width: 26.2rem;
  height: 13.1rem;
  background: transparent;
  border-style: solid;
  border-color: #e72798;
  border-width: 0.6rem 0.6rem 0;
  border-radius: 13.1rem 13.1rem 0 0;
  transform-origin: 13.1rem 13.1rem;
}

.loading-circle:before{
  z-index: 1;
  animation: loading-circle-rotate 1s 1 cubic-bezier(0.25, 0, 0.5, 1.0) forwards;
  transform: rotate(-90deg);
}

.loading-circle:after{
  opacity: 0;
  z-index: 2;
  transform: rotate(90deg);
  animation: loading-circle-static 1s 1 cubic-bezier(0.25, 0, 0.5, 1.0) forwards;
  transition: opacity 0.5s linear;
}

.loading-circle.hidden:after{
  opacity: 0;
}

@keyframes loading-circle-rotate{
  0%{
    transform: rotate(-90deg);
  }
  100%{
    transform: rotate(270deg);
  }
}

@keyframes loading-circle-static{
  0%{
    opacity: 0;
  }
  40.49%{
    opacity: 0;
  }
  40.5%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes loading-circle-mask{
  0%{
    margin-left: 13.1rem;
    width: 13.1rem;
    border-radius:0 13.1rem 13.1rem 0;
  }
  40.49%{
    margin-left: 13.1rem;
    width: 13.1rem;
    border-radius: 0 13.1rem 13.1rem 0;
  }
  40.5%{
    margin-left: 0;
    width: 26.2rem;
    border-radius:0;
  }
  100%{
    margin-left: 0;
    width: 26.2rem;
    border-radius: 0;
  }
}