@import url(https://fonts.googleapis.com/css?family=Open+Sans);body{margin:20px 0 40px;font-family:"Open Sans",sans-serif;color:#282828}.skills{width:80%;max-width:960px;height:780px;height:788px;margin:auto;position:relative}.lines{height:100%;position:relative}.line{height:inherit;width:2px;position:absolute;background:rgba(238,238,238,.6)}.line.l--0{left:0}.line.l--25{left:25%}.line.l--50{left:50%}.line.l--75{left:75%}.line.l--100{left:calc(100% - 1px)}.line__label{display:block;width:100px;font-size:14px;text-align:center;position:absolute;bottom:-20px;right:-50px;top:108%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.line__label.title{text-transform:uppercase;font-weight:700}.charts{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.chart:not(:first-child){margin-top:10px}.chart__title{display:block;margin:0 0 10px;font-weight:700;opacity:0;-webkit-animation:1s anim-lightspeed-in ease forwards;animation:1s anim-lightspeed-in ease forwards}.chart--prod .chart__title{-webkit-animation-delay:3.3s;animation-delay:3.3s}.chart--design .chart__title{-webkit-animation-delay:4.5s;animation-delay:4.5s}.chart--horiz{overflow:hidden}.chart__bar{height:30px;margin-bottom:10px;background:-webkit-gradient(linear,right top,left top,from(#4cb8c4),to(#3cd3ad));background:-o-linear-gradient(right,#4cb8c4,#3cd3ad);background:linear-gradient(to left,#4cb8c4,#3cd3ad);border-top-right-radius:4px;border-bottom-right-radius:4px;opacity:0;-webkit-animation:1s anim-lightspeed-in ease forwards;animation:1s anim-lightspeed-in ease forwards}.chart--dev .chart__bar:nth-of-type(11){-webkit-animation-delay:2.7s;animation-delay:2.7s}.chart--dev .chart__bar:nth-of-type(10){-webkit-animation-delay:2.5s;animation-delay:2.5s}.chart--dev .chart__bar:nth-of-type(9){-webkit-animation-delay:2.3s;animation-delay:2.3s}.chart--dev .chart__bar:nth-of-type(8){-webkit-animation-delay:2.1s;animation-delay:2.1s}.chart--dev .chart__bar:nth-of-type(7){-webkit-animation-delay:1.9s;animation-delay:1.9s}.chart--dev .chart__bar:nth-of-type(6){-webkit-animation-delay:1.7s;animation-delay:1.7s}.chart--dev .chart__bar:nth-of-type(5){-webkit-animation-delay:1.5s;animation-delay:1.5s}.chart--dev .chart__bar:nth-of-type(4){-webkit-animation-delay:1.3s;animation-delay:1.3s}.chart--dev .chart__bar:nth-of-type(3){-webkit-animation-delay:1.1s;animation-delay:1.1s}.chart--dev .chart__bar:nth-of-type(2){-webkit-animation-delay:.9s;animation-delay:.9s}.chart--dev .chart__bar:nth-of-type(1){-webkit-animation-delay:.7s;animation-delay:.7s}.chart--prod .chart__bar:nth-of-type(2){-webkit-animation-delay:4.2s;animation-delay:4.2s}.chart--prod .chart__bar:nth-of-type(1){-webkit-animation-delay:4s;animation-delay:4s}.chart--design .chart__bar:nth-of-type(4){-webkit-animation-delay:5.8s;animation-delay:5.8s}.chart--design .chart__bar:nth-of-type(3){-webkit-animation-delay:5.6s;animation-delay:5.6s}.chart--design .chart__bar:nth-of-type(2){-webkit-animation-delay:5.4s;animation-delay:5.4s}.chart--design .chart__bar:nth-of-type(1){-webkit-animation-delay:5.2s;animation-delay:5.2s}.chart__label{padding-left:10px;line-height:30px;color:#fff}@-webkit-keyframes anim-lightspeed-in{0%{-webkit-transform:translateX(-200%);transform:translateX(-200%);opacity:1}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes anim-lightspeed-in{0%{-webkit-transform:translateX(-200%);transform:translateX(-200%);opacity:1}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}