.cols {
  clear: both;
}

.col-5, .col-10, .col-15, .col-20, .col-25, .col-30, .col-33, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60,
  .col-65, .col-66, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .col-grid-x, .col-grid-4, .col-grid-3, .col-grid-2,
  .col-30-65, .col-35-65 
 {
  float: left;
}

.col-5 { width: 5%; }
.col-10 { width: 10%; }
.col-15 { width: 15%; }
.col-20 { width: 20%; }
.col-25 { width: 25%; }
.col-30, .col-30-65 { width: 30%; }
.col-33 { width: 33.333333%; }
.col-35, .col-35-65 { width: 35%; }
.col-40 { width: 40%; }
.col-45 { width: 45%; }
.col-50 { width: 50%; }
.col-55 { width: 55%; }
.col-60 { width: 60%; }
.col-65 { width: 65%; }
.col-66 { width: 66.666667%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-80 { width: 80%; }
.col-85 { width: 85%; }
.col-90 { width: 90%; }
.col-95 { width: 95%; }

.col-grid-4 { width: 25%; }
.col-grid-3 { width: 33%; }
.col-grid-2 { width: 50%; }

.cols:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 1500px) {
  .col-grid-4 {
    width: 33%;
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 1100px) {
  .col-30-65 {
    width: 65%;
  }
  .col-35-65 {
    width: 65%;
  }
}

@media screen and (max-device-width: 767px) {
  .col-grid-4, .col-grid-3 {
    width: 50%;
    margin-bottom: 0px;
  }
  .max-1000 {
    width: 100%;
  }
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
  .col-5, .col-10, .col-15, .col-20, .col-25, .col-30, .col-33, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60,
  .col-65, .col-66, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .col-30-65, .col-35-65 {
    width: 100%;
    margin-bottom: 0px;
  }
  .col-grid-x, .col-grid-4, .col-grid-3, .col-grid-2 {
    width: 100%;
    margin-bottom: 0px;
  }
  
  .auto-3 {
    column-count: 1;
  }
}