/* ============================================ */
/* Simplified Unsemantic Grid System */
/* Mobile-first responsive grid */
/* ============================================ */

/* Base clearfix and container */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

.grid-container:before,
  .grid-container:after,
.clearfix:before,
  .clearfix:after {
  content: "";
  display: table;
}

.grid-container:after,
.clearfix:after {
    clear: both;
  }

  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }

/* Base grid classes */
[class*="grid-"],
[class*="mobile-grid-"] {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-parent {
    padding-left: 0;
    padding-right: 0;
  }

/* Mobile-first grid (default) */
.mobile-grid-5 { width: 5%; float: left; }
.mobile-grid-10 { width: 10%; float: left; }
.mobile-grid-15 { width: 15%; float: left; }
.mobile-grid-20 { width: 20%; float: left; }
.mobile-grid-25 { width: 25%; float: left; }
.mobile-grid-30 { width: 30%; float: left; }
.mobile-grid-33 { width: 33.33333%; float: left; }
.mobile-grid-35 { width: 35%; float: left; }
.mobile-grid-40 { width: 40%; float: left; }
.mobile-grid-45 { width: 45%; float: left; }
.mobile-grid-50 { width: 50%; float: left; }
.mobile-grid-55 { width: 55%; float: left; }
.mobile-grid-60 { width: 60%; float: left; }
.mobile-grid-65 { width: 65%; float: left; }
.mobile-grid-66 { width: 66.66667%; float: left; }
.mobile-grid-70 { width: 70%; float: left; }
.mobile-grid-75 { width: 75%; float: left; }
.mobile-grid-80 { width: 80%; float: left; }
.mobile-grid-85 { width: 85%; float: left; }
.mobile-grid-90 { width: 90%; float: left; }
.mobile-grid-95 { width: 95%; float: left; }
.mobile-grid-100 { width: 100%; clear: both; }

/* Mobile prefixes and suffixes */
.mobile-prefix-5 { margin-left: 5%; }
.mobile-prefix-10 { margin-left: 10%; }
.mobile-prefix-15 { margin-left: 15%; }
.mobile-prefix-20 { margin-left: 20%; }
.mobile-prefix-25 { margin-left: 25%; }
.mobile-prefix-30 { margin-left: 30%; }
.mobile-prefix-33 { margin-left: 33.33333%; }
.mobile-prefix-35 { margin-left: 35%; }
.mobile-prefix-40 { margin-left: 40%; }
.mobile-prefix-45 { margin-left: 45%; }
.mobile-prefix-50 { margin-left: 50%; }
.mobile-prefix-55 { margin-left: 55%; }
.mobile-prefix-60 { margin-left: 60%; }
.mobile-prefix-65 { margin-left: 65%; }
.mobile-prefix-66 { margin-left: 66.66667%; }
.mobile-prefix-70 { margin-left: 70%; }
.mobile-prefix-75 { margin-left: 75%; }
.mobile-prefix-80 { margin-left: 80%; }
.mobile-prefix-85 { margin-left: 85%; }
.mobile-prefix-90 { margin-left: 90%; }
.mobile-prefix-95 { margin-left: 95%; }

.mobile-suffix-5 { margin-right: 5%; }
.mobile-suffix-10 { margin-right: 10%; }
.mobile-suffix-15 { margin-right: 15%; }
.mobile-suffix-20 { margin-right: 20%; }
.mobile-suffix-25 { margin-right: 25%; }
.mobile-suffix-30 { margin-right: 30%; }
.mobile-suffix-33 { margin-right: 33.33333%; }
.mobile-suffix-35 { margin-right: 35%; }
.mobile-suffix-40 { margin-right: 40%; }
.mobile-suffix-45 { margin-right: 45%; }
.mobile-suffix-50 { margin-right: 50%; }
.mobile-suffix-55 { margin-right: 55%; }
.mobile-suffix-60 { margin-right: 60%; }
.mobile-suffix-65 { margin-right: 65%; }
.mobile-suffix-66 { margin-right: 66.66667%; }
.mobile-suffix-70 { margin-right: 70%; }
.mobile-suffix-75 { margin-right: 75%; }
.mobile-suffix-80 { margin-right: 80%; }
.mobile-suffix-85 { margin-right: 85%; }
.mobile-suffix-90 { margin-right: 90%; }
.mobile-suffix-95 { margin-right: 95%; }

/* Push and pull for mobile */
  .mobile-push-5,
.mobile-push-10,
.mobile-push-15,
.mobile-push-20,
.mobile-push-25,
.mobile-push-30,
.mobile-push-33,
.mobile-push-35,
.mobile-push-40,
.mobile-push-45,
.mobile-push-50,
.mobile-push-55,
.mobile-push-60,
.mobile-push-65,
.mobile-push-66,
.mobile-push-70,
.mobile-push-75,
.mobile-push-80,
.mobile-push-85,
.mobile-push-90,
.mobile-push-95,
.mobile-pull-5,
.mobile-pull-10,
.mobile-pull-15,
.mobile-pull-20,
.mobile-pull-25,
.mobile-pull-30,
.mobile-pull-33,
.mobile-pull-35,
.mobile-pull-40,
.mobile-pull-45,
.mobile-pull-50,
.mobile-pull-55,
.mobile-pull-60,
.mobile-pull-65,
.mobile-pull-66,
.mobile-pull-70,
.mobile-pull-75,
.mobile-pull-80,
.mobile-pull-85,
.mobile-pull-90,
.mobile-pull-95 {
    position: relative;
  }

.mobile-push-5 { left: 5%; }
.mobile-push-10 { left: 10%; }
.mobile-push-15 { left: 15%; }
.mobile-push-20 { left: 20%; }
.mobile-push-25 { left: 25%; }
.mobile-push-30 { left: 30%; }
.mobile-push-33 { left: 33.33333%; }
.mobile-push-35 { left: 35%; }
.mobile-push-40 { left: 40%; }
.mobile-push-45 { left: 45%; }
.mobile-push-50 { left: 50%; }
.mobile-push-55 { left: 55%; }
.mobile-push-60 { left: 60%; }
.mobile-push-65 { left: 65%; }
.mobile-push-66 { left: 66.66667%; }
.mobile-push-70 { left: 70%; }
.mobile-push-75 { left: 75%; }
.mobile-push-80 { left: 80%; }
.mobile-push-85 { left: 85%; }
.mobile-push-90 { left: 90%; }
.mobile-push-95 { left: 95%; }

.mobile-pull-5 { left: -5%; }
.mobile-pull-10 { left: -10%; }
.mobile-pull-15 { left: -15%; }
.mobile-pull-20 { left: -20%; }
.mobile-pull-25 { left: -25%; }
.mobile-pull-30 { left: -30%; }
.mobile-pull-33 { left: -33.33333%; }
.mobile-pull-35 { left: -35%; }
.mobile-pull-40 { left: -40%; }
.mobile-pull-45 { left: -45%; }
.mobile-pull-50 { left: -50%; }
.mobile-pull-55 { left: -55%; }
.mobile-pull-60 { left: -60%; }
.mobile-pull-65 { left: -65%; }
.mobile-pull-66 { left: -66.66667%; }
.mobile-pull-70 { left: -70%; }
.mobile-pull-75 { left: -75%; }
.mobile-pull-80 { left: -80%; }
.mobile-pull-85 { left: -85%; }
.mobile-pull-90 { left: -90%; }
.mobile-pull-95 { left: -95%; }

/* Visibility helpers */
  .hide-on-mobile {
    display: none !important;
  }

/* Desktop grid (768px and up) */
@media screen and (min-width: 768px) {
  .hide-on-desktop {
    display: none !important;
  }

  .grid-5 { width: 5%; float: left; }
  .grid-10 { width: 10%; float: left; }
  .grid-15 { width: 15%; float: left; }
  .grid-20 { width: 20%; float: left; }
  .grid-25 { width: 25%; float: left; }
  .grid-30 { width: 30%; float: left; }
  .grid-33 { width: 33.33333%; float: left; }
  .grid-35 { width: 35%; float: left; }
  .grid-40 { width: 40%; float: left; }
  .grid-45 { width: 45%; float: left; }
  .grid-50 { width: 50%; float: left; }
  .grid-55 { width: 55%; float: left; }
  .grid-60 { width: 60%; float: left; }
  .grid-65 { width: 65%; float: left; }
  .grid-66 { width: 66.66667%; float: left; }
  .grid-70 { width: 70%; float: left; }
  .grid-75 { width: 75%; float: left; }
  .grid-80 { width: 80%; float: left; }
  .grid-85 { width: 85%; float: left; }
  .grid-90 { width: 90%; float: left; }
  .grid-95 { width: 95%; float: left; }
  .grid-100 { width: 100%; clear: both; }

  /* Desktop prefixes and suffixes */
  .prefix-5 { margin-left: 5%; }
  .prefix-10 { margin-left: 10%; }
  .prefix-15 { margin-left: 15%; }
  .prefix-20 { margin-left: 20%; }
  .prefix-25 { margin-left: 25%; }
  .prefix-30 { margin-left: 30%; }
  .prefix-33 { margin-left: 33.33333%; }
  .prefix-35 { margin-left: 35%; }
  .prefix-40 { margin-left: 40%; }
  .prefix-45 { margin-left: 45%; }
  .prefix-50 { margin-left: 50%; }
  .prefix-55 { margin-left: 55%; }
  .prefix-60 { margin-left: 60%; }
  .prefix-65 { margin-left: 65%; }
  .prefix-66 { margin-left: 66.66667%; }
  .prefix-70 { margin-left: 70%; }
  .prefix-75 { margin-left: 75%; }
  .prefix-80 { margin-left: 80%; }
  .prefix-85 { margin-left: 85%; }
  .prefix-90 { margin-left: 90%; }
  .prefix-95 { margin-left: 95%; }

  .suffix-5 { margin-right: 5%; }
  .suffix-10 { margin-right: 10%; }
  .suffix-15 { margin-right: 15%; }
  .suffix-20 { margin-right: 20%; }
  .suffix-25 { margin-right: 25%; }
  .suffix-30 { margin-right: 30%; }
  .suffix-33 { margin-right: 33.33333%; }
  .suffix-35 { margin-right: 35%; }
  .suffix-40 { margin-right: 40%; }
  .suffix-45 { margin-right: 45%; }
  .suffix-50 { margin-right: 50%; }
  .suffix-55 { margin-right: 55%; }
  .suffix-60 { margin-right: 60%; }
  .suffix-65 { margin-right: 65%; }
  .suffix-66 { margin-right: 66.66667%; }
  .suffix-70 { margin-right: 70%; }
  .suffix-75 { margin-right: 75%; }
  .suffix-80 { margin-right: 80%; }
  .suffix-85 { margin-right: 85%; }
  .suffix-90 { margin-right: 90%; }
  .suffix-95 { margin-right: 95%; }

  /* Desktop push and pull */
  .push-5,
  .push-10,
  .push-15,
  .push-20,
  .push-25,
  .push-30,
  .push-33,
  .push-35,
  .push-40,
  .push-45,
  .push-50,
  .push-55,
  .push-60,
  .push-65,
  .push-66,
  .push-70,
  .push-75,
  .push-80,
  .push-85,
  .push-90,
  .push-95,
  .pull-5,
  .pull-10,
  .pull-15,
  .pull-20,
  .pull-25,
  .pull-30,
  .pull-33,
  .pull-35,
  .pull-40,
  .pull-45,
  .pull-50,
  .pull-55,
  .pull-60,
  .pull-65,
  .pull-66,
  .pull-70,
  .pull-75,
  .pull-80,
  .pull-85,
  .pull-90,
  .pull-95 {
    position: relative;
  }

  .push-5 { left: 5%; }
  .push-10 { left: 10%; }
  .push-15 { left: 15%; }
  .push-20 { left: 20%; }
  .push-25 { left: 25%; }
  .push-30 { left: 30%; }
  .push-33 { left: 33.33333%; }
  .push-35 { left: 35%; }
  .push-40 { left: 40%; }
  .push-45 { left: 45%; }
  .push-50 { left: 50%; }
  .push-55 { left: 55%; }
  .push-60 { left: 60%; }
  .push-65 { left: 65%; }
  .push-66 { left: 66.66667%; }
  .push-70 { left: 70%; }
  .push-75 { left: 75%; }
  .push-80 { left: 80%; }
  .push-85 { left: 85%; }
  .push-90 { left: 90%; }
  .push-95 { left: 95%; }

  .pull-5 { left: -5%; }
  .pull-10 { left: -10%; }
  .pull-15 { left: -15%; }
  .pull-20 { left: -20%; }
  .pull-25 { left: -25%; }
  .pull-30 { left: -30%; }
  .pull-33 { left: -33.33333%; }
  .pull-35 { left: -35%; }
  .pull-40 { left: -40%; }
  .pull-45 { left: -45%; }
  .pull-50 { left: -50%; }
  .pull-55 { left: -55%; }
  .pull-60 { left: -60%; }
  .pull-65 { left: -65%; }
  .pull-66 { left: -66.66667%; }
  .pull-70 { left: -70%; }
  .pull-75 { left: -75%; }
  .pull-80 { left: -80%; }
  .pull-85 { left: -85%; }
  .pull-90 { left: -90%; }
  .pull-95 { left: -95%; }
}