#phoneholder{width:402px;max-width:100%;margin:0 auto;overflow:hidden}#phone{padding-bottom:204.47%;position:relative}#phone:after{content:" ";width:100%;height:100%;position:absolute;background:url(../img/phone-frame.webp) top left no-repeat;background-size:contain;pointer-events:none;top:0;left:0;z-index:10}#cardholder{position:absolute;top:0;left:0;right:0;bottom:0;padding:14.63% 5.8% 12.6% 5.6%}#cards{width:100%;height:100%;position:relative;overflow:hidden;margin:0}.intro{position:absolute;background:#fff;left:0;top:0;z-index:4;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s linear,transform .5s linear;padding:10px;box-sizing:border-box}.intro.bye{opacity:0;pointer-events:none;transform:translate(0,-30px)}.intro h1{background:rgba(255,255,255,.5);padding:1px 7px 7px}.intro h1 span{margin:0 5px;opacity:0;animation:popin .5s linear 1 forwards;display:inline-block;color:#da291c}.intro h1 span:nth-child(2){animation-delay:.4s}.intro h1 span:nth-child(3){animation-delay:.8s}.intro p{padding-bottom:11px}.intro>div{opacity:0;animation:popin .5s linear 1 forwards;animation-delay:1.4s}.intro .cats span{display:inline-block;padding:3px 9px 4px;background:#0080a8;margin:3px;cursor:pointer;color:#fff;border-radius:15px;font-weight:700}.undo{position:absolute;left:5px;top:5px;z-index:3;opacity:0;background:url(../img/undo.svg) center no-repeat;background-size:contain;width:30px;height:30px;cursor:pointer}.intro.bye+.undo{transition:opacity .5s linear;opacity:1}#cards .reject{left:0;background:#415161 url(../img/x.svg) center no-repeat;border-radius:0 50% 50% 0}#cards .accept{right:0;background:#0080a8 url(../img/heart.svg) center no-repeat;border-radius:50% 0 0 50%}#cards .accept,#cards .reject{content:" ";position:absolute;top:50%;transform:translate(0,-50%);background-size:20px 20px;z-index:2;width:30px;height:30px}#cards .pgitem{position:absolute;width:100%;height:100%;top:50%;left:50%;margin:0;transform:translateX(-50%) translateY(-50%) scale(.95);opacity:0;pointer-events:none;transition:opacity .3s linear;max-width:100%}#cards .pgitem.accepted:before,#cards .pgitem.rejected:before{content:" ";top:0;left:0;width:100%;height:100%;background:url(../img/x.svg) center no-repeat;background-size:contain;position:absolute;filter:invert(1)}#cards .pgitem.accepted:before{background-image:url(../img/heart-red.svg);filter:invert(0)}#cards .pgitem.active{opacity:1;pointer-events:auto}#cards .pgitem .img{position:absolute;max-height:none;max-width:none;display:none;width:100%;height:100%;top:0;left:0;z-index:-1}#cards .pgitem.active .img{display:block}#cards .pgitem .padding{height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0}#cards .lastdetails{display:flex;width:100%;justify-content:space-between}#cards .lastdetails .padesc{margin:0;padding:0 10px;border:0}.moreinfo{width:50px;height:50px;background:url(../img/info-circle.svg) center no-repeat;background-size:contain}#cards .pgitem .img a,#cards .pgitem .img img{position:absolute;height:100%;width:100%;left:0;top:0}#cards .pgitem .action,#cards .pgitem .title{text-align:left;width:100%;padding:0 20px;background:rgba(255,255,255,.5);box-sizing:border-box}#cards .pgitem .title{padding-top:18px}#cards .pgitem .action{padding-bottom:18px}#cards .pgitem .btn{display:none}#cards.active .pgitem a,#cards.active .pgitem img{user-drag:none;user-select:none;pointer-events:none}#cards .panel{position:absolute;padding:30px;bottom:0;left:0;right:0;box-sizing:border-box;transform:translateY(100%);transition:transform .5s linear}#cards .panel .padesc{margin:0}#cards .panel .moreinfo{position:absolute;top:0;right:0;background-image:url(../img/arrow-down-circle.svg)}#cards .avails{margin:0;padding:0;border-bottom:0}#cards .rrpsaveholder{border:0;padding:10px 0 0}#cards .info .panel{transform:translateY(0)}.match{text-align:center}.match h2 a{color:inherit;text-decoration:none}.hearts{position:absolute;width:50%;height:15%;pointer-events:none;z-index:-1;transform:scale(.9,.9)}.heart{background:url(../img/heart-red.svg) center no-repeat;background-size:contain;position:absolute;opacity:0;transform:translate(-50%,-50%) scale(0,0);animation:popHeart .8s linear both;animation-iteration-count:1}#hearts1{top:0;left:0}#hearts2{top:0;right:0}#hearts3{bottom:0;left:0}#hearts4{bottom:0;right:0}@media (min-width:412px){.intro .cats span{padding:6px 14px 7px;margin:5px}.hearts{transform:scale(1,1)}}@media (min-width:500px){.intro{font-size:1.1em}}@keyframes popin{0%{opacity:0;transform:translate(0,-30px)}100%{opacity:1;transform:translate(0,0)}}@keyframes popHeart{0%{opacity:0;transform:translate(-50%,-50%) scale(0,0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.2,1.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1,1)}}