/*elements/wrap*/
.wrap {
    display: block;

    /* Set as position parent */
    position: relative;

    /* Force img, video, svg to scale. */
    height: auto;
    overflow: visible;

    /* Keep it centered horizontally */
    margin-left: auto;
    margin-right: auto;
    padding: 0;

    /* 30px left and right margin */
    width: calc(100% - 1.875rem);

    /* Max 940px */
    max-width: 58.75rem;
}

.wrap > img,
.wrap > svg,
.wrap > video,
.wrap > canvas,
.wrap > object,
.wrap > embed,
.wrap > iframe {
	/* Don't allow media to break out of .wrap bounds. */
	max-width: 100%;
}

.wrap-1068 {
    max-width: 66.75rem;
}

.wrap-940 {
    max-width: 38.75rem;
}

.wrap-780 {
    max-width: 48.75rem;
}

.wrap    + .wrap { margin-top: 0px; }
.text-01 + .wrap { margin-top: 1.5625rem; }
.text-04 + .wrap { margin-top: 1.5625rem; }

@media (min-width: 51.25rem) {
    .wrap {
        /* Make this a 8-in-9 grid */
        width: calc(88.888889% - 1.25rem);
    }

    .wrap-940 {
        max-width: 58.75rem;
    }
}

/*
   Boostrap integration – make .wrap compatible with Bootstrap's .row, so that
   both classes may be added to one div. I am the doctor, HTML is the
   patient. It has divitus. It has caught divitus from Bootstrap. We are going
   to inoculate it against divitus.
*/

.wrap.row {
    /* 30px left and right margin - 10px for Boostrap's grid margin */
    width: calc(100% - 0.625rem);

    /* Max 940px */
    max-width: 60rem;
}

.wrap-1068.row {
    max-width: 68rem;
}

.wrap-940.row {
    max-width: 40rem;
}

.wrap-780.row {
    max-width: 50rem;
}

.text-01 + .wrap.row { margin-top: 0.9375rem; }
.text-04 + .wrap.row { margin-top: 0.9375rem; }

@media (min-width: 51.25rem) {
    .wrap.row {
        /* Make this a 8-in-9 grid */
        width: 88.888889%;
    }

    .wrap-940.row {
        max-width: 60rem;
    }
}