@media screen and (max-width: 767px) {
  .mockup-wrapper {
    text-align: left !important;
  }
}
.tc-mockup .phone {
  margin: auto;
  overflow: hidden;
  background: #000;
  transition: all 0.75s ease-out;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .tc-mockup .phone {
    margin-top: -100px;
    margin-bottom: -100px;
  }
}
.tc-mockup .phone iframe, .tc-mockup .phone video {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: 0.4615384615;
  max-height: 60vh;
}
@media screen and (max-width: 767px) {
  .tc-mockup .phone iframe, .tc-mockup .phone video {
    max-height: 100vh;
  }
}
.tc-mockup .phone .frame-holder {
  height: 100%;
  width: 100%;
}
.tc-mockup .view_1 {
  transform: translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.tc-mockup .view_2 {
  transform: rotateX(0deg) rotateY(-45deg) rotateZ(0deg);
  box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;
}
.tc-mockup .view_3 {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;
}
@media (max-width: 900px) {
  .tc-mockup .mockup-wrapper {
    transform: scale(0.9, 0.9);
  }
}
@media (max-width: 700px) {
  .tc-mockup .mockup-wrapper {
    transform: scale(0.8, 0.8);
  }
}
@media (max-width: 500px) {
  .tc-mockup .mockup-wrapper {
    transform: scale(0.7, 0.7);
  }
}
div#div_block-108-25 {
  margin-top: -100px;
  z-index: 1;
  padding-top: 90px;
}
.tc-mockup .phone {
  position: relative;
  margin: 40px auto;
  width: 360px;
  height: 780px;
  background-color: #7371ee;
  background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
  border-radius: 40px;
  box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111, -10px 10px 10px 20px rgba(255, 255, 255, 0.4), -5px 5px 0px 25px #000;
}
.tc-mockup .phone:before, .tc-mockup .phone:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.tc-mockup .phone:after {
  bottom: 7px;
  width: 140px;
  height: 4px;
  background-color: #f2f2f2;
  border-radius: 10px;
}
.tc-mockup .phone:before {
  top: -1px;
  width: 56%;
  height: 31px;
  background-color: #1f1f1f;
  border-radius: 0px 0px 40px 40px;
}
.tc-mockup .phone i, .tc-mockup .phone b, .tc-mockup .phone s, .tc-mockup .phone span {
  position: absolute;
  display: block;
  color: transparent;
}
.tc-mockup .phone i {
  top: 0px;
  left: 50%;
  transform: translate(-50%, 6px);
  height: 8px;
  width: 15%;
  background-color: #101010;
  border-radius: 8px;
  box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
}
.tc-mockup .phone b {
  left: 10%;
  top: 0px;
  transform: translate(180px, 4px);
  width: 12px;
  height: 12px;
  background-color: #101010;
  border-radius: 12px;
  box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
}
.tc-mockup .phone b:after {
  content: '';
  position: absolute;
  background-color: #2d4d76;
  width: 6px;
  height: 6px;
  top: 2px;
  left: 2px;
  top: 3px;
  left: 3px;
  display: block;
  border-radius: 4px;
  box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
}
.tc-mockup .phone s {
  top: 50px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  width: 100%;
  font-size: 70px;
  font-weight: 100;
  padding-top: 60px;
}
.tc-mockup .phone span {
  bottom: 50px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  left: 30px;
}
.tc-mockup .phone span + span {
  left: auto;
  right: 30px;
}