body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: white;
    color: #999;
}

footer p {
    color: #aaa;
}

header {
    position: relative;
    height: 75vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
    background: black url("../img/wait.gif") no-repeat center!important;
}

header #logo {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 1;
}

header #buttons {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 1;
    display: none;
}

header #buttons .buttons {
    padding-top: 60vh;
}

picture {
    position: relative;
}

picture .play {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.5s linear;
}

picture:hover .play {
    visibility: visible;
    opacity: 1;
}


/*
picture {
    display: inline-block;
    overflow: hidden;
}

.movie-thumbnail img {
    display: block;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
}

picture:hover .movie-thumbnail img {
    transform: scale(1.2);
    transform-origin: 50% 50%;
}
*/

@media (max-width: 576px) {
    header {
        position: relative;
        height: 50vh;
        min-height: 25rem;
        width: 100%;
        overflow: hidden;
        background: black url("../img/wait.gif") no-repeat center!important;
    }
    header #buttons .buttons {
        padding-top: 40vh;
    }
}

footer {
    font-size: 0.9em;
}

footer a {
    color: white;
}

footer a:hover {
    color: #eee;
}

span.icon-instagram img {
    width: 16px;
    height: 16px;
}

.title {
    padding-bottom: 1.5em;
}

.title h3 {
    text-align: left;
}

.about {
    padding-bottom: 1.5em;
}

.bio {
    padding-bottom: 1.5em;
    color: #666;
}

.project {
    text-align: left;
    padding-bottom: 1.5em;
}

.project>h4 {
    padding-top: 3px;
    font-size: 1.1em;
    color: #666;
}

.project h5 {
    font-size: 1.0em;
}

.project p {
    font-size: 0.8em;
}

.player {
    font-size: 1px;
}

@media (pointer: coarse) and (hover: none) {
    .no-touch {
        display: none
    }
}