header {
    position: relative;
    height: 30vh;
    min-height: 213px;
    max-height: 290px;
    width: 100vw;
    text-align: center;
    z-index: 999
}

p {
    line-height: 1em
}

.text {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%)
}

header h1 {
    font-size: 11.4vw;
    margin-bottom: 10px
}

header h2 {
    font-size: 6vw;
    color: #b1b0b7;
    margin-bottom: 10px
}

header #quote {
    font-size: 2.7vw;
    color: #ffffff47;
    margin-bottom: 10px
}

header #quote .credit {
    white-space: nowrap
}

header nav {
    position: static;
    margin: auto
}

.body article.about {
    margin-left: 10%;
    padding-top: 8vh;
    width: auto;
    color: #2221269e;
    font-size: 5vw;
    animation: slide-right 1s
}

.social {
    animation: slide-right 1s;
    animation-delay: .3s
}

@keyframes slide-right {
    from {
        margin-left: -500%
    }
}

.body article.about p {
    margin-bottom: calc(12px + 3.1vh);
    font-size: 1em
}

.body .strong {
    color: #222126ba;
    font-weight: 700
}

.social img {
    width: auto;
    height: 9vw;
    max-height: 46px;
    margin-right: 20px
}

@media (min-width: 725px) {
    header {
        position:absolute;
        height: 100vh;
        width: auto;
        max-height: none;
        left: 0;
        right: 36%
    }

    header .text {
        right: 6%;
        text-align: right;
        width: auto
    }

    header h1 {
        font-size: calc(49px + .5vw)
    }

    header h2 {
        font-size: calc(27px + .5vw)
    }

    header #quote {
        font-size: calc(14px + .3vw)
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    .body {
        position: absolute;
        width: auto;
        height: 100vh;
        left: 64%;
        right: 0
    }

    @keyframes slideIn {
        from {
            margin-left: -1000px
        }
    }

    .body article.about {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        margin-left: 6%;
        font-size: calc(15px + .5vw)
    }

    .body article.about .social img {
        height: 4.2vw;
        opacity: 0;
        animation: fadeIn 1s ease .7s 1 normal forwards running
    }
}

@media (min-width: 1500px) {
    .body article.about p {
        padding-bottom:40px;
        animation: slideIn 1s ease 0s 1 normal forwards running
    }
}