.flex {
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.flex.flex-2, .flex.flex-3 {
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}

.flex.flex-2.center, .flex.flex-3.center {
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}


.flex.flex-2 .col {
  width: 48%;
}

.flex.flex-2 .col.col1 {
  width: 48%;
}

.flex.flex-2 .col.col2 {
  width: 48%;
  padding: 3em;
}

@media screen and (max-width: 736px) {

  .flex.flex-2 .col.col1, .flex.flex-2 .col.col2 {
    width: 100%;
    margin-bottom: 2em;
    padding: 0em;
  }

  .flex.flex-2 .col.col1 .image, .flex.flex-2 .col.col2 .image {
    max-width: 100%;
    margin: 0 auto 2em auto;
  }

}

.flex.flex-3 .col {
  width: 80%;
  margin: auto;
  text-align: left;
}

@media screen and (max-width: 736px) {

  .flex.flex-3 .col {
    width: 100%;
    margin-bottom: 2em;
  }

  .flex.flex-3 .col .image {
    max-width: 70%;
    margin: 0 auto 2em auto;
  }

}

.flex.flex-4 .col {
  width: 45%;
}

.flex.flex-4 .col.col1 {
  width: 18%;
}

.flex.flex-4 .col.col2 {
  width: 74%;
}

@media screen and (max-width: 736px) {

  .flex.flex-4 .col.col1, .flex.flex-4 .col.col2 {
    width: 100%;
    margin-bottom: 2em;
  }

  .flex.flex-4 .col.col1 .image, .flex.flex-4 .col.col2 .image {
    max-width: 40%;
    margin: 0 auto 2em auto;
  }

}

.flex.flex-tabs {
  -moz-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.flex.flex-tabs ul {
  width: 20%;
}

.flex.flex-tabs .tabs {
  width: 77%;
}

@media screen and (max-width: 980px) {

  .flex.flex-4 .col {
    width: 48%;
  }

  .flex.flex-tabs ul {
    width: 30%;
  }

  .flex.flex-tabs .tabs {
    width: 67%;
  }

  .flex.flex-tabs .flex-3 .col {
    width: 48%;
  }

}

@media screen and (max-width: 736px) {

  .flex.flex-2 .col, .flex.flex-3 .col, .flex.flex-4 .col {
    width: 100%;
    -moz-order: 2;
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
  }

  .flex.flex-2 .col.first, .flex.flex-3 .col.first, .flex.flex-4 .col.first {
    -moz-order: 1;
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
  }

  .flex.flex-tabs {
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flex.flex-tabs ul {
    width: 100%;
  }

  .flex.flex-tabs .tabs {
    width: 100%;
  }

  .flex.flex-tabs .flex-3 .col {
    width: 100%;
  }

}