.wrapper{width:300px;height:500px;background:#fff;margin:auto;position:relative;overflow:hidden;border-radius:10px 10px 10px 10px;box-shadow:0;transform:scale(.95);transition:box-shadow .5s,transform .5s;box-shadow:0 1px 1px rgba(0,0,0,.125)}.wrapper:hover{transform:scale(1);box-shadow:5px 20px 30px rgba(0,0,0,.2)}.wrapper .container-p{width:100%;height:100%}.wrapper .container-p .top{height:80%;width:100%;-webkit-background-size:100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%}.wrapper .container-p .top img{height:100%;width:100%;object-fit:cover}.buy .c{position:relative;font-size:2rem;cursor:pointer;margin:1em 4em 0 .6em}.done .c{position:relative;font-size:2rem;cursor:pointer;margin:1em 4em 0 .6em}.wrapper .container-p .bottom{width:200%;height:20%;transition:transform .5s}.wrapper .container-p .bottom.clicked{transform:translateX(-50%)}.wrapper .container-p .bottom h1{margin:0;padding:0}.wrapper .container-p .bottom p{margin:0;padding:0}.wrapper .container-p .bottom .left{height:100%;width:50%;background:#f4f4f4;position:relative;float:left}.wrapper .container-p .bottom .left .details{padding:20px;float:left;width:210px}.wrapper .container-p .bottom .left .buy{float:right;width:calc(30% - 2px);height:100%;background:#f1f1f1;transition:background .5s;border-left:solid thin rgba(0,0,0,.1)}.wrapper .container-p .bottom .left .buy i{font-size:30px;padding:30px;color:#254053;transition:transform .5s}.wrapper .container-p .bottom .left .buy:hover{background:#a6cdde}.wrapper .container-p .bottom .left .buy:hover i{transform:translateY(5px);color:#00394b}.wrapper .container-p .bottom .right{width:50%;background:#f4f4f4;float:right;height:200%;overflow:hidden}.wrapper .container-p .bottom .right .details{padding:20px;float:right;width:210px}.wrapper .container-p .bottom .right .done{width:calc(30% - 2px);float:left;transition:transform .5s;border-right:solid thin rgba(0,0,0,.1);height:50%}.wrapper .container-p .bottom .right .done i{font-size:30px;padding:30px;color:#fff}.wrapper .container-p .bottom .right .remove{width:calc(30% - 1px);clear:both;border-right:solid thin rgba(255,255,255,.3);height:50%;background:#bc3b59;transition:transform .5s,background .5s}.wrapper .container-p .bottom .right .remove:hover{background:#9b2847}.wrapper .container-p .bottom .right .remove:hover i{transform:translateY(5px)}.wrapper .container-p .bottom .right .remove i{transition:transform .5s;font-size:30px;padding:30px;color:#fff}.wrapper .container-p .bottom .right:hover .remove,.wrapper .container .bottom .right:hover .done{transform:translateY(-100%)}.wrapper .inside{z-index:9;background:#92879b;width:140px;height:140px;position:absolute;top:-70px;right:-70px;border-radius:0 0 200px 200px;transition:all .5s,border-radius 2s,top 1s;overflow:hidden}.wrapper .inside .icon{position:absolute;right:85px;top:85px;color:#fff;opacity:1}.wrapper .inside:hover{width:100%;right:0;top:0;border-radius:0;height:80%}.wrapper .inside:hover .icon{opacity:0;right:15px;top:15px}.wrapper .inside:hover .contents{opacity:1;transform:scale(1);transform:translateY(0)}.wrapper .inside .contents{padding:5%;opacity:0;transform:scale(.5);transform:translateY(-200%);transition:opacity .2s,transform .8s}.wrapper .inside .contents table{text-align:left;width:100%}.wrapper .inside .contents h1,.wrapper .inside .contents p,.wrapper .inside .contents table{color:#fff}.wrapper .inside .contents p{font-size:13px}