*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins', sans-serif}body{background:#efefef}.container{padding:20px;display:flex;justify-content:center;align-items:center;min-height:100vh}.card{width:400px;height:550px;background:white;border-radius:5px;box-shadow:0 5px 15px 1px rgba(0,0,0,0.1);overflow:hidden;position:relative}.card::before{content:'';position:absolute;width:100%;height:270px;top:0;left:0;background-image:linear-gradient(to top, #00f2fe, #4facfe);clip-path:circle(400px at 50% -48.5%)}.card .header{position:relative;height:265px}.card .header .hamburger-menu{position:absolute;width:20px;height:16px;top:1.4rem;left:1.9rem;cursor:pointer;opacity:.8}.card .header .hamburger-menu:hover{opacity:1}.card .header .hamburger-menu .center{position:absolute;height:2px;width:70%;top:50%;transform:translateY(-50%);background-color:white;border-radius:1px}.card .header .hamburger-menu::before{bottom:0}.card .header .hamburger-menu::before,.card .header .hamburger-menu::after{content:'';position:absolute;width:100%;height:2px;border-radius:1px;background-color:white}.card .header .mail{position:absolute;top:1rem;right:2rem;font-size:1.5rem;color:white;opacity:.8;transition:.3s;z-index:3}.card .header .mail:hover{opacity:1}.card .header .main{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.card .header .main .image{position:relative;width:110px;height:110px;border-radius:50%;background:url("https://wpflames.com/demo/cards/project-026/images/gabor.jpg") no-repeat center/cover;border:4px solid #00d8fe;margin-bottom:2px;overflow:hidden}.card .header .main .image:hover .hover{opacity:1}.card .header .main .image .hover{position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(79,172,254,0.7);display:flex;justify-content:center;align-items:center;color:white;cursor:pointer;transition:.5s;opacity:0}.card .header .main .image .hover.active{opacity:1}.card .header .main .name{font-size:1.2rem;color:white;font-weight:500;line-height:1;margin:5px 0}.card .header .main .sub-name{font-family:'Cutive Mono', monospace;font-weight:100;font-size:01.2rem;opacity:.8;color:white}.card .content{display:flex;padding:1.7rem 2.5rem 2.6rem 2.5rem}.card .content .left .title{position:relative;color:#555;font-weight:500;font-size:1.1rem;padding:0 0 3px 0;margin-bottom:.9rem;display:inline-block}.card .content .left .title::after{content:'';position:absolute;height:3px;width:50%;background-color:#555;bottom:0;left:0}.card .content .left .text{color:#666;font-weight:300;line-height:1.7}.card .content .left .icons-container{padding:1rem 0}.card .content .left .icons-container .icon{color:#c4c4c4;font-size:1.3rem;text-decoration:none;margin-right:8px;transition:.3s}.card .content .left .icons-container .icon:hover{color:#4facfe}.card .content .left .buttons-wrap{display:flex;margin-top:5px}.card .content .left .buttons-wrap .follow-wrap,.card .content .left .buttons-wrap .share-wrap{flex:4;display:flex;justify-content:center;align-items:center;transition:.5s}.card .content .left .buttons-wrap .follow-wrap:hover{flex:5}.card .content .left .buttons-wrap .follow-wrap .follow{padding:9.6px 0;width:100%;background:linear-gradient(to right, #4facfe, #00f2fe);color:white;text-align:center;text-decoration:none;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;border-radius:18px;margin-right:3px}.card .content .left .buttons-wrap .share-wrap:hover{flex:5}.card .content .left .buttons-wrap .share-wrap .share{padding:7px 0;width:100%;border:2px solid #4facfe;color:#4facfe;text-decoration:none;text-align:center;text-transform:uppercase;margin-left:3px;border-radius:18px;font-size:.7rem;letter-spacing:1px}.card .content .right{display:flex;flex-direction:column;text-align:right;align-items:flex-end;justify-content:space-between;margin-left:2.1rem;padding-top:2rem}.card .content .right .number{font-size:2.1rem;font-weight:200;line-height:1.2}.card .content .right .number-title{font-size:.7rem;color:#666;font-weight:400;line-height:1;letter-spacing:1px;text-transform:uppercase}.modal{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,0.8);transition:.5s;opacity:0;z-index:-1}.modal.show{opacity:1;z-index:99}.modal.show img{top:50%;transform:translate(-50%, -50%) scale(1);opacity:1}.modal img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.3);max-width:100%;max-height:100%;z-index:-1;opacity:0;transition:.5s}.modal .close{position:absolute;top:1rem;right:1rem;width:30px;height:30px;cursor:pointer;transition:.3s}.modal .close::before,.modal .close::after{content:'';position:absolute;width:100%;height:3px;top:50%;left:50%;transform:translate(-50%, -50%) rotate(45deg);background-color:white}.modal .close::after{transform:translate(-50%, -50%) rotate(-45deg)}.modal .close:hover{opacity:.5}@media (max-width: 410px){.card{height:555px}.card .content{display:block}.card .content .right{flex-direction:row;text-align:center;justify-content:space-around;align-items:center margin 0}}@media (max-width: 370px){.card::before{clip-path:circle(400px at 50% -74.5%);height:230px}.card .header{height:230px}.card .header .hamburger-menu{width:16px;height:12px;top:1.1rem;left:1.5rem}.card .header .mail{font-size:1.1rem;top:.75rem;right:1.5rem}.card .header .main .image{width:90px;height:90px;border-width:3px}.card .header .main .name,.card .header .main .sub-name{font-size:1rem}.card .content{padding:1.2rem 1.8rem 1.8rem 1.8rem}.card .content .left .title{font-size:1rem;margin-bottom:.5rem}.card .content .left .text{font-size:.9rem}.card .content .left .icons-container{padding:.5rem 0}.card .content .left .icons-container .icon{font-size:1.1rem}.card .content .left .buttons-wrap .follow{padding:8px 0;border-radius:15px;font-size:.6rem}.card .content .left .buttons-wrap .share{padding:8px 0;border-radius:15px;font-size:.6rem}.card .content .right{margin-left:0;padding-top:1rem}.card .content .right .number{font-size:1.8rem}.card .content .right .number-title{font-size:.6rem}}
/*# sourceMappingURL=style.css.map */