/*
NOTE: Autprefixing is done with the in browser version see https://autoprefixer.github.io/

Using this support string
'last 4 versions, not ie <= 10, not ie_mob <= 10'
*/

.Grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

*[class*="Column"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 0;
          flex-grow: 0;
  flex-shrink: 0;
  padding: 0 8px;
}

@media only screen and (min-device-width: 426px) {
  .Desktop-Column-0 {
    display: none;
  }

  .Desktop-Column-1 {
    flex-basis: calc((100% / 12) * 1);
    max-width: calc((100% / 12) * 1);
  }

  .Desktop-Column-2 {
    flex-basis: calc((100% / 12) * 2);
    max-width: calc((100% / 12) * 2);
  }

  .Desktop-Column-3 {
    flex-basis: calc((100% / 12) * 3);
    max-width: calc((100% / 12) * 3);
  }

  .Desktop-Column-4 {
    flex-basis: calc((100% / 12) * 4);
    max-width: calc((100% / 12) * 4);
  }

  .Desktop-Column-5 {
    flex-basis: calc((100% / 12) * 5);
    max-width: calc((100% / 12) * 5);
  }

  .Desktop-Column-6 {
    flex-basis: calc((100% / 12) * 6);
    max-width: calc((100% / 12) * 6);
  }

  .Desktop-Column-7 {
    flex-basis: calc((100% / 12) * 7);
    max-width: calc((100% / 12) * 7);
  }

  .Desktop-Column-8 {
    flex-basis: calc((100% / 12) * 8);
    max-width: calc((100% / 12) * 8);
  }

  .Desktop-Column-9 {
    flex-basis:  calc((100% / 12) * 9);
    max-width: calc((100% / 12) * 9);
  }

  .Desktop-Column-10 {
    flex-basis:  calc((100% / 12) * 10);
    max-width: calc((100% / 12) * 10);
  }

  .Desktop-Column-11 {
    flex-basis: calc((100% / 12) * 11);
    max-width: calc((100% / 12) * 11);
  }

  .Desktop-Column-12 {
    flex-basis: 100%;
    max-width: 100;
  }
}


@media only screen and (max-device-width: 425px) {
  .Mobile-Column-0 {
    display: none;
  }

  .Mobile-Column-1 {
    flex-basis: calc((100% / 6) * 1);
    max-width: calc((100% / 6) * 1);
  }

  .Mobile-Column-5 {
    flex-basis: calc((100% / 6) * 5);
    max-width: calc((100% / 6) * 5);
  }

  .Mobile-Column-6 {
    flex-basis: calc((100% / 6) * 6);
    max-width: calc((100% / 6) * 6);
  }

  .Mobile-Column-3 {
    flex-basis: calc((100% / 6) * 3);
    max-width: calc((100% / 6) * 3);
  }
}

@media only screen and (max-device-width: 768px) {
  .Tablet-Column-3 {
    flex-basis: calc((100% / 6) * 3);
    max-width: calc((100% / 6) * 3);
  }
}

@media print {
  *[class*="Column"] {
    flex-shrink: 1;
  }
}