/* ====== GRID SYSTEM ====== */
.row,
.column {
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

.row {
  display: block;
  clear: both; 
}

.row .column {
  float: left;
  width: 100%;
  padding: 0px 10px; 
}

.row .column:first-child {
  padding-left: 0px; 
}

.row .column:last-child {
  padding-right: 0px; 
}

.row .column.half:nth-of-type(odd) {
  padding-left: 0px; 
}

.row .column.half:nth-of-type(even) {
  padding-right: 0px; 
}

.column .column:first-child {
  padding-left: 0; 
}

.column .column:last-child {
  padding-right: 0; 
}

.column .row:first-child > .column {
  padding-top: 0; 
}

.column .row:last-child > .column {
  padding-bottom: 0; 
}

.column.no-gutter {
  padding-left: 0px;
  padding-right: 0px; 
}

/* Wrapping at a maximum width is optional */
.wrap .row,
.row.wrap {
  max-width: 978px;
  margin: 0 auto; 
}

.row .whole {
  width: 100%; 
}

.row .half {
  width: 50%; 
}

.row .one-third {
  width: 33.3332%; 
}

.row .two-thirds {
  width: 66.6665%; 
}

.row .one-quarter,
.row .one-fourth {
  width: 25%; 
}

.row .three-quarters {
  width: 75%; 
}

.row .one-fifth {
  width: 20%; 
}

.row .two-fifths {
  width: 40%; 
}

.row .three-fifths {
  width: 60%; 
}

.row .four-fifths {
  width: 75%; 
}

.row .sidebar {
  width: 32%;
  padding-left: 110px; 
}

.row .content-main {
  width: 68%; 
}

.row {
  *zoom: 1; 
}

.row:before, .row:after {
  display: table;
  content: "";
  line-height: 0; 
}

.row:after {
  clear: both; 
}

/* Utility classes */
.align-center {
  text-align: center; 
}

.align-left {
  text-align: left; 
}

.align-right {
  text-align: right; 
}

.pull-left {
  float: left; 
}

.pull-right {
  float: right; 
}

.column img {
  max-width: 100%; 
}

.only-on-mobiles {
  display: none !important; 
}

@media screen and (max-width: 767px) {
  .row:not(.no-stacking-on-mobiles) > .column {
    width: 100% !important; 
  }
  .column .row .column {
    padding-left: 0px;
    padding-right: 0px; 
  }
  .center-on-mobiles {
    text-align: center !important; 
  }
  .hide-on-mobiles {
    display: none !important; 
  }
  .only-on-mobiles {
    display: block !important; 
  } 
}

@media screen and (min-width: 1180px) {
  .wider .row,
  .row.wider {
    max-width: 1180px;
    margin: 0 auto; 
  } 
}

@media screen and (max-width: 767px) {
  .row .four-fifths {
    margin-left: 0% !important; 
  } 
}
