:root{
    --before-color: #2695ea;
}
@import url(https://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
    box-sizing:border-box;
}
body{
    font-family: 'Lato', sans-serif;
}
ul.experience-hub{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.letter{
    display: inline-block;
    font-weight: 900;
    font-size: 2em;
    margin: 0.5em;
    position: relative;
    color: #f5f5f5;
    transform-style: preserve-3d;
    perspective: 400;
    z-index: 1;
}
.letter:before, .letter:after{
    position:absolute;
    content: attr(data-letter);
    transform-origin: top left;
    top:0;
    left:0;
}
.letter, .letter:before, .letter:after{
    transition: all 0.3s ease-in-out;
}
.letter:before{
    color: var(--before-color);
    text-shadow:
            -1px 0px 1px rgba(255,255,255,.8),
            1px 0px 1px rgba(0,0,0,.8);
    z-index: 3;
    transform:
            rotateX(0deg)
            rotateY(-15deg)
            rotateZ(0deg);
}
.letter:after{
    color: rgba(0,0,0,.11);
    z-index:2;
    transform:
            /*scale(1.08,1)*/
            rotateX(0deg)
            rotateY(0deg)
            rotateZ(0deg)
            skew(0deg,1deg);
}
.letter:hover:before{
    color: var(--before-color);
    transform:
            rotateX(0deg)
            rotateY(-40deg)
            rotateZ(0deg);
}
.letter:hover:after{
    transform:
            scale(1.08,1)
            rotateX(0deg)
            rotateY(40deg)
            rotateZ(0deg)
            skew(0deg,22deg);
}
.years-exp{
    /*color: transparent;*/
    /*background: none;*/
    position: absolute;
    font-size: 1.2rem;
    background: #000;
    cursor: wait;
    color: #FFF;
    padding: 0 10px;
    border-radius: 50%;
    top: -20px;
    right: -35px;
    transition: top 3s ease-in;
}

.years-exp:hover{
    background: #2695ea;
    color: #FFF;
}