/* ====================================================
 * Company: Unity Technologies
 * Contributors: 
   - Rickard Andersson, rickard@unity3d.com
 *
======================================================= */

/****************************************
  ==== GRID
****************************************/

.gw {
  width: 100%; max-width: 1280px; margin: 0 auto; text-align: left; padding: 0 30px;
}
.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 30px; float: left;
}
.nest {
  padding: 0 !important;
}
.g-center {
  float: none; margin: 0 auto;
}
.g1 { width: 8.33333333333% }
.g2 { width: 16.6666666667% }
.g1-5 { width: 20% }
.g3 { width: 25% }
.g4 { width: 33.3333333334% }
.g5 { width: 41.6666666667% }
.g6 { width: 50% }
.g7 { width: 58.3333333333% }
.g8 { width: 66.6666666667% }
.g9 { width: 75% }
.g10 { width: 83.333333333% }
.g11 { width: 91.666666667% }
.g12 { width: 100% }

.g-center.g1 { width: 100%; max-width: 128px; }
.g-center.g2 { width: 100%; max-width: 256px; }
.g-center.g1-5 { width: 100%; max-width: 308px; }
.g-center.g3 { width: 100%; max-width: 385px; }
.g-center.g4 { width: 100%; max-width: 513px; }
.g-center.g5 { width: 100%; max-width: 641px; }
.g-center.g6 { width: 100%; max-width: 770px; }
.g-center.g7 { width: 100%; max-width: 898px; }
.g-center.g8 { width: 100%; max-width: 1026px; }
.g-center.g9 { width: 100%; max-width: 1155px; }
.g-center.g10 { width: 100%; max-width: 1283px; }
.g-center.g11 { width: 100%; max-width: 1411px; }
.g-center.g12 { width: 100%; max-width: 1540px; }

.group .g1, .group .g2, .group .g1-5, .group .g3, .group .g4, .group .g5, .group .g6, .group .g7, .group .g8, .group .g9, .group .g10, .group .g11, .group .g12 {
  padding: 15px;
}
.group, .group.nest {
  padding: 15px !important;
}

/****************************************
  ==== BREAKPOINT < 1024px
****************************************/

@media only screen and (min-width: 150px) and (max-width: 1023px){

.gw {
  padding: 0 20px;
}
.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 20px;
}

.group .g1, .group .g2, .group .g1-5, .group .g3, .group .g4, .group .g5, .group .g6, .group .g7, .group .g8, .group .g9, .group .g10, .group .g11, .group .g12 {
  padding: 10px;
}
.group, .group.nest {
  padding: 10px !important;
}

}

/****************************************
  ==== BREAKPOINT < 768px
****************************************/

@media only screen and (min-width: 150px) and (max-width: 767px){

/* Grid */
.gw {
  padding: 0 15px;
}
.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 15px;
}
.g1 { width: 8.33333333333% }
.g2 { width: 16.6666666667% }
.g1-5 { width: 50% }
.g3 { width: 50% }
.g4 { width: 100% }
.g5 { width: 100% }
.g6 { width: 100% }
.g7 { width: 100% }
.g8 { width: 100% }
.g9 { width: 100% }
.g10 { width: 100% }
.g11 { width: 91.666666667% }
.g12 { width: 100% }

.group, .group.nest {
  padding: 5px !important;
}

}

/****************************************
  ==== BREAKPOINT < 480px
****************************************/

@media only screen and (min-width: 150px) and (max-width: 479px){

.gw {
  padding: 0 10px;
}
.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 10px;
}
.group, .group.nest {
  padding: 0 !important;
}

}