.full-width {
  width: 100%;
}

.centered {
  position: relative;
  margin: auto;
}

.col {
  display: block;
  float: left;
}

.col-100 {
  width: 96%;
  padding: 2%;
}

/**
 * A slightly larger than 70% width column.
 * For use in 75%/25% width column
 */
.col-75 {
  width: 71.42%;
  padding: 2%;
}

/**
 * Right gutter is included inside block contnet for some reason in comp.
 * Normally we would have 22.48% col and 2% gutter right. Instead we have
 * Added that 2% into the width.
 */
.col-25 {
  width: 24.448%;
  padding: 2% 0;
}

/**
 * Vaguely resembling 1/3.
 */
.col-33 {
  width: 29.3%;
  padding: 2%;
}

/**
 * Here is the real cluster.
 */
.col-25-uneven-gutter {
  width: 22.44%; 
  padding: 0 .853%;
}

.col-25-uneven-gutter:first-child {
  padding-left: 2.563%;
}

.col-25-uneven-gutter:last-child {
  padding-right: 2.563%;
}

/**
 * Sticky Footer Stuff
 */
.sticky-footer-content-wrap {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin-bottom: -300px;
  overflow: hidden;
}

.sticky-footer-content-wrap:after {
  content: "";
  display: block;
}

.sticky-footer-content-wrap:after,
.sticky-footer {
  height: 300px;
}

.sticky-footer {
  overflow: hidden;
}

/**
 * Phones
 */
@media only screen
and (max-device-width : 767px),
only screen
and (max-width : 767px) {
 
  .breadcrumb {
    display: none;
  }

  .col,
  .html .node .col {
    float: none;
    width: 100%;
    padding: 0;
  }

  body.html .col-25-uneven-gutter:first-child {
    padding-top: 20px;
  }  

  .col-25-uneven-gutter:first-child,
  .col-25-uneven-gutter:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  .region-footer .col-25-uneven-gutter, 
  .region-footer .col-25-uneven-gutter:first-child,
  .region-footer .col-25-uneven-gutter:last-child {
    padding: 0 15%;
    margin-bottom: 20px;
  }

  .centered {
    width: 96%;
  }

  .sticky-footer-content-wrap {
    margin-bottom: -1000px;
  }
  
  .sticky-footer-content-wrap:after,
  .sticky-footer {
    height: 1000px;
  }

  body.html .region-footer .col {
    height: auto;
  }

  .divider {
    display: none;
  }

}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 800px),
only screen
and (min-width : 768px)
and (max-width : 800px) {
  .not-front .col-25,
  .not-front .col-75 {
    float: none;
    width: 100%;
    padding: 0;
  }
}


/**
 * Tablets
 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px),
only screen
and (min-width : 768px)
and (max-width : 1024px) {

  .centered {
    width: 96%;
  }

  .col-25-uneven-gutter {
    width: 46%;
    padding: 2%;
  }
  
  .col-25-uneven-gutter:first-child,
  .col-25-uneven-gutter:last-child {
    padding-left: 2%;
    padding-right: 2%;
  }
  
  .sticky-footer-content-wrap:after,
  .sticky-footer {
    height: 600px;
  }

  .sticky-footer-content-wrap {
    margin-bottom: -600px; 
  }

}

/**
 * Desktop/laptop
 */
@media only screen and (min-width : 1025px) {
  .centered {
    width: 980px;
  }
}


/**
 * Big screens
 */
@media only screen and (min-width : 1824px) {
  .centered {
    width: 1700px;
  }
}