/* container main box*/
.boxed {
  height: auto;
  width:100%;
  border-top: 1px solid;
  border-top-color: #ffffff;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .boxed {
    flex: 50%;
  }
}

/* second main box */
.boxes {
    display: table;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    width: 96%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .boxes {
    flex: 50%;
  }
}

/* Create four equal columns */
.box-trs {
  flex: 20%;
  height: 180px;
  width: 100%;
  float: left;
  padding: auto;
  margin-top: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .box-trs {
    flex: 50%;
  }
}

/* Create four equal columns */
.box-trans {
  flex: 10%;
  height: auto;
  float: left;
  padding: auto;
  margin-top: -5px;
  margin-left: 10px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .box-trans {
    flex: 50%;
  }
}





.first-column {
float: left;
width: 60%;
text-align: center;
}

@media screen and (max-width: 600px) {
  .first-column {
    width: 100%;
  }
}

.second-column {
float: left;
width: 38%;
text-align: center;
}

@media screen and (max-width: 600px) {
  .second-column {
    width: 100%;
  }
}

/* The floats after the columns are cleared */
.row:after {
content: “”;
display: table;
clear: both;
height: auto;
width: 100%;
}