@font-face {
  font-family: 'futura';
  src: url('fonts/Futura-Medium.woff2') format('woff2'),
      url('fonts/Futura-Medium.woff') format('woff'),
      url('fonts/Futura-Medium.ttf') format('truetype'),
      url('fonts/Futura-Medium.svg#Futura-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gibson';
  src: url('fonts/Gibson-SemiBold.eot');
  src: url('fonts/Gibson-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('fonts/Gibson-SemiBold.woff2') format('woff2'),
      url('fonts/Gibson-SemiBold.woff') format('woff'),
      url('fonts/Gibson-SemiBold.ttf') format('truetype'),
      url('fonts/Gibson-SemiBold.svg#Gibson-SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
  --color-text: #4800d4;
  --color-main-title: #5534FF;
  --color-month: #FF274B;
  --color-bg: #e8e8e8;
  --color-bg-alpha-100: #e8e8e8ff;
  --color-bg-alpha-00: #e8e8e800;
  --color-link: #ec1752;
  --color-link-hover: #eb1851;
  --color-info: #FF274B;
  --color-quote: #5534FF;
  --color-info-footer: #999999;
  --grid-item-bg: #f1f1f1;
  --color-close: var(--color-link);
  font-family: Futura, "futura", sans-serif;
  font-size: 16px;
	min-height: 100vh;
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

main {
	position: relative;
}

.frame {
	position: relative;
	padding: 1.5rem 2.5rem;
}

.frame a:hover {
	color: #4c33f7;
}

/* Header */
.main-header {
  width: 100%;
  max-width: 80rem;
  height: 7.25rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1rem;

}

.logo {
  width: 4.5rem;
  height: 4.5rem;
}

.title-wrapper {
  margin-top: -2rem;
  transition: all 300ms ease-in-out;
}

.main-title {
  font-size: 3.125rem;
  font-weight: normal;
  text-align: center;
  color: var(--color-main-title);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.month{
  font-size: 1.5rem;
  font-weight: normal;
  text-align: center;
  margin: 0;
  color: var(--color-month);
}

.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.info-wrapper {
  position: relative;
  flex: 0 1 auto;
  width: 7rem;
  overflow: hidden;
  cursor: pointer;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.info-mask {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-bg-alpha-100) 0%, var(--color-bg-alpha-00) 10%, var(--color-bg-alpha-00) 90%, var(--color-bg-alpha-100) 100%);
}

.info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  transform: translateX(-2.9rem);
  transition: all 300ms ease-in-out;
}

.info-line {
  flex: 0 1 auto;
  width: 3.125rem;
  min-width: 3.125rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 1px;
  background-color: var(--color-main-title);
  transition: all 600ms ease-in-out;
}

.info-text {
  width: 3rem;
  height: 1.7rem;
  min-width: 3rem;
  font-size: 1.125rem;
  font-weight: normal;
  color: var(--color-main-title);
  flex: 0 1 auto;
}

.info-text.is-open {
  width: 3rem;
  min-width: 3rem;
  text-align: left;
}

.info-text.is-closed {
  text-align: right;
}

.info-wrapper.is-opened  .info-container{
  transform: translateX(0) rotate(0deg);
}

.info-page {
  position: absolute;
  top: 7.25rem;
  left: 0;
  width: 100%;
  height: calc(100vh - 7.25rem);
  background-color: var(--color-bg);
  opacity: 0;
  transition: all 0.2s ease-in-out;
  z-index: 100;
  visibility: hidden;
}

.info-page-container {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.info-header {
  font-size: 2vw;
  font-weight: normal;
  color: var(--color-info);
  margin-top: 0;
  margin-bottom: 0;
}

.info-subheader {
  font-size: 7vw;
  font-weight: normal;
  color: var(--color-info);
  margin-top: 0;
  margin-bottom: 3rem;
}

.info-content-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 6rem;
}

.info-left {
  flex: 0 1 87%;
  margin-right: 1.25rem;
}

.info-right {
  flex: 0 1 auto;
  margin-left: 1.25rem;
}

.info-right .block-container {
  height: 100%;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
}

.info-page__text {
  font-size: 20px;
  margin-top: 0;
  line-height: 32px;
  font-weight: normal;
  color: var(--color-info);
}

.info-page__text br {
  margin-bottom: 18px;
}

.info-button {
  height: 2.5rem;
  width: 11rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 2rem;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;
  padding-left: 1rem;
  padding-right: 1.25rem;
  cursor: pointer;
  margin-bottom: 4.5rem;
}

.info-button .button__text {
  color: #333333 !important;
}

.info-quote {
  font-size: 30px;
  font-weight: normal;
  color: var(--color-quote);
  margin-top: 0;
  margin-bottom: 1rem;
}

.info-author {
  font-size: 1.125rem;
  font-weight: normal;
  color: var(--color-quote);
  margin-top: 0;
}

.info-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-text {
  flex: 0 1 auto;
  font-size: 1.125rem;
  font-weight: normal;
  color: var(--color-info-footer);
  white-space: nowrap;
}

.footer-text:first-of-type {
  margin-right: 0.5rem;
}

.footer-link {
  flex: 0 1 auto;
  font-size: 1.125rem;
  font-weight: normal;
  text-decoration: none;
  color: var(--color-info-footer);
  white-space: nowrap;
  transition: all 300ms ease-in-out;
}

.footer-separator {
  flex: 0 1 auto;
  font-size: 1.125rem;
  font-weight: normal;
  color: var(--color-info-footer);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.title {
	text-align: center;
}

.title__name,
.title__sub {
	margin: 0;
	font-size: 1rem;
}

.title__sub {
	position: relative;
	margin: 0;
}

/* Top Navigation Style */
.grid-wrap {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 6rem 1rem 0;
}

.grid-wrap--hidden {
	height: 0 !important;
	overflow: hidden !important;
}

.grid {
	margin: 0 auto;
	position: relative;
	display: none;
}

.js .grid {
	display: block;
}

.grid__item {
	width: 260px;
	position: relative;
	padding: 4rem 1.5rem;
	margin-bottom: 3.5rem;
}

.grid__item-wrap {
	position: relative;
}

.grid__item-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: var(--grid-item-bg);
  transition: background 600ms ease-in-out;
}

.grid__item-bg::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 1rem;
  transition: all 600ms ease-in-out;
}

.grid__item-img {
	pointer-events: none;
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	display: block;
  outline: 1px solid transparent;
  opacity: 0.4;
}

.grid__item:nth-child(even) .grid__item-img {
	transform: rotate3d(0,0,1,4deg);
}

.grid__item:nth-child(odd) .grid__item-img {
	transform: rotate3d(0,0,1,-4deg);
}

.grid__item-title {
  font-size: 1.125rem;
  font-weight: normal;
	position: absolute;
	left: 0;
	top: 0;
	margin-left: -1rem;

}

.grid__item-number {
  font-size: 2.625rem;
  font-weight: normal;
  position: absolute;
  margin: 0;
	right: -1.75rem;
	bottom: -1.5rem;
	font-size: 2.65rem;
}

.grid__item-number > span {
	display: inline-block;
}

.js .content {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.slide__item {
  grid-area: 1 / 1 / 1 / 1;
}

.js .slide__item {
	height: 0;
  opacity: 0;
	padding: 0;
  pointer-events: none;
}

.js .slide__item--current {
	height: auto;
	opacity: 1;
  pointer-events: auto;
}

.slide__item-intro {
  position: relative;
  height: 100vh;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
  align-items: center;
}

.slide__item-img {
	position: relative;
  height: auto;
  width: 48.75rem;
	max-width: 48.75rem;
	display: block;
  margin: 0 auto;
  opacity: 0.4;
}

.js .slide__item-img {
	visibility: hidden;
}

.slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  padding-top: 5.5rem;
}

.song-number-wrapper {
  flex: 0 1 auto;
  align-self: flex-end;
  margin-bottom: 4rem;
}

.song-number-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  transition: all 600ms ease-in-out;
  padding-right: 5vw;
}

.song-number {
  flex: 0 1 auto;
  font-weight: normal;
  font-size: 140px;
  height: 10.2rem;
}

.song-number > span {
	white-space: pre;
	display: inline-block;
}

.number-separator {
  flex: 0 1 auto;
  font-weight: normal;
  font-size: 60px;
}

.total-number {
  flex: 0 1 auto;
  font-weight: normal;
  font-size: 60px;
  opacity: 0.5;
}

.total-number > span {
	white-space: pre;
	display: inline-block;
}

.song-title {
  flex: 0 1 auto;
  font-size: 130px;
  font-weight: normal;
	line-height: 1;
	text-align: center;
	margin: 0;
  white-space: pre-line;
  word-break: normal;
}

.song-title.long-title {
  font-size: 100px;
  line-height: 1.2;
}

.song-title > span {
	white-space: pre;
	display: inline-block;
}

.song-artist {
  flex: 0 1 auto;
  width: 100%;
  font-weight: normal;
	font-size: 50px;
	line-height: 1;
  white-space: nowrap;
  margin: 0;
  margin-bottom: 0.5rem;
  text-align: left;
  padding-left: 11vw;
}

.song-artist > span {
	white-space: pre;
	display: inline-block;
}

.song-subartist {
  flex: 0 1 auto;
  width: 100%;
  font-weight: normal;
	font-size: 30px;
	line-height: 1;
  white-space: nowrap;
  margin: 0;
  text-align: left;
  padding-left: 5vw;
}

.song-subartist > span {
	white-space: pre;
	display: inline-block;
}

.slide__item-subtitle {
	text-align: center;
	font-size: 1.25rem;
	margin: 3rem auto;
}

.slide__item-text {
	text-align: justify;
	max-width: 800px;
	margin: 0 auto;
}

.slide__item-text p {
	margin: 0;
}

.slide-top-wrapper {
  flex: 0 1 50%;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}

.slide-top-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.slide-bottom-wrapper {
  flex: 0 1 50%;
  width: 100%;
}

.slide-bottom-container {
  padding-top: 3rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.staff-wrapper {
  flex: 0 1 auto;
  align-self: flex-end;
}

.staff-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
}

.staff-image-wrapper {
  flex: 0 1 auto;
  width: 162px;
  height: 90px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transition: all 600ms ease-in-out;
}

.staff-image {
  width: auto;
  height: 90px;
  mix-blend-mode: multiply;
}

.staff-title {
  flex: 0 1 auto;
  position: relative; 
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  line-height: 1;
  padding-left: 4.125rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.staff-title > span {
	white-space: pre;
	display: inline-block;
}

.staff-name {
  flex: 0 1 auto;
  position: relative; 
  font-weight: normal;
  font-size: 18px;
  text-align: left;
  line-height: 1;
  padding-left: 4.125rem;
}

.staff-name > span {
	white-space: pre;
	display: inline-block;
}

.content__close {
	position: absolute;
	top: 2.875rem;
	left: 50%;
	z-index: 10000;
	transform: translateX(-50%);
	background: none;
	border: 0;
	margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: normal;
	cursor: pointer;
}

.content__close:focus {
	outline: none;
}

.slide__item--current ~ .content__close {
	pointer-events: auto;
}

.content__indicator {
	position: absolute;
	top: calc(100vh - 6rem);
	left: calc(50% - 0.75rem);
	display: none;
}

.slide-bottom-container .button-spotify {
  align-self: flex-end;
  margin-bottom: 3rem;
  margin-right: 3rem;
}

.button-spotify {
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 2rem;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  padding-left: 1rem;
  padding-right: 1.25rem;
  opacity: 0;
  cursor: pointer;
  z-index: 1000000;
  transition: all 600ms ease-in-out;
}

.logo-spotify {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 1 auto;
  background-image: url('../img/spotify_logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 0.75rem;
}

.button__text {
  flex: 0 1 auto;
  font-family: "gibson", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #ffffff !important;
}

.js .song-title > span,
.js .song-artist > span,
.js .song-subartist > span,
.js .song-number > span,
.js .total-number > span,
.js .staff-title > span,
.js .staff-name > span,
.js .slide__item-subtitle,
.js .slide__item-text,
.album,
.content__close,
.content__indicator {
	opacity: 0;
}

@media screen and (min-width: 55em) {
	.frame {
		display: grid;
		align-items: start;
		justify-items: start;
		grid-template-columns: 40% 60%;
		grid-template-areas: 'title header';
	}
	.title {
		grid-area: title;
		display: flex;
		text-align: left;
	}
	.title__sub {
		position: relative;
		padding: 0 0 0 5rem;
		margin: 0 0 0 1rem;
	}
	.title__sub::before {
		content: '';
		height: 1px;
		width: 4rem;
		background: currentColor;
		position: absolute;
		top: 0.65rem;
		left: 0;
	}
	.title__sub-works {
		display: block;
	}
	.slide__item-subtitle {
		font-size: 3vw;
	}
	.slide__item-text {
    column-count: 2;
    column-gap: 20px;
  }
	.slide__item-subtitle {
		max-width: 50%;
	}
	.content__indicator {
		display: block;
	}
}

.slide-01.is-opened .grid__item-bg {
  background-color: #7E2626;
}

.slide-01.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #3D0F29 0%, #7E2626 100%);
}

.slide-item-1 *,
.content__close.slide-item-1 {
  color: #FFAC34;
}

.slide-item-1.staff-image-wrapper {
  background-color: #FFAC34;
}

.slide-02.is-opened .grid__item-bg {
  background-color: #444444;
}

.slide-02.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #222222 0%, #444444 100%);
}

.slide-item-2 *,
.content__close.slide-item-2 {
  color: #F72044;
}

.slide-item-2 .staff-image-wrapper {
  background-color: #F72044;
}

.slide-03.is-opened .grid__item-bg {
  background-color: #39267E;
}

.slide-03.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #240829 0%, #39267E 100%);
}

.slide-item-3 *,
.content__close.slide-item-3 {
  color: #FAF500;
}

.slide-item-3 .staff-image-wrapper {
  background-color: #FAF500;
}

.slide-04.is-opened .grid__item-bg {
  background-color: #CB3C6D;
}

.slide-04.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #411037 0%, #CB3C6D 100%);
}

.slide-item-4 *,
.content__close.slide-item-4 {
  color: #33FFA0;
}

.slide-item-4 .staff-image-wrapper {
  background-color: #33FFA0;
}

.slide-05.is-opened .grid__item-bg {
  background-color: #6C9486;
}

.slide-05.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #0F1E2D 0%, #6C9486 100%);
}

.slide-item-5 *,
.content__close.slide-item-5 {
  color: #FFC934;
}

.slide-item-5 .staff-image-wrapper {
  background-color: #FFC934;
}

.slide-06.is-opened .grid__item-bg {
  background-color: #7E3F26;
}

.slide-06.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #3E0F0F 0%, #7E3F26 100%);
}

.slide-item-6 *,
.content__close.slide-item-6 {
  color: #34FFE5;
}

.slide-item-6 .staff-image-wrapper {
  background-color: #34FFE5;
}

.slide-07.is-opened .grid__item-bg {
  background-color: #42267E;
}

.slide-07.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #0F173D 0%, #42267E 100%);
}

.slide-item-7 *,
.content__close.slide-item-7 {
  color: #EF0260;
}

.slide-item-7 .staff-image-wrapper {
  background-color: #EF0260;
}

.slide-08.is-opened .grid__item-bg {
  background-color: #2D2D2D;
}

.slide-08.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #000000 0%, #2D2D2D 100%);
}

.slide-item-8 *,
.content__close.slide-item-8 {
  color: #FFC46E;
}

.slide-item-8 .staff-image-wrapper {
  background-color: #FFC46E;
}

.slide-09.is-opened .grid__item-bg {
  background-color: #288F3D;
}

.slide-09.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #0F3D33 0%, #288F3D 100%);
}

.slide-item-9 *,
.content__close.slide-item-9 {
  color: #FF6634;
}

.slide-item-9 .staff-image-wrapper {
  background-color: #FF6634;
}

.slide-10.is-opened .grid__item-bg {
  background-color: #26747E;
}

.slide-10.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #140F3D 0%, #26747E 100%);
}

.slide-item-10 *,
.content__close.slide-item-10 {
  color: #DFC47B;
}

.slide-item-10 .staff-image-wrapper {
  background-color: #DFC47B;
}

.slide-11.is-opened .grid__item-bg {
  background-color: #7E2626;
}

.slide-11.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #360F3D 0%, #7E2626 100%);
}

.slide-item-11 *,
.content__close.slide-item-11 {
  color: #618BFF;
}

.slide-item-11 .staff-image-wrapper {
  background-color: #618BFF;
}

.slide-12.is-opened .grid__item-bg {
  background-color: #2D299E;
}

.slide-12.is-opened .grid__item-bg::before {
  opacity: 1;
  background: linear-gradient(45deg, #0F183D 0%, #2D299E 100%);
}

.slide-item-12 *,
.content__close.slide-item-12 {
  color: #F13118;
}

.slide-item-12 .staff-image-wrapper {
  background-color: #F13118;
}

@media screen and (max-width: 767.98px) {

.slide-container {
    padding-top: 7.5rem;
  }

  .song-number-wrapper {
    align-self: center;
    margin-bottom: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .song-number-container {
    padding-right: 0;
  }

  .song-number {
    font-size: 30px;
    height: 2.3rem;
  }

  .total-number{
    font-size: 20px;
  }

  .number-separator{
    font-size:20px;
  }

  .song-title,
  .song-title.long-title {
    font-size: 40px;
    margin-bottom: 1rem;
  }

  .song-artist {
    font-size: 32px;
    text-align: center;
    padding-left: 0;
  }

  .slide-top-container{
    justify-content: start;
  }

  .song-subartist {
    font-size: 18px;
    text-align: center;
    padding-left: 0;
  }

  .slide-bottom-container {
    padding-top: 0;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .info-page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .info-page__text {
    font-size: 16px;
    line-height: 26px;
  }

  .staff-wrapper {
    align-self: center;
    order: 1;
  }

  .staff-container {
    margin-bottom: 0;
  }

  .staff-title, .staff-name{
    padding-left: 0;
  }

  .slide-bottom-container .button-spotify {
    align-self: center;
    margin-right: 0rem;
    order: 3;
  }

  .slide-top-wrapper {
    flex: inherit;
    margin-bottom: 5vh;
  }

  .staff-image-wrapper {
    display:none;
  }

  .slide__item-img {
    width:100%;
  }

  .info-content-container {
    flex-direction: column;
  }

  .info-right {
    margin-left: 0;
  }

  .info-button {
    margin-top: 1rem;
    margin-bottom: 2.3rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px)  {

  .slide-container {
    padding-top: 7.5rem;
  }


  .song-number {
    font-size: 100px;
    height: 7.5rem;
  }

  .song-title {
    font-size: 85px;
    margin-bottom: 0rem;
  }

  .song-artist {
    font-size: 40px;
    text-align: center;
    padding-left:0;
  }

  .song-subartist {
    font-size: 30px;
  }

  .info-page-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .song-number-wrapper {
    align-self: center;
  }

  .song-number-container{
    padding-right:0;
  }

}