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