/* =============================================================================
   Float clearing
   ========================================================================== */

.grid .knock-out:before,
.grid .knock-out:after,
.grid .nest:before,
.grid .nest:after,
.grid .grid-stretch:before,
.grid .grid-stretch:after,
.grid:before,
.grid:after { content: ""; display: table; }

.grid .knock-out:after,
.grid .nest:after,
.grid .grid-stretch:after,
.grid:after { clear:both; }


.grid {
  max-width: 1140px;
  padding-right: 28px;
  margin-left: auto;
  margin-right: auto;
}

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

.leaderboard-section, .reviews-section, .menu-section, .gallery-section, .main-content-section, .virtual-tour-section,
#edit .grid { margin-left: 28px; margin-right: 28px; }

.venue-summary .leaderboard-section,
.venue-summary .reviews-section,
.venue-summary .menu-section,
.venue-summary .gallery-section,
.venue-summary .main-content-section,
.venue-summary .virtual-tour-section { border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px;}
}

/* Show anf hide on mobile/tablet classes */

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

@media (max-width: 468px) {
  .show-only-on-mobile { display: block !important; }
  .hide-on-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 979px) {
  .hide-on-tablet { display: none !important; }
}

  /* 1 column = 100/12 (we have 12 columns in our grid) */

  .grid .col {
    float: left;
    width: 8.3333333333%;
    padding-left: 2em; /* Create gutters */
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }


/* =============================================================================
   Multi-span columns (unnested)
   ========================================================================== */

.grid .cs-2  { width: 16.666666667%;  }
.grid .cs-3  { width: 25%;            }
.grid .cs-4  { width: 33.3333333333%; }
.grid .cs-5  { width: 41.67%;         }
.grid .cs-6  { width: 50%;            }
.grid .cs-7  { width: 58.32%;         } /* Should be 58.3333333333% */
.grid .cs-8  { width: 66.66%;         } /* Should be 66.67%         */
.grid .cs-9  { width: 75%;            }
.grid .cs-10 { width: 83.3333333333%; }
.grid .cs-11 { width: 91.67%;         }
.grid .cs-12 { width: 100%;           }


/* =============================================================================
   Nested columns
   ========================================================================== */

.grid .nest { margin-left: -28px; }

/* Nesting within .cs-2 */

.grid .cs-2 .col { width: 50%;                }

/* Nesting within .cs-3 */

.grid .cs-3 .col  { width: 33.3333333333%;    }
.grid .cs-3 .cs-2 { width: 66.6666666666%;    }

/* Nesting within .cs-4 */

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

/* Nesting within .cs-5 */

.grid .cs-5 .col  { width: 20%;               }
.grid .cs-5 .cs-2 { width: 40%;               }
.grid .cs-5 .cs-3 { width: 60%;               }
.grid .cs-5 .cs-4 { width: 80%;               }

/* Nesting within .cs-6 */

.grid .cs-6 .col  { width: 16.65%;            }
.grid .cs-6 .cs-2 { width: 33.3333333333%;    }
.grid .cs-6 .cs-3 { width: 50%;               }
.grid .cs-6 .cs-4 { width: 66.6666666666%;    }
.grid .cs-6 .cs-5 { width: 83.35%;            }

/* Nesting within .cs-7 */

.grid .cs-7 .col  { width: 14.2857142857143%; }
.grid .cs-7 .cs-2 { width: 28.5714285714286%; }
.grid .cs-7 .cs-3 { width: 42.8571428571429%; }
.grid .cs-7 .cs-4 { width: 57.1428571428572%; }
.grid .cs-7 .cs-5 { width: 71.43%;            }

/* Nesting within .cs-8 */

.grid .cs-8 .col  { width: 12.5%;             }
.grid .cs-8 .cs-2 { width: 25%;               }
.grid .cs-8 .cs-3 { width: 37.5%;             }
.grid .cs-8 .cs-4 { width: 50%;               }
.grid .cs-8 .cs-5 { width: 62.5%;             }
.grid .cs-8 .cs-6 { width: 75%;               }

/* Nesting within .cs-9 */

.grid .cs-9 .col  { width: 11.1111111111%;    }
.grid .cs-9 .cs-2 { width: 22.2222222222%;    }
.grid .cs-9 .cs-3 { width: 33.3333333333%;    }
.grid .cs-9 .cs-4 { width: 44.4444444444%;    }
.grid .cs-9 .cs-5 { width: 55.5555555555%;    }
.grid .cs-9 .cs-6 { width: 66.6666666666%;    }
.grid .cs-9 .cs-7 { width: 77.7777777777%;    }
.grid .cs-9 .cs-8 { width: 88.8888888888%;    }

/* Nesting within .cs-10 */

.grid .cs-10 .col  { width: 10%;              }
.grid .cs-10 .cs-2 { width: 20%;              }
.grid .cs-10 .cs-3 { width: 30%;              }
.grid .cs-10 .cs-4 { width: 40%;              }
.grid .cs-10 .cs-5 { width: 50%;              }
.grid .cs-10 .cs-6 { width: 60%;              }
.grid .cs-10 .cs-7 { width: 70%;              }
.grid .cs-10 .cs-8 { width: 80%;              }
.grid .cs-10 .cs-9 { width: 90%;              }


/* =============================================================================
   Universals
   ========================================================================== */

/* Universal .half */

.grid .col.half { width: 50%; }

/* Universal .third */

.grid .col.third { width: 33.3333333333%; }

/* Universal .quarter */

.grid .col.quarter { width: 25%; }


/* =============================================================================
   Skip Classes (1st level only)
   ========================================================================== */

.grid .col.skip-1  { margin-left: 8.3%;  }
.grid .col.skip-2  { margin-left: 16.6666666666%; }
.grid .col.skip-3  { margin-left: 24.9999999999%; }
.grid .col.skip-4  { margin-left: 33.3333333332%; }
.grid .col.skip-5  { margin-left: 41.6666666665%; }
.grid .col.skip-6  { margin-left: 49.9999999998%; }
.grid .col.skip-7  { margin-left: 58.3333333331%; }
.grid .col.skip-8  { margin-left: 66.6666666664%; }
.grid .col.skip-9  { margin-left: 74.9999999997%; }
.grid .col.skip-10 { margin-left: 83.333333333%;  }
.grid .col.skip-11 { margin-left: 91.6666666663%; }


/* =============================================================================
   Clear classes
   ========================================================================== */

.grid .clearBefore { clear: left;  }
.grid .clearAfter  { clear: right; }
.grid .clear,
.grid .clearBoth   { clear: both;  }


/* =============================================================================
   Reversing float directions of the columns
   ========================================================================== */

.grid .col.contra { float: right; }


/* =============================================================================
   Knock out of the grid to enable backgrounds with padding
   ========================================================================== */

.grid .knock-out {
  margin-left:  -28px;
  margin-right: -28px;
  padding-left:  28px;
  padding-right: 28px;
}


/* =============================================================================
   Knock out of the grid to enable backgrounds in full grid width with padding
   ========================================================================== */

 .grid .grid-stretch {
  margin-left:  0;
  margin-right: -28px;
  padding-left:  28px;
  padding-right: 28px;
 }


/* =============================================================================
   Elements that aren't columns but need alignment from the left
   ========================================================================== */

.grid .pad      { margin-left: 2em;                    }
.grid .col .pad { margin-left: 2em; margin-right: 2em; }


/* =============================================================================
   Null the left gutter for nested columns
   ========================================================================== */

.grid .col.first { padding-left: 0; }


/* =============================================================================
   Media queries
   ========================================================================== */

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

  .grid {
    margin: 0 28px;
    padding-right: 0;
    width: auto;
  }

    .grid .col .col,
    .grid .col {
      display: block;
      float: none;
      width: auto;
      padding-left: 0;
    }

    .grid .pad {
      margin-left: 0;
    }

    .grid .col.contra {
      float: none;
    }

    .grid .col.skip-1,
    .grid .col.skip-2,
    .grid .col.skip-3,
    .grid .col.skip-4,
    .grid .col.skip-5,
    .grid .col.skip-6,
    .grid .col.skip-7,
    .grid .col.skip-8,
    .grid .col.skip-9,
    .grid .col.skip-10,
    .grid .col.skip-11 {
      margin-left: 0;
    }

    .grid .nest {
      margin-left: 0;
      margin-right: 0;
    }

    .grid .knock-out {
      margin-left:  0;
      margin-right: 0;
    }

    .grid .grid-stretch {
    margin-left:  0;
    margin-right: 0;
    }


} /* max-width: 768px; */