.left .visual {
  position: relative;
  order: 2;
  -webkit-order: 2;
  -ms-flex-order: 2;
  margin-right: 0;
}
.left .text {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  margin-left: 0;
}

.right .visual {
  position: relative;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  margin-left: 0;
}
.right .text {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

.singlerow div {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  -webkit-flex: 0 1 100%;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.singlerow p {
  margin: 1.5rem auto;
  text-align: center;
}
.singlerow p.semibold {
  margin-top: -1rem;
  color: var(--main-dark);
  opacity: 1;
}
.singlerow h2 {
  text-align: center;
  display: block;
  width: 100%;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.singlerow .bold {
  width: 90%;
}

.visual {
  -webkit-flex: 0 1 50%;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  display: block;
}
.visual.morethan {
  -webkit-flex: 0 1 53%;
  -ms-flex: 0 1 53%;
  flex: 0 1 53%;
  padding: 1rem;
}

.text {
  -webkit-flex: 0 1 45%;
  -ms-flex: 0 1 45%;
  flex: 0 1 45%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  text-align: left;
}
.text.morethant {
  -webkit-flex: 0 1 40%;
  -ms-flex: 0 1 40%;
  flex: 0 1 40%;
  margin-right: 0;
}

.sellmoreimg {
  width: 100%;
  height: auto;
  max-width: 550px;
}

.bg-footer {
  color: #181C25;
  font-size: 0.9em;
  background: var(--white);
  margin-bottom: 0px;
  line-height: 1.5em;
  padding-top: 3rem;
}

@media screen and (max-width: 768px) {
  h2, .text p {
    text-align: center;
  }

  .maincontainer {
    overflow-x: hidden;
  }

  .singlerow .bold {
    width: 90%;
  }
  .singlerow div {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }

  .left .visual, .right .visual {
    order: 1;
    -webkit-order: 1;
    -ms-flex-order: 1;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    display: block;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
  }

  .left .visual, .right .visual, .right .text, .left .text, .visual {
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    display: block;
    text-align: left;
  }

  .right .text, .left .text {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .text {
    -webkit-flex: 0 1 45%;
    -ms-flex: 0 1 45%;
    flex: 0 1 45%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    text-align: left;
  }
  .text.morethant {
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }

  .visual {
    -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    display: block;
    order: 1;
  }
  .visual.morethan {
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    padding-bottom: 4rem;
  }
  .visual.morethan .boxes {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .visual.morethan .infobox1 {
    grid-area: 1/1/2/2;
  }
  .visual.morethan .infobox2 {
    grid-area: 2/1/3/2;
  }
  .visual.morethan .infobox3 {
    grid-area: 3/1/4/2;
  }
  .visual.morethan .infobox4 {
    grid-area: 4/1/5/2;
  }
  .visual.morethan .infobox5 {
    grid-area: 5/1/6/2;
  }
  .visual.morethan .infobox6 {
    grid-area: 6/1/7/2;
  }
  .visual.morethan .infobox7 {
    grid-area: 7/1/8/2;
  }
  .visual.morethan .infobox8 {
    grid-area: 8/1/9/2;
  }

  .hero {
    background-size: contain;
  }
  .hero img {
    width: 90%;
    margin: 0 auto;
  }

  .singlerow-icons {
    margin: 0 auto;
  }

  .bg-footer .container.padding90 {
    padding: 0;
  }
}