*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
}

.container::after,
.container::before {
  content: "";
  display: table;
  clear: both;
}

/* grid 12 colunas porcentagem*/
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  float: left;
  display: block;
  min-height: 1px; /* isso garante que células vazias de conteúdo, no grid, ocupem o espaço certo de colunas */
  margin-left: 10px;
  margin-right: 10px;
}

.grid-1 {
  /* 20px margin gutter */
  width: calc(8.333% - 20px);
}
.grid-2 {
  width: calc(16.666% - 20px);
}
.grid-3 {
  width: calc(25% - 20px);
}
.grid-4 {
  width: calc(33.333% - 20px);
}
.grid-5 {
  width: calc(41.666% - 20px);
}
.grid-6 {
  width: calc(50% - 20px);
}
.grid-7 {
  width: calc(58.333% - 20px);
}
.grid-8 {
  width: calc(66.666% - 20px);
}
.grid-9 {
  width: calc(75% - 20px);
}
.grid-10 {
  width: calc(83.333% - 20px);
}
.grid-11 {
  width: calc(91.666% - 20px);
}
.grid-12 {
  width: calc(100% - 20px);
}

@media only screen and (min-width: 1279px) and (max-width: 1440px) {
  .container {
    max-width: 1040px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1278px) {
  .container {
    max-width: 768px;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    max-width: 300px;
  }
  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7,
  .grid-8,
  .grid-9,
  .grid-10,
  .grid-11,
  .grid-12 {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    float: none;
  }
}