.loading {
  text-align: center;
}

.loading > div {
  display: inline-block;
  border-radius: 50%;
  background: #f0f0f0;
}

#dot1 {
  animation: loading 1.5s ease-in-out 0s infinite alternate;
  -webkit-animation: loading 1.5s ease-in-out 0s infinite alternate;
}

#dot2 {
  animation: loading 1.5s ease-in-out 0.4s infinite alternate;
  -webkit-animation: loading 1.5s ease-in-out 0.4s infinite alternate;
}

#dot3 {
  animation: loading 1.5s ease-in-out 0.8s infinite alternate;
  -webkit-animation: loading 1.5s ease-in-out 0.8s infinite alternate;
}

.loaded {
  text-align: center;
}

.loaded > p {
  animation: jsloaded 1s ease-in-out forwards;
  -webkit-animation: jsloaded 1s ease-in-out forwards;
}

.loaded > div {
  display: inline-block;
  border-radius: 50%;
  background: #f0f0f0;
}

.loaded > #dot1 {
  animation: loading 1.5s ease-in-out 0s infinite alternate, jsloaded-dots 1s ease-in forwards;
  -webkit-animation: loading 1.5s ease-in-out 0s infinite alternate, jsloaded-dots 1s ease-in forwards;
}

.loaded > #dot2 {
  animation: loading 1.5s ease-in-out 0.4s infinite alternate, jsloaded-dots 1s ease-in forwards;
  -webkit-animation: loading 1.5s ease-in-out 0.4s infinite alternate, jsloaded-dots 1s ease-in forwards;
}

.loaded > #dot3 {
  animation: loading 1.5s ease-in-out 0.8s infinite alternate, jsloaded-dots 1s ease-in forwards;
  -webkit-animation: loading 1.5s ease-in-out 0.8s infinite alternate, jsloaded-dots 1s ease-in forwards;
}

#jsfill.jsloaded {
  animation: jsloaded-content 1s ease-in-out forwards;
  -webkit-animation: jsloaded-content 1s ease-in-out forwards;
}

.episode {
  background-color: #f0f0f0;
  margin: 1.5em 0em;
}

.epTitle {
  font-family: arial, helvetica, verdana, sans-serif;
}

.epDescription {
  font-family: "Trebuchet MS", arial, helvetica, verdana, sans-serif;
  text-align: justify;
  line-height: 140%;
  margin: 1em;
}

audio, iframe {
  display: block;
  margin: 1em 0;
}

.epCast, .epDate {
  font-family: sans-serif;
  display: inline-block;
}

.epCast {
  text-align: left;
  width: 36%;
}

.epDate {
  text-align: right;
  width: 64%;
}

@media (orientation: landscape) {
  .loading > div {
    width: 2.4vw;
    height: 2.4vw;
    margin: 1vw;
  }
  .loaded > div {
    width: 2.4vw;
    height: 2.4vw;
    margin: 1vw;
  }
  .episode {
    padding: 1.5vw;
  }
  .epTitle {
    font-size: 2.3vw;
  }
  .epDescription {
    font-size: 1.5vw;
  }
  audio {
    min-width: 40%;
  }
  iframe {
    width: 48vw;
    height: 27vw;
  }
  .epCast, .epDate {
    font-size: 1.3vw;
  }
}

@media (orientation: portrait) {
  .loading > div {
    width: 5.6vw;
    height: 5.6vw;
    margin: 1.8vw;
  }
  .loaded > div {
    width: 5.6vw;
    height: 5.6vw;
    margin: 1.8vw;
  }
  .episode {
    padding: 4vw;
  }
  .epTitle {
    font-size: 5.4vw;
  }
  .epDescription {
    font-size: 3.8vw;
  }
  audio {
    width: 100%;
  }
  iframe {
    width: 80vw;
    height: 45vw;
  }
  .epCast, .epDate {
    font-size: 3.2vw;
  }
}

audio::-webkit-media-controls-enclosure {
  border-radius: 0;
}

audio::-webkit-media-controls-panel {
  filter: invert(1);
}

audio::-webkit-media-controls-enclosure {
  background: rgba(18, 18, 18, .82);
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1.3);
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1.3);
  }
}

@keyframes jsloaded {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes jsloaded {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (orientation: landscape) {
  @keyframes jsloaded-dots {
    0% {
      opacity: 1;
      margin-top: 1vw;
    }
    100% {
      opacity: 0;
      margin-top: -4vw;
    }
  }

  @-webkit-keyframes jsloaded-dots {
    0% {
      opacity: 1;
      margin-top: 1vw;
    }
    100% {
      opacity: 0;
      margin-top: -4vw;
    }
  }
  
  @keyframes jsloaded-content {
    0% {
      margin-top: 1vw;
    }
    100% {
      margin-top: calc(-4vw - 1.5em);
    }
  }

  @-webkit-keyframes jsloaded-content {
    0% {
      margin-top: 1vw;
    }
    100% {
      margin-top: calc(-4vw - 1.5em);
    }
  }
}

@media (orientation: portrait) {
  @keyframes jsloaded-dots {
    0% {
      opacity: 1;
      margin-top: 1.8vw;
    }
    100% {
      opacity: 0;
      margin-top: -8.3vw;
    }
  }

  @-webkit-keyframes jsloaded-dots {
    0% {
      opacity: 1;
      margin-top: 1.8vw;
    }
    100% {
      opacity: 0;
      margin-top: -8.3vw;
    }
  }
  
  @keyframes jsloaded-content {
    0% {
      margin-top: 1.8vw;
    }
    100% {
      margin-top: calc(-8.3vw - 1.5em);
    }
  }

  @-webkit-keyframes jsloaded-content {
    0% {
      margin-top: 1.8vw;
    }
    100% {
      margin-top: calc(-8.3vw - 1.5em);
    }
  }
}