.patch-container {
  width: 100%;
  display: flex;
  flex-flow: column;
  min-height: 100%;
  align-items: center; }

.patch-grid {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /*--cell fixed 5--*/
  /*--cell fixed 6--*/ }
  .patch-grid > .cell-fixed-1-5,
  .patch-grid > .cell-grid-1-3,
  .patch-grid > .cell-grid-1-5,
  .patch-grid > .cell-grid-1-6 {
    flex: 0 1 auto;
    min-width: 0; }
  .patch-grid > .cell-fixed-1-5 {
    width: calc(20%);
    max-width: calc(20%); }
  .patch-grid > .cell-fixed-2-5 {
    width: calc(40%);
    max-width: calc(40%); }
  .patch-grid > .cell-fixed-3-5 {
    width: calc(60%);
    max-width: calc(60%); }
  .patch-grid > .cell-fixed-4-5 {
    width: calc(80%);
    max-width: calc(80%); }
  .patch-grid > .cell-fixed-1-6 {
    width: calc(16.666666666%);
    max-width: calc(16.666666666%); }
  .patch-grid > .cell-fixed-2-6 {
    width: calc(33.333333333%);
    max-width: calc(33.333333333%); }
  .patch-grid > .cell-fixed-3-6 {
    width: calc(50%);
    max-width: calc(50%); }
  .patch-grid > .cell-fixed-4-6 {
    width: calc(66.666666666%);
    max-width: calc(66.666666666%); }
  .patch-grid > .cell-fixed-5-6 {
    width: calc(83.333333333%);
    max-width: calc(83.333333333%); }
  .patch-grid > .cell-grid-1-3 {
    width: calc(33.333333333%);
    max-width: calc(33.333333333%); }
  .patch-grid > .cell-grid-1-5 {
    width: calc(20%);
    max-width: calc(20%); }
  .patch-grid > .cell-grid-1-6 {
    width: calc(16.666666666%);
    max-width: calc(16.666666666%); }
  .patch-grid.cell-gap-20 > * {
    padding: 10px; }
  .patch-grid.cell-gap-20.align-lr {
    margin-left: -10px;
    margin-right: -10px; }
  .patch-grid.cell-gap-20.align-tb {
    margin-top: -10px;
    margin-bottom: -10px; }

.patch-auto {
  width: 70%;
  /*83.33333%;*/
  /*margin-left: 30px;
  margin-right: 30px;*/ }

.patch {
  display: flex;
  /*--cells--*/
  /*--cell md --*/
  /*use this for grid*/
  /*-- alignment --*/
  /*-- cell gap --*/ }
  .patch.flex-wrap {
    flex-wrap: wrap; }
  .patch > .cell {
    flex: 1 1; }
  .patch > .cell-auto {
    flex: 1 1 auto; }
  .patch > .cell-uniform {
    flex: 1 1 0; }
  .patch > .cell-md-1-1 {
    flex: 0 1 100%; }
  .patch > .cell-md-1-2 {
    flex: 0 1 50%; }
  .patch > .cell-md-1-3 {
    flex: 0 1 33.33333%; }
  .patch > .cell-md-1-4 {
    flex: 0 1 25%; }
  .patch > .cell-md-2-4 {
    flex: 0 1 50%; }
  .patch > .cell-md-3-4 {
    flex: 0 1 75%; }
  .patch.v-gap-20 {
    margin-left: -10px;
    margin-right: -10px;
    /*--cell md 2--*/
    /*--cell md 3--*/
    /*--cell md 4--*/ }
    .patch.v-gap-20 > * {
      margin-left: 10px;
      margin-right: 10px; }
    .patch.v-gap-20 > .cell-md-1-2 {
      flex: 0 1 calc( 50% - 20px ); }
    .patch.v-gap-20 > .cell-md-1-3 {
      flex: 0 1 calc( 33.33333% - 20px ); }
    .patch.v-gap-20 > .cell-md-2-3 {
      flex: 0 1 calc( 66.66666% - 20px ); }
    .patch.v-gap-20 > .cell-md-1-4 {
      flex: 0 1 calc( 25% - 20px ); }
    .patch.v-gap-20 > .cell-md-2-4 {
      flex: 0 1 calc( 50% - 20px ); }
    .patch.v-gap-20 > .cell-md-3-4 {
      flex: 0 1 calc( 75% - 20px ); }
  .patch.centered {
    justify-content: center;
    align-items: center;
    align-content: center; }
  .patch.centered-column {
    justify-content: center;
    align-items: center;
    align-content: center; }
  .patch.row-start {
    flex-direction: row;
    justify-content: flex-start; }
  .patch.row-center {
    flex-direction: row;
    justify-content: center; }
  .patch.row-end {
    flex-direction: row;
    justify-content: flex-end; }
  .patch.row-between {
    flex-direction: row;
    justify-content: space-between; }
  .patch.row-around {
    flex-direction: row;
    justify-content: space-around; }
  .patch.column-start {
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start; }
    .patch.column-start.stretch {
      align-items: stretch; }
  .patch.column-center {
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start; }
  .patch.column-end {
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-start; }
    .patch.column-end.stretch {
      align-items: stretch; }
  .patch.cell-v-gap-20 > *:not(:last-child) {
    margin-right: 20px; }
  .patch.cell-v-gap-40 > *:not(:last-child) {
    margin-right: 40px; }
  .patch.cell-v-gap-100 > *:not(:last-child) {
    margin-right: 100px; }

.auto {
  width: 70%; }

.self-center {
  align-self: center; }

.v-marg {
  margin-left: 30px;
  margin-right: 30px; }

.h-marg {
  margin-top: 40px;
  margin-bottom: 40px; }

/*------------------------------------------
 Desktops
------------------------------------------*/
@media (max-width: 1440px) {
  .patch-grid > .cell-grid-1-5 {
    width: calc(20%);
    max-width: calc(20%); }
  .patch-grid > .cell-grid-1-6 {
    width: calc(16.666666666%);
    max-width: calc(16.666666666%); } }
/*------------------------------------------
 Laptops, Desktops
------------------------------------------*/
@media (max-width: 1280px) {
  .patch-grid > .cell-grid-1-5 {
    width: calc(25%);
    max-width: calc(25%); }
  .patch-grid > .cell-grid-1-6 {
    width: calc(20%);
    max-width: calc(20%); }

  .patch.flow-col-1280 {
    flex-direction: column;
    flex-wrap: nowrap; }
    .patch.flow-col-1280 .cell {
      margin-left: 0;
      margin-right: 0; } }
/*------------------------------------------
 Tablets, Ipads
------------------------------------------*/
@media (max-width: 1024px) {
  .patch-grid > .cell-grid-1-3 {
    width: calc(50%);
    max-width: calc(50%); }
  .patch-grid > .cell-grid-1-5 {
    width: calc(33.33333%);
    max-width: calc(33.33333%); }
  .patch-grid > .cell-grid-1-6 {
    width: calc(25%);
    max-width: calc(25%); }

  .patch.flow-col-1024 {
    flex-direction: column;
    flex-wrap: nowrap; }
    .patch.flow-col-1024.cell-v-gap-20 > *:not(:last-child) {
      margin-right: 15px; }
    .patch.flow-col-1024.cell-v-gap-40 > *:not(:last-child) {
      margin-right: 30px; }
    .patch.flow-col-1024.cell-v-gap-100 > *:not(:last-child) {
      margin-right: 50px; }
    .patch.flow-col-1024 > * {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0;
      margin-right: 0; }

  /*.patch-auto{
      width: 80%;
  }*/ }
/*------------------------------------------
 Low Resolution Tablets, Mobiles (Landscape)
------------------------------------------*/
@media (max-width: 767px) {
  .patch-grid > .cell-grid-1-3 {
    width: calc(100%);
    max-width: calc(100%); }
  .patch-grid > .cell-grid-1-5 {
    width: calc(50%);
    max-width: calc(50%); }
  .patch-grid > .cell-grid-1-6 {
    width: calc(33.33333%);
    max-width: calc(33.33333%); }

  .patch.flow-col-767 {
    flex-direction: column;
    flex-wrap: nowrap; }
    .patch.flow-col-767.cell-v-gap-20 > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 15px; }
    .patch.flow-col-767.cell-v-gap-40 > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 25px; }
    .patch.flow-col-767.cell-v-gap-100 > *:not(:last-child) {
      margin-right: 0;
      margin-bottom: 35px; }
    .patch.flow-col-767 > * {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important; }

  .patch-auto {
    width: 80%; }

  .auto {
    width: 80%; } }
/*------------------------------------------
 Low Resolution Phone
------------------------------------------*/
@media (max-width: 472px) {
  .patch-grid {
            /*>.cell-grid-1-5{
                width: calc(100%);
                max-width: calc(100%);
            }

            >.cell-grid-1-6{
                width: calc(100%);
                max-width: calc(100%);
            }*/ }
    .patch-grid.flow-col-472 {
      flex-direction: column;
      flex-wrap: nowrap; }
      .patch-grid.flow-col-472 > * {
        width: 100% !important;
        max-width: 100% !important; }

  .patch.flow-col-472 {
    flex-direction: column;
    flex-wrap: nowrap; }
    .patch.flow-col-472 > * {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important; }

  .patch-auto {
    width: 90%; }

  .auto {
    width: 90%; }

  .hidden-472-down {
    display: none !important; } }
@media (min-width: 472px) {
  .hidden-472-up {
    display: none !important; } }

/*# sourceMappingURL=$patch-box.css.map */