#main {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


  /* sectionEpisodeList */

#sectionEpisodeList {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 50%;
  height: 100%;
  background: #050033;
  transition: left 1s;
}

#sectionEpisodeList.playerMode {
  left: -25%;
}

#sectionEpisodeList h1 {
  position: absolute;
  top: 50px;
  right: 50px;
  text-transform: uppercase;
  text-align: right;
  font-family: "Blex", 'Courier New', Courier, monospace;
  font-weight: 400;
  font-size: 16px;
  color: white;
  opacity: 0.5;
}

  /* sectionInfo */

#sectionInfo {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
  background: #2d20a4;
  z-index: 4;
  transition: left 1s;
}

#sectionInfo.playerMode {
  left: 0%;
}

#sectionInfoAbout {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#sectionInfoAbout .logo {
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translateX(0%);
  transition: left 1s, transform 1s, filter 1s, opacity 1s;
}

#sectionInfo.playerMode .logo {
  left: calc(100% - 50px);
  transform: translateX(-100%);
  filter: grayscale(1);
  opacity: 0.2;
}

#sectionInfoAbout h1 {
  position: absolute;
  top: 20%;
  left: 50px;
  color: white;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 64px;
}

#sectionInfoAbout .description {
  position: absolute;
  top: 50%;
  left: 50px;
  width: 80%;
  color: white;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  font-style: italic;
  color: white;
}

#sectionInfoAbout #socialButtons {
  position: absolute;
  bottom: 50px;
  right: 50px;
  padding: 0px;
  margin: 0px;
}

#sectionInfoAbout #socialButtons li {
  list-style: none;
  text-align: right;
  margin: 0px;
  padding: 4px;
}

#sectionInfoAbout #socialButtons li a {
  color: transparent;
  font-family: "Blex", 'Courier New', Courier, monospace;
  font-size: 16px;
  text-decoration: none;
  outline: none;
  opacity: 0.1;
  padding: 4px;
  transition: opacity 1000ms, letter-spacing 200ms, text-shadow 200ms, color 200ms; /* off-hover */
}

#sectionInfoAbout #socialButtons:hover li a {
  color: white;
}

#sectionInfoAbout #socialButtons li a:hover {
  opacity: 1;
  letter-spacing: 1px;
  text-shadow: white 0px 0px 2px;
  transition: opacity 200ms, letter-spacing 100ms; /* on hover */
}

#sectionInfoAbout #socialButtons li a i {
  position: relative;
  top: 50%;
  width: 16px;
  height: 16px;
  padding: 0px 16px;
  text-shadow: none;
  letter-spacing: 0px;
  color: white;
}

  /* sectionTimeline */

#sectionTimeline {
  position: absolute;
  top: 0px;
  left: 75%;
  width: 50%;
  height: 100%;
  background: rgb(8,8,8);
  transition: left 1s;
}

#sectionTimeline.playerMode {
  left: 50%;
}

#sectionTimeline h1 {
  position: absolute;
  top: 50px;
  left: 50px;
  text-transform: uppercase;
  font-family: "Blex", 'Courier New', Courier, monospace;
  font-weight: 400;
  font-size: 16px;
  color: white;
  opacity: 0.5;
}