.header {
  position: relative;
  background: url(../images/HeaderBackground-Desk.jpg) no-repeat;
  background-size: 105%;
  height: 100vh;
  background-repeat: repeat-x;
  background-position: center center;
  animation: animatedBackground 5s linear alternate infinite;
}

.header-socials {
  position: absolute;
  top: 7vw;
  right: 2vw;
  z-index: auto;
}

ul.social a {
  color: #e8e8e8;
  font-size: 1.45vw;
}

ul.social {
  display: flex;
  flex-direction: row;
  gap: 1.1vw;
  align-items: center;
}

ul.social .fs-soundcloud a {
  font-size: 2vw;
}
.headerArtistCutout {
  max-width: 95vh;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
}

@keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 50% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.homeNavSection {
  position: absolute;
  top: 0;
  right: 0;
}

.albumCTATitle {
  font-size: 2.266vw;
  line-height: 1.2;
  letter-spacing: 0;
  color: #e8e8e8;
  font-family: "mesaregular";
  text-align: center;
}
.albumCTAButton {
  width: 23.594vw;
  margin: 1vw auto;
}

.albumCTAButton a {
  display: block;
  width: 100%;
  height: 3.203vw;
  line-height: 3.203vw;
  border: 0.234vw solid #e8e8e8;
  color: #e8e8e8;
  font-family: "mesaregular";
  font-size: 1.25vw;
  text-align: center;
  transition: none;
}

.albumCTAButton a:hover {
  color: #991b1d;
  background: #e8e8e8;
  opacity: 1;
}
.albumCTA {
  position: absolute;
  bottom: 1vw;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
}

.mobiii {
  display: none;
}
body.Homepage.clicked .homeNavSection .header-socials {
  display: none;
  /* visibility: hidden; */
}

body.Homepage.clicked .homeNavSection .header-socials ul.social a {
  /* font-size: 0; */
}
body.Homepage .homeNavSection .header-socials ul.social a {
  display: none;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  body.Homepage .homeNavSection .header-socials ul.social a {
    display: block;
}
  .deskiii {
    display: none;
  }
  .mobiii {
    display: block;
  }
  .header {
    background-size: cover;
  }
  .albumCTA {
    bottom: 15vw;
    width: 100%;
  }
  .albumCTATitle {
    font-size: 7.733vw;
    line-height: 9.067vw;
    letter-spacing: 0;
  }
  .albumCTAButton {
    width: 80.533vw;
    margin: 2vw auto;
  }
  .albumCTAButton a {
    height: 10.933vw;
    line-height: 10.933vw;
    border: 0.8vw solid #e8e8e8;
    font-size: 4.267vw;
  }
  .overlay-music-top {
    height: 3vw;
    height: 50vw;
    bottom: auto;
    top: -45vw;
  }
  .header-socials {
    position: absolute;
    top: auto;
    right: unset;
    z-index: auto;
    left: 50%;
    transform: translate(-50%);
    bottom: 5vw;
    width: max-content;
    z-index: 99;
    text-align: center;
    margin: 0 auto;
  }

  body.Homepage.clicked .header-socials {
    bottom: 8vh;
  }
  ul.social a {
    font-size: 5vw;
  }
  ul.social {
    gap: 6vw;
  }
  ul.social .fs-soundcloud a {
    font-size: 7vw;
  }
  img.mobiii {
    object-fit: fill;
    object-position: center;
  }
  .logo {
    position: relative;
    z-index: 999;
    opacity: 0;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
  }
  body.clicked .logo {
    opacity: 1;
    transition: 0.5s ease-in-out all;
    pointer-events: all;
  }
  body.Homepage.clicked .homeNavSection .header-socials {
    bottom: 8vh;
    position: static;
    transform: none;
    margin: 0;
    display: block;
  }
  body.Homepage .homeNavSection.header-socials {
    display: none;
  }
  body.Homepage.clicked .header-socials {
    display: none;
  }
  body.Homepage.clicked .homeNavSection ul.social li{
    padding: 0!important;
  }
}

@media screen and (max-width: 1024px) and (min-width: 767px) and (orientation: portrait) {
  img.mobiii {
    object-fit: fill;
    object-position: center 40vw;
  }
}