#body {
    width: 100%;
    text-align: center;
    background-color: var(--color-background);
    padding-top: 3vw;
}

#media-title {
    font-weight: bold;
    font-size: 6vw;
    margin-bottom: 1vw;
}

/* #team-tutorials {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 5px rgba(0.1, 0.1, 0.1, 0.15);
    margin: 30px 5vw;
    display: flex;
    flex-direction: column;
} */

.media-card {
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29); */

    text-align: left;
    margin-bottom: 3vw;
    position: relative;
}

.media-title {
    color: var(--color-primary-light);
    /* margin-left: 1vw; */
    font-size: 2.2vw;
    margin-bottom: 1vw;
}

.media-video {
    width: 35vw;
    height: 19.6875vw;
    display: block;
}

#team-pictures-title {
    margin-top: 5vw;
    /* font-stretch: ultra-condensed; */
}

#team-pictures {
    width: 80%;
    margin: 0 auto;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

.media-picture {
    width: 35vw;
    height: 23.375vw;
    display: block;

    -webkit-transition-duration: 0.4s;

    -moz-transition-duration: 0.4s;

    -o-transition-duration: 0.4s;

    transition-duration: 0.4s;

    position: relative;
}

.media-picture:hover {
    -webkit-filter: brightness(140%);
    filter: brightness(140%);
}

.media-new-link-icon {
    width: 3vw;
    height: 3vw;
    position: absolute;
    transform: translate(31.5vw, -23vw);
}

@media only screen and (max-width: 800px) {
    .media-video {
        width: 70vw;
        height: 39.375vw;
    }
    .media-picture {
        width: 70vw;
        height: 46.75vw;
    }
    .media-title {
        font-size: 4vw;
    }
    .media-card {
        text-align: center;
    }
    #team-videos,
    #team-pictures {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .media-new-link-icon {
        width: 5vw;
        height: 5vw;
        position: absolute;
        transform: translate(28vw, -45vw);
    }
}

.video-card {
    flex-grow: 1;
}

.video-card-vid {
    min-width: 260px;
    max-width: 300px;
}

.video-card-title {
    color: #444;
    font-size: 3vw;
}

#team-tutorials-title,
#team-videos-title,
#team-pictures-title {
    font-size: 4vw;
    color: var(--color-primary-light);
    margin-bottom: 2vw;
}

#team-videos {
    width: 80%;
    margin: 0 auto;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}