@font-face {
    font-family: 'Yellix-Bold';
    src: url('../assets/Yellix-Bold.eot');
    src: url('../assets/Yellix-Bold.eot?#iefix') format('embedded-opentype'),
      url('../assets/Yellix-Bold.woff') format('woff'),
      url('../assets/Yellix-Bold.ttf') format('truetype'),
      url('../assets/Yellix-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;

  }

body:before {
  position: absolute;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /*content: "";*/
  height: 100%;
  width: 100%;
  z-index: -1;
  left: 0;
}

body:after {
  position: absolute;
  /* content: ''; */
  background: linear-gradient(
    -180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 7%,
    rgba(0, 0, 0, 1) 14%,
    rgba(0, 0, 0, 0.5102415966386555) 100%
  );
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: -1;
  opacity: 0.6;
  background-size: cover;
  background-position: center top;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: Yellix-Bold,sans-serif;
  text-align: center;
  font-weight: 700;
}

body:after {
  /* content: ""; */
}

.mob-header {
  /* background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 1) 0%,
              rgba(0, 0, 0, 1) 7%,
              rgba(0, 0, 0, 1) 14%,
              rgba(0, 0, 0, 0.5102415966386555) 100%
            ); */
}

body a {
  text-decoration: none;
}

.phone-name,
.phone-name a {
  color: #fff;
  font-size: 4.266666666666667vw;
}

.mob-header {
  display: block;
  height: 40px;
  line-height: 40px;
}

.mob-header > div {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  vertical-align: middle;
}

.mob-header > div.phone-name, .mob-header > div.batter-icon {
    display: none;
}

.mob-header > div.signal-icon {
  text-align: right;
  width: 13%;
}

.mob-header > div.batter-icon {
  width: 16%;
  float: right;
}

.mob-header > div.phone-name {
  text-align: left;
  font-weight: 700;
}

.mob-header > div img {
  display: block;
}

.body-gradient {
  display: block;
  /* height: 40px; */
  /* line-height: 40px; */
  min-height: 100vh;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 0) 76%
  );
  background-size: cover;
  background-position: center top;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

.body-gradient video {
    object-fit: cover;
    width: 100%;
    min-height: 100%;
}

.section-title {
  font-size: 6.666666666666667vw;
  color: #fff;
  padding-top: 0;
  font-weight: 400;
  line-height: 9.333333333333334vw;
  letter-spacing: 0;
  font-weight: 400;
  /* display: none; */
}

.section-title img {
    width: 100%;
}

.onetrust-pc-dark-filter {
  background: transparent !important;
}

input {
  width: 100%;
  height: 12.6vw;
  line-height: 12.6vw;
  background: transparent;
  border: 0.26666666666666666vw solid #fff;
  box-sizing: border-box;
  font-size: 4.266666666666667vw;
  color: #ffffff;
  text-align: center;
  border-radius: 0;
  -webkit-apperance: none;
      font-family: Yellix-Bold, sans-serif;
    font-weight: 700;
}

input[type="submit"] {
  background: #fff;
  color: #FD65A8;
  cursor: pointer;
  height: 13.333333333333334vw;
  line-height: 13.333333333333334vw;
  font-size: 4.266666666666667vw;
  margin-top: 5.333333333333333vw;
  border-radius: 0;
  -webkit-appearance: none;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

input:focus {
  outline: 0;
}

/* input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
  white-space: inherit;
  position: absolute;
  top: 50%;
  width: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
} */

input#productCode,
input#email {
  position: relative;
}

input#productCode::-webkit-input-placeholder {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* text-indent: 20vw -20vw; */
  color: #fff;
  opacity: 1;
  white-space: inherit;
  /* color: red; */
}

input#email::-webkit-input-placeholder {
  white-space: unset;
  color: #fff;
  opacity: 1;
  width: 100%;
}

input::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

input:-moz-placeholder {
  color: #fff;
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  opacity: 1;
  border-radius: 0;
}

a.terms {
  color: #fff;
  text-transform: uppercase;
  padding-top: 20px;
  display: inline-block;
  font-size: 3.2vw;
  font-weight: 700;
  text-decoration: underline;
}

p.terms-message.fadeOut,
p.terms-message.fadeOut a {
  /* display: none; */
  color: #fff;
}

p.terms-message.fadeOut {
  max-width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  display: none;
}

body.success:before {
  background: url("../assets/cat-bg-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

body.success .mob-header {
  background: transparent;
}

.success .body-gradient {
  background: transparent;
}

.menu-item a {
  width: 15.466666666666667vw;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

.menu-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3vw 5vw 0;
}

.menu-item .cat img {
  border-radius: 23%;
}

.menu-item-wrapper img {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
}

.menu-item-wrapper {
  background: #000;
  border-radius: 14px;
  padding: 1px;
  box-sizing: border-box;
}

h1.is-visaully-hidden {
  visibility: hidden;
  height: 1px;
  width: 0;
  margin: 0;
}

.left-wrapper.menu-wrapper {
  width: 44%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

.right-menu-wrapper {
  width: 40.266666666666666vw;
  display: inline-block;
}

span.menuicon-name {
  text-align: center;
  font-size: 2.4vw;
  font-weight: 700;
  color: #fff;
  display: block;
}

div.footerSocials ul.socialMenu li {
  display: inline-block;
  margin: 0 2.5vw;
  vertical-align: middle;
}

div.footerSocials ul.socialMenu {
  text-align: center;
  padding: 0;
  margin: 6.153846vw auto;
}

div.footerCopyrights {
  box-sizing: border-box;
  padding: 5vw 10px;
  text-align: center;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  padding-bottom: 2vw;
}
body.showVoiceNotes div.footerCopyrights,
body.showPhonebg .footerCopyrights,
body.showMyPhotos .footerCopyrights {
  position: static;
}

div.footerCopyrights div.copyright-links div,
div.footerCopyrights div.copyright-links span,
div.footerCopyrights div.copyright-links a {
  font-size: 2.5vw;
  color: #fff;
  line-height: 2;
}

div.footerCopyrights div.copyright-links a {
  white-space: nowrap;
}

div.footerCopyrights div.copyright-links a:hover,
.phone-footer-menu li a:hover,
.back-menu:hover,
a.terms:hover,
.close-icon:hover {
  opacity: 0.5;
}

p.terms-message {
  color: #fff;
  background: transparent;
  position: absolute;
  bottom: 0;
  padding: 3vw;
}

.terms {
  position: relative;
}

p.terms-message a {
  color: #fff;
}

body.loginsuccess:before {
  background-image: url(../assets/phonebg11.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

body.loginsuccess.one:before {
  background-image: url(../assets/phonebg11.jpg);
}

.spotify-wrapper {
  max-width: 90vw;
  margin: 10.666666666666666vw auto;
  padding-top: 10.66vw;
  margin-top: 0;
}
.phone_widget {
  border-radius: 5px;
  border-radius: 20px;
  overflow: hidden;
  font-size: 0px;
}
.phone_widget img {
  display: inline;
}
body.loginsuccess .body-gradient {
  background: rgba(0, 0, 0, 0.3);
  background: transparent;
}

video#catAnimation {
  display: block;
  width: 15.466666666666667vw;
  height: 15.466666666666667vw;
  border-radius: 3vw;
  display: none;
}

.socials-menu div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.socials-menu img {
  width: 3.2vw;
  margin: 0.5vw;
}

.socials-menu {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2vw;
  width: 15.466666666666667vw;
  box-sizing: border-box;
  text-align: center;
  height: 15.466666666666667vw;
  padding: 1.7vw;
}

.socials-menu-lightbox {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  width: 80vw;
  height: 80vw;
  border-radius: 6vw;
  text-align: center;
  left: 10vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.socials-menu-lightbox div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.socials-menu-lightbox div a img {
  width: 14vw;
  margin: 0 1vw;
  display: block;
}

.socials-menu-lightbox div a {
  display: block;
  margin: 3vw;
}

.socials-menu-lightbox div:last-child {
  text-align: left;
}

.close-icon {
  color: #fff;
  position: absolute;
  right: 3vw;
  top: 3vw;
  font-weight: 700;
  font-size: 5vw;
  cursor: pointer;
}

.phone-wrapper {
  min-height: calc(100vh - 44vw);
}

.information {
  color: #fff;
  max-width: 100%;
  margin: 8vw auto 0;
  font-size: 4.266666666666667vw;
  line-height: 5.866666666666666vw;
  font-weight: 700;
}

.waveform > div.title-duration {
  font-size: 4.266666666666667vw;
  line-height: 5.866666666666666vw;
  font-weight: 700;
}

.globaloptin {
  margin-top: 2vw;
}

.globaloptin {
  width: 100%;
  margin: 4vw auto;
}

.globaloptin input[type="checkbox"] {
  width: 5vw;
  height: 5vw;
  display: inline-block;
  vertical-align: top;
  border: 0.26666666666666666vw solid #fff;
  margin-right: 0;
  opacity: 1;
  -webkit-appearance: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  padding: 0;
  margin: 0;
  background: transparent;
  position: relative;
  outline: 0;
  box-sizing: border-box;
}

input#artist_mktg_consent.errored {
  border: 0.1vw solid red;
}

.globaloptin label {
  width: 87%;
  padding-left: 3%;
  text-align: left;
  display: inline-block;
  font-size: 2vw;
}

.globaloptin label,
.globaloptin label a {
  font-size: 2.9vw;
  color: #fff;
  background: transparent;
  line-height: 1.6;
}

.globaloptin label a:hover {
  opacity: 0.7;
}

input#artist_mktg_consent:checked:after {
  content: "\2713";
  color: #fff;
  display: block;
  text-align: center;
  font-size: 4vw;
  box-sizing: border-box;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.globaloptin label a {
  text-decoration: underline;
}

.mob-header {
  display: block;
  height: 12.5vw;
  line-height: 12.5vw;
  max-width: 61%;
  margin: 8vw auto 12vw;
}
form.login-form {
  min-height: auto;
  padding: 20vw 0;
  max-width: 85.6vw;
  margin: 0 auto;
  padding-top: 0;
}

.productcode-wrapper {
  position: relative;
  margin-bottom: 5.933333333333333vw;
}


input#productCode {
    margin-top: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto 6vw;
    border: none;
    padding: 0;
    background: repeating-linear-gradient(90deg, #fff 0, #fff 2ch, transparent 0, transparent 3ch) 0 100% / 26ch 2px no-repeat;
    text-align: left;
    font-size: 5.266667vw;
    text-transform: uppercase;
    letter-spacing: 6.5vw;
    text-indent: 2.5vw;
}

.productcode-wrapper input, .productcode-wrapper span {
    border: 0;
    display: inline-block;
    width: 6.09%;
    border-bottom: 2px solid #fff;
    vertical-align: bottom;
    text-align: left;
    margin: 0 1.5%;
    text-transform: uppercase;
    text-align: center;
    padding: 0;
}

.productcode-wrapper {
    font-size: 0;
}

.productcode-wrapper span {
    opacity: 0;
}

.productcode-wrapper input:first-child {
    margin-left: 0;
}

.productcode-wrapper input:last-child {
    margin-right: 0;
}

.productcode-wrapper span {
    margin: 0 2.25%;
}

.productcode-wrapper::after {
  /*content: "13-DIGIT BARCODE FROM YOUR CD OR VINYL";
  font-size: 4.266666666666667vw;
  color: #fff;
  position: absolute;
  width: 65%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;*/
}

.productcode-wrapper.has-value::after,
.productcode-wrapper.focused::after {
  opacity: 0;
}
input#email {
  height: 13.333333333333334vw;
  line-height: 13.333333333333334vw;
}
#voicenotesAnimation {
  width: 15.466666666666667vw;
  height: 15.466666666666667vw;
  border-radius: 3vw;
  background: #000;
}
div#catHoverVideo {
  position: relative;
}
body.loginsuccess .footerCopyrights {
  position: static;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  body.loginsuccess .footerCopyrights {
    position: absolute;
  }
}
@media only screen and (min-width: 1025px) {
  /* ,only screen and (max-width: 1024px) and (orientation: landscape) { */
  .mob-header {
    display: block;
    height: 2vw;
    line-height: 2vw;
    margin: 2vw auto 5vw;
  }
  body:before {
    /*background-image: url(../assets/phonebg11.jpg);*/
  }

  .mob-header > div.batter-icon {
    width: auto;
    margin-right: 2vw;
  }

  .mob-header > div.signal-icon {
    width: auto;
  }

  .mob-header {
        text-align: center;
    /* margin-top: 1vw; */
  }

  .mob-header > div.phone-name {
    float: left;
    margin-left: 2vw;
    font-size: 1.25vw;
  }

  .section-title {
    font-size: 1.953125vw;
    line-height: 2.734375vw;
  }

  input {
    width: 100%;
    height: 4.15625vw;
    line-height: 4.15625vw;
    font-size: 1.171875vw;
    border: 0.078125vw solid #fff;
  }

  input#productCode {
    margin-top: 4vw;
  }
  form.login-form {
    min-height: 95vh;
    padding-top: 0;
  }

  div.footerCopyrights div.copyright-links div,
  div.footerCopyrights div.copyright-links span,
  div.footerCopyrights div.copyright-links a {
    font-size: 0.9375vw;
    line-height: 2vw;
  }

  div.footerCopyrights {
    position: static;
    padding: 1.5vw 0;
    margin-top: 0;
  }

  a.terms {
    font-size: 0.9375vw;
  }

  p.terms-message {
    font-size: 0.9375vw;
    width: 30vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 1vw;
  }
  input[type="submit"] {
    font-size: 1.171875vw;
    line-height: 3.90625vw;
    margin-top: 1.5625vw;
    height: 3.90625vw;
  }

  body.loginsuccess:before {
    background-image: url(../assets/phonebg11.jpg);
    background-size: cover;
  }

  body.loginsuccess.one:before {
    background-image: url(../assets/phonebg11.jpg);
    background-size: cover;
  }
  .phone-wrapper {
    min-height: auto;
  }

  .right-menu-wrapper {
    width: 12vw;
  }

  span.menuicon-name {
    font-size: 0.703125vw;
  }

  .spotify-wrapper {
    max-width: 26vw;
    margin-left: 2vw;
    margin-top: 3.125vw;
    margin-bottom: 3.515625vw;
    padding-top: 3.125vw;
    margin-top: 0;
  }

  .left-wrapper.menu-wrapper {
    width: 12.5vw;
  }

  .menu-item a {
    width: 4.53125vw;
  }

  .menu-item {
    margin-right: 1vw;
    margin-bottom: 1vw;
  }

  .menu-instagram-wrapper {
    text-align: left;
    margin-left: 2vw;
  }

  video#catAnimation {
    display: block;
    width: 4.466667vw;
    height: 4.466667vw;
    border-radius: 1vw;
  }

  #catImage span.menuicon-name {
    margin-top: 0.4vw;
  }

  .socials-menu {
    width: 4.53125vw;
    height: 4.53125vw;
    border-radius: 1.09375vw;
    padding: 0.7vw;
  }

  .socials-menu img {
    width: 0.9375vw;
    margin: 0.05vw;
  }

  .socials-menu {
    width: 4.53125vw;
    height: 4.53125vw;
    border-radius: 1.09375vw;
    padding: 0.7vw;
  }

  .socials-menu img {
    width: 0.9375vw;
    margin: 0.05vw;
  }

  .socials-menu-lightbox {
    width: 30vw;
    height: 30vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .socials-menu-lightbox div a {
    margin: 1vw;
  }

  .socials-menu-lightbox div a img {
    width: 5vw;
  }

  .close-icon {
    font-size: 1vw;
  }

  form.login-form {
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25.078125vw;
    min-height: calc(100vh - 0vw);
    padding: 0;
    box-sizing: border-box;
  }

  .globaloptin label,
  .globaloptin label a {
    font-size: 0.9375vw;
    line-height: 1.2;
  }

  .globaloptin {
    width: 100%;
    margin-top: 1vw;
  }

  .globaloptin input[type="checkbox"] {
    width: 1.8vw;
    height: 1.8vw;
    cursor: pointer;
    border: 0.078125vw solid #fff;
  }
  .globaloptin label {
    width: 88%;
    padding-left: 4%;
    text-align: left;
    display: inline-block;
  }

  input#artist_mktg_consent:checked:after {
    font-size: 1.25vw;
    top: 0;
    line-height: 1.5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .information {
    font-size: 1.25vw;
    max-width: 100%;
    margin: 2vw auto 0;
    line-height: 1.71875vw;
  }

  .waveform > div.title-duration {
    font-size: 1vw;
    line-height: 1.71875vw;
  }

  .productcode-wrapper {
    position: relative;
    margin-top: 0;
  }

  input#productCode {
    margin-top: 0;
  }

  .productcode-wrapper {
    position: relative;
    margin-top: 0;
    width: 100%;
  }

  input#productCode {
    margin: 0 auto 2vw;
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* Ensure input is above the ::after content */
    font-size: 1.171875vw;
    letter-spacing: 2.2vw;
    text-indent: 0.5vw;
    background: repeating-linear-gradient(90deg, #fff 0, #fff 2ch, transparent 0, transparent 4ch) 0 100% / 34ch 2px no-repeat;
  }

  .productcode-wrapper::after {
    /*content: "13-DIGIT BARCODE FROM YOUR CD OR VINYL";
    font-size: 1.171875vw;
    color: #fff;
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;*/
  }

  .productcode-wrapper.has-value::after,
  .productcode-wrapper.focused::after {
    opacity: 0;
  }
  input#email {
    height: 3.90625vw;
    line-height: 3.90625vw;
  }
  .productcode-wrapper {
    margin-bottom: 1.9375vw;
  }
  #voicenotesAnimation {
    display: block;
    width: 4.466667vw;
    height: 4.466667vw;
    border-radius: 1vw;
  }
  div#catHoverVideo:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      169deg,
      rgba(221, 120, 13, 1) -46%,
      rgba(255, 255, 255, 0.01724439775910369) 50%
    );
    width: 4.466667vw;
    height: 4.466667vw;
    border-radius: 1vw;
    /* background: radial-gradient(circle, rgba(221,120,13,1) 0%, rgba(255,255,255,0.01724439775910369) 100%); */
  }

  div#catHoverVideo {
    position: relative;
  }
  .phone-wrapper {
    min-height: calc(100vh - 5vw);
  }
  body.loginsuccess .phone-name,
  .phone-name a {
    font-size: 1.09vw;
  }
}
.overlay {
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.overlay.show {
  z-index: 1;
}
.error-message {
  display: none;
}

.productcode-wrapper.hide-after + .productcode-wrapper::after {
  content: "Invalid code. Please try again.";
    color: red;
    font-size: initial;
    padding: 15px 0 0;
    display: inline-block;
}
@media only screen and (max-width: 1023px) and (orientation: landscape) {
  body div.footerCopyrights, body.errorPage div.footerCopyrights {
      position: static;
  }
}