#auth-page {
  flex-wrap: wrap;
  justify-content: center;
  place-items: center;
  height: 100vh;
  margin: 0;
  display: flex;
}

#auth-page .login-holder {
  flex-grow: 0;
  flex-basis: 100%;
  justify-content: center;
}

#auth-page .login-holder #musaic-logo img {
  margin: 0 auto 20px;
}

#auth-page .login-holder #login {
  align-items: center;
  width: 320px;
  margin: 0 auto;
}

#auth-page .login-holder #login input, #auth-page .login-holder #login button {
  text-align: center;
  border: 2px solid #333;
  border-radius: 10px;
  outline: #0000;
  width: 100%;
  margin-top: 5px;
  padding: 12px 20px;
  font-family: Noto Sans, sans-serif;
  font-size: 1rem;
  display: block;
}

#auth-page .login-holder #login input.submit, #auth-page .login-holder #login button.submit {
  width: 60%;
  margin: 20px auto 0;
}

#auth-page .login-holder #login .error {
  color: red;
  margin-top: 5px;
  font-size: .8rem;
}

.holder {
  place-items: center;
  height: 100vh;
  margin: 0;
  display: grid;
}

h1 {
  text-align: center;
}

#header {
  flex-wrap: wrap;
  align-items: center;
  padding-top: 20px;
  display: flex;
}

#header .logo img {
  width: 200px;
}

#header .nav {
  margin: 20px;
}

#header .nav .nav-item {
  color: #333;
  margin-right: 20px;
  font-size: 18px;
  text-decoration: none;
}

.mobile #header .nav .nav-item {
  margin-right: 10px;
}

#header .nav .nav-item:hover {
  color: #000;
}

#header .nav .nav-item:last-child {
  margin-right: 0;
}

.mobile #header .nav {
  flex-direction: column;
  width: 100%;
  margin: 0;
  display: none;
}

.mobile #header .nav .nav-item {
  margin: 3px 0;
  padding: 3px 0;
}

.mobile #header .nav .nav-item.active {
  border: 0;
  border-left: 4px solid #ccc;
  padding-left: 5px;
}

.mobile #header .nav.nav-active {
  display: flex;
}

#header .nav-toggle {
  display: none;
}

#header .nav-toggle-label {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: none;
  position: absolute;
  top: 48px;
  right: 50px;
}

.mobile #header .nav-toggle {
  display: none;
}

.mobile #header .nav-toggle-label {
  display: block;
}

#header .nav-toggle:checked + .nav-toggle-label + .nav {
  display: flex;
}

#musaic-logo img {
  width: 300px;
}

.mobile #musaic-logo img {
  margin: 10px auto;
}

#prompt-section {
  width: 500px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.mobile #prompt-section {
  width: calc(100% - 20px);
}

#prompt-section .section-content {
  padding-right: 50px;
  position: relative;
}

#prompt-section .section-content svg.fa-play, #prompt-section .section-content svg.fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 10px;
  right: 5px;
}

#prompt-section .section-content svg.fa-play:hover, #prompt-section .section-content svg.fa-arrows-rotate:hover {
  color: #000;
}

#seed-section {
  width: 300px;
  position: absolute;
  top: 100px;
  left: 810px;
}

.mobile #seed-section {
  width: 100%;
}

#seed-section .section-title {
  opacity: 0;
}

#seed-section .seeds {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

#seed-section .seeds .seed {
  opacity: 0;
  background: #fff;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px #0000002e;
}

#seed-section .seeds .seed img {
  width: 100%;
  height: 100%;
  position: absolute;
}

#seed-section .seeds.less .seed {
  width: 70px;
  height: 70px;
}

#midi-section {
  width: 400px;
  position: absolute;
}

#midi-section .midi {
  opacity: 0;
}

.mobile #seed-to-render-arrow {
  z-index: -10;
}

.mobile #seed-to-render-arrow .arrow-title-holder {
  top: -20%;
  left: 10%;
}

.mobile #seed-to-rights-arrow {
  z-index: -10;
}

#audio-section {
  position: absolute;
  top: 600px;
  left: 500px;
}

#audio-section .player {
  opacity: 0;
}

#audio-section .section-content {
  color: #4968f0;
  padding: 20px 15px;
  display: flex;
}

#audio-section .section-content .fa-play, #audio-section .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

#rights-section {
  position: absolute;
  top: 600px;
  left: 920px;
}

.mobile #rights-section {
  max-width: calc(100% - 20px);
}

#rights-section .rights {
  opacity: 0;
}

#rights-section .section-content {
  color: #333;
  display: flex;
}

#rights-section .section-content .rights-section {
  margin: 0 10px;
}

#rights-section .section-content li {
  margin-left: 15px;
}

.example {
  color: #000;
  background: #ffffe0;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 12px #0000002e;
}

.example b {
  color: #333;
}

.demo-page {
  max-width: 100%;
  height: 1900px;
  margin-bottom: 50px;
  padding-bottom: 50px;
  position: relative;
  overflow-x: hidden;
}

.demo-page .arrow {
  pointer-events: none;
  position: absolute;
}

.demo-page .arrow .arrow-title-holder {
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.demo-page .arrow .arrow-title-holder .arrow-title {
  text-align: center;
  opacity: 0;
  color: #333;
  padding-bottom: 30px;
}

.demo-page .section .section-title {
  font-size: 22px;
  font-weight: semi-bold;
  color: #333;
  padding-bottom: 3px;
  padding-left: 10px;
}

.demo-page .section .section-content {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 12px #0000002e;
}

.demo-page .example {
  width: 800px;
  margin-top: 10px;
  margin-left: 100px;
}

.mobile .demo-page .example {
  width: calc(100% - 20px);
  margin: 10px auto;
}

.nav {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.nav .nav-item {
  cursor: pointer;
  color: #999;
  margin-right: 20px;
  padding: 10px 0;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
}

.nav .nav-item.active {
  color: #333;
  border-bottom: 2px solid #ccc;
  font-weight: bold;
}

.nav .nav-item:hover {
  color: #000;
  border-bottom: 2px solid #000;
}

.nav .nav-item:last-child {
  margin-right: 0;
}

.delphos {
  padding: 20px 20%;
}

.delphos #generator {
  width: 500px;
}

.delphos #generator .section-content {
  padding-right: 50px;
  position: relative;
}

.delphos #generator .section-content svg.fa-play, .delphos #generator .section-content svg.fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 10px;
  right: 5px;
}

.delphos #generator .section-content svg.fa-play:hover, .delphos #generator .section-content svg.fa-arrows-rotate:hover {
  color: #000;
}

.delphos .generation {
  width: 800px;
  margin-top: 15px;
}

.delphos .generation .section-title {
  font-family: Courier New, Courier, monospace;
  font-size: 10px;
}

.delphos .generation .section-content {
  color: #4968f0;
  padding: 20px 15px;
  display: flex;
  position: relative;
}

.delphos .generation .section-content .fa-play, .delphos .generation .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

.delphos .generation .section-content .fa-download {
  margin-left: 10px;
}

.delphos .generation .section-content .fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 13px;
  right: 15px;
}

.delphos .generation .section-content .fa-arrows-rotate:hover {
  color: #000;
}

.derivative {
  width: 880px;
  max-width: 880px;
  margin: 0 20% 20px;
}

.derivative .example {
  margin: 10px 5%;
}

.derivative #derivative-album {
  flex-wrap: wrap;
  display: flex;
}

.derivative #derivative-album .section {
  width: 320px;
}

.derivative #derivative-album .album_info {
  margin-top: 14px;
}

.derivative #derivative-album .album_info div {
  margin: 5px 0;
}

.derivative #derivative-album .derivative-album-track.section {
  width: 520px;
  margin: 10px;
}

.derivative #derivative-album .derivative-album-track.section .section-content {
  padding: 8px 15px;
}

.mobile .derivative #derivative-album .derivative-album-track.section {
  width: 350px;
}

.derivative.mobile {
  width: auto;
  margin: 0 5% 20px;
}

.derivative.mobile #derivative-album {
  display: block;
}

.derivative.mobile #derivative-album .section {
  width: 250px;
  margin: 0 auto;
}

.derivative.mobile #derivative-album .derivative-album-tracks {
  margin-top: 10px;
}

.derivative.mobile #derivative-album .derivative-album-track.section {
  width: 370px;
  margin-top: 10px;
}

.derivative .derivative-album-track .section-title {
  font-size: 12px;
}

.derivative .derivative-album-track .section-content {
  color: #4968f0;
  padding: 20px 15px;
  display: flex;
}

.derivative .derivative-album-track .section-content .fa-play, .derivative .derivative-album-track .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

.derivative #derivative-controls .section-content {
  cursor: pointer;
  color: #fff;
  text-align: center;
  background-color: #eba947;
  width: 350px;
  margin: 20px auto;
  font-size: 26px;
}

.derivative .generation {
  width: 850px;
  margin-top: 15px;
}

.derivative .generation .section-title {
  font-family: Courier New, Courier, monospace;
  font-size: 10px;
}

.derivative .generation .section-content {
  color: #4968f0;
  padding: 20px 15px;
  display: flex;
  position: relative;
}

.derivative .generation .section-content .fa-play, .derivative .generation .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

.derivative .generation .section-content .fa-download {
  margin-left: 10px;
}

.derivative .generation .section-content .fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 13px;
  right: 15px;
}

.derivative .generation .section-content .fa-arrows-rotate:hover {
  color: #000;
}

.derivative.mobile .generation {
  width: 370px;
  margin: 10px auto;
}

.derivative.mobile .generation .section-title {
  white-space: nowrap;
  overflow: hidden;
}

.derivative.mobile .generation .download-link {
  display: none;
}

.derivative .rights {
  width: 600px;
  margin: 25px auto;
}

.derivative .rights .section-content {
  color: #333;
  display: flex;
}

.derivative .rights .section-content .rights-section {
  width: 40%;
  margin: 0 10px;
}

.derivative .rights .section-content li {
  margin-left: 15px;
}

.mobile .derivative .rights {
  max-width: calc(100% - 20px);
}

.adaptive {
  width: 880px;
  max-width: 880px;
  margin: 0 20% 20px;
}

.adaptive.mobile {
  width: auto;
  margin: 0 3% 20px;
}

.adaptive.mobile .generation {
  margin: 0;
}

.adaptive.mobile .generation .section-content {
  flex-wrap: nowrap;
  margin: 0 3%;
}

.adaptive.mobile .generation.with_image .section-content {
  flex-wrap: wrap;
}

.adaptive .example {
  margin: 10px 5%;
}

.adaptive .generation {
  width: 850px;
  margin: 15px;
}

.adaptive .generation .section-content {
  color: #4968f0;
  flex-wrap: wrap;
  padding: 20px 15px;
  display: flex;
  position: relative;
}

.adaptive .generation .section-content .clean-player {
  display: flex;
}

.adaptive .generation .section-content .fa-play, .adaptive .generation .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

.adaptive .generation .section-content .fa-download {
  margin-left: 10px;
}

.adaptive .generation .section-content .fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 13px;
  right: 15px;
}

.adaptive .generation .section-content .fa-arrows-rotate:hover {
  color: #000;
}

.adaptive .generation .section-content img {
  border: 1px solid #999;
  margin-top: 10px;
}

.adaptive.mobile .generation {
  width: 370px;
  margin: 10px auto;
}

.adaptive.mobile .generation .section-title {
  white-space: nowrap;
  overflow: hidden;
}

.adaptive.mobile .generation .download-link {
  display: none;
}

.adaptive .rights {
  width: 600px;
  margin: 25px auto;
}

.adaptive .rights .section-content {
  color: #333;
  display: flex;
}

.adaptive .rights .section-content .rights-section {
  width: 40%;
  margin: 0 10px;
}

.adaptive .rights .section-content li {
  margin-left: 15px;
}

.mobile .adaptive .rights {
  max-width: calc(100% - 20px);
}

.audioguard {
  width: 880px;
  max-width: 880px;
  height: auto;
  margin: 0 20% 20px;
  padding: 0 20px;
}

.audioguard .section {
  margin-bottom: 30px;
}

.audioguard .section .section-content {
  color: #333;
}

.audioguard .section .section-content h2, .audioguard .section .section-content p {
  margin: 10px;
}

.audioguard .section .section-content .clean-player {
  color: #4968f0;
  display: flex;
}

.audioguard.mobile {
  width: auto;
  margin: 0 3% 20px;
  padding: 0 3px;
}

.audioguard.mobile .generation {
  margin: 0;
}

.audioguard.mobile .generation .section-content {
  flex-wrap: nowrap;
  margin: 0 3%;
}

.audioguard.mobile .generation.with_image .section-content {
  flex-wrap: wrap;
}

.audioguard .example {
  margin: 10px 5%;
}

.audioguard .generation {
  width: 850px;
  margin: 15px;
}

.audioguard .generation .section-content {
  color: #4968f0;
  flex-wrap: wrap;
  padding: 20px 15px;
  display: flex;
  position: relative;
}

.audioguard .generation .section-content .fa-play, .audioguard .generation .section-content .fa-pause {
  margin-top: 6px;
  margin-right: 5px;
}

.audioguard .generation .section-content .fa-download {
  margin-left: 10px;
}

.audioguard .generation .section-content .fa-arrows-rotate {
  margin: 3px 0 3px 3px;
  position: absolute;
  top: 13px;
  right: 15px;
}

.audioguard .generation .section-content .fa-arrows-rotate:hover {
  color: #000;
}

.audioguard .generation .section-content img {
  border: 1px solid #999;
  margin-top: 10px;
}

.audioguard.mobile .generation {
  width: 370px;
  margin: 10px auto;
}

.audioguard.mobile .generation .section-title {
  white-space: nowrap;
  overflow: hidden;
}

.audioguard.mobile .generation .download-link {
  display: none;
}

.audioguard .rights {
  width: 600px;
  margin: 25px auto;
}

.audioguard .rights .section-content {
  color: #333;
  display: flex;
}

.audioguard .rights .section-content .rights-section {
  width: 40%;
  margin: 0 10px;
}

.audioguard .rights .section-content li {
  margin-left: 15px;
}

.mobile .audioguard .rights {
  max-width: calc(100% - 20px);
}
/*# sourceMappingURL=index.bdafa182.css.map */