.personal-box {
    position: relative;
    cursor: url(/assets/res/normal.cur), default;
    width: 350px;
    background: rgba(0,0,0,0.2);
    padding: 40px;
    text-align: center;
    margin: 0;
    margin-top: 50px;
    color: white;
    font-family: 'Century Gothic',sans-serif;
    opacity: 1;
    left: 10px;
    /*left: -410px;*/
    transition: 1s;
    z-index: 10;
    min-width: 350px;
}


.personal-box:hover
{
    opacity: 1;
    left: 0;
}

.personal-box:hover+.main-content
{
    opacity: 0.2;
}

.avatar {
    position:relative;
    display:block;

    -webkit-transition: 3s;
    -webkit-transition: -webkit-transform 3s ease-out;
    transition: transform 3s ease-out;
    -moz-transition: -moz-transform 3s ease-out;
    display: inline-block;
}

.avatar:hover
{
    transform: rotate(360deg);
}

.avatar img
{
    font-size: 40px;
    letter-spacing: 4px;
    font-weight: 100;
    border-radius: 50%;
    box-shadow: 8px 8px 8px rgba(0,0,0,0.2);
}


.personal-box a {
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: 10;
    color: white;
    text-decoration: none;
}

.personal-box h5 {
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: 100;
}

.personal-box p {
    text-align: justify;
}

.personal-box li {
    display: inline-block;
    margin: 6px;
    list-style: none;
}

.personal-box li a {
    color: white;
    text-decoration: none;
    font-size: 50px;
    transition: all ease-in-out 250ms;
}

.personal-box li a:hover {
    color: #b9b9b9;
}