.center{display:flex;align-items:center;justify-content:center;height:70vh}.wrapper{max-width:780px;margin:0 auto;display:flex}.container{color:#fff;background-color:#fff;border-radius:2px;box-shadow:0 35px 80px 7px rgba(0,0,0,.1);margin:0 20px;min-width:220px;min-height:220px;perspective:1000px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:box-shadow .3s}.container--facebook{background-color:#37508d}.container--twitter{background-color:#00a5ea}.container--instagram{background-color:#195484}.box{align-items:flex-end;background-color:#fff;box-shadow:0 20px 60px 0 rgba(0,0,0,.08);border-radius:2px;color:#fff;font-size:2.25rem;position:relative;text-align:center;perspective:1000px;width:220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center}.box,.box>*{transform-style:preserve-3d}.box,.box--left,.box>*{transition:transform .8s}.box--middle{transition:transform .4s cubic-bezier(.23,1,.32,1)}.box--right{transition:transform .7s cubic-bezier(.68,-.55,.27,1.55)}.container:hover .box--left{transform:translate(-40px,-40px) rotate(-90deg) rotateY(180deg)}.container:hover .box--left .social-svg{transform:rotate(270deg) rotateY(180deg) translate(-122%,-4%)}.container:hover .box--left .count{transform:rotate(270deg) rotateY(180deg) translate(-200%,200%)}.container:hover .box--middle{transform:translateY(-40px)}.container:hover .box--right{transform:translate(40px,-40px)}.social-svg{top:50%;font-size:2.5rem}.count,.social-svg{position:absolute;left:50%;transform:translate(-50%,-50%)}.count{font-size:14px;color:rgba(0,0,0,.4);text-align:center;top:70%}.count,.follow{display:block;font-weight:400}.follow{bottom:0;color:#fff;font-size:13px;letter-spacing:.5px;text-transform:uppercase;position:absolute}.follow--left{right:0;transform:translate(-14px,-10px)}.follow--middle{left:50%;transform:translate(-50%,-10px)}.follow--right{left:0;transform:translate(14px,-10px)}.social-buttons{flex-wrap:wrap;gap:8px;margin:32px auto 16px}.social-button,.social-buttons{display:flex;justify-content:center}.social-button{position:relative;align-items:center;outline:none;width:64px;height:64px;text-decoration:none;border-radius:100%;background:#fff;text-align:center;transition:color .3s;font-size:32px;color:#555;overflow:hidden}.social-button:after{content:"";position:absolute;top:-1px;left:50%;display:block;width:0;height:0;border-radius:100%;transition:.3s;z-index:0}.social-button:focus,.social-button:hover{color:#fff}.social-button:focus:after,.social-button:hover:after{width:calc(100% + 2px);height:calc(100% + 2px);margin-left:calc(-50% - 1px)}.social-button i{position:relative;z-index:1;transition:.3s;font-size:26px}.social-button--facebook{color:#3b5999}.social-button--facebook:after{background:#3b5999}.social-button--linkedin{color:#0077b5}.social-button--linkedin:after{background:#0077b5}.social-button--snapchat{color:#eec900}.social-button--snapchat:after{background:#eec900}.social-button--github{color:#6e5494}.social-button--github:after{background:#6e5494}.social-button--codepen{color:#212121}.social-button--codepen:after{background:#212121}.social-button--twitter{color:#1da1f2}.social-button--twitter:after{background:#1da1f2}.social-button:focus i,.social-button:hover i{color:#fff}.social-logo{width:38px;height:38px;display:block;margin:0 auto;transition:transform .2s}.btn:hover .social-logo{transform:scale(1.12)}