.sif-b{opacity:0;transform:translateY(20px);animation:slide-in-from-bottom-animation 1s ease forwards}@keyframes slide-in-from-bottom-animation{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sif-r{opacity:0;transform:translate(20px);animation:slide-in-from-right-animation 1s ease forwards}@keyframes slide-in-from-right-animation{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.sif-l{opacity:0;transform:translate(-20px);animation:slide-in-from-left-animation 1s ease forwards}@keyframes slide-in-from-left-animation{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.slider{height:100px;margin:auto;position:relative;width:90%;display:grid;place-items:center;overflow:hidden}@media (min-width: 640px){.slider{height:120px}}.slide-track{display:flex;width:10000px;animation:scroll-left-1 40s linear infinite}.slide-track2{display:flex;width:10000px;animation:scroll-right-2 30s linear infinite}.slide-track3{display:flex;width:10000px;animation:scroll-left-1 30s linear infinite}.slide-track:hover,.slide-track2:hover,.slide-track3:hover{animation-play-state:paused}.skill-name{display:none;text-align:center;padding:2px;position:absolute;bottom:-20px;left:0;width:100%;transition:bottom .3s;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slide:hover .skill-name{display:block}@keyframes scroll-left-1{0%{transform:translate(0)}to{transform:translate(-3000px)}}@keyframes scroll-right-2{0%{transform:translate(-3000px)}to{transform:translate(0)}}@keyframes scroll-left-3{0%{transform:translate(0)}to{transform:translate(-3000px)}}.slide{height:70px;width:70px;display:flex;align-items:center;padding:15px;perspective:100px;margin-right:40px}@media (min-width: 640px){.slide{height:80px;width:80px}}img{width:100%;transition:transform 1s}img:hover{transform:translateZ(20px)}.slider:before,.slider:after{background:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);content:"";height:100%;position:absolute;width:15%;z-index:2}.slider:before{left:0;top:0}.slider:after{right:0;top:0;transform:rotate(180deg)}
