@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
html{height: 100%; position: relative;}
*{
    padding: 0;
    margin: 0;
    list-style-type: none;
    box-sizing: border-box;
    /*font-family: 'Josefin Sans', sans-serif;*/
}
.clear{clear: both;}

.profile{
    width: 265px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.2) ;
    float: left
}

#cover{
    width: 150%;
    height: 100%;
    position: absolute;
    transform: rotate(60deg);
    top: -73%;
    left: -24%;
    background: rgba(0,165,215,1);
    background: -moz-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,165,215,1)), color-stop(100%, rgba(0,125,163,1)));
    background: -webkit-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%);
    background: -o-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%);
    background: linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a5d7', endColorstr='#007da3', GradientType=1 );
}

#cover:before{
    content: "";
    position: absolute;
    border-width: 150px 20px 30px 30px;
    border-style: solid;
    border-color: #0381a8 transparent transparent transparent;
    top: 51%;
    left: 95.2%;
    transform: rotate(11.4deg);
}

#cover2{
    border-style: solid;
    border-width: 40px 80px 40px 40px;
    border-color: transparent transparent #057091 transparent;
    position: absolute;
    top: 113px;
    left: 119px;
    transform: rotate(-37.4deg);
}

#cover2:before{
    content: "";
    border-style: solid;
    border-width: 20px 24.2px 20px 20px;
    border-color: transparent transparent #00A4D7 transparent;
    position: absolute;
    top: 18px;
    left: -60px;
    transform: rotate(-39.3deg);
}

#shadow{
    clear: both;
    height: 10px;
    bottom: 200px;
    overflow: hidden;
    margin: 356px 0 0 0
}

#shadow img{
    width: 80%;
    height: 10px;
    padding: 0 0px 0 20px;
    opacity: 0.5;
}

#info{
    margin: 242px auto 0 0;
    padding: 10px 0 0 0;
}

#info > ul:last-child{
    position: absolute;
    top: 0;
}
#info > ul:first-child{
    border-bottom: 1px solid #ccc;
    box-shadow: 8px 4px 8px -4px rgba(0, 0, 0, 0.2);
}

#info li{
    padding: 2px 0 2px 10px;
    margin: 3px auto;
    font-size: 10pt;
}

#username{
    text-align: center;
    font-size: 1.5em!important;
    line-height: 1;
    font-weight: bold;
}

#avatar{
    width: 120px;
    height: 120px;
    position: absolute;
    z-index: 1;
    border: solid 5px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: .3s;
    margin-left: 38%;
    margin-top: 10px;
}

#info i{
    font-size: 14pt;
    margin: 0 5px;
    color: #057091
}

#avatar img{
    width: 100%;
}

#avatar:hover{
    border: solid 3px rgba(255, 255, 255, 0.6);
}

#logo{
    position: absolute;
    top: 20px;
    right: 23px;
}

#logo img{
    width: 110px;
    opacity: 0.6;
}