@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css) ;
.social-icon {
    color: #fff;
}
.social-media{
    z-index: -1;
}
.social-icons li {
    display: inline;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-twitter {
    position: fixed;
    left: 147px;
    top: 5px;
    
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: dimgray;
    border-radius: 5px;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-gitlab {
    position: fixed;
    top: 5px;
    left: 52px;
    
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: dimgray;
    border-radius: 5px;
}
.fa-gitlab:hover {
    background-color: #fc6d26;
}
.fa-github {
    position: fixed;
    top: 5px;
    left: 53.9px;
    
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: dimgray;
    border-radius: 5px;
}
.fa-github:hover {
    background-color: black;
}
.fa-linkedin {
    position: fixed;
    top: 5px;
    left: 100px;
    
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: dimgray;
    border-radius: 5px;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-envelope {
    position: fixed;
    top: 5px;
    left: 5px;
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: dimgray;
    border-radius: 5px;
}
.fa-envelope:hover {
    background-color: #02b416;
}