:root{--primary: #2175f5}*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins', sans-serif}body{background:#efefef}.container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:40px;overflow:hidden}.container .card{display:flex;justify-content:center;align-items:center;width:860px}.container .card .shoeBg{box-shadow:-15px 0 35px rgba(0,0,0,0.1),0 -15px 35px rgba(0,0,0,0.1),0 15px 25px rgba(0,0,0,0.1);position:relative;width:50%;height:475px}.container .card .gradients{position:absolute;width:100%;height:100%;top:0;left:0}.container .card .gradients .gradient{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-2}.container .card .gradients .gradient[color="blue"]{background:linear-gradient(to right, #00b4db, #0083b0)}.container .card .gradients .gradient[color="red"]{background:linear-gradient(to right, #d62926, #ee625f)}.container .card .gradients .gradient[color="green"]{background:linear-gradient(to right, #11998e, #1ce669)}.container .card .gradients .gradient[color="orange"]{background:linear-gradient(to right, #fc4a1a, #f7b733)}.container .card .gradients .gradient[color="black"]{background:linear-gradient(to right, #111, #666)}.container .card .gradients .gradient.first{z-index:0;animation:width 1s ease}.container .card .gradients .gradient.second{z-index:-1}@keyframes width{from{width:0%}to{width:100%}}.container .card .imgBx{position:relative}.container .card .imgBx .shoe{position:absolute;width:140%;z-index:3;opacity:0;transform:rotate(-20deg);left:-170px;top:50px}.container .card .imgBx .shoe.show{opacity:1}.container .card h1.nike{position:absolute;top:85px;left:15px;font-size:11rem;text-transform:uppercase;line-height:.9;color:white;opacity:.1;z-index:3}.container .card .logo{position:absolute;width:100px;top:20px;left:20px;z-index:3}.container .card .share{position:absolute;z-index:3;top:15px;right:15px;background-color:white;width:50px;height:50px;border-radius:50%;color:white;text-align:center;color:var(--primary);font-size:1.3rem;line-height:50px;text-decoration:none;transition:.5s}.container .card .share:hover{transform:scale(1.1)}.container .card .info{box-shadow:-15px 0 35px rgba(0,0,0,0.1),0 -15px 35px rgba(0,0,0,0.1),0 15px 25px rgba(0,0,0,0.1);background:white;padding:35px 40px;width:50%;z-index:1}.container .card .info .shoeName{padding:0 0 10px 0}.container .card .info .shoeName div{display:flex;align-items:center}.container .card .info .shoeName div .big{margin-right:10px;font-size:2rem;line-height:1;color:#333}.container .card .info .shoeName div .new{background:var(--primary);text-transform:uppercase;color:white;padding:3px 10px;border-radius:5px;font-size:.8rem}.container .card .info .shoeName small{font-weight:500;color:#444444;margin-top:3px;text-transform:capitalize}.container .card .info .shoeName,.container .card .info .description,.container .card .info .colorBx,.container .card .info .size-container{border-bottom:1px solid #dadada}.container .card .info .description{padding:10px 0}.container .card .info .description .text{color:#555;font-size:17px}.container .card .info .colorBx{padding:10px 0}.container .card .info .colorBx .colors{padding:8px 0;display:flex;align-items:center}.container .card .info .colorBx .colors .color{width:25px;height:25px;border-radius:50%;margin:0 10px;border:3px solid;transition:.5s}.container .card .info .colorBx .colors .color[color="blue"]{background:#2175f5;border-color:#2175f5}.container .card .info .colorBx .colors .color[color="red"]{background:#f84848;border-color:#f84848}.container .card .info .colorBx .colors .color[color="green"]{background:#29b864;border-color:#29b864}.container .card .info .colorBx .colors .color[color="orange"]{background:#ff5521;border-color:#ff5521}.container .card .info .colorBx .colors .color[color="black"]{background:#444;border-color:#444}.container .card .info .colorBx .colors .color.active{border-color:white;box-shadow:0 0 10px 5px rgba(0,0,0,0.2);transform:scale(1.1)}.container .card .info .size-container{padding:10px 0;margin-bottom:10px}.container .card .info .size-container .sizes{padding:8px 0;display:flex;align-items:center}.container .card .info .size-container .sizes .size{width:40px;height:40px;border-radius:6px;background-color:#eee;margin:0 10px;text-align:center;line-height:40px;font-size:1.1rem;font-weight:500;cursor:pointer;transition:.3s}.container .card .info .size-container .sizes .size.active{background:var(--primary);color:white}.container .card .info .buy-price{padding-top:15px;display:flex;justify-content:space-between;align-items:center}.container .card .info .buy-price .buy{padding:.7rem 1rem;background:var(--primary);text-decoration:none;color:white;text-transform:uppercase;letter-spacing:1px;font-weight:500;font-size:1rem;transition:.5s}.container .card .info .buy-price .buy i{font-size:1.2rem;margin-right:5px}.container .card .info .buy-price .price{color:#333;display:flex;align-items:flex-start;font-size:1.4rem}.container .card .info .buy-price .price h1{font-size:2.1rem;font-weight:600;line-height:1}.container .card .info .buy-price .price i{position:relative;top:8px;left:-5px}.title{color:#3a3a3a;font-weight:600;font-size:1.2rem;text-transform:uppercase}@media (max-width: 992px){.container{padding:0}.container .card{flex-direction:column;width:100%;box-shadow:0 0 35px 1px rgba(0,0,0,0.2)}.container .card div{width:100%;box-shadow:none}.container .card .shoeBg{width:100%}.container .card .shoeBg .nike{top:20%;left:5%}.container .card .imgBx .shoe{width:100%;transform:rotate(-10deg);top:30px;left:-30px}.container .card .info{width:100%}.container .card .info .buy-price{flex-direction:column;text-align:center;width:200px;margin:auto}.container .card .info .buy-price .price{justify-content:center;margin-top:30px;order:-1;margin-bottom:50px}}@media (max-width: 768px){.container .card .logo{width:70px}.container .card .share{width:40px;height:40px}.container .card .share i{font-size:1rem;line-height:0;position:relative;top:-5px}}@media (max-width: 490px){.container .card .logo{width:60px}.container .card .share{width:35px;height:35px;top:10px;right:10px}.container .card .share i{font-size:.8rem;top:-10px}.container .card .shoeBg .nike{font-size:7rem}.container .card .shoeBg .imgBx img.shoe{top:10px}.container .card .info{padding:20px}.container .card .info .colorBx .colors .color{width:20px;height:20px;border-width:4px}.container .card .info .size-container .sizes span.size{width:30px;height:30px;margin:0 8px;font-size:.9rem;line-height:30px}.container .card .info .shoeName div .big{font-size:1.3rem}.container .card .info .shoeName h3.small{font-size:.9rem}.container .card .info .shoeName .new{padding:2px 6px;font-size:.9rem}.container .card .info h3.title{font-size:.9rem}.container .card .info .description p.text{font-size:.8rem}.container .card .info .buy-price .buy{padding:.5rem .8rem;font-size:.8rem}.container .card .info .buy-price .price h2{font-size:1.5rem}.container .card .info .buy-price .price i{font-size:.9rem}}
/*# sourceMappingURL=style.css.map */