@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-500.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-300.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-100.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;
}

body {
  color: #fff;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

.main {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.container {
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: 100svh;
  max-height: 100svh;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  position: relative;
}

.body {
  background-color: #1a1a1a;
}

.iphone-screen {
  z-index: 200;
  border-radius: 32px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.keypad-container {
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin-bottom: 5svh;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  position: relative;
}

.key-circle {
  z-index: 80;
  aspect-ratio: 1;
  cursor: auto;
  background-color: #ffffff1a;
  border-radius: 50%;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  padding: 12px;
  transition: background-color .2s;
  display: flex;
  position: relative;
}

.key-circle:active {
  background-color: #fff3;
}

.keypad-row {
  z-index: 90;
  grid-template: ". . ."
                 ". . ."
                 ". . ."
                 "Area Area Area"
                 / 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: space-between;
  margin-bottom: 16px;
  display: flex;
  position: relative;
}

.keypad-row.bottom-row {
  justify-content: center;
}

.bg-image {
  z-index: 10;
  object-fit: cover;
  height: 110%;
  position: absolute;
}

.keypad-text {
  z-index: 60;
  text-align: center;
  font-size: 32px;
  position: relative;
}

.circles-container {
  z-index: 300;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 220px;
  margin-top: 20svh;
  display: flex;
  position: relative;
}

.heading {
  margin-top: 0;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 400;
  line-height: 20px;
}

.circles-wrapper {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.code-circle {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

.apps-wrapper {
  z-index: 200;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  position: relative;
}

.apps-bar-container {
  background-color: #ffffff40;
  border-radius: 40px;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  padding: 20px;
  display: flex;
  position: relative;
}

.apps-bar-container.normal-apps {
  background-color: #0000;
  padding-top: 16px;
  padding-bottom: 16px;
}

.apps-container {
  width: 100%;
  margin-top: 48px;
  position: relative;
}

.app {
  aspect-ratio: auto;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  transition: background-color .2s;
  display: flex;
  position: relative;
}

.app-label {
  text-align: center;
  margin-bottom: -20px;
  font-size: 12px;
  line-height: 12px;
  position: absolute;
  inset: auto auto 0%;
}

.heading-container {
  z-index: 100;
  width: 100%;
  padding-left: 32px;
  position: relative;
}

.inside-app-heading {
  color: #000;
}

.list-container {
  z-index: 100;
  padding-left: 32px;
  position: relative;
  overflow: hidden;
}

.list-text {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

.list-text.category {
  color: #8d8d8d;
  font-weight: 400;
}

.list-text.red {
  color: red;
}

.list-item {
  border-top: 1px solid #cecece;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.list-text-container {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 32px;
  display: flex;
}

.phone-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  position: relative;
  overflow: scroll;
}

.app-image {
  border-radius: 16px;
}

.status-bar {
  z-index: 900;
  pointer-events: none;
  width: 100%;
  padding: 16px 36px;
  position: absolute;
  inset: 0% 0% auto;
}

.clock {
  opacity: .75;
  margin-bottom: 0;
  font-size: 16px;
}

.lock-screen {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  display: flex;
}

.apps {
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: none;
}

.phone-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.bg {
  z-index: 10;
  object-fit: cover;
  background-color: #fefefe;
  width: 100%;
  height: 100%;
  position: absolute;
}

.photos-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: none;
}

.photo-grid {
  z-index: 100;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex: none;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: center;
  place-items: center;
  width: 100%;
  display: grid;
  position: relative;
}

.photo-container {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.clock-container {
  opacity: .75;
}

.fullscreen-photo-wrapper {
  z-index: 150;
  background-color: #fefefe;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0%;
}

.nav-field {
  z-index: 300;
  background-color: #fff;
  border-bottom: 1px #b2b2b2;
  justify-content: space-between;
  align-items: center;
  height: 96px;
  padding: 24px 16px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.back-button {
  padding: 16px;
}

.back-button-icon {
  width: 24px;
  height: 24px;
}

.messages-app {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
}

.messages-app.bert, .messages-app.rikard, .messages-app.majvor, .messages-app.rolf {
  display: none;
}

.messages-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 96px 24px 72px;
  display: flex;
  overflow: scroll;
}

.bubble {
  background-color: #007aff;
  border-radius: 16px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 75%;
  height: auto;
  min-height: 32px;
  padding: 7px 12px;
  display: flex;
  position: relative;
}

.bubble.grey {
  background-color: #e9e9eb;
}

.message {
  margin-bottom: 0;
}

.message.grey {
  color: #000;
}

.blubble-img {
  height: 32px;
  margin-right: -8px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.blubble-img.grey {
  margin-left: -8px;
  margin-right: 0;
  inset: auto auto 0% 0%;
}

.bubble-container {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  display: flex;
}

.bubble-container.grey {
  justify-content: flex-start;
  align-items: center;
}

.date-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
}

.date-container.right-align {
  justify-content: flex-end;
  align-items: center;
}

.date-container.right-align.margin-lower {
  margin-top: 6px;
}

.date {
  color: #8c8c8c;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.input-text-field {
  z-index: 300;
  background-color: #fffffff2;
  flex-flow: row;
  align-items: center;
  height: 72px;
  padding: 24px 32px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.input-text {
  border: 1px solid #c5c5c6;
  border-radius: 32px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  padding: 10px 12px;
  display: flex;
}

.input-field-text {
  color: #c5c5c6;
  line-height: 14px;
}

.mic-icon {
  height: 22px;
}

.camera-icon {
  height: 28px;
}

.messages-list-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.messagess-list-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  position: relative;
  overflow: auto;
}

.messages-contact-icon {
  height: 48px;
  margin-right: 12px;
}

.error-messages {
  color: red;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.photos-scroll {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  display: flex;
  overflow: scroll;
}

.incoming-call-app {
  z-index: 400;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.bg-call {
  z-index: 10;
  object-fit: cover;
  background-image: linear-gradient(#326360, #38596c);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 96px 32px 72px;
  display: flex;
  position: absolute;
}

.call-heading {
  text-align: center;
  margin-top: 8px;
}

.slide-to-unlock-container {
  background-color: #ffffff1a;
  border-radius: 128px;
  justify-content: center;
  align-items: stretch;
  height: 96px;
  padding: 6px;
  display: flex;
  position: relative;
}

.slide-to-unlock-container.outgoing {
  background-color: #fff0;
}

.call-icon-container {
  z-index: 50;
  aspect-ratio: 1;
  cursor: pointer;
  background-color: #fff;
  border-radius: 128px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
  display: flex;
  position: relative;
}

.call-icon-container.outgoing {
  background-color: #ff453a;
}

.slide-text-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  inset: 0% 0% 0% auto;
}

.slide-text {
  color: #000;
  font-size: 20px;
  font-weight: 400;
}

.incoming-new-call {
  cursor: auto;
  border-top: 1px solid #cecece;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: none;
}

.outgoing-call-app {
  z-index: 400;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.call-details-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.pr-icon {
  width: 22px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.call-duration {
  color: #ffffff80;
  margin-left: 8px;
  font-size: 24px;
  line-height: 18px;
  display: none;
}

.calling-text {
  color: #ffffff80;
  margin-left: 8px;
  font-size: 24px;
  line-height: 18px;
  display: flex;
}

.calender-app {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
}

.calender-day-image-3 {
  z-index: 10;
}

.calendar-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 16px;
  position: relative;
  overflow: scroll;
}

.calendar-month {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
}

.calendar-day-3 {
  justify-content: center;
  align-items: flex-start;
  display: none;
}

.calendar-btn-2 {
  z-index: 20;
  width: 100%;
  height: 30%;
  position: absolute;
  inset: 25% 0% auto;
}

.calendar-btn-3 {
  z-index: 20;
  width: 100%;
  height: 45%;
  position: absolute;
  inset: auto 0% 0%;
}

.calendar-btn-1 {
  z-index: 20;
  width: 100%;
  height: 25%;
  position: absolute;
  inset: 0% 0% auto;
}

.calender-day-image-1, .calender-day-image-2, .calendar-month-image {
  z-index: 10;
}

.calendar-day-1, .calendar-day-2 {
  justify-content: center;
  align-items: flex-start;
  display: none;
}

.calendar-month-1 {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.list-text-messages-container {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 75%;
  height: 100%;
  padding-right: 32px;
  display: flex;
}

.list-item-messages {
  cursor: pointer;
  border-top: 1px solid #cecece;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.date-photos-container {
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.date-photo {
  color: #000;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 12px;
}

@media screen and (max-width: 991px) {
  .container {
    padding: 0;
  }

  .iphone-screen {
    border-radius: 0;
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .bg-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  .bg, .bg-call {
    width: 100%;
    max-width: 100%;
  }
}

#w-node-e3571791-56cd-7c48-bfb0-ad943aecf88a-d73f2ffb, #p-1.w-node-d2ad71bf-44de-3d1c-ef55-ac088da89e1a-d73f2ffb, #p-2.w-node-da2c3965-5b01-3153-aaf4-a60c53e33f3e-d73f2ffb, #p-3.w-node-_6d8571be-ec28-2c6e-5b9f-48812a97c15b-d73f2ffb, #p-4.w-node-a67baeb8-639a-fc61-fb56-3a58e0ad8743-d73f2ffb, #p-5.w-node-_646155cd-523c-3061-0e70-51a46b595c66-d73f2ffb, #p-6.w-node-_13a61621-b487-aa97-5cb8-c14278985139-d73f2ffb, #p-7.w-node-_71e25fda-713b-cffe-817c-e6d83d7370c3-d73f2ffb, #p-8.w-node-_5a3cf0a3-f500-d86e-d6c1-647f1494e91d-d73f2ffb, #p-9.w-node-_97cfdc2b-59bd-0fc2-baf8-08e2b6a369a4-d73f2ffb, #p-10.w-node-_98d6323d-f625-84d9-6d66-65ab35a11594-d73f2ffb, #p-11.w-node-_2a444dab-e293-a1c9-5175-96512c4d2338-d73f2ffb, #p-12.w-node-_22d7757b-a7c1-2717-9126-ccb89a33f252-d73f2ffb, #p-13.w-node-_2be3752a-8161-f1a3-53ba-00f6cfba0650-d73f2ffb, #p-14.w-node-_41ece41e-a4ae-5ab5-c6fa-d086e6c9e0bc-d73f2ffb, #p-15.w-node-_96a6ec75-88fc-fb10-97ba-a053f4505297-d73f2ffb, #p-16.w-node-_897f481f-85cd-ae6c-d72e-5dcf4b1779ae-d73f2ffb {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-100.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}