body {
  font-weight: 300;
  line-height: 1.5;
}
.phone {
  height: 391px;
  width: 201px;
  min-width: 201px;
  border-radius: 32px;
  background-image: url("/sitestatic/img/phone.png?094f20082374");
  overflow: hidden;
  transform: rotate(0deg);
  transition: all 450ms ease-in-out;
  opacity: 1;
}
.phone .screen {
  height: 358px;
  width: 185px;
  top: 19px;
  left: 7px;
  border-radius: 21px;
  overflow-y: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}
.phone .screen::-webkit-scrollbar {
  display: none;
}
.phone .screen .messages {
  display: flex;
  flex-direction: column;
}
.phone .screen .messages .imsg {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  position: relative;
  border-radius: 15px;
  opacity: 1;
}
.phone .screen .messages .imsg.waiting {
  opacity: 0;
}
.phone .screen .messages .imsg:before,
.phone .screen .messages .imsg:after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 15px;
}
.phone .screen .messages .imsg.mt {
  background: #ededed;
}
.phone .screen .messages .imsg.mt:before {
  left: -10px;
  border-left: 20px solid #ededed;
  border-bottom-right-radius: 16px 14px;
  transform: translate(0, -2px);
}
.phone .screen .messages .imsg.mt:after {
  left: 4px;
  width: 26px;
  background: white;
  clip: rect(0px, 40px, 20px, 16px);
  border-bottom-right-radius: 10px;
  transform: translate(-30px, -2px);
}
.phone .screen .messages .imsg.mo {
  color: white;
  background: #0b93f6;
  align-self: flex-end;
  padding-right: 15px;
}
.phone .screen .messages .imsg.mo:before {
  right: -7px;
  border-right: 20px solid #0b93f6;
  border-bottom-left-radius: 16px 14px;
  transform: translate(0, -2px);
}
.phone .screen .messages .imsg.mo:after {
  right: -56px;
  width: 26px;
  background: white;
  clip: rect(0px, 12px, 40px, 0px);
  border-bottom-left-radius: 10px;
  transform: translate(-30px, -3px);
}
.top-trans-to-alpha-dark {
  position: relative;
  margin-top: 6rem;
}
.top-trans-to-alpha-dark::before {
  height: 6rem;
  width: 100%;
  background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, rgba(100, 100, 100, 0.1) 100%);
  content: "";
  position: absolute;
  margin-top: -6rem;
  z-index: 20;
}
.bottom-alpha-dark-to-trans::after {
  height: 6rem;
  width: 100%;
  background: linear-gradient(0deg, rgba(247, 247, 247, 0) 0%, rgba(100, 100, 100, 0.1) 100%);
  content: "";
  position: absolute;
  bottom: 0;
  margin-bottom: -6rem;
}
.trans-to-white::after {
  height: 20rem;
  width: 100%;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  position: absolute;
  bottom: 0;
  margin-bottom: 0rem;
}
.razor-bottom::after {
  width: 100%;
  height: 100%;
  z-index: 0;
  content: "";
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: top right;
  transform: skewY(-3deg);
  position: absolute;
  overflow: hidden;
}
.razor-bottom-gradient {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
}
.razor-top {
  position: relative;
}
.razor-top::before {
  width: 100%;
  height: 100%;
  z-index: 10;
  content: "";
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: bottom right;
  transform: skewY(2deg);
  position: absolute;
  overflow: hidden;
}
.bottom-gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.12) 90%);
  width: 100%;
  height: 100%;
  z-index: 10;
}
.razor-right::after {
  width: 100%;
  height: 100%;
  z-index: 0;
  content: "";
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
  transform: skewX(-12deg);
  position: absolute;
}
.shadowed {
  -webkit-filter: drop-shadow(12px 12px 25px rgba(0, 0, 0, 0.5));
  filter: url(#drop-shadow);
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#eee')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#eee')";
}