@font-face {
    font-family: 'Gidole';
    src: url('../fonts/gidole-regular-webfont.woff2') format('woff2'),
    url('../fonts/gidole-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
body {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.loud {
    font-size: 2em;
}

.dark {
    background: #0D181C;
}

.dark p, .dark p a {
    color: #fff;
}

.dark p a {
    text-decoration: underline;
}

.top-bar {
    height: 20px;
    background: #0D181C;
}

.hero {
    background: url("../img/eusonica-intro.jpg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;
}

@media (min-width: 768px) {
    .hero {
        background-attachment: fixed;
    }
}

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0D181C;
    color: #fff;
    font-family: 'Gidole', sans-serif;
    letter-spacing: 8px;
    padding: 2px 20px;
    animation: fadeIn 1s .5s;
}

.subhead {
    width: 100%;
    height: 120px;
    position: absolute;
    bottom: 0;
    margin: 0;
    background: #0D181C;
    color: #fff;
    font-family: 'Gidole', sans-serif;
    letter-spacing: 8px;
    padding-top: 20px;
    font-size: 1.2em;
    font-weight: 800;
    animation: fadeIn .5s 1s;
}

.light-gray-bg {
    background: #f8f9fa;
}

/**********
* Fade In *
**********/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

.fadeIn {
    opacity: 0;
}