/* mediaComponent 2 css */
.mediaComponent2
{
    display: block;
}

.mediaComponent2 .row
{
    max-width: 62rem;
}

.mediaComponentContainer
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    float: none;
}

.mediaComponentContainer.smallIcon .mediaCol1,
.mediaComponentContainer.smallIcon .mediaCol2
{
    float: none;
}

/* .mediaComponentContainer.smallIcon .mediaCol1
{
    flex-basis: 20%;
}

.mediaComponentContainer.smallIcon .mediaCol2
{
    flex-basis: 80%;
} */

.mediaComponentContainer.smallIcon .mediaCol1 .image,
.mediaComponentContainer.smallIcon .mediaCol2 .image
{
    display: block;
}

.mediaCol1 img,
.mediaCol2 img
{
    max-width: 100%;
    height: auto;
}

.mediaComponentContainer.smallIcon .mediaCol1 img
{
    width: 37px;
    height: 37px;
    align-self: center;
    margin: 0.2rem auto 0 auto;
    display: block;
}

.mediaCol1 .paragraphContainer,
.mediaCol2 .paragraphContainer
{
    padding: 0;
}

.mediaComponent2 .videoContainer .iframeClass {
    width: 100%;
    height: auto;
}

.mediaReverse
{
    flex-direction: row-reverse;
}

.mediaReverse .mediaCol2
{
    padding-left: 0;
}


/* mediaComponent css */

.mediaComponent
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/** media component utilities **/

/* SMALL SCREEN */
@media screen and (max-width: 39.9375em)
{
    /*** media component 2 ***/
    .mediaComponentContainer
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .mediaComponentContainer.smallIcon
    {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    /* .mediaCol1 img
    {
        margin-bottom: 1.5rem;
    } */


    /*** media component 1 ***/
    .mediaComponent {
        margin-bottom: 1.4rem;
        align-items: flex-start;
    }

    .mediaComponent .mediaComponent50
    {
        flex-basis: 100%;
        margin: 0 auto;
    }

    .mediaComponentStacked
    {
        flex-direction: column;
    }

    .mediaComponentStacked .mediaComponent-img
    {
        margin-bottom: 2rem;
    }

}

/* LARGE SCREEN */
@media screen and (max-width: 63.9375em)
{
    .mediaComponentGrid .row
    {
        max-width: 65.5rem;
    }

}

/* LARGE SCREEN */
@media screen and (min-width: 64em)
{
    .mediaComponentGrid .row
    {
        max-width: 65.5rem;
    }

}