*{margin:0;padding:0;border:0}:focus{outline:0}a:link,a:visited{color:#fff;text-decoration:none}body{font-family:'Open Sans',sans-serif;background:#fc6;padding:20px;transition:all .5s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main{max-width:1100px;max-height:700px;margin:0 auto;border-radius:7px;box-shadow:0 0 49px -18px rgba(0,0,0,.75);display:flex;flex-flow:row wrap;background:#f2f2f2}main h1{font-size:24px;font-weight:400;color:#707584}@media (max-width:870px){main{width:100%}body{padding:10px}}#cardSection{flex-grow:2;padding:50px;margin-bottom:20px}#cardSection header{display:flex}#cardSection header h1{margin-bottom:50px;padding-left:20px;flex-grow:1}#cardSection header .add-cards{font-size:24px;font-weight:700;margin-right:30px;color:#8393CA}#cardSection #cards li{max-width:250px;min-width:200px;height:150px;margin:0 auto 40px;box-sizing:border-box;padding:10px;background:#fff;border-radius:5px;list-style:none;border:2px solid #e1e1e1;transition:all .2s ease-in;transform:scale(1);cursor:pointer}#cardSection #cards li:before{content:'';display:block;min-width:200px;height:150px;position:absolute;z-index:1}#cardSection #cards li:hover{border:5px solid #8393CA;transition:all .2s ease-in;transform:scale(1.1)}#cardSection #cards li img,#cardSection #cards li p{color:#ccc;margin-bottom:15px;user-select:all}@media (max-width:660px){#cardSection #cards li{min-width:300px;margin:0 0 30px 30px}}#cardSection #cards .active{border:5px solid #8393CA!important}#balanceSection{flex-grow:5;background:#fff;padding:50px;max-height:600px;border-radius:0 7px 7px 50px/0 7px 7px 0}@media (max-width:770px){#cardSection{padding:10px;overflow:hidden}#cardSection #cards{display:flex}#balanceSection{padding:40px 10px 10px}}#balanceSection header{border-bottom:1px solid #ccc;display:flex;height:90px;margin-bottom:50px}#balanceSection header .balance{width:150px;margin-left:auto;font-size:36px;font-weight:700;margin-top:-7px}#balanceSection header .cents{font-size:22px;position:relative;top:-10px}#balanceSection #containerList{overflow-y:scroll;height:auto;max-height:500px}#balanceSection #transactionList{transition:all .5s;padding-right:10px;height:600px}#balanceSection #transactionList li{list-style:none;margin-bottom:50px;display:flex;overflow:hidden;max-height:200px;justify-content:space-between}#balanceSection #transactionList li div{flex-grow:1;width:0}#balanceSection #transactionList li div h2{color:#444751;font-weight:700;font-size:18px;margin-bottom:10px}#balanceSection #transactionList li div p{color:#ccc;font-size:14px}#balanceSection #transactionList li .transactionIcons{flex-grow:0;width:20px;height:20px;text-align:center;border:2px solid #ccc;border-radius:30px;font-size:22px;font-weight:700;margin-right:30px;margin-top:15px}#balanceSection #transactionList li .transactionIcons .plus{display:block;margin-top:-6px;color:#444751}#balanceSection #transactionList li .transactionIcons .minus{display:block;margin-top:-7px;color:#444751}#balanceSection #transactionList li .transactionValue{font-size:18px;font-weight:700;margin-top:15px}#balanceSection #transactionList li .deposit{color:#6c3}#balanceSection #transactionList li .withdrawn{color:#8393CA}