@font-face {
    font-family: "Avenir";
    src: url("./avenir/AvenirNextLTPro-Bold.woff");
    src: url("./avenir/AvenirNextLTPro-BoldCn.woff");
    src: url("./avenir/AvenirNextLTPro-BoldCnIt.woff");
    src: url("./avenir/AvenirNextLTPro-Cn.woff");
    src: url("./avenir/AvenirNextLTPro-CnIt.woff");
    src: url("./avenir/AvenirNextLTPro-Demi.woff");
    src: url("./avenir/AvenirNextLTPro-DemiCn.woff");
    src: url("./avenir/AvenirNextLTPro-DemiCnIt.woff");
    src: url("./avenir/AvenirNextLTPro-DemiIt.woff");
    src: url("./avenir/AvenirNextLTPro-HeavyCn.woff");
    src: url("./avenir/AvenirNextLTPro-HeavyCnIt.woff");
    src: url("./avenir/AvenirNextLTPro-It.woff");
    src: url("./avenir/AvenirNextLTPro-MediumCn.woff");
    src: url("./avenir/AvenirNextLTPro-MediumCnIt.woff");
    src: url("./avenir/AvenirNextLTPro-Regular.woff");
    src: url("./avenir/AvenirNextLTPro-UltLtCn.woff");
    src: url("./avenir/AvenirNextLTPro-UltLtCnIt.woff");
}

html,
body {
    background-color: #FFFFFF;
    background-size: cover;
    font-family: Avenir;
}

h1,
h2,
h3 {
    color: #474e52;
}

#center {
    text-align: center;
}

#logo {
    padding: 50px 0px 40px 0px;
    display: block;
    margin: auto;
}

.socialIcons {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.socialIcon {
    width: 33.33%;
    height: 100px;
    float: left;
    margin-top: 100px;
    font-size: 50px;
    line-height: 100px;
    transition: margin-top .5s, color .5s;
    cursor: pointer;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    width: 300px;
}

.imgfilter {
    filter: grayscale(0.9);
}

.imgborder {
    border: #cccccc solid 1px;
}

@media (min-width: 992px) {
    #logo {
        width: 450px;
        padding: 70px 0px 60px 0px;
    }
    .socialIcons {
        width: 50%;
        display: block;
        margin: auto;
    }
}