/**
 *
 * Flexbox layout
 *
 */

.ArticlePage .flex-outer .intro {
    background-color: #d7e0e6;
}
.ContactPage .flex-outer .intro {
    background-color: #b9c2c8;
}
.flex-inner .content {
    background-color: #d7e0e6;
    overflow: auto;
}
.flex-inner .related {
    background-color: #ebf0f3;
}
/**
 * Small only
 */
@media screen and (max-width: 767px) {
    .flex-outer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/**
 * Medium only
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .flex-outer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
    }
    .flex-outer .intro {
        flex: 1 25%;
        border-right: 0.25rem solid #ffffff;
    }
    .flex-outer .flex-inner {
        flex: 1 75%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background-color: #ebf0f3;
    }
    .flex-inner .content {
        width: 100%;
    }
    .flex-inner .related {
        width: 100%;
        border-top: 0.25rem solid #ffffff;
    }
}

/**
 * Large only
 */
@media screen and (min-width: 1024px) {
    .flex-outer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
    }
    .flex-outer .intro {
        flex: 1 25%;
        border-right: 0.25rem solid #ffffff;
    }
    .flex-outer .flex-inner {
        flex: 1 75%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        background-color: #ebf0f3;
    }
    .flex-inner .content {
        display: table-cell;
        width: 1 calc(100% - 208px);
    }
    .flex-inner .related {
        display: table-cell;
        flex: 0 0 auto;
        width: 208px;
        max-width: 208px;
        word-wrap: break-word;
        border-left: 0.25rem solid #ffffff;
    }
}