#body                           { margin-bottom: 60px; }
.valuesBox                      { display: table;width: 100%;margin-bottom:55px; }
.valuesBoxtextWrapper           { direction:ltr; display: table-cell;vertical-align: middle;width: 45%;padding: 8%;background: #2DCCD2;position:relative; }
.valuesBoxtextWrapper:before    { content: "";width: 13px;height: 100%;background: #012D5C;position: absolute;left: 0;top: 0; }
.valuesBoxImg                   { vertical-align: middle;width: 55%;height: 100%;display: table-cell;background-size: cover;background-repeat: no-repeat;background-position:center center; }
.valuesBoxtext                  { display: table-cell; vertical-align: middle; }

.valuesBoxtext h2               { font-family: Inter-Black;font-size: 260%;text-transform: uppercase; }
.valuesBoxtext p                { font-size: 120%; }


.valuesBox:nth-child(odd)      { direction: ltr; }
.valuesBox:nth-child(even)      { direction: rtl; }
.valuesBox:nth-child(odd) .valuesBoxtextWrapper { background: #012D5C;color: #ffffff;direction: ltr; }
.valuesBox:nth-child(odd) .valuesBoxtextWrapper:before { background: #2DCCD3;right: 0;left: auto; }


@media(max-width:991px){

    .valuesBox { margin-bottom: 25px; }
}
@media(max-width:767px){
    #body    { margin-bottom: 30px; }
    .valuesBox:nth-child(even) { direction: ltr; }
    .valuesBoxImg { display: inline-block; width: 100%; padding-bottom: 60%; }
    .valuesBoxtextWrapper { display: inline-block;width: 100%; }
    .valuesBoxtextWrapper:before { width: 9px;left: 0;right: auto;height: 100%; }
    .valuesBox:nth-child(odd) .valuesBoxtextWrapper:before { right: auto;left: 0; }
    .valuesBoxtext h2 { margin-top: 0;font-size: 220%; }
    .valuesBoxtext p { font-size: 100%; }
    .valuesBox { margin-bottom: 25px; }
}