@import url('../fonts/Stratos-Black-Web/fonts.css');
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0Uw.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-FU0Uw.ttf) format('truetype');
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  background: linear-gradient(135deg, #F8F6FB 0%, #D7D1EB 100%);
  background-attachment: fixed;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  background: url(../img/pattern.svg);
  background-attachment: fixed;
  color: #4a4a4a;
  font-size: 16px;
  line-height: 20px;
}
body.summer h1,
body.summer .h1 {
  background: -webkit-linear-gradient(left, #f93f52 0%, #fac159 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.summer .hamburger {
  background: linear-gradient(229.37deg, #28F3C9 0%, #F8EE7E 100%);
}
img {
  border: 0;
}
h1,
.h1 {
  color: #0C0065;
  font-family: 'Conv_Stratos-Black-Web', sans-serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 50px;
  margin: 0 0 5px 0;
  background: -webkit-linear-gradient(left, #9500c0 0%, #5d00b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2,
.h2 {
  font-size: 30px;
  font-weight: normal;
  margin: 0 0 15px;
  padding: 0;
}
h3,
.h3 {
  font-size: 20px;
  font-weight: normal;
  margin: 0 0 15px;
  padding: 0;
}
input,
textarea,
a,
button {
  outline: none;
}
a {
  color: #6704C9;
}
a:hover {
  color: #6704C9;
  text-decoration: none;
}
.clr {
  clear: both;
}
.col {
  vertical-align: top;
  display: inline-block;
}
.content {
  width: 1300px;
  margin: 0 auto;
  text-align: right;
  position: relative;
}
.purple {
  color: #0C0065;
}
.chat {
  width: 500px;
  display: inline-block;
  text-align: left;
  position: relative;
  z-index: 5;
}
p {
  margin: 0;
}
p + p {
  margin-top: 20px;
}
.message {
  padding: 30px 35px;
  border-radius: 30px;
  margin-bottom: 30px;
  display: inline-block;
  margin-right: 30px;
  position: relative;
  background: linear-gradient(225deg, #FFFFFF 0%, #F7F3FA 100%);
  box-shadow: 0 30px 50px -30px rgba(18, 0, 167, 0.3);
}
.message:after {
  content: "";
  display: inline-block;
  background: url(../img/bubble-pin.svg) no-repeat center;
  background-size: 100% auto;
  width: 20px;
  height: 30px;
  position: absolute;
  bottom: 2px;
  left: -7px;
}
.message__fixed {
  margin-right: 100px;
}
.message:first-child {
  margin-top: 30px;
  font-size: 145%;
}
.message.question {
  text-align: right;
  background: none;
  margin-right: 0;
  box-shadow: none;
  padding: 0;
  display: block;
  height: 60px;
  /*&-6{
      div{
        bottom: -340px;
      }
    }*/
}
.message.question:after {
  display: none;
}
.message.question div {
  background: transparent;
  position: fixed;
  width: 550px;
  right: 50%;
  margin-right: -650px;
  padding-bottom: 30px;
  transition: bottom 1s ease;
}
.message.question span {
  display: inline-block;
  padding: 20px 30px;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  height: 60px;
  background: linear-gradient(90deg, #F050D8 0%, #C037FC 50.41%, #651DFF 100%);
  box-shadow: 0 25px 30px -20px rgba(255, 0, 215, 0.5);
}
.message.question-1 div {
  bottom: 110px;
}
.message.question-2 div {
  bottom: 20px;
}
.message.question-3 div {
  bottom: -70px;
}
.message.question-4 div {
  bottom: -160px;
}
.message.question-5 div {
  bottom: -250px;
}
.message.question-7 div {
  bottom: -340px;
}
.message.question-8 div {
  bottom: -430px;
}
.message.question.scroll {
  cursor: default;
}
.message.question.scroll div {
  position: relative;
  bottom: 0;
  padding: 0;
  background: transparent;
  margin-right: 0;
  right: initial;
  width: auto;
  transition: none;
}
.message.question.scroll div span {
  cursor: default;
}
.typing {
  position: fixed;
  right: 50%;
  width: 500px;
  margin-right: -650px;
  display: none;
  bottom: 30px;
}
.typing span {
  display: inline-block;
  padding: 8px 20px;
  color: white;
  border-radius: 30px;
  font-size: 80%;
  background: linear-gradient(90deg, #F050D8 0%, #C037FC 50.41%, #651DFF 100%);
  box-shadow: 0 25px 30px -20px rgba(255, 0, 215, 0.5);
}
.bubbles {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bubble {
  display: inline-block;
  position: absolute;
}
.bubble__1 {
  height: 734px;
  width: 1024px;
  bottom: -200px;
  left: -150px;
}
.bubble__2 {
  height: 527px;
  width: 718px;
  top: -330px;
  right: -100px;
}
.bubble svg {
  max-width: 100%;
  max-height: 100%;
}
#bubble12,
#bubble13,
#bubble21,
#bubble22 {
  visibility: hidden;
}
.title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #000;
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
  margin: 0 0 5px 0;
  position: relative;
  padding: 0 0 0 20px;
}
li:before {
  content: "✔";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  color: #6704C9;
}
.reviews {
  position: relative;
  width: 400px;
  transition: all 0.3s ease;
}
.reviews__btn {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
.review {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #6704C9;
  border-radius: 20px;
  background: transparent;
  padding: 10px 15px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  color: #6704C9;
  margin: 0 5px 5px;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #6704C9;
  color: #fff;
}
.btn__red {
  border-color: #c00027;
  color: #c00027;
}
.btn__red:hover {
  background: #c00027;
  color: #fff;
}
.btn.success {
  border-color: green;
  background: green;
  color: white;
}
.btn.error {
  border-color: #c00027;
  background: #c00027;
  color: white;
}
.btn.gray {
  border-color: gray;
  background: gray;
  color: white;
}
.photo {
  margin: 0 -5px -5px;
  display: inline-block;
}
.photo img {
  max-height: 200px;
  border-radius: 30px;
}
.video {
  border-radius: 30px;
  height: 227px;
  width: 338px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: no-repeat center;
  background-size: cover;
  margin: 10px 0 0;
}
.video span {
  display: inline-block;
  background: url(../img/play-bt.svg);
  background-size: 100% auto;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  box-shadow: 0 10px 15px -5px rgba(255, 0, 215, 0.59);
}
.social {
  margin-top: 10px;
}
.social a {
  display: inline-block;
  width: 46px;
  height: 46px;
  background: transparent no-repeat center;
  background-size: 100% auto;
  margin-right: 10px;
}
.social a.telegram {
  background-image: url(../img/telegram.svg);
}
.social a.whatsapp {
  background-image: url(../img/whatsapp.svg);
}
.social a.skype {
  background-image: url(../img/skype.svg);
}
.social__title {
  margin-bottom: 15px;
  color: #B0A3CA;
}
.menu {
  display: inline-block;
  position: fixed;
  z-index: 9;
  width: 50%;
  height: 100%;
  top: 0;
  left: -50%;
  background: #30045B;
  text-align: center;
  padding: 120px 0 30px;
  overflow-y: auto;
  transition: left 1s ease;
}
.menu__item {
  margin-bottom: 20px;
}
.menu__item a {
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  background: linear-gradient(90deg, #F050D8 0%, #C037FC 50.41%, #651DFF 100%);
  box-shadow: 0 25px 30px -20px rgba(255, 0, 215, 0.5);
}
.menu .social {
  margin: 80px 0 0;
}
.menu .social a {
  margin: 0 5px;
}
.menu.open {
  left: 0;
}
.hamburger {
  display: flex;
  width: 60px;
  height: 60px;
  position: fixed;
  top: 40px;
  left: 50%;
  z-index: 10;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(134.72deg, #3023AE 0%, #C86DD7 100%);
  justify-content: center;
  align-items: center;
  margin-left: -610px;
}
.hamburger span {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../img/burger.svg) no-repeat center;
  background-size: 100% auto;
  transition: all 0.3s ease;
}
.hamburger.open span {
  background-image: url(../img/close.svg);
}
.page {
  z-index: 4;
  text-align: left;
  position: fixed;
  top: 130px;
  left: 50%;
  margin-left: -610px;
}
.page .social {
  margin-top: 40px;
}
.girl {
  height: 536px;
  width: 634px;
  z-index: 3;
  position: fixed;
  left: 50%;
  margin-left: -640px;
  bottom: 30px;
  background: url(../img/girl.svg) no-repeat center;
  background-size: 100% auto;
}
.eyebrow {
  display: inline-block;
  background: url(../img/eyebrow.svg) no-repeat center;
  background-size: 100% auto;
  width: 60px;
  height: 8px;
  position: absolute;
  top: 10%;
  left: 34%;
  animation: eyebrow 5s;
  animation-iteration-count: infinite;
}
@keyframes eyebrow {
  from {
    top: 10%;
  }
  45% {
    top: 10%;
  }
  50% {
    top: 9.5%;
  }
  55% {
    top: 10%;
  }
  to {
    top: 10%;
  }
}
.hand {
  display: inline-block;
  background: url(../img/hand.svg) no-repeat center;
  background-size: 100% auto;
  width: 115px;
  height: 34px;
  position: absolute;
  top: 42.7%;
  left: 25%;
  animation: handMouse 10s;
  animation-iteration-count: infinite;
}
@keyframes handMouse {
  from {
    left: 25%;
  }
  45% {
    left: 25%;
  }
  50% {
    left: 26.5%;
  }
  55% {
    left: 25%;
  }
  to {
    left: 25%;
  }
}
.leg-left {
  display: inline-block;
  background: url(../img/left-leg.svg) no-repeat center;
  background-size: 100% auto;
  width: 230px;
  height: 201px;
  position: absolute;
  top: 60%;
  left: 34.5%;
  animation: legLeft 15s;
  animation-iteration-count: infinite;
}
@keyframes legLeft {
  from {
    left: 34.5%;
  }
  30% {
    left: 34.5%;
  }
  35% {
    left: 33%;
  }
  40% {
    left: 34.5%;
  }
  to {
    left: 34.5%;
  }
}
.leg-right {
  display: inline-block;
  background: url(../img/right-leg.svg) no-repeat center;
  background-size: 100% auto;
  width: 210px;
  height: 201px;
  position: absolute;
  top: 60%;
  left: 26.5%;
  animation: legRight 12s;
  animation-iteration-count: infinite;
}
@keyframes legRight {
  from {
    left: 26.5%;
  }
  70% {
    left: 26.5%;
  }
  75% {
    left: 28%;
  }
  80% {
    left: 26.5%;
  }
  to {
    left: 26.5%;
  }
}
.steam {
  position: absolute;
  top: 31%;
  left: 86.5%;
}
.steam span {
  display: inline-block;
  background: transparent no-repeat center;
  background-size: 100% auto;
  vertical-align: top;
}
.steam span:first-child {
  background-image: url(../img/steam1.svg);
  width: 14px;
  height: 40px;
  animation: steam1 2s;
  animation-iteration-count: infinite;
}
.steam span:last-child {
  background-image: url(../img/steam2.svg);
  margin-top: 5px;
  width: 11px;
  height: 30px;
  animation: steam2 2s;
  animation-iteration-count: infinite;
}
@keyframes steam1 {
  from {
    margin-top: 0;
  }
  50% {
    margin-top: -5px;
  }
  to {
    margin-top: 0;
  }
}
@keyframes steam2 {
  from {
    margin-top: 5px;
  }
  50% {
    margin-top: 8px;
  }
  to {
    margin-top: 5px;
  }
}
.leg-table {
  display: inline-block;
  background: url(../img/table-leg.svg) no-repeat center;
  background-size: 100% auto;
  width: 30px;
  height: 245px;
  position: absolute;
  top: 51.8%;
  left: 33%;
}
.avatar {
  display: none;
}
.grecaptcha-badge {
  display: none;
}
input[type=text],
textarea {
  width: 100%;
  border: none;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  color: #000;
  padding: 10px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
textarea {
  height: 200px;
  margin-bottom: 20px;
}
.dropzone {
  border: 1px dashed #6704C9;
  margin-bottom: 20px;
  padding: 10px;
  min-height: 100px;
}
.dropzone .dz-preview {
  margin: 10px;
  min-height: 100px;
}
.dropzone .dz-preview .dz-image {
  width: 105px;
  height: 110px;
}
@media only screen and (max-height: 950px) {
  .girl {
    height: calc(536px * 0.9);
    width: calc(634px * 0.9);
    bottom: 20px;
  }
  .eyebrow {
    width: calc(60px * 0.9);
    height: calc(8px * 0.9);
  }
  .hand {
    width: calc(115px * 0.9);
    height: calc(34px * 0.9);
  }
  .leg-left {
    width: calc(230px * 0.9);
    height: calc(201px * 0.9);
  }
  .leg-right {
    width: calc(210px * 0.9);
    height: calc(201px * 0.9);
  }
  .leg-table {
    width: calc(30px * 0.9);
    height: calc(245px * 0.9);
  }
  .steam span:first-child {
    width: calc(14px * 0.9);
    height: calc(40px * 0.9);
  }
  .steam span:last-child {
    width: calc(11px * 0.9);
    height: calc(30px * 0.9);
  }
}
@media only screen and (max-height: 900px) {
  .girl {
    height: calc(536px * 0.85);
    width: calc(634px * 0.85);
    bottom: 15px;
  }
  .eyebrow {
    width: calc(60px * 0.85);
    height: calc(8px * 0.85);
  }
  .hand {
    width: calc(115px * 0.85);
    height: calc(34px * 0.85);
  }
  .leg-left {
    width: calc(230px * 0.85);
    height: calc(201px * 0.85);
  }
  .leg-right {
    width: calc(210px * 0.85);
    height: calc(201px * 0.85);
  }
  .leg-table {
    width: calc(30px * 0.85);
    height: calc(245px * 0.85);
  }
  .steam span:first-child {
    width: calc(14px * 0.85);
    height: calc(40px * 0.85);
  }
  .steam span:last-child {
    width: calc(11px * 0.85);
    height: calc(30px * 0.85);
  }
  .hamburger {
    top: 20px;
  }
  .page {
    top: 90px;
  }
  .page .social {
    margin-top: 30px;
  }
  .page .social__title {
    margin-bottom: 10px;
  }
}
@media only screen and (max-height: 800px) {
  .girl {
    height: calc(536px * 0.80);
    width: calc(634px * 0.80);
    bottom: 10px;
  }
  .eyebrow {
    width: calc(60px * 0.80);
    height: calc(8px * 0.80);
  }
  .hand {
    width: calc(115px * 0.80);
    height: calc(34px * 0.80);
  }
  .leg-left {
    width: calc(230px * 0.80);
    height: calc(201px * 0.80);
  }
  .leg-right {
    width: calc(210px * 0.80);
    height: calc(201px * 0.80);
  }
  .leg-table {
    width: calc(30px * 0.80);
    height: calc(245px * 0.80);
  }
  .steam span:first-child {
    width: calc(14px * 0.80);
    height: calc(40px * 0.80);
  }
  .steam span:last-child {
    width: calc(11px * 0.80);
    height: calc(30px * 0.80);
  }
}
@media only screen and (max-height: 770px) {
  .page {
    top: 30px;
    margin-left: -500px;
  }
}
@media only screen and (max-height: 710px) {
  .page .social {
    z-index: 4;
    text-align: left;
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -610px;
    background: rgba(255, 255, 255, 0.75);
    padding: 10px 0 5px 10px;
    border-radius: 15px;
  }
  .page .social__title {
    color: #4a4a4a;
  }
}
@media only screen and (max-height: 710px) and (max-width: 1350px) {
  .page .social {
    margin-left: -490px;
  }
}
@media only screen and (max-height: 700px) {
  .girl {
    height: calc(536px * 0.75);
    width: calc(634px * 0.75);
    bottom: 10px;
  }
  .eyebrow {
    width: calc(60px * 0.75);
    height: calc(8px * 0.75);
  }
  .hand {
    width: calc(115px * 0.75);
    height: calc(34px * 0.75);
  }
  .leg-left {
    width: calc(230px * 0.75);
    height: calc(201px * 0.75);
  }
  .leg-right {
    width: calc(210px * 0.75);
    height: calc(201px * 0.75);
  }
  .leg-table {
    width: calc(30px * 0.75);
    height: calc(245px * 0.75);
  }
  .steam span:first-child {
    width: calc(14px * 0.75);
    height: calc(40px * 0.75);
  }
  .steam span:last-child {
    width: calc(11px * 0.75);
    height: calc(30px * 0.75);
  }
}
@media only screen and (max-height: 600px) {
  .girl {
    height: calc(536px * 0.7);
    width: calc(634px * 0.7);
    bottom: 10px;
  }
  .eyebrow {
    width: calc(60px * 0.7);
    height: calc(8px * 0.7);
  }
  .hand {
    width: calc(115px * 0.7);
    height: calc(34px * 0.7);
  }
  .leg-left {
    width: calc(230px * 0.7);
    height: calc(201px * 0.7);
  }
  .leg-right {
    width: calc(210px * 0.7);
    height: calc(201px * 0.7);
  }
  .leg-table {
    width: calc(30px * 0.7);
    height: calc(245px * 0.7);
  }
  .steam span:first-child {
    width: calc(14px * 0.7);
    height: calc(40px * 0.7);
  }
  .steam span:last-child {
    width: calc(11px * 0.7);
    height: calc(30px * 0.7);
  }
  .page .social__title {
    display: none;
  }
}
@media only screen and (max-width: 1350px) {
  .content {
    width: 1000px;
  }
  .message.question div {
    margin-right: -500px;
  }
  .typing {
    margin-right: -500px;
  }
  .page {
    margin-left: -400px;
  }
  .girl {
    margin-left: -490px;
  }
  .hamburger {
    margin-left: -490px;
  }
}
@media only screen and (max-width: 1023px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }
  body.open {
    overflow-y: hidden;
  }
  body.summer h1,
  body.summer .h1 {
    background: none;
    -webkit-text-fill-color: #fff;
  }
  .hamburger {
    width: 40px;
    height: 40px;
    top: 10px;
    margin-left: -150px;
  }
  .hamburger span {
    width: 22px;
    height: 22px;
  }
  .menu {
    width: 100%;
    left: -100%;
    padding-top: 80px;
  }
  .menu__item a {
    padding: 8px 20px;
    border-radius: 18px;
    font-size: 14px;
  }
  .menu .social {
    margin-top: 50px;
  }
  .content {
    width: 320px;
    text-align: center;
  }
  .girl {
    display: none;
  }
  .page {
    z-index: 8;
    top: initial;
    bottom: 20px;
    margin-left: -140px;
    font-size: 12px;
    padding-left: 80px;
  }
  .page .social {
    display: none;
  }
  .page h1 {
    color: #fff;
    margin-bottom: 10px;
    margin-top: -5px;
    font-size: 24px;
    line-height: 26px;
    background: none;
    -webkit-text-fill-color: #fff;
  }
  .page .purple {
    color: #fff;
  }
  .bubbles {
    z-index: 7;
    height: 175px;
  }
  .bubble__2 {
    display: none;
  }
  .bubble__1 {
    height: 407px;
    width: 568px;
    left: 50%;
    bottom: -234px;
    margin-left: -270px;
  }
  .chat {
    width: 300px;
  }
  .message {
    padding: 15px 20px;
    border-radius: 18px;
    box-shadow: 0 18px 30px -18px rgba(18, 0, 167, 0.3);
  }
  .message__fixed {
    margin-right: 40px;
  }
  .message:first-child {
    margin-top: 80px;
  }
  .message:last-child {
    margin-bottom: 200px;
  }
  .message.question {
    height: auto;
  }
  .message.question div {
    position: relative;
    bottom: 0!important;
    padding: 0;
    background: transparent;
    margin-right: 0;
    right: initial;
    width: auto;
    transition: none;
  }
  .message.question span {
    padding: 10px 20px;
    border-radius: 18px;
    height: auto;
    box-shadow: 0 15px 18px -12px rgba(255, 0, 215, 0.5);
  }
  .reviews {
    width: 230px;
  }
  .video {
    height: 161px;
    width: 240px;
    border-radius: 18px;
  }
  .photo {
    border-radius: 18px;
  }
  .avatar {
    display: inline-block;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: transparent no-repeat center;
    background-size: cover;
    float: left;
    margin-left: -80px;
  }
  .hideMobile {
    display: none!important;
  }
}
/*# sourceMappingURL=style.css.map */