/*
  This is a simple CSS definition of a 12 column grid system to facilitate in the creation of
  responsive web templates.

  This style sheet does not include any actual style rules beyond the responsive size of each grid
  column
*/

/* MAKE ALL ELEMENTS USE AN UNIFORM BOX MODEL */
* {box-sizing: border-box;}

/* GRID ROW DEFINITIONS */
section, .row {}
section:after, .row:after {
  content:"";
  clear:both;
  display:block;
}

/* Screen specific elements */
.no-desktop {}
.no-laptop  {}
.no-mobile  {}
.no-tablet  {}

.only-desktop,
.only-laptop,
.only-tablet,
.only-mobile {display:none !important;}

/* GRID COLUMN DEFINITIONS */
[class*="grid-"] {
  float:left;
}

/* special no size box*/
.grid-0 {
  width:auto;
}

/* ALL SCREEN SIZES */
.grid-a-1  {width:8.33%;}
.grid-a-2  {width:16.66%;}
.grid-a-3  {width:25%;}
.grid-a-4  {width:33.33%;}
.grid-a-5  {width:41.66%;}
.grid-a-6  {width:50%;}
.grid-a-7  {width:58.33%;}
.grid-a-8  {width:66.66%;}
.grid-a-9  {width:75%;}
.grid-a-10 {width:83.33%;}
.grid-a-11 {width:91.66%;}
.grid-a-12 {width:100%;}

/* MOBILE GRID */
@media only screen and (max-width: 600px) {
  .grid-m-1  {width:8.33%;}
  .grid-m-2  {width:16.66%;}
  .grid-m-3  {width:25%;}
  .grid-m-4  {width:33.33%;}
  .grid-m-5  {width:41.66%;}
  .grid-m-6  {width:50%;}
  .grid-m-7  {width:58.33%;}
  .grid-m-8  {width:66.66%;}
  .grid-m-9  {width:75%;}
  .grid-m-10 {width:83.33%;}
  .grid-m-11 {width:91.66%;}
  .grid-m-12 {width:100%;}

  .no-mobile {display:none !important;}
  .only-mobile {display: block !important;}
}

/* TABLET GRID */
@media only screen and (max-width: 768px) and (min-width: 601px) {
  .grid-t-1  {width:8.33%;}
  .grid-t-2  {width:16.66%;}
  .grid-t-3  {width:25%;}
  .grid-t-4  {width:33.33%;}
  .grid-t-5  {width:41.66%;}
  .grid-t-6  {width:50%;}
  .grid-t-7  {width:58.33%;}
  .grid-t-8  {width:66.66%;}
  .grid-t-9  {width:75%;}
  .grid-t-10 {width:83.33%;}
  .grid-t-11 {width:91.66%;}
  .grid-t-12 {width:100%;}

  .no-tablet {display:none !important;}
  .only-tablet {display: block !important;}
}

/* LAPTOP GRID */
@media only screen and (min-width: 769px) and (max-width: 1366px) {
  .grid-l-1  {width:8.33%;}
  .grid-l-2  {width:16.66%;}
  .grid-l-3  {width:25%;}
  .grid-l-4  {width:33.33%;}
  .grid-l-5  {width:41.66%;}
  .grid-l-6  {width:50%;}
  .grid-l-7  {width:58.33%;}
  .grid-l-8  {width:66.66%;}
  .grid-l-9  {width:75%;}
  .grid-l-10 {width:83.33%;}
  .grid-l-11 {width:91.66%;}
  .grid-l-12 {width:100%;}

  .no-laptop {display:none !important;}
  .only-laptop {display: block !important;}
}

/* DESKTOP GRID */
@media only screen and (min-width: 1367px) {
  .grid-d-1  {width:8.33%;}
  .grid-d-2  {width:16.66%;}
  .grid-d-3  {width:25%;}
  .grid-d-4  {width:33.33%;}
  .grid-d-5  {width:41.66%;}
  .grid-d-6  {width:50%;}
  .grid-d-7  {width:58.33%;}
  .grid-d-8  {width:66.66%;}
  .grid-d-9  {width:75%;}
  .grid-d-10 {width:83.33%;}
  .grid-d-11 {width:91.66%;}
  .grid-d-12 {width:100%;}

  .no-desktop {display:none !important;}
  .only-desktop {display: block !important;}
}