/* #ACFE Bootstrap grid
================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-1 {
  flex: 0 0 calc(8.333333% - 30px);
  max-width: calc(8.333333% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-2 {
  flex: 0 0 calc(16.666667% - 30px);
  max-width: calc(16.666667% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-3 {
  flex: 0 0 calc(25% - 30px);
  max-width: calc(25% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-4 {
  flex: 0 0 calc(33.333333% - 30px);
  max-width: calc(33.333333% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-5 {
  flex: 0 0 calc(41.666667% - 30px);
  max-width: calc(41.666667% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-6 {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-7 {
  flex: 0 0 calc(58.333333% - 30px);
  max-width: calc(58.333333% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-8 {
  flex: 0 0 calc(66.666667% - 30px);
  max-width: calc(66.666667% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-9 {
  flex: 0 0 calc(75% - 30px);
  max-width: calc(75% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-10 {
  flex: 0 0 calc(83.333333% - 30px);
  max-width: calc(83.333333% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-11 {
  flex: 0 0 calc(91.666667% - 30px);
  max-width: calc(91.666667% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

.col-12 {
  flex: 0 0 calc(100% - 30px);
  max-width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  
 margin-top: 15px;
  margin-bottom: 15px;
}

/* #Responsive Grid via Media Queries
================================================== */

/* iPad landscape and smaller devices */
@media only screen and (max-width: 1024px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: calc(100% - 20px); /* Pas breedte aan voor 100% breedte minus marge */
    max-width: calc(100% - 20px);  /* Zorgt ervoor dat de max-breedte ook wordt aangepast */
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* iPad portrait (768px to 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Mobile devices (<768px) */
@media only screen and (max-width: 767px) {
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Smaller mobile devices (<480px) */
@media only screen and (max-width: 479px) {
  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}