.margin_top_small { margin-top: 40px; }
.margin_top_med { margin-top: 80px; }
.margin_top_large { margin-top: 120px; }
.margin_bottom_small { margin-bottom: 40px; }
.margin_bottom_med { margin-bottom: 80px; }
.margin_bottom_large { margin-bottom: 120px; }

.padding_top_small { padding-top: 40px; }
.padding_top_med { padding-top: 80px; }
.padding_top_large { padding-top: 120px; }
.padding_bottom_small { padding-bottom: 40px; }
.padding_bottom_med { padding-bottom: 80px; }
.padding_bottom_large { padding-bottom: 120px; }

.flex-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.color-light { color: white; }

.fixed-height .section-wrap {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.fixed-height .stuff {
    margin: auto;
}








.full_width_content {
}
.full_width_content .stuff {
    max-width: 788px;
    margin-left: auto;
    margin-right: auto;
}
.full_width_content {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
/*    min-height: 400px;*/
    box-sizing: border-box;
}
/* adding .headline for any that is inside of a content/wysiwyg field. */
.full_width_content .text-wrap h2, 
.full_width_content .content-wrap h2, 
.full_width_content h2.headline {
    /* Desktop/H2 */
/*    font-family: Crimson Text;*/
/*    font-size: 42px;*/
/*    font-style: normal;*/
/*    font-weight: 700;*/
/*    line-height: normal;*/
}
/* any headlines outside of the text-wrap/content-wrap needs to have the .headline class */
.full_width_content h2.headline {
    text-align: center;
}
.full_width_content .text-wrap {
    text-align: center;
}
.full_width_content .text-wrap .gform_wrapper {
    text-align: left;
}
.full_width_content .link-wrap {
    text-align: center;
}
.full_width_content p {
}
.full_width_content .link {
    margin-top: 1em;
}
.full_width_content.tb-pad {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 100px;
    padding-bottom: 100px;
}
.full_width_content.tb-pad .headline,
.full_width_content.tb-pad .text-wrap {
    color: white;
}






/* this also gets a reverse of the columns, no need to double up on the code. */
.two_column {

}
.two_column .col {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.two_column .col-width-small {
    width: 40.8%;
}

.two_column .col-width-medium {
    width: 50%;
}
.two_column .col-width-large {
    width: 59.2%;
}
.two_column img {
    width: 100%;
}
.two_column .link {
    margin-top: 1em;
}


.two_column_text_image .flex-wrap .stuff {
    padding-right: 20px;
}
.two_column_image_text .flex-wrap .stuff {
    padding-left: 20px;
}

.two_column_text_text .flex-wrap .col1 .stuff {
    padding-right: 10px;
}
.two_column_text_text .flex-wrap .col2 .stuff {
    padding-left: 10px;
}






.three_column {
}
.three_column .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    justify-content: space-between;
}

.three_column .col {
    --col-w: calc(33.3% - 10px);
    flex: 1 1 0%;
    width: var(--col-w);
    max-width: var(--col-w);
    min-width: var(--col-w);
}