@font-face {
    font-family: SSSocialCircle;
    src: url("../WebFonts/ss-social-circle.eot");
    src: url("../WebFonts/ss-social-circle.svg#SSSocialCircle") format("svg"),
         url("../WebFonts/ss-social-circle.eot?#iefix") format("embedded-opentype"),
         url("../WebFonts/ss-social-circle.woff") format("woff"),
         url("../WebFonts/ss-social-circle.ttf")  format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    color: #555;
    font-family: source-sans-pro, sans-serif;
}

#container {
    margin: 100px auto 0 auto;
    width: 300px;
    text-align: center;
}

#container > #logo {
    margin-bottom: 4px;
    padding-top: 104px;
    background: url("../Images/Avatar.png") top center no-repeat;
    font-size: 32px;
    font-weight: bold;
}

#container > #logo > #firstName {
    color: #C00000;
}

#container > #logo > #lastName {
    color: #000;
}

#container > #social {
    font-size: 32px;
}

#container > #social > a {
    display: inline-block;
    outline: 0;
    color: #555;
    text-decoration: none;
    font-family: SSSocialCircle;
}

#container > #social > a:active,
#container > #social > a:focus,
#container > #social > a:hover {
    color: #C00000;
    transition: color 0.5s;
}

#container > #social > a.email:after {
    content: "✉";
}

#container > #social > a.twitter:after {
    content: "";
}

#container > #social > a.stackOverflow:after {
    content: "";
}

#container > #social > a.gitHub:after {
    content: "";
}

#container > #social > a.gist:after {
    content: "";
}