.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: 768px) {
  .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;
}

.flex.flex-3 .col.col1 {
  width: 34%;
}

.flex.flex-3 .col.col2 {
  width: 66%;
}

@media screen and (max-width: 768px) {
  .flex.flex-3 .col {
    width: 100%;
    margin-bottom: 0em;
  }

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

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

  .flex.flex-3 .col.col1 .image,
  .flex.flex-3 .col.col2 .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%;
}

.flex.flex-4 .col .image {
  max-width: 100%;
}

/*TESTING FOR WORKSHOP*/

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

.flex.flex-3 .col-workshop.col1-workshop {
  width: 40%;
}

.flex.flex-3 .col-workshop.col2-workshop {
  width: 60%;
  /* padding-right: 13rem; */
}

@media screen and (max-width: 840px) {
  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 60%; */
    padding-right: 17rem;
  }
}

@media screen and (min-width: 840px) {
  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 60%; */
    padding-right: 12rem;
  }
}

@media screen and (min-width: 950px) {
  .flex.flex-3 .col-workshop.col1-workshop {
    width: 40%;
  }

  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 50%; */
    padding-right: 10rem;
  }
}

@media screen and (min-width: 1000px) {
  .flex.flex-3 .col-workshop.col1-workshop {
    width: 40%;
  }

  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 50%; */
    padding-right: 8rem;
  }
}

@media screen and (min-width: 1030px) {
  .flex.flex-3 .col-workshop.col1-workshop {
    width: 40%;
  }

  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 50%; */
    padding-right: 6rem;
  }
}

@media screen and (min-width: 1060px) {
  .flex.flex-3 .col-workshop.col1-workshop {
    width: 40%;
  }

  .flex.flex-3 .col-workshop.col2-workshop {
    /* width: 50%; */
    padding-right: 4rem;
  }
}
/* .flex.flex-3 .col-workshop {
    width: 100%;
    margin-bottom: 0em;
  }

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

  .flex.flex-3 .col-workshop.col1-workshop,
  .flex.flex-3 .col-workshop.col2-workshop {
    width: 100%;
    padding-right: 10rem;
    margin-bottom: 2em;
  }

  .flex.flex-3 .col-workshop.col1-workshop .image,
  .flex.flex-3 .col-workshop.col2-workshop .image {
    max-width: 70%;
    margin: 0 auto 2em auto;
  } */

/**/

@media screen and (max-width: 768px) {
  .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: 100%;
    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%;
  }

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

@media screen and (max-width: 768px) {
  .flex.flex-2 .col,
  .flex.flex-3 .col,
  .flex.flex-3 .col-workshop,
  .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-3 .col-workshop.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%;
  }

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