/*
* Modena Flex Grid CSS
*
* @package Modena
* @since Modena 1.0.0
*/

.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.home .grid {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.blog .grid {
  max-width: 1200px;
}

.grid__row {
  display: flex;
  flex-direction: column; 
}

.grid__row--tablet {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.grid__item {
          flex: 1;
  padding: 0; }

.grid__item--1 {
  -webkit-flex-basis: 8.333%;
      -ms-flex-preferred-size: 8.333%;
          flex-basis: 8.333%;
  max-width: 8.333%; }

.grid__item--2 {
  -webkit-flex-basis: 16.666%;
      -ms-flex-preferred-size: 16.666%;
          flex-basis: 16.666%;
  max-width: 16.666%; }

.grid__item--3 {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%; }

.grid__item--4 {
  -webkit-flex-basis: 33.333%;
      -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
  max-width: 33.333%; }

.grid__item--5 {
  -webkit-flex-basis: 41.666%;
      -ms-flex-preferred-size: 41.666%;
          flex-basis: 41.666%;
  max-width: 41.666%; }

.grid__item--6 {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%; }

.grid__item--7 {
  -webkit-flex-basis: 58.333%;
      -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
  max-width: 58.333%; }

.grid__item--8 {
  -webkit-flex-basis: 66.666%;
      -ms-flex-preferred-size: 66.666%;
          flex-basis: 66.666%;
  max-width: 66.666%; }

.grid__item--9 {
  -webkit-flex-basis: 75%;
      -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
  max-width: 75%; }

.grid__item--10 {
  -webkit-flex-basis: 83.333%;
      -ms-flex-preferred-size: 83.333%;
          flex-basis: 83.333%;
  max-width: 83.333%; }

.grid__item--11 {
  -webkit-flex-basis: 91.666%;
      -ms-flex-preferred-size: 91.666%;
          flex-basis: 91.666%;
  max-width: 91.666%; }

.grid__item--12 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%; }

@media all and (max-width: 479px) {
  .grid__item--1, .grid__item--2, .grid__item--3, .grid__item--4, .grid__item--5, .grid__item--6, .grid__item--7, .grid__item--8, .grid__item--9, .grid__item--10, .grid__item--11, .grid__item--12 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%; } }

@media all and (min-width: 480px) and (max-width: 767px) {
  .grid__row--phone {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
  .grid__item--1, .grid__item--2, .grid__item--3, .grid__item--4, .grid__item--5, .grid__item--6, .grid__item--7, .grid__item--8, .grid__item--9, .grid__item--10, .grid__item--11, .grid__item--12 {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%; } }

@media all and (min-width: 767px) {
  .grid__row--tablet {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; } }

@media all and (min-width: 960px) {
  .grid__row--desktop {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; } }