body.menuFileClicked .phone-wrapper,
body.showVoiceNotes .phone-wrapper,
body.showPhonebg .phone-wrapper,
body.showMyPhotos .phone-wrapper {
  display: none;
}

body.menuFileClicked,
body.showVoiceNotes,
body.showPhonebg,
body.showMyPhotos {
  background: #000;
  color: #fff;
  font-family: courier-std, monospace;
}

.back-menu {
  float: left;
  font-size: 3.2vw;
  font-weight: 400;
  margin-left: 3vw;
  z-index: 1;
  position: relative;
  line-height: 5vw;
  cursor: pointer;
}

.menu-heading {
  font-size: 5.333333333333333vw;
  font-weight: 700;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 0;
  line-height: 5vw;
}

.back-menu img {
  display: inline-block;
  vertical-align: middle;
  width: 2.5vw;
  margin-right: 2vw;
}

.global-menu-slider ul.menu-ul-wrapper {
  padding: 0 6vw;
  padding-top: 11vw;
  box-sizing: border-box;
  text-align: left;
}

body.menuFileClicked:before,
.total-wrap,
body.showVoiceNotes:before,
.voicenotes-innerwrapper,
body.showPhonebg:before,
body.showMyPhotos::before,
.Phonebg-innerwrapper,
.Myphotos-innerwrapper,
body.menuFileClicked div.footerCopyrights {
  display: none;
}

body.menuFileClicked .total-wrap,
body.showVoiceNotes .voicenotes-innerwrapper,
body.showPhonebg .Phonebg-innerwrapper,
body.showMyPhotos .Myphotos-innerwrapper {
  display: block;
}

.global-menu-slider ul.menu-ul-wrapper li span {
  font-size: 4.266666666666667vw;
  font-weight: 700;
  line-height: 5.866666666666666vw;
}

ul.menu-ul-wrapper li img {
  width: 10.666666666666666vw;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(1);
}

ul.menu-ul-wrapper li:nth-child(1) img {
  filter: none;
}

.global-menu-slider ul.menu-ul-wrapper li {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  /* border-bottom: 0.5vw solid #707070; */
  padding: 6vw 0 0vw;
  cursor: pointer;
}

.global-menu-slider ul.menu-ul-wrapper li > div:nth-child(2) {
  width: 80%;
  margin: 0 0 0 5%;
  padding: 0 0 5.413333333333333vw;
  border-bottom: 0.2vw solid #707070;
}
.global-menu-slider ul.menu-ul-wrapper li > div:nth-child(3) {
  border-bottom: 0.2vw solid #707070;
}
.global-menu-slider ul.menu-ul-wrapper li span.arrow-image {
  cursor: pointer;
  margin-top: 0.4vw;
  display: inline-block;
}

.global-menu-slider ul.menu-ul-wrapper li span.arrow-image img {
  width: 5vw;
  opacity: 0.7;
}

.sub-info {
  font-size: 2.6666666666666665vw;
  color: rgba(255, 255, 255, 0.7);
  line-height: 3.7333333333333334vw;
}

.song-title {
  text-align: left;
  font-size: 3.2vw;
  font-weight: 700;
  text-transform: uppercase;
}

.player-wrapper li {
  list-style-type: none;
  border-bottom: 1px solid #fff;
  padding: 1vw 0;
}

.player-wrapper ul {
  padding: 0;
  width: 90vw;
  margin: 0 auto;
}

.player-wrapper {
  padding-top: 15vw;
}
.Background-wrapper ul {
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 11vw;
}

.Background-wrapper ul li {
  width: 30%;
  list-style-type: none;
  margin: 0 1.2% 3vw;
}

.MyPhotos-wrapper ul {
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 11vw;
}

.MyPhotos-wrapper ul li {
  width: 45%;
  list-style-type: none;
  margin: 0 2% 4%;
}

img {
  max-width: 100%;
  height: auto;
}

.image-title {
  word-wrap: break-word;
  font-size: 2.6vw;
  margin-top: 1vw;
  text-align: left;
}
.image-title span.downloadImage,
span.downloadImage,
span.downloadImage {
  content: "";
  background: url(../assets/material-file-download.svg);
  width: 3vw;
  height: 3vw;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  background-color: transparent;
  margin: 0;
  margin-right: 1.4vw;
  vertical-align: middle;
}
.image-title span {
  width: 80%;
  display: inline-block;
  vertical-align: top;
}

/* ---------------- */

.Myphotos-innerwrapper .image-title {
  word-wrap: break-word;
  font-size: 2.6vw;
  text-align: left;
  margin: 2.5vw auto 0;
}
.Myphotos-innerwrapper .image-title span.downloadImage,
span.downloadImage {
  content: "";
  background: url(../assets/material-file-download.svg);
  width: 3vw;
  height: 3vw;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  background-color: transparent;
  margin: 0;
  margin-right: 1.4vw;
  vertical-align: middle;
}
.Myphotos-innerwrapper .image-title span {
  width: 80%;
  display: inline-block;
  vertical-align: top;
}
/* ------ */
.voicenotes-innerwrapper {
  margin-top: 5vw;
}

div.footerCopyrights span.copyright {
  line-height: 1;
  display: inline-block;
  position: relative;
  /*top: 0.2vw;*/
}
.phone-footer-menu li {
  width: 15.466666666666667vw;
  list-style-type: none;
}

.phone-footer-menu ul {
  display: flex;
  padding: 0;
  margin: 0;
  /* margin: 0 6vw; */
  align-items: center;
  justify-content: space-between;
}

.phone-footer-menu {
  width: 90%;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8vw;
  margin: 9vw auto 5vw;
  padding: 0;
  box-sizing: border-box;
  position: static;
  bottom: 10vh;
  left: 50%;
  transform: none;
}
.Background-wrapper {
  margin-top: 5vw;
}

.MyPhotos-wrapper {
  margin-top: 5vw;
}
.tedafoneDesktop {
  display: none;
}
body .phone-name a {
  pointer-events: none;
}

/* body.loginsuccess .phone-name a, */
body.menuFileClicked .phone-name a,
body.menuFileClicked .phone-name a,
body.showVoiceNotes .phone-name a,
body.showPhonebg .phone-name a,
body.showMyPhotos .phone-name a {
  pointer-events: all;
}
@media only screen and (min-width: 1025px) {
  /* ,only screen and (max-width: 1024px) and (orientation: landscape) { */
  .global-menu-slider ul.menu-ul-wrapper li > div:nth-child(3) {
    border-bottom: 0.12vw solid #707070;
  }
  .global-menu-slider ul.menu-ul-wrapper {
    width: 28.28125vw;
    position: fixed;
    background: rgba(255, 255, 255, 0.2);
    left: 0;
    height: 100vh;
    top: 0;
    padding: 11vw 1.5vw 0;
    margin: 0;
  }

  .global-menu-slider ul.menu-ul-wrapper li span {
    font-size: 1.25vw;
    line-height: 1.71875vw;
  }

  .sub-info {
    font-size: 0.78125vw;
    line-height: 1.09375vw;
  }

  ul.menu-ul-wrapper li img {
    width: 3.125vw;
  }

  .global-menu-slider ul.menu-ul-wrapper li span.arrow-image img {
    width: 1.5vw;
  }

  .global-menu-slider ul.menu-ul-wrapper li {
    padding: 0;
    border-width: 0.2vw;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 1vw;
    padding: 0.5vw;
  }
  .global-menu-slider ul.menu-ul-wrapper li > div:nth-child(2) {
    margin-bottom: 0;
    padding-bottom: 1.5625vw;
    border-bottom-width: 0.12vw;
  }
  .back-menu {
    font-size: 1.09375vw;
    margin-left: 1vw;
    position: fixed;
    top: 2vw;
    line-height: 1.40625vw;
  }

  .back-menu img {
    width: 0.8vw;
    position: relative;
    top: -0.1vw;
    margin-right: 0.8vw;
  }
  body.menuFileClicked .phone-name {
    display: none;
  }

  .song-title {
    font-size: 0.9375vw;
  }
  body.showVoiceNotes .total-wrap,
  body.showPhonebg .total-wrap,
  body.showMyPhotos .total-wrap {
    display: block;
  }
  .voicenotes-innerwrapper,
  .Phonebg-innerwrapper,
  .Myphotos-innerwrapper {
    width: 70%;
    margin: 0 auto;
  }
  .voicenotes-innerwrapper .back-menu,
  .Phonebg-innerwrapper .back-menu,
  .Myphotos-innerwrapper .back-menu {
    display: none;
  }

  .voicenotes-innerwrapper .menu-heading,
  .Phonebg-innerwrapper .menu-heading,
  .Myphotos-innerwrapper .menu-heading {
    display: none;
  }

  .menu-heading {
    width: auto;
    font-size: 3.125vw;
    position: fixed;
    top: 6vw;
    left: 1.5vw;
    line-height: 4.375vw;
    z-index: 9;
  }
  .Background-wrapper ul li {
    width: 15.5vw;
  }
  .Background-wrapper ul {
    justify-content: flex-start;
  }

  .MyPhotos-wrapper ul li {
    width: 12.109375vw;
    list-style-type: none;
    margin: 0 3.5% 4.6875vw;
  }

  .image-title span.downloadImage,
  span.downloadImage {
    width: 0.6171875vw;
    height: 0.6171875vw;
    margin-right: 0vw;
  }
  .Myphotos-innerwrapper .image-title span {
    width: 90%;
  }

  .image-title {
    font-size: 0.78125vw;
    text-align: left;
    margin-top: 1vw;
  }

  .Myphotos-innerwrapper .image-title span.downloadImage,
  span.downloadImage {
    width: 0.6171875vw;
    height: 0.6171875vw;
    margin-right: 0vw;
  }

  .Myphotos-innerwrapper .image-title {
    font-size: 0.78125vw;
    text-align: left;
    margin-top: 1vw;
  }

  .menu-heading:before {
    content: "Tedafone";
    display: block;
    position: fixed;
    top: 2vw;
    left: 8vw;
    font-size: 1.25vw;
    line-height: 1.40625vw;
    cursor: pointer;
    z-index: 9999;
  }
  body.showPhonebg li.phone-bg,
  body.showMyPhotos li.my-photos,
  body .menu-ul-wrapper li:hover {
    background: #f85905;
    border-radius: 1.098901098901099vw;
    padding: 0.5vw;
  }
  body.showVoiceNotes li.voice-notes {
    background: #f85905;
    border-radius: 1.098901098901099vw;
  }
  body.showVoiceNotes ul.menu-ul-wrapper li img {
    filter: grayscale(1);
  }

  body.showVoiceNotes div.footerCopyrights,
  body.showPhonebg div.footerCopyrights,
  body.showMyPhotos div.footerCopyrights {
    position: static;
    width: 71.7%;
    margin-right: 0;
    margin-left: auto;
    right: 0;
    clear: both;
    padding-top: 7vw;
  }
  body.menuFileClicked div.footerCopyrights,
  body.showVoiceNotes .mob-header > div.phone-name,
  body.showPhonebg .mob-header > div.phone-name,
  body.showMyPhotos .mob-header > div.phone-name {
    display: none;
  }
  .phone-footer-menu {
    width: 27.34375vw;
    padding: 1.5vw;
    border-radius: 2.34375vw;
    bottom: 7vw;
    margin-top: 2vw;
    position: absolute;
    bottom: 6vw;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3vw;
  }

  .phone-footer-menu li {
    width: 4.53125vw;
  }

  .Background-wrapper ul,
  .player-wrapper,
  .MyPhotos-wrapper ul {
    padding-top: 0;
  }
  .Background-wrapper {
    margin-top: 0;
  }
  .MyPhotos-wrapper {
    margin-top: 0;
  }
  .menu-heading:before {
    display: none;
  }
  .tedafoneDesktop {
    display: block;
    position: fixed;
    top: 2vw;
    left: 8vw;
    font-size: 1.25vw;
    line-height: 1.40625vw;
    cursor: pointer;
    z-index: 9999;
  }
  .tedafoneDesktop:hover {
    opacity: 0.5;
  }
}

/* ------------voice notes stylings------------------- */
/* body.menuVoiceNotesClicked .phone-wrapper {
  display: none;
}

body.menuVoiceNotesClicked {
  background: #000;
  color: #fff;
  font-family: courier-std, monospace;
}

body.menuVoiceNotesClicked:before,
body.menuVoiceNotesClicked div.footerCopyrights {
  display: none;
}

body.menuVoiceNotesClicked .total-wrap {
  display: block;
}

body.menuVoiceNotesClicked .menu-heading.Filesopen,
body.menuVoiceNotesClicked ul.menu-ul-wrapper.Filesopen {
  display: none;
}

body.showVoiceNotes .menu-heading.Filesopen,
body.showVoiceNotes ul.menu-ul-wrapper.Filesopen {
  display: none;
}

body.menuFileClicked .menu-heading.voiceNoteOpen,
body.menuFileClicked ul.menu-ul-wrapper.voiceNoteOpen {
  display: none;
}

body.showPhonebg .menu-heading.voiceNoteOpen,
body.showPhonebg ul.menu-ul-wrapper.voiceNoteOpen {
  display: none;
}

body.showMyPhotos .menu-heading.voiceNoteOpen,
body.showMyPhotos ul.menu-ul-wrapper.voiceNoteOpen {
  display: none;
}

@media only screen and (min-width: 1025px),
  only screen and (max-width: 1024px) and (orientation: landscape) {
  body.showMyPhotos .menu-heading.voiceNoteOpen,
  body.showMyPhotos ul.menu-ul-wrapper.voiceNoteOpen {
    display: none;
  }
  body.showPhonebg .menu-heading.voiceNoteOpen,
  body.showPhonebg ul.menu-ul-wrapper.voiceNoteOpen {
    display: none;
  }
  body.showVoiceNotes .menu-heading.Filesopen,
  body.showVoiceNotes ul.menu-ul-wrapper.Filesopen {
    display: none;
  }

  body.menuFileClicked .menu-heading.voiceNoteOpen,
  body.menuFileClicked ul.menu-ul-wrapper.voiceNoteOpen {
    display: none;
  }
  body.menuVoiceNotesClicked .menu-heading.Filesopen,
  body.menuVoiceNotesClicked ul.menu-ul-wrapper.Filesopen {
    display: none;
  }

  body.menuVoiceNotesClicked .phone-name {
    display: none;
  }

  body.menuVoiceNotesClicked div.footerCopyrights {
    display: none;
  }
} */

@media screen and (max-width: 1024px) and (orientation: landscape) {
  .phone-footer-menu {
    position: static;
    transform: none;
  }
  .image-title {
    font-size: 1.8vw;
  }
}
@media only screen and (min-width: 2500px) {
  .phone-footer-menu {
    margin-top: 24rem;
  }
}
