
/* ======================================================= */
/*    12-Column Grid (1140px max. width)
/* ======================================================= */


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*
.row {
    width: 100%;
    max-width: 1140px;
    overflow: hidden;
    display: table;
}

.col25, .col25-4, .col33, .col40, .col50, .col60, .col66, .col75, .col100 {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    align-items: stretch;
}

.col25 { width: 25%; }
.col25-4 { width: 25%; }
.col33 { width: 33.33334%; }
.col40 { width: 40%; }
.col50 { width: 50%; }
.col60 { width: 60%; }
.col66 { width: 66.66667%; }
.col75 { width: 75%; }
.col100 { width: 100%; }

.col_top { vertical-align: top; }
*/

.row {
    width: 100%;
    max-width: 1140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row_stretch { align-items: stretch; }

.row_gap_10 { gap: 10px; }
.row_gap_20 { gap: 20px; }
.row_gap_30 { gap: 30px; }

.col25, .col25-4, .col33, .col40, .col50, .col60, .col66, .col75, .col100 {
    box-sizing: border-box;
}

.col25 { width: 25%; }
.col25-4 { width: 25%; }
.col33 { width: 33.33334%; }
.col40 { width: 40%; }
.col50 { width: 50%; }
.col60 { width: 60%; }
.col66 { width: 66.66667%; }
.col75 { width: 75%; }
.col100 { width: 100%; }

.left_2c { text-align: left; }

.right_2c { text-align: right; }

.order_1 { order: 1; }
.order_2 { order: 2; }


/* ======================================================= */
/*    Responsive
/* ======================================================= */


@media only screen and (max-width: 1200px) {
   .col25-4 {
      width: 50%;
      float: left;
   }
}


@media only screen and (max-width: 960px) {

   .row {
      flex-wrap: wrap;
      width: 100%;
      min-width: 0;
   }

   .col25, .col33, .col40, .col50, .col60, .col66, .col75, .col100 {
      display: block;
      width: 100%;
      float: none;
   }

   .col25-4 {
      width: 50%;
      float: left;
   }

   .left_2c { text-align: center; }
   .right_2c { text-align: center; }

   .order_1 { order: 2; }
   .order_2 { order: 1; }
}

@media only screen and (max-width: 700px) {
   .col25-4 {
      width: auto;
      float: none;
   }
}
