body {
    background: #ffebef;
}

.tinder {
    background: #ffebef;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.loaded.tinder {
  opacity: 1;
}

.tinder--status {
    position: absolute;
    top: 100px;
    margin-top: -30px;
    z-index: 2;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

.tinder--status .answer {
    display: inline-block;
    font-size: 80px;
    line-height: 110px;
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.2s ease-in-out;
    position: absolute;
    width: 120px;
    height: 120px;
    margin-left: -60px;
    border: solid 5px #fa98bc;
    border-radius: 50%;
    background: #fff;
    color: #fa98bc;
}

.tinder_love .answer-heart {
  opacity: 0.7;
  transform: scale(1);
}

.tinder_nope .answer-remove {
  opacity: 0.7;
  transform: scale(1);
}

.tinder--cards {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
}

.tinder--card {
    display: inline-block;
    width: 82vw;
    background: #FFFFFF;
    border-radius: 8px;
    border: solid 2px #fa98bc;
    overflow: hidden;
    position: absolute;
    will-change: transform;
    transition: all 0.3s ease-in-out;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.tinder--card * {
    pointer-events: none;
}

.moving.tinder--card {
  transition: none;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.tinder--card img {
  max-width: 100%;
  pointer-events: none;
}

.tinder--card h3 {
  margin-top: 32px;
  font-size: 32px;
  padding: 0 16px;
  pointer-events: none;
}

.tinder--card p {
  margin-top: 24px;
  font-size: 20px;
  padding: 0 16px;
  pointer-events: none;
}

.tinder--buttons {
  flex: 0 0 100px;
  text-align: center;
}

.tinder--buttons button {
}

.tinder--buttons button:focus {
  outline: 0;
}

.tinder--buttons i {
  font-size: 32px;
  vertical-align: middle;
}

.fa-heart {
  color: #FFACE4;
}

.fa-remove {
  color: #CDD6DD;
}

.main-footer {
}

.main-footer .status-box .status-title {
    font-weight: bold;
}
.main-footer .status-box .status-bar {
    display: flex;
    width: 140px;
    margin: 0 auto;
    justify-content: space-between;
}
.main-footer .status-box .status-bar li {
    width: 13px;
    height: 13px;
    list-style: none;
    background: #fff;
    border: solid 2px #b8875d;
    border-radius: 20px;
}
.main-footer .status-box .status-bar li.active {
    background: #b8875d;
}