* {
    box-sizing: border-box;
}

body {
    font-family: 'Signika', sans-serif;
    line-height: 1.5;
}

.pane {
    padding-left: 10%;
    padding-right: 10%;
}

.pane-first {
    background-color: #82C342;
}

.flex-parent {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.flex-left {
    padding: 2rem 0;
    -webkit-flex-shrink: 10;
    flex-shrink: 10;
}

.flex-right {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.matt-photo {
    width: 100%;
    display: block;
}

.pane-first a {
    color: #C52E48;
}

.pane-first a:hover,
.pane-first a:active,
.pane-first a:focus {
    color: #c36042;
}

.pane-divider {
    background-color: #2B2B2B;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    overflow: hidden;
}

h1 {
    font-weight: bold;
    font-size: 5rem;
    line-height: 5rem;
    color: #FFF;
}

h2 {
    background-color: #739D6C;
    display: inline-block;
    padding: 0.5rem;
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

h3 {
    font-size: 2rem;
    text-shadow: #000 1px 1px;
    color: #eeeeee;
}

h4 {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
    display: inline;
}

h5 {
    font-size: 1rem;
    color: #410F1A;
    margin-bottom: 0.3rem;
}

h6 {
    font-size: 0.8rem;
    color: #c36042;
    margin-bottom: 0.3rem;
}

h6.alt {
    color: #73CEB4;
}

.intro {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.pane-second {
    background-color: #903f50;
    color: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    overflow: hidden;
}

.pane-second a {
    color: #f6d7ce;
}

.pane-second a:active,
.pane-second a:focus,
.pane-second a:hover {
    color: #FADFD7;
}

.pull-left {
    float: left;
    width: 60%;
}

.pull-right {
    float: right;
    width: 30%;
}

.writing-list li {
    margin-bottom: 1rem;
    list-style-type: square;
}

.writing-list img {
    width: 150px;
}

.pane-third {
    background-color: #c36042;
    color: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    overflow: hidden;
}

.pane-third a {
    color: #f6d7ce;
}

.pane-third a:active,
.pane-third a:focus,
.pane-third a:hover {
    color: #FADFD7;
}

/* .media, .bd { */
.bd {
    overflow: hidden;
}

.media .img {
    float: left;
    margin-right: 10px;
}

.media .img img {
    display: block;
}

.speaking-list {
    margin-bottom: 20px;
}

.speaking-list p {
    font-size: 12px;
    color: #E6E6E6;
}

.ampersand {
    display: none;
}

@media screen and (max-width: 1050px) {
    .flex-left {
        -webkit-flex-shrink: 2;
        flex-shrink: 2;
    }

    .pane {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media screen and (max-width: 810px) {
    .flex-parent {
        display: block;
        position: relative;
    }

    .intro,
    .cta {
        margin-right: 30%;
    }

    .flex-right {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30%
    }

    .writing-list img {
        width: 100px;
    }
}

@media screen and (max-width: 550px) {
    h1 {
        font-size: 4rem;
        text-align: center;
    }

    h2 {
        display: block;
        font-size: 1.2rem;
        text-align: center;
    }

    .intro,
    .cta {
        margin-right: 0;
    }

    .flex-right {
        position: static;
        width: auto;
    }

    .pull-left,
    .pull-right {
        width: 100%;
        float: none;
    }

    .writing-list img {
        width: 80px;
    }

    .pane-divider-split {
        display: inline;
    }

    .ampersand {
        display: inline;
        font-size: 2rem;
        color: #6D6464;
        margin-left: 0.2rem
    }

    .speaking-schedule {
        text-transform: lowercase;
    }

    .writing-list li {
        list-style-position: inside;
    }

    .speaking-title {
        display: block;
    }
}

@media screen and (max-width: 440px) {
    h1 {
        font-size: 3rem;
    }

    .media .img {
        float: none;
        margin-right: 0;
        margin-bottom: 0.3rem;
        display: block;
    }

    .media .img img {
        width: 100%;
    }
}

p {
    margin-bottom: 1rem;
}

.past-talks {
    height: 350px;
    overflow-y: scroll;
}

.social li {
    background-image: url(../img/social/social-sprite.png);
    background-repeat: no-repeat;
    height: 32px;
    padding-left: 40px;
    padding-top: 4px;
    margin-bottom: 1rem;
}

.social-github{ background-position: 0 0; }
.social-instagram{ background-position: 0 -33px; }
.social-lastfm{ background-position: 0 -66px; }
.social-stackoverflow{ background-position: 0 -99px; }
.social-twitter{ background-position: 0 -132px; }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vid-header {
    margin-top: 10px;
}