.skills{display:flex;justify-content:center;flex-wrap:wrap}.skills>.skill{padding:5px;height:120px}.skills>.skill>.body{z-index:100;background-color:rgba(0,0,0,.502);border-radius:5px;padding:5px;overflow:hidden;flex-wrap:wrap;transition:all .2s ease-in-out}.skills>.skill>.body,.skills>.skill>.body .logo{width:100%;height:110px;display:flex;justify-content:center}.skills>.skill>.body .logo{align-items:center}.skills>.skill>.body .logo img{position:relative;height:100%;width:auto;max-width:100%;filter:drop-shadow(0 0 2px #888)}.skills>.skill>.body>.info{display:none;width:100%;height:50px;font-size:.8rem}.skills>.skill>.body>.info>*{color:#000}.skills>.skill>.body>.info .level{width:100%;height:15px;border-radius:5px;background-color:#e6e6e6;margin-top:10px}.skills>.skill>.body>.info .level>.percent{font-size:13px;padding-left:5px;height:15px;border-radius:5px;background-color:#255077}.skills>.skill:hover{overflow:visible;z-index:1000}.skills>.skill:hover>.body{background-color:#fff;height:160px;scale:1.1}.skills>.skill:hover>.body>.info{display:flex;flex-direction:column;align-items:center}@media only screen and (max-width:767px){.skills>.skill{width:33.33%}}@media only screen and (min-width:768px)and (max-width:1200px){.skills>.skill{width:16.66%}}@media only screen and (min-width:1201px){.skills>.skill{width:10%}}