/*---- flex66 ----*/

.flex66 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.flex66 div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex66 div:first-child {
    flex: 1 0 65%;
    margin: 0 1.25rem 0 0;

}

.flex66 div:first-child img {
    margin: 0 auto 1.25rem;
}

.flex66 div:last-child {
    flex: 1 0 32%;
}

.flex66 div:last-child img {
    margin: 0 auto 1.25rem;
}

.flex66 div.text,
.flex50 div.text {
    justify-content: flex-start;
}

/*---- flex50 ----*/

.flex50 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
}

.flex50 div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 49%;
    margin: 0 1.25rem 0 0;
}

.flex50 div:first-child img {
    margin: 0 auto 1.25rem;
}

.flex50 div:last-child {
    margin: 0;
}

.flex50 div:last-child img {
    margin: 0 auto 1.25rem;
}

.flex50 div.col {
    display: block;
}

.flex50 div.col div {
    display: inherit;
    flex: none;
    margin: 0;
}

.flex50 div.col div.accordion {
    margin-bottom: 1px;
}

.flex50 div.col div.next-level {
    display: none;
}

.flex50 div.col div.location-note,
.flex50 div.col div.location-note-top {
    display: flex;
    flex-direction: row;
}

.flex50.border div {
    padding: 30px;
}

.flex50.et-box {
    margin-top: -.9375rem;
}

/*---- flex50 with icon ----*/

.flex50 div.icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    row-gap: 20px;
}

.flex50 div.icon .image {
    flex: 1 0 50%;
}

.flex50.icon {
    column-gap: 40px;
}

.flex50.icon div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    row-gap: 20px;
}

.flex50.icon div img,
.flex50.icon div:last-child img {
    width: 180px;
    height: 180px !important;
    margin: 0 auto;
}

.flex50 div.icon .image img {
    height: 100px !important;
    margin: 0 auto;
}

.flex50 div.icon .text {
    flex: 1 0 50%;
    width: 80%;
    max-width: 350px;
    text-align: center;
    font-family: 'Open Sans' !important;
}

.flex50.icon div {
    margin: 0;
    justify-content: flex-start;
    flex: 1 0 40%;
}

.flex50.icon div h3 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    margin: 0;
}

.flex50.icon div h3 span {
    font-weight: 400;
}

.flex50 div.icon .text h4 {
    font-weight: 300;
}

.flex50.icon div p {
    text-align: center;
    margin: 0;
}

.flex50.icon div p:last-child {
    margin-bottom: 20px;
}

.flex50.icon div:last-child {
    margin-right: 0;
}

/*---- flex33 ----*/

.flex33 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
    background: none;
    padding: 0px;
}

.flex33 div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 30%;
    padding: 0;
    margin: 0px 0.9375rem 0 0;
}

.flex33 div:last-child {
    margin: 0;
}

.flex33 div img {
    padding: 0;
    margin: 0 auto 1.25rem;
}

/*---- flex33 with icon ----*/

.flex33.icon {
    justify-content: center;
}

.flex33.icon div {
    align-items: center;
    text-align: center;
    max-width: 33%;
    margin: 10px 40px 10px 0;
}

.flex33.icon div:last-child {
    margin-right: 0;
    flex-direction: column !important;
}

.flex33.icon div img {
    width: 120px;
    height: 120px !important;
    margin: 0 auto;
}

.flex33.icon div h3,
.flex33.icon div h4 {
    font-family: 'Open Sans', 'open-sans', sans-serif;
    color: #373a36;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 600;
}

.flex33.icon div p {
    font-size: 0.9rem !important;
    text-align: left;
}

.flex33.icon div ul {
    list-style: inherit;
    margin-left: 10px;
    font-size: 0.9rem;
    padding: 0;
    text-align: left;
}

.flex33.icon div ul li:before {
    display: none;
}


/*---- flex33 with icon OLD -  Do not use ----*/

.flex33 .icon {
    flex-direction: row;
}

.flex33 .icon img {
    margin: 0.9375rem 10px 0.9375rem 0;
    height: fit-content !important;
}

.flex33 .icon .text {
    padding: 0;
    flex-direction: column;
}

.flex33 .icon .text h4 {
    margin-bottom: 0;
}

.flex33 .icon .text p {
    font-size: 0.9rem;
}

/*---- flex25 ----*/

.flex25 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
    background: none;
    padding: 0px;
}

.flex25 div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 20%;
    padding: 0;
    margin: 0px 0.9375rem 0 0;
}

.flex25 div:last-child {
    margin: 0;
}

.flex25 div img {
    padding: 0;
    margin: 0 auto 1.25rem;
}

/*---- flex25 with icon ----*/

.flex25.icon {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
    row-gap: 50px;
    max-width: 100%;
    width: 100%;
}

.flex25.icon div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 20px;
    flex: 1 0 20%;
    margin: 0;
    max-width: 300px;
}

.flex25.icon div img {
    padding: 0;
    margin: 0 auto;
    width: 120px;
    height: 120px;
}

.flex25.icon div h3 {
    margin: 0;
    text-align: center;
}

.flex25.icon div p {
    margin: 0;
    text-align: center;
}

.flex25.icon div p:last-child {
    margin-bottom: 20px;
}


/*---- row reverse - all blocks ----*/

.flex66.reverse,
.flex50.reverse {
    flex-direction: row-reverse;
}

.flex66.reverse div:first-child {
    margin: 0;
}

.flex66.reverse div:last-child {
    margin: 0 1.25rem 0 0;
}

.flex50.reverse div {
    margin: 0;
}

.flex50.reverse div:last-child {
    margin: 0 1.25rem 0 0;
}

@media only screen and (max-width: 48em) {

    /*---- row reverse - all blocks ----*/

    .flex66,
    .flex50,
    .flex66.reverse,
    .flex50.reverse {
        flex-direction: column;
    }


    .flex66.reverse div:first-child {
        margin: 0 0 0.9375rem 0;
    }

    .flex66.reverse div:last-child {
        margin: 0;
    }

    .flex50.reverse div,
    .flex50 div:last-child {
        margin: 0;
    }


    /*---- row-reverse - column reverse on tablet and mobile ----*/

    .flex66.reverse.col,
    .flex50.reverse.col {
        flex-direction: column-reverse;
    }

    .flex66.reverse.col div:last-child {
        margin: 0 0 0.9375rem 0;
    }

    .flex66.reverse.col div:first-child {
        margin: 0;
    }

    /*---- normal configuration - column reverse on tablet and mobile ----*/

    .flex66.col-reverse,
    .flex50.col-reverse {
        flex-direction: column-reverse;
    }

    .flex66.col-reverse div:last-child {
        margin: 0 0 0.9375rem 0;
    }

    .flex66.col-reverse div:first-child {
        margin: 0;
    }


    /*---- flex66 ----*/

    .flex66 div:first-child {
        flex: 1 0 100%;
        margin: 0 0 0.9375rem 0;
    }

    .flex66 div:last-child {
        flex: 1 0 100%;
    }


    /*---- flex50 ----*/

    .flex50 div,
    .flex50 div:last-child {
        flex: 1 0 100%;
        margin: 0;
    }

    .flex50 div:last-child img,
    .flex50.reverse div:first-child img {
        margin-top: 1.25rem;
    }

    .flex50.border div:first-child {
        margin-bottom: 0.9375rem;
    }

    /*--- with icon fix---*/

    .flex50.icon {
        flex-direction: column;
        align-items: center;
        row-gap: 50px;
    }

    .flex50.icon div {
        flex: 1;
        max-width: 400px;
        margin: 0;
    }

    /*---- flex33 ----*/

    .flex33 div {
        flex: 1 0 48%;
        margin: 0;
    }

    .flex33 div:first-child {
        margin: 0 0.9375rem 0 0;
    }

    .flex33 div:last-child {
        flex-direction: column;
        max-width: 50%;
        margin: auto;

    }

    .flex33.border div:last-child {
        margin-top: 0.9375rem;
    }

    .flex33 div:last-child div {
        flex-direction: column;
    }

    .flex33 div:last-child div:first-child {
        padding: 0;
        flex-direction: column;
        flex: 1 0 48%;
        margin: 0;
    }

    .flex33.fullwidth-text div {
        flex: 1 0 100%;
        margin: 0;
        padding: 0;
        max-width: 100%;
        flex-direction: column;
    }

    .flex33.fullwidth-text div:nth-child(3) {
        max-width: 100%;
    }


    /*---- flex33 with icon - OLD do not use ----*/

    .flex33 div.icon,
    .flex33 div.icon:nth-child(3) {
        flex-direction: row;
        flex: 1 0 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .flex33 div.icon .text {
        flex: 1;

    }

    /*---- flex25 ----*/

    .flex25 {
        flex-wrap: wrap;
    }

    .flex25 div {
        flex: 1 0 48%;
        margin: 0 0.9375rem 0.9375rem 0;
    }

    .flex25 div:nth-child(2) {
        margin-right: 0;
    }

    .flex25 div:nth-child(3),
    .flex25 div:last-child {
        margin-bottom: 0;
    }

    .flex25 div img {
        padding: 0;
    }

    /*---- flex25 with icon ----*/


    .flex25.icon {
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width: 30em) {

    .flex50.border div {
        padding: 1.25rem;
    }



    /*---- flex33 and flex25 ----*/

    .flex33,
    .flex25 {
        flex-direction: column;
    }

    .flex33 div,
    .flex25 div {
        flex: 1 0 100%;
        margin: 0;
    }

    .flex33 div:first-child,
    .flex25 div:nth-child(3) {
        margin: 0;
    }

    .flex33 div:last-child,
    .flex25 div:last-child {
        flex-direction: column;
        margin: 0;
        max-width: 100%;
    }

    .flex33 div:last-child div:first-child {
        flex: 1 0 100%;
        margin: 0;
    }

    .flex33.border div {
        margin-bottom: 0.9375rem;
    }

    .flex33.border div:last-child {
        margin: 0;
    }

    .flex33 .icon .text p {
        font-size;
        1rem;
    }


    /*---- flex33 with icon ----*/


    .flex33.icon div {
        justify-content: center;
        align-items: center;
        text-align: center;
        max-width: 85%;
        margin: 10px auto;
    }

    .flex33.icon div:last-child {
        margin-right: auto;
    }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ > <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600italic,700italic,300,600,700,800"rel="stylesheet"/ > <link href="/sitecore/shell/themes/standard/default/Default.css"rel="stylesheet"/ > <link href="/sitecore/shell/controls/Lib/Flexie/flex.css"rel="stylesheet"/ >