.demo {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 360px;
  height: 610px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
}
.demo__header{
    width: 338px;
    height: 81px;
    margin: 0 auto;
}
.demo__content {
  overflow: visible;
  position: relative;
  height: 48rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.demo__card-cont {
    position: relative;
    width: 338px;
    height: 418px;
    margin: 0 auto;
}
.demo__card {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  -o-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.demo__card.reset {
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  transform: translateX(0) !important;
}
.demo__card.reset .demo__card__choice {
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: 0 !important;
}
.demo__card.inactive {
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.demo__card.to-left {
  transform: translateX(-30rem) rotate(-30deg) !important;
  opacity: 0.2;
}
.demo__card.to-right {
  transform: translate(30rem) rotate(30deg) !important;
  opacity: 0.2;
}
.demo__card.below {
  z-index: 1;
  -o-transition: all 0.0s linear;
  -ms-transition: all 0.0s linear;
  -moz-transition: all 0.0s linear;
  -webkit-transition: all 0.0s linear;
  transition: all 0.0s linear;
}
.demo__card__top {
  width: 338px;
  height: 418px;
}
.demo__card__top.purple {
  background: #7132b9;
}
.demo__card__top.blue {
  background: #248cb6;
}
.demo__card__top.indigo {
  background: #303f9f;
}
.demo__card__top.cyan {
  background: #26c6da;
}
.demo__card__top.lime {
  background: #afb42b;
}
.demo__card__top.brown {
  background: #795548;
}
.demo__card__img {
  overflow: hidden;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  border: 0.5rem solid #ffffff;
  background-image: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg");
  background-size: cover;
}
.demo__card__name {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}
.demo__card__btm {
  height: 100px;
  background: #cccccc;
}
.demo__card__we {
  text-align: center;
  font-size: 2.2rem;
}
.demo__card__choice {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/*
.demo__card__choice:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  color: #fff;
  border-radius: 50%;
  box-shadow: -2rem -3rem #fff, 2rem -3rem #fff;
}
.demo__card__choice:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 1.5rem;
  margin-left: -2rem;
  border: 0.6rem solid #fff;
  border-bottom: none;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
*/

.demo__card__choice.m_reject {
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/promo/vt2023/img/Stage1a/bubble-nope.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    top: 128px;
    width: 186px;
    height: 176px;
}
.demo__card__choice.m_like {
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/promo/vt2023/img/Stage1a/bubble-like.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    top: 128px;
    width: 186px;
    height: 176px;
}

.demo__card__choice.m--reject {
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/promo/vt2023/img/Stage1a/bubble-nope.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    top: 254px;
    top: 128px;
    opacity: 0;
}
.demo__card__choice.m--like {
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/promo/vt2023/img/Stage1a/bubble-like.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    top: 254px;
    top: 128px;
    opacity: 0;
}
/*
.demo__card__choice.m--like:after {
  transform: scaleY(-1);
}
*/

.demo__card__drag {
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: -webkit-grab;
  cursor: grab;
}
.demo__tip {
  text-align: center;
  font-size: 2.2rem;
}