body {
    background: white url("../img/bg_header.jpg") no-repeat 0 50px;
    /* 0.62418 = img_h/img_w */
    background-size: 100vw calc(100vw * 0.62418);
}

@media screen and (orientation: landscape) {
    body {
        background-size: 100vw calc(80vw * 0.62418);
    }
}

@media screen and (max-width: 500px) {
    body {
        background-position-y: 40px;
    }
}

section#header {
    height: 50vw;
    padding: 0;
    color: black;
    background: none;
    position: relative;
}

@media screen and (orientation: landscape) {
    section#header {
        height: 45vw;
    }
}

.svg-container {
    width: 36vw;
    position: absolute;
    left: 50%;
    /* 0.31209 = img_w/img_h/2 */
    top: calc(100vw * 0.31209 + 50px);
    transform: translate(-50%, -54%);
}

@media screen and (orientation: landscape) {
    .svg-container {
        width: 30vw;
        /* 0.31209 = img_w/img_h/2 */
        top: calc(100vw * 0.31209 * 0.8 + 50px);
    }
}

@media screen and (max-width: 500px) {
    .svg-container {
        top: calc(100vw * 0.31209 + 40px);
    }
}

.section-title {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.section-content {
    font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@keyframes up-down {
    from {
        bottom: 5px;
    }
    to {
        bottom: 20px;
    }
}

@media screen and (max-width: 768px) {

    @keyframes up-down {
        from {
            bottom: 0px;
        }
        to {
            bottom: 15px;
        }
    }
}

.page-header {
    height: 40vh;
    padding: 2rem 1rem;
}

/*
.page-header .btn {
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
}
*/
.page-header .btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
}

.page-header .project-name {
    font-size: 1.75rem;
}

.page-header .project-tagline {
    font-size: 1rem;
}

@media (orientation: landscape) {
    .page-header {
        height: 100vh;
        padding: 3rem 4rem;
    }

    .page-header .project-name {
        font-size: 2.25rem;
    }

    .page-header .project-tagline {
        font-size: 1.15rem;
    }

    .page-header .btn {
        display: inline-block;
        width: auto;
        padding: 0.6rem 0.9rem;
    }

    .align-bottom {
        position: absolute;
        bottom: 3rem;
        left: 50%;
    }

    .align-bottom * {
        position: relative;
        left: -50%;
    }
}

#support p .btn {
    margin-top: 60px;
}

section#promovideo {
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 500px) {
    section#project {
        padding-bottom: 30px;
    }

    section#promovideo,
    section#promovideo .container,
    section#promovideo .container-narrow {
        padding-left: 0;
        padding-right: 0;
    }
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}