.about{width:100vw;background-color:#1d1d1d;position:fixed;z-index:10;bottom:10px;right:10px;justify-content:flex-end;align-items:flex-end;transition:all .2s ease}.about,.about .bg_links{width:40px;height:40px;display:flex}.about .bg_links{justify-content:center;align-items:center;background-color:hsla(0,0%,100%,.2);border-radius:100%;backdrop-filter:blur(5px);position:absolute}.about .logo{width:40px;height:40px;z-index:9;background-image:url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);background-size:50%;background-repeat:no-repeat;background-position:10px 7px;opacity:.9;transition:all 1s ease .2s;bottom:0;right:0}.about .social{opacity:0;right:0;bottom:0}.about .social .icon{width:100%;height:100%;background-size:20px;background-repeat:no-repeat;background-position:50%;background-color:transparent;display:flex;transition:all .2s ease,background-color .4s ease;opacity:0;border-radius:100%}.about .social.portfolio{transition:all .8s ease}.about .social.portfolio .icon{background-image:url(https://rafaelalucas91.github.io/assets/codepen/link.svg)}.about .social.dribbble{transition:all .3s ease}.about .social.dribbble .icon{background-image:url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg)}.about .social.linkedin{transition:all .8s ease}.about .social.linkedin .icon{background-image:url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg)}.about:hover{width:105px;height:105px;transition:all .6s cubic-bezier(.64,.01,.07,1.65)}.about:hover .logo{opacity:1;transition:all .6s ease}.about:hover .social{opacity:1}.about:hover .social .icon{opacity:.9}.about:hover .social:hover{background-size:28px}.about:hover .social:hover .icon{background-size:65%;opacity:1}.about:hover .social.portfolio{right:0;bottom:calc(100% - 40px);transition:all .3s cubic-bezier(.64,.01,.07,1.65) 0s}.about:hover .social.portfolio .icon:hover{background-color:#698fb7}.about:hover .social.dribbble{bottom:45%;right:45%;transition:all .3s cubic-bezier(.64,.01,.07,1.65) .15s}.about:hover .social.dribbble .icon:hover{background-color:#ea4c89}.about:hover .social.linkedin{bottom:0;right:calc(100% - 40px);transition:all .3s cubic-bezier(.64,.01,.07,1.65) .25s}.about:hover .social.linkedin .icon:hover{background-color:#0077b5}.wrapper{width:100vw;margin:0 auto;height:400px;background-color:#161616;display:flex;justify-content:center;align-items:center;position:relative;transition:all .3s ease}@media screen and (max-width:767px){.wrapper{height:700px}}.content{max-width:1024px;width:100%;padding:250px 4% 0;margin:0 auto;display:flex;justify-content:center;align-items:center}@media screen and (max-width:767px){.content{padding-top:300px;flex-direction:column}}.card{max-width:300px;min-width:200px;height:250px;background-color:#292929;margin:-5% 10px 10px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.24);border:2px solid rgba(7,7,7,.12);font-size:16px;transition:all .3s ease;position:relative;flex-direction:column;cursor:pointer}.card,.icon{width:100%;display:flex;justify-content:center;align-items:center}.icon{margin:0 auto;height:80px;max-width:80px;background:linear-gradient(90deg,#ff7e7e,#ff4848 40%,rgba(0,0,0,.28) 60%);border-radius:100%;color:#fff;transition:all .8s ease;background-position:0;background-size:200px}.material-icons.md-18{font-size:18px}.material-icons.md-24{font-size:24px}.material-icons.md-36{font-size:36px}.material-icons.md-48{font-size:48px}.card .title{width:100%;font-size:medium;font-family:Poppins,serif;text-align:center;margin:10px 0 0;color:#fff;font-weight:600;letter-spacing:4px}.readMore{color:#fff}.card:hover title{margin-top:5px;font-size:medium}.card .text{width:80%;font-size:9px;text-align:center;margin:5px auto 2px;color:#fff;font-weight:200;letter-spacing:2px;opacity:0;max-height:0;transition:all .3s ease}.card:hover{height:315px}.card:hover .info{height:90%}.card:hover .text{transition:all .3s ease;opacity:1;max-height:40px}.card:hover .icon{background-position:-120px;transition:all .3s ease}.card:hover .icon i{background:linear-gradient(90deg,#ff7e7e,#ff4848);-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:1;transition:all .3s ease}