body{
    margin: 0;
    padding: 0;
}

#triage-tool {
    font-family: Arial, sans-serif;
    background-color: #fff;
    text-align: left;
    /*max-width: 400px;*/
    width: 100%;
    height: 100%;
    /*overflow-y: scroll;
    overflow-x: hidden;*/
}

#triage-tool #triage-header {
    background-color: #075384;
    color: #fff;
    padding: 10px;
    text-align: center;
}

#triage-tool #triage-header h3 {
    margin-top: 10px;
    color: #fff;
    text-align: center;
}

#triage-tool .bx-wrapper .bx-viewport {
    height: 100% !important;
}

#triage-tool .bx-wrapper .bx-viewport ul {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    width: 100%;
}

#triage-tool .bx-wrapper .bx-viewport ul li {
    background-color: #fff;
    color: #333742;
    padding: 0;
    margin: 0;
}

#triage-tool .bx-wrapper .bx-viewport ul li .triage-range-wrapper {
    display: inline-block;
    width: 256px;
}

#triage-tool .bx-wrapper .bx-viewport ul li .triage-range-wrapper input {
    padding: 0 !important;
    height: auto !important;
    border: none !important;
}

#triage-tool .bx-wrapper .bx-viewport ul li label {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 5px;
}

#triage-tool .bx-wrapper .bx-viewport ul li label:first-child {
    margin-top: 10px;
}

#triage-tool .bx-wrapper .bx-viewport ul li .mr {
    margin-right: 10px !important;
}

#triage-tool .bx-wrapper .bx-viewport ul li .ml {
    margin-left: 10px !important;
}

#triage-tool .bx-wrapper .bx-viewport ul li .sod_list_wrapper {
    height: 150px;
}

#triage-tool .bx-wrapper .bx-viewport ul li .btn--primary {
    margin-top: 40px;
}

#triage-tool .bx-wrapper .bx-viewport ul li #age {
    width: 60px;
}

#triage-tool .triage-back-btn {
    color: #fff;
    text-decoration: none;
    margin-bottom: 9px;
}

#triage-tool .triage-back-btn.top {
    margin-top: 12px !important;
}

#triage-tool .triage-back-btn.bottom {
    margin-top: 20px !important;
}

#triage-tool .signpost {
    display: block;
}

#triage-tool .signpost li {
    padding-left: 5px !important;
}

#triage-tool .signpost .signpost-bullet {
    width: auto;
    height: 25px;
    float: left;
    margin-right: 10px;
}

#triage-tool .signpost p {
    overflow: hidden;
}

#triage-tool .crisis {
    background-color: #ffe4c4;
    padding: 10px 15px;
    text-align: center;
    font-weight: 600;
    margin-top: 30px;
}

#triage-tool .validation {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 12px;
}

.triage-open #triage-tool {
    bottom: 0;
}

.triage-open #triage-overlay {
    display: block;
}

.triage-results {
    width: 100%;
}

.triage-results .collapsible {
    margin-bottom: 20px;
    background-color: #fff;
}

.triage-results .collapsible .collapsible-header {
    margin: 0 !important;
    background-color: #febe10;
}

.triage-results .collapsible .collapsible-content {
    padding-top: 20px;
    padding-bottom: 0;
    display: none;
    background-color: #f5f6f9 !important;
    line-height: 19.2px;
}

.triage-results .collapsible .collapsible-content li {
    width: 100%;
    background-color: transparent !important;
}

.triage-results .collapsible .collapsible-content .media__body p {
    margin-bottom: 0;
}

.triage-results .collapsible .collapsible-content .media__body .chat-calendar {
    background: url("../images/icons/calendar-blue.svg");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    float: left;
    margin-top: 5px;
}

.triage-results .collapsible .collapsible-content .media__body .chat-calendar .chat-date {
    padding-left: 20px;
    float: left;
}

.triage-results .collapsible .collapsible-content .apps {
    margin-bottom: 20px !important;
}

.triage-results .collapsible .collapsible-content .app-link {
    padding-bottom: 0;
}

.triage-results .collapsible .collapsible-content .icon-store {
    margin-top: 5px;
    display: inline;
    width: 100px;
    height: auto;
}

.triage-results .collapsible h3 {
    color: #000 !important;
    padding: 10px 15px;
    font-size: 16px !important;
    font-weight: normal;
    margin-bottom: 0;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    background: url(../images/faq-arrows-blue-invert-long.png) no-repeat 96% -117px;
}

.triage-results .collapsible h3:hover {
    cursor: pointer;
}

.triage-results .collapsible h3 img {
    height: 30px;
    width: auto;
    margin-right: 10px;
}

.triage-results .collapsible h3 .va-bottom {
    vertical-align: bottom;
}

.triage-results .collapsible .collapsible-header {
    margin-right: 2px;
}

.triage-results .collapsible .open h3 {
    background: url(../images/faq-arrows-blue-invert-long.png) no-repeat 96% 19px;
}

.triage-results .collapsible a {
    text-decoration: none;
}

.triage-results .advisor-item {
    margin-bottom: 20px !important;
}

.triage-results .advisor-item .advisor-action .advisor-button {
    color: #fff;
    margin-top: 10px !important;
}

/*@media screen and (max-width: 480px) {
    .triage-results .advisor-item .media__img {
        float: none;
        margin-bottom: 20px;
    }
}*/
.triage-results .advisor-item h5 {
    color: #333742 !important;
}

li {
    list-style: none;
    display: inline-block !important;
}

.media__body h5 {
    margin: 0;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 17.5px;

}

.media__body p {
    margin: 0;
    font-size: 12px;
}

.chat-date {
    font-size: 12px;
}

.app-link {
    display: inline !important;
}

.fade-in {
    width: auto !important;
    animation: fadein 1s;
    -moz-animation: fadein 1s;
    /* Firefox */
    -webkit-animation: fadein 1s;
    /* Safari and Chrome */
    -o-animation: fadein 1s;
    /* Opera */
}

.apps.fade-in {
    width: 100% !important;
}

.localLafSearchBox p {
    font-size: 12px;
    margin-bottom: 20px;
    margin-top: 0;
}

.localLafSearchBox .btn--primary {
    margin-top: 10px !important;
    margin-bottom: 20px;
}

.ta-center {
    text-align: center;
}

.localLafAppBox img {
    vertical-align: middle;
}

.crisis {
    font-size: 12px;
}

.collapsible-header h3 {
    line-height: 1.6;
}

.branding {
    padding: 20px 0;
    text-align: right;
}

.branding.top {
    padding: 10px 0;
}

.branding img {
    width: 200px;
    height: auto;
    vertical-align: middle;
}

.smiley {
    vertical-align: middle;
}

@media screen and (max-width: 415px) {
    #triage-tool .bx-wrapper .bx-viewport ul li .smiley {
        width: 24px;
    }
}

@media screen and (max-width: 415px) {
    #triage-tool .bx-wrapper .bx-viewport ul li .triage-range-wrapper {
        width: 172px;
    }
}

#submit-search {
    cursor: pointer;
}

#submit-search, .triage-back-btn {
    border: none !important;
}

.triage-results li {
    display: block !important;
}

#triage-tool .bx-wrapper .bx-viewport ul.pbi {
    padding-bottom: 1px !important;
}

.clear-both {
    clear: both;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
[type=range] {
    -webkit-appearance: none;
    margin: 15px 0;
    width: 100%;
}
[type=range]:focus {
    outline: none;
}
[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
    background: #e6e6e6;
    border: 0 solid #000;
    border-radius: 0;
}
[type=range]::-webkit-slider-thumb {
    box-shadow: 0 0 0 #111, 0 0 0 #1e1e1e;
    border: 1px solid #fff;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #ee2346;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -10.5px;
}
[type=range]:focus::-webkit-slider-runnable-track {
    background: #f3f3f3;
}
[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
    background: #e6e6e6;
    border: 0 solid #000;
    border-radius: 0;
}
[type=range]::-moz-range-thumb {
    box-shadow: none;
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #ee2346;
    cursor: pointer;
}
[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    transition: all .2s ease;
    background: transparent;
    border-color: transparent;
    border-width: 10px 0;
    color: transparent;
}
[type=range]::-ms-fill-lower {
    box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
    background: #d9d9d9;
    border: 0 solid #000;
    border-radius: 0;
}
[type=range]::-ms-fill-upper {
    box-shadow: 0 0 0 #222, 0 0 0 #2f2f2f;
    background: #e6e6e6;
    border: 0 solid #000;
    border-radius: 0;
}
[type=range]::-ms-thumb {
    box-shadow: 0 0 0 #111, 0 0 0 #1e1e1e;
    border: 1px solid #fff;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #ee2346;
    cursor: pointer;
}
[type=range]:focus::-ms-fill-lower {
    background: #e6e6e6;
}
[type=range]:focus::-ms-fill-upper {
    background: #f3f3f3;
}
label {
    display: block;
}



/*------------------------------------*\
    #INPUTS
\*------------------------------------*/
label {
    display: block;
}

/**
 * Base input styles.
 */
.input {
    -webkit-appearance: none;
    /* removing inner shadow on iOS inputs */
    -webkit-font-smoothing: inherit;
    -webkit-border-radius: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #b7bdce;
    color: #333742;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 0 12px;
    /* remove browser defaults */
    vertical-align: middle;
    width: 100%;
    height: 36px;
    /**
     * @hover
     */
    /**
     * @focus
     */
    /**
     * Error state.
     */
}
.input:invalid {
    box-shadow: none;
    /* fixes mozilla red outline (shadow) */
}
.input[readonly] {
    cursor: text;
}
.input::-ms-clear {
    display: none;
    /* remove IE clear icon */
}
.input:hover {
    border-color: #333742;
}
.input:focus {
    border-color: #075384;
    color: #075384;
}
.input:focus::-webkit-input-placeholder {
    color: #075384;
}
.input:focus:-moz-placeholder {
    /* Firefox 18- */
    color: #075384;
}
.input:focus::-moz-placeholder {
    /* Firefox 19+ */
    color: #075384;
}
.input:focus:-ms-input-placeholder {
    color: #075384;
}
.is-error .input, .input.is-error {
    border-color: #ff8688;
}
.input::-webkit-input-placeholder {
    color: #333742;
}
.input:-moz-placeholder {
    /* Firefox 18- */
    color: #333742;
}
.input::-moz-placeholder {
    /* Firefox 19+ */
    color: #333742;
}
.input:-ms-input-placeholder {
    color: #333742;
}

/**
 * Error input.
 */
.input--error {
    position: relative;
}
.input--error .input {
    border-color: #ff0000;
    position: relative;
    z-index: 1;
}
.input--error:before {
    content: attr(data-error);
    z-index: 2;
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    color: #ff0000;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 0 12px;
    vertical-align: middle;
    line-height: 34px;
    background-color: white;
}


/*------------------------------------*\
    #PRIMARY BUTTON
\*------------------------------------*/
/**
 * Primary button.
 */
.btn--primary {
    -webkit-appearance: none;
    -webkit-font-smoothing: inherit;
    transition: all .2s ease;
    background-color: #075384;
    border-radius: 0;
    color: #fff;
    font-weight: 700;
    height: 43px;
    line-height: 45px;
    width: auto;
    padding: 0 40px;
    text-align: center;
    font-size: 17px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #075384;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /**
     * @hover
     */
    /**
     * @active
     */
    /**
     * @disabled
     */
}
.btn--primary:not(:disabled):hover, .btn--primary:not(:disabled):focus {
    text-decoration: none;
    background-color: #333742;
    border-color: #333742;
    color: white;
}
.btn--primary:not(:disabled):active {
    border-color: #075384;
    background-color: transparent;
    color: #075384;
}
.btn--primary:disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    cursor: default !important;
}
.campaigns__item.is-hovered .btn--primary, .campaign-boxes__item.is-hovered .btn--primary {
    background-color: white;
    color: #075384;
}
@media screen and (max-width: 480px) {
    .btn--primary {
        padding: 0 10px;
    }
}

.btn--transparent {
    background-color: transparent;
    color: #075384;
    /**
     * @active
     */
}
.btn--transparent:not(:disabled):active {
    border-color: #075384;
    color: white;
    background-color: #075384;
}

.btn--white {
    background-color: white;
    color: #075384;
    border-color: white;
    line-height: 43px;
    /**
     * @active
     */
}
.btn--white:not(:disabled):active {
    border-color: #075384;
    color: white;
    background-color: #075384;
}

.btn--medium {
    padding-left: 30px;
    padding-right: 30px;
}

.btn--normal {
    height: 36px;
    line-height: 38px;
    font-size: 15px;
}

.btn--load-more {
    width: 176px;
    text-align: center;
    padding: 0;
    text-transform: none;
}

.btn--small {
    padding-left: 20px;
    padding-right: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-transform: none;
}

.btn--tiny {
    width: 70px;
    padding-left: 0;
    padding-right: 0;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.btn--login-form {
    height: 36px;
    line-height: 38px;
    border: none;
    background-color: #075384;
    font-family: Arial, sans-serif;
    color: white;
    font-size: 15px;
    width: 100%;
}

.btn--login-button {
    height: 36px;
    line-height: 36px;
    border: none;
    background-color: #333742;
    font-family: Arial, sans-serif;
    text-align: left;
    text-transform: none;
    width: 146px;
    padding: 0;
    font-size: 0;
}
.btn--login-button span {
    vertical-align: middle;
    display: inline-block;
}
.btn--login-button .icon-wrap {
    position: relative;
    height: 100%;
    width: 36px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.btn--login-button .icon {
    position: absolute;
    left: 50%;
    top: 47%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn--login-button .btn__text {
    font-size: 12px;
    width: calc(100% - 36px);
    text-align: center;
}
.btn--login-button:hover {
    background-color: #075384 !important;
    color: white !important;
}

.btn--facebook:active {
    background-color: #48659f !important;
}

.btn--twitter:active {
    background-color: #4099ff !important;
}

.btn--full {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.btn--large {
    width: 290px !important;
}

.btn--most-recent {
    background-color: transparent;
    color: #075384;
    padding: 0;
    border: none;
    text-transform: none;
    font-size: 12px;
    height: 30px;
    line-height: 32px;
}
.btn--most-recent:hover, .btn--most-recent:focus {
    color: #333742 !important;
    background-color: transparent !important;
}
.btn--most-recent:active {
    color: white !important;
    background-color: #075384 !important;
    padding: 0 25px;
}


/* Adds Firefox < 35 support */
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
    /* Warning: this kills the focus outline style */
    .custom-select {
        overflow: hidden;
    }

    .custom-select::after {
        display: block;
    }

    /* Make the native select extra wide so the arrow is clipped. 1.5em seems to be enough to safely clip it */
    .custom-select select {
        overflow: -moz-hidden-unscrollable;
        border-radius: 0;
        padding-right: .4em;
        background: none;
        /* Match-04 */
        border: 1px solid transparent;
        /* Match-05 */
        /* Firefox < 4 */
        min-width: 6em;
        width: 130%;
        /* Firefox 4-15 */
        min-width: -moz-calc(0em);
        width: -moz-calc(100% + 2.4em);
        /* Firefox 16+ */
        min-width: calc(0em);
        width: calc(100% + 2.4em);
    }

    /* Firefox 35+ that supports hiding the native select can have a proper 100% width, no need for the overflow clip trick */
    @supports (mask-type: alpha) {
        .custom-select {
            overflow: visible;
        }

        .custom-select select {
            -moz-appearance: none;
            width: 100%;
            padding-right: 2em;
            /* Match-01 padding-right */
        }
    }
}
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance. Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .custom-select select::-ms-expand {
        display: none;
    }

    .custom-select select:focus {
        border-color: #aaa;
        /* Match-03 */
    }

    .custom-select select:focus::-ms-value {
        background: transparent;
        color: #222;
        /* Match-02*/
    }

    .custom-select select {
        padding-right: 2em;
        /* Match-01 */
        background: none;
        /* Match-04 */
        border: 1px solid transparent;
        /* Match-05 */
    }

    .custom-select::after {
        display: block;
    }
}
/* Container used for styling the custom select, the buttom class below adds the
 * bg gradient, corners, etc. */
.custom-select {
    position: relative;
    display: block;
}

/* This is the native select, we're making everything but the text invisible so
 * we can see the button styles in the wrapper */
.custom-select select {
    width: 100%;
    margin: 0;
    outline: none;
    padding: .6em .8em .5em .8em;
    /* Prefixed box-sizing rules necessary for older browsers */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* Font size must be 16px to prevent iOS page zoom on focus */
    font-size: 16px;
}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font,
 * etc. or the arrow could just baked into the bg image on the select. */
.custom-select::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 1em;
    z-index: 2;
    /* These hacks make the select behind the arrow clickable in some browsers */
    pointer-events: none;
    display: none;
}

@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
    /* Show custom arrow */
    .custom-select::after {
        display: block;
    }

    /* Remove select styling */
    .custom-select select {
        padding-right: 2em;
        /* Match-01 */
        /* inside @supports so that iOS <= 8 display the native arrow */
        background: none;
        /* Match-04 */
        /* inside @supports so that Android <= 4.3 display the native arrow */
        border: 1px solid transparent;
        /* Match-05 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .custom-select select:focus {
        border-color: #aaa;
        /* Match-03 */
    }
}
.custom-select select {
    background: white;
    border: 1px solid #b7bdce;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #333742;
    font-family: Arial, sans-serif;
    font-size: 14px;
    vertical-align: middle;
    height: 36px;
    padding: 0 12px 0 19px;
}
.custom-select option {
    padding: 4px;
}
.custom-select:after {
    content: "\25BC";
    top: 30%;
    color: #b7bdce;
}
.custom-select.form-element:after {
    top: 7px;
}
.custom-select.mb:after {
    top: 7px;
}
.custom-select.laf-select {
    width: 245px;
    float: right;
    margin-bottom: 7px;
}
.custom-select.laf-select:after {
    top: 22%;
}
.custom-select.laf-local {
    width: 100%;
}

.validation .wpcf7-validation-errors, .validation .wpcf7-spam-blocked {
    background: #ff0000;
    border: none;
    color: #ffffff;
    margin: 0 0 1em 0;
    padding: 5px;
    width: 100%;
}

.validation .wpcf7-validation-errors:before, .validation .wpcf7-spam-blocked:before {
    background: #ffffff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    color: #ff0000;
    content: '!';
    margin-right: 5px;
    padding: 2px 7px;
}

span.wpcf7-not-valid-tip {
    color: #f00;
    font-size: 12px !important;
    font-weight: normal;
    display: block;

}

/*------------------------------------*\
    #SIDE TABS
\*------------------------------------*/
.side-tabs__element {
    color: #333742;
    display: inline-block;
    padding-bottom: 20px;
}
.side-tabs__element .media__img {
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
}
.side-tabs__element img {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
}
.side-tabs__element h5 {
    color: #414042;
}
.side-tabs__element:hover {
    text-decoration: none;
}

/*------------------------------------*\
    #MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */
.media {
    display: block;
}

.media__img {
    float: left;
    margin-right: 20px;
}
.media__img > img {
    display: block;
}

.media__body {
    overflow: hidden;
    display: block;
}
.media__body,
.media__body > :last-child {
    margin-bottom: 0;
}