/* screen - menu */

.menu {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  height: 844px;
  overflow: hidden;
  width: 390px;
}

.menu .overlap-group5 {
  background-image: url(../img/ethan-front-cover-face@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 907px;
  margin-left: -156px;
  margin-top: -53px;
  position: relative;
  width: 906px;
}

.menu .rectangle-2 {
  border-radius: 41px;
  height: 844px;
  left: 156px;
  position: absolute;
  top: 53px;
  width: 390px;
}

.menu .text-43 {
  left: 175px;
  letter-spacing: 0;
  line-height: 18px;
  position: absolute;
  top: 70px;
  white-space: nowrap;
}

.menu .rectangle-7 {
  background-color: #afafaf;
  border-radius: 10px;
  height: 26px;
  left: 171px;
  opacity: 0.78;
  position: absolute;
  top: 100px;
  width: 361px;
}

.menu .search {
  color: var(--white);
  font-family: var(--font-family-helveticaneue-regular);
  font-size: 16px;
  font-weight: 400;
  left: 183px;
  letter-spacing: 0;
  line-height: 16px;
  position: absolute;
  top: 105px;
  white-space: nowrap;
}

.menu .group-2 {
  background: linear-gradient(180deg, #69ba69 0%, #355d35 100%);
  border-radius: 21px;
  height: 46px;
  left: 175px;
  position: absolute;
  top: 159px;
  width: 55px;
}

.menu .group-6 {
  background: linear-gradient(180deg, #2c9ced 0%, #164e77 100%);
  border-radius: 21px;
  height: 46px;
  left: 174px;
  position: absolute;
  top: 234px;
  width: 55px;
}

.menu .group-4 {
  background: linear-gradient(180deg, #d05488 0%, #682a44 100%);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 398px;
  position: absolute;
  top: 159px;
  width: 55px;
}

.menu .flower {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .instagram-1 {
  cursor: pointer;
  height: 46px;
  left: 252px;
  object-fit: cover;
  position: absolute;
  top: 159px;
  width: 46px;
}

.menu .group-3 {
  background: linear-gradient(180deg, #4da4e3 0%, #275272 100%);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 321px;
  position: absolute;
  top: 159px;
  width: 55px;
}

.menu .chatting {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-8 {
  background-color: var(--white);
  border-radius: 21px;
  display: flex;
  height: 46px;
  left: 326px;
  position: absolute;
  top: 234px;
  width: 55px;
}

.menu .search-1 {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-11 {
  background: linear-gradient(180deg, #576aff 0%, #2c3580 100%);
  border-radius: 21px;
  height: 46px;
  left: 478px;
  position: absolute;
  top: 306px;
  width: 55px;
}

.menu .group-9 {
  background-color: var(--white);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 401px;
  position: absolute;
  top: 234px;
  width: 55px;
}

.menu .youtube-1 {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-14 {
  background-color: var(--white);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 244px;
  position: absolute;
  top: 306px;
  width: 55px;
}

.menu .google-maps {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-126 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/6156cc60e867972e6d4ccf9c/files/notes-gif.gif);
  background-position: 50% 50%;
  background-size: cover;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 175px;
  position: absolute;
  top: 306px;
  width: 55px;
}

.menu .group-126 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.menu .group-126 img {
  object-fit: cover;
}

.menu .rectangle-20 {
  background-image: url(https://anima-uploads.s3.amazonaws.com/projects/6156cc60e867972e6d4ccf9c/files/notes-gif.gif);
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 21px;
  flex: 1;
  width: 55px;
}

.menu .rectangle-20 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.menu .rectangle-20 img {
  object-fit: cover;
}

.menu .group-13 {
  background-color: var(--white);
  border-radius: 21px;
  display: flex;
  height: 46px;
  left: 322px;
  position: absolute;
  top: 306px;
  width: 55px;
}

.menu .chrome {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-10 {
  background: linear-gradient(180deg, #bd56e3 0%, #5f2b72 100%);
  border-radius: 21px;
  height: 46px;
  left: 477px;
  position: absolute;
  top: 234px;
  width: 55px;
}

.menu .menu-1 {
  height: 22px;
  left: 494px;
  object-fit: cover;
  position: absolute;
  top: 102px;
  width: 22px;
}

.menu .group-12 {
  align-items: flex-end;
  background: linear-gradient(180deg, #9b9b9b 0%, #4e4e4e 100%);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 400px;
  min-width: 55px;
  padding: 7px 12px;
  position: absolute;
  top: 306px;
}

.menu .overlap-group {
  align-items: flex-start;
  background-image: url(../img/settings-1@1x.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  min-width: 31px;
}

.menu .settings {
  height: 31px;
  object-fit: cover;
  width: 31px;
}

.menu .group-7 {
  background: linear-gradient(180deg, #69ba69 0%, #355d35 100%);
  border-radius: 21px;
  height: 46px;
  left: 250px;
  position: absolute;
  top: 234px;
  width: 55px;
}

.menu .group-5 {
  background: linear-gradient(180deg, #c41012 0%, #620809 100%);
  border-radius: 21px;
  display: flex;
  height: 46px;
  left: 475px;
  position: absolute;
  top: 159px;
  width: 55px;
}

.menu .diaphragm {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .group-27 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(128, 128, 128, 0.13) 100%);
  border-radius: 21px;
  height: 46px;
  left: 324px;
  position: absolute;
  top: 831px;
  width: 55px;
}

.menu .wifi {
  height: 22px;
  left: 454px;
  object-fit: cover;
  position: absolute;
  top: 68px;
  width: 22px;
}

.menu .battery {
  height: 22px;
  left: 504px;
  object-fit: cover;
  position: absolute;
  top: 68px;
  width: 22px;
}

.menu .facebook-logo {
  cursor: pointer;
  height: 38px;
  left: 183px;
  object-fit: cover;
  position: absolute;
  top: 242px;
  width: 38px;
}

.menu .twitter1 {
  height: 31px;
  left: 490px;
  object-fit: cover;
  position: absolute;
  top: 314px;
  width: 31px;
}

.menu .whatsapp {
  cursor: pointer;
  height: 31px;
  left: 187px;
  object-fit: cover;
  position: absolute;
  top: 167px;
  width: 31px;
}

.menu .phone-call {
  height: 31px;
  left: 262px;
  object-fit: cover;
  position: absolute;
  top: 242px;
  width: 31px;
}

.menu .overlap-group1 {
  height: 19px;
  left: 361px;
  position: absolute;
  top: 151px;
  width: 15px;
}

.menu .ellipse-242 {
  background-color: var(--sandy-brown);
  border-radius: 7.5px;
  height: 15px;
  left: 0;
  position: absolute;
  top: 0;
  width: 15px;
}

.menu .number {
  left: 4px;
  letter-spacing: 0;
  line-height: 15px;
  position: absolute;
  text-align: center;
  top: 0;
  white-space: nowrap;
}

.menu .overlap-group2 {
  height: 19px;
  left: 215px;
  position: absolute;
  top: 151px;
  width: 15px;
}

.menu .overlap-group3 {
  height: 19px;
  left: 284px;
  position: absolute;
  top: 151px;
  width: 15px;
}

.menu .overlap-group4 {
  height: 19px;
  left: 284px;
  position: absolute;
  top: 301px;
  width: 15px;
}

.menu .play {
  height: 15px;
  left: 443px;
  object-fit: cover;
  position: absolute;
  top: 228px;
  width: 15px;
}

.menu .clock {
  height: 31px;
  left: 489px;
  object-fit: cover;
  position: absolute;
  top: 242px;
  width: 31px;
}

.menu .exclamation-mark {
  height: 12px;
  left: 214px;
  object-fit: cover;
  position: absolute;
  top: 230px;
  width: 12px;
}

.menu .home {
  cursor: pointer;
  height: 32px;
  left: 335px;
  object-fit: cover;
  position: absolute;
  top: 838px;
  width: 32px;
}

.menu .x5g {
  height: 22px;
  left: 479px;
  object-fit: cover;
  position: absolute;
  top: 68px;
  width: 22px;
}

.menu .whatsapp-1 {
  left: 183px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 209px;
  white-space: nowrap;
}

.menu .facebook {
  left: 183px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 284px;
  white-space: nowrap;
}

.menu .notes {
  left: 191px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 360px;
  white-space: nowrap;
}

.menu .google-maps-1 {
  left: 248px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 360px;
  white-space: nowrap;
}

.menu .google-chrome {
  left: 323px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 360px;
  white-space: nowrap;
}

.menu .settings-1 {
  left: 413px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 360px;
  white-space: nowrap;
}

.menu .twitter {
  left: 493px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 360px;
  white-space: nowrap;
}

.menu .info-getter {
  left: 489px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 434px;
  white-space: nowrap;
}

.menu .google-mail {
  left: 406px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 434px;
  white-space: nowrap;
}

.menu .takealot {
  left: 343px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 434px;
  white-space: nowrap;
}

.menu .calls {
  left: 266px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 284px;
  white-space: nowrap;
}

.menu .google {
  left: 341px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 284px;
  white-space: nowrap;
}

.menu .you-tube {
  left: 413px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 284px;
  white-space: nowrap;
}

.menu .clock-1 {
  left: 494px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 284px;
  white-space: nowrap;
}

.menu .instagram {
  left: 257px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 209px;
  white-space: nowrap;
}

.menu .messages {
  left: 331px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 209px;
  white-space: nowrap;
}

.menu .gallery {
  left: 413px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 209px;
  white-space: nowrap;
}

.menu .camera {
  left: 487px;
  letter-spacing: 0;
  line-height: 8px;
  position: absolute;
  top: 209px;
  white-space: nowrap;
}

.menu .info {
  cursor: pointer;
  height: 46px;
  left: 482px;
  object-fit: cover;
  position: absolute;
  top: 385px;
  width: 46px;
}

.menu .group-161 {
  background-color: var(--white);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  height: 46px;
  left: 401px;
  position: absolute;
  top: 385px;
  width: 55px;
}

.menu .gmail-1 {
  flex: 1;
  margin-bottom: 7px;
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 8px;
  object-fit: cover;
  width: 31px;
}

.menu .unnamed {
  border-radius: 22px;
  cursor: pointer;
  height: 46px;
  left: 330px;
  object-fit: cover;
  position: absolute;
  top: 385px;
  width: 55px;
}