.tinderesque .list .card {
  display: block;
  position: absolute;
  top: 0;
  left: 0
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
.tinderesque .list .current {
  display: block;
  z-index: 30;
}
.tinderesque .cardcontainer.yes .card {
  -webkit-animation: none;
  animation: none;
}
.tinderesque .cardcontainer.nope .card {
  -webkit-animation: none;
  animation: none;
}
.tinderesque .cardcontainer.yes .current {
  -webkit-animation: yay 0.7s ease-out;
  animation: yay 0.7s ease-out;
}
.tinderesque .cardcontainer.nope .current {
  -webkit-animation: nope 0.7s ease-out;
  animation: nope 0.7s ease-out;
}
.cardlist li {
  z-index: 1;
}
.cardlist li:nth-child(0) {
  z-index: 5;
}
.cardlist li:nth-child(1) {
  z-index: 4;
}
.cardlist li:nth-child(2) {
  z-index: 3;
}

.cardlist li:nth-child(even) {
  transition: 0.4s;
}
.cardlist li:nth-child(3n) {
  transition: 0.4s;
}
.cardlist li:nth-child(5n) {
  transition: 0.4s;
}
.card {
  color: #000;
  width: 310px;
  height: 340px;
	overflow: hidden;
  transition: 0.4s;
	background:#FFDAB9;
}
.current {
}
.cardcontainer {
  width: 320px;
  position: relative;
  margin: 0 auto;
}
.list ul.cardlist {
  position: relative;
  margin: 0 0 40px 0;
  height: 300px;
}
img {display: block;}

.cardcontainer button.but-nope, .cardcontainer button.but-yay {
  z-index: 10;
}
.cardcontainer button.but-nope {
  background-color:lightcoral;
}
.cardcontainer button.but-yay {
  background-color:palegreen;
}
.but-nope::after {
  content: 'nah';
  position: absolute;
  top: -400px;
  left: -250px;
  font-size: 20px;
  transform: rotate(-30deg);
  background: lightcoral;
  padding: .2em .4em;
  color: #fff;
  display: block;
  transition: 0.6s;
  opacity: 0;
	border-radius: 5px;
		border: 2px solid #fff;

}
.but-nope:hover::after {
  opacity: 1;
  top: -200px;
}
.but-yay::after {
  content: 'yep';
  position: absolute;
  top: -400px;
  right: -250px;
  font-size: 20px;
  background: palegreen;
  color: #fff;
  padding: .2em .4em;
  transform: rotate(30deg);
  display: block;
  transition: 0.6s;
  opacity: 0;
	border-radius: 5px;
	border: 2px solid #fff;
	
}
.but-yay:hover::after {
  opacity: 1;
  top: -200px;

}
#results {
  opacity: 0;
  position: absolute;
  top: -20000px;
  transition: opacity 0.5s;
  margin: 0;
  padding: 0;
}
#results li {
  margin: 0;
  padding: 0 0 5px 5px;
  list-style: none;
  float: left;
  transform: rotate(0);
  top: 0;
}
#results.live {
  top: 0;
  position: relative;
  opacity: 1;
}