@charset "utf-8";
:root {
  --color-blue: #007bff;
  --color-indigo: #6610f2;
  --color-purple: #6f42c1;
  --color-pink: #e83e8c;
  --color-red: #dc3545;
  --color-orange: #fd7e14;
  --color-yellow: #ffc107;
  --color-green: #28a745;
  --color-teal: #20c997;
  --color-cyan: #17a2b8;
  --color-white: #fff;
  --color-black: #000;
  --color-transparent: rgba(0, 0, 0, 0);
  --color-gray: #868e96;
  --color-gray-dark: #343a40;
  --color-primary: #007bff;
  --color-secondary: #868e96;
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-bg: #292929;
  --color-theme: #3428ad;
  --color-btn: #06ac7f;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-headline: 'Muli', sans-serif;
  --font-theme: 'Muli', sans-serif;
}
@-ms-viewport {
  width: device-width
}
body {
  font-size: 14px;
  font-weight: 400;
  background-color: var(--color-transparent);
  font-family: var(--font-theme);
  color: var(--color-black);
  opacity: 1;
  overflow-x: hidden;
  font-style: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.is-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.is-loading .app-container {
  opacity: 0;
}
.loading {
  display: none;
}
.is-loading .loading {
  display: block;
}
span.loading {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-image: url(../images/loading.svg);
  z-index: 9999;
}
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  transform: translateZ(0);
}
.is-hide {
  display: none !important;
}
.is-show {
  display: block !important;
}
p {
  line-height: 160%;
  margin-bottom: 25px;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
button, a {
  outline: none;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-size: 100%;
  font-family: var(--font-headline);
}
.app-container {
  width: 700px;
  margin: 0px auto !important;
  border-radius: 0px;
  background: var(--color-transparent);
  position: relative;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.app-container .img-bg {
  width: 100%;
}
.app-container .img-bg.is-mobile {
  display: none;
}
.app-container .img-bg.is-desktop {
  display: block;
}
.app-container .brand {
  width: 34%;
  position: absolute;
  top: 15px;
  left: 15px;
  pointer-events: none;
  transition: 1s all ease-in-out;
  opacity: 1;
}
.app-container .brand img {
  width: 100%;
}
.screen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.pop-over {
  position: absolute;
  top: 70px;
  left: 0;
  padding: 0px 20px;
  pointer-events: none;
  transition: 0.5s all ease-in-out;
  opacity: 0;
  transform: scale3d(0.3, 1, 1);
  transform-origin: center;
  width: 250px;
  font-size: 15px;
}
.pop-container {
  background-color: #fff;
  /*min-height: 135px;*/
  min-height: 180px;
  border-radius: 5px;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  font-weight: 600;
  color: #501C5A;
  line-height: 130%;
}
.is-popup .pop-over {
  opacity: 1;
  pointer-events: inherit;
  transform: scale3d(1, 1, 1);
}
.is-popup .app-container .brand {
  opacity: 0;
}
.btn-close {
  color: #393939;
  text-transform: uppercase;
  position: absolute;
  right: 40px;
  bottom: 10px;
  font-weight: 700;
  font-size: 12px;
}
.points {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%
}
.points li {
  text-align: center;
  padding: 0px 0px;
  position: absolute;
}
.points li a {
  display: block;
  width: 13px;
  height: 13px;
  position: absolute;
  font-size: 0px;
  color: rgba(0, 0, 0, 0);
}
.points li a:before {
  content: '';
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 100%;
  background-color: #fff;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.points li a:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
.points li:nth-child(1) {
  bottom: 395px;
  left: 345px;
}
.points li:nth-child(2) {
  bottom: 485px;
  left: 475px;
}
.points li:nth-child(3) {
  bottom: 207px;
  left: 544px;
}
.points li:nth-child(4) {
  bottom: 170px;
  left: 608px;
}
.points li:nth-child(5) {
  bottom: 347px;
  left: 575px;
}
.points li:nth-child(6) {
  bottom: 470px;
  left: 615px;
}
.points li:nth-child(7) {
  bottom: 319px;
  left: 462px;
}
.points li:nth-child(8) {
  bottom: 431px;
  left: 193px;
}
.points li:nth-child(9) {
  bottom: 258px;
  left: 205px;
}
.points li:nth-child(10) {
  bottom: 302px;
  left: 264px;
}
.points li:nth-child(11) {
  bottom: 186px;
  left: 165px;
}
.points li:nth-child(12) {
  bottom: 90px;
  left: 286px;
}
.points li:nth-child(13) {
  bottom: 136px;
  left: 374px;
}
.points li:nth-child(14) {
  bottom: 262px;
  left: 336px;
}
.points li:nth-child(15) {
  bottom: 344px;
  left: 307px;
}
.points li:nth-child(16) {
  bottom: 630px;
  left: 335px;
}
@media screen and (max-width: 768px) {
  .pop-over {
    width: 100%;
    font-size: 14px;
  }
  .pop-container {
    min-height: 135px;
  }
  .app-container {
    width: 300px;
  }
  .app-container .brand {
    width: 60%;
  }
  .app-container .img-bg.is-mobile {
    display: block;
  }
  .app-container .img-bg.is-desktop {
    display: none;
  }
  .points li:nth-child(1) {
    bottom: 245px;
    left: 110px;
  }
  .points li:nth-child(2) {
    bottom: 295px;
    left: 185px;
  }
  .points li:nth-child(3) {
    bottom: 120px;
    left: 224px;
  }
  .points li:nth-child(4) {
    bottom: 108px;
    left: 269px;
  }
  .points li:nth-child(5) {
    bottom: 209px;
    left: 250px;
  }
  .points li:nth-child(6) {
    bottom: 285px;
    left: 272px;
  }
  .points li:nth-child(7) {
    bottom: 194px;
    left: 181px;
  }
  .points li:nth-child(8) {
    bottom: 294px;
    left: 13px;
  }
  .points li:nth-child(9) {
    bottom: 158px;
    left: 26px;
  }
  .points li:nth-child(10) {
    bottom: 182px;
    left: 61px;
  }
  .points li:nth-child(11) {
    bottom: 116px;
    left: 5px;
  }
  .points li:nth-child(12) {
    bottom: 57px;
    left: 75px;
  }
  .points li:nth-child(13) {
    bottom: 91px;
    left: 136px;
  }
  .points li:nth-child(14) {
    bottom: 159px;
    left: 104px;
  }
  .points li:nth-child(15) {
    bottom: 212px;
    left: 88px;
  }
  .points li:nth-child(16) {
    bottom: 376px;
    left: 103px;
  }
}