@font-face {
    font-family: 'BelweSTD-Medium';
    src: url('../fonts/BelweStd-Medium.otf')  format('opentype');
}
@font-face {
    font-family: 'BulmerMTStd-Regular';
    src: url('../fonts/BulmerMTStd-Regular.otf')  format('opentype');
}
@font-face {
    font-family: 'BulmerMTStd-Italic';
    src: url('../fonts/BulmerMTStd-Italic.otf')  format('opentype');
}
body {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: 300;
    line-height: 1;
    background-color: black;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
main {
    background-image: url('../img/agcs-a-background.jpg');
    background-position: center center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper {
    display: flex;
    flex-direction: column;
    margin: 1em;
    min-width: 288px;
}

/*  Structure & Fonts */
/*  ------------- */
section, hr {
    margin-bottom: 1em;
}
hr {
    border-bottom: 4px double #ccc;
    width: 80vw;
    margin-top: 0;
}
@media (min-width: 1024px) {
    hr {
        width: 100%;
    }
}
h1.title {
    font-family: 'BelweSTD-Medium', Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
}
p.description {
    font-family: 'BulmerMTStd-Italic', Georgia, 'Times New Roman', Times, serif;   
}
h1.title, p.description {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
}
@media (min-width: 1024px) {
    h1.title, p.description {
        font-size: 2em;
    }
}
#information ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 1024px) {
    #information ul {
        flex-direction: row;
        justify-content: space-between;
    }
}
#information ul li {
    padding: 0 1em;
    font-weight: 300;
    font-family: 'BulmerMTStd-Regular', Georgia, 'Times New Roman', Times, serif;
    font-variant: small-caps;
    color: #ccc;
    line-height: 1.25;
}
#social {
    margin-top: 1em;
    display: flex;
    justify-content: center;
}
#social a {
    width: 2.5em;
    height: 2.5em;
}
#social a:hover img {
    opacity: .5;
}
#social a img {
    width: 100%;
    height: 100%;
    transition: all .1s ease-out;
}